eoss-ui 0.7.94 → 0.7.96

package/packages/theme-chalk/src/simplicity-top.scss

@@ -1,1845 +1,1845 @@
-@import './common/var.scss';
-@import './base.scss';
-
-@keyframes open-submenu {
-  0% {
-    padding-left: 0;
-  }
-
-  100% {
-    padding-left: $--main-simplicity-menu-width;
-  }
-}
-
-@keyframes close-submenu {
-  0% {
-    padding-left: $--main-simplicity-menu-width;
-  }
-
-  100% {
-    padding-left: 48px;
-  }
-}
-
-.es-simplicitytop-top-logo {
-  height: 266px;
-  width: 58px;
-  margin-left: 10px;
-}
-
-.es-simplicity-portrait-image {
-  width: 100%;
-  border-radius: 50%;
-  vertical-align: top;
-  background: transparent;
-
-  & > img {
-    width: 100%;
-  }
-}
-
-.es-simplicity-main {
-  height: 100%;
-  margin-left: $--main-simplicity-side-width;
-  overflow: hidden;
-  position: relative;
-
-  .es-simplicity-apps,
-  .es-simplicity-message,
-  .es-simplicity-message-modal,
-  .es-simplicity-apps-modal,
-  .es-simplicity-public-drawer {
-    position: absolute;
-    top: $--main-simplicity-header-height;
-    height: calc(100% - #{$--main-simplicity-header-height});
-  }
-
-  .es-simplicity-apps {
-    .el-drawer__body {
-      background-color: #f4f4f4;
-      padding: 20px;
-
-      @media screen and (max-width: 1600px) and (max-height: 900px) {
-        padding: 14px;
-      }
-
-      @media screen and (max-width: 1280px) and (max-height: 720px) {
-        padding: 10px;
-      }
-
-      @media screen and (max-width: 1024px) and (max-height: 768px) {
-        padding: 6px;
-      }
-    }
-  }
-
-  .es-simplicity-public-drawer {
-    .el-drawer__header {
-      padding: 10px 0 0;
-      margin: 0;
-    }
-  }
-
-  .es-simplicity-subMenus,
-  .es-simplicity-public-drawer {
-    .el-drawer__body {
-      padding: 0;
-      position: relative;
-    }
-  }
-
-  .es-simplicity-subMenus {
-    width: auto;
-    height: 100%;
-    overflow: visible;
-    right: auto;
-    position: absolute;
-    z-index: 999 !important;
-
-    .el-drawer {
-      box-shadow: none;
-      overflow: visible;
-      border-right: 1px solid #dfebf6;
-    }
-  }
-
-  .es-simplicity-message {
-    .el-drawer {
-      background-color: #f4f4f4;
-    }
-  }
-}
-
-.es-simplicity_apps {
-  height: 100%;
-  display: flex;
-
-  .es-simplicity_apps-all {
-    flex: 1;
-    @extend .es-flex-vertical;
-    margin-right: 20px;
-
-    .es-simplicity_apps-box {
-      flex: 1;
-    }
-
-    .es-simplicity_apps-list {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      overflow: hidden;
-      display: flex;
-      align-content: flex-start;
-      flex-wrap: wrap;
-
-      .es-simplicity_apps-list-item {
-        width: 20%;
-        height: 25%;
-        padding: 12px;
-
-        @media screen and (max-width: 1600px) and (max-height: 900px) {
-          padding: 8px;
-        }
-
-        @media screen and (max-width: 1280px) and (max-height: 720px) {
-          padding: 4px;
-        }
-
-        @media screen and (max-width: 1024px) and (max-height: 768px) {
-          padding: 2px;
-        }
-      }
-    }
-
-    .es-simplicity_apps-list-content {
-      @extend .es-flex-vertical;
-      height: 100%;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .es-simplicity_apps-icon {
-      margin-bottom: 16px;
-      color: $--color-primary;
-
-      @media screen and (max-width: 1600px) and (max-height: 900px) {
-        margin-bottom: 12px;
-      }
-
-      @media screen and (max-width: 1280px) and (max-height: 720px) {
-        margin-bottom: 8px;
-      }
-
-      @media screen and (max-width: 1024px) and (max-height: 768px) {
-        margin-bottom: 4px;
-      }
-    }
-
-    .es-simplicity_apps-search {
-      width: 200px;
-
-      .el-input__inner {
-        border-radius: 16px;
-
-        @media screen and (max-width: 1600px) and (max-height: 900px) {
-          height: 28px;
-          line-height: 28px;
-          font-size: 14px;
-        }
-
-        @media screen and (max-width: 1280px) and (max-height: 720px) {
-          height: 24px;
-          line-height: 24px;
-          font-size: 12px;
-        }
-
-        @media screen and (max-width: 1024px) and (max-height: 768px) {
-          height: 20px;
-          line-height: 20px;
-          font-size: 12px;
-        }
-
-        &::placeholder {
-          @media screen and (max-width: 1600px) and (max-height: 900px) {
-            font-size: 14px;
-          }
-
-          @media screen and (max-width: 1280px) and (max-height: 720px) {
-            font-size: 12px;
-          }
-        }
-      }
-
-      .el-input__icon {
-        @media screen and (max-width: 1600px) and (max-height: 900px) {
-          line-height: 28px;
-          font-size: 14px;
-        }
-
-        @media screen and (max-width: 1280px) and (max-height: 720px) {
-          line-height: 24px;
-          font-size: 12px;
-        }
-
-        @media screen and (max-width: 1024px) and (max-height: 768px) {
-          line-height: 20px;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-
-  .es-simplicity_apps-title {
-    font-weight: 500;
-    font-size: 20px;
-    color: #15224c;
-    line-height: 32px;
-    padding: 6px 12px 12px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    @media screen and (max-width: 1600px) and (max-height: 900px) {
-      font-size: 17px;
-      line-height: 26px;
-      padding: 6px 10px 10px;
-    }
-
-    @media screen and (max-width: 1280px) and (max-height: 720px) {
-      font-size: 14px;
-      line-height: 20px;
-      padding: 4px 8px 8px;
-    }
-
-    @media screen and (max-width: 1024px) and (max-height: 768px) {
-      font-size: 12px;
-      line-height: 16px;
-      padding: 4px 6px 6px;
-    }
-  }
-
-  .es-simplicity_apps-box {
-    position: relative;
-  }
-
-  .es-simplicity_apps-list-content {
-    background: #ffffff;
-    border-radius: 9px;
-    padding: 4px;
-    cursor: pointer;
-    overflow: hidden;
-    position: relative;
-
-    &:hover {
-      .es-simplicity_apps-hover {
-        opacity: 1;
-        z-index: 1;
-
-        .es-simplicity_apps-icon {
-          color: rgba(255, 255, 255, 0.5);
-        }
-      }
-    }
-
-    &.es-simplicity_apps-disabled {
-      cursor: not-allowed;
-
-      .es-simplicity_apps-hover {
-        background-color: rgba(115, 122, 148, 0.9);
-      }
-    }
-  }
-
-  .es-simplicity_apps-icon {
-    font-size: 34px;
-    width: 34px;
-    height: 34px;
-    line-height: 34px;
-
-    @media screen and (max-width: 1600px) and (max-height: 900px) {
-      font-size: 30px;
-      width: 30px;
-      height: 30px;
-      line-height: 30px;
-    }
-
-    @media screen and (max-width: 1280px) and (max-height: 720px) {
-      font-size: 26px;
-      width: 26px;
-      height: 26px;
-      line-height: 26px;
-    }
-
-    @media screen and (max-width: 1024px) and (max-height: 768px) {
-      font-size: 22px;
-      width: 22px;
-      height: 22px;
-      line-height: 22px;
-    }
-  }
-
-  .es-simplicity_apps-text {
-    font-weight: 400;
-    font-size: 16px;
-    text-align: center;
-    line-height: 19px;
-
-    @media screen and (max-width: 1600px) and (max-height: 900px) {
-      font-size: 14px;
-      line-height: 17px;
-    }
-
-    @media screen and (max-width: 1280px) and (max-height: 720px) {
-      font-size: 12px;
-      line-height: 15px;
-    }
-  }
-
-  .es-simplicity_apps-hover {
-    opacity: 0;
-    display: flex;
-    flex-direction: column;
-    box-orient: vertical;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-    background-color: $--color-primary-light-5;
-    color: #fff;
-  }
-
-  .es-simplicity_apps-pagination {
-    text-align: right;
-    padding: 18px 20px;
-
-    @media screen and (max-width: 1600px) and (max-height: 900px) {
-      padding: 14px 16px;
-    }
-
-    @media screen and (max-width: 1280px) and (max-height: 720px) {
-      padding: 10px 12px;
-    }
-
-    @media screen and (max-width: 1024px) and (max-height: 768px) {
-      padding: 7px 8px;
-    }
-
-    .el-pagination__total {
-      float: left;
-
-      @media screen and (max-width: 1600px) and (max-height: 900px) {
-        height: 24px;
-        line-height: 24px;
-      }
-
-      @media screen and (max-width: 1280px) and (max-height: 720px) {
-        font-size: 12px;
-        height: 20px;
-        line-height: 20px;
-      }
-
-      @media screen and (max-width: 1024px) and (max-height: 768px) {
-        font-size: 12px;
-        height: 16px;
-        line-height: 16px;
-      }
-    }
-
-    & > button {
-      @media screen and (max-width: 1600px) and (max-height: 900px) {
-        height: 24px;
-        line-height: 24px;
-      }
-
-      @media screen and (max-width: 1280px) and (max-height: 720px) {
-        font-size: 12px;
-        height: 20px;
-        line-height: 20px;
-      }
-
-      @media screen and (max-width: 1024px) and (max-height: 768px) {
-        font-size: 12px;
-        height: 16px;
-        line-height: 16px;
-      }
-    }
-
-    .el-pager li {
-      background-color: #fff;
-
-      @media screen and (max-width: 1600px) and (max-height: 900px) {
-        min-width: 26px;
-        height: 24px;
-        line-height: 24px;
-      }
-
-      @media screen and (max-width: 1280px) and (max-height: 720px) {
-        min-width: 22px;
-        height: 20px;
-        line-height: 20px;
-      }
-
-      @media screen and (max-width: 1024px) and (max-height: 768px) {
-        min-width: 18px;
-        height: 16px;
-        line-height: 16px;
-      }
-    }
-  }
-
-  .es-simplicity_apps-other {
-    width: 34%;
-    padding-left: 20px;
-    border-left: 1px solid #cdd9e4;
-
-    @media screen and (max-width: 1600px) and (max-height: 900px) {
-      padding-left: 14px;
-    }
-
-    @media screen and (max-width: 1280px) and (max-height: 720px) {
-      padding-left: 8px;
-    }
-
-    .es-simplicity_apps-list {
-      display: flex;
-      align-content: flex-start;
-      flex-wrap: wrap;
-
-      .es-simplicity_apps-list-item {
-        width: 50%;
-        padding: 12px;
-
-        @media screen and (max-width: 1600px) and (max-height: 900px) {
-          padding: 8px;
-        }
-
-        @media screen and (max-width: 1280px) and (max-height: 720px) {
-          padding: 4px;
-        }
-
-        @media screen and (max-width: 1024px) and (max-height: 768px) {
-          padding: 2px;
-        }
-      }
-
-      .es-simplicity_app-icon {
-        display: block;
-        width: 34px;
-        height: 34px;
-        font-size: 18px;
-        line-height: 34px;
-        text-align: center;
-        border-radius: 9px;
-      }
-
-      .es-simplicity_apps-text {
-        margin-left: 12px;
-        text-align: left;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        line-clamp: 3;
-        -webkit-line-clamp: 3;
-        word-wrap: break-word;
-
-        @media screen and (max-width: 1600px) and (max-height: 900px) {
-          margin-left: 8px;
-        }
-
-        @media screen and (max-width: 1280px) and (max-height: 720px) {
-          margin-left: 4px;
-        }
-      }
-    }
-
-    .es-simplicity_apps-list-content {
-      display: flex;
-      align-items: center;
-      padding: 16px;
-
-      @media screen and (max-width: 1600px) and (max-height: 900px) {
-        padding: 12px;
-      }
-
-      @media screen and (max-width: 1280px) and (max-height: 720px) {
-        padding: 8px;
-      }
-
-      @media screen and (max-width: 1024px) and (max-height: 768px) {
-        padding: 4px;
-      }
-
-      .es-simplicity_apps-texts {
-        min-height: 36px;
-        display: flex;
-        align-items: center;
-      }
-
-      .es-simplicity_apps-hover {
-        flex-direction: row;
-      }
-    }
-
-    .es-simplicity_apps-systems {
-      padding-top: 20px;
-      border-top: 1px solid #cdd9e4;
-    }
-  }
-}
-
-.es-simplicity-userinfo {
-  padding: 20px;
-
-  .es-simplicity-user {
-    border-bottom: 1px solid #dfebf6;
-    position: relative;
-    padding-bottom: 16px;
-
-    .es-simplicity-user-name {
-      font-weight: 500;
-      font-size: 20px;
-      color: #15224c;
-      line-height: 23px;
-      margin-bottom: 12px;
-      margin-right: 80px;
-    }
-
-    .es-simplicity-org-name,
-    .es-simplicity-dep-post {
-      margin-right: 80px;
-      font-weight: 400;
-      font-size: 14px;
-      color: #737a94;
-      line-height: 16px;
-      margin-bottom: 8px;
-    }
-
-    .es-icon-qiehuangangwei {
-      font-size: 20px;
-      color: #2591f7;
-      cursor: pointer;
-      margin-left: 16px;
-    }
-
-    .es-simplicity-portrait {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 64px;
-      padding: 0 8px 8px;
-
-      .es-upload {
-        margin-top: 12px;
-        margin-left: -8px;
-        margin-right: -8px;
-      }
-    }
-
-    .el-upload--handle {
-      width: 100%;
-    }
-
-    .el-upload--text {
-      width: 100%;
-      text-align: center;
-      font-size: 14px;
-      color: #2591f7;
-    }
-  }
-
-  .es-simplicity-notice-type {
-    padding: 24px 0;
-    border-bottom: 1px solid #dfebf6;
-  }
-
-  .es-simplicity-notice-title {
-    font-size: 14px;
-    color: #15224c;
-    line-height: 16px;
-    margin-bottom: 12px;
-  }
-
-  .es-simplicity-notice-list {
-    .el-checkbox {
-      min-width: 115px;
-    }
-  }
-
-  .es-simplicity-password {
-    padding-top: 24px;
-    font-size: 14px;
-    color: #2591f7;
-    line-height: 16px;
-    cursor: pointer;
-
-    .es-icon-arrow-right {
-      position: relative;
-      top: 1px;
-      margin-left: 8px;
-    }
-  }
-
-  .es-simplicity-qrcode {
-    width: 100px;
-    height: 100px;
-  }
-}
-
-.es-simplicity-unfold {
-  position: fixed;
-  left: $--main-simplicity-side-width;
-  top: $--main-simplicity-header-height;
-  z-index: 9999;
-
-  .el-icon-s-unfold {
-    font-size: 32px;
-    cursor: move;
-    background-color: #fff;
-    border-radius: 10px;
-  }
-}
-
-.es-simplicity-menus {
-  height: 100%;
-  display: flex;
-
-  .es-simplicity-menus-box {
-    width: 220px;
-    height: 100%;
-    position: relative;
-
-    .es-simplicity-menus-title {
-      font-weight: bold;
-      line-height: 30px;
-      padding: 7px 7px 7px 14px;
-      border-bottom: 1px solid #dfebf6;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .es-simplicity-menus-title-text {
-        flex: 1;
-        font-size: 20px;
-        color: #15224c;
-      }
-
-      .es-simplicity-menus-title-icon {
-        font-size: 24px;
-        color: #b9bdc9;
-        cursor: pointer;
-      }
-    }
-
-    .es-simplicity-menus-scrollbar {
-      position: absolute;
-      top: 45px;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  .es-simplicity-menus-view {
-    border-left: 1px solid #dfebf6;
-    display: flex;
-
-    .es-simplicity-menus-box + .es-simplicity-menus-box {
-      border-left: 1px solid #dfebf6;
-    }
-  }
-
-  &.es-simplicity-menus-plus {
-    .es-simplicity-menus-box {
-      .es-simplicity-menus-title {
-        padding: 13px 7px 13px 14px;
-      }
-
-      .es-simplicity-menus-scrollbar {
-        top: 57px;
-      }
-    }
-  }
-}
-
-.es-simplicity-menus-lists {
-  padding: 8px 0;
-
-  &.is-fold {
-    padding: 4px 0;
-  }
-}
-
-.es-simplicity-menus-item {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding: 8px 24px;
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-  color: #15224c;
-
-  &.is-fold {
-    height: 40px;
-    padding: 4px 12px;
-
-    .es-simplicity_apps-icon {
-      margin-right: 0;
-    }
-
-    .es-simplicity-menus-tips {
-      top: 0;
-      right: 0;
-      color: #ff0000;
-      font-size: 12px;
-    }
-
-    .es-icon-pointer-right {
-      display: none;
-    }
-
-    &:hover {
-      &::before {
-        inset: 0 4px;
-      }
-    }
-
-    &.is-active {
-      &::before {
-        inset: 0 4px;
-      }
-    }
-  }
-
-  .es-simplicity_apps-icon {
-    height: 24px;
-    padding: 4px;
-    border-radius: 3px;
-    margin-right: 12px;
-    color: $--color-primary;
-    z-index: 1;
-  }
-
-  .es-simplicity-menus-tips {
-    font-size: 14px;
-    color: #737a94;
-    position: absolute;
-    right: 16px;
-
-    & + .es-simplicity_apps-text {
-      width: 118px;
-    }
-  }
-
-  .es-simplicity_apps-text {
-    width: 200px;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 16px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    position: relative;
-  }
-
-  &:hover {
-    color: $--color-primary;
-
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      inset: 0 12px;
-      background-color: $--color-primary-light-2;
-      border-radius: 6px;
-      z-index: 0;
-    }
-  }
-
-  &.is-active {
-    color: $--color-primary;
-
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      inset: 0 12px;
-      background-color: $--color-primary-light-2;
-      border-radius: 6px;
-      z-index: 0;
-    }
-  }
-
-  .es-icon-pointer-right {
-    color: #737a94;
-    position: absolute;
-    right: 0;
-  }
-}
-
-.es-simplicity-iframe {
-  height: 100%;
-
-  & > .el-tabs__header {
-    height: $--main-simplicity-header-height;
-    padding: ($--main-simplicity-header-height - 36px)/2 0;
-    margin: 0;
-    border-bottom: 1px solid #dfebf6;
-    background-color: #fff;
-
-    & > .el-tabs__nav-main {
-      margin: 0 10px;
-    }
-
-    .el-tabs__nav-next,
-    .el-tabs__nav-prev {
-      height: 36px;
-      font-size: 16px;
-      padding: 0 6px;
-    }
-
-    .el-tabs__nav-wrap {
-      padding: 0 10px;
-
-      &.is-scrollable {
-        padding: 0 28px;
-      }
-
-      &::after {
-        content: none;
-      }
-
-      .el-tabs__item {
-        height: 36px;
-        line-height: 36px;
-        padding: 0 12px !important;
-        background: #f2f2f2;
-        border-radius: 6px;
-        color: #737a94;
-
-        & + .el-tabs__item {
-          margin-left: 12px;
-        }
-
-        &.is-active {
-          color: $--color-primary;
-          background-color: $--color-primary-light-1;
-        }
-      }
-    }
-  }
-
-  & > .el-tabs__content {
-    height: calc(100% - #{$--main-simplicity-header-height});
-    background-color: $--background-color-base;
-
-    .el-tab-pane {
-      height: 100%;
-    }
-  }
-
-  &.is-open {
-    & > .el-tabs__content {
-      animation: open-submenu 0.3s 1ms forwards;
-    }
-
-    &.is-fold {
-      & > .el-tabs__content {
-        animation: close-submenu 0.1s 0ms forwards;
-      }
-    }
-  }
-}
-
-.es-simplicitytop-handler {
-  height: 36px;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  line-height: 24px;
-  padding: 0 10px;
-
-  .es-simplicitytop-online-num {
-    color: #ffd272;
-    font-size: 16px;
-  }
-
-  .es-simplicitytop-handler-item {
-    color: #fff;
-    font-size: 16px;
-    position: relative;
-
-    .el-select {
-      width: 160px;
-      margin-left: 8px;
-    }
-
-    .el-input__inner {
-      border-radius: 6px;
-      height: 32px;
-      line-height: 32px;
-    }
-
-    .el-input__icon {
-      line-height: 32px;
-    }
-
-    &:hover {
-      opacity: 0.75;
-    }
-
-    &:not(:last-child) {
-      &:after {
-        content: '';
-        display: inline-block;
-        height: 20px;
-        border-right: 1px solid #cdd9e4;
-        opacity: 0.2;
-        vertical-align: middle;
-        margin-left: 16px;
-      }
-    }
-
-    & + .es-simplicitytop-handler-item {
-      margin-left: 16px;
-    }
-  }
-
-  .es-simplicitytop-handler-icon {
-    font-size: 16px;
-    padding-right: 5px;
-    cursor: pointer;
-
-    &.es-simplicitytop {
-      font-size: 16px;
-    }
-
-    &.es-icon_image {
-      width: 20px;
-      height: 20px;
-      padding: 0;
-    }
-  }
-  .es-simplicitytop-handler-badge {
-    position: absolute;
-    top: -5px;
-    right: -2px;
-    background-color: #ff0000;
-    border-radius: 10px;
-    color: #fff;
-    font-size: 10px;
-    height: 14px;
-    line-height: 14px;
-    padding: 0 4px;
-  }
-
-  .es-simplicitytop-handler-text {
-    cursor: pointer;
-  }
-}
-
-.es-simplicity-tabs-handler-mask {
-  position: absolute;
-  z-index: 99999;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.es-simplicity-tabs-handler {
-  width: 120px;
-  position: fixed;
-
-  .el-card__body {
-    padding: 4px 0;
-  }
-
-  .es-simplicity-tabs-handler-item {
-    height: 32px;
-    line-height: 32px;
-    padding: 0 20px;
-    color: $--button-disabled-font-color;
-    user-select: none;
-
-    &:not(.is-disabled) {
-      color: rgba(0, 0, 0, 0.75);
-
-      &:hover {
-        background-color: rgba(144, 147, 153, 0.2);
-      }
-    }
-  }
-}
-
-.es-simplicity-drawer-close {
-  cursor: pointer;
-  position: absolute;
-  right: 0;
-  top: 0;
-  color: #6e7c98;
-  z-index: 9999;
-}
-
-.es-simplicity-message {
-  .el-drawer__body {
-    @extend .es-flex-vertical;
-    padding: 20px;
-  }
-
-  .es-simplicity-message-header {
-    padding-bottom: 20px;
-
-    .es-simplicity-message-title {
-      font-weight: bold;
-      font-size: 20px;
-      color: #15224c;
-      line-height: 24px;
-    }
-  }
-
-  .es-simplicity-message-overlook,
-  .es-simplicity-message-handler {
-    margin-left: 12px;
-  }
-
-  .es-simplicity-message-lists-box {
-    flex: 1;
-    position: relative;
-
-    .es-simplicity-message-lists {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  .es-simplicity-message-total {
-    padding-top: 20px;
-    font-size: 14px;
-    color: #6e7c98;
-    line-height: 14px;
-  }
-}
-
-.es-simplicity-message-overlook,
-.es-simplicity-message-handler {
-  font-size: 14px;
-  color: #737a94;
-  float: right;
-  cursor: pointer;
-}
-
-.es-simplicity-message-handler {
-  color: #2591f7;
-}
-
-.es-simplicity-message-lists {
-  .es-simplicity-message-item {
-    background: #ffffff;
-    box-shadow: 0px 12px 24px 0px rgba(33, 70, 141, 0.1);
-    border-radius: 9px;
-    padding: 16px 24px;
-
-    & + .es-simplicity-message-item {
-      margin-top: 20px;
-    }
-
-    .es-simplicity-message-item-title {
-      font-weight: bold;
-      font-size: 14px;
-      color: #15224c;
-      line-height: 16px;
-      margin-bottom: 8px;
-    }
-
-    .es-simplicity-message-item-time {
-      font-size: 12px;
-      color: #737a94;
-      line-height: 14px;
-    }
-  }
-
-  .es-simplicity-message-tips {
-    font-size: 14px;
-    color: #6e7c98;
-    text-align: center;
-    padding-top: 20px;
-  }
-}
-
-.es-simplicity-notice-box {
-  width: 420px;
-  padding: 80px 24px 54px 24px;
-  position: absolute;
-  right: 4px;
-  bottom: 4px;
-  z-index: 9999;
-  background-color: #f5fbff;
-  border-radius: 9px;
-  //animation: ltr-drawer-out 0.3s;
-  animation: rtl-drawer-out 0.3s;
-  overflow: hidden;
-
-  &.es-in {
-    //animation: ltr-drawer-in 0.3s 1ms;
-    animation: rtl-drawer-in 0.3s 1ms;
-  }
-
-  .es-simplicity-message-overlook,
-  .es-simplicity-message-handler {
-    margin-left: 12px;
-  }
-
-  .es-simplicity-notice-header {
-    height: 56px;
-    font-size: 16px;
-    color: #ffffff;
-    padding: 16px 24px;
-    background-color: #2591f7;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-  }
-
-  .es-simplicity-notice-lists {
-    height: 304px;
-  }
-
-  .es-notice-footer {
-    border-top: 1px solid #dfebf6;
-    padding: 20px 44px 16px;
-    font-size: 14px;
-    color: #737a94;
-    line-height: 17px;
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    left: 24px;
-    right: 24px;
-    bottom: 0;
-  }
-}
-
-.el-popover.es-simplicity-menus-hide {
-  display: none !important;
-  opacity: 0;
-  z-index: -999;
-}
-
-.es-public-search-dialog > .el-dialog {
-  & > .el-dialog__header,
-  & > .el-dialog__body {
-    background-color: #fff;
-  }
-}
-
-.es-public-search-box {
-  padding-top: 53px;
-  height: 100%;
-
-  .es-public-search-input {
-    width: 90%;
-    display: block;
-    margin: 0 auto 20px auto;
-  }
-
-  .es-public-search-tabs {
-    height: calc(100% - 60px);
-
-    .el-tabs__header {
-      height: 40px;
-      margin: 0;
-    }
-
-    .el-tabs__nav-wrap {
-      padding: 0 24px;
-    }
-
-    .el-tabs__content {
-      height: calc(100% - 40px);
-      padding: 10px 0;
-    }
-
-    .el-tab-pane {
-      height: 100%;
-      overflow: hidden;
-    }
-  }
-
-  .es-public-search-content {
-    padding: 10px 20px;
-    position: relative;
-
-    &::after {
-      content: '';
-      display: block;
-    }
-  }
-
-  .es-public-search-title {
-    font-size: 16px;
-    line-height: 22px;
-    font-weight: 800;
-    color: #262626;
-    margin-bottom: 23px;
-  }
-
-  .es-public-search-list-item {
-    padding: 16px 8px 16px 60px;
-    position: relative;
-    cursor: pointer;
-
-    &:hover {
-      background: rgba(37, 145, 247, 0.08);
-      border-radius: 9px 9px 9px 9px;
-    }
-  }
-
-  .es-public-search-item-icon {
-    width: 40px;
-    height: 40px;
-    font-size: 14px;
-    position: absolute;
-    left: 8px;
-    top: 50%;
-    margin-top: -20px;
-    border-radius: 6px;
-    color: #fff;
-    text-align: center;
-    line-height: 40px;
-
-    &.es-public-search-item-icons {
-      font-size: 18px;
-    }
-
-    &.es-icon-ppt,
-    &.es-icon-pdf {
-      font-size: 40px;
-      color: #ff7878;
-    }
-
-    &.es-icon-picture,
-    &.es-icon-video,
-    &.es-icon-audioo {
-      font-size: 36px;
-      color: #909399;
-      margin-top: -18px;
-    }
-
-    &.es-icon-excel {
-      font-size: 40px;
-      color: #199051;
-    }
-
-    &.es-icon-word {
-      font-size: 40px;
-      color: #1d60f5;
-    }
-
-    &.es-icon-zip {
-      font-size: 36px;
-      color: #5dc7f7;
-      margin-top: -18px;
-    }
-
-    &.es-icon-txt {
-      font-size: 40px;
-      color: #909399;
-    }
-
-    &.es-icon-ios {
-      font-size: 36px;
-      margin-top: -18px;
-    }
-
-    &.es-icon-android {
-      font-size: 36px;
-      margin-top: -18px;
-      color: #81bd24;
-    }
-
-    &.es-public-search-item-icon-text {
-      background-color: #2778e5;
-    }
-  }
-
-  .es-public-search-item-name {
-    font-size: 14px;
-    font-weight: 500;
-    color: #262626;
-    line-height: 22px;
-  }
-
-  .es-public-search-item-texts {
-    font-size: 12px;
-    font-weight: 400;
-    color: #8c8c8c;
-    line-height: 20px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    .es-public-search-item-text + .es-public-search-item-text {
-      margin-left: 20px;
-    }
-  }
-
-  .es-public-search-more {
-    text-align: center;
-    color: #8c8c8c;
-    font-weight: 500;
-    font-size: 14px;
-    margin-top: 20px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #dce3e7;
-
-    .es-public-search-more-text {
-      cursor: pointer;
-    }
-  }
-
-  .es-public-search-more-quote {
-    color: #2778e5;
-    padding: 0 4px;
-  }
-
-  .es-public-search-info {
-    padding: 16px 20px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #262626;
-  }
-
-  .es-public-search-lists {
-    padding: 0 20px;
-
-    .es-public-search-list-item {
-      border-bottom: 1px solid #f0f0f0;
-    }
-  }
-
-  .es-public-search-no-more {
-    text-align: center;
-    padding: 20px;
-  }
-
-  .es-public-search-scrollbar {
-    .el-scrollbar__view {
-      min-height: 100%;
-    }
-  }
-}
-
-.es-menu-vertical.es-simplicity_menus,
-.es-menu-popper-vertical.es-simplicity_menus {
-  background-color: #fff;
-  padding: 8px 0;
-
-  .el-menu-item:not(.is-disabled),
-  .el-submenu__title,
-  & > .el-menu .el-menu-item:not(.is-disabled),
-  & > .el-menu .el-submenu__title {
-    padding: 8px 24px;
-    height: 48px;
-    line-height: 32px;
-    color: #15224c;
-
-    i {
-      color: #15224c;
-      z-index: 1;
-    }
-
-    .es-menu-item-icon {
-      color: #15224c;
-      z-index: 1;
-      height: 24px;
-      line-height: 16px;
-      padding: 4px;
-      border-radius: 3px;
-      margin-right: 12px;
-      font-size: 16px;
-    }
-
-    &:hover,
-    &:focus,
-    &.is-active {
-      background-color: #fff;
-      color: $--color-primary;
-
-      i {
-        color: $--color-primary;
-      }
-
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        inset: 0 8px;
-        background-color: $--color-primary-light-2;
-        border-radius: 6px;
-        z-index: 0;
-      }
-    }
-  }
-
-  .el-menu-item.is-disabled {
-    .es-menu-item-icon {
-      color: #15224c;
-      z-index: 1;
-      height: 24px;
-      line-height: 16px;
-      padding: 4px;
-      border-radius: 3px;
-      margin-right: 12px;
-      font-size: 16px;
-      cursor: not-allowed;
-    }
-  }
-
-  .el-menu--popup .el-menu-item:not(.is-disabled),
-  .el-menu--popup .el-submenu__title {
-    &:hover,
-    &:focus,
-    &.is-active {
-      background-color: transparent;
-    }
-  }
-
-  &.es-simplicity_menus-fold {
-    padding: 4px 0;
-
-    .el-menu-item:not(.is-disabled),
-    .el-submenu__title,
-    > .el-menu .el-menu-item:not(.is-disabled),
-    > .el-menu .el-submenu__title {
-      width: 48px;
-      height: 40px !important;
-      padding: 4px 12px !important;
-      min-height: unset !important;
-      line-height: 32px;
-      justify-content: center;
-
-      .es-menu-item-icon {
-        margin-right: 0;
-      }
-
-      &:hover,
-      &:focus,
-      &.is-active {
-        .es-menu-item-icon {
-          position: relative;
-          z-index: 1;
-        }
-
-        &::before {
-          inset: 0 4px;
-        }
-      }
-    }
-  }
-}
-
-.es-simplicitytop-nav {
-  height: $--main-simplicitytop-header-height;
-  background-color: $--color-primary-light-7;
-  background-position: left -20px;
-  background-size: auto 100px;
-  background-repeat: no-repeat;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-left: 20px;
-}
-
-.es-simplicitytop-main {
-  .es-simplicity-apps,
-  .es-simplicity-message,
-  .es-simplicity-message-modal,
-  .es-simplicity-apps-modal,
-  .es-simplicity-public-drawer {
-    position: absolute;
-    top: $--main-simplicity-header-height;
-    height: calc(100% - #{$--main-simplicity-header-height});
-  }
-
-  .es-simplicity-apps {
-    .el-drawer__body {
-      background-color: #f4f4f4;
-      padding: 20px;
-
-      @media screen and (max-width: 1600px) and (max-height: 900px) {
-        padding: 14px;
-      }
-
-      @media screen and (max-width: 1280px) and (max-height: 720px) {
-        padding: 10px;
-      }
-
-      @media screen and (max-width: 1024px) and (max-height: 768px) {
-        padding: 6px;
-      }
-    }
-  }
-
-  .es-simplicity-public-drawer {
-    .el-drawer__header {
-      padding: 10px 0 0;
-      margin: 0;
-    }
-  }
-
-  .es-simplicity-subMenus,
-  .es-simplicity-public-drawer {
-    .el-drawer__body {
-      padding: 0;
-      position: relative;
-    }
-  }
-
-  .es-simplicity-subMenus {
-    width: auto;
-    height: 100%;
-    overflow: visible;
-    right: auto;
-    position: absolute;
-    z-index: 999 !important;
-
-    .el-drawer {
-      box-shadow: none;
-      overflow: visible;
-      border-right: 1px solid #dfebf6;
-    }
-  }
-
-  .es-simplicity-message {
-    .el-drawer {
-      background-color: #f4f4f4;
-    }
-  }
-}
-
-.es-simplicitytop {
-  &-org {
-    display: flex;
-    align-items: center;
-    color: #fff;
-
-    &-text {
-      margin-left: 4px;
-    }
-
-    .el-input__inner {
-      height: 32px;
-      line-height: 32px;
-      border-radius: 6px;
-    }
-
-    .el-input__icon {
-      line-height: 32px;
-    }
-  }
-
-  &-greeting {
-    color: #fff;
-    text-align: center;
-    line-height: 44px;
-  }
-
-  &-main {
-    position: absolute;
-    top: 80px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: hidden;
-
-    &-left {
-      height: 100%;
-      background-color: $--color-primary-light-7;
-      width: 160px;
-      float: left;
-      padding-bottom: 16px;
-      display: flex;
-      flex-direction: column;
-
-      &-user {
-        text-align: center;
-        line-height: 44px;
-        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
-        font-size: 16px;
-      }
-
-      &-menu {
-        padding-top: 20px;
-        display: flex;
-        flex-direction: column;
-        grid-gap: 20px;
-        padding-right: 16px;
-      }
-    }
-
-    &-content {
-      height: 100%;
-      margin-left: 160px;
-      overflow: hidden;
-      position: relative;
-    }
-
-    &-router {
-      height: calc(100% - 45px);
-    }
-  }
-
-  &-menu {
-    &-title {
-      color: #fff;
-      display: flex;
-      justify-content: space-between;
-      padding: 12px 0;
-      border-bottom: 1px solid rgba(223, 235, 246, 0.2);
-    }
-
-    &-name {
-      display: flex;
-      align-items: center;
-
-      &::before {
-        content: '';
-        height: 12px;
-        border-left: 2px solid #fff;
-        margin-right: 8px;
-      }
-    }
-
-    &-reload {
-      cursor: pointer;
-    }
-
-    &-item {
-      padding: 0 16px;
-      margin-bottom: 10px;
-
-      .el-scrollbar__wrap {
-        overflow-x: hidden;
-      }
-
-      &:last-child {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        padding-right: 0;
-      }
-    }
-
-    &-children {
-      display: flex;
-      flex-direction: column;
-
-      &-item {
-        display: flex;
-        grid-gap: 8px;
-        align-items: center;
-        cursor: pointer;
-        height: 44px;
-        line-height: 44px;
-
-        &:hover {
-          opacity: 0.75;
-        }
-      }
-
-      &-icon {
-        height: 20px;
-        line-height: 20px;
-        text-align: center;
-        color: #fff;
-        background: #ffffff2b;
-        padding: 0 6px;
-        border-radius: 3px;
-
-        [class^='es-icon-'] {
-          font-size: 12px;
-        }
-      }
-
-      &-name {
-        color: #fff;
-      }
-
-      &-badge {
-        background-color: #ff0000;
-        border-radius: 10px;
-        color: #fff;
-        display: inline-block;
-        font-size: 10px;
-        height: 14px;
-        line-height: 14px;
-        padding: 0 4px;
-        text-align: center;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  &-org-name {
-    color: #fff;
-  }
-}
-
-.es-main .es-simplicitytop-main-menu .es-fourth-tabs {
-  border: 0;
-  background-color: $--color-primary-light-7;
-
-  .el-menu {
-    border-bottom: 0;
-  }
-
-  .el-menu-item,
-  .es-submenu,
-  .el-submenu__title {
-    line-height: 1 !important;
-    color: #fff !important;
-
-    &:not(.is-disabled) {
-      &:focus,
-      &:hover,
-      &.is-active,
-      &.es-menu-item-focus {
-        background-color: $--color-primary-light-9;
-        border: 0;
-
-        & > .el-submenu__title {
-          border: 0;
-        }
-      }
-    }
-
-    .es-menu-item-icon {
-      color: #fff;
-      display: none;
-    }
-
-    .el-submenu__icon-arrow {
-      color: rgba(255, 255, 255, 0.85);
-    }
-  }
-
-  .el-menu-item {
-    @extend .es-flex-vertical, .es-align-middle, .es-align-center;
-  }
-}
-
-.el-menu--popup-simplicitytop {
-  .el-menu {
-    background-color: $--color-primary !important;
-    color: #ffff !important;
-
-    .el-menu-item,
-    .el-submenu__title {
-      background-color: transparent !important;
-      color: #fff !important;
-
-      .es-menu-item-icon {
-        color: #fff;
-      }
-
-      .el-submenu__icon-arrow {
-        color: #fff;
-      }
-
-      &:not(.is-disabled) {
-        &:focus,
-        &:hover,
-        &.is-active {
-          background-color: $--color-primary-light-7 !important;
-        }
-      }
-    }
-  }
-}
-
-.es-icon-shuaxin-rotate {
-  animation: rotate 1s linear infinite;
-  display: inline-block;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.es-simplicitytop-main-fourth-tabs {
-  .el-tabs__nav-main.is-top {
-    padding: 0 16px;
-  }
-}
-.remind-tree {
-  background: transparent;
-  color: #fff;
-  .el-tree-node__content {
-    height: 32px;
-    line-height: 32px;
-  }
-  .el-tree-node__expand-icon {
-    color: #fff;
-    &.is-leaf {
-      color: transparent;
-    }
-  }
-}
+@import './common/var.scss';
+@import './base.scss';
+
+@keyframes open-submenu {
+  0% {
+    padding-left: 0;
+  }
+
+  100% {
+    padding-left: $--main-simplicity-menu-width;
+  }
+}
+
+@keyframes close-submenu {
+  0% {
+    padding-left: $--main-simplicity-menu-width;
+  }
+
+  100% {
+    padding-left: 48px;
+  }
+}
+
+.es-simplicitytop-top-logo {
+  height: 266px;
+  width: 58px;
+  margin-left: 10px;
+}
+
+.es-simplicity-portrait-image {
+  width: 100%;
+  border-radius: 50%;
+  vertical-align: top;
+  background: transparent;
+
+  & > img {
+    width: 100%;
+  }
+}
+
+.es-simplicity-main {
+  height: 100%;
+  margin-left: $--main-simplicity-side-width;
+  overflow: hidden;
+  position: relative;
+
+  .es-simplicity-apps,
+  .es-simplicity-message,
+  .es-simplicity-message-modal,
+  .es-simplicity-apps-modal,
+  .es-simplicity-public-drawer {
+    position: absolute;
+    top: $--main-simplicity-header-height;
+    height: calc(100% - #{$--main-simplicity-header-height});
+  }
+
+  .es-simplicity-apps {
+    .el-drawer__body {
+      background-color: #f4f4f4;
+      padding: 20px;
+
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        padding: 14px;
+      }
+
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        padding: 10px;
+      }
+
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        padding: 6px;
+      }
+    }
+  }
+
+  .es-simplicity-public-drawer {
+    .el-drawer__header {
+      padding: 10px 0 0;
+      margin: 0;
+    }
+  }
+
+  .es-simplicity-subMenus,
+  .es-simplicity-public-drawer {
+    .el-drawer__body {
+      padding: 0;
+      position: relative;
+    }
+  }
+
+  .es-simplicity-subMenus {
+    width: auto;
+    height: 100%;
+    overflow: visible;
+    right: auto;
+    position: absolute;
+    z-index: 999 !important;
+
+    .el-drawer {
+      box-shadow: none;
+      overflow: visible;
+      border-right: 1px solid #dfebf6;
+    }
+  }
+
+  .es-simplicity-message {
+    .el-drawer {
+      background-color: #f4f4f4;
+    }
+  }
+}
+
+.es-simplicity_apps {
+  height: 100%;
+  display: flex;
+
+  .es-simplicity_apps-all {
+    flex: 1;
+    @extend .es-flex-vertical;
+    margin-right: 20px;
+
+    .es-simplicity_apps-box {
+      flex: 1;
+    }
+
+    .es-simplicity_apps-list {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      overflow: hidden;
+      display: flex;
+      align-content: flex-start;
+      flex-wrap: wrap;
+
+      .es-simplicity_apps-list-item {
+        width: 20%;
+        height: 25%;
+        padding: 12px;
+
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          padding: 8px;
+        }
+
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          padding: 4px;
+        }
+
+        @media screen and (max-width: 1024px) and (max-height: 768px) {
+          padding: 2px;
+        }
+      }
+    }
+
+    .es-simplicity_apps-list-content {
+      @extend .es-flex-vertical;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .es-simplicity_apps-icon {
+      margin-bottom: 16px;
+      color: $--color-primary;
+
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        margin-bottom: 12px;
+      }
+
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        margin-bottom: 8px;
+      }
+
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        margin-bottom: 4px;
+      }
+    }
+
+    .es-simplicity_apps-search {
+      width: 200px;
+
+      .el-input__inner {
+        border-radius: 16px;
+
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          height: 28px;
+          line-height: 28px;
+          font-size: 14px;
+        }
+
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          height: 24px;
+          line-height: 24px;
+          font-size: 12px;
+        }
+
+        @media screen and (max-width: 1024px) and (max-height: 768px) {
+          height: 20px;
+          line-height: 20px;
+          font-size: 12px;
+        }
+
+        &::placeholder {
+          @media screen and (max-width: 1600px) and (max-height: 900px) {
+            font-size: 14px;
+          }
+
+          @media screen and (max-width: 1280px) and (max-height: 720px) {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .el-input__icon {
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          line-height: 28px;
+          font-size: 14px;
+        }
+
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          line-height: 24px;
+          font-size: 12px;
+        }
+
+        @media screen and (max-width: 1024px) and (max-height: 768px) {
+          line-height: 20px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .es-simplicity_apps-title {
+    font-weight: 500;
+    font-size: 20px;
+    color: #15224c;
+    line-height: 32px;
+    padding: 6px 12px 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      font-size: 17px;
+      line-height: 26px;
+      padding: 6px 10px 10px;
+    }
+
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      font-size: 14px;
+      line-height: 20px;
+      padding: 4px 8px 8px;
+    }
+
+    @media screen and (max-width: 1024px) and (max-height: 768px) {
+      font-size: 12px;
+      line-height: 16px;
+      padding: 4px 6px 6px;
+    }
+  }
+
+  .es-simplicity_apps-box {
+    position: relative;
+  }
+
+  .es-simplicity_apps-list-content {
+    background: #ffffff;
+    border-radius: 9px;
+    padding: 4px;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+
+    &:hover {
+      .es-simplicity_apps-hover {
+        opacity: 1;
+        z-index: 1;
+
+        .es-simplicity_apps-icon {
+          color: rgba(255, 255, 255, 0.5);
+        }
+      }
+    }
+
+    &.es-simplicity_apps-disabled {
+      cursor: not-allowed;
+
+      .es-simplicity_apps-hover {
+        background-color: rgba(115, 122, 148, 0.9);
+      }
+    }
+  }
+
+  .es-simplicity_apps-icon {
+    font-size: 34px;
+    width: 34px;
+    height: 34px;
+    line-height: 34px;
+
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      font-size: 30px;
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+    }
+
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      font-size: 26px;
+      width: 26px;
+      height: 26px;
+      line-height: 26px;
+    }
+
+    @media screen and (max-width: 1024px) and (max-height: 768px) {
+      font-size: 22px;
+      width: 22px;
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+
+  .es-simplicity_apps-text {
+    font-weight: 400;
+    font-size: 16px;
+    text-align: center;
+    line-height: 19px;
+
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      font-size: 14px;
+      line-height: 17px;
+    }
+
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      font-size: 12px;
+      line-height: 15px;
+    }
+  }
+
+  .es-simplicity_apps-hover {
+    opacity: 0;
+    display: flex;
+    flex-direction: column;
+    box-orient: vertical;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    background-color: $--color-primary-light-5;
+    color: #fff;
+  }
+
+  .es-simplicity_apps-pagination {
+    text-align: right;
+    padding: 18px 20px;
+
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      padding: 14px 16px;
+    }
+
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      padding: 10px 12px;
+    }
+
+    @media screen and (max-width: 1024px) and (max-height: 768px) {
+      padding: 7px 8px;
+    }
+
+    .el-pagination__total {
+      float: left;
+
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        height: 24px;
+        line-height: 24px;
+      }
+
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        font-size: 12px;
+        height: 20px;
+        line-height: 20px;
+      }
+
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        font-size: 12px;
+        height: 16px;
+        line-height: 16px;
+      }
+    }
+
+    & > button {
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        height: 24px;
+        line-height: 24px;
+      }
+
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        font-size: 12px;
+        height: 20px;
+        line-height: 20px;
+      }
+
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        font-size: 12px;
+        height: 16px;
+        line-height: 16px;
+      }
+    }
+
+    .el-pager li {
+      background-color: #fff;
+
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        min-width: 26px;
+        height: 24px;
+        line-height: 24px;
+      }
+
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        min-width: 22px;
+        height: 20px;
+        line-height: 20px;
+      }
+
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        min-width: 18px;
+        height: 16px;
+        line-height: 16px;
+      }
+    }
+  }
+
+  .es-simplicity_apps-other {
+    width: 34%;
+    padding-left: 20px;
+    border-left: 1px solid #cdd9e4;
+
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      padding-left: 14px;
+    }
+
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      padding-left: 8px;
+    }
+
+    .es-simplicity_apps-list {
+      display: flex;
+      align-content: flex-start;
+      flex-wrap: wrap;
+
+      .es-simplicity_apps-list-item {
+        width: 50%;
+        padding: 12px;
+
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          padding: 8px;
+        }
+
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          padding: 4px;
+        }
+
+        @media screen and (max-width: 1024px) and (max-height: 768px) {
+          padding: 2px;
+        }
+      }
+
+      .es-simplicity_app-icon {
+        display: block;
+        width: 34px;
+        height: 34px;
+        font-size: 18px;
+        line-height: 34px;
+        text-align: center;
+        border-radius: 9px;
+      }
+
+      .es-simplicity_apps-text {
+        margin-left: 12px;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        line-clamp: 3;
+        -webkit-line-clamp: 3;
+        word-wrap: break-word;
+
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          margin-left: 8px;
+        }
+
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .es-simplicity_apps-list-content {
+      display: flex;
+      align-items: center;
+      padding: 16px;
+
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        padding: 12px;
+      }
+
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        padding: 8px;
+      }
+
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        padding: 4px;
+      }
+
+      .es-simplicity_apps-texts {
+        min-height: 36px;
+        display: flex;
+        align-items: center;
+      }
+
+      .es-simplicity_apps-hover {
+        flex-direction: row;
+      }
+    }
+
+    .es-simplicity_apps-systems {
+      padding-top: 20px;
+      border-top: 1px solid #cdd9e4;
+    }
+  }
+}
+
+.es-simplicity-userinfo {
+  padding: 20px;
+
+  .es-simplicity-user {
+    border-bottom: 1px solid #dfebf6;
+    position: relative;
+    padding-bottom: 16px;
+
+    .es-simplicity-user-name {
+      font-weight: 500;
+      font-size: 20px;
+      color: #15224c;
+      line-height: 23px;
+      margin-bottom: 12px;
+      margin-right: 80px;
+    }
+
+    .es-simplicity-org-name,
+    .es-simplicity-dep-post {
+      margin-right: 80px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #737a94;
+      line-height: 16px;
+      margin-bottom: 8px;
+    }
+
+    .es-icon-qiehuangangwei {
+      font-size: 20px;
+      color: #2591f7;
+      cursor: pointer;
+      margin-left: 16px;
+    }
+
+    .es-simplicity-portrait {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 64px;
+      padding: 0 8px 8px;
+
+      .es-upload {
+        margin-top: 12px;
+        margin-left: -8px;
+        margin-right: -8px;
+      }
+    }
+
+    .el-upload--handle {
+      width: 100%;
+    }
+
+    .el-upload--text {
+      width: 100%;
+      text-align: center;
+      font-size: 14px;
+      color: #2591f7;
+    }
+  }
+
+  .es-simplicity-notice-type {
+    padding: 24px 0;
+    border-bottom: 1px solid #dfebf6;
+  }
+
+  .es-simplicity-notice-title {
+    font-size: 14px;
+    color: #15224c;
+    line-height: 16px;
+    margin-bottom: 12px;
+  }
+
+  .es-simplicity-notice-list {
+    .el-checkbox {
+      min-width: 115px;
+    }
+  }
+
+  .es-simplicity-password {
+    padding-top: 24px;
+    font-size: 14px;
+    color: #2591f7;
+    line-height: 16px;
+    cursor: pointer;
+
+    .es-icon-arrow-right {
+      position: relative;
+      top: 1px;
+      margin-left: 8px;
+    }
+  }
+
+  .es-simplicity-qrcode {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+.es-simplicity-unfold {
+  position: fixed;
+  left: $--main-simplicity-side-width;
+  top: $--main-simplicity-header-height;
+  z-index: 9999;
+
+  .el-icon-s-unfold {
+    font-size: 32px;
+    cursor: move;
+    background-color: #fff;
+    border-radius: 10px;
+  }
+}
+
+.es-simplicity-menus {
+  height: 100%;
+  display: flex;
+
+  .es-simplicity-menus-box {
+    width: 220px;
+    height: 100%;
+    position: relative;
+
+    .es-simplicity-menus-title {
+      font-weight: bold;
+      line-height: 30px;
+      padding: 7px 7px 7px 14px;
+      border-bottom: 1px solid #dfebf6;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .es-simplicity-menus-title-text {
+        flex: 1;
+        font-size: 20px;
+        color: #15224c;
+      }
+
+      .es-simplicity-menus-title-icon {
+        font-size: 24px;
+        color: #b9bdc9;
+        cursor: pointer;
+      }
+    }
+
+    .es-simplicity-menus-scrollbar {
+      position: absolute;
+      top: 45px;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  .es-simplicity-menus-view {
+    border-left: 1px solid #dfebf6;
+    display: flex;
+
+    .es-simplicity-menus-box + .es-simplicity-menus-box {
+      border-left: 1px solid #dfebf6;
+    }
+  }
+
+  &.es-simplicity-menus-plus {
+    .es-simplicity-menus-box {
+      .es-simplicity-menus-title {
+        padding: 13px 7px 13px 14px;
+      }
+
+      .es-simplicity-menus-scrollbar {
+        top: 57px;
+      }
+    }
+  }
+}
+
+.es-simplicity-menus-lists {
+  padding: 8px 0;
+
+  &.is-fold {
+    padding: 4px 0;
+  }
+}
+
+.es-simplicity-menus-item {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 8px 24px;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  color: #15224c;
+
+  &.is-fold {
+    height: 40px;
+    padding: 4px 12px;
+
+    .es-simplicity_apps-icon {
+      margin-right: 0;
+    }
+
+    .es-simplicity-menus-tips {
+      top: 0;
+      right: 0;
+      color: #ff0000;
+      font-size: 12px;
+    }
+
+    .es-icon-pointer-right {
+      display: none;
+    }
+
+    &:hover {
+      &::before {
+        inset: 0 4px;
+      }
+    }
+
+    &.is-active {
+      &::before {
+        inset: 0 4px;
+      }
+    }
+  }
+
+  .es-simplicity_apps-icon {
+    height: 24px;
+    padding: 4px;
+    border-radius: 3px;
+    margin-right: 12px;
+    color: $--color-primary;
+    z-index: 1;
+  }
+
+  .es-simplicity-menus-tips {
+    font-size: 14px;
+    color: #737a94;
+    position: absolute;
+    right: 16px;
+
+    & + .es-simplicity_apps-text {
+      width: 118px;
+    }
+  }
+
+  .es-simplicity_apps-text {
+    width: 200px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &:hover {
+    color: $--color-primary;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0 12px;
+      background-color: $--color-primary-light-2;
+      border-radius: 6px;
+      z-index: 0;
+    }
+  }
+
+  &.is-active {
+    color: $--color-primary;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0 12px;
+      background-color: $--color-primary-light-2;
+      border-radius: 6px;
+      z-index: 0;
+    }
+  }
+
+  .es-icon-pointer-right {
+    color: #737a94;
+    position: absolute;
+    right: 0;
+  }
+}
+
+.es-simplicity-iframe {
+  height: 100%;
+
+  & > .el-tabs__header {
+    height: $--main-simplicity-header-height;
+    padding: ($--main-simplicity-header-height - 36px)/2 0;
+    margin: 0;
+    border-bottom: 1px solid #dfebf6;
+    background-color: #fff;
+
+    & > .el-tabs__nav-main {
+      margin: 0 10px;
+    }
+
+    .el-tabs__nav-next,
+    .el-tabs__nav-prev {
+      height: 36px;
+      font-size: 16px;
+      padding: 0 6px;
+    }
+
+    .el-tabs__nav-wrap {
+      padding: 0 10px;
+
+      &.is-scrollable {
+        padding: 0 28px;
+      }
+
+      &::after {
+        content: none;
+      }
+
+      .el-tabs__item {
+        height: 36px;
+        line-height: 36px;
+        padding: 0 12px !important;
+        background: #f2f2f2;
+        border-radius: 6px;
+        color: #737a94;
+
+        & + .el-tabs__item {
+          margin-left: 12px;
+        }
+
+        &.is-active {
+          color: $--color-primary;
+          background-color: $--color-primary-light-1;
+        }
+      }
+    }
+  }
+
+  & > .el-tabs__content {
+    height: calc(100% - #{$--main-simplicity-header-height});
+    background-color: $--background-color-base;
+
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
+
+  &.is-open {
+    & > .el-tabs__content {
+      animation: open-submenu 0.3s 1ms forwards;
+    }
+
+    &.is-fold {
+      & > .el-tabs__content {
+        animation: close-submenu 0.1s 0ms forwards;
+      }
+    }
+  }
+}
+
+.es-simplicitytop-handler {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  line-height: 24px;
+  padding: 0 10px;
+
+  .es-simplicitytop-online-num {
+    color: #ffd272;
+    font-size: 16px;
+  }
+
+  .es-simplicitytop-handler-item {
+    color: #fff;
+    font-size: 16px;
+    position: relative;
+
+    .el-select {
+      width: 160px;
+      margin-left: 8px;
+    }
+
+    .el-input__inner {
+      border-radius: 6px;
+      height: 32px;
+      line-height: 32px;
+    }
+
+    .el-input__icon {
+      line-height: 32px;
+    }
+
+    &:hover {
+      opacity: 0.75;
+    }
+
+    &:not(:last-child) {
+      &:after {
+        content: '';
+        display: inline-block;
+        height: 20px;
+        border-right: 1px solid #cdd9e4;
+        opacity: 0.2;
+        vertical-align: middle;
+        margin-left: 16px;
+      }
+    }
+
+    & + .es-simplicitytop-handler-item {
+      margin-left: 16px;
+    }
+  }
+
+  .es-simplicitytop-handler-icon {
+    font-size: 16px;
+    padding-right: 5px;
+    cursor: pointer;
+
+    &.es-simplicitytop {
+      font-size: 16px;
+    }
+
+    &.es-icon_image {
+      width: 20px;
+      height: 20px;
+      padding: 0;
+    }
+  }
+  .es-simplicitytop-handler-badge {
+    position: absolute;
+    top: -5px;
+    right: -2px;
+    background-color: #ff0000;
+    border-radius: 10px;
+    color: #fff;
+    font-size: 10px;
+    height: 14px;
+    line-height: 14px;
+    padding: 0 4px;
+  }
+
+  .es-simplicitytop-handler-text {
+    cursor: pointer;
+  }
+}
+
+.es-simplicity-tabs-handler-mask {
+  position: absolute;
+  z-index: 99999;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.es-simplicity-tabs-handler {
+  width: 120px;
+  position: fixed;
+
+  .el-card__body {
+    padding: 4px 0;
+  }
+
+  .es-simplicity-tabs-handler-item {
+    height: 32px;
+    line-height: 32px;
+    padding: 0 20px;
+    color: $--button-disabled-font-color;
+    user-select: none;
+
+    &:not(.is-disabled) {
+      color: rgba(0, 0, 0, 0.75);
+
+      &:hover {
+        background-color: rgba(144, 147, 153, 0.2);
+      }
+    }
+  }
+}
+
+.es-simplicity-drawer-close {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: #6e7c98;
+  z-index: 9999;
+}
+
+.es-simplicity-message {
+  .el-drawer__body {
+    @extend .es-flex-vertical;
+    padding: 20px;
+  }
+
+  .es-simplicity-message-header {
+    padding-bottom: 20px;
+
+    .es-simplicity-message-title {
+      font-weight: bold;
+      font-size: 20px;
+      color: #15224c;
+      line-height: 24px;
+    }
+  }
+
+  .es-simplicity-message-overlook,
+  .es-simplicity-message-handler {
+    margin-left: 12px;
+  }
+
+  .es-simplicity-message-lists-box {
+    flex: 1;
+    position: relative;
+
+    .es-simplicity-message-lists {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  .es-simplicity-message-total {
+    padding-top: 20px;
+    font-size: 14px;
+    color: #6e7c98;
+    line-height: 14px;
+  }
+}
+
+.es-simplicity-message-overlook,
+.es-simplicity-message-handler {
+  font-size: 14px;
+  color: #737a94;
+  float: right;
+  cursor: pointer;
+}
+
+.es-simplicity-message-handler {
+  color: #2591f7;
+}
+
+.es-simplicity-message-lists {
+  .es-simplicity-message-item {
+    background: #ffffff;
+    box-shadow: 0px 12px 24px 0px rgba(33, 70, 141, 0.1);
+    border-radius: 9px;
+    padding: 16px 24px;
+
+    & + .es-simplicity-message-item {
+      margin-top: 20px;
+    }
+
+    .es-simplicity-message-item-title {
+      font-weight: bold;
+      font-size: 14px;
+      color: #15224c;
+      line-height: 16px;
+      margin-bottom: 8px;
+    }
+
+    .es-simplicity-message-item-time {
+      font-size: 12px;
+      color: #737a94;
+      line-height: 14px;
+    }
+  }
+
+  .es-simplicity-message-tips {
+    font-size: 14px;
+    color: #6e7c98;
+    text-align: center;
+    padding-top: 20px;
+  }
+}
+
+.es-simplicity-notice-box {
+  width: 420px;
+  padding: 80px 24px 54px 24px;
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  z-index: 9999;
+  background-color: #f5fbff;
+  border-radius: 9px;
+  //animation: ltr-drawer-out 0.3s;
+  animation: rtl-drawer-out 0.3s;
+  overflow: hidden;
+
+  &.es-in {
+    //animation: ltr-drawer-in 0.3s 1ms;
+    animation: rtl-drawer-in 0.3s 1ms;
+  }
+
+  .es-simplicity-message-overlook,
+  .es-simplicity-message-handler {
+    margin-left: 12px;
+  }
+
+  .es-simplicity-notice-header {
+    height: 56px;
+    font-size: 16px;
+    color: #ffffff;
+    padding: 16px 24px;
+    background-color: #2591f7;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+
+  .es-simplicity-notice-lists {
+    height: 304px;
+  }
+
+  .es-notice-footer {
+    border-top: 1px solid #dfebf6;
+    padding: 20px 44px 16px;
+    font-size: 14px;
+    color: #737a94;
+    line-height: 17px;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    left: 24px;
+    right: 24px;
+    bottom: 0;
+  }
+}
+
+.el-popover.es-simplicity-menus-hide {
+  display: none !important;
+  opacity: 0;
+  z-index: -999;
+}
+
+.es-public-search-dialog > .el-dialog {
+  & > .el-dialog__header,
+  & > .el-dialog__body {
+    background-color: #fff;
+  }
+}
+
+.es-public-search-box {
+  padding-top: 53px;
+  height: 100%;
+
+  .es-public-search-input {
+    width: 90%;
+    display: block;
+    margin: 0 auto 20px auto;
+  }
+
+  .es-public-search-tabs {
+    height: calc(100% - 60px);
+
+    .el-tabs__header {
+      height: 40px;
+      margin: 0;
+    }
+
+    .el-tabs__nav-wrap {
+      padding: 0 24px;
+    }
+
+    .el-tabs__content {
+      height: calc(100% - 40px);
+      padding: 10px 0;
+    }
+
+    .el-tab-pane {
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  .es-public-search-content {
+    padding: 10px 20px;
+    position: relative;
+
+    &::after {
+      content: '';
+      display: block;
+    }
+  }
+
+  .es-public-search-title {
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 800;
+    color: #262626;
+    margin-bottom: 23px;
+  }
+
+  .es-public-search-list-item {
+    padding: 16px 8px 16px 60px;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(37, 145, 247, 0.08);
+      border-radius: 9px 9px 9px 9px;
+    }
+  }
+
+  .es-public-search-item-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 14px;
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    margin-top: -20px;
+    border-radius: 6px;
+    color: #fff;
+    text-align: center;
+    line-height: 40px;
+
+    &.es-public-search-item-icons {
+      font-size: 18px;
+    }
+
+    &.es-icon-ppt,
+    &.es-icon-pdf {
+      font-size: 40px;
+      color: #ff7878;
+    }
+
+    &.es-icon-picture,
+    &.es-icon-video,
+    &.es-icon-audioo {
+      font-size: 36px;
+      color: #909399;
+      margin-top: -18px;
+    }
+
+    &.es-icon-excel {
+      font-size: 40px;
+      color: #199051;
+    }
+
+    &.es-icon-word {
+      font-size: 40px;
+      color: #1d60f5;
+    }
+
+    &.es-icon-zip {
+      font-size: 36px;
+      color: #5dc7f7;
+      margin-top: -18px;
+    }
+
+    &.es-icon-txt {
+      font-size: 40px;
+      color: #909399;
+    }
+
+    &.es-icon-ios {
+      font-size: 36px;
+      margin-top: -18px;
+    }
+
+    &.es-icon-android {
+      font-size: 36px;
+      margin-top: -18px;
+      color: #81bd24;
+    }
+
+    &.es-public-search-item-icon-text {
+      background-color: #2778e5;
+    }
+  }
+
+  .es-public-search-item-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #262626;
+    line-height: 22px;
+  }
+
+  .es-public-search-item-texts {
+    font-size: 12px;
+    font-weight: 400;
+    color: #8c8c8c;
+    line-height: 20px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    .es-public-search-item-text + .es-public-search-item-text {
+      margin-left: 20px;
+    }
+  }
+
+  .es-public-search-more {
+    text-align: center;
+    color: #8c8c8c;
+    font-weight: 500;
+    font-size: 14px;
+    margin-top: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #dce3e7;
+
+    .es-public-search-more-text {
+      cursor: pointer;
+    }
+  }
+
+  .es-public-search-more-quote {
+    color: #2778e5;
+    padding: 0 4px;
+  }
+
+  .es-public-search-info {
+    padding: 16px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #262626;
+  }
+
+  .es-public-search-lists {
+    padding: 0 20px;
+
+    .es-public-search-list-item {
+      border-bottom: 1px solid #f0f0f0;
+    }
+  }
+
+  .es-public-search-no-more {
+    text-align: center;
+    padding: 20px;
+  }
+
+  .es-public-search-scrollbar {
+    .el-scrollbar__view {
+      min-height: 100%;
+    }
+  }
+}
+
+.es-menu-vertical.es-simplicity_menus,
+.es-menu-popper-vertical.es-simplicity_menus {
+  background-color: #fff;
+  padding: 8px 0;
+
+  .el-menu-item:not(.is-disabled),
+  .el-submenu__title,
+  & > .el-menu .el-menu-item:not(.is-disabled),
+  & > .el-menu .el-submenu__title {
+    padding: 8px 24px;
+    height: 48px;
+    line-height: 32px;
+    color: #15224c;
+
+    i {
+      color: #15224c;
+      z-index: 1;
+    }
+
+    .es-menu-item-icon {
+      color: #15224c;
+      z-index: 1;
+      height: 24px;
+      line-height: 16px;
+      padding: 4px;
+      border-radius: 3px;
+      margin-right: 12px;
+      font-size: 16px;
+    }
+
+    &:hover,
+    &:focus,
+    &.is-active {
+      background-color: #fff;
+      color: $--color-primary;
+
+      i {
+        color: $--color-primary;
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        inset: 0 8px;
+        background-color: $--color-primary-light-2;
+        border-radius: 6px;
+        z-index: 0;
+      }
+    }
+  }
+
+  .el-menu-item.is-disabled {
+    .es-menu-item-icon {
+      color: #15224c;
+      z-index: 1;
+      height: 24px;
+      line-height: 16px;
+      padding: 4px;
+      border-radius: 3px;
+      margin-right: 12px;
+      font-size: 16px;
+      cursor: not-allowed;
+    }
+  }
+
+  .el-menu--popup .el-menu-item:not(.is-disabled),
+  .el-menu--popup .el-submenu__title {
+    &:hover,
+    &:focus,
+    &.is-active {
+      background-color: transparent;
+    }
+  }
+
+  &.es-simplicity_menus-fold {
+    padding: 4px 0;
+
+    .el-menu-item:not(.is-disabled),
+    .el-submenu__title,
+    > .el-menu .el-menu-item:not(.is-disabled),
+    > .el-menu .el-submenu__title {
+      width: 48px;
+      height: 40px !important;
+      padding: 4px 12px !important;
+      min-height: unset !important;
+      line-height: 32px;
+      justify-content: center;
+
+      .es-menu-item-icon {
+        margin-right: 0;
+      }
+
+      &:hover,
+      &:focus,
+      &.is-active {
+        .es-menu-item-icon {
+          position: relative;
+          z-index: 1;
+        }
+
+        &::before {
+          inset: 0 4px;
+        }
+      }
+    }
+  }
+}
+
+.es-simplicitytop-nav {
+  height: $--main-simplicitytop-header-height;
+  background-color: $--color-primary-light-7;
+  background-position: left -20px;
+  background-size: auto 100px;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 20px;
+}
+
+.es-simplicitytop-main {
+  .es-simplicity-apps,
+  .es-simplicity-message,
+  .es-simplicity-message-modal,
+  .es-simplicity-apps-modal,
+  .es-simplicity-public-drawer {
+    position: absolute;
+    top: $--main-simplicity-header-height;
+    height: calc(100% - #{$--main-simplicity-header-height});
+  }
+
+  .es-simplicity-apps {
+    .el-drawer__body {
+      background-color: #f4f4f4;
+      padding: 20px;
+
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        padding: 14px;
+      }
+
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        padding: 10px;
+      }
+
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        padding: 6px;
+      }
+    }
+  }
+
+  .es-simplicity-public-drawer {
+    .el-drawer__header {
+      padding: 10px 0 0;
+      margin: 0;
+    }
+  }
+
+  .es-simplicity-subMenus,
+  .es-simplicity-public-drawer {
+    .el-drawer__body {
+      padding: 0;
+      position: relative;
+    }
+  }
+
+  .es-simplicity-subMenus {
+    width: auto;
+    height: 100%;
+    overflow: visible;
+    right: auto;
+    position: absolute;
+    z-index: 999 !important;
+
+    .el-drawer {
+      box-shadow: none;
+      overflow: visible;
+      border-right: 1px solid #dfebf6;
+    }
+  }
+
+  .es-simplicity-message {
+    .el-drawer {
+      background-color: #f4f4f4;
+    }
+  }
+}
+
+.es-simplicitytop {
+  &-org {
+    display: flex;
+    align-items: center;
+    color: #fff;
+
+    &-text {
+      margin-left: 4px;
+    }
+
+    .el-input__inner {
+      height: 32px;
+      line-height: 32px;
+      border-radius: 6px;
+    }
+
+    .el-input__icon {
+      line-height: 32px;
+    }
+  }
+
+  &-greeting {
+    color: #fff;
+    text-align: center;
+    line-height: 44px;
+  }
+
+  &-main {
+    position: absolute;
+    top: 80px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+
+    &-left {
+      height: 100%;
+      background-color: $--color-primary-light-7;
+      width: 160px;
+      float: left;
+      padding-bottom: 16px;
+      display: flex;
+      flex-direction: column;
+
+      &-user {
+        text-align: center;
+        line-height: 44px;
+        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
+        font-size: 16px;
+      }
+
+      &-menu {
+        padding-top: 20px;
+        display: flex;
+        flex-direction: column;
+        grid-gap: 20px;
+        padding-right: 16px;
+      }
+    }
+
+    &-content {
+      height: 100%;
+      margin-left: 160px;
+      overflow: hidden;
+      position: relative;
+    }
+
+    &-router {
+      height: calc(100% - 45px);
+    }
+  }
+
+  &-menu {
+    &-title {
+      color: #fff;
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid rgba(223, 235, 246, 0.2);
+    }
+
+    &-name {
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: '';
+        height: 12px;
+        border-left: 2px solid #fff;
+        margin-right: 8px;
+      }
+    }
+
+    &-reload {
+      cursor: pointer;
+    }
+
+    &-item {
+      padding: 0 16px;
+      margin-bottom: 10px;
+
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+      }
+
+      &:last-child {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding-right: 0;
+      }
+    }
+
+    &-children {
+      display: flex;
+      flex-direction: column;
+
+      &-item {
+        display: flex;
+        grid-gap: 8px;
+        align-items: center;
+        cursor: pointer;
+        height: 44px;
+        line-height: 44px;
+
+        &:hover {
+          opacity: 0.75;
+        }
+      }
+
+      &-icon {
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        color: #fff;
+        background: #ffffff2b;
+        padding: 0 6px;
+        border-radius: 3px;
+
+        [class^='es-icon-'] {
+          font-size: 12px;
+        }
+      }
+
+      &-name {
+        color: #fff;
+      }
+
+      &-badge {
+        background-color: #ff0000;
+        border-radius: 10px;
+        color: #fff;
+        display: inline-block;
+        font-size: 10px;
+        height: 14px;
+        line-height: 14px;
+        padding: 0 4px;
+        text-align: center;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  &-org-name {
+    color: #fff;
+  }
+}
+
+.es-main .es-simplicitytop-main-menu .es-fourth-tabs {
+  border: 0;
+  background-color: $--color-primary-light-7;
+
+  .el-menu {
+    border-bottom: 0;
+  }
+
+  .el-menu-item,
+  .es-submenu,
+  .el-submenu__title {
+    line-height: 1 !important;
+    color: #fff !important;
+
+    &:not(.is-disabled) {
+      &:focus,
+      &:hover,
+      &.is-active,
+      &.es-menu-item-focus {
+        background-color: $--color-primary-light-9;
+        border: 0;
+
+        & > .el-submenu__title {
+          border: 0;
+        }
+      }
+    }
+
+    .es-menu-item-icon {
+      color: #fff;
+      display: none;
+    }
+
+    .el-submenu__icon-arrow {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .el-menu-item {
+    @extend .es-flex-vertical, .es-align-middle, .es-align-center;
+  }
+}
+
+.el-menu--popup-simplicitytop {
+  .el-menu {
+    background-color: $--color-primary !important;
+    color: #ffff !important;
+
+    .el-menu-item,
+    .el-submenu__title {
+      background-color: transparent !important;
+      color: #fff !important;
+
+      .es-menu-item-icon {
+        color: #fff;
+      }
+
+      .el-submenu__icon-arrow {
+        color: #fff;
+      }
+
+      &:not(.is-disabled) {
+        &:focus,
+        &:hover,
+        &.is-active {
+          background-color: $--color-primary-light-7 !important;
+        }
+      }
+    }
+  }
+}
+
+.es-icon-shuaxin-rotate {
+  animation: rotate 1s linear infinite;
+  display: inline-block;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.es-simplicitytop-main-fourth-tabs {
+  .el-tabs__nav-main.is-top {
+    padding: 0 16px;
+  }
+}
+.remind-tree {
+  background: transparent;
+  color: #fff;
+  .el-tree-node__content {
+    height: 32px;
+    line-height: 32px;
+  }
+  .el-tree-node__expand-icon {
+    color: #fff;
+    &.is-leaf {
+      color: transparent;
+    }
+  }
+}