gjerp_ui/src/views/zyjhzx/components/Drawer.vue

<template>
  <el-drawer class="transparent-drawer" size="8%" :visible.sync="drawer" :direction="direction" :modal="false" :withHeader="withHeader">
    <div class="drawer">
      <template v-for="(item,index) in menu">
        <div class="menu-item" @click="handleSelect(item)">
          <img src="https://aigc365.cc/static/pageGroup/all.svg" alt="AIGC" title="AIGC" style="width: 48px; height: 48px; filter: brightness(0.9);">
          <br/>{{item}}
        </div>
      </template>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "Drawer",
  data(){
    return{
      menu:['抛丸','理料','划线','切割'],
      drawer:false,
      direction:'ltr',
      withHeader:false
    }
  },
  methods:{
    show(){
      this.drawer=true;
    },
    handleSelect(key){
      switch (key){
        case '抛丸':
          this.$router.push(`/pwpg?zyq=${this.$route.query.zyq}&zyType=${this.$route.query.zyType}&deviceId=${this.$route.query.deviceId}`)
          break;
        case '理料':
          this.$router.push(`/llpg?zyq=${this.$route.query.zyq}&zyType=${this.$route.query.zyType}&deviceId=${this.$route.query.deviceId}`)
          break;
        case '划线':
          this.$router.push(`/hxpg?zyq=${this.$route.query.zyq}&zyType=${this.$route.query.zyType}&deviceId=${this.$route.query.deviceId}`)
          break;
        case '切割':
          this.$router.push(`/qgpg?zyq=${this.$route.query.zyq}&zyType=${this.$route.query.zyType}&deviceId=${this.$route.query.deviceId}`)
          break;
      }
    }
  }
}
//background: #002166;

</script>

<style scoped>
.drawer{
  height: 100vh;
  background: #003586;

  .menu-item{
    width: 100%;
    height: 15%;
    text-align: center;
    color: white;
    padding: 100px 0 0 0;
  }
}

.transparent-drawer{
  ::v-deep .el-drawer__body {
    background-color: transparent; /* 设置背景透明 */
  }
}

</style>