hrp-ui-base 1.4.7 → 1.4.9

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

@@ -1,337 +1,337 @@
-.phonePageBox {
-  width: 100%;
-  height: 100%;
-  background: #f1f2f3;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: absolute;
-
-  // 按钮区域样式
-  .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;
-  }
-
-  .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;
-      }
-    }
-  }
-
-  .topHeaderBox::after {
-    background: rgb(0, 137, 255);
-    ;
-    border-radius: 0 0 50% 50%;
-    content: "";
-    height: 80px;
-    left: -20%;
-    position: absolute;
-    top: 0;
-    width: 140%;
-    z-index: -1;
-  }
-
-  .topHeaderBox {
-    width: 100%;
-    height: 132px;
-    position: relative;
-    z-index: 10;
-    padding: 10px;
-
-    .topHeader {
-      display: block;
-      padding: 16px;
-      position: relative;
-      width: 100%;
-      background: #fff;
-      border-radius: 8px;
-      width: 100%;
-      height: 112px;
-
-      .topHeadertop {
-        color: #171a1d;
-        font-size: 18px;
-        font-weight: 700;
-        line-height: 22px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-      }
-
-      .topHeaderName2 {
-        margin: 12px 0;
-        color: #747677;
-
-        .topHeaderImg {
-          border-radius: 4px;
-          height: 18px;
-          margin-right: 8px;
-          width: 18px;
-        }
-
-        .topHeaderSpan {
-          max-width: 198px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-
-      .topHeaderVersion {
-        color: #747677;
-
-      }
-
-      .stuticIcon {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        height: 80px;
-        opacity: 1;
-        width: 80px;
-      }
-    }
-  }
-
-  .innerPageBox {
-    width: calc(100% - 20px);
-    position: relative;
-    // z-index: 10;
-    display: flex;
-    flex-shrink: 0;
-    margin: 10px;
-    max-width: 100%;
-    overflow: hidden;
-    background: #fff;
-    border-radius: 8px;
-  }
-
-  .innerPageItem {
-    width: 100%;
-    border-radius: 6px;
-    background: #fff;
-    overflow: hidden;
-
-    .innerPageItemHeader {
-      border-bottom: 1px solid rgba(31, 56, 88, .2);
-      color: rgba(0, 0, 0, .8);
-      font-size: 16px;
-      line-height: 48px;
-      padding-left: 24px;
-    }
-  }
-
-  .formBox {
-    padding: 24px;
-    overflow: auto;
-  }
-
-  .processBox {
-    padding: 28px 16px 10px;
-    overflow-y: auto;
-
-    .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;
-      }
-
-      .iconBoxForSubmitAdd {
-        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;
-      }
-
-      .imgbox {
-        border-radius: 6px;
-        background-color: #d8d8d8;
-        background-size: cover;
-        border-radius: 6px;
-        float: left;
-        height: 40px;
-        margin-right: 12px;
-        width: 40px;
-        overflow: hidden;
-      }
-
-      .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;
-          width: 100%;
-          font-size: 15px;
-          display: inline-block;
-        }
-
-        .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;
-          min-height: 18px;
-          height: auto;
-
-        }
-
-        .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;
-    }
-  }
-
-  .buttonbox {
-    width: 100%;
-    bottom: 0;
-    height: 50px;
-    left: 0;
-    overflow: hidden;
-    position: fixed;
-    right: 0;
-    z-index: 10;
-    line-height: 50px;
-    text-align: center;
-    background: #fff;
-    background-color: #fff;
-    border: 1px solid rgba(31, 56, 88, .1);
-  }
-
-  .porcessTimeNodeNameBig {
-    height: 18px;
-    min-height: 18px;
-    color: #111111;
-    margin: 3px 0;
-    height: auto;
-    font-size: 18px;
-    margin-top: 0;
-    margin-right: 8px;
-  }
-}
-
-.innerAuditBody {
-  height: 90vh;
+.phonePageBox {
+  width: 100%;
+  height: 100%;
+  background: #f1f2f3;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: absolute;
+
+  // 按钮区域样式
+  .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;
+  }
+
+  .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;
+      }
+    }
+  }
+
+  .topHeaderBox::after {
+    background: rgb(0, 137, 255);
+    ;
+    border-radius: 0 0 50% 50%;
+    content: "";
+    height: 80px;
+    left: -20%;
+    position: absolute;
+    top: 0;
+    width: 140%;
+    z-index: -1;
+  }
+
+  .topHeaderBox {
+    width: 100%;
+    height: 132px;
+    position: relative;
+    z-index: 10;
+    padding: 10px;
+
+    .topHeader {
+      display: block;
+      padding: 16px;
+      position: relative;
+      width: 100%;
+      background: #fff;
+      border-radius: 8px;
+      width: 100%;
+      height: 112px;
+
+      .topHeadertop {
+        color: #171a1d;
+        font-size: 18px;
+        font-weight: 700;
+        line-height: 22px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+      }
+
+      .topHeaderName2 {
+        margin: 12px 0;
+        color: #747677;
+
+        .topHeaderImg {
+          border-radius: 4px;
+          height: 18px;
+          margin-right: 8px;
+          width: 18px;
+        }
+
+        .topHeaderSpan {
+          max-width: 198px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      .topHeaderVersion {
+        color: #747677;
+
+      }
+
+      .stuticIcon {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        height: 80px;
+        opacity: 1;
+        width: 80px;
+      }
+    }
+  }
+
+  .innerPageBox {
+    width: calc(100% - 20px);
+    position: relative;
+    // z-index: 10;
+    display: flex;
+    flex-shrink: 0;
+    margin: 10px;
+    max-width: 100%;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 8px;
+  }
+
+  .innerPageItem {
+    width: 100%;
+    border-radius: 6px;
+    background: #fff;
+    overflow: hidden;
+
+    .innerPageItemHeader {
+      border-bottom: 1px solid rgba(31, 56, 88, .2);
+      color: rgba(0, 0, 0, .8);
+      font-size: 16px;
+      line-height: 48px;
+      padding-left: 24px;
+    }
+  }
+
+  .formBox {
+    padding: 24px;
+    overflow: auto;
+  }
+
+  .processBox {
+    padding: 28px 16px 10px;
+    overflow-y: auto;
+
+    .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;
+      }
+
+      .iconBoxForSubmitAdd {
+        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;
+      }
+
+      .imgbox {
+        border-radius: 6px;
+        background-color: #d8d8d8;
+        background-size: cover;
+        border-radius: 6px;
+        float: left;
+        height: 40px;
+        margin-right: 12px;
+        width: 40px;
+        overflow: hidden;
+      }
+
+      .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;
+          width: 100%;
+          font-size: 15px;
+          display: inline-block;
+        }
+
+        .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;
+          min-height: 18px;
+          height: auto;
+
+        }
+
+        .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;
+    }
+  }
+
+  .buttonbox {
+    width: 100%;
+    bottom: 0;
+    height: 50px;
+    left: 0;
+    overflow: hidden;
+    position: fixed;
+    right: 0;
+    z-index: 10;
+    line-height: 50px;
+    text-align: center;
+    background: #fff;
+    background-color: #fff;
+    border: 1px solid rgba(31, 56, 88, .1);
+  }
+
+  .porcessTimeNodeNameBig {
+    height: 18px;
+    min-height: 18px;
+    color: #111111;
+    margin: 3px 0;
+    height: auto;
+    font-size: 18px;
+    margin-top: 0;
+    margin-right: 8px;
+  }
+}
+
+.innerAuditBody {
+  height: 90vh;
 }