提交

src/components/public/head.vue

@@ -1,40 +1,44 @@
 <template>
-    <header class="container-header">
+    <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="https://oss.gter.net/avatar/97KwEWIDY-QTHTXcpEbnWQxaRv6Xz0ll1wRhYWNh/middle?random=1687145465">
         </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>
 
-        <div class="container-header-bj"></div>
+
+        <nav class="nav-box flexflex">
+            <div class="nav-list wid1200 flexflex">
+                <div class="nav-item" v-for="item in tabList" :key="item">{{ item.name }}</div>
+            </div>
+        </nav>
     </header>
 </template>
 
-<script>
-export default {
-    name: 'ZufangHead',
+<script setup>
+const navList = ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"]
 
-    data() {
-        return {
-            navList: ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"],
+const tabList = [{
+    name: '首页',
+}, {
+    name: '个人房源'
+}, {
+    name: '中介房源'
+}, {
+    name: '品牌公寓'
+}, {
+    name: '求房源'
+}, {
+    name: '我的'
+}
+]
 
-        };
-    },
-
-    mounted() {
-
-    },
-
-    methods: {
-
-    },
-};
 </script>
 
 <style lang="less">
@@ -45,37 +49,38 @@ export default {
     height: 260px;
     margin: 0 auto;
 
-
-    .container-header-bj {
-        width: 100vw;
-        min-width: 1200px;
-        height: 260px;
-        background-image: url('@/assets/img/edit/bj-img1920.png');
-        background-repeat: no-repeat;
-        background-position: center;
+    .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%;
-            min-width: 1200px;
-            max-width: 1920px;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.698039215686274);
         }
     }
 
+
+
     .header-nav {
         height: 46px;
         width: 1200px;
         justify-content: flex-end;
         margin: 0 auto;
-        position: relative;
         z-index: 1;
         cursor: pointer;
 
@@ -112,7 +117,6 @@ export default {
     }
 
     .logo-box {
-        position: relative;
         margin: 21px auto 0;
         width: 1200px;
         z-index: 1;
@@ -128,5 +132,23 @@ export default {
             margin-left: 9px;
         }
     }
+
+    .nav-box {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        margin: 0 auto;
+        width: 100%;
+        height: 43px;
+        background: rgba(0, 0, 0, 0.596078431372549);
+        border-bottom: 4px solid rgba(78, 144, 204, 1);
+
+        .nav-list {
+            background: red;
+            margin: 0 auto;
+        }
+
+    }
 }
 </style>