yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

添加当前页面导航以及hover放大的功能

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-23 11:33:25 +08:00
parent 650ae39332
commit f0f1664988
1 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Toolbar.vue
View File

@ -1,7 +1,3 @@
<script setup>
import MobileToolbar from "@/components/Tools/MobileToolbar.vue";
</script>
<template>
<div id="toproot">
<MobileToolbar></MobileToolbar>
@ -25,25 +21,33 @@ import MobileToolbar from "@/components/Tools/MobileToolbar.vue";
src="/waptoptoolbarbutton.png"/>
</a>
<span id="rightcontent">
<span class="toptext" id="hyal">
<span class="toptext" id="hyal"
:class="{
curpagetoptext: this.isActiveRoute('Examples')}">
<a href="/Examples"
style="text-decoration: none; color: inherit;">
行业案例
</a>
</span>
<span class="toptext" id="fwlc">
<span class="toptext" id="fwlc"
:class="{
curpagetoptext: this.isActiveRoute('ServiceProcess')}">
<a href="/ServiceProcess"
style="text-decoration: none; color: inherit;">
服务流程
</a>
</span>
<span class="toptext" id="gywm">
<span class="toptext" id="gywm"
:class="{
curpagetoptext: this.isActiveRoute('Aboutus')}">
<a href="/Aboutus"
style="text-decoration: none; color: inherit;">
关于我们
</a>
</span>
<span class="toptext" id="lxwm">
<span class="toptext" id="lxwm"
:class="{
curpagetoptext: this.isActiveRoute('ContactUs')}">
<a href="/ContactUs"
style="text-decoration: none; color: inherit;">
联系我们
@ -55,6 +59,7 @@ import MobileToolbar from "@/components/Tools/MobileToolbar.vue";
</template>
<script>
import MobileToolbar from "@/components/Tools/MobileToolbar.vue";
export default {
name: "Toolbar",
mounted() {
@ -77,13 +82,18 @@ export default {
},
show_weptoolbar:function (){
document.getElementById('mobilebarroot').style.visibility="visible";
},
isActiveRoute(routename) {
// Example: Apply style if route name starts with 'user-'
console.log('Current route name:', this.$route.name, 'Comparing with:', routename);
return this.$route.name === routename;
}
},
computed: {
isActiveRoute(routename) {
// Example: Apply style if route name starts with 'user-'
return this.$route.name && this.$route.name.startsWith('routename');
}
// isActiveRoute(routename) {
// // Example: Apply style if route name starts with 'user-'
// return this.$route.name && this.$route.name.startsWith('routename');
// }
}
}
</script>
@ -109,6 +119,7 @@ export default {
white-space: nowrap;
line-height: 28px;
display: inline-block;
transition: font-weight 0.5s, font-size 0.5s;
}
}
.toptext:hover
@ -120,7 +131,7 @@ export default {
height: 28px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-size: 21px;
font-family: PingFangSC-Regular;
font-weight: bold;
text-align: left;
@ -129,7 +140,7 @@ export default {
display: inline-block;
}
}
.curpagetoptext
.toptext.curpagetoptext
{
@include media-breakpoint-between(xs, md) {
}
@ -138,7 +149,7 @@ export default {
height: 28px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-size: 21px;
font-family: PingFangSC-Regular;
font-weight: bold;
text-align: left;