kdofficial/src/components/Tools/MobileToolbar.vue

<script setup>
import FooterContent from './FooterContent.vue'
</script>

<template>
  <div id="mobilebarroot">
    <div id="barcontent">
      <div id="weptoplogo" class="image-wrapper_2 flex-row justify-between">
        <a href="/">
          <img
              id="image_1"
              referrerpolicy="no-referrer"
              src="/MobileToolbar/weptoolbarlogo.png"
          />
        </a>
        <span style="width: 100%;"></span>
        <a href="javascript:;" @click="hide_toolbar">
          <img
              id="thumbnail_1"
              referrerpolicy="no-referrer"
              src="/MobileToolbar/closeweptoolbar.png"
          />
        </a>
      </div>
      <div id="barlist">
        <a href="/Examples"
           style="text-decoration: none; color: inherit;">
          <div class="baritem">行业案例</div>
        </a>
        <a href="/ServiceProcess"
           style="text-decoration: none; color: inherit;">
          <div class="baritem">服务流程</div>
        </a>
        <a href="/Aboutus"
           style="text-decoration: none; color: inherit;">
          <div class="baritem">关于我们</div>
        </a>
        <a href="/ContactUs"
           style="text-decoration: none; color: inherit;">
          <div class="baritem">联系我们</div>
        </a>
      </div>
    </div>
    <div id="barbottom">
      <FooterContent></FooterContent>
    </div>
  </div>
</template>

<script>
export default {
  name: "MobileToolbar",
  mounted() {
    this.$nextTick(function() {
      this.contain_toolbartop();
    });
  },
  methods: {
    hide_toolbar:function (){
      document.getElementById('mobilebarroot').style.visibility="collapse";
    }
  },
  contain_toolbartop:function (){
    window.onscroll = function(){
      if(window.scrollY==0){
        document.getElementById("weptoplogo")
            .style.backgroundColor='rgba(0, 0, 0, 0)';
      }
      else{
        document.getElementById("weptoplogo")
            .style.backgroundColor="black";
      }
    }
  }
}
</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";

#mobilebarroot{
  position: fixed;
  z-index: 100;
  transform: translateZ(3px); // 添加这行
  -webkit-transform: translateZ(3px); // 添加这行
  will-change: transform; // 添加这行
  @include media-breakpoint-between(xs, md) {
    background-color: black;
    display: flex;
    //position: -webkit-fixed;
    width: 100%;
    flex-direction: column;
    height: 100vh;
    visibility: collapse;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    top: 0;
    left: 0;
    overflow: auto; /* 关键点 */
  }
  @include media-breakpoint-up(md) {
    visibility: collapse!important;
    height:0!important;
  }
}

#barcontent{
  visibility: inherit;
  @include media-breakpoint-between(xs, md) {
    display: flex;
    flex-direction: column;
    position: relative;
    flex:1;
    width: 100%;
    //min-height: 100%;
  }
  @include media-breakpoint-up(md) {
    //visibility: collapse!important;
  }
}

#barbottom{
  display: flex;
  visibility: inherit;
  @include media-breakpoint-between(xs, md) {
    width: 100%;
    justify-content: left;
    padding-left: 32px;
    margin-top: 72px;
    //padding-bottom: 72px;
  }
  @include media-breakpoint-up(md) {
    //visibility: collapse!important;
  }
}

.image-wrapper_2 {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-left: 32px;
  padding-top: 24px;
  padding-right: 32px;
  position: fixed;
  top:0px;
  z-index: 20;
}

#image_1 {
  width: 88px;
  height: 16px;
  margin: 3px 0 1px 0;
}

#thumbnail_1 {
  width: 20px;
  height: 20px;
  float: right;
}

#barlist{
  margin-top: 87px;
  width: 100%;
}

.baritem{
  display: flex;
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
  height:72px;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  align-items: center;
}

.baritem:hover{
  background-color: white;
  color: black;
}
</style>