hrp-ui-base 1.0.1 → 1.0.2

package/packages/approval-process/packages/styles/main.css

@@ -0,0 +1,216 @@
+:root {
+  /**头部背景色**/
+  /* --layout-header-bg-color: linear-gradient(90deg, #1c42c5 2%, #2a62d1); */
+  /**侧边栏背景色**/
+  /* --layout-aside-bg-color: #415a72; */
+  /**纵向收缩菜单背景色**/
+  /* --el-menu--vertical-bg-color: #415a72; */
+  /**横向收缩菜单背景色**/
+  /* --el-menu--horizontal-bg-color: #2a62d1; */
+  /**菜单选中时背景色**/
+  /* --el-menu-active-bg-color: rgba(0, 0, 0, 0.3); */
+
+  /* --el-rate-fill-color: rgba(55, 71, 82) !important; */
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+/* @media screen and (min-device-width: 1000px) {
+  html,
+  body,
+  #app {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+      Microsoft YaHei, SimSun, sans-serif;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: transparent;
+    background-color: #ffffff;
+    font-size: 14px;
+    position: relative;
+  }
+}
+@media screen and (max-device-width: 1000px) {
+  html,
+  body,
+  #app {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+      Microsoft YaHei, SimSun, sans-serif;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: transparent;
+    background-color: #ffffff;
+    font-size: 14px;
+    position: relative;
+  }
+}
+@media only screen and (max-width: 1000px) {
+  html,
+  body,
+  #app {
+    min-width: 0;
+    min-height: 0;
+  }
+} */
+
+.el-menu-item.is-active {
+  background-color: var(--el-menu-active-bg-color);
+}
+.el-sub-menu.is-active {
+  background-color: var(--el-menu-active-bg-color);
+}
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
+  background-color: var(--el-menu-hover-bg-color) !important;
+}
+::-webkit-scrollbar {
+  width: 4px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background-color: rgba(197, 200, 204, 0.8);
+}
+::-webkit-scrollbar-thumb:hover {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background-color: #949699;
+}
+::-webkit-scrollbar-track {
+  display: none;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0);
+}
+.hide-scroll-bar::-webkit-scrollbar {
+  display: none;
+}
+
+/*时间选择器*/
+/* .el-date-range-picker {
+  width: 450px !important;
+}
+.el-date-table td .el-date-table-cell {
+  height: 20px !important;
+  display: flex;
+  align-items: center;
+}
+.el-date-range-picker .el-picker-panel__body {
+  min-width: 400px !important;
+}
+.el-date-range-picker__header div {
+  font-size: 14px !important;
+} */
+
+/*表格头部样式*/
+.el-table {
+  border-radius: 10px 10px 0 0;
+  /*border-top:1px solid #DEDEDE;*/
+  /*border-left:1px solid #DEDEDE;*/
+  /*border-bottom:1px solid #DEDEDE;*/
+}
+/* ul a 复位*/
+ul {
+  list-style: none;
+}
+a {
+  text-decoration: none;
+}
+
+/*.el-table .descending .sort-caret.descending {*/
+/*    border-top-color: #ecf5ff !important;*/
+/*}*/
+/*.el-table .ascending .sort-caret.ascending {*/
+/*    border-bottom-color: #ecf5ff !important;*/
+/*}*/
+
+.table-cell-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  display: inline-block;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.el-button:focus-visible {
+  outline: none !important;
+}
+
+/* Alternative custom animation style */
+::view-transition-old(root),
+::view-transition-new(root) {
+  height: auto;
+  width: 100vw;
+  animation: none;
+  mix-blend-mode: normal;
+}
+html.dark::view-transition-old(root) {
+  z-index: 2147483646;
+}
+html.dark::view-transition-new(root) {
+  z-index: 1;
+}
+html::view-transition-old(root) {
+  z-index: 1;
+}
+html::view-transition-new(root) {
+  z-index: 2147483646;
+}
+
+button {
+  background-color: blue;
+  color: white;
+}
+button.dark {
+  background-color: white;
+  color: #000000;
+}
+.dark #light {
+  display: none;
+}
+.dark #dark {
+  display: block;
+}
+#dark {
+  display: none;
+}
+#light {
+  display: block;
+}

