fd_dwgz_zhyw/src/components/menuNav/index.vue

<template>
  <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" collapse="true" @mouseleave="hideMenu"
           v-show="showMenu"
           text-color="#85878B" active-text-color="rgba(28, 153, 255, 1)" background-color="transparent">
    <template v-for="(item, index) in secondLevelTitle" :key="index">
      <el-sub-menu :index="index" v-if="item.children">
        <template #title>
          <!--                  <router-link :to="item.path">-->
          <el-icon :class="item.icon">
          </el-icon>
          <!--                  </router-link>-->
        </template>
        <el-menu-item-group v-for="(menu, idx) in item.children" :index="idx" :key="idx">
          <router-link :to="menu.path">
            <el-menu-item>{{ menu.titleName }}</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item  v-else>
        <el-tooltip class="item" effect="light" :content="item.titleName" placement="right">
          <router-link :to="item.path">
            <i :class="item.icon"></i>
          </router-link>
        </el-tooltip>
      </el-menu-item>
    </template>

    <li class="el-sub-menu bottom-[60px] left-0 !absolute">
      <div class="w-[55px] h-[55px] flex items-center justify-center">
        <!-- :fill="stickMenu? '#1296db': '#515151'" -->
        <svg t="1669786260824" v-if="stickMenu" @click="funStickChange" class="icon cursor-pointer"
             viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24315" width="24"
             height="24">
          <path
              d="M672 32a64 64 0 0 1 64 64v81.856a64 64 0 0 1-43.776 60.736L640 256l32 288 108.544 21.696A64 64 0 0 1 832 628.48V736a64 64 0 0 1-64 64h-224v192a32 32 0 0 1-64 0v-192H256a64 64 0 0 1-64-64v-107.52a64 64 0 0 1 51.456-62.784L352 544l32-288-52.224-17.408A64 64 0 0 1 288 177.856V96a64 64 0 0 1 64-64h320z"
              p-id="24316" fill="#85878b"></path>
        </svg>
        <svg t="1669786308333" v-else @click="funStickChange" class="icon cursor-pointer" viewBox="0 0 1024 1024"
             version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24499" width="24" height="24">
          <path
              d="M712.704 48.32l222.4 222.4a64 64 0 0 1 0 90.496l-56.224 56.224a64 64 0 0 1-73.856 12l-48.16-24.064-178.816 223.488 60.32 90.464a64 64 0 0 1-8 80.736l-74.112 74.112a64 64 0 0 1-90.496 0l-140.704-140.704-130.016 130.048a31.616 31.616 0 0 1-44.704-44.704l130.016-130.048-171.104-171.104a64 64 0 0 1 0-90.496l74.112-74.112a64 64 0 0 1 80.736-8l90.464 60.32 223.488-178.816-24.064-48.16a64 64 0 0 1 12-73.856l56.224-56.224a64 64 0 0 1 90.496 0z"
              p-id="24500" fill="#85878b"></path>
        </svg>
      </div>
    </li>
  </el-menu>
</template>

<script>

export default {
  name: 'menuNav',//状态监视
  props: {
    showMenu: {
      default: 'false',
      required: true,
    },
    secondLevelTitle: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      stickMenu: false,
      activeIndex:'1',
    }
  },
  created() {
   let  flge= JSON.parse(window.localStorage.getItem('menuState'));
   if(flge!=null){
     this.stickMenu=flge;
     this.$emit('stickMenu', this.stickMenu);
   }else {
    this.stickMenu=false;
   }
  },
  methods: {
    hideMenu() {
      if (!this.stickMenu) {
        this.$emit('hideMenuNav');
      }
    },
    funStickChange() {
      this.stickMenu = !this.stickMenu
      window.localStorage.setItem('menuState',JSON.stringify(this.stickMenu));
      this.$emit('stickMenu', this.stickMenu)
      this.$store.state.isLeft = this.stickMenu
    }
  },
  computed: {}
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 150px;
  height: 100%;
}

.el-menu--collapse {
  text-align: center;
  width: 55px !important;
}

.el-menu {
  position: fixed;
  height: 100%;
  background: linear-gradient(278deg, #002767, transparent);
  -o-border-image: linear-gradient(180deg, transparent, #1a7ccd, #1a7ccd, transparent) 2 1;
  border-image: linear-gradient(180deg, transparent, #1a7ccd, #1a7ccd, transparent) 2 1;
  border-color: #002767;
  backdrop-filter: blur(5px);
  z-index: 2001;
  overflow: revert !important;

  .el-sub-menu a i {
    font-size: 19px;
  }

  .is-opened {
    a > i {
      color: #999999 !important;
    }
  }
}


</style>