@import '../../common/theme.less';
.main {
  height: 100vh;
  * {
    box-sizing: border-box;
  }
  .sider {
    width: @sider_width  !important;
    max-width: @sider_width  !important;
    min-width: @sider_width  !important;
    .logo-wrap {
      background-color: #495a75;
      height: @header_height;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url(./logo.png);
      background-size: 100% 100%;
    }
    .menu-wrap {
      height: calc(~'100vh - @{header_height}');
      overflow-x: hidden;
      overflow-y: auto;
      // 滚动条整体样式
      &::-webkit-scrollbar {
        // 高宽分别对应横竖滚动条的尺寸
        width: 6px;
        height: 6px;
      }
      // 滚动条里面小方块
      &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.3);
      }
      // 滚动条里面轨道
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
      }
    }
    @media screen and (max-width: @screen-xm) {
      width: @sider_width_xm  !important;
      max-width: @sider_width_xm  !important;
      min-width: @sider_width_xm  !important;
      .logo-wrap {
        height: @header_height_xm;
      }
      .menu-wrap {
        height: calc(~'100vh - @{header_height_xm}');
      }
    }
    @media screen and (min-width: (@screen-xm + 1)) and (max-width: @screen-md) {
      width: @sider_width_md  !important;
      max-width: @sider_width_md  !important;
      min-width: @sider_width_md  !important;
      .logo-wrap {
        height: @header_height_md;
      }
      .menu-wrap {
        height: calc(~'100vh - @{header_height_md}');
      }
    }
    @media screen and (min-width: (@screen-md + 1)) {
      width: @sider_width  !important;
      max-width: @sider_width  !important;
      min-width: @sider_width  !important;
      .logo-wrap {
        height: @header_height;
      }
      .menu-wrap {
        height: calc(~'100vh - @{header_height}');
      }
    }
  }
  .main-right {
    .main-header {
      height: @header_height;
      background-color: @white_color;
      border-bottom: 1px solid @border_color;
      padding: 0;
    }
    .main-content {
      height: calc(~'100vh - @{header_height}');
      overflow: auto;
      box-sizing: border-box;
      padding: @main_padding;
      background-color: @main_bgc;
    }
    @media screen and (max-width: @screen-xm) {
      .main-header {
        height: @header_height_xm;
      }
      .main-content {
        height: calc(~'100vh - @{header_height_xm}');
        padding: @main_padding_xm;
      }
    }
    @media screen and (min-width: (@screen-xm + 1)) and (max-width: @screen-md) {
      .main-header {
        height: @header_height_md;
      }
      .main-content {
        height: calc(~'100vh - @{header_height_md}');
        padding: @main_padding_md;
      }
    }
    @media screen and (min-width: (@screen-md + 1)) {
      .main-header {
        height: @header_height;
      }
      .main-content {
        height: calc(~'100vh - @{header_height}');
        padding: @main_padding;
      }
    }
  }
}