353 lines
8.7 KiB
Vue
353 lines
8.7 KiB
Vue
<template>
|
|
<div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }" v-show="HeaderNav">
|
|
<div class="box">
|
|
<a class="nav-icon" href="http://101.200.88.219:8081" @click="gotoHomePage">
|
|
<img :src="logoSrc" alt="首页logo">
|
|
</a>
|
|
<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> -->
|
|
|
|
<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>
|
|
<div class="phone">
|
|
<div class="phoneBox">
|
|
<div class="leftIcon">
|
|
<img :src="phoneIcon" alt="">
|
|
</div>
|
|
<div class="rightMessage" :class="phoneColor">
|
|
<span>全国服务热线</span>
|
|
<span>18931218884</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="login-register">
|
|
<a id="login" href="http://101.200.88.219:8081/operator/" :class="loginClass">登录</a>
|
|
|
|
<a id="register" href="http://101.200.88.219:8081/Register.html">免费注册</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<router-view></router-view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
otherRoutes: [
|
|
{ path: '/ShouFei', name: '收费介绍' },
|
|
{ path: '/KeFu', name: '客服中心' },
|
|
{ path: '/ZhengShu', name: '证书展示' },
|
|
{ path: '/HelpCenter', name: '帮助中心' }
|
|
],
|
|
logoSrc: '/assets/img/headicon21.png',
|
|
isFixed: false,
|
|
shouldReloadHomePage: false, // 添加标志，用于判断是否需要刷新首页
|
|
currentRoute: '/HomePage', // 默认激活首页
|
|
HeaderNav: true,
|
|
phoneIcon: '/assets/img/nav-phone1.png',
|
|
}
|
|
},
|
|
|
|
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(); // 刷新页面
|
|
|
|
},
|
|
activateHomePage() {
|
|
this.isFixed = false; // 重置为默认样式
|
|
this.logoSrc = '/assets/img/footerlogo22.png';
|
|
this.phoneIcon = '/assets/img/nav-phone1.png';
|
|
},
|
|
|
|
activate() {
|
|
this.isFixed = true; // 激活固定样式
|
|
this.logoSrc = '/assets/img/headicon21.png';
|
|
this.phoneIcon = '/assets/img/nav-phone2.png';
|
|
},
|
|
handleScroll() {
|
|
if (this.isHomePage) {
|
|
const wasFixed = this.isFixed;
|
|
this.isFixed = window.scrollY > 0;
|
|
this.logoSrc = this.isFixed ? '/assets/img/headicon21.png' : '/assets/img/footerlogo22.png';
|
|
// 新增图标切换逻辑
|
|
this.phoneIcon = this.isFixed
|
|
? '/assets/img/nav-phone2.png'
|
|
: '/assets/img/nav-phone1.png';
|
|
|
|
// 滚动状态变化时强制更新样式
|
|
if (wasFixed !== this.isFixed) {
|
|
this.$forceUpdate();
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
},
|
|
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: {
|
|
isHomePage() {
|
|
return this.$route.path === '/HomePage';
|
|
},
|
|
shouldApplyWhite() {
|
|
return this.isHomePage && !this.isFixed;
|
|
},
|
|
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 #2f3390;
|
|
}
|
|
.line-height-login {
|
|
line-height: .3rem;
|
|
}
|
|
|
|
.activeHomePage {
|
|
color: #333;
|
|
/* color: #FFF; */
|
|
}
|
|
.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;
|
|
/* color: #FFF !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%;
|
|
height: 1rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header-nav .nav-icon {
|
|
width: 1.7875rem;
|
|
height: .575rem;
|
|
margin-left: .625rem;
|
|
margin-top: .2125rem;
|
|
}
|
|
.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 {
|
|
font-size: .1875rem;
|
|
/* color: #42210B; */
|
|
color: #FFF !important;
|
|
text-align: center;
|
|
}
|
|
.header-nav .nav ul li a {
|
|
width: 1rem;
|
|
}
|
|
.header-nav .nav ul .router-link-active {
|
|
/* color: #42210B!; */
|
|
color: #48b2e1;
|
|
}
|
|
.header-nav .phone {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
width: 2.2rem;
|
|
height: 1rem;
|
|
}
|
|
.header-nav .phone .phoneBox {
|
|
display: flex;
|
|
justify-content: start;
|
|
width: 2.2rem;
|
|
height: 0.6rem;
|
|
}
|
|
.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;
|
|
color: #363994;
|
|
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; */
|
|
background: linear-gradient(to right,#12a1e6,#31dcf9);
|
|
color: #FFF;
|
|
}
|
|
|
|
#login:hover {
|
|
background-color: #FFF;
|
|
color: #2f3390;
|
|
cursor: pointer;
|
|
}
|
|
#register:hover {
|
|
background-color: #332817;
|
|
}
|
|
a:hover {
|
|
color: #333;
|
|
font-weight: 700;
|
|
}
|
|
</style> |