package/packages/approval-process/packages/styles/router-page.scss

@@ -0,0 +1,371 @@
+.left-top-router-icon-box {
+  width: auto;
+  height: 44px;
+  background-color: transparent;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  margin-left: 20px;
+  position: relative;
+  .router-page-icon {
+    width: 34px;
+    height: 34px;
+    cursor: pointer;
+    // transition: width 1s, height 1s;
+    /* 添加过渡效果，持续2秒 */
+  }
+
+  .router-page-divide {
+    width: 0px;
+    height: 34px;
+    border: 1px solid #E4E7ED;
+    margin: 0 6px;
+  }
+
+  .router-page-show-content{
+    font-size: 13px;
+    max-width: calc(100vw - 400px);
+    min-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: bold;
+    color: var(--custom-theme-text-1);
+  }
+
+  // .router-page-icon:hover {
+  //   width: 28px;
+  //   height: 28px;
+  // }
+
+
+
+  .popup-area-big-box {
+    height: calc(100vh - 44px);
+    width: 100vw;
+    position: absolute;
+    top: 44px;
+    left: -20px;
+
+    z-index: 88;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    .popup-area-mask {
+      width: 100vw;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: var(--custom-page-mask);
+    }
+
+    .popup-area-main {
+      min-width: 700px;
+      max-width: 1200px;
+      width: 90%;
+      background: var(--custom-theme-fill-4);
+      transform: translateX(-100%);
+      animation-duration: 0.6s;
+      animation-fill-mode: forwards;
+      border-radius: 0 7px 7px 0;
+    }
+  }
+}
+
+/* 淡入 */
+.popup-area-main.show-area-main {
+  animation-name: fadeInLeft;
+}
+
+/* 淡出 */
+.popup-area-main.hide-area-main {
+  animation-name: fadeOutRight;
+}
+
+
+/** 菜单栏主体的样式 */
+.popup-area-main {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  flex-shrink: 1;
+  flex-grow: 1;
+  padding: 8px;
+
+  .popup-area-left-use {
+    width: 229px;
+    margin-right: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    .popup-area-left-use-card-base {
+      width: 100%;
+      min-height: 27px;
+      background: var(--custom-theme-fill-7);
+      padding: 8px;
+      border-radius: 2px;
+      cursor: pointer;
+      font-size: 14px;
+      margin-bottom: 8px;
+      user-select: none;
+
+      img {
+        width: 22px;
+        height: 22px;
+        margin-right: 8px;
+      }
+    }
+
+    .popup-area-left-use-card-small {
+      border-left: 3px solid var(--custom-theme-fill-7);
+      color: var(--custom-theme-text-1);
+    }
+
+    .popup-area-left-use-card-small-active {
+      border-left: 3px solid var(--custom-theme-normal-normal);
+      color: var(--custom-theme-normal-normal);
+    }
+
+    .popup-area-left-use-card-big {
+      width: 100%;
+      min-height: 50px;
+      background: var(--custom-theme-fill-7);
+      padding: 8px;
+      border-radius: 2px;
+      cursor: pointer;
+      font-size: 14px;
+      margin-bottom: 8px;
+      user-select: none;
+      border-left: 3px solid var(--custom-theme-fill-7);
+      color: var(--custom-theme-text-1);
+
+
+      .popup-big-item-title-base {
+        width: 100%;
+        font-size: 14px;
+        margin-bottom: 8px;
+        user-select: none;
+
+        img {
+          width: 22px;
+          height: 22px;
+          margin-right: 8px;
+        }
+      }
+
+      .popup-big-item-box {
+        margin-left: 26px;
+        width: calc(100% - 26px);
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
+        flex-wrap: wrap;
+
+        .popup-big-item-base {
+          width: 50%;
+          margin-bottom: 6px;
+          padding: 3px 8px;
+          font-size: 13px;
+          min-height: 28px;
+          line-height: 22px;
+        }
+      }
+    }
+  }
+
+  // 内容区域
+  .popup-area-show-content {
+    width: calc(100% - 229px - 8px);
+    background: var(--custom-theme-fill-7);
+    height: 100%;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    border-radius: 8px;
+
+    .popup-show-content-menu-list {
+      overflow-y: auto;
+      overflow-x: hidden;
+      height: 100%;
+      width: 180px;
+      padding: 8px;
+      border-right: 2px solid var(--custom-theme-fill-4);
+
+      // 模块的样式 右内容区域的左侧 module
+      .popup-show-content-menu-list-item-base {
+        height: 26px;
+        width: 100%;
+        padding: 0 8px;
+        border-left: 3px solid var(--custom-theme-fill-7);
+        margin-bottom: 8px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 26px;
+        cursor: pointer;
+      }
+    }
+
+    .popup-area-show-content-item-box {
+      width: calc(100% - 185px);
+      overflow-y: auto;
+      height: 100%;
+      padding: 16px 18px;
+      font-size: 12px;
+
+      .content-module-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        margin-bottom: 28px;
+
+        .content-module-title {
+          user-select: none;
+          margin: 0 0 12px;
+          font-size: 16px;
+          min-height: 16px;
+          line-height: 16px;
+          padding-left: 3px;
+
+        }
+
+        .content-module-title-default {
+          color: var(--custom-theme-text-1);
+          border-left: 4px solid var(--custom-theme-info-normal);
+        }
+
+        .content-module-title-active {
+          color: var(--custom-theme-normal-normal);
+          border-left: 4px solid var(--custom-theme-normal-normal);
+
+        }
+
+        .content-catalogue-box {
+          margin-left: 8px;
+          width: 100%;
+          flex-wrap: wrap;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: flex-start;
+          margin-bottom: 18px;
+
+          .content-catalogue-title {
+            user-select: none;
+            font-size: 13px;
+            font-size: 15px;
+            min-height: 19px;
+            line-height: 19px;
+            border-left: 4px solid var(--custom-theme-fill-7);
+            padding-left: 8px;
+          }
+
+          .content-catalogue-title-active {
+            border-left: 4px solid var(--custom-theme-normal-normal);
+
+          }
+
+          .content-catalogue-title-default {
+            border-left: 4px solid var(--custom-theme-fill-7);
+
+          }
+
+
+        }
+      }
+
+    }
+  }
+}
+
+/** 公用的选中以及默认以及hover的样式 */
+.popup-item-active {
+  color: var(--custom-theme-normal-normal);
+  border-left: 3px solid var(--custom-theme-normal-normal) !important;
+  background: var(--custom-theme-normal-6);
+}
+
+.popup-item-default {
+  color: var(--custom-theme-text-1);
+  border-left: 3px solid var(--custom-theme-fill-7);
+  background: var(--custom-theme-fill-7);
+}
+
+.popup-item-default:hover {
+  color: var(--custom-theme-normal-normal);
+  border-left: 3px solid var(--custom-theme-fill-7);
+  background: var(--custom-theme-normal-6);
+}
+
+// 菜单项的样式
+.content-menu-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin: 10px 18px 0 0;
+  width: 200px;
+  cursor: pointer;
+  min-height: 27px;
+  line-height: 27px;
+  padding: 0 8px;
+
+  .content-menu-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 200px;
+    height: auto;
+
+    span {
+      height: auto;
+    }
+
+    img {
+      width: 18px;
+      user-select: none;
+    }
+  }
+
+
+
+}
+
+.content-menu-box-active {
+  background: var(--custom-theme-normal-6);
+  color: var(--custom-theme-normal-normal);
+}
+
+.content-menu-box-default {
+  background: var(--custom-theme-fill-7);
+  color: var(--custom-theme-text-1);
+
+}
+
+.content-menu-box:hover {
+  background: var(--custom-theme-normal-6);
+  color: var(--custom-theme-normal-normal);
+}
+
+// 收藏的菜单列表
+.popup-area-show-collection {
+  width: calc(100% - 240px - 8px);
+  background: var(--custom-theme-fill-7);
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  border-radius: 8px;
+
+  .collect-box {
+    padding: 20px;
+  }
+}