修改首页顶部导航栏

web/src/views/HomeView.vue

@@ -1,54 +1,51 @@
 <template>
   <div class="home-view">
     <header class="top-navigation">
+      <!-- 左侧标题 -->
       <div class="nav-left">
         <div class="nav-title">湖北健康生活与康居环境设计研究中心</div>
         <div class="nav-subtitle">湖北省高校人文社会科学重点研究基地</div>
       </div>
-      <el-menu
-        class="nav-right"
 
-        background-color="#b50009"
-        text-color="#fff"
-        active-text-color="#ffd700"
-        :default-active="activeIndex"
-        @select="handleSelect"
-        router
-      >
-        <el-menu-item index="/">首页</el-menu-item>
-        <el-menu-item index="/base-overview">基地概况</el-menu-item>
-        <el-menu-item index="/scientific-research">科学研究</el-menu-item>
-        <el-menu-item index="/academic-exchange">学术交流</el-menu-item>
-        <el-menu-item index="/social-service">社会服务</el-menu-item>
-        <el-menu-item index="/case-resources">案例资源</el-menu-item>
-      </el-menu>
+      <!-- 右侧导航（原生 ul + router-link） -->
+      <nav class="nav-right">
+        <ul class="nav-list">
+          <li class="nav-item">
+            <router-link to="/" :class="{ active: route.path === '/' }">首页</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link to="/base-overview" :class="{ active: route.path === '/base-overview' }">基地概况</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link to="/scientific-research" :class="{ active: route.path === '/scientific-research' }">科学研究</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link to="/academic-exchange" :class="{ active: route.path === '/academic-exchange' }">学术交流</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link to="/social-service" :class="{ active: route.path === '/social-service' }">社会服务</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link to="/case-resources" :class="{ active: route.path === '/case-resources' }">案例资源</router-link>
+          </li>
+        </ul>
+      </nav>
     </header>
+
     <router-view />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { ElMenu, ElMenuItem } from 'element-plus';
 
 const route = useRoute();
-const activeIndex = ref('/');
-
-const handleSelect = (index: string) => {
-  activeIndex.value = index;
-};
-
-watch(
-  () => route.path,
-  (newPath) => {
-    activeIndex.value = newPath;
-  },
-  { immediate: true }
-);
 </script>
 
 <style scoped>
+/* ────────────────────────────────────────
+   整体布局
+   ──────────────────────────────────────── */
 .top-navigation {
   display: flex;
   justify-content: space-between;
@@ -59,14 +56,90 @@ watch(
   width: 100%;
   box-sizing: border-box;
 }
-.nav-left { display: flex; flex-direction: column; line-height: 1.4; }
-.nav-title { font-size: 18px; font-weight: bold; }
-.nav-subtitle { font-size: 12px; opacity: 0.9; }
-.nav-right { display: flex; align-items: center; }
-:deep(.el-menu--horizontal) { border-bottom: none !important; }
-.el-menu-item { padding: 0 20px !important; font-size: 16px; }
+
+.nav-left {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.4;
+}
+
+.nav-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.nav-subtitle {
+  font-size: 12px;
+  opacity: 0.9;
+}
+
+.nav-right {
+  display: flex;
+  align-items: center;
+}
+
+/* ────────────────────────────────────────
+   导航列表（完全替代 el-menu）
+   ──────────────────────────────────────── */
+.nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 0; /* 确保无间隙 */
+}
+
+.nav-item {
+  padding: 0 20px;
+  font-size: 16px;
+  position: relative;
+}
+
+.nav-item a {
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s;
+  display: block;
+  line-height: 1;
+}
+
+.nav-item a:hover {
+  color: #ffd700;
+}
+
+/* 激活状态（高亮） */
+.nav-item a.active {
+  color: #ffd700;
+  font-weight: bold;
+}
+
+/* 彻底移除任何分隔线（无 ::after、无 border） */
+.nav-item::after {
+  display: none !important;
+}
+.nav-item {
+  border-right: none !important;
+}
+
+/* ────────────────────────────────────────
+   移动端适配（与原版一致）
+   ──────────────────────────────────────── */
 @media (max-width: 768px) {
-  .top-navigation { flex-direction: column; padding: 15px; }
-  .nav-left { margin-bottom: 15px; text-align: center; }
+  .top-navigation {
+    flex-direction: column;
+    padding: 15px;
+    text-align: center;
+  }
+  .nav-left {
+    margin-bottom: 15px;
+  }
+  .nav-list {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .nav-item {
+    padding: 10px 15px;
+  }
 }
 </style>