修改了导航样式
This commit is contained in:
zhangyong
parent
a57d13d5da
commit
1efab811d8
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB |
BIN
public/assets/img/home-bj2.jpg
Normal file
BIN
public/assets/img/home-bj2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
@ -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="/TransactionCenter" @click="activate" :class="{ active: $route.path === '/TransactionCenter' }">交易中心</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="/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',
|
||||
// logoSrc: '/assets/img/headicon1.png',
|
||||
otherRoutes: [
|
||||
{ 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') {
|
||||
this.isFixed = window.scrollY > 0; // 仅在首页路由时，滚动时更新样式
|
||||
// this.logoSrc = ('window.scrollY > 0' ? '/src/assets/img/headicon2.png': '/src/assets/img/headicon1.png')
|
||||
if (this.isHomePage) {
|
||||
const wasFixed = this.isFixed;
|
||||
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';
|
||||
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';
|
||||
// 滚动状态变化时强制更新样式
|
||||
if (wasFixed !== this.isFixed) {
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -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: #FFF; */
|
||||
/* color: #42210B!; */
|
||||
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;
|
||||
color: #fff;
|
||||
background-color: #FFF;
|
||||
color: #2f3390;
|
||||
cursor: pointer;
|
||||
}
|
||||
#register:hover {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user