FE-V2-PC/src/assets/styles/ZDlayout.scss

@import './ZDcolor.sass';
#app{
  background: $back_ff;
}
//
.el-dropdown-menu .popper__arrow{
  left:65px!important;
}
//顶部导航
#app .top-submenu{
  background: #0045AF!important;
  border:0!important;
}
//顶部导航选中
#app .top-submenu .is-active{
  background: #043581!important;
  --theme: #043581!important;
}
//顶部导航按钮
#app .top-submenu .el-menu-item{
  padding:0 20px!important;
  margin:0!important;
  font-size:16px;
  font-weight:500;
}
//顶部导航悬浮
#app .top-submenu .el-menu-item:hover{
  background: #043581!important;
}
//顶部导航-更多按钮
#app .top-submenu .el-submenu__title{
  //backAnimation: #043581!important;
  color:#fff!important;
  height:80px!important;
  line-height:80px!important;
  margin:0!important;
  padding:0 20px!important;
  font-size:16px;
  font-weight:500;
  .el-submenu__icon-arrow{
    margin-top:-2px!important;
  }
}
//顶部导航-更多悬浮
#app .top-submenu .el-submenu__title:hover{
  background: #043581!important;
}
//顶部导航-更多下啦列表
.el-menu--horizontal{
  .el-menu{
    padding:10px 0;
    margin:0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
    background: #f5f5f5!important;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
  }
}
.all-menu{
  font-size:16px;
  font-weight:500;
  margin:5px 10px;
  background: #f5f5f5!important;
  color:#333!important;
  border-radius:10px;
}
.all-menu:hover{
  background: #0045AF!important;
  color:#fff!important;
  border-radius:10px;
}
//缩小后的遮罩
.drawer-bg{
  display: none;
}
#app .sidebar-container .el-scrollbar__bar.is-vertical{
  display: none;
}
/*侧边栏-左*/
.el-menu{
  background: $layout_left_back!important;
  font-family: Microsoft YaHei;
  font-weight: bold;
}
#app .sidebar-container .theme-dark .nest-menu svg{
  display: none;
}
#app .sidebar-container .theme-dark .nest-menu span{
  margin-left:30px;
}
#app .sidebar-container{
  background: $layout_left_back!important;
  width:300px!important;
  //box-shadow: none;
  //box-shadow:0 0 0 rgb(0 21 41 / 35%);
  //border-bottom-right-radius: 30px;
  //border-top-right-radius: 30px;
  overflow: hidden;
  padding:0 20px;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
  //logo栏
  .sidebar-logo-container{
    background:$layout_left_button!important;
  }
  //按钮栏-父
  .el-submenu__title{
    background:$layout_left_button!important;
    color:$layout_left_color!important;
    font-size:16px;
    font-weight:700;
    margin:10px 0 0 0!important;
    border-radius:10px!important;
    height:40px!important;
    line-height:40px!important;
    svg{
      color:#0045af;
    }
  }
  .el-submenu__title span{
    display: inline-block;
    margin-top:-3px;
  }
  .el-submenu__title i{
    display: inline-block;
  }
  .el-submenu__title:hover{
    background:$layout_left_button_hover!important;
    color:$layout_left_color_selected!important;
    margin:10px 0 0 0!important;
    border-radius:10px!important;
    height:40px!important;
    line-height:40px!important;
    i{
      color:#fff!important;
    }
    svg{
      color:#fff;
    }
  }
  .el-submenu__title:hover i{
    display: inline-block;
    margin-right:0;
  }
  //独立
  .submenu-title-noDropdown{
    background:$layout_left_button!important;
    color:$layout_left_color!important;
    font-size:16px;
    font-weight:700;
    margin:10px 0 0 0!important;
    border-radius:10px!important;
    height:40px!important;
    line-height:40px!important;
    svg{
      color:#0045af;
    }
  }
  .submenu-title-noDropdown span{
    display: inline-block;
    margin-top:-3px;
  }
  //独立-悬浮
  .submenu-title-noDropdown:hover{
    color:$layout_left_color_selected!important;
    background:$layout_left_button_hover!important;
    margin:10px 0 0 0!important;
    border-radius:10px!important;
    height:40px!important;
    line-height:40px!important;
    svg{
      color:#fff;
    }
  }
  //独立-选中
  .router-link-active li{
    color:$layout_left_color_selected!important;
    background:$layout_left_button_hover!important;
    margin:10px 0 0 0!important;
    border-radius:10px!important;
    height:40px!important;
    line-height:40px!important;
    //width:260px;  //因为表现异常 暂时注释掉
    svg{
      color:#fff;
    }
  }
}
//按钮-子
#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .theme-dark .el-submenu .el-menu-item{
  color:$layout_left_color!important;
  background-color:$layout_left_button!important;
  margin:10px 0 0 0!important;
  border-radius:10px!important;
  height:40px!important;
  line-height:40px!important;
  svg{
    color:#0045af;
  }
}
#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .theme-dark .el-submenu .el-menu-item span{
  display: inline-block;
  margin-top:-3px;
}
//按钮-子-悬浮
#app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover{
  background-color:$layout_left_button_hover!important;
  color:$layout_left_color_selected!important;
  margin:10px 0 0 0!important;
  border-radius:10px!important;
  height:40px!important;
  line-height:40px!important;
  svg{
    color:#fff;
  }

}
//二级父类
#app .sidebar-container .theme-dark .nest-menu .el-submenu .el-submenu__title{
  font-size:14px;
  font-weight:700;
  //width:260px;  //因为表现异常 暂时注释掉
  margin:10px 0 0 0!important;
  border-radius:10px!important;
  height:40px!important;
  line-height:40px!important;
}
#app .sidebar-container .theme-dark .nest-menu .el-submenu .el-submenu__title:hover i{
  display: inline-block;
  margin-top:-10px;
}
//二级父类-悬浮
#app .sidebar-container .theme-dark .nest-menu .el-submenu .el-submenu__title:hover{
  background-color:$layout_left_button_hover!important;
  color:$layout_left_color_selected!important;
  margin:10px 0 0 0!important;
  border-radius:10px!important;
  height:40px!important;
  line-height:40px!important;
}
//选中按钮-父
#app .sidebar-container .theme-dark .is-active > .el-submenu__title{
  color:$layout_left_color!important;
  //color:$layout_left_color_selected!important;
  //width:260px;  //因为表现异常 暂时注释掉
}
#app .sidebar-container .theme-dark .is-active > .el-submenu__title:hover{
  color:$layout_left_color_selected!important;
  //color:$layout_left_color_selected!important;
}
//选中按钮-子
#app .sidebar-container .theme-dark .nest-menu a .is-active{
  background:$layout_left_button_selected!important;
  color:$layout_left_color_selected!important;
  margin:10px 0 0 0!important;
  border-radius:10px!important;
  height:40px!important;
  line-height:40px!important;
  //width:260px;  //因为表现异常 暂时注释掉
}
//右侧小图标-菜单关闭
.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
  -webkit-transform: rotateZ(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotateZ(-90deg);
  margin-top: -10px;
}
//右侧小图标-菜单展开
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
  -webkit-transform: rotateZ(0deg);
  -ms-transform: rotate(0deg);
  transform: rotateZ(0deg);
  margin-top: -10px;
}
//右侧小图标-样式
.el-submenu>.el-submenu__title .el-submenu__icon-arrow::before{
  //content: '\e790';
  font-size:20px;
}
/*内容栏-右*/
#app .main-container{
  flex:1;
  margin-left:300px;
  background: $layout_right_back;
  display: flex;
  flex-direction: column;
}
#app .app-main{
  flex:1;
  display: flex;
  font-family: Microsoft YaHei;
  font-weight: bold;
}
#app .app-container{
  flex:1;
  background: $back_ff;
  border-radius:10px;
  //height:870px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding:0;
  margin:5px 20px 20px 10px;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
}
//#app .app-container::-webkit-scrollbar {
//  display: none;
//}
#app .app-container::-webkit-scrollbar{
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
#app .app-container::-webkit-scrollbar-thumb{
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #999;
  background: #fff;
}
//双时间选项
.el-range-editor--small.el-input__inner{
  height:40px;
}
//角色管理
.role-el-dialog{
  .tree-border{
    height:200px;
    overflow-y: scroll;
  }
  //滚动条样式
  .tree-border::-webkit-scrollbar{
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  .tree-border::-webkit-scrollbar-thumb{
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #999;
    background: #fff
  }
  .tree-border::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
    border-radius: 0;
    background: rgba(255,255,255,0);
  }
}

//顶部菜单导航条
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus{
  background: #043581 !important;
}