gterFang/src/components/public/head.vue

<template>
    <header class="container-header flexflex">
        <nav class="header-nav flexacenter">
            <div class="header-nav-item" :class="{ pitch: index == 3 }" v-for="(item, index) in navList" :key="index">{{ item }}</div>
            <img class="header-nav-item header-user-img" :src="user.avatar">
        </nav>
        <div class="logo-box flexacenter">
            <img class="logo-icon" src="@/assets/img/edit/logo.png" />
            <img class="logo-text" src="@/assets/img/edit/logo-text.png" />
        </div>
        <div class="header-bj-box"></div>


        <nav class="nav-box flexflex" v-if="!isNoTabList">
            <div class="nav-list wid1200 flexflex">
                <!-- <<<<<<< HEAD
                <div class="nav-item flexcenter" :class="{ pitch: item['name'] == '我的' }" v-for="item in tabList"
                    :key="item">{{ item.name }}</div>
======= -->
                <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in tabList"
                    :key="i">
                    <el-badge :value="12">
                        <div class="pd-rl-10">
                            {{ item.name }}
                        </div>
                    </el-badge>

                </div>
                <!-- >>>>>>> origin/main -->
            </div>
        </nav>
    </header>
</template>

<script setup>

// 是否不需要导航栏
const props = defineProps({
    isNoTabList: {
        type: Boolean,
        default: false
    },
    user: Object,
});

const navList = ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"]

const tabList = [{
    name: '首页',
    value: "index"
}, {
    name: '个人房源',
    value: "personage"
}, {
    name: '中介房源',
    value: "intermediary"
}, {
    name: '品牌公寓',
    value: "brand"
}, {
    name: '求房源',
    value: "asking"
}, {
    name: '我的',
    value: "user"
}]

</script>

<style lang="less">
// 头部是公共的 特殊处理
.container-header {
    flex-direction: column;
    position: relative;
    height: 260px;
    margin: 0 auto;

    .header-bj-box {
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('@/assets/img/edit/bj-img1920.png');
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 260px;
        background-size: cover;
        z-index: -1;

        &::after {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.698039215686274);
        }
    }



    .header-nav {
        height: 46px;
        width: 1200px;
        justify-content: flex-end;
        margin: 0 auto;
        z-index: 1;
        cursor: pointer;

        .header-nav-item {
            color: rgba(215, 215, 215, 0.988235294117647);
            font-size: 14px;
            font-weight: 400;
            margin-left: 24px;

            &.pitch {
                color: #62B1FF;
                font-weight: 650;
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -3px;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    border-radius: 28px;
                    background-color: rgba(98, 177, 255, 1);

                }
            }
        }

        .header-user-img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }
    }

    .logo-box {
        margin: 21px auto 0;
        width: 1200px;
        z-index: 1;

        .logo-icon {
            width: 30px;
            height: 31px;
        }

        .logo-text {
            width: 173px;
            height: 31px;
            margin-left: 9px;
        }
    }

    .nav-box {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto;
        width: 100%;
        // <<<<<<< HEAD
        //         height: 47px;
        // =======
        height: 50px;
        // >>>>>>> origin/main
        background: rgba(0, 0, 0, 0.596078431372549);
        border-bottom: 4px solid rgba(78, 144, 204, 1);

        .nav-list {
            // <<<<<<< HEAD
            //             // background: red;
            //             color: #e2edf7;
            //             font-size: 18px;
            // =======
            color: #E2EDF7;
            text-align: center;
            // >>>>>>> origin/main
            margin: 0 auto;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            height: 47px;

            .nav-item {
                margin-right: 40px;
                cursor: pointer;
                height: 43px;

                &:hover {
                    color: #fff;
                }

                &.pitch {
                    border-width: 0px;
                    padding: 0 42px;
                    height: 43px;
                    background-color: rgba(98, 177, 255, 1);
                    border-radius: 8px 8px 0 0;
                    font-weight: 650;
                    font-style: normal;
                    font-size: 18px;
                    color: #FFFFFF;
                    margin: 0;
                }
            }
        }

    }
}

.tab-btn {
    width: 120px;
    height: 46px;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    color: #E2EDF7;
    display: flex;
    justify-content: center;
    align-items: center;

    .pd-rl-10 {
        padding: 0 10px;
    }
}

.tab-btn-click {
    background-color: rgba(98, 177, 255, 1);
    border: none;
    border-bottom: 0px;
    border-radius: 8px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 18px;
    color: #FFFFFF;
}

.carousel-img {
    margin: 0 auto;
    width: 660px;
    height: 280px;
}
</style>