eoss-ui 0.3.97

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

@@ -0,0 +1,483 @@
+@import './common/var.scss';
+@import './base.scss';
+
+.es-main {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  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 {
+      height: 36px;
+      margin-left: 20px;
+    }
+
+    .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-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: 60px;
+    }
+    .es-fourth-tabs {
+      border: 0;
+      background-color: $--color-primary;
+      .el-menu {
+        border-bottom: 0;
+      }
+      .el-menu-item,
+      .el-submenu__title {
+        height: 60px !important;
+        line-height: 1 !important;
+        color: rgba(255, 255, 255, 0.85) !important;
+        &:not(.is-disabled) {
+          &:focus,
+          &:hover,
+          &.is-active {
+            background-color: $--color-primary-light-7;
+            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-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;
+      margin-top: -$--main-header-height;
+      .es-main-side-logo {
+        height: $--main-header-height;
+        display: block;
+        width: 230px;
+        padding: 12px 0 12px 12px;
+        .es-main-logo {
+          height: 36px;
+        }
+      }
+    }
+  }
+
+  .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-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-nav-main {
+      background-color: transparent;
+    }
+    .es-main-top-nav {
+      .es-menu-horizontal {
+        background-color: transparent;
+      }
+    }
+  }
+}
+.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-button {
+  position: fixed;
+  top: 100px;
+  right: -2px;
+  z-index: 2;
+  box-shadow: $--box-shadow-base;
+
+  .el-button {
+    font-size: 22px;
+    padding: 8px;
+  }
+}
+
+.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-title {
+  margin-bottom: 12px;
+}
+
+.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;
+    .el-dialog__title {
+      color: #fff;
+    }
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #fff;
+    }
+  }
+  .el-dialog__body {
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,201 @@
+@import './common/var.scss';
+@import './base.scss';
+.es-menu-vertical-scrollbar {
+  height: 100%;
+}
+.el-menu,
+.el-menu--horizontal > .el-submenu {
+  border-right: 0;
+  background-color: transparent;
+  .el-menu-item,
+  .el-submenu__title {
+    display: flex;
+    align-items: center;
+    padding-right: 16px;
+    height: 48px;
+    line-height: 48px;
+    &:not(.is-disabled):focus,
+    &:not(.is-disabled):hover {
+      background-color: transparent;
+    }
+  }
+  [class^='es-icon-'],
+  [class^='es-icons-'],
+  .es-menu-item-tooltip,
+  .es-icons {
+    vertical-align: middle;
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    font-size: 18px;
+  }
+  .el-submenu__icon-arrow {
+    right: 8px;
+  }
+  .es-menu-title-vertical {
+    flex: 1;
+    display: block;
+    white-space: normal;
+    line-height: 16px;
+    margin-right: 8px;
+    position: relative;
+    .es-badge {
+      @extend .es-text-ellipsis-row2;
+      line-height: 18px;
+      .el-badge__content {
+        right: 0;
+        top: 50%;
+        margin-top: -10px;
+        transform: scale(0.9);
+        line-height: 18px;
+      }
+    }
+  }
+  &.es-menu-collapse {
+    & > .el-menu-item {
+      flex-direction: column;
+      box-orient: vertical;
+      padding: 8px 0 !important;
+      text-align: center;
+      height: auto !important;
+      min-height: 60px;
+    }
+    & > li {
+      & > .el-submenu__title {
+        width: 100%;
+        display: block;
+        padding: 8px 0 !important;
+        height: auto;
+        min-height: 60px;
+        text-align: center;
+        line-height: 18px;
+      }
+    }
+    .es-icon-sidebar {
+      font-size: 26px;
+    }
+    .es-menu-title-text {
+      flex: none;
+      margin: 4px 0 0;
+      font-size: 13px;
+      line-height: 16px;
+      .es-badge {
+        padding-right: 0;
+        .el-badge__content {
+          top: -100%;
+          right: 0;
+          &:not(.is-dot) {
+            top: -150%;
+            right: -6px;
+          }
+        }
+      }
+    }
+  }
+  .es-item-vertical {
+    width: 70px;
+    height: auto;
+    min-height: 70px;
+    padding: 8px 0 !important;
+    flex-direction: column;
+    box-orient: vertical;
+    .es-menu-item-icon {
+      font-size: 26px;
+      line-height: 30px;
+    }
+    .es-menu-title-text {
+      text-align: center;
+      font-size: 14px;
+    }
+  }
+  &.es-menu-nav {
+    & > .el-menu-item {
+      flex-direction: column;
+      box-orient: vertical;
+      padding: 8px 0 !important;
+      text-align: center;
+      & > .es-icon-sidebar {
+        font-size: 26px;
+      }
+    }
+  }
+}
+
+.es-menu-vertical,
+.es-menu-popper-vertical > .el-menu {
+  background-color: $--color-primary;
+  .el-menu-item,
+  .el-submenu__title {
+    height: 40px;
+    line-height: 40px;
+    border: 0;
+    color: #fff;
+    i {
+      color: #fff;
+    }
+    &.is-active {
+      background-color: $--color-primary-light-8 !important;
+      i {
+        color: #fff;
+      }
+    }
+    &:hover,
+    &:focus {
+      background-color: $--color-primary-light-8 !important;
+    }
+  }
+}
+.el-menu--horizontal {
+  padding: 0 8px;
+  & > .el-submenu {
+    .el-submenu__icon-arrow {
+      margin-top: 0;
+    }
+  }
+  & > .el-menu-item {
+    height: 44px;
+    line-height: 44px;
+    &:not(.is-disabled) {
+      &:hover {
+        color: $--color-primary;
+      }
+    }
+    &.is-active {
+      border-bottom-width: 3px;
+      color: $--color-primary !important;
+      font-size: 15px;
+      font-weight: bold;
+    }
+  }
+  & > .el-submenu {
+    .el-submenu__title {
+      height: 44px;
+      line-height: 44px;
+    }
+  }
+  .el-menu {
+    background-color: #fff;
+    .el-submenu__title,
+    .el-menu-item {
+      color: rgba(0, 0, 0, 0.45);
+      &:not(.is-disabled):focus,
+      &:not(.is-disabled):hover {
+        background-color: transparent;
+        color: rgba(0, 0, 0, 0.75);
+      }
+      &.is-active {
+        color: $--color-primary;
+        font-size: 15px;
+      }
+    }
+  }
+}
+.es-menu-tooltip {
+  background: $--color-primary !important;
+  .popper__arrow {
+    border-right-color: $--color-primary !important;
+    &::after {
+      border-right-color: $--color-primary !important;
+    }
+  }
+}