sidebar.scss

.app {
  display: flex;
  // height: 100%;
  .app-aside{
    width:220px;
    flex-grow: 0;
    border-right: 1px solid #DCDFE6;
    background-color: #04142A;
    transition: width 0.28s;
    .el-menu{
      border-right: none;
    }
    .el-menu--collapse{
      width: 53px;
    }
  }
  .hideSidebar{
      width: 54px !important;
  }
  .app-wrapper{
    @include clearfix;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    width: 100%;
    min-height: 100vh;
    //  overflow: hidden;
     overflow-x: hidden;
     background-color: #e0e2e5;
    
  }
  >>> .drawer-area {
    // width: 350px !important;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
  }

  .app-layout-footer{
    flex: 0 0 auto;
    padding: 24px 50px;
    color: #333;
    font-size: 14px;
    text-align: center;
    // background: #f0f2f5;
    img{
      display: block;
      margin: 0 auto;
      width: 28px;
      height: 28px;
      margin-bottom: 10px;
    }
  }
}

.app-header{
  flex: 0 0 auto;
  height: 55px;
  color: #333;
  background-color: #fff;
  // box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.2);
  border-bottom: 1px solid #ddd;
  .title{
    padding: 0 15px;
    line-height: 55px;
    font-size: 20px;
  }
  .manage{
    display:flex;
    justify-content: flex-end;
    height: 55px;
  }
}
// main-container global css
.app-content {
  flex: auto;
  box-sizing: border-box;
  // height: calc(100vh - 0px);
  // overflow-y: scroll;
}

.fullExpand{
  padding-left: 0 !important;
}

// mobile responsive
.mobile {
  .drawer-header-icon {
    margin-left: 10px;
  }
  .header-left .logo {
    span{
      background-size: 80% auto !important;
    }
  }
}

// 主题四头部居中和定宽样式 start 
@mixin drawer-header-style($value) {
  .drawer-header{
    position: relative;
    max-width: $value;
    margin: 0 auto;
    background: none;
  }

  .app-content-setWidth{
     width: $value !important;
     margin: 0 auto;
  }
}

@media (min-width:1400px){
   @include drawer-header-style(1340px);
}
@media (min-width:1200px) and (max-width:1399px){
    @include drawer-header-style(1140px);
}
@media (min-width:992px) and (max-width:1199px){
    @include drawer-header-style(960px);
}
@media (min-width:768px) and (max-width:991px){
    @include drawer-header-style(720px);
}
@media (min-width:576px) and (max-width:767px){
    @include drawer-header-style(540px);
}

// 主题四头部居中和定宽样式 end

// 固定头部样式开始
@mixin fixed-header-base($value) {
  position: fixed;
  z-index:999;
  left:$value;
  top:0;
}

.fixed-header-one-open{
@include fixed-header-base(220px);
width: calc(100% - 220px);
}
.fixed-header-one-open + .app-content{
padding-top: 55px;
}

.fixed-header-one-close{
@include fixed-header-base(54px);
width: calc(100% - 54px);
}
.fixed-header-one-close + .app-content{
padding-top: 55px;
}

.fixed-header-two{
@include fixed-header-base(0px);
width: calc(100% - 0px);
}
.fixed-header-two + .app-content{
padding-top: 55px;
}


.fixed-aside {
position: fixed;
z-index: 1;
height: 100%;
left: 0;
top: 0;
}
.fixed-aside-open+.app-wrapper{
padding-left: 220px;
}
.fixed-aside-close+.app-wrapper{
padding-left: 54px;
}
// 固定头部样式结束

// 侧边栏菜单黑色主题加样式 开始
.menu-dark >>>{
  .el-menu {
    > .el-menu-item{
      background-color: #0f1e34 !important;
    }
    > .el-submenu> .el-submenu__title{
      background-color: #0f1e34 !important;
    }
  }
  .el-menu-item.is-active{
    background-color: #0a2445 !important;
  }
  .el-submenu.is-active.is-opened > .el-submenu__title{
    color: #fff !important;
    border-bottom: none !important; //兼容布局2
  }

  .el-submenu.is-active > .el-submenu__title{
    color: #fff !important;
    border-bottom: none !important;  //兼容布局2
  }
  .el-menu--popup{//兼容布局2
    background-color: #0f1e34 !important;
  }
}
//测试通过css改样式，暂时不生效
.menuTest >>>{
  //  设置hover背景色
  > .el-menu-item:hover{
    background-color: rgb(3,16,34);
  }
  > .el-submenu:hover .el-submenu__title{
    background-color: rgb(3,16,34);
  }
  //设置一级菜单背景色
  .el-menu-item, .el-submenu{
    background-color: #04142A;
    color: #B0B4B6;
  }
  .el-submenu> .el-submenu__title{
      color: #B0B4B6;
  }
  //设置展开菜单背景色
  .el-menu {
    > .el-menu-item{
      background-color: #0f1e34 !important;
    }
    > .el-submenu> .el-submenu__title{
      background-color: #0f1e34 !important;
    }
  }
  //设置选中背景色
  .el-menu-item.is-active{
    color: #2f9df2;
    background-color: #0a2445 !important;
  }
}
 // 侧边栏菜单黑色主题加样式 结束

 // 侧边栏菜单白色主题加样式 开始
.menu-light >>>{
  .el-menu {
    > .el-menu-item{
      background-color: #f2f6fa !important;
    }
    > .el-submenu> .el-submenu__title{
      background-color: #f2f6fa !important;
    }
  }
  .el-menu-item.is-active{
    background-color: #e0e6f8 !important;
  }
  .el-submenu.is-active.is-opened > .el-submenu__title{
    color: #010622 !important;
    border-bottom: none !important; //兼容布局2
  }

  .el-submenu.is-active > .el-submenu__title{
    color: #435DEB !important;
    border-bottom: none !important;  //兼容布局2
  }
  .el-menu--popup{//兼容布局2
    background-color: #f2f6fa !important;
  }
}

 // 侧边栏菜单白色主题加样式 结束