sannongzixunwang_web/components/topic/head.vue

<template>
    <div>
        <div class="head">
            <div class="inner">
                <div class="headLogo left">
                    <img src="../../static/images/image 36.png" alt="">
                    <!-- <span>{{ props.title }}</span> -->
                    <span>商圈</span>
                </div>
                <div class="right">
                    <span>
                        <em class="home"></em>
                        设为首页
                    </span>
                    <span>
                        <em class="collection"></em>
                        加入收藏
                    </span>
                </div>
            </div>
        </div>
        <div class="tips">
            <div class="inner">
                <p v-show="false">注意：广告购买需提交信息，用户与商务人员进行线下金额交易，交易成功后由商务人员后台审核。审核通过，即广告投放成功。</p>
            </div>
        </div>
    </div>

</template>

<script setup>
const props = defineProps({
    title: String
});
</script>

<style lang="less" scoped>
// 广告页面头部
.head {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .inner {
        width: 1200px;
        height: 27px;
    }

    .headLogo {
        >img {
            width: 127px;
            height: 27px;
            padding-right: 15px;
            vertical-align: -10px;
            border-right: 1px solid #999;
        }

        >span {
            display: inline-block;
            width: 100px;
            padding-left: 15px;
            vertical-align: middle;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            line-height: 21px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .right {
        span {
            margin-left: 26px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .home,
        .collection {
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: -3px;
        }

        .home {
            background-image: url("../../static/images/Iconly／Light／Home.png");
        }

        .collection {
            background-image: url("../../static/images/Iconly／Light／Star.png");
        }
    }
}

//提示信息
.tips {
    width: 100%;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .inner {
        width: 1200px;
        height: 70px;
    }

    p {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #FE0101;
        // line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}
</style>