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

导航栏颜色搞定！

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-02 00:50:49 +08:00
parent 51ac07295c
commit be7c03e320
1 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Toolbar.vue
View File

@ -4,14 +4,12 @@
<img <img
id="toplogo" id="toplogo"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="/toplogo.png" src="/toplogo.png"/>
/>
<img <img
id="topcode" id="topcode"
class="label_1" class="label_1"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="/topcode.png" src="/topcode.png"/>
/>
<span id="rightcontent"> <span id="rightcontent">
<span class="toptext" id="hyal"> <span class="toptext" id="hyal">
行业案例 行业案例
@ -33,7 +31,27 @@
<script> <script>
export default { export default {
name: "Toolbar" name: "Toolbar",
mounted() {
this.$nextTick(function() {
// 调用你想执行的方法
this.contain_toolbar();
});
},
methods:{
contain_toolbar:function (){
window.onscroll = function(){
if(window.scrollY==0){
document.getElementById("toproot")
.style.backgroundColor='rgba(0, 0, 0, 0)';
}
else{
document.getElementById("toproot")
.style.backgroundColor="black";
}
}
}
}
} }
</script> </script>
@ -47,7 +65,6 @@ export default {
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
} }
@include media-breakpoint-up(md){ @include media-breakpoint-up(md){
//width: 80px;
width: 100px; width: 100px;
height: 28px; height: 28px;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -67,7 +84,6 @@ export default {
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
} }
@include media-breakpoint-up(md){ @include media-breakpoint-up(md){
//margin-right: 810px;
} }
} }
#fwlc #fwlc
@ -75,7 +91,6 @@ export default {
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
} }
@include media-breakpoint-up(md){ @include media-breakpoint-up(md){
//margin-right: 810px;
} }
} }
#lxwm #lxwm
@ -83,7 +98,6 @@ export default {
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
} }
@include media-breakpoint-up(md){ @include media-breakpoint-up(md){
//margin-right: 810px;
} }
} }
#hyal #hyal
@ -91,28 +105,19 @@ export default {
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
} }
@include media-breakpoint-up(md){ @include media-breakpoint-up(md){
//margin-right: 810px;
} }
} }
#topbar #topbar
{ {
background-color: black; //background-color: black;
//background-color: rgba(255,255,255,0); background-color: rgba(255,255,255,0);
width: 100%; width: 100%;
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
height: 28px; height: 28px;
//margin: 3px 0 1px 0;
} }
@include media-breakpoint-up(md){ @include media-breakpoint-up(md){
height: 28px; height: 28px;
//max-width: 1371px;
//min-width: 807.33px;
//margin: 34px 256px 0 256px;
//margin-left: 256px;
//margin-right: 256px;
//margin-left: 10px;
//margin-right: 10px;
} }
} }