web-zc/src/layout/Aside/index.vue

<template>
  <el-aside class="MainAside">
    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="transparent"
      text-color="#fff" active-text-color="#19c3eb" :default-active="$route.path" :collapse="isCollapse" router>
      <dv-decoration-12 style="width:100px;height:100px;margin: 0 auto;" />
      <dv-decoration-4 :reverse="true" style="width:200px;height:5px;" />
      <el-menu-item index="/home/taskManagement">
        <dv-decoration-11 style="width:200px;height:60px;">任务管理显控</dv-decoration-11>
      </el-menu-item>
      <el-menu-item index="/home/networkManagement">
        <dv-decoration-11 style="width:200px;height:60px;">通信管理显控</dv-decoration-11>
      </el-menu-item>
      <el-menu-item index="/home/functionalityManagement">
        <dv-decoration-11 style="width:200px;height:60px;">健康管理显控</dv-decoration-11>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <dv-decoration-11 style="width:200px;height:60px;">侦察资源显控</dv-decoration-11>
        </template>
        <el-menu-item index="/home/radarInvestigation">
          <dv-decoration-7 style="width:200px;height:60px;">雷侦显控</dv-decoration-7>
        </el-menu-item>
        <el-menu-item disabled index="/home/telecomInvestigation">
          <dv-decoration-7 style="width:200px;height:60px;">通侦显控</dv-decoration-7>
        </el-menu-item>
        <el-menu-item disabled index="/home/opticalInvestigation">
          <dv-decoration-7 style="width:200px;height:60px;">光电成像显控</dv-decoration-7>
        </el-menu-item>
        <el-menu-item disabled index="/home/sarInvestigation">
          <dv-decoration-7 style="width:200px;height:60px;">雷达成像显控</dv-decoration-7>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/home/intelESMProcess">
        <dv-decoration-11 style="width:200px;height:60px;">情报处理分发</dv-decoration-11>
      </el-menu-item>
      <el-menu-item index="/home/situation">
        <dv-decoration-11 style="width:200px;height:60px;">态势显控</dv-decoration-11>
      </el-menu-item>
      <el-menu-item index="/home/dataManagement">
        <dv-decoration-11 style="width:200px;height:60px;">数据管理显控</dv-decoration-11>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Aside',
  data() {
    return {
      
    };
  },
  computed: {
    ...mapGetters([
      'isCollapse'
    ]),
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }

}

</script>
<style  scoped>
.MainAside {
  width: unset !important;
  max-width: 300px;
  position: relative;
}
.MainAside::-webkit-scrollbar {
     display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item:hover{
    color: #f46827 !important;
    background: none !important;
    text-decoration: underline;
    
}
.el-menu-item:hover i {
      color: #f46827 !important;
      }
.el-menu-item{
    padding-left: 0px !important;
    height: 70px;
}
/deep/ .el-submenu__title{
    padding-left: 0px !important;
    height: 70px;
}

/deep/ .el-submenu__title:hover{
    color: #f46827 !important;
    background: none !important;
    text-decoration: underline;
    
}

/deep/ .el-submenu__title:hover i{
    color: #f46827 !important;
    background: none !important;
    text-decoration: underline;
    
}

/deep/ .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	display: none; 

}

/deep/ .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	display: none;

}


.el-menu {
  border: none;
}

.el-menu--collapse {
    width: 0px;
}

.collapse {
  position: absolute;
  bottom: 40px;
  width: 100%;
}
</style>