diff --git a/public/assets/img/home-bj.jpg b/public/assets/img/home-bj.jpg
deleted file mode 100644
index ab39871..0000000
Binary files a/public/assets/img/home-bj.jpg and /dev/null differ
diff --git a/public/assets/img/home-bj.png b/public/assets/img/home-bj.png
deleted file mode 100644
index e8dbeaa..0000000
Binary files a/public/assets/img/home-bj.png and /dev/null differ
diff --git a/public/assets/img/home-bj2.jpg b/public/assets/img/home-bj2.jpg
new file mode 100644
index 0000000..348651d
Binary files /dev/null and b/public/assets/img/home-bj2.jpg differ
diff --git a/public/assets/img/home-bj2.png b/public/assets/img/home-bj2.png
deleted file mode 100644
index 35954f9..0000000
Binary files a/public/assets/img/home-bj2.png and /dev/null differ
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
index 037e721..b574d92 100644
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@@ -4,21 +4,32 @@
![首页logo]()
-
-
- - 首页
+
-
+ - 代理商展示
+ - 交易中心
- 帮助中心
-
+ - 关于我们
-->
+ -
+ 首页
+
+ -
+ {{ route.name }}
+
@@ -35,9 +46,8 @@
@@ -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 {
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 75522df..0f5d591 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -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 {