// 侧边栏菜单样式--待优化
.el-aside.layer-menu{
  overflow-x:hidden;
  .el-menu-item [class^=el-icon-]{
    font-size:0.30rem;
    width:auto;
  }
  .el-submenu [class^=el-icon-]{
    font-size:0.30rem;
    width:auto;
  }
  padding-top:0.15rem;
  z-index:1;
  box-shadow: 0px 0px 0.15rem $bg-color-shadow;
  background-color:  $bg-color-main ;
  min-height:100vh;
  .el-menu{
    border: 0;
  }
  .el-submenu__title{
    padding:0;
  }
  .menu-level1.el-submenu {
    color: $font-color-secondary;
    .el-submenu__icon-arrow.el-icon-arrow-down{
      transform: rotateZ(-90deg);
    }
    &:hover, &.is-opened  {
      &>.el-submenu__title{
        color: $font-color-primary !important;
        background-color:  $menu-bg-color  !important;
        & [class^=el-icon]{
          opacity: 1;
          color: $font-color-primary !important;
        }
        .el-submenu__icon-arrow.el-icon-arrow-down{
          transform: rotateZ(-180deg);
        }
        .el-submenu__icon-arrow{
          color: $font-color-primary !important;
        }
      }
      position:relative;
      &::after{
        content:"";
        position:absolute;
        left:0;
        top:0;
        height:100%;
        width:6px;
        background-color: $font-color-primary;

      }
    }
    .el-submenu__title{
      padding-left:0.5rem !important;
      font-size:0.2rem;
      height:0.7rem;
      line-height:0.7rem;
      & [class^=el-icon]{
        opacity: 0.6;
        color: $font-color-secondary !important;
        margin-right:0.15rem;
      }
      .el-submenu__icon-arrow{
        color: $font-color-secondary !important;
      }
    }

    &>.el-menu{
      .el-menu-item{
        padding-left:1.06rem !important;
        font-size:0.2rem;
        background-color: $menu-bg-color !important;
        height:0.7rem;
        line-height:0.7rem;
      }
      .el-submenu{
        .el-submenu__title{
          background-color: $menu-bg-color !important;
        }
        .el-menu li{
          padding-left:1.1rem !important;
        }
        &:hover, &.is-opened  {
          &>.el-submenu__title{
            color: $font-color-primary !important;
            background-color:  $menu-bg-color  !important;
            & [class^=el-icon]{
              opacity: 1;
              color: $font-color-primary !important;
            }
            .el-submenu__icon-arrow.el-icon-arrow-down{
              transform: rotateZ(-90deg);
            }
          }
          position:relative;
          &::after{
            content:"";
            position:absolute;
            left:0;
            top:0;
            height:100%;
            width:6px;
            background-color: $font-color-primary;

          }
        }
      }
    }
  }

  .menu-level3{
    .el-menu:first-of-type{
      >.el-menu-item{
        padding-left:1.1rem !important;
      }
    }
  }

  .menu-level1.el-menu-item {
    position:relative;
    padding-left:0.5rem !important;
    font-size:0.2rem;
    height:0.7rem;
    line-height:0.7rem;
    color: $font-color-secondary;
    & [class^=el-icon]{
      opacity: 0.6;
      margin-right:0.2rem;
    }
    &:hover, &.is-active{
      color: $font-color-primary !important;
      background-color:  $menu-bg-color  !important;
      & [class^=el-icon]{
        opacity: 1;
        color: $font-color-primary !important;
      }
      &::after{
        content:"";
        position:absolute;
        left:0;
        top:0;
        height:100%;
        width:6px;
        background-color: $font-color-primary;
      }
    }
  }
}
.el-aside.layer-menu .menu-level1.el-submenu:hover > .el-submenu__title, .el-aside.layer-menu .menu-level1.el-submenu.is-opened > .el-submenu__title{
  background-color: $menu-bg-color !important;
}
.el-aside.layer-menu .menu-level1.el-submenu > .el-menu .el-menu-item{
  background-color: $menu-bg-color !important;
}

.layer-menu-tree{
  padding-top:0.2rem;
  padding-left:0.2rem;
  background-color: inherit;
  [class^="el-icon-datau"], [class*=" el-icon-datau"]{
    font-size:0.2rem;
  }
  .is-current{
    >.el-tree-node__content{
      color: $font-color-primary
    }
  }
  .el-tree-node__content:hover{
    color: $font-color-primary
  }
  .el-tree-node__content{
    height:0.4rem;
  }
  .el-tree-node__label{
    font-size:0.2rem;

  }
}
.el-menu--collapse{
  width:1rem;
}
