zmdms-webui 2.2.6 → 2.2.8

package/dist/less/components/Alert/style/index.less

@@ -0,0 +1,53 @@
+.zt-alert {
+  border-radius: @border-radius;
+  border: none;
+  > .anticon {
+    font-size: 16px;
+    margin-right: 10px;
+  }
+  &.ant-alert-with-description {
+    padding: 8px 15px;
+    > .anticon {
+      margin-top: 2px;
+      font-size: 24px;
+    }
+  }
+  &.zt-alert--margin-top {
+    margin-top: @margin-base;
+  }
+  &.zt-alert--margin-bottom {
+    margin-bottom: @margin-base;
+  }
+  &.ant-alert-success {
+    background-color: @active-color;
+    color: #fff;
+    .anticon {
+      color: #fff;
+    }
+    .ant-alert-message {
+      color: #fff;
+    }
+  }
+  &.ant-alert-error {
+    background-color: @stress-color;
+    color: #fff;
+    .anticon {
+      color: #fff;
+      margin-top: 1px;
+    }
+    .ant-alert-message {
+      color: #fff;
+    }
+  }
+  &.ant-alert-info,
+  &.ant-alert-warning {
+    background-color: @global-color;
+    color: @global-text-color;
+    .anticon {
+      color: @global-text-color;
+    }
+    .ant-alert-message {
+      color: @global-text-color;
+    }
+  }
+}

package/dist/less/components/Alert/style/style.less

@@ -0,0 +1,4 @@
+@import "antd/lib/alert/style/index.less";
+
+@import "../../../styles/default.less";
+@import "./index.less";

package/dist/less/components/AppLayout/style/index.less

