eoss-ui 0.7.64 → 0.7.65

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

@@ -0,0 +1,1974 @@
+@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-simplicity-top-logo {
+  height: 266px;
+  width: 58px;
+  margin-left: 10px;
+}
+
+.es-simplicity-side {
+  width: $--main-simplicity-side-width;
+  height: 100%;
+  float: left;
+  padding: 16px 8px 8px 8px;
+  @extend .es-flex-vertical;
+
+  @if $--main-simplicity-side-background-color !='' {
+    background-color: $--main-simplicity-side-background-color;
+  }
+
+  @else {
+    background-color: $--color-primary-light-9;
+  }
+
+  .es-simplicity-user-popover {
+    margin-bottom: 5px;
+  }
+
+  .es-simplicity-org-name {
+    font-weight: 500;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+    line-height: 16px;
+  }
+
+  .es-simplicity-pannel-user {
+    color: #fff;
+    text-align: center;
+    padding-top: 5px;
+    font-size: 14px;
+  }
+
+  .es-simplicity-username,
+  .es-simplicity-greeting {
+    cursor: pointer;
+  }
+
+  .es-simplicity-dep-post {
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
+
+    .es-icon-qiehuangangwei {
+      margin-left: 5px;
+      font-size: 22px;
+    }
+  }
+
+  .es-simplicity-portrait {
+    width: $--main-simplicity-side-width - 24px;
+    height: $--main-simplicity-side-width - 24px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin: 0 auto;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: 5px;
+  }
+
+  .es-simplicity-side-Application {
+    flex: 1;
+    position: relative;
+    margin-right: -8px;
+
+    .el-scrollbar {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .el-scrollbar__view {
+      padding-right: 8px;
+    }
+
+    .el-scrollbar__thumb {
+      background-color: $--color-primary-light-7;
+    }
+  }
+
+  .es-simplicity-side-app {
+    text-align: center;
+    color: #fff;
+    height: 64px;
+    padding: 6px 0;
+    position: relative;
+    cursor: pointer;
+    @extend .es-flex-vertical;
+    justify-content: center;
+    align-items: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+
+    .el-badge {
+      padding: 8px 0;
+    }
+
+    &.is-active,
+    &:hover {
+      .el-badge {
+        padding: 8px 0;
+        background-color: rgba(255, 255, 255, 0.12);
+        border-radius: 9px;
+      }
+    }
+
+    .el-icon-circle-close {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 2px;
+      display: none;
+    }
+
+    &:hover {
+      .el-icon-circle-close {
+        display: block;
+        z-index: 999;
+      }
+    }
+
+    .es-simplicity-side-app-badge {
+      .el-badge__content.is-fixed.is-dot {
+        right: 10px;
+        transform: translateY(0) translateX(100%);
+      }
+    }
+  }
+
+  .el-badge {
+    width: 100%;
+  }
+
+  .es-simplicity-side-app-icon {
+    font-size: 24px;
+
+    &.es-icon_image {
+      width: 20px;
+    }
+  }
+
+  .es-simplicity-ai-icon {
+    width: 56px;
+  }
+
+  .es-simplicity-side-app-text {
+    font-size: 12px;
+    @extend .es-text-ellipsis;
+  }
+}
+
+.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: 14px;
+  }
+
+  .es-simplicitytop-handler-item {
+    color: #fff;
+
+    .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: 14px;
+    padding-right: 5px;
+    overflow: hidden;
+    cursor: pointer;
+
+    &.es-simplicitytop {
+      font-size: 14px;
+    }
+
+    &.es-icon_image {
+      width: 20px;
+      height: 20px;
+      padding: 0;
+    }
+  }
+
+  .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 center;
+  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: 100px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+
+    &-left {
+      height: 100%;
+      background-color: $--color-primary-light-9;
+      width: 200px;
+      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: 200px;
+      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;
+
+  .el-menu {
+    border-bottom: 0;
+  }
+
+  .el-menu-item,
+  .es-submenu,
+  .el-submenu__title {
+    line-height: 1 !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+
+    &:not(.is-disabled) {
+
+      &:focus,
+      &:hover,
+      &.is-active,
+      &.es-menu-item-focus {
+        background-color: $--color-primary-light-7;
+        border: 0;
+
+        &>.el-submenu__title {
+          border: 0;
+        }
+      }
+    }
+
+    .es-menu-item-icon {
+      color: rgba(255, 255, 255, 0.85);
+    }
+
+    .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);
+  }
+}