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