copyright-official-website/src/components/HeaderNav.vue

<template>
  <div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }" v-show="HeaderNav">
    <div class="box">
      <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="/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="/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> -->
        
        </ul>

      </div>
      <div class="phone">
        <div class="phoneBox">
          <div class="leftIcon">
            <img :src="phoneIcon" alt="">
          </div>
          <div class="rightMessage" :class="phoneColor">
            <span>全国服务热线</span>
            <span>400 086 1633</span>
          </div>
        </div>
      </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>
  </div>
  <router-view></router-view>
</template>

<script>
export default {
  data() {
    return {
      // logoSrc: '/src/assets/img/headicon1.png',
      // logoSrc: '/assets/img/headicon1.png',
      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',
    }
  },
  
  methods:{
    gotoHomePage() {
      this.$router.push('/HomePage');
      // window.location.reload(); // 刷新页面
      
    },
    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') {
        this.isFixed = window.scrollY > 0; // 仅在首页路由时，滚动时更新样式
        // this.logoSrc = ('window.scrollY > 0' ? '/src/assets/img/headicon2.png': '/src/assets/img/headicon1.png')

        if(window.scrollY > 0) {
          // this.logoSrc = '/assets/img/headicon2.png';
          this.logoSrc = '/assets/img/headicon21.png';
          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';
        }
      }
    },

    
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  

  watch: {
    $route(to, from) {
      if (to.path !== '/HomePage') {
        this.activate(); // 点击非首页路由时激活固定样式
        
      } else {
        this.activateHomePage(); // 点击首页路由时重置为默认样式
        
      }
    },  

    // '$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: {
    navClass() {
      return {
        'fixed-nav': this.isFixed || this.$route.path === '/HomePage',
      };
    },
    loginClass() {
      return {
        'border-login': this.isFixed,
        'line-height-login': this.isFixed,
        
      };
    },
    phoneColor() {
      return {
        'phoneMessageColor': this.isFixed,
      }
    },
    routerColor() {
      return {
        'active-color': this.$route.path === '/HomePage',
      };
    }
  },


}     
</script>

<style scoped>
 img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border: 0px solid transparent !important ;
}
.border-login {
  border: .0094rem solid #42210B;
}
.line-height-login {
  line-height: .3rem;
}

.activeHomePage {
  color: #333;
}
.active {
  color: #F7931E;
  font-weight: 700;
}
.active1 {
  position: fixed;
  /* top: 0; */
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 1rem;
  margin: 0 auto ;
  background-color: #fff;
  transition: all .5s ease-in-out;
  box-shadow: 0 .025rem .15rem 0 rgba(0,60,103,.15);
  z-index: 9999999;
  
}
.active2 {
  border: .025rem solid #42210B;
}
.phoneMessageColor {
  color: #42210B !important;
}
.header-nav {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 1rem;
  margin: 0 auto ;
  background-color: transparent;
  z-index: 99999; 
}

.fixed-nav {
  position: fixed;
  background-color: #fff;
  transition: all 0 ease-in-out;
  box-shadow: 0 .025rem .15rem 0 rgba(0,60,103,.15);
}
.header-nav .box {
  position: absolute;
  display: flex;
  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;
  height: 1rem;
  line-height: 1rem;
  width: 8.4rem;
}
.header-nav .nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  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;
  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: #FFF; */
}
.header-nav .phone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  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;
  height: 0.6rem;
}
.header-nav .phone .phoneBox .rightMessage {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #fff;
}
.header-nav .phone .phoneBox .rightMessage span {
  font-size: 0.2rem;
}
.header-nav .login-register {
  display: flex;
  width: 3.5rem;
  height: 1rem;
}
.header-nav #login {
  width: .875rem;
  height: .325rem;
  line-height: .3rem;
  padding: auto;
  text-align: center;
  margin: auto .125rem auto auto ;
  border-radius: .25rem;
  font-size: .175rem;
  background-color: rgba(255,255,255,.4);
}
#register {
  width: 1.25rem;
  height: .325rem;
  line-height: .3rem;
  text-align: center;
  margin: .3375rem .375rem;
  border-radius: .25rem;
  font-size: .175rem;
  background-color: #42210B;
  color: #FFF;
}

#login:hover {
  background-color: #42210B;
  color: #fff;
  cursor: pointer;
}
#register:hover {
  background-color: #332817;
}
a:hover {
  color: #333;
  font-weight: 700;
}
</style>