@@ -0,0 +1,546 @@
+.zmdms-container {
+  background-color: @content-bg;
+  .zmdms-sider {
+    background-color: @primary-color;
+    // background-image: url("../../assets/img/common/menu_bg.jpg");
+    background-size: 100% auto;
+    z-index: 102;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  .zmdms-content {
+    background-color: @content-bg;
+  }
+  // 头部内容
+  .zmdms-content--header {
+    padding: 0;
+    background: @bg-white;
+    height: @header-height;
+    line-height: @header-height;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 10px;
+    .ant-tabs {
+      flex: 1;
+      margin-top: 8px;
+      width: calc(100% - 350px);
+      .ant-tabs-tab {
+        > div {
+          padding: 0;
+        }
+        a {
+          display: inline-block;
+          // padding: 0 5px 0 10px;
+          padding: 0 10px 0 20px;
+          color: #768696;
+        }
+      }
+      .ant-tabs-nav {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .zmdms-content--content {
+    height: calc(100vh - @header-height);
+    position: relative;
+  }
+  .zmdms-content--header-info {
+    display: flex;
+    height: 48px;
+    color: @_color_black_1;
+    max-width: 350px;
+    .full-screen {
+      width: 36px;
+      text-align: center;
+      cursor: pointer;
+    }
+    .user-operation {
+      padding: 0 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      &:hover {
+        background-color: rgb(247, 247, 247);
+      }
+      > span:last-child {
+        color: @_color_black_1;
+        margin-left: 8px;
+        display: inline-block;
+        width: 70px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.zmdms-menu {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  // logo容器
+  .zmdms-logo {
+    display: block;
+    padding: 9px 0 5px 0;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    &.zmdms-logo--line {
+      position: relative;
+      z-index: 1000;
+      &::after {
+        content: "";
+        position: absolute;
+        width: 1px;
+        height: 29px;
+        background: #505cbe;
+        right: -0.5px;
+      }
+    }
+    > img {
+      margin: 0 auto;
+      display: block;
+      width: 78px;
+    }
+  }
+  // 搜索框
+  .zmdms-menu--search {
+    background-color: rgba(91, 138, 246, 0.4);
+    position: relative;
+    > input {
+      background-color: rgba(91, 138, 246, 0.4);
+      border: none;
+      color: #fff;
+      line-height: 36px;
+      height: 36px;
+      font-size: @font-size-text;
+      &::placeholder {
+        color: #fff;
+        font-size: @font-size-text;
+      }
+    }
+    .zmdms-menu--search__icon {
+      position: absolute;
+      right: 0;
+      top: 3px;
+      color: #fff;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
+  }
+  // 菜单著容器
+  .zmdms-menu--main {
+    background: transparent;
+    border-right: none;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    // 无背景
+    &.zmdms-menu--main-hide-bg {
+      .ant-menu-item-selected {
+        background: #1566d2 !important;
+      }
+    }
+    // 菜单换行显示
+    &.zmdms-menu--main-item-line {
+      .ant-menu-item {
+        min-height: 36px;
+        height: auto !important;
+        line-height: 20px !important;
+        .ant-menu-title-content {
+          width: 100%;
+          word-wrap: break-word;
+          white-space: pre-wrap;
+          display: inline-block;
+          height: auto !important;
+          text-overflow: unset !important;
+        }
+      }
+    }
+    > .ant-menu-submenu {
+      color: @text-white;
+      &.ant-menu-submenu-open {
+        > .ant-menu-submenu-title {
+          color: #fff;
+        }
+      }
+      > .ant-menu-submenu-title {
+        padding: 0;
+        margin: 0;
+        height: 36px;
+        line-height: 36px;
+        display: flex;
+        align-items: center;
+        background-color: #5b76f5;
+        background-color: rgba(91, 138, 246, 0.4);
+        backdrop-filter: blur(4px);
+        font-size: @font-size-text;
+        color: rgba(255, 255, 255, 0.65);
+        .ant-menu-submenu-arrow {
+          color: rgba(255, 255, 255, 0.65);
+          right: 6px;
+        }
+        .ant-menu-title-content {
+          flex: none;
+          width: 88%;
+        }
+        &:hover {
+          color: @text-white;
+          .ant-menu-submenu-arrow {
+            color: @text-white;
+          }
+        }
+      }
+      .ant-menu-sub.ant-menu-inline {
+        background: transparent;
+      }
+      .ant-menu-sub {
+        > .ant-menu-item {
+          font-size: @font-size-text;
+          height: @menu-height;
+          line-height: @menu-height;
+          margin: 0;
+          color: @menu-color;
+          display: flex;
+          align-items: center;
+          // padding-left: 15px !important;
+          a {
+            color: inherit;
+          }
+          &:active {
+            background: transparent;
+          }
+          &:hover {
+            color: @text-white;
+          }
+          &:not(:last-child) {
+            margin-bottom: 0;
+          }
+          &.ant-menu-item-selected {
+            // UI审查 1566d2 => 5b76f5
+            background: #5b76f5;
+            color: @text-white;
+            width: 100%;
+            &::after {
+              border-right: none;
+            }
+          }
+        }
+      }
+    }
+    /* 浏览器滚动条样式 */
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0);
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: @menu-scrollbar-bg;
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: @menu-scrollbar-bg;
+    }
+    > .ant-menu-item {
+      font-size: @font-size-text;
+      height: @menu-height;
+      line-height: @menu-height;
+      margin: 0;
+      color: @menu-color;
+      display: flex;
+      align-items: center;
+      a {
+        color: inherit;
+      }
+      &:active {
+        background: transparent;
+      }
+      &:hover {
+        color: @text-white;
+      }
+      &:not(:last-child) {
+        margin-bottom: 0;
+      }
+      &.ant-menu-item-selected {
+        background: @primary-color;
+        color: @text-white;
+        width: 100%;
+        &::after {
+          border-right: none;
+        }
+      }
+    }
+  }
+}
+
+// 二级菜单
+.zmdms-menu--sub {
+  padding: 0;
+  .ant-drawer-content {
+    overflow: hidden;
+    background: transparent;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 100%;
+    .ant-menu {
+      background: transparent;
+      color: #fff;
+    }
+  }
+  &.ant-drawer-left > .ant-drawer-content-wrapper {
+    left: -1px;
+  }
+  .ant-drawer-header {
+    padding: 0;
+    border-bottom: none;
+    background: transparent;
+    .ant-drawer-header-title {
+      height: 48px;
+      // padding: 0 10px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .ant-drawer-title {
+        color: #fff;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 118px;
+        }
+      }
+    }
+  }
+
+  &.zmdms-menu--sub-margin .ant-drawer-body {
+    // margin-top: 48px;
+  }
+  .ant-drawer-body {
+    padding: 0px;
+    font-size: @font-size-text;
+    // border-top: 1px solid #5670ea;
+    background: rgba(91, 118, 245, 0.4);
+    backdrop-filter: blur(2px);
+    overflow-x: hidden;
+    /* 浏览器滚动条样式 */
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0);
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: @menu-scrollbar-bg;
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: @menu-scrollbar-bg;
+    }
+    .ant-menu-submenu.ant-menu-submenu-inline {
+      // UI审查 增加底部边框
+      border-bottom: 1px solid rgba(141, 158, 255, 0.28);
+      padding-bottom: 0;
+    }
+    .ant-menu-sub.ant-menu-inline {
+      // background: #fff;
+      background: transparent;
+      // UI审查 0 5px => 0 10px;
+      padding: 0 10px;
+    }
+    .ant-menu-sub.ant-menu-inline > .ant-menu-item,
+    .ant-menu-item {
+      // UI审查 行高修改
+      height: @sub-menu-height;
+      line-height: @sub-menu-height;
+      // color: @submenu-color;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      font-size: @font-size-text;
+      border-radius: 4px;
+      margin: 0;
+      &:not(:last-child) {
+        margin-bottom: 0;
+      }
+      a {
+        color: #fff;
+      }
+      &:active {
+        background: transparent;
+      }
+      &:last-child {
+        margin-bottom: 10px;
+      }
+    }
+    .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
+    .ant-menu-submenu-title {
+      font-size: @font-size-text;
+      height: 30px;
+      line-height: 30px;
+      font-weight: 700;
+      // color: @submenu-color;
+      color: #fff;
+      .ant-menu-submenu-arrow {
+        color: #fff;
+      }
+      &:hover {
+        // color: @primary-color;
+        color: #fff;
+        .ant-menu-submenu-arrow {
+          // color: @primary-color;
+          color: #fff;
+        }
+      }
+      &:active {
+        background: transparent;
+      }
+    }
+
+    .ant-menu-root > .ant-menu-item-only-child {
+      margin-top: 2px;
+      .ant-menu-title-content {
+        font-weight: 700;
+      }
+    }
+    .ant-menu-item-selected {
+      color: @text-white;
+      background-color: @menu-selected-bg !important;
+      &::after {
+        border-right: none;
+      }
+    }
+  }
+  .ant-drawer-footer {
+    padding: 3px 10px;
+    height: @footer-height;
+    line-height: @footer-height;
+    border-top: 1px solid #5670ea;
+    background: rgba(91, 118, 245, 0.4);
+    backdrop-filter: blur(2px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .zt-btn-link {
+      color: #fff;
+    }
+  }
+
+  // 无背景
+  &.zmdms-menu--sub-hide-bg {
+    .ant-drawer-content {
+      background: #fff;
+      .ant-menu {
+        background: #fff;
+      }
+    }
+    .ant-drawer-header {
+      background: #fff;
+      border-bottom: 1px solid #ebf3fe;
+    }
+    .ant-drawer-body {
+      background: #fff;
+      backdrop-filter: none;
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 4px;
+      }
+      &::-webkit-scrollbar-track {
+        background: #fff;
+        border-radius: 4px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #8695a1;
+        border-radius: 4px;
+      }
+      &::-webkit-scrollbar-thumb:hover {
+        background: #727e88;
+      }
+      .ant-menu-sub.ant-menu-inline > .ant-menu-item,
+      .ant-menu-item {
+        color: rgba(0, 0, 0, 0.85);
+        a {
+          color: rgba(0, 0, 0, 0.85);
+          &:hover {
+            color: @primary-color;
+          }
+        }
+      }
+
+      .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
+      .ant-menu-submenu-title {
+        font-size: @font-size-text;
+        height: 30px;
+        line-height: 30px;
+        font-weight: 700;
+        // color: @submenu-color;
+        color: rgba(0, 0, 0, 0.65);
+        .ant-menu-submenu-arrow {
+          color: rgba(0, 0, 0, 0.85);
+        }
+        &:hover {
+          color: @primary-color;
+          .ant-menu-submenu-arrow {
+            color: @primary-color;
+          }
+        }
+        &:active {
+          background: transparent;
+        }
+      }
+
+      .ant-menu-item-selected {
+        color: @link-color !important;
+        background-color: #e6f7ff !important;
+      }
+    }
+    .ant-drawer-footer {
+      border-top: 1px solid #ebf3fe;
+      background: none;
+      backdrop-filter: none;
+      .zt-btn-link {
+        color: @link-color !important;
+      }
+    }
+  }
+  // 菜单换行显示
+  &.zmdms-menu--sub-item-line {
+    .ant-menu-item {
+      min-height: 30px;
+      height: auto !important;
+      line-height: 20px !important;
+      .ant-menu-title-content {
+        width: 100%;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        display: inline-block;
+        height: auto !important;
+        text-overflow: unset !important;
+      }
+    }
+  }
+}
+
+.logout-spin {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 1000;
+  padding-top: 100px;
+}

package/dist/less/components/AppLayout/style/style.less

@@ -0,0 +1,2 @@
+@import "../../../styles/default.less";
+@import "./index.less";

package/dist/less/components/AppLayout/style.less

@@ -0,0 +1,5 @@
+.zmdms-menu--sub {
+  .ant-drawer-content {
+    background-image: url("../../assets/img/menu_bg.png");
+  }
+}

package/dist/less/components/AuthLoading/style/index.less

@@ -0,0 +1,15 @@
+.auth-loading {
+  width: 100vw;
+  height: 50vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 20px;
+  .ant-spin-dot {
+    font-size: 18px;
+  }
+  .ant-spin-text {
+    font-size: 20px;
+  }
+}

package/dist/less/components/AuthLoading/style/style.less

@@ -0,0 +1,2 @@
+@import "../../../styles/default.less";
+@import "./index.less";