370 lines
9.8 KiB
Vue
370 lines
9.8 KiB
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> |