:global {
    @opacity-bg  : #ffffff;//#f5f5f5菜单背景色
    @active-color: #0047FF;
    @sider-prefix: sider;
    .ant-menu-inline-collapsed {
      .ant-menu-item {
        padding: 5px 0px 5px 0px !important;
        .anticon {
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      }
      
      .ant-menu-submenu .ant-menu-submenu-title {
        padding: 5px 0px 5px 0px !important;
        .anticon {
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      }
      
    }
    .ant-menu-inline {
      .ant-menu-submenu {
        .ant-menu-submenu-title {
          line-height: 30px;
          height: 35px;
          display: flex;
          align-items: center;
        }
      }
    }  
    .ant-menu-sub.ant-menu-inline{
      .ant-menu-submenu {
        .ant-menu-submenu-title{
          line-height: 20px;
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }
    .ant-menu-sub.ant-menu-inline {
      .ant-menu-item {
        line-height: 18px;
        height: 28px;
        display: flex;
        align-items: center;
      }
    } 
    .ant-menu-submenu-popup {    
      display: none;
     }
     .ant-menu-vertical {
      border-right: 0px;
     }
     .ant-menu-inline {
      border-right: 0px;
     }

  
    .@{sider-prefix} {
      position        : relative;
      width           : 100%;
      height          : 100%;
      // padding         : 0 12px;
      background-color: @opacity-bg;
      transition      : width .2s ease;
      // box-shadow      : 0 0 10px rgba(0, 0, 0, 0.25);
  
      &.shortMenuShow {
      
        height: 100%;
        // overflow: auto;
        // position: relative;
        background-color: #ffffff;
        // display: flex;
        // flex-direction: row;
      }
      &.shortMenuShow_overflow {
        width: 256;
        overflow: auto;
        height: 100%;
        // width: ~'calc(100% - 12px)';
      }
      &.shortMenuShow_overflow::-webkit-scrollbar {
        display: none;
      }
      &__menuAll,
      &__menu {
        display        : flex;
        flex-direction : row;
        justify-content: flex-start;
        align-items    : center;
        width          : 100%;
        padding        : 0 12px;
        cursor         : pointer;
        overflow       : hidden;
      }
  
      &__menuAll {
        height       : 61px;
        border-bottom: 1px solid #333333;//#333333菜单下划线颜色
  
        &-icon {
          width : auto;
          height: 28px;
        }
      }
  
      &__menuExpand {
        position        : absolute;
        top             : 0;
        left            : 100%;
        width           : 0;
        height          : 100%;
        transition      : width .2s ease;
        background-color: @opacity-bg;
        box-shadow      : 6px 0 10px rgba(0, 0, 0, 0.1);
  
        &-divempty {
          position: absolute;
          top     : -52px;
          left    : -30%;
          height  : 50px;
          width   : 130%;
        }
  
        &-divempty-hide {
          position: absolute;
        }
  
        &-inner {
          height : 100%;
          padding: 0 24px;
        }
  
        &-divider {
          position   : absolute;
          top        : 0;
          left       : 0;
          height     : 100%;
          border-left: 1px solid #333333;//#333333
        }
  
        &-divempty-right {
          position: relative;
          bottom  : 100%;
          left    : 100%;
          height  : 100%;
          width   : 200px;
        }
  
        &-header {
          display      : flex;
        //   flex-wrap    : nowrap;
        //   width        : 100%;
        //   height       : 61px;
          border-bottom: 1px solid #333333;//#333333菜单扩展处下划线颜色
          flex-direction: column;
          font-size: 16px;
        }
  
        &-body {
          width  : 100%;
          height : ~'calc(100% - 140px)';
          padding: 12px 0;
  
          &--scroll {
            display        : flex;
            flex-direction : column;
            justify-content: flex-start;
            align-items    : flex-start;
            flex-wrap      : wrap;
          }
        }
  
        &-footer {
          position     : relative;
          height       : 70px;
          padding      : 4px;
          border       : 1px solid #e1e1e1;
          border-radius: 4px;
  
          &--title {
            position: absolute;
            top     : -24px;
            left    : 0;
          }
  
          &--scroll {
            font-size  : 14px;
            line-height: 18px;
          }
        }
  
        &-menu {
          position       : relative;
          display        : flex;
          flex-direction : column;
          justify-content: center;
          align-items    : center;
          width          : 82px;
          height         : 100%;
          margin-right   : 40px;
          cursor         : pointer;
  
          &:hover {
  
            .@{sider-prefix}__menuExpand-menu--itemIcon,
            .@{sider-prefix}__menuExpand-menu--itemText {
              color: @active-color;
            }
  
            .@{sider-prefix}__menuExpand-menu--indicator {
              opacity: 1;
            }
          }
  
          &.lastChild {
            margin-right: 0;
          }
  
          &--item {
            width          : 100%;
            display        : flex;
            flex-direction : row;
            justify-content: center;
            align-items    : center;
  
            &Icon {
              font-size   : 12px;
              color       : #333333;//#333333右侧扩展菜单图标颜色
              margin-right: 5px;
              transition  : color .2s ease;
  
              &.active {
                color: @active-color;
              }
            }
  
            &Text {
              font-size : 16px;
              color     : #333333;//#333333右侧扩展菜单字体颜色
              transition: color .2s ease;
              &.active {
                color: @active-color;
              }
            }
          }
  
          &--indicator {
            position        : absolute;
            bottom          : 12px;
            width           : 48px;
            height          : 2px;
            background-color: @active-color;
            border-radius   : 2px;
            opacity         : 0;
            transition      : opacity .2s ease;
  
            &.active {
              opacity: 1;
            }
          }
        }
  
        &-subMenu {
          display       : flex;
          flex-direction: column;
          padding-right : 20px;
          margin-bottom : 4px;
          overflow      : hidden;
  
          &--title {
            font-size    : 12px;
            color        : #333333;//#ABABAB二级菜单颜色
            margin-bottom: 18px;
            cursor       : pointer;
            
            &--icon {
              margin-left: 5px;
              font-size  : 14px;
            }
  
            &:hover {
              color: @active-color;;
            }
          }
  
          &--menu {
            width          : 100%;
            // padding-left   : 20px;
            margin-bottom  : 20px;
            display        : flex;
            flex-direction : row;
            justify-content: flex-start;
            align-items    : center;
            cursor         : pointer;
  
            &:hover {
  
              .@{sider-prefix}__menuExpand-menu--itemIcon,
              .@{sider-prefix}__menuExpand-menu--itemText {
                color: @active-color;
              }
            }
          }
        }
      }
  
      &__scrollbars {
        width : 100%;
        height: ~'calc(100% - 61px)' !important;
      }
  
      &__menu {
        height    : 28px;
        margin-top: 30px;
  
        &:hover {
  
          .@{sider-prefix}__menu-icon,
          .@{sider-prefix}__menu-font--text {
            color: @active-color;
          }
        }
  
        &.lastChild {
          margin-bottom: 30px;
        }
  
        &-icon {
          font-size : 28px;
          color     : #333333;//#333333左侧常用菜单图标颜色
          transition: color .2s ease;
  
          &.active {
            color: @active-color;
          }
        }
  
        &-font {
          display        : flex;
          flex-direction : row;
          justify-content: flex-start;
          align-items    : center;
          margin-left    : 16px;
  
          &--text {
            font-size   : 16px;
            color       : #333333;//#333333左侧常用菜单字体颜色
            margin-right: 4px;
            white-space : nowrap;
            transition  : color .2s ease;
  
            &.active {
              color: @active-color;
            }
          }
  
          &--icon {
            font-size: 12px;
            color    : #000000;
          }
        }
      }
    }
  }