.zmdms-container {
  background-color: @content-bg;
  .zmdms-sider {
    background-color: @primary-color;
    // background-image: url("../../assets/img/common/menu_bg.jpg");
    background-size: 100% auto;
    z-index: 102;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .zmdms-content {
    background-color: @content-bg;
  }
  // 头部内容
  .zmdms-content--header {
    padding: 0;
    background: @bg-white;
    height: @header-height;
    line-height: @header-height;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    .ant-tabs {
      flex: 1;
      margin-top: 8px;
      width: calc(100% - 350px);
      &.zmdms-content--header-tabs {
        width: 300px;
      }
      .ant-tabs-tab {
        > div {
          padding: 0;
        }
        a {
          display: inline-block;
          // padding: 0 5px 0 10px;
          padding: 0 20px 0 20px;
          color: #768696;
        }
        &.ant-tabs-tab-with-remove {
          a {
            padding: 0 10px 0 20px;
          }
        }
      }
      .ant-tabs-nav {
        margin-bottom: 0;
      }
    }
  }
  .zmdms-content--content {
    height: calc(100vh - @header-height);
    position: relative;
  }
  .zmdms-content--header-info {
    display: flex;
    height: 48px;
    color: @_color_black_1;
    max-width: 350px;
    .full-screen {
      width: 36px;
      text-align: center;
      cursor: pointer;
    }
    .user-operation {
      padding: 0 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      &:hover {
        background-color: rgb(247, 247, 247);
      }
      > span:last-child {
        color: @_color_black_1;
        margin-left: 8px;
        display: inline-block;
        width: 70px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

.zmdms-menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
  // logo容器
  .zmdms-logo {
    display: block;
    padding: 9px 0 5px 0;
    height: 48px;
    display: flex;
    align-items: center;
    &.zmdms-logo--line {
      position: relative;
      z-index: 1000;
      &::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 29px;
        background: #505cbe;
        right: -0.5px;
      }
    }
    > img {
      margin: 0 auto;
      display: block;
      width: 78px;
    }
  }
  // 搜索框
  .zmdms-menu--search {
    background-color: rgba(91, 138, 246, 0.4);
    position: relative;
    > input {
      background-color: rgba(91, 138, 246, 0.4);
      border: none;
      color: #fff;
      line-height: 36px;
      height: 36px;
      font-size: @font-size-text;
      &::placeholder {
        color: #fff;
        font-size: @font-size-text;
      }
    }
    .zmdms-menu--search__icon {
      position: absolute;
      right: 0;
      top: 3px;
      color: #fff;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
  }
  // 菜单著容器
  .zmdms-menu--main {
    background: transparent;
    border-right: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    // 无背景
    &.zmdms-menu--main-hide-bg {
      .ant-menu-item-selected {
        background: #1566d2 !important;
      }
    }
    // 菜单换行显示
    &.zmdms-menu--main-item-line {
      .ant-menu-item {
        min-height: 36px;
        height: auto !important;
        line-height: 20px !important;
        .ant-menu-title-content {
          width: 100%;
          word-wrap: break-word;
          white-space: pre-wrap;
          display: inline-block;
          height: auto !important;
          text-overflow: unset !important;
        }
      }
    }
    > .ant-menu-submenu {
      color: @text-white;
      &.ant-menu-submenu-open {
        > .ant-menu-submenu-title {
          color: #fff;
        }
      }
      > .ant-menu-submenu-title {
        padding: 0;
        margin: 0;
        height: 36px;
        line-height: 36px;
        display: flex;
        align-items: center;
        background-color: #5b76f5;
        background-color: rgba(91, 138, 246, 0.4);
        backdrop-filter: blur(4px);
        font-size: @font-size-text;
        color: rgba(255, 255, 255, 0.65);
        .ant-menu-submenu-arrow {
          color: rgba(255, 255, 255, 0.65);
          right: 6px;
        }
        .ant-menu-title-content {
          flex: none;
          width: 88%;
        }
        &:hover {
          color: @text-white;
          .ant-menu-submenu-arrow {
            color: @text-white;
          }
        }
      }
      .ant-menu-sub.ant-menu-inline {
        background: transparent;
      }
      .ant-menu-sub {
        > .ant-menu-item {
          font-size: @font-size-text;
          height: @menu-height;
          line-height: @menu-height;
          margin: 0;
          color: @menu-color;
          display: flex;
          align-items: center;
          // padding-left: 15px !important;
          a {
            color: inherit;
          }
          &:active {
            background: transparent;
          }
          &:hover {
            color: @text-white;
          }
          &:not(:last-child) {
            margin-bottom: 0;
          }
          &.ant-menu-item-selected {
            // UI审查 1566d2 => 5b76f5
            background: #5b76f5;
            color: @text-white;
            width: 100%;
            &::after {
              border-right: none;
            }
          }
        }
      }
    }
    /* 浏览器滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
      height: 4px;
    }
    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0);
      border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: @menu-scrollbar-bg;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: @menu-scrollbar-bg;
    }
    > .ant-menu-item {
      font-size: @font-size-text;
      height: @menu-height;
      line-height: @menu-height;
      margin: 0;
      color: @menu-color;
      display: flex;
      align-items: center;
      a {
        color: inherit;
      }
      &:active {
        background: transparent;
      }
      &:hover {
        color: @text-white;
      }
      &:not(:last-child) {
        margin-bottom: 0;
      }
      &.ant-menu-item-selected {
        background: @primary-color;
        color: @text-white;
        width: 100%;
        &::after {
          border-right: none;
        }
      }
    }
  }
}

// 二级菜单
.zmdms-menu--sub {
  padding: 0;
  .ant-drawer-content {
    overflow: hidden;
    background: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100%;
    .ant-menu {
      background: transparent;
      color: #fff;
    }
  }
  &.ant-drawer-left > .ant-drawer-content-wrapper {
    left: -1px;
  }
  .ant-drawer-header {
    padding: 0;
    border-bottom: none;
    background: transparent;
    .ant-drawer-header-title {
      height: 48px;
      // padding: 0 10px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      .ant-drawer-title {
        color: #fff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 118px;
        }
      }
    }
  }

  &.zmdms-menu--sub-margin .ant-drawer-body {
    // margin-top: 48px;
  }
  .ant-drawer-body {
    padding: 0px;
    font-size: @font-size-text;
    // border-top: 1px solid #5670ea;
    background: rgba(91, 118, 245, 0.4);
    backdrop-filter: blur(2px);
    overflow-x: hidden;
    /* 浏览器滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
      height: 4px;
    }
    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0);
      border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: @menu-scrollbar-bg;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: @menu-scrollbar-bg;
    }
    .ant-menu-submenu.ant-menu-submenu-inline {
      // UI审查 增加底部边框
      border-bottom: 1px solid rgba(141, 158, 255, 0.28);
      padding-bottom: 0;
    }
    .ant-menu-sub.ant-menu-inline {
      // background: #fff;
      background: transparent;
      // UI审查 0 5px => 0 10px;
      padding: 0 10px;
    }
    .ant-menu-sub.ant-menu-inline > .ant-menu-item,
    .ant-menu-item {
      // UI审查 行高修改
      height: @sub-menu-height;
      line-height: @sub-menu-height;
      // color: @submenu-color;
      color: #fff;
      display: flex;
      align-items: center;
      font-size: @font-size-text;
      border-radius: 4px;
      margin: 0;
      &:not(:last-child) {
        margin-bottom: 0;
      }
      a {
        color: #fff;
      }
      &:active {
        background: transparent;
      }
      &:last-child {
        margin-bottom: 10px;
      }
    }
    .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
    .ant-menu-submenu-title {
      font-size: @font-size-text;
      height: 30px;
      line-height: 30px;
      font-weight: 700;
      // color: @submenu-color;
      color: #fff;
      .ant-menu-submenu-arrow {
        color: #fff;
      }
      &:hover {
        // color: @primary-color;
        color: #fff;
        .ant-menu-submenu-arrow {
          // color: @primary-color;
          color: #fff;
        }
      }
      &:active {
        background: transparent;
      }
    }

    .ant-menu-root > .ant-menu-item-only-child {
      margin-top: 2px;
      .ant-menu-title-content {
        font-weight: 700;
      }
    }
    .ant-menu-item-selected {
      color: @text-white;
      background-color: @menu-selected-bg !important;
      &::after {
        border-right: none;
      }
    }
  }
  .ant-drawer-footer {
    padding: 3px 10px;
    height: @footer-height;
    line-height: @footer-height;
    border-top: 1px solid #5670ea;
    background: rgba(91, 118, 245, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    .zt-btn-link {
      color: #fff;
    }
  }

  // 无背景
  &.zmdms-menu--sub-hide-bg {
    .ant-drawer-content {
      background: #fff;
      .ant-menu {
        background: #fff;
      }
    }
    .ant-drawer-header {
      background: #fff;
      border-bottom: 1px solid #ebf3fe;
    }
    .ant-drawer-body {
      background: #fff;
      backdrop-filter: none;
      &::-webkit-scrollbar {
        width: 6px;
        height: 4px;
      }
      &::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 4px;
      }
      &::-webkit-scrollbar-thumb {
        background: #8695a1;
        border-radius: 4px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: #727e88;
      }
      .ant-menu-sub.ant-menu-inline > .ant-menu-item,
      .ant-menu-item {
        color: rgba(0, 0, 0, 0.85);
        a {
          color: rgba(0, 0, 0, 0.85);
          &:hover {
            color: @primary-color;
          }
        }
      }

      .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
      .ant-menu-submenu-title {
        font-size: @font-size-text;
        height: 30px;
        line-height: 30px;
        font-weight: 700;
        // color: @submenu-color;
        color: rgba(0, 0, 0, 0.65);
        .ant-menu-submenu-arrow {
          color: rgba(0, 0, 0, 0.85);
        }
        &:hover {
          color: @primary-color;
          .ant-menu-submenu-arrow {
            color: @primary-color;
          }
        }
        &:active {
          background: transparent;
        }
      }

      .ant-menu-item-selected {
        color: @link-color !important;
        background-color: #e6f7ff !important;
      }
    }
    .ant-drawer-footer {
      border-top: 1px solid #ebf3fe;
      background: none;
      backdrop-filter: none;
      .zt-btn-link {
        color: @link-color !important;
      }
    }
  }
  // 菜单换行显示
  &.zmdms-menu--sub-item-line {
    .ant-menu-item {
      min-height: 30px;
      height: auto !important;
      line-height: 20px !important;
      .ant-menu-title-content {
        width: 100%;
        word-wrap: break-word;
        white-space: pre-wrap;
        display: inline-block;
        height: auto !important;
        text-overflow: unset !important;
      }
    }
  }
}

.logout-spin {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1000;
  padding-top: 100px;
}