修改了导航样式

src/components/HeaderNav.vue

@@ -4,21 +4,32 @@
       <a class="nav-icon" href="https://www.aimzhu.com" @click="gotoHomePage">
         <img :src="logoSrc" alt="首页logo">
       </a>
-      <!-- <router-link to="/HomePage" @click="gotoHomePage">
-        <img :src="logoSrc" alt="首页logo">
-      </router-link> -->
       <div class="nav router-container" :class="routerColor">
         <ul>
-
+          <!-- <li><router-link to="/HomePage" replace @click="activateHomePage" :class="{ activeHomePage: $route.path === '/HomePage' }">首页</router-link></li>
-          <li><router-link to="/HomePage" replace @click="activateHomePage" :class="{ activeHomePage: $route.path === '/HomePage' }">首页</router-link></li>
           <li><router-link to="/ShouFei"  @click="activate" :class="{ active: $route.path === '/ShouFei' }">收费介绍</router-link></li>
           <li><router-link to="/KeFu" @click="activate" :class="{ active: $route.path === '/KeFu' }">客服中心</router-link></li>
           <li><router-link to="/ZhengShu" @click="activate" :class="{ active: $route.path === '/ZhengShu' }">证书展示</router-link></li>
-          <!-- <li><router-link to="/DaiLiShang" @click="activate" :class="{ active: $route.path === '/DaiLiShang' }">代理商展示</router-link></li> -->
+          <li><router-link to="/DaiLiShang" @click="activate" :class="{ active: $route.path === '/DaiLiShang' }">代理商展示</router-link></li>
-          <!-- <li><router-link to="/TransactionCenter" @click="activate" :class="{ active: $route.path === '/TransactionCenter' }">交易中心</router-link></li> -->
+          <li><router-link to="/TransactionCenter" @click="activate" :class="{ active: $route.path === '/TransactionCenter' }">交易中心</router-link></li>
           <li><router-link to="/HelpCenter" @click="activate" :class="{ active: $route.path === '/HelpCenter' }">帮助中心</router-link></li>
-          <!-- <li><router-link to="/AboutUs" @click="aa()" class="acss">关于我们</router-link></li> -->
+          <li><router-link to="/AboutUs" @click="aa()" class="acss">关于我们</router-link></li> -->
         
+          <li>
+            <router-link 
+              to="/HomePage" 
+              replace 
+              :style="getNavStyle('/HomePage')"
+              @click="activateHomePage"
+            >首页</router-link>
+          </li>
+          <li v-for="route in otherRoutes" :key="route.path">
+            <router-link 
+              :to="route.path"
+              :style="getNavStyle(route.path)"
+              @click="activate"
+            >{{ route.name }}</router-link>
+          </li>
         </ul>
 
       </div>
@@ -35,9 +46,8 @@
       </div>
       <div class="login-register">
         <a id="login" href="https://www.aimzhu.com/operator/" :class="loginClass">登录</a>
-        <!-- <a id="login" href=" http://192.168.0.115:8091/operator" :class="loginClass">登录</a> -->
+
         <a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
-        <!-- <a id="register" href="http://192.168.0.121:5502/src/components/Register.html">免费注册</a> -->
 
       </div>
     </div>
