eoss-ui 0.7.89 → 0.7.91

package/packages/theme-chalk/src/main.scss

@@ -1,664 +1,664 @@
-@import './common/var.scss';
-@import './base.scss';
-@import './simplicity.scss';
-@import './simplicity-top.scss';
-.es-main-box {
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  .es-launch-image {
-    z-index: 99999;
-  }
-}
-.es-main {
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-
-  .es-main-header {
-    height: $--main-header-height;
-    position: relative;
-    background-color: $--color-primary;
-    background-position: left center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 0;
-    color: #fff;
-    @extend .es-flex;
-    @extend .es-align-middle;
-
-    .es-main-logo {
-      max-height: 60%;
-      margin-left: 50px;
-    }
-
-    .es-logo-error {
-      padding: 0 4px;
-      display: flex;
-      align-items: center;
-      width: 300px;
-      height: 100%;
-      color: #333;
-      background: #f5f7fa;
-
-      .el-icon-picture-outline {
-        font-size: 30px;
-        color: #909399;
-      }
-    }
-    & ~ .es-main-default-box {
-      top: $--main-header-height;
-    }
-  }
-
-  .es-main-top-nav {
-    flex: 1;
-    height: 100%;
-    position: relative;
-    .es-menu-horizontal-scrollbar {
-      position: absolute;
-      left: 0;
-      right: 0;
-      height: $--main-header-height;
-    }
-    .es-fourth-tabs {
-      border: 0;
-      background-color: $--color-primary;
-      .el-menu {
-        border-bottom: 0;
-      }
-      .el-menu-item,
-      .es-submenu,
-      .el-submenu__title {
-        height: $--main-header-height !important;
-        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;
-      }
-    }
-  }
-  .es-main-default-box {
-    display: flex;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 0;
-  }
-
-  .es-main-left {
-    height: 100%;
-    position: relative;
-    background-color: $--color-primary-light-10;
-    .es-main-side {
-      overflow: hidden;
-      &.es-main-topside {
-        margin-top: -$--main-header-height;
-      }
-      .es-main-side-logo {
-        height: $--main-header-height;
-        display: block;
-        width: 230px;
-        .es-main-logo {
-          height: $--main-header-height;
-        }
-      }
-      .es-handle-user {
-        .es-user-info {
-          height: auto;
-          padding: 8px 4px 8px 0;
-          .es-user-name {
-            height: 30px;
-            line-height: 30px;
-          }
-        }
-      }
-    }
-  }
-
-  .es-main-body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    box-orient: vertical;
-    position: relative;
-    transition: all 0.2s;
-    -webkit-transition: all 0.2s;
-
-    .es-body {
-      flex: 1;
-      position: relative;
-      overflow: hidden;
-      &.es-body-wrapper {
-        &::after {
-          content: '';
-          display: block;
-          position: absolute;
-          left: 0;
-          top: 0;
-          right: 0;
-          bottom: 0;
-        }
-      }
-    }
-
-    .es-body-main {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      overflow: hidden;
-    }
-  }
-
-  .es-fourth-tabs {
-    height: 45px;
-    overflow: hidden;
-    background-color: #f5f5f5;
-    border-bottom: $--border-base;
-    .el-menu-item {
-      height: 44px;
-      line-height: 44px;
-    }
-  }
-
-  .es-setting-btn {
-    position: fixed;
-    right: 0;
-    top: 200px;
-    z-index: 9;
-
-    .es-icon-set {
-      font-size: 18px;
-      font-weight: bold;
-    }
-  }
-  &.es-main-topside {
-    color: #333 !important;
-    .es-main-header {
-      padding-left: 230px;
-    }
-    .es-handle-user {
-      padding-top: 16px;
-      padding-bottom: 16px;
-    }
-    .es-main-left {
-      border-right: $--border-base;
-    }
-    .es-nav-main:not(.es-nav-overlap) {
-      background-color: transparent;
-      border-right: 0;
-    }
-    .es-main-top-nav {
-      .es-menu-horizontal {
-        background-color: transparent;
-      }
-    }
-  }
-  .es-apps-modal,
-  .es-public-drawer {
-    position: absolute;
-    .el-drawer__header {
-      margin-bottom: 0;
-    }
-    .el-drawer__body {
-      padding: 0;
-      position: relative;
-    }
-  }
-}
-.el-menu--popup-topnav {
-  .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-sets-drawer {
-  padding-top: 48px;
-
-  .el-drawer__header {
-    padding: 12px 4px 12px 16px !important;
-    margin: 0 !important;
-    border-bottom: $--border-base;
-    box-shadow: $--box-shadow-base;
-    line-height: 21px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    z-index: 1;
-
-    span {
-      font-size: 16px;
-      color: #333;
-    }
-  }
-
-  .el-drawer__body {
-    padding: 16px 20px;
-  }
-}
-.es-setting-item {
-  & + .es-setting-item {
-    border-top: $--border-base;
-    padding-top: 20px;
-    margin-top: 20px;
-  }
-  .es-setting-navs-box {
-    display: flex;
-    flex-wrap: wrap;
-    .es-setting-navs-item {
-      margin-left: 16px;
-    }
-  }
-  .es-setting-navs {
-    width: 100px;
-    height: 50px;
-    border-radius: 2px;
-    position: relative;
-    overflow: hidden;
-    background-color: $--color-primary;
-    margin-bottom: 12px;
-    cursor: pointer;
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 10px;
-      right: 0;
-      bottom: 0;
-      z-index: 1;
-      background-color: #f0f2f5;
-    }
-    &.es-setting-side-nav {
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        left: 0;
-        width: 8px;
-        top: 10px;
-        bottom: 0;
-        z-index: 2;
-        background-color: $--color-primary-light-8;
-      }
-      .es-setting-side-sub-nav {
-        width: 16px;
-        position: absolute;
-        left: 8px;
-        top: 10px;
-        bottom: 0;
-        z-index: 3;
-        background-color: $--color-primary-light-10;
-      }
-    }
-    &.es-setting-app-nav {
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        left: 0;
-        width: 8px;
-        top: 0;
-        bottom: 0;
-        z-index: 2;
-        background-color: $--color-primary-light-8;
-      }
-      &::after {
-        top: 0;
-      }
-    }
-    &.es-setting-subsystem-nav {
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        left: 0;
-        width: 16px;
-        top: 10px;
-        bottom: 0;
-        z-index: 2;
-        background-color: $--color-primary-light-10;
-      }
-    }
-    &.es-setting-top-side-nav {
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        left: 0;
-        width: 20px;
-        top: 10px;
-        bottom: 0;
-        z-index: 2;
-        background-color: $--color-primary-light-10;
-      }
-    }
-    &.es-setting-side-navs {
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        left: 0;
-        width: 20px;
-        top: 0;
-        bottom: 0;
-        z-index: 2;
-        background-color: $--color-primary-light-10;
-      }
-    }
-    .icon-gou {
-      position: absolute;
-      z-index: 9;
-      left: 50%;
-      top: 50%;
-      margin-left: -8px;
-      margin-top: -6px;
-    }
-  }
-}
-.es-setting-title {
-  margin-bottom: 12px;
-  font-size: 14px;
-}
-
-.es-setting-theme {
-  .el-radio-button {
-    cursor: pointer;
-    margin-right: 8px;
-    border-radius: 2px;
-  }
-
-  .el-radio-button__inner {
-    z-index: -1;
-  }
-
-  .el-radio-button__inner {
-    background-color: transparent !important;
-    border: 0;
-    display: inline-block;
-    padding: 0;
-    width: 20px;
-    height: 20px;
-    border-radius: 2px;
-    text-align: center;
-    line-height: 20px;
-  }
-
-  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-    background-color: transparent !important;
-    z-index: 1;
-    border-radius: 2px;
-    border: 0;
-  }
-}
-
-.es-msgs-box {
-  position: absolute;
-
-  .el-drawer__header {
-    padding: 8px 0 0 12px;
-    margin-bottom: 0;
-  }
-
-  .es-msgs-main {
-    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.3);
-    overflow: hidden;
-
-    .el-drawer__body {
-      padding: 0;
-      @extend .es-flex-vertical;
-    }
-  }
-
-  .es-overlook {
-    cursor: pointer;
-    line-height: 14px;
-    background-color: #fff;
-    border: 1px solid #dcdfe6;
-    color: #606266;
-    border-radius: 4px;
-    padding: 2px 4px;
-    font-size: 12px;
-
-    &:hover {
-      color: $--color-primary;
-      border-color: $--color-primary-light-3;
-      background-color: $--color-primary-light-1;
-    }
-  }
-
-  .es-msg-header {
-    height: 46px;
-    line-height: 22px;
-    font-size: 14px;
-    border-bottom: $--border-base;
-    padding: 12px;
-    background-color: #f3f3f3;
-
-    .es-overlook {
-      float: right;
-      line-height: 18px;
-    }
-  }
-
-  .es-msg-lists-box {
-    flex: 1;
-    position: relative;
-    overflow: hidden;
-
-    .es-msg-lists {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      overflow: hidden;
-    }
-
-    .es-msg-item {
-      margin: 8px 12px;
-      position: relative;
-      overflow: visible;
-
-      .el-card__body {
-        padding: 8px;
-      }
-
-      & + .es-msg-item {
-        margin-top: 0;
-      }
-
-      .es-overlook {
-        float: right;
-      }
-
-      .el-icon-circle-close {
-        color: #606266;
-        cursor: pointer;
-        position: absolute;
-        background-color: #fff;
-        border-radius: 8px;
-        top: -4px;
-        right: -6px;
-        font-size: 16px;
-
-        &:hover {
-          color: $--color-primary;
-          border-color: $--color-primary-light-3;
-          background-color: $--color-primary-light-1;
-        }
-      }
-    }
-
-    .es-msg-item-title {
-      font-size: 12px;
-      margin-bottom: 8px;
-      line-height: 18px;
-      text-align: justify;
-    }
-
-    .es-msg-item-time {
-      font-size: 12px;
-      color: #606266;
-    }
-
-    .es-msg-tips {
-      line-height: 24px;
-      font-size: 12px;
-      text-align: center;
-    }
-  }
-
-  .es-msg-total,
-  .es-notice-footer {
-    height: 46px;
-    line-height: 22px;
-    font-size: 14px;
-    border-top: $--border-base;
-    padding: 12px;
-    background-color: #f3f3f3;
-    span {
-      cursor: pointer;
-    }
-  }
-}
-
-.es-notice-box {
-  position: absolute;
-  border: $--border-base;
-  border-radius: 4px;
-  right: 0;
-  bottom: 0;
-  box-shadow: $--box-shadow-base;
-  z-index: 99;
-
-  .es-msgs-box {
-    background-color: #ffffff;
-    position: unset;
-    animation: rtl-drawer-out 0.3s;
-    width: 260px;
-    height: 260px;
-    @extend .es-flex-vertical;
-
-    &.es-in {
-      animation: rtl-drawer-in 0.3s 1ms;
-    }
-  }
-}
-
-.es-user-info {
-  .el-collapse-item__content {
-    position: relative;
-  }
-
-  .el-form-item.es-user-info-job {
-    // display: none !important;
-    position: absolute;
-    left: 50%;
-    width: 50% !important;
-
-    .el-form-item__content {
-      margin-right: 0;
-    }
-  }
-
-  .el-form-item.es-qrcode {
-    // display: none !important;
-    position: absolute;
-    left: 20%;
-    width: 50% !important;
-    pointer-events: none;
-
-    .el-form-item__content {
-      margin-right: 0;
-    }
-  }
-}
-
-.weixinQrcode {
-  margin-left: 12px;
-  width: 102px;
-  height: 102px;
-  border: 1px solid #333;
-}
-.es-clients-dialog {
-  .el-dialog__header {
-    background-color: $--color-primary !important;
-    border-bottom-color: $--color-primary !important;
-    .el-dialog__title {
-      color: #fff;
-    }
-    .el-dialog__headerbtn .el-icon {
-      color: #fff !important;
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-  .el-dialog__body {
-    padding: 0;
-  }
-}
-.es-public-drawer-main {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.es-ai-icon {
-  width: 56px;
-  height: 56px;
-  cursor: move;
-  vertical-align: top;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .es-ai-image {
-    width: 56px;
-  }
-}
+@import './common/var.scss';
+@import './base.scss';
+@import './simplicity.scss';
+@import './simplicity-top.scss';
+.es-main-box {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  .es-launch-image {
+    z-index: 99999;
+  }
+}
+.es-main {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+
+  .es-main-header {
+    height: $--main-header-height;
+    position: relative;
+    background-color: $--color-primary;
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 0;
+    color: #fff;
+    @extend .es-flex;
+    @extend .es-align-middle;
+
+    .es-main-logo {
+      max-height: 60%;
+      margin-left: 50px;
+    }
+
+    .es-logo-error {
+      padding: 0 4px;
+      display: flex;
+      align-items: center;
+      width: 300px;
+      height: 100%;
+      color: #333;
+      background: #f5f7fa;
+
+      .el-icon-picture-outline {
+        font-size: 30px;
+        color: #909399;
+      }
+    }
+    & ~ .es-main-default-box {
+      top: $--main-header-height;
+    }
+  }
+
+  .es-main-top-nav {
+    flex: 1;
+    height: 100%;
+    position: relative;
+    .es-menu-horizontal-scrollbar {
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: $--main-header-height;
+    }
+    .es-fourth-tabs {
+      border: 0;
+      background-color: $--color-primary;
+      .el-menu {
+        border-bottom: 0;
+      }
+      .el-menu-item,
+      .es-submenu,
+      .el-submenu__title {
+        height: $--main-header-height !important;
+        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;
+      }
+    }
+  }
+  .es-main-default-box {
+    display: flex;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+
+  .es-main-left {
+    height: 100%;
+    position: relative;
+    background-color: $--color-primary-light-10;
+    .es-main-side {
+      overflow: hidden;
+      &.es-main-topside {
+        margin-top: -$--main-header-height;
+      }
+      .es-main-side-logo {
+        height: $--main-header-height;
+        display: block;
+        width: 230px;
+        .es-main-logo {
+          height: $--main-header-height;
+        }
+      }
+      .es-handle-user {
+        .es-user-info {
+          height: auto;
+          padding: 8px 4px 8px 0;
+          .es-user-name {
+            height: 30px;
+            line-height: 30px;
+          }
+        }
+      }
+    }
+  }
+
+  .es-main-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-orient: vertical;
+    position: relative;
+    transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+
+    .es-body {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+      &.es-body-wrapper {
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    }
+
+    .es-body-main {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+  }
+
+  .es-fourth-tabs {
+    height: 45px;
+    overflow: hidden;
+    background-color: #f5f5f5;
+    border-bottom: $--border-base;
+    .el-menu-item {
+      height: 44px;
+      line-height: 44px;
+    }
+  }
+
+  .es-setting-btn {
+    position: fixed;
+    right: 0;
+    top: 200px;
+    z-index: 9;
+
+    .es-icon-set {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  &.es-main-topside {
+    color: #333 !important;
+    .es-main-header {
+      padding-left: 230px;
+    }
+    .es-handle-user {
+      padding-top: 16px;
+      padding-bottom: 16px;
+    }
+    .es-main-left {
+      border-right: $--border-base;
+    }
+    .es-nav-main:not(.es-nav-overlap) {
+      background-color: transparent;
+      border-right: 0;
+    }
+    .es-main-top-nav {
+      .es-menu-horizontal {
+        background-color: transparent;
+      }
+    }
+  }
+  .es-apps-modal,
+  .es-public-drawer {
+    position: absolute;
+    .el-drawer__header {
+      margin-bottom: 0;
+    }
+    .el-drawer__body {
+      padding: 0;
+      position: relative;
+    }
+  }
+}
+.el-menu--popup-topnav {
+  .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-sets-drawer {
+  padding-top: 48px;
+
+  .el-drawer__header {
+    padding: 12px 4px 12px 16px !important;
+    margin: 0 !important;
+    border-bottom: $--border-base;
+    box-shadow: $--box-shadow-base;
+    line-height: 21px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: 1;
+
+    span {
+      font-size: 16px;
+      color: #333;
+    }
+  }
+
+  .el-drawer__body {
+    padding: 16px 20px;
+  }
+}
+.es-setting-item {
+  & + .es-setting-item {
+    border-top: $--border-base;
+    padding-top: 20px;
+    margin-top: 20px;
+  }
+  .es-setting-navs-box {
+    display: flex;
+    flex-wrap: wrap;
+    .es-setting-navs-item {
+      margin-left: 16px;
+    }
+  }
+  .es-setting-navs {
+    width: 100px;
+    height: 50px;
+    border-radius: 2px;
+    position: relative;
+    overflow: hidden;
+    background-color: $--color-primary;
+    margin-bottom: 12px;
+    cursor: pointer;
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 10px;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      background-color: #f0f2f5;
+    }
+    &.es-setting-side-nav {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        width: 8px;
+        top: 10px;
+        bottom: 0;
+        z-index: 2;
+        background-color: $--color-primary-light-8;
+      }
+      .es-setting-side-sub-nav {
+        width: 16px;
+        position: absolute;
+        left: 8px;
+        top: 10px;
+        bottom: 0;
+        z-index: 3;
+        background-color: $--color-primary-light-10;
+      }
+    }
+    &.es-setting-app-nav {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        width: 8px;
+        top: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: $--color-primary-light-8;
+      }
+      &::after {
+        top: 0;
+      }
+    }
+    &.es-setting-subsystem-nav {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        width: 16px;
+        top: 10px;
+        bottom: 0;
+        z-index: 2;
+        background-color: $--color-primary-light-10;
+      }
+    }
+    &.es-setting-top-side-nav {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        width: 20px;
+        top: 10px;
+        bottom: 0;
+        z-index: 2;
+        background-color: $--color-primary-light-10;
+      }
+    }
+    &.es-setting-side-navs {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        width: 20px;
+        top: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: $--color-primary-light-10;
+      }
+    }
+    .icon-gou {
+      position: absolute;
+      z-index: 9;
+      left: 50%;
+      top: 50%;
+      margin-left: -8px;
+      margin-top: -6px;
+    }
+  }
+}
+.es-setting-title {
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.es-setting-theme {
+  .el-radio-button {
+    cursor: pointer;
+    margin-right: 8px;
+    border-radius: 2px;
+  }
+
+  .el-radio-button__inner {
+    z-index: -1;
+  }
+
+  .el-radio-button__inner {
+    background-color: transparent !important;
+    border: 0;
+    display: inline-block;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    text-align: center;
+    line-height: 20px;
+  }
+
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    background-color: transparent !important;
+    z-index: 1;
+    border-radius: 2px;
+    border: 0;
+  }
+}
+
+.es-msgs-box {
+  position: absolute;
+
+  .el-drawer__header {
+    padding: 8px 0 0 12px;
+    margin-bottom: 0;
+  }
+
+  .es-msgs-main {
+    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+
+    .el-drawer__body {
+      padding: 0;
+      @extend .es-flex-vertical;
+    }
+  }
+
+  .es-overlook {
+    cursor: pointer;
+    line-height: 14px;
+    background-color: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+    border-radius: 4px;
+    padding: 2px 4px;
+    font-size: 12px;
+
+    &:hover {
+      color: $--color-primary;
+      border-color: $--color-primary-light-3;
+      background-color: $--color-primary-light-1;
+    }
+  }
+
+  .es-msg-header {
+    height: 46px;
+    line-height: 22px;
+    font-size: 14px;
+    border-bottom: $--border-base;
+    padding: 12px;
+    background-color: #f3f3f3;
+
+    .es-overlook {
+      float: right;
+      line-height: 18px;
+    }
+  }
+
+  .es-msg-lists-box {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+
+    .es-msg-lists {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      overflow: hidden;
+    }
+
+    .es-msg-item {
+      margin: 8px 12px;
+      position: relative;
+      overflow: visible;
+
+      .el-card__body {
+        padding: 8px;
+      }
+
+      & + .es-msg-item {
+        margin-top: 0;
+      }
+
+      .es-overlook {
+        float: right;
+      }
+
+      .el-icon-circle-close {
+        color: #606266;
+        cursor: pointer;
+        position: absolute;
+        background-color: #fff;
+        border-radius: 8px;
+        top: -4px;
+        right: -6px;
+        font-size: 16px;
+
+        &:hover {
+          color: $--color-primary;
+          border-color: $--color-primary-light-3;
+          background-color: $--color-primary-light-1;
+        }
+      }
+    }
+
+    .es-msg-item-title {
+      font-size: 12px;
+      margin-bottom: 8px;
+      line-height: 18px;
+      text-align: justify;
+    }
+
+    .es-msg-item-time {
+      font-size: 12px;
+      color: #606266;
+    }
+
+    .es-msg-tips {
+      line-height: 24px;
+      font-size: 12px;
+      text-align: center;
+    }
+  }
+
+  .es-msg-total,
+  .es-notice-footer {
+    height: 46px;
+    line-height: 22px;
+    font-size: 14px;
+    border-top: $--border-base;
+    padding: 12px;
+    background-color: #f3f3f3;
+    span {
+      cursor: pointer;
+    }
+  }
+}
+
+.es-notice-box {
+  position: absolute;
+  border: $--border-base;
+  border-radius: 4px;
+  right: 0;
+  bottom: 0;
+  box-shadow: $--box-shadow-base;
+  z-index: 99;
+
+  .es-msgs-box {
+    background-color: #ffffff;
+    position: unset;
+    animation: rtl-drawer-out 0.3s;
+    width: 260px;
+    height: 260px;
+    @extend .es-flex-vertical;
+
+    &.es-in {
+      animation: rtl-drawer-in 0.3s 1ms;
+    }
+  }
+}
+
+.es-user-info {
+  .el-collapse-item__content {
+    position: relative;
+  }
+
+  .el-form-item.es-user-info-job {
+    // display: none !important;
+    position: absolute;
+    left: 50%;
+    width: 50% !important;
+
+    .el-form-item__content {
+      margin-right: 0;
+    }
+  }
+
+  .el-form-item.es-qrcode {
+    // display: none !important;
+    position: absolute;
+    left: 20%;
+    width: 50% !important;
+    pointer-events: none;
+
+    .el-form-item__content {
+      margin-right: 0;
+    }
+  }
+}
+
+.weixinQrcode {
+  margin-left: 12px;
+  width: 102px;
+  height: 102px;
+  border: 1px solid #333;
+}
+.es-clients-dialog {
+  .el-dialog__header {
+    background-color: $--color-primary !important;
+    border-bottom-color: $--color-primary !important;
+    .el-dialog__title {
+      color: #fff;
+    }
+    .el-dialog__headerbtn .el-icon {
+      color: #fff !important;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+  .el-dialog__body {
+    padding: 0;
+  }
+}
+.es-public-drawer-main {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.es-ai-icon {
+  width: 56px;
+  height: 56px;
+  cursor: move;
+  vertical-align: top;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .es-ai-image {
+    width: 56px;
+  }
+}