提交

src/components/public/head.vue

@@ -0,0 +1,130 @@
+<template>
+    <header class="container-header">
+        <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="container-header-bj"></div>
+    </header>
+</template>
+
+<script>
+export default {
+    name: 'ZufangHead',
+
+    data() {
+        return {
+            navList: ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"],
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less">
+// 头部是公共的 特殊处理
+.container-header {
+    flex-direction: column;
+    position: relative;
+    height: 260px;
+    margin: 0 auto;
+
+
+    .container-header-bj {
+        width: 100vw;
+        height: 260px;
+        background-image: url('@/assets/img/edit/bj-img1920.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        position: absolute;
+        top: 0;
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100vw;
+            max-width: 1920px;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.698039215686274);
+        }
+    }
+
+    .header-nav {
+        height: 46px;
+        max-width: 1200px;
+        justify-content: flex-end;
+        margin: 0 auto;
+        position: relative;
+        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 {
+        position: relative;
+        margin: 21px auto 0;
+        max-width: 1200px;
+        z-index: 1;
+
+        .logo-icon {
+            width: 30px;
+            height: 31px;
+        }
+
+        .logo-text {
+            width: 173px;
+            height: 31px;
+            margin-left: 9px;
+        }
+    }
+}
+</style>