u

code/link56/link56-frontend-new/src/layout/components/header.vue

@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+const props = defineProps({
+  isLogined: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const route = useRoute()
+
+const menuList = [
+  { name: '首页', path: '/' },
+  { name: '企业名录', path: '/companies' },
+  { name: '论坛中心', path: '/forum' },
+  { name: '关于我们', path: '/companies' },
+  { name: '联系我们', path: '/forum' },
+]
+</script>
+
+<template>
+  <header class="header">
+    <nav class="container">
+      <img src="/logo.png" class="logo">
+      <div class="menu">
+        <span
+          v-for="item in menuList"
+          :key="item.path"
+          :class="{ active: route.path.startsWith(item.path) }"
+          class="menu-item"
+        >
+          <span class="menu-item-name">
+            {{ item.name }}
+          </span>
+        </span>
+      </div>
+      <div class="action">
+        <i-tdesign:search class="action-item" />
+
+        <i-tdesign:notification v-if="props.isLogined" class="action-item" />
+
+        <template v-if="props.isLogined">
+          <el-divider direction="vertical" />
+
+          <el-dropdown>
+            <div class="user">
+              <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+              <span class="name">
+                远通G3
+              </span>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>个人中心</el-dropdown-item>
+                <el-dropdown-item>退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+
+        <template v-else>
+          <el-button type="primary" round>
+            登录
+          </el-button>
+        </template>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 99;
+  background-color: #fff;
+
+  .container {
+    width: 100%;
+    padding: 0rem 3rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 60px;
+    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
+    .logo {
+      width: 160px;
+      height: 50px;
+    }
+
+    .menu {
+      display: flex;
+      align-items: center;
+      .menu-item {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        color: #000;
+        outline: none;
+        margin-left: 36px;
+        transition: color 0.3s ease;
+        position: relative;
+
+        &:hover {
+          color: #0f6fec !important;
+        }
+        &:first-child {
+          margin-left: 0px;
+        }
+
+        &.active {
+          color: #0f6fec !important;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -4px;
+          left: 50%;
+          width: 0;
+          height: 2px;
+          background-color: #0f6fec;
+          transition: all 0.3s ease;
+          transform: translateX(-50%);
+        }
+
+        &:hover::after {
+          width: 100%;
+        }
+
+        &.active::after {
+          width: 100%;
+        }
+
+        .menu-item-name {
+          font-size: 18px;
+          font-weight: 400;
+        }
+      }
+    }
+
+    .action {
+      display: flex;
+      align-items: center;
+      .action-item {
+        font-size: 20px;
+        margin-right: 24px;
+        color: #000;
+        cursor: pointer;
+        &:last-child {
+          margin-right: 0px;
+        }
+      }
+
+      .user {
+        margin-left: 24px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        outline: 0;
+        .name {
+          margin-left: 8px;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
+</style>