kdofficial/src/components/Toolbar.vue

<script setup>
import MobileToolbar from "@/components/Tools/MobileToolbar.vue";
</script>

<template>
  <div id="toproot">
    <MobileToolbar></MobileToolbar>
    <div id="topbar">
      <a href="/">
        <img
            id="toplogo"
            referrerpolicy="no-referrer"
            src="/KDESIGNlogo.svg"/>
      </a>
      <img
          id="topcode"
          class="label_1"
          referrerpolicy="no-referrer"
          src="/topcode.png"/>
      <a href="javascript:;" @click="show_weptoolbar">
        <img
            id="wepmenubutton"
            class="label_1"
            referrerpolicy="no-referrer"
            src="/waptoptoolbarbutton.png"/>
      </a>
      <span id="rightcontent">
        <span class="toptext" id="hyal">
          <a href="/Examples"
             style="text-decoration: none; color: inherit;">
            行业案例
          </a>
        </span>
        <span class="toptext" id="fwlc">
          <a href="/ServiceProcess"
             style="text-decoration: none; color: inherit;">
            服务流程
          </a>
        </span>
        <span class="toptext" id="gywm">
          <a href="/Aboutus"
             style="text-decoration: none; color: inherit;">
            关于我们
          </a>
        </span>
        <span class="toptext" id="lxwm">
          <a href="/ContactUs"
             style="text-decoration: none; color: inherit;">
            联系我们
          </a>
        </span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  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";
        }
      }
    },
    show_weptoolbar:function (){
      document.getElementById('mobilebarroot').style.visibility="visible";
    }
  }
}
</script>

<style scoped lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";

.toptext
{
  @include media-breakpoint-between(xs, md) {
  }
  @include media-breakpoint-up(md){
    width: 99px;
    height: 28px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28px;
    display: inline-block;
  }
}

#hyal
{
  @include media-breakpoint-between(xs, md) {
  }
  @include media-breakpoint-up(md){
  }
}
#fwlc
{
  @include media-breakpoint-between(xs, md) {
  }
  @include media-breakpoint-up(md){
  }
}
#lxwm
{
  @include media-breakpoint-between(xs, md) {
  }
  @include media-breakpoint-up(md){
  }
}
#hyal
{
  @include media-breakpoint-between(xs, md) {
  }
  @include media-breakpoint-up(md){
  }
}

#topbar
{
  //background-color: black;
  background-color: rgba(255,255,255,0);
  width: 100%;
  @include media-breakpoint-between(xs, md) {
    height: 28px;
  }
  @include media-breakpoint-up(md){
    height: 28px;
  }
}

#toplogo
{
  //float: right;
  @include media-breakpoint-between(xs, md) {
    width:88px;
    height:16px;
    margin-left: 32px;
  }
  @include media-breakpoint-up(md){
    margin-left: 100px;
  }
}

#rightcontent
{
  float: right;
  @include media-breakpoint-between(xs, md) {
    visibility: collapse;
  }
  @include media-breakpoint-up(md){
    //width:100%;
    display: inline-block;
  }
}

#topcode
{
  float: right;
  @include media-breakpoint-between(xs, md) {
    visibility: collapse;
  }
  @include media-breakpoint-up(md){
    width: 23px;
    height: 23px;
    margin-right: 80px;
  }
}

#wepmenubutton
{
  float: right;
  @include media-breakpoint-between(xs, md) {
    width: 23px;
    height: 23px;
    margin-right: 3px;
  }
  @include media-breakpoint-up(md){
    visibility: collapse;
  }
}

#toproot
{
  display: flex;
  position: fixed;
  flex-direction: column;
  top:0px;
  background-color: rgba(255,255,255,0);
  z-index: 7;
  width: 100%;
  align-items: center;
  justify-content: center;
  transform: translateZ(3px); // 添加这行
  -webkit-transform: translateZ(3px); // 添加这行
  will-change: transform; // 添加这行，促使创建新的渲染层
  @include media-breakpoint-between(xs, md) {
    height:70px;
  }
  @include media-breakpoint-up(md){
    height: 95.17px;
  }
}

</style>