@@ -49,14 +59,15 @@
 export default {
   data() {
     return {
-      // logoSrc: '/src/assets/img/headicon1.png',
+      otherRoutes: [
-      // logoSrc: '/assets/img/headicon1.png',
+        { path: '/ShouFei', name: '收费介绍' },
+        { path: '/KeFu', name: '客服中心' },
+        { path: '/ZhengShu', name: '证书展示' },
+        { path: '/HelpCenter', name: '帮助中心' }
+      ],
       logoSrc: '/assets/img/headicon21.png',
       isFixed: false,
       shouldReloadHomePage: false, // 添加标志，用于判断是否需要刷新首页
-      // isHomePage: true, // 用于跟踪是否在首页
-      // logoSrc: import('/assets/img/headicon1.png'), // 默认的logo图片
-      
       currentRoute: '/HomePage', // 默认激活首页
       HeaderNav: true,
       phoneIcon: '/assets/img/nav-phone1.png',
@@ -64,6 +75,21 @@ export default {
   },
   
   methods:{
+    getNavStyle(path) {
+      // 默认样式（首页且未滚动）
+      if (this.shouldApplyWhite) {
+        return { color: '#fff' };
+      }
+      
+      // 激活状态样式
+      if (this.$route.path === path) {
+        return { color: '#48b2e1' }; // 蓝色
+      }
+      
+      // 非激活状态样式
+      return { color: '#333' }; // 黑色
+    },
+
     gotoHomePage() {
       this.$router.push('/HomePage');
       // window.location.reload(); // 刷新页面
@@ -71,38 +97,28 @@ export default {
     },
     activateHomePage() {
       this.isFixed = false; // 重置为默认样式
-      // this.logoSrc = '/assets/img/headicon1.png';
       this.logoSrc = '/assets/img/headicon21.png';
       this.phoneIcon = '/assets/img/nav-phone1.png';
-      // his.shouldReloadHomePage = true; // 设置刷新标志 
-      // 如果当前不是在首页，则设置标志以刷新
-      // if (this.$route.path !== '/HomePage') {
-      //   this.shouldRefreshHome = true; // 设置刷新标志
-      // }
     }, 
-    // refreshHomePage() {
+
-    //   window.location.href = window.location.href
-    //   alert(11)
-    // },  
     activate() {
       this.isFixed = true; // 激活固定样式
-      // this.logoSrc = '/assets/img/headicon2.png';
       this.logoSrc = '/assets/img/headicon21.png';
       this.phoneIcon = '/assets/img/nav-phone2.png';
     },
     handleScroll() {
-      if (this.$route.path === '/HomePage') {
+      if (this.isHomePage) {
-        this.isFixed = window.scrollY > 0; // 仅在首页路由时，滚动时更新样式
+        const wasFixed = this.isFixed;
-        // this.logoSrc = ('window.scrollY > 0' ? '/src/assets/img/headicon2.png': '/src/assets/img/headicon1.png')
+        this.isFixed = window.scrollY > 0;
+        
+        // 新增图标切换逻辑
+        this.phoneIcon = this.isFixed 
+          ? '/assets/img/nav-phone2.png' 
+          : '/assets/img/nav-phone1.png';
 
-        if(window.scrollY > 0) {
+        // 滚动状态变化时强制更新样式
-          // this.logoSrc = '/assets/img/headicon2.png';
+        if (wasFixed !== this.isFixed) {
-          this.logoSrc = '/assets/img/headicon21.png';
+          this.$forceUpdate();
-          this.phoneIcon = '/assets/img/nav-phone2.png';
-        } else {
-          // this.logoSrc = '/assets/img/headicon1.png';
-          this.logoSrc = '/assets/img/headicon21.png';
-          this.phoneIcon = '/assets/img/nav-phone1.png';
         }
       }
     },
@@ -128,29 +144,15 @@ export default {
       }
     },  
 
-    // '$route': {
-    //   immediate: true, // 立即执行一次监听函数
-    //   handler(newRoute) {
-    //     // 根据路由名称或路径来设置show的值
-    //     this.HeaderNav = newRoute.name !== 'MobilePage' && !newRoute.path.includes('MobilePage');
-    //     this.currentRoute = newRoute.path; // 更新当前路由路径
-    //   }
-    // }
-
-    // $route(to, from) {
-    //   // 当路由跳转到首页且设置了刷新标志时，刷新页面
-    //   if (to.path === '/HomePage' && this.shouldRefreshHome) {
-    //     this.activateHomePage(); // 点击首页路由时重置为默认样式
-    //     window.location.reload(); // 刷新页面
-    //     this.shouldRefreshHome = false; // 重置刷新标志
-    //   } else {
-    //     this.activate(); // 点击非首页路由时激活固定样式
-    //   }
-    // } 
-    
   },
 
   computed: {
+    isHomePage() {
+      return this.$route.path === '/HomePage';
+    },
+    shouldApplyWhite() {
+      return this.isHomePage && !this.isFixed;
+    },
     navClass() {
       return {
         'fixed-nav': this.isFixed || this.$route.path === '/HomePage',
@@ -160,7 +162,6 @@ export default {
       return {
         'border-login': this.isFixed,
         'line-height-login': this.isFixed,
-        
       };
     },
     phoneColor() {
@@ -187,7 +188,7 @@ export default {
   border: 0px solid transparent !important ;
 }
 .border-login {
-  border: .0094rem solid #42210B;
+  border: .0094rem solid #2f3390;
 }
 .line-height-login {
   line-height: .3rem;
@@ -195,6 +196,7 @@ export default {
 
 .activeHomePage {
   color: #333;
+  /* color: #FFF; */
 }
 .active {
   color: #F7931E;
@@ -219,6 +221,7 @@ export default {
 }
 .phoneMessageColor {
   color: #42210B !important;
+  /* color: #FFF !important; */
 }
 .header-nav {
   position: absolute;
@@ -243,21 +246,15 @@ export default {
   flex-wrap: wrap;
   justify-content: space-around;
   width: 100%;
-  /* width: 1500px; */
-  /* width: 18.75rem; */
   height: 1rem;
   margin: 0 auto;
-  /* border: 1px solid red; */
 }
 
 .header-nav .nav-icon {
-  /* width: 3.25rem;
-  height: .575rem; */
   width: 1.7875rem;
   height: .575rem;
   margin-left: .625rem;
   margin-top: .2125rem;
-  /* border: 1px solid blue; */
 }
 .header-nav .nav {
   display: flex;
@@ -272,31 +269,17 @@ export default {
   width: 100%;
 }
 .header-nav .nav ul li {
-  /* margin-right: .25rem;
-  margin-left: .25rem; */
-  /* width: 1rem; */
-  /* padding: 0 0.2rem; */
-  /* margin: 0 .5rem; */
   font-size: .1875rem;
-  color: #42210B;
+  /* color: #42210B; */
+  color: #FFF !important;
   text-align: center;
 }
-/* .header-nav .nav ul li:first-child {
-  margin-left: 0.1px;
-}
-.header-nav .nav ul li:last-child {
-  margin-right: 0.1px;
-} */
 .header-nav .nav ul li a {
   width: 1rem;
 }
-/* .header-nav .nav ul li a {
-  color: #FFF;
-  font-weight: 400;
-} */
 .header-nav .nav ul  .router-link-active {
-  color: #42210B!;
+  /* color: #42210B!; */
-  /* color: #FFF; */
+  color: #48b2e1;
 }
 .header-nav .phone {
   display: flex;
@@ -305,14 +288,12 @@ export default {
   align-content: center;
   width: 2.2rem;
   height: 1rem;
-  /* background-color: pink; */
 }
 .header-nav .phone .phoneBox {
   display: flex;
   justify-content: start;
   width: 2.2rem;
   height: 0.6rem;
-  /* background-color: skyblue; */
 }
 .header-nav .phone .phoneBox .leftIcon {
   width: 0.6rem;
@@ -341,6 +322,7 @@ export default {
   margin: auto .125rem auto auto ;
   border-radius: .25rem;
   font-size: .175rem;
+  color: #363994;
   background-color: rgba(255,255,255,.4);
 }
 #register {
@@ -351,13 +333,14 @@ export default {
   margin: .3375rem .375rem;
   border-radius: .25rem;
   font-size: .175rem;
-  background-color: #42210B;
+  /* background-color: #42210B; */
+  background: linear-gradient(to right,#12a1e6,#31dcf9);
   color: #FFF;
 }
 
 #login:hover {
-  background-color: #42210B;
+  background-color: #FFF;
-  color: #fff;
+  color: #2f3390;
   cursor: pointer;
 }
 #register:hover {

src/components/HomePage.vue

@@ -399,7 +399,7 @@ export default {
   width: 100%;
   height: 100vh;
   /* background-color: pink; */
-  background: url(/assets/img/home-bj2.png) no-repeat;
+  background: url(/assets/img/home-bj2.jpg) no-repeat;
   background-size: cover;
 }
 .home-page .box-top .headline {