resistancemonitor/2.Web/static/css/layout.scss

$color: #c0c4cc;
$bgColor: #232526;
.layout {
 height: 100%;
 width: 100%;
 // 头部
 header {
  height: 60px;
  background-color: #1f1f1f;
  //   line-height: 60px;
  color: white;
  display: flex;
  justify-content: space-between;
  .text {
   padding: 5px;
   line-height: 60px;
  }
  .name {
   font-size: 24px;
  }
  .msg_out {
   padding: 5px;
   .offline,
   .online {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
   }
   .offline {
    background-color: red;
   }
   .online {
    background-color: green;
   }
   .msg {
    font-size: 24x;
    cursor: pointer;
   }
   .out {
    line-height: 60px;
    padding: 0 20px;
    cursor: pointer;
   }
  }
  .refresh_tool {
   font-size: 24x;
   padding: 0 20px;
   cursor: pointer;
  }
 }
 .main {
  display: flex;
  //   max-width: 100%;
  max-height: calc(100% - 60px);
  width: 100%;
  height: calc(100% - 60px);
  min-height: calc(100% - 60px);
  //   overflow-y: auto;
  @import './scrolbar.scss';
  //  左侧
  .left_main {
   width: 150px;
   text-align: center;
   transition: width 0.5s;
   background-color: $bgColor;
   overflow-y: auto;
   .el-menu {
    border: none;
    height: 100%;
    text-align: left;
   }
   //  关键，必须加上，否则在折叠时会出现第一个文字卡顿后消失
   .el-menu:not(.el-menu--collapse) {
    width: 100%;
   }
   .el-submenu .el-menu-item {
    min-width: 150px;
   }
   .open_close {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: white;
    font-size: 20px;
    cursor: pointer;
   }
  }

  //  右侧
  .right_main {
   flex: 1;
   color: $color;
   width: 100%;
   //    overflow-y: auto;
   background-color: #000000;
   position: relative;
   @import './scrolbar.scss';
   .router_view {
    @import './table.scss';
    @import './date.scss';
    overflow-y: auto;
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background-color: #1f1f1f;
    border-radius: 8px;
   }
   //    .open_close {
   //     position: absolute;
   //     left: 0;
   //     top: 0;
   //     color: white;
   //     font-size: 20px;
   //     cursor: pointer;
   //    }
  }
  .left_main_show {
   width: 64px;
  }
 }
}

/deep/ .el-input__inner::placeholder {
 color: #606266;
}

// 全局弹窗样式
/deep/ .el-dialog {
 border-radius: 17px;
 background-color: $bgColor;
 //   头部
 .el-dialog__header {
  border-radius: 15px 15px 0 0;
  .el-dialog__title {
   color: $color;
  }
 }
 // 主要内容
 .el-dialog__body {
  color: $color;
  // 禁用状态下
  .el-input.is-disabled .el-input__inner {
   background-color: #303133;
  }
 }
 // 底部
 .el-button--default {
  background-color: $bgColor;
  border-color: #606266;
  color: #c0c4cc;
 }
 .el-button--default:hover {
  color: white;
  border-color: $color;
 }
}