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

<template>

  <div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }">
    <div class="box">
      <a href="#" @click="gotoHomePage">
        <img :src="logoSrc" alt="首页logo">
        <!-- <img src="/assets/img/headicon1.png" alt=""> -->
      </a>
      <div class="nav router-container" :class="routerColor">
        <ul>

          <li><router-link to="/HomePage" @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>
      <a id="login" href="https://www.aimzhu.com/operator/" :class="loginClass">登录</a>
      <a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
    </div>
  </div>
  
  

  <router-view></router-view>
</template>

<script>
export default {
  data() {
    return {
      // logoSrc: '/src/assets/img/headicon1.png',
      logoSrc: '/assets/img/headicon1.png',
      isFixed: false,
      // isHomePage: true, // 用于跟踪是否在首页
      // logoSrc: import('/assets/img/headicon1.png'), // 默认的logo图片
    }
  },
  
  methods:{
    gotoHomePage() {
      this.$router.push('/HomePage');
    },
    activateHomePage() {
      this.isFixed = false; // 重置为默认样式
      this.logoSrc = '/assets/img/headicon1.png';
    },    
    activate() {
      this.isFixed = true; // 激活固定样式
      this.logoSrc = '/assets/img/headicon2.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';
        } else {
          this.logoSrc = '/assets/img/headicon1.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(); // 点击首页路由时重置为默认样式
      }
    },  
    
  },

  computed: {
    navClass() {
      return {
        'fixed-nav': this.isFixed || this.$route.path === '/HomePage',
      };
    },
    loginClass() {
      return {
        'border-login': this.isFixed,
        'line-height-login': 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: 0.75px solid #42210B;
}
.line-height-login {
  line-height: 24px;
}

.activeHomePage {
  color: #333;
}
.active {
  color: #F7931E;
  font-weight: 700;
}
.active1 {
  position: fixed;
  /* top: 0; */
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 80px;
  margin: 0 auto ;
  background-color: #fff;
  transition: all .5s ease-in-out;
  box-shadow: 0 2px 12px 0 rgba(0,60,103,.15);
  z-index: 9999999;
  
}
.active2 {
  border: 2px solid #42210B;
}
.header-nav {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 80px;
  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 2px 12px 0 rgba(0,60,103,.15);
}
.header-nav .box {
  position: absolute;
  display: flex;
  width: 1500px;
  height: 80px;
  margin: 0 auto;
  /* border: 1px solid red; */
}
/* .header-nav h2 {
  font-size: 36px;
  margin: auto 20px auto 50px;
}
.header-nav p {
  font-size: 14px;
  margin: auto 0;
  height: 20px;
  width: 180px;
  padding: 0 15px;
  border-left: 2px solid #dedede;
} */
.header-nav a {
  width: 260px;
  height: 46px;
  margin-left: 50px;
  margin-top: 17px;
  /* border: 1px solid blue; */
}
.header-nav .nav {
  margin: auto;
  display: flex;
  /* border: 1px solid blue; */
}
.header-nav .nav ul {
  display: flex;
}
.header-nav .nav ul li {
  margin-right: 20px;
  margin-left: 20px;
  font-size: 15px;
  /* letter-spacing: 3px; */
  color: #42210B;
  /* color: #FFF!; */
}
/* .header-nav .nav ul li a {
  color: #FFF;
  font-weight: 400;
} */
.header-nav .nav ul  .router-link-active {
  color: #42210B!;
  /* color: #FFF; */
}

.header-nav #login {
  width: 70px;
  height: 26px;
  line-height: 24px;
  padding: auto;
  text-align: center;
  margin: auto 10px auto auto ;
  border-radius: 20px;
  font-size: 14px;
  background-color: rgba(255,255,255,.4);
}
#register {
  width: 100px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  margin: auto 30px auto 0 ;
  border-radius: 20px;
  font-size: 14px;
  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>