odc.xiaohui
2023-03-08 d24c9dde20cba23b96082b4db81b5223c75e4ea9
src/views/layout/components/Menu/index.vue
@@ -28,6 +28,7 @@
                  v-if="secondMenu.menuVoArrayList.length > 0"
                  :index="secondMenu.url ? secondMenu.url : secondMenu.id.toString()"
                  class="secondMenu"
                  :class="secondMenu.menuVoArrayList.length > 0?'is-Active':'none-Active'"
                >
                  <template slot="title">
                    <span class="secondSpan">{{ secondMenu.title }}</span>
@@ -37,7 +38,11 @@
                    :key="thirdMenu.id"
                    :index="`${thirdMenu.id}`"
                    :route="{ name: thirdMenu.url }"
                    >{{ thirdMenu.title }}</el-menu-item
                    v-if="thirdMenu.id!='65'"
                    >
                    <template>
                      {{thirdMenu.title }}
                    </template></el-menu-item
                  >
                </el-submenu>
                <el-menu-item
@@ -89,7 +94,8 @@
      const userName = sessionStorage.getItem('name');
      users.getMenu({ name: userName })
          .then(res => {
            console.log(res)
            // console.log(res)
            // debugger
            this.menuList = res.menus;
            sessionStorage.setItem('user', JSON.stringify(res));
          })
@@ -110,14 +116,12 @@
    height: 36px;
  }
}
.el-aside {
  background: #313350;
  color: #e9eef3;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  //    固定标题
  .siderbar-title {
    position: fixed;
@@ -131,59 +135,87 @@
    z-index: 999;
    cursor: pointer;
  }
  .el-scrollbar {
    height: calc(100vh - 66px);
    margin-top: 66px;
    box-sizing: border-box;
    .el-menu {
      background: linear-gradient(#313350, #0f2b56);
      border: 0;
      font-size: 16px;
      .is-opened{
        .fisrtSpan{
          color: #22d3eb;
        }
      }
      .firstMenu {
        background: #313350;
        text-align: left;
        //border-bottom:1px solid #ccc ;
        &:hover > .el-submenu__title {
          background-color: #092c4a;
        }
        &:hover .fisrtSpan {
          color: #22d3eb;
        }
        span,
        span {
          color: #e9eef3;
          font-size: 16px;
        }
        .el-menu{
          .is-active {
            background-color: #409EFF;
            color: #fff;
          }
          .is-Active{
            background-color: #092c4a;
            color: #fff;
          }
        }
        .el-menu-item {
          color: #e9eef3;
          background-color: #313350;
          font-size: 16px;
          // border-bottom: 0.5px solid #7c7979;
        }
        .el-menu-item:hover {
          background-color: #409EFF;
          color: #22d3eb;
        }
        .is-opened{
          .secondSpan{
            color: #22d3eb;
          }
        }
        .secondMenu{
          //border-bottom:1px solid #ccc ;
          .is-active {
            background-color: #409EFF;
            color: #22d3eb;
          }
        }
      }
      .secondMenu {
        &:hover > .el-submenu__title {
          background-color: #092c4a;
        }
          .secondSpan{
          }
        &:hover .secondSpan {
          color: #22d3eb;
        }
        .is-opened{
          .el-submenu__title{
            background-color: #fff;
          }
        }
        .is-active {
          background-color: #409EFF;
          color: #fff;
        }
      }
      .secondMenu {
        &:hover > .el-submenu__title {
          background-color: #092c4a;
        }
        &:hover .secondSpan {
          color: #22d3eb;
        }
      }
      .thirdMenu {
        &:hover > .el-submenu__title {
          background-color: #092c4a;
@@ -198,7 +230,6 @@
        background-color: #092c4a;
      }
    }
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }