hrp-ui-base 1.4.6 → 1.4.7

package/packages/approval-process/packages/flow/styles/submit-approve-pc.scss

@@ -1,379 +1,379 @@
-.submit-big-box {
-  width: 100%;
-  height: 100%;
-  border-radius: 10px 10px 10px 10px;
-}
-
-.submit-page-box {
-  width: 100%;
-  height: 100%;
-  background: var(--custom-theme-fill-4);
-  overflow: hidden;
-  position: absolute;
-
-  .submit-inner-page-box {
-    background: var(--custom-theme-fill-4);
-    width: calc(100%);
-    height: calc(100% - 50px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    // margin: 8px;
-
-    .inner-page-item {
-      border-radius: 6px;
-      background: var(--custom-theme-fill-7);
-      margin: 0 auto 8px;
-      min-width: 350px;
-      margin-bottom: 8px;
-
-      // max-width: 1200px;
-      .inner-page-item-header {
-        border-bottom: 1px solid rgba(31, 56, 88, .2);
-        color: var(--custom-theme-text-1);
-        font-size: 16px;
-        line-height: 48px;
-        padding-left: 24px;
-      }
-    }
-  }
-
-  // 按钮区域样式
-  .submit-button-box {
-    width: calc(100% - 4px);
-    bottom: 0;
-    height: 50px;
-    overflow: hidden;
-    position: absolute;
-    z-index: 10;
-    line-height: 50px;
-    text-align: center;
-    background: var(--custom-theme-fill-7);
-    // border: 1px solid rgba(31, 56, 88, .1);
-    box-shadow: 0px -1px 4px 1px #90939930;
-    border-radius: 0px 0px 0px 0px;
-  }
-
-
-}
-
-
-
-
-// 返回，标题以及选择部门盒子
-.inner-page-top-box {
-  width: 100%;
-  padding: 0;
-  height: auto;
-
-  .inner-page-top-dept-top {
-    height: 56px;
-    line-height: 24px;
-    padding: 16px 16px 12px 16px;
-
-    .submit-back {
-      font-size: 16px;
-      color: var(--custom-theme-text-1);
-      cursor: pointer;
-    }
-
-    .inner-page-divide {
-      margin: 0 8px;
-      width: 0px;
-      height: 24px;
-      border: 1px solid var(--custom-theme-border-4);
-    }
-
-    .inner-page-top-dept-title {
-      font-weight: bold;
-      font-size: 18px;
-      color: var(--custom-theme-text-1);
-    }
-  }
-
-  .inner-page-top-dept-bottom {
-    padding: 9px 0 14px 16px;
-    width: 100%;
-    height: auto;
-    border-top: 1px solid var(--custom-theme-border-4);
-
-    .inner-page-top-dept-bottom-title {
-      height: 26px;
-      font-weight: bold;
-      font-size: 20px;
-      color: var(--custom-theme-text-1);
-      margin-bottom: 9px;
-    }
-
-    .inner-page-top-form-box {
-      width: 300px;
-      height: 35px;
-      border: 1px solid var(--custom-theme-border-4);
-      border-radius: 4px;
-      overflow: hidden;
-
-      .inner-page-top-form-title {
-        width: 108px;
-        border-right: 1px solid var(--custom-theme-border-4);
-        font-size: 14px;
-        color: var(--custom-theme-text-1);
-        text-align: left;
-        line-height: 35px;
-        padding: 0 8px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .inner-page-top-form-content {
-        width: calc(100% - 110px);
-        height: 100%;
-      }
-    }
-  }
-}
-
-.topHeaderBox {
-  width: 100%;
-  background: #fff;
-  height: 132px;
-
-  .topHeader {
-    min-width: 350px;
-    max-width: 1200px;
-    margin: 0 auto;
-    height: 132px;
-    padding: 20px 24px;
-
-    .topHeaderNameLeft {
-      img {
-        border-radius: 6px;
-        font-size: 20px;
-        height: 24px;
-        line-height: 24px;
-        width: 24px;
-        background: #f1f2f3;
-        color: #fff;
-        cursor: pointer;
-        display: inline-block;
-        margin-right: 16px;
-        text-align: center;
-      }
-
-      span {
-        display: inline-block;
-        font-size: 18px;
-        line-height: 24px;
-        margin: 0;
-        overflow: hidden;
-        padding: 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-      }
-    }
-
-    .topHeaderNameRight {
-      flex-direction: row-reverse;
-      color: #878f95;
-      overflow: hidden;
-
-      .iconBox {
-        width: 32px;
-        padding: 0;
-        font-size: 20px;
-      }
-    }
-
-    .headerStatusItem {
-      height: 48px;
-
-      .headerItemname {
-        color: rgba(17, 31, 44, .56);
-        font-size: 14px;
-        line-height: 24px;
-      }
-
-      .headerItemValue {
-        display: inline-block;
-        font-size: 14px;
-        line-height: 24px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-      }
-
-      .headerItemButtonValue {
-        border-radius: 4px;
-        padding: 4px 16px;
-        background-color: rgba(255, 146, 0, .12);
-        color: #ff9200;
-      }
-    }
-  }
-}
-
-
-
-.formBox {
-  padding: 24px;
-}
-.formBoxItr{
-  padding: 0 12px 0 12px;
-}
-.processBox {
-  padding: 28px 16px 10px;
-
-  .timeLineTtem {
-    position: relative;
-    top: -10px;
-
-    img {
-      border-radius: 6px;
-      background-color: #d8d8d8;
-      background-size: cover;
-      border-radius: 6px;
-      float: left;
-      height: 40px;
-      margin-right: 12px;
-      width: 40px;
-    }
-
-    .imgbox {
-      border-radius: 6px;
-      background-color: #d8d8d8;
-      background-size: cover;
-      border-radius: 6px;
-      float: left;
-      height: 40px;
-      margin-right: 12px;
-      width: 40px;
-      overflow: hidden;
-    }
-
-    .iconBox {
-      border-radius: 6px;
-      background-color: #d8d8d8;
-      background-size: cover;
-      border-radius: 6px;
-      float: left;
-      height: 40px;
-      margin-right: 12px;
-      width: 40px;
-      overflow: hidden;
-      text-align: center;
-      line-height: 40px;
-      font-size: 28px;
-      color: #878f95;
-    }
-
-    .porcessTime {
-      width: calc(100% - 52px);
-      white-space: pre-wrap;
-      word-break: break-all;
-
-      .porcessTimeNameBox {
-        width: 100%;
-      }
-
-      .porcessTimeName {
-        height: auto;
-        white-space: pre-wrap;
-        word-break: break-all;
-        font-size: 15px;
-        width: 100%;
-      }
-
-      .porcessTimeTime {
-        color: rgba(31, 56, 88, .6);
-        height: auto;
-        width: 100%;
-        white-space: pre-wrap;
-        word-break: break-all;
-        margin: 4px 0 2px;
-      }
-
-      .porcessTimeNodeName {
-        height: 18px;
-        min-height: 18px;
-        color: #9b9b9b;
-        margin: 3px 0;
-        height: auto;
-      }
-
-      .porcessTimeNodeStatus {
-        height: 18px;
-        font-weight: 700;
-
-      }
-
-      .sonItemBox {
-        margin: 10px 0;
-
-        .sonItem {
-          margin: 12px 0;
-
-        }
-      }
-    }
-  }
-}
-
-.imgbox {
-  border-radius: 6px;
-  background-color: #d8d8d8;
-  background-size: cover;
-  border-radius: 6px;
-  float: left;
-  height: 40px;
-  margin-right: 12px;
-  width: 40px;
-  overflow: hidden;
-}
-
-.commentBox {
-  .commentBoxNameBox {
-    height: 22px;
-    line-height: 22px;
-    margin-bottom: 8px;
-    position: relative;
-
-    .commentBoxName {
-      color: #999;
-      font-size: 12px;
-      margin-right: 5px;
-      vertical-align: top;
-    }
-
-    .commentBoxTime {
-      color: #999;
-      font-size: 12px;
-      margin-right: 5px;
-      vertical-align: top;
-    }
-  }
-
-  .commentBoxContent {
-    overflow: hidden;
-    word-break: break-all;
-    color: #333;
-    font-size: 14px;
-    line-height: 22px;
-    height: 22px;
-    margin: 12px 0;
-  }
-}
-
-
-
-.porcessTimeNodeNameBig {
-  height: 18px;
-  min-height: 18px;
-  color: var(--custom-theme-text-1);
-  margin: 3px 0;
-  height: auto;
-  font-size: 18px;
-  margin-top: 0;
-  margin-right: 8px;
-}
-
+.submit-big-box {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px 10px 10px 10px;
+}
+
+.submit-page-box {
+  width: 100%;
+  height: 100%;
+  background: var(--custom-theme-fill-4);
+  overflow: hidden;
+  position: absolute;
+
+  .submit-inner-page-box {
+    background: var(--custom-theme-fill-4);
+    width: calc(100%);
+    height: calc(100% - 50px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    // margin: 8px;
+
+    .inner-page-item {
+      border-radius: 6px;
+      background: var(--custom-theme-fill-7);
+      margin: 0 auto 8px;
+      min-width: 350px;
+      margin-bottom: 8px;
+
+      // max-width: 1200px;
+      .inner-page-item-header {
+        border-bottom: 1px solid rgba(31, 56, 88, .2);
+        color: var(--custom-theme-text-1);
+        font-size: 16px;
+        line-height: 48px;
+        padding-left: 24px;
+      }
+    }
+  }
+
+  // 按钮区域样式
+  .submit-button-box {
+    width: calc(100% - 4px);
+    bottom: 0;
+    height: 50px;
+    overflow: hidden;
+    position: absolute;
+    z-index: 10;
+    line-height: 50px;
+    text-align: center;
+    background: var(--custom-theme-fill-7);
+    // border: 1px solid rgba(31, 56, 88, .1);
+    box-shadow: 0px -1px 4px 1px #90939930;
+    border-radius: 0px 0px 0px 0px;
+  }
+
+
+}
+
+
+
+
+// 返回，标题以及选择部门盒子
+.inner-page-top-box {
+  width: 100%;
+  padding: 0;
+  height: auto;
+
+  .inner-page-top-dept-top {
+    height: 56px;
+    line-height: 24px;
+    padding: 16px 16px 12px 16px;
+
+    .submit-back {
+      font-size: 16px;
+      color: var(--custom-theme-text-1);
+      cursor: pointer;
+    }
+
+    .inner-page-divide {
+      margin: 0 8px;
+      width: 0px;
+      height: 24px;
+      border: 1px solid var(--custom-theme-border-4);
+    }
+
+    .inner-page-top-dept-title {
+      font-weight: bold;
+      font-size: 18px;
+      color: var(--custom-theme-text-1);
+    }
+  }
+
+  .inner-page-top-dept-bottom {
+    padding: 9px 0 14px 16px;
+    width: 100%;
+    height: auto;
+    border-top: 1px solid var(--custom-theme-border-4);
+
+    .inner-page-top-dept-bottom-title {
+      height: 26px;
+      font-weight: bold;
+      font-size: 20px;
+      color: var(--custom-theme-text-1);
+      margin-bottom: 9px;
+    }
+
+    .inner-page-top-form-box {
+      width: 300px;
+      height: 35px;
+      border: 1px solid var(--custom-theme-border-4);
+      border-radius: 4px;
+      overflow: hidden;
+
+      .inner-page-top-form-title {
+        width: 108px;
+        border-right: 1px solid var(--custom-theme-border-4);
+        font-size: 14px;
+        color: var(--custom-theme-text-1);
+        text-align: left;
+        line-height: 35px;
+        padding: 0 8px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .inner-page-top-form-content {
+        width: calc(100% - 110px);
+        height: 100%;
+      }
+    }
+  }
+}
+
+.topHeaderBox {
+  width: 100%;
+  background: #fff;
+  height: 132px;
+
+  .topHeader {
+    min-width: 350px;
+    max-width: 1200px;
+    margin: 0 auto;
+    height: 132px;
+    padding: 20px 24px;
+
+    .topHeaderNameLeft {
+      img {
+        border-radius: 6px;
+        font-size: 20px;
+        height: 24px;
+        line-height: 24px;
+        width: 24px;
+        background: #f1f2f3;
+        color: #fff;
+        cursor: pointer;
+        display: inline-block;
+        margin-right: 16px;
+        text-align: center;
+      }
+
+      span {
+        display: inline-block;
+        font-size: 18px;
+        line-height: 24px;
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+      }
+    }
+
+    .topHeaderNameRight {
+      flex-direction: row-reverse;
+      color: #878f95;
+      overflow: hidden;
+
+      .iconBox {
+        width: 32px;
+        padding: 0;
+        font-size: 20px;
+      }
+    }
+
+    .headerStatusItem {
+      height: 48px;
+
+      .headerItemname {
+        color: rgba(17, 31, 44, .56);
+        font-size: 14px;
+        line-height: 24px;
+      }
+
+      .headerItemValue {
+        display: inline-block;
+        font-size: 14px;
+        line-height: 24px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+      }
+
+      .headerItemButtonValue {
+        border-radius: 4px;
+        padding: 4px 16px;
+        background-color: rgba(255, 146, 0, .12);
+        color: #ff9200;
+      }
+    }
+  }
+}
+
+
+
+.formBox {
+  padding: 24px;
+}
+.formBoxItr{
+  padding: 0 12px 0 12px;
+}
+.processBox {
+  padding: 28px 16px 10px;
+
+  .timeLineTtem {
+    position: relative;
+    top: -10px;
+
+    img {
+      border-radius: 6px;
+      background-color: #d8d8d8;
+      background-size: cover;
+      border-radius: 6px;
+      float: left;
+      height: 40px;
+      margin-right: 12px;
+      width: 40px;
+    }
+
+    .imgbox {
+      border-radius: 6px;
+      background-color: #d8d8d8;
+      background-size: cover;
+      border-radius: 6px;
+      float: left;
+      height: 40px;
+      margin-right: 12px;
+      width: 40px;
+      overflow: hidden;
+    }
+
+    .iconBox {
+      border-radius: 6px;
+      background-color: #d8d8d8;
+      background-size: cover;
+      border-radius: 6px;
+      float: left;
+      height: 40px;
+      margin-right: 12px;
+      width: 40px;
+      overflow: hidden;
+      text-align: center;
+      line-height: 40px;
+      font-size: 28px;
+      color: #878f95;
+    }
+
+    .porcessTime {
+      width: calc(100% - 52px);
+      white-space: pre-wrap;
+      word-break: break-all;
+
+      .porcessTimeNameBox {
+        width: 100%;
+      }
+
+      .porcessTimeName {
+        height: auto;
+        white-space: pre-wrap;
+        word-break: break-all;
+        font-size: 15px;
+        width: 100%;
+      }
+
+      .porcessTimeTime {
+        color: rgba(31, 56, 88, .6);
+        height: auto;
+        width: 100%;
+        white-space: pre-wrap;
+        word-break: break-all;
+        margin: 4px 0 2px;
+      }
+
+      .porcessTimeNodeName {
+        height: 18px;
+        min-height: 18px;
+        color: #9b9b9b;
+        margin: 3px 0;
+        height: auto;
+      }
+
+      .porcessTimeNodeStatus {
+        height: 18px;
+        font-weight: 700;
+
+      }
+
+      .sonItemBox {
+        margin: 10px 0;
+
+        .sonItem {
+          margin: 12px 0;
+
+        }
+      }
+    }
+  }
+}
+
+.imgbox {
+  border-radius: 6px;
+  background-color: #d8d8d8;
+  background-size: cover;
+  border-radius: 6px;
+  float: left;
+  height: 40px;
+  margin-right: 12px;
+  width: 40px;
+  overflow: hidden;
+}
+
+.commentBox {
+  .commentBoxNameBox {
+    height: 22px;
+    line-height: 22px;
+    margin-bottom: 8px;
+    position: relative;
+
+    .commentBoxName {
+      color: #999;
+      font-size: 12px;
+      margin-right: 5px;
+      vertical-align: top;
+    }
+
+    .commentBoxTime {
+      color: #999;
+      font-size: 12px;
+      margin-right: 5px;
+      vertical-align: top;
+    }
+  }
+
+  .commentBoxContent {
+    overflow: hidden;
+    word-break: break-all;
+    color: #333;
+    font-size: 14px;
+    line-height: 22px;
+    height: 22px;
+    margin: 12px 0;
+  }
+}
+
+
+
+.porcessTimeNodeNameBig {
+  height: 18px;
+  min-height: 18px;
+  color: var(--custom-theme-text-1);
+  margin: 3px 0;
+  height: auto;
+  font-size: 18px;
+  margin-top: 0;
+  margin-right: 8px;
+}
+