选择身份

src/components/public/head.vue

@@ -13,31 +13,46 @@
         <div class="header-bj-box"></div>
 
 
-        <nav class="nav-box flexflex">
+        <nav class="nav-box flexflex" v-if="!isNoTabList">
             <div class="nav-list wid1200 flexflex">
-                <div class="nav-item" v-for="item in tabList" :key="item">{{ item.name }}</div>
+                <div class="nav-item flexcenter" :class="{ pitch: item['name'] == '我的' }" v-for="item in tabList"
+                    :key="item">{{ item.name }}</div>
             </div>
         </nav>
     </header>
 </template>
 
 <script setup>
+
+// 是否不需要导航栏
+const props = defineProps({
+    isNoTabList: {
+        type: Boolean,
+        default: false
+    }
+});
+
 const navList = ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"]
 
 const tabList = [{
     name: '首页',
+    value: "index"
 }, {
-    name: '个人房源'
+    name: '个人房源',
+    value: "personage"
 }, {
-    name: '中介房源'
+    name: '中介房源',
+    value: "intermediary"
 }, {
-    name: '品牌公寓'
+    name: '品牌公寓',
+    value: "brand"
 }, {
-    name: '求房源'
+    name: '求房源',
+    value: "asking"
 }, {
-    name: '我的'
-}
-]
+    name: '我的',
+    value: "user"
+}]
 
 </script>
 
@@ -140,13 +155,41 @@ const tabList = [{
         transform: translateX(-50%);
         margin: 0 auto;
         width: 100%;
-        height: 43px;
+        height: 47px;
         background: rgba(0, 0, 0, 0.596078431372549);
         border-bottom: 4px solid rgba(78, 144, 204, 1);
 
         .nav-list {
-            background: red;
+            // background: red;
+            color: #e2edf7;
+            font-size: 18px;
             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;
+                }
+            }
         }
 
     }