cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.8

package/src/components/xform/styles/h5.scss

@@ -27,9 +27,10 @@ $xformH5HeaderHeight: 38px; // 标题栏
 $xformH5FooterHeight: 56px; // 底部动作栏
 $xformH5RowHeight: 48px; // 字段行高
 $xformH5LabelWidth: 80px; // 标签宽
-$xformH5RowBorder: #f3f3f3; // 行分隔线
+$xformH5RowBorder: #f1f1f1; // 行分隔线
 $xformH5CardRadius: 12px;
 $xformH5PageBg: #f1f5fb;
+$xformH5Size:14px;
 
 /* ============ 块 B：分组卡片（对齐 bill_setting 的 .c-item / .tit） ============ */
 /* 对手：style.scss:13766 .h5-detail-wrap .h5-item (0,2,0)；本方 0,3,0
@@ -41,8 +42,8 @@ $xformH5PageBg: #f1f5fb;
   .c-item {
     background: #fff;
     border-radius: $xformH5CardRadius;
-    margin: 12px 8px 0;
-    padding-bottom: 6px;
+    margin: 12px 16px 0;
+    padding-bottom: 0;
     overflow: hidden;
 
     /* 对手：style.scss:13771 .h5-detail-wrap .h5-item .h5-title (0,3,0)；本方 0,4,0
@@ -51,11 +52,11 @@ $xformH5PageBg: #f1f5fb;
     .tit {
       line-height: 45px;
       padding: 0 12px;
-      border-bottom: 1px solid #f6f6f6;
+      border-bottom:none;
       position: relative;
 
       b {
-        font-size: 14px;
+        font-size: 15px;
         font-weight: 600;
         color: #323232;
       }
@@ -116,11 +117,17 @@ $xformH5PageBg: #f1f5fb;
    给它加 12px 不会让任何字段受益，只会把里面的卡片整体往里缩一圈，
    结果是同一屏里 h5-card 里的卡片比流程面板窄 30px、左右对不齐。 */
 .xform-h5 .h5-detail-wrap .h5-item .h5-form-box {
-  padding: 12px;
-
+  padding:0 12px;
+  .item{
+    background: #FFF;
+    border-color: $xformH5RowBorder;
+  }
   > .form-widget-list {
     display: flex;
     flex-wrap: wrap;
+    .h5-header{
+      display: none;
+    }
   }
 }
 
@@ -156,9 +163,7 @@ $xformH5PageBg: #f1f5fb;
     align-items: flex-start;
     position: relative;
     min-height: $xformH5RowHeight;
-    padding: 6px 0;
     margin-bottom: 0;
-    border-bottom: 1px solid $xformH5RowBorder;
   }
 
   /* 对手：style.scss:13854 `.h5-detail-wrap .h5-item .el-form-item__label` (0,3,0)
@@ -170,7 +175,7 @@ $xformH5PageBg: #f1f5fb;
     line-height: 1.4;
     height: auto;
     overflow: hidden;
-    color: #808080;
+    color: #666666;
     text-align: left !important;
 
     /* 标签后自动补冒号，对齐 bill_setting form-table 的 th::after。
@@ -178,13 +183,13 @@ $xformH5PageBg: #f1f5fb;
     &::after {
       display: inline !important;
       content: ":";
+      margin-left:2px;
     }
   }
 
   .el-form-item > .el-form-item__content {
     flex: 1;
     line-height: 1.4;
-    text-align: right;
     word-break: break-word;
     /* el-form-item 按 label-width 写的内联 margin-left 在 flex 行里是多余的左空白：
        值是右对齐的所以看不出来，但它白白压缩可用宽度、让长值提前折行。
@@ -194,9 +199,6 @@ $xformH5PageBg: #f1f5fb;
 
   /* 卡片里最后一行不留分隔线。:last-child 计入 class 列，本条 (0,5,0)
      高于上面 .el-form-item 的 border-bottom (0,4,0)。 */
-  &:last-child .el-form-item {
-    border-bottom: none;
-  }
 }
 
 /* ============ 块 C1：表格布局（.table-layout）下退回块 C 的 flex 行 ============ */
@@ -229,7 +231,7 @@ $xformH5PageBg: #f1f5fb;
 
   .el-form-item {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
 
     > .el-form-item__label,
     > .el-form-item__content {
@@ -263,8 +265,14 @@ $xformH5PageBg: #f1f5fb;
 .xform-h5 .table-layout.table-d-box {
   /* 解除 w1~w4 的 PC 死宽。设计器里显式配了 cellWidth 的单元格走内联
      style="width:xx !important"，优先级最高，不受这条影响，按配置生效。 */
-  > tbody > tr > td.table-cell {
-    width: auto !important;
+  > tbody > tr {
+    &:last-child{
+      .field-wrapper.h5-field .el-form-item{border-bottom:none}
+    }
+    > td.table-cell {
+      width: auto !important;
+      border:none !important
+    }
   }
 
   /* 一行两列（两个 td.w1 并排）时，左列的值右对齐后正好停在右列的左边界上，
@@ -272,23 +280,24 @@ $xformH5PageBg: #f1f5fb;
      对齐 bill_setting form-table 的处理：它用 `th:nth-child(3){padding-left:12px}`
      让第二列的标签让出间隔。这里把间隔加在单元格上而不是标签上 —— 标签有 80px
      定宽，加内边距会挤掉字数（全局 box-sizing 是 border-box）。 */
-  > tbody > tr > td.table-cell + td.table-cell {
+  > tbody > tr > td.table-cell + td.table-cell .el-form-item{
     padding-left: 12px;
   }
 
   td.table-cell .field-wrapper.h5-field .el-form-item {
     /* 断链场景下 element 默认标签是右对齐的，这里兜住 */
+    border-bottom:solid 1px $xformH5RowBorder;
     > .el-form-item__label {
       text-align: left !important;
+      font-size: $xformH5Size;
     }
 
     > .el-form-item__content {
       width: auto !important; // 压对手二的 !important；本方 (0,7,1)+!important
-      text-align: right;
-
+       text-align: right;
       /* 对手一 (0,3,2)，本方 (0,8,2) */
       span {
-        text-align: right;
+        font-size:$xformH5Size;
       }
     }
   }
@@ -408,11 +417,12 @@ $xformH5PageBg: #f1f5fb;
   /* container-item-wrapper 那层，高度要能传下去 */
   .container-wrapper {
     height: 100%;
+    width:100%;
   }
 
   .h5-detail-wrap {
-    display: flex;
-    flex-direction: column;
+    //display: flex;
+    //flex-direction: column; 弹框在里面会有问题
     height: 100%;
     min-height: 0; // 允许在 flex 父级下收缩
     /* 压掉 style.scss:13765 的 padding-bottom:68px（那是给 fixed 底栏让位用的） */
@@ -421,7 +431,7 @@ $xformH5PageBg: #f1f5fb;
 
   .h5-header {
     flex: none;
-    height: $xformH5HeaderHeight;
+    height: $xformH5HeaderHeight !important;
     line-height: $xformH5HeaderHeight;
   }
 
@@ -436,7 +446,9 @@ $xformH5PageBg: #f1f5fb;
        卡片是 margin:12px 8px 0（只有上间距），末尾这一格只能由滚动区补。
        取 12px 与卡片间距同口径。 */
     padding-bottom: 12px;
+    height:calc(100% - $xformH5FooterHeight - $xformH5HeaderHeight) !important;
 
+    -webkit-overflow-scrolling:touch;
     /* ★ 字段卡片那组的高度必须由内容决定。
        detail-h5-item.vue 的 scoped 样式里有一条从设计器画布抄来的
        `.grid-container .form-widget-list { height: 100% }`，而该组件的根节点
@@ -449,12 +461,13 @@ $xformH5PageBg: #f1f5fb;
     > .form-widget-list {
       height: auto;
     }
+
   }
 
   .h5-fixed-bottom-btns {
     /* 压掉 style.scss:10246 附近的 position:fixed 与 height:56px!important。
        单行固定高：超出三个的按钮进图标下拉，不换行。 */
-    position: static !important;
+    //position: static !important;
     flex: none;
     height: $xformH5FooterHeight !important;
   }
@@ -565,60 +578,16 @@ $xformH5PageBg: #f1f5fb;
   }
 }
 
-/* ============ 明细详情弹框：铺满视口 ============ */
-/* 这个弹框是 :modal="false"（无遮罩），高度又只由内容撑开，
-   于是底部动作栏（通过/驳回/中断）会从弹框下方露出来，看着像两层界面。
-   让它铺满一屏盖住底栏。作用域限定在 .xform-h5 内，不影响 bill_setting
-   那边同样用 .h5view-dialog 的弹框（弹框未 append-to-body，DOM 就在本作用域里）。 */
-.xform-h5 .el-dialog__wrapper .el-dialog.h5view-dialog {
-  margin: 0 !important;
-  /* 同上：手机浏览器地址栏占位时 100vh 比可视区高，弹框底部的「关闭」会被顶出屏幕。
-     dvh 打头、vh 兜底，见块 G 的说明。 */
-  height: 100vh;
-  height: 100dvh;
-  display: flex;
-  flex-direction: column;
-  border-radius: 0;
-
-  > .el-dialog__body {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* 内容区的 height 是模板里的内联样式，只能用 !important 压掉，
-     改由上面的 flex 决定高度 */
-  .cont {
-    height: auto !important;
-  }
-
-  /* 底部「关闭」：与底部动作栏同款胶囊，铺满一行 */
-  > .el-dialog__footer {
-    flex: none;
-    padding: 8px 13px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
-
-    .button-sty,
-    .el-button {
-      width: 100%;
-      height: 40px;
-      border-radius: 30px;
-      padding: 0;
-      font-size: 13px;
-
-      i {
-        margin-right: 3px;
-      }
-    }
-  }
-}
 
 /* ============ 明细行的「查看」角标 ============ */
 /* 对齐 bill_setting 的 .pro-item .t::after：主色淡底圆钮 + 右向箭头，
    提示这一行可以点进详情。与 itemStyle 无关，明细行一律有。
    对手 .h5-list-box .item (0,2,0)；本方 (0,3,0)。 */
 .xform-h5 .h5-list-box .item {
+  margin-bottom:12px;
+  &:last-child{
+    margin-bottom:12px;
+  }
   .h5-item-arrow {
     position: absolute;
     right: 12px;
@@ -690,11 +659,14 @@ $xformH5PageBg: #f1f5fb;
      列间也是 14px，省出来的 14px 全给值。 */
   padding-left: 7px;
   padding-right: 7px;
+  padding-bottom:0;
+  font-size: 13px;
 }
 
 .xform-h5 .h5-list-box .item .t2 > dl {
   padding-left: 7px;
   padding-right: 7px;
+  margin-top:0;
   > div {
     align-items: flex-start; // 值折行时标签跟着顶对齐，别居中
   }
@@ -710,7 +682,8 @@ $xformH5PageBg: #f1f5fb;
   > div > dd {
     flex: 1;
     min-width: 0; // 不写这行，长值会撑破行而不是折行
-    text-align: right;
+    //text-align: right;
+    margin: 0;
     word-break: break-word;
     color: #323232; // 值加深、标签留灰，同块 C 的 #808080 / 默认色关系
   }
@@ -744,6 +717,7 @@ $xformH5PageBg: #f1f5fb;
 /* dd 里是真控件的那份（「明细详情」弹框，list-h5-item.vue:478）。
    列表行本身只出纯文本，这一段只对弹框生效。 */
 .xform-h5 .h5-list-box .item .t2 > dl > div > dd {
+  margin:0;
   /* 压 style.scss:14112 的 width:calc(100vw - 159px)，本方 (0,5,2) > (0,4,1) */
   .field-wrapper.h5-field {
     display: block;
@@ -771,32 +745,9 @@ $xformH5PageBg: #f1f5fb;
 
   .field-wrapper.h5-field .el-form-item > .el-form-item__content {
     margin-left: 0 !important;
-    text-align: right;
   }
 }
 
-/* 「明细详情」弹框里那份 list 保持一行一个：那里的 dd 放的是真控件（输入框、
-   选择器、附件），塞进半宽格子就没法用了；它也是详情视角，不需要压缩行数。
-   本方 (0,6,1) > 上面两列那条 (0,4,1)。 */
-.xform-h5 .h5view-dialog .h5-list-box .item .t2 > dl {
-  width: 100%;
-}
-
-/* 弹框那份 list 另有一条更狠的写死宽度：
-   `body .grid-height .dialog-style.h5view-dialog .el-dialog__body > .cont >
-    .h5-list-box .t2 dl .field-wrapper` (0,8,2)（style.scss:3861），
-   上面那条 (0,5,2) 压不过，必须单独补到 (0,9,1)。 */
-.xform-h5
-  .dialog-style.h5view-dialog
-  .el-dialog__body
-  > .cont
-  > .h5-list-box
-  .item
-  .t2
-  > dl
-  .field-wrapper {
-  width: auto;
-}
 
 /* ============ 块 I：明细行卡片皮肤（list-h5 的 itemStyle=card） ============ */
 /* 现状 .h5-list-box .item（style.scss:14029）已经是白底+radius8+1px边框+左侧竖条的卡片，
@@ -867,7 +818,7 @@ $xformH5PageBg: #f1f5fb;
 
   > b {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 400;
     word-break: break-word; // 主字段常是长编码，别撑破卡片
   }
 
@@ -939,7 +890,7 @@ $xformH5PageBg: #f1f5fb;
     display: block !important;
     float: none !important;
     width: 100%;
-    margin: 0 0 8px;
+    margin: 0 0 12px;
   }
 
   .upload-box {
@@ -958,7 +909,7 @@ $xformH5PageBg: #f1f5fb;
     padding: 8px;
     overflow: visible;
     background: #fff;
-    border: solid 1px #f0f1f1;
+    border: solid 1px $xformH5RowBorder;
     border-radius: 10px;
     transition: none; // element 的 item 有 transform 过渡，行式下没意义还会闪
 
@@ -1130,15 +1081,21 @@ $xformH5PageBg: #f1f5fb;
    只作用于 el-button 的直接子 i（element 把 icon 渲染成按钮的第一个子元素）。
    底栏「更多」下拉的触发器是裸 <i class="h5-more-icon">、不在 el-button 里，不受影响。 */
 .xform-h5 {
-  .pop-box .el-button > i,
-  .pop-tipsBox .el-button > i,
-  .pop-screen-box .el-button > i,
   .h5-detail-wrap .h5-fixed-bottom-btns .el-button > i,
   .el-dialog.h5view-dialog > .el-dialog__footer .el-button > i {
     display: none;
   }
 }
 
+/* 同上，但这两条不能收在 .xform-h5 里：.h5-pop-dialog 那 5 个弹层、
+   .h5-pop-tips 那 5 个确认框都已挂到 document.body 下。
+   .h5-pop-dialog 里再弹的高级筛选抽屉（.pop-screen-box）被后代选择器一并覆盖，
+   不必单列 —— 也正好不会误伤手写移动页里那些独立使用的 .pop-screen-box。 */
+.h5-pop-dialog .el-button > i,
+.pop-tipsBox.h5-pop-tips .el-button > i {
+  display: none;
+}
+
 /* ============ 块 L：移动版流程（wf）面板 ============ */
 /* 来源：resources/css/h5.scss —— 那份不随包发布、xform 引不到，故把
    components/mobile/wf/content.vue 实际用到的类搬进包内。
@@ -1162,8 +1119,8 @@ $xformH5PageBg: #f1f5fb;
 
     > .t,
     .m2 .t {
-      color: $baseColor;
-      margin-top: 16px;
+      color: #666;
+      padding:8px;
 
       &:before {
         content: "";
@@ -1283,63 +1240,222 @@ $xformH5PageBg: #f1f5fb;
     }
   }
 
-  /* ---- 全屏弹层（.pop-box）---- */
-  /* 用这个根类的一共 7 个：流程图预览、任务情况预览（这两个是 mobile/wf/content.vue
-     模板里内联写的，见该文件 showPreviewDialog / showRenwuDialog 两段）、
-     选用户 views/mobile/user/user/dialog.vue、加签 addTaskUserdialog、减签
-     deleteTaskUserDialog、催办 urgingDialog、修改候选人 setCandidateDialog、
-     修改单据 wfModifyDialog。它们共用同一批类名，所以一次搬齐。
 
-     原规则整段嵌在 resources/css/h5.scss 的 `.h5-box` 下，而 xform H5 的根类是
-     .xform-h5、全项目没有任何 .vue 输出过 h5-box —— 一条都命中不了，表现是列表
-     退化成裸文字、搜索行和已选区完全没有版式。（对比 .pop-tipsBox 是顶层选择器，
-     所以通过/驳回/转办那几个小确认框看着正常，一点「选用户」就裸。）
 
-     骨架高度不抄原文的 calc(100vh - 102px / 138px / 151px) 那套（值随有没有搜索行
-     而变，脆），一律 flex + min-height:0，与块 A、块 G 同口径。content.vue 那两处
-     .flex 上的内联 height:calc(100vh - 38px) 不用管：flex-basis:0% 会接管主轴尺寸。 */
-  .pop-box {
+}
+
+/* ---- 确认/表单提示框（通过、驳回、中断、转办、加签）---- */
+/* ★ 顶层选择器，不能收回 .xform-h5 里：这 5 个已改走 v-append-to-body，
+   节点在 document.body 下，带 .xform-h5 前缀的规则一条都命中不了。
+   与上面的 .h5-pop-dialog 同一个道理。
+
+   ★ 但也不能只写 .pop-tipsBox：confirmDialog / baseAlert / errorMsg 的移动端分支
+   用的是同一个类名，而且它们本来就挂在 body 上。只写 .pop-tipsBox（0,1,0）会和
+   各应用 resources/css/h5.scss 里那条同名顶层规则拼加载顺序，把那三个的样子也一起
+   改掉。所以多挂一个 .h5-pop-tips 作锚点，选择器权重（0,2,0）与改造前的
+   `.xform-h5 .pop-tipsBox` 完全相同，命中范围也仍然只有这 5 个。
+
+   注意：.icon 沿用 resources/images 下的图标，`~@/` 在消费应用里解析到它自己的
+   src/resources/images —— 该目录同样不在 package.json files 内，属隐式依赖。
+   消费应用现有的 h5.scss 已引用同一批图，故风险可控；若要彻底解耦可换字体图标。 */
+.pop-tipsBox.h5-pop-tips {
+  position: relative;
+  &:before {
+    content: "";
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    background: #f6f6f6;
-    z-index: 99;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 998;
+  }
 
-    /* 骨架：标题栏 / 搜索行 / 底部按钮条 flex:none，中间那段独占剩余高度并内部滚动 */
-    > div {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
+  > div {
+    position: fixed;
+    top: 24%;
+    left: 32px;
+    right: 32px;
+    box-shadow: 0 0 14px rgba(0, 0, 0, 0.16);
+    border-radius: 18px;
+    padding: 68px 16px 18px;
+    text-align: center;
+    z-index: 999;
+    background-color: #fff;
+    background-size: 100% auto;
+    border: solid 2px #fff;
+
+    .icon {
+      background: url(~@/resources/images/icon-tips.png) no-repeat center;
+      background-size: cover;
+      position: absolute;
+      top: -19px;
+      left: 50%;
+      margin-left: -34px;
+      width: 68px;
+      height: 68px;
+      border-radius: 50%;
+      border: solid 2px #fff;
     }
 
-    .header-box {
-      flex: none;
-      position: relative;
-      background-color: #fff;
-      text-align: center;
-      height: $xformH5HeaderHeight;
-      line-height: $xformH5HeaderHeight;
-      font-size: 16px;
-      color: #212121;
-      border-bottom: solid 1px #f1f6fc;
+    .cont {
+      padding: 0 0 18px;
 
-      .back {
-        position: absolute;
-        right: 14px;
-        top: 50%;
-        margin-top: -10px;
-        line-height: 20px;
-        font-size: 20px;
+      .name {
+        font-weight: 600;
+        font-size: 18px;
+        margin-bottom: 24px;
       }
 
-      /* 「修改单据 — 节点：xx」这类副标题 */
-      > span {
-        margin: 0 8px;
+      /* max-height + overflow:auto 是给「自定义确认文案」这类可能很长的内容留的
+         （提醒内容、脚本里配的提示都走这里）。但确认框里多数只有一行短句，
+         真机 WebView 又是经典滚动条（不像桌面那样会自动淡出），于是「您确定要
+         中断流程吗？」这种一行字旁边也挂着一条灰色滚动条。
+         保留可滚动（长文案照样能滑），只把滚动条本身藏掉 —— 移动端本来就该是
+         无痕滚动。 */
+      .txt,
+      .txt2 {
+        overflow: auto;
+        word-break: break-word;
+        scrollbar-width: none; // Firefox
+        -ms-overflow-style: none; // 旧 Edge/IE
+        text-align:left;
+        font-size:13px;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      .txt {
+        max-height: 100px;
       }
+
+      .txt2 {
+        max-height: 200px;
+      }
+
+      .form-box {
+        border: solid 1px #dcdcdc;
+        padding: 0 12px 10px;
+        border-radius: 10px;
+        margin-top: -8px;
+        text-align:left;
+        .el-form-item .el-form-item__label{
+          padding-bottom:0;
+        }
+        .line {
+          border: solid 1px #e8e8e8;
+        }
+        .el-input{width:100% !important}
+      }
+    }
+
+    .btns {
+      display: flex;
+
+      .btn {
+        flex: 1;
+        height: 40px;
+        border-radius: 12px;
+
+        &.el-button--primary.is-plain {
+          border-color: $baseColor;
+        }
+      }
+    }
+  }
+
+  &.error > div .icon {
+    background-image: url(~@/resources/images/icon-error.png);
+    border-color: #fff;
+  }
+}
+
+/* ============ 页面底色 ============ */
+.xform-h5 .h5-detail-wrap {
+  background: $xformH5PageBg;
+}
+
+/* ---- 全屏弹层（.h5-pop-dialog）---- */
+/* 用这个根类的一共 5 个，都在 components/mobile/wf/ 下：选用户 selectUserDialog、
+   加签 addTaskUserdialog、减签 deleteTaskUserDialog、催办 urgingDialog、
+   修改候选人 setCandidateDialog。它们共用同一批类名，所以一次搬齐。
+   （流程图预览、任务情况预览是 content.vue 模板里内联写的 el-dialog，走的是
+   .h5view-dialog，不在这一段。同目录的 wfModifyDialog 仍是 .pop-box 就地渲染——
+   H5 不需要「修改单据」，那个只从手写移动页进，样式也走各应用自己的 h5.scss。）
+
+   ★ 这一段必须是顶层选择器，不能收进 .xform-h5 里。这 5 个已经改成
+   el-dialog + append-to-body，节点挂在 document.body 下、不在 .xform-h5 子树里，
+   写成 `.xform-h5 .pop-box` 一条都命中不了 —— 与它们最初挂在从不存在的 `.h5-box`
+   下、表现为「列表退化成裸文字」是同一类事故。同理见下方 .h5view-dialog。
+
+   骨架高度不抄原文的 calc(100vh - 102px / 138px / 151px) 那套（值随有没有搜索行
+   而变，脆），一律 flex + min-height:0，与块 A、块 G 同口径。content.vue 那两处
+   .flex 上的内联 height:calc(100vh - 38px) 不用管：flex-basis:0% 会接管主轴尺寸。 */
+.el-dialog.h5-pop-dialog {
+  /* 外层 .el-dialog__wrapper 已经是铺满视口的 fixed，这里用 absolute 贴着它定位，
+     几何与改造前的 `position:fixed; top:38px; bottom:55px` 完全一致：
+     顶部让出 H5 页头、底部让出审批动作栏。
+     z-index 不再手写 —— 由 element 的 PopupManager 给 wrapper 递增分配，
+     改造前 99 / 内联 zIndex 两套值互相打架的问题一并消掉。 */
+  position: absolute;
+  top: 38px;
+  right: 0;
+  bottom: 55px;
+  left: 0;
+  width: 100% !important;
+  margin: 0 !important;
+  background: #f6f6f6;
+  border-radius: 0;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+
+  /* 标题和关闭按钮都在自己的 .header-box 里，el-dialog 自带的表头整条不要 */
+  > .el-dialog__header {
+    display: none;
+  }
+
+  /* body 顶掉 element 的 30px 20px 内边距，只当骨架的承载层 */
+  > .el-dialog__body {
+    flex: 1;
+    min-height: 0;
+    padding: 0;
+    color: inherit;
+    font-size: inherit;
+  }
+
+  /* 骨架：标题栏 / 搜索行 / 底部按钮条 flex:none，中间那段独占剩余高度并内部滚动 */
+  > .el-dialog__body > div {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .header-box {
+    flex: none;
+    position: relative;
+    background-color: #fff;
+    text-align: center;
+    height: $xformH5HeaderHeight;
+    line-height: $xformH5HeaderHeight;
+    font-size: 16px;
+    color: #212121;
+    border-bottom: solid 1px #f1f6fc;
+
+    .back {
+      position: absolute;
+      right: 14px;
+      top: 50%;
+      margin-top: -10px;
+      line-height: 20px;
+      font-size: 20px;
     }
 
+    /* 「修改单据 — 节点：xx」这类副标题 */
+    > span {
+      margin: 0 8px;
+    }
     /* 搜索行（选用户 / 加签）：输入框 + 右侧「高级筛选」 */
     .search-H5box {
       flex: none;
@@ -1431,562 +1547,633 @@ $xformH5PageBg: #f1f5fb;
       overflow-y: auto;
     }
 
-    .flex {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-height: 0;
+  }
 
-      /* 可滚动的候选列表 */
-      .checkbox-all_list {
-        flex: 1;
-        min-height: 0;
-        /* 只放开纵向。写成 overflow:auto 时横向也可滚，卡片里一旦有超长内容
-           （用户资料的「地址」字段存的是一整条图片 URL）就会拖出一条横向滚动条。 */
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: 0 12px;
+  /* 搜索行（选用户 / 加签）：输入框 + 右侧「高级筛选」 */
+      .search-H5box {
+        flex: none;
+        position: relative;
+        display: flex;
+        padding: 8px 16px 0;
 
-        .order-item {
+        .txt {
+          flex: 1;
+          position: relative;
+          height: 38px;
           background: #fff;
+          border: solid 1px #e4e4e4;
+          border-radius: 38px 0 0 38px;
 
-          .is-checked {
-            position: absolute;
-            right: 0;
-            top: 0;
-            width: 62px;
-            height: 22px;
-            line-height: 20px;
-            text-align: center;
+          .el-input {
+            width: 100% !important;
+          }
+
+          .el-input__inner {
+            height: 38px !important;
+            width: 100%;
+            border: none;
+            background: none;
+            line-height: 38px;
+            padding-left: 39px;
             font-size: 13px;
-            color: #fff;
-            background: #e2e2e2;
-            border: solid 1px #dcdcdc;
-            border-radius: 0 8px 0 6px;
+          }
 
-            i {
-              margin-right: 3px;
-              font-size: 13px;
-            }
+          /* 放大镜挪到左侧（element 默认在右） */
+          .el-input__suffix {
+            position: absolute;
+            left: 12px;
+            right: inherit;
+            top: 7px;
+            width: 20px;
+            transform: inherit !important;
           }
 
-          &.on {
-            border: solid 1px $baseColor;
+          .el-input-group__append {
+            border: none;
+            background: none;
 
-            .is-checked {
-              border-color: $baseColor;
+            .el-button {
+              border: none;
               background: $baseColor;
+              color: #fff;
+              width: 53px;
+              height: 30px;
+              padding: 0;
+              position: absolute;
+              right: 4px;
+              top: 4px;
+              /* element 给 .el-input-group__append .el-button 定了 margin:-10px -20px，
+                 绝对定位后这对负边距会把按钮整体往右上顶出去（实测右溢 16px、上溢
+                 5px，正好压在「高级筛选」上）。原文是用 right:26px/top:14px 反向补
+                 偿的，这里直接清零，right/top 才是所见即所得。 */
+              margin: 0;
+              border-radius: 30px;
+              outline: none;
+              font-size: 13px;
             }
           }
         }
-      }
 
-      /* 已选区（底部固定，不滚） */
-      .checkbox-all {
-        flex: none;
-        position: relative;
-        min-height: 80px;
-        padding: 0 12px 8px;
-        background: #fff;
-        box-shadow: 0 -3px 4px rgba(0, 0, 0, 0.06);
-
-        .ca-t {
-          margin: 8px 0;
-          font-size: 14px;
-          font-weight: 600;
-        }
-
-        .ca-c span {
-          display: inline-block;
-          position: relative;
-          height: 24px;
-          line-height: 24px;
-          padding: 0 28px 0 2px;
-          margin: 4px 10px 4px 0;
+        .icon-screen {
+          flex: none;
+          height: 38px;
+          line-height: 38px;
+          padding: 0 10px;
           font-size: 13px;
           color: $baseColor;
-          border: solid 1px $baseColor;
-          border-radius: 4px;
+          background: transparentize($baseColor, 0.88);
+          border: solid 1px #e4e4e4;
+          border-left: none;
+          border-radius: 0 10px 10px 0;
 
           i {
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 24px;
-            height: 24px;
-            line-height: 24px;
-            text-align: center;
-            background: transparentize($baseColor, 0.91);
+            margin-right: 5px;
+            font-size: 14px;
           }
         }
       }
 
-      .form-box {
+      /* 修改单据：表单直接挂在骨架下，不套 .flex */
+      > .el-dialog__body > div > .form-box {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+      }
+
+      .flex {
         display: flex;
         flex-direction: column;
         flex: 1;
-        overflow: hidden;
-
-        .tit {
-          margin: 8px 12px;
-          background: rgba(51, 106, 153, 0.1);
-          border-radius: 11px;
-          padding: 10px 12px;
-          font-size: 13px;
-          color: $baseColor;
+        min-height: 0;
 
-          &:before {
-            content: "";
-            width: 5px;
-            height: 5px;
-            background: $baseColor;
-            border-radius: 50%;
-            vertical-align: middle;
-            margin-right: 5px;
-            display: inline-block;
-          }
+        /* 可滚动的候选列表 */
+        .checkbox-all_list {
+          flex: 1;
+          min-height: 0;
+          /* 只放开纵向。写成 overflow:auto 时横向也可滚，卡片里一旦有超长内容
+             （用户资料的「地址」字段存的是一整条图片 URL）就会拖出一条横向滚动条。 */
+          overflow-y: auto;
+          overflow-x: hidden;
+          padding: 0 12px;
 
-          > span {
-            vertical-align: middle;
-          }
-        }
-      }
-    }
+          .order-item {
+            background: #fff;
 
-    /* 按钮口径与块 H 的底部动作栏、块 G 的明细详情弹框页脚保持一致（40px 高胶囊）。
-       原文搬过来时是 border-radius:14px —— 那是手写移动页 resources/css/h5.scss 的
-       口径，跟包内基线不是一套，同一屏里会出现两种按钮，故改齐。
-       左右 margin 保留：选用户/加签这些是两个按钮并排，需要中间那道缝。 */
-    .fixed-bottom-btns {
-      flex: none;
-      background: #f6f6f6;
-      display: flex;
-      padding: 4px 8px;
+            .is-checked {
+              position: absolute;
+              right: 0;
+              top: 0;
+              width: 62px;
+              height: 22px;
+              line-height: 20px;
+              text-align: center;
+              font-size: 13px;
+              color: #fff;
+              background: #e2e2e2;
+              border: solid 1px #dcdcdc;
+              border-radius: 0 8px 0 6px;
+
+              i {
+                margin-right: 3px;
+                font-size: 13px;
+              }
+            }
 
-      .btn {
-        flex: 1;
-        margin: 4px 6px;
-        height: 40px;
-        border-radius: 30px;
-        padding: 0;
-        font-size: 13px;
+            &.on {
+              border: solid 1px $baseColor;
 
-        i {
-          margin-right: 3px;
+              .is-checked {
+                border-color: $baseColor;
+                background: $baseColor;
+              }
+            }
+          }
         }
-      }
-    }
 
-    /* 列表里的一张候选卡片。原文挂在 .h5-box 下（不在 .pop-box 段内），
-       xform 里只有这批弹层用得到，就收进来。 */
-    .order-item {
-      position: relative;
-      border: solid 1px #f0f1f1;
-      border-radius: 12px;
-      padding: 8px 10px;
-      margin: 8px 0;
-
-      /* 左侧那道竖条 */
-      &:before {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 6px;
-        width: 3px;
-        height: 50px;
-        background: $baseColor;
-        border-radius: 5px;
-      }
+        /* 已选区（底部固定，不滚） */
+        .checkbox-all {
+          flex: none;
+          position: relative;
+          min-height: 80px;
+          padding: 0 12px 8px;
+          background: #fff;
+          box-shadow: 0 -3px 4px rgba(0, 0, 0, 0.06);
 
-      /* 卡片里放的是用户资料原值，可能出现超长且无空格的串（「地址」字段实际存的
-         是一整条图片 URL）。默认不允许在非空白处断行，这种串会把卡片整体撑宽、
-         连带拖出横向滚动条，所以这里统一允许任意位置断行。 */
-      .t1,
-      .t2 {
-        word-break: break-all;
-        overflow-wrap: anywhere;
-      }
+          .ca-t {
+            margin: 8px 0;
+            font-size: 14px;
+            font-weight: 600;
+          }
 
-      .t1 {
-        margin-bottom: 6px;
+          .ca-c span {
+            display: inline-block;
+            position: relative;
+            height: 24px;
+            line-height: 24px;
+            padding: 0 28px 0 2px;
+            margin: 4px 10px 4px 0;
+            font-size: 13px;
+            color: $baseColor;
+            border: solid 1px $baseColor;
+            border-radius: 4px;
 
-        /* 模板里恒有 <i class="icon">（原文设了一圈头像样式后又 display:none，
-           等于留着没用）。照原样隐藏，避免哪天有人给裸 .icon 加了全局规则时冒出来。 */
-        .icon {
-          display: none;
+            i {
+              position: absolute;
+              top: 0;
+              right: 0;
+              width: 24px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              background: transparentize($baseColor, 0.91);
+            }
+          }
         }
 
-        span {
-          vertical-align: middle;
-          margin: 0 5px 0 0;
-        }
-      }
+        .form-box {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow: hidden;
 
-      .t2 {
-        font-size: 11px;
-        color: rgba(128, 128, 128, 0.8);
+          .tit {
+            margin: 8px 12px;
+            background: rgba(51, 106, 153, 0.1);
+            border-radius: 11px;
+            padding: 10px 12px;
+            font-size: 13px;
+            color: $baseColor;
 
-        p {
-          min-width: 50%;
-          /* 没有 max-width 时，inline-block 会被里面的长串顶到超出卡片宽度 */
-          max-width: 100%;
-          margin-bottom: 4px;
-          display: inline-block;
-          vertical-align: top;
+            &:before {
+              content: "";
+              width: 5px;
+              height: 5px;
+              background: $baseColor;
+              border-radius: 50%;
+              vertical-align: middle;
+              margin-right: 5px;
+              display: inline-block;
+            }
+
+            > span {
+              vertical-align: middle;
+            }
+          }
         }
       }
 
-      /* 修改候选人：卡片内的「设置候选人」按钮 */
-      .btns {
-        text-align: right;
-        margin-top: 4px;
+      /* 按钮口径与块 H 的底部动作栏、块 G 的明细详情弹框页脚保持一致（40px 高胶囊）。
+         原文搬过来时是 border-radius:14px —— 那是手写移动页 resources/css/h5.scss 的
+         口径，跟包内基线不是一套，同一屏里会出现两种按钮，故改齐。
+         左右 margin 保留：选用户/加签这些是两个按钮并排，需要中间那道缝。 */
+      .fixed-bottom-btns {
+        flex: none;
+        background: #f6f6f6;
+        display: flex;
+        padding: 4px 8px;
 
         .btn {
-          height: 28px;
-          padding: 0 10px;
+          flex: 1;
+          margin: 4px 6px;
+          height: 40px;
+          border-radius: 30px;
+          padding: 0;
           font-size: 13px;
+
+          i {
+            margin-right: 3px;
+          }
         }
       }
-    }
-  }
-
-  /* ---- 高级筛选抽屉（h5SearchDialog，从 .pop-box 里再弹一层）---- */
-  .pop-screen-box {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 99;
 
-    &:before {
-      content: "";
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.3);
-    }
-
-    > div {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: 80%;
-      background: #fff;
-
-      .header-box {
-        flex: none;
+      /* 列表里的一张候选卡片。原文挂在 .h5-box 下（不在 .pop-box 段内），
+         xform 里只有这批弹层用得到，就收进来。 */
+      .order-item {
         position: relative;
-        text-align: center;
-        height: $xformH5HeaderHeight;
-        line-height: $xformH5HeaderHeight;
-        font-size: 16px;
-        color: #212121;
-        border-bottom: solid 1px #eee;
-
-        .back {
+        border: solid 1px #f0f1f1;
+        border-radius: 12px;
+        padding: 8px 10px;
+        margin: 8px 0;
+
+        /* 左侧那道竖条 */
+        &:before {
+          content: "";
           position: absolute;
-          right: 14px;
-          top: 50%;
-          margin-top: -10px;
-          line-height: 20px;
-          font-size: 20px;
+          left: 0;
+          top: 6px;
+          width: 3px;
+          height: 50px;
+          background: $baseColor;
+          border-radius: 5px;
         }
-      }
 
-      .p-cont {
-        flex: 1;
-        min-height: 0;
-        overflow-y: auto;
-        padding: 10px 16px 0;
-
-        .txt {
-          width: 100%;
+        /* 卡片里放的是用户资料原值，可能出现超长且无空格的串（「地址」字段实际存的
+           是一整条图片 URL）。默认不允许在非空白处断行，这种串会把卡片整体撑宽、
+           连带拖出横向滚动条，所以这里统一允许任意位置断行。 */
+        .t1,
+        .t2 {
+          word-break: break-all;
+          overflow-wrap: anywhere;
         }
 
-        .el-form .el-form-item {
-          margin-bottom: 4px;
+        .t1 {
+          margin-bottom: 6px;
 
-          .el-form-item__label {
-            padding: 0;
-            margin: 0;
-            font-size: 13px;
+          /* 模板里恒有 <i class="icon">（原文设了一圈头像样式后又 display:none，
+             等于留着没用）。照原样隐藏，避免哪天有人给裸 .icon 加了全局规则时冒出来。 */
+          .icon {
+            display: none;
           }
 
-          .el-input {
-            width: 100% !important;
-            height: 38px;
-            border-radius: 4px;
+          span {
+            vertical-align: middle;
+            margin: 0 5px 0 0;
           }
+        }
 
-          .el-input__inner {
-            font-size: 13px;
+        .t2 {
+          font-size: 11px;
+          color: rgba(128, 128, 128, 0.8);
+
+          p {
+            min-width: 50%;
+            /* 没有 max-width 时，inline-block 会被里面的长串顶到超出卡片宽度 */
+            max-width: 100%;
+            margin: 4px 0;
+            display: inline-block;
+            vertical-align: top;
+            font-size:13px;
           }
         }
-      }
 
-      .p-btn {
-        flex: none;
-        display: flex;
-        padding: 8px;
+        /* 修改候选人：卡片内的「设置候选人」按钮 */
+        .btns {
+          text-align: right;
+          margin-top: 4px;
 
-        .btn {
-          flex: 1;
-          margin: 0 8px;
-          height: 42px;
-          border-radius: 12px;
+          .btn {
+            height: 28px;
+            padding: 0 10px;
+            font-size: 13px;
+          }
         }
       }
-    }
+
+}
+
+
+/* ---- 高级筛选抽屉（h5SearchDialog，从 .pop-box 里再弹一层）---- */
+.pop-screen-box {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
   }
 
-  /* ---- 任务情况时间轴 ---- */
-  .h5-process-info {
-    font-size: 12px;
-    padding: 12px 16px;
+  > div {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 80%;
     background: #fff;
-    margin: 10px 12px;
-    border-radius: 15px;
 
-    .item {
-      display: flex;
-      line-height: 1.4;
-      padding: 6px 0 8px;
+    .header-box {
+      flex: none;
       position: relative;
+      text-align: center;
+      height: $xformH5HeaderHeight;
+      line-height: $xformH5HeaderHeight;
+      font-size: 16px;
+      color: #212121;
+      border-bottom: solid 1px #eee;
 
-      &:after {
-        content: "";
-        width: 2px;
+      .back {
         position: absolute;
-        background: #e9e9e9;
-        top: 22px;
-        bottom: -10px;
-        left: 76px;
-        z-index: 2;
+        right: 14px;
+        top: 50%;
+        margin-top: -10px;
+        line-height: 20px;
+        font-size: 20px;
       }
+    }
 
-      &:last-child:after {
-        display: none;
-      }
+    .p-cont {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 10px 16px 0;
 
-      .time {
-        color: #666;
-        width: 82px;
-        position: absolute;
-        top: 37px;
-        left: -14px;
-        right: 0;
-        text-align: center;
-        zoom: 0.9;
+      .txt {
+        width: 100%;
       }
 
-      .status {
-        width: 50px;
-        line-height: 16px;
-        padding: 2px 0;
-        height: 100%;
-        text-align: center;
-        border-radius: 22px;
-        vertical-align: middle;
-        background: #fff;
-        border: 1px solid #dcdfe6;
-        color: #606266;
+      .el-form .el-form-item {
+        margin-bottom: 4px;
 
-        &.green {
-          border: solid 1px #acedc9;
-          background: #e7faf0;
-          color: #67c23a;
-        }
-        &.red {
-          border: solid 1px #ffcaca;
-          background: #ffeded;
-          color: #f56c6c;
-        }
-        &.gray {
-          color: #d6d6d6;
-          background: #f4f4f5;
-          border-color: #d3d4d6;
-        }
-        &.orgn {
-          color: #e6a23c;
-          background: #fdf6ec;
-          border-color: #f5dab1;
+        .el-form-item__label {
+          padding: 0;
+          margin: 0;
+          font-size: 13px;
         }
-        &.blue {
-          background-color: transparentize($baseColor, 0.94);
-          color: $baseColor;
-          border: solid 1px transparentize($baseColor, 0.72);
+
+        .el-input {
+          width: 100% !important;
+          height: 38px;
+          border-radius: 4px;
         }
-      }
 
-      .circle {
-        background: $baseColor;
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        border: solid 3px #fff;
-        display: inline-block;
-        margin: 3px 20px;
-        z-index: 9;
+        .el-input__inner {
+          font-size: 13px;
+        }
       }
+    }
 
-      .info {
-        width: calc(100% - 100px);
+    .p-btn {
+      flex: none;
+      display: flex;
+      padding: 8px;
 
-        p {
-          margin: 2px 0;
-          display: block;
+      .btn {
+        flex: 1;
+        margin: 0 8px;
+        height: 42px;
+        border-radius: 12px;
+      }
+    }
+  }
+}
 
-          > span {
-            display: inline-block;
-            min-width: 50%;
+.el-dialog.h5view-dialog {
+    margin: 0 !important;
+    /* 同上：手机浏览器地址栏占位时 100vh 比可视区高，弹框底部的「关闭」会被顶出屏幕。
+       dvh 打头、vh 兜底，见块 G 的说明。 */
+    height: calc(100vh - 15px);
+    height: calc(100dvh - 15px);
+    display: flex;
+    flex-direction: column;
+    border-radius: 0;
 
-            &.name {
-              font-weight: 600;
-              width: 100%;
-              margin-bottom: 3px;
-            }
-          }
+    > .el-dialog__body {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    .form-box {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
 
-          &.t {
-            display: flex;
+      .tit {
+        margin: 8px 12px;
+        background: rgba(51, 106, 153, 0.1);
+        border-radius: 11px;
+        padding: 10px 12px;
+        font-size: 13px;
+        color: $baseColor;
 
-            .t1 {
-              min-width: 65px;
-              margin-right: 0;
-              flex: none;
-            }
+        &:before {
+          content: "";
+          width: 5px;
+          height: 5px;
+          background: $baseColor;
+          border-radius: 50%;
+          vertical-align: middle;
+          margin-right: 5px;
+          display: inline-block;
+        }
 
-            span {
-              flex: 1;
-              white-space: pre-line;
-            }
-          }
+        > span {
+          vertical-align: middle;
         }
       }
     }
-  }
-
-  /* ---- 确认/表单提示框（通过、驳回、转办等）---- */
-  /* 注意：.icon 沿用 resources/images 下的图标，`~@/` 在消费应用里解析到它自己的
-     src/resources/images —— 该目录同样不在 package.json files 内，属隐式依赖。
-     消费应用现有的 h5.scss 已引用同一批图，故风险可控；若要彻底解耦可换字体图标。 */
-  .pop-tipsBox {
-    position: relative;
 
-    &:before {
-      content: "";
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: rgba(0, 0, 0, 0.4);
-      z-index: 998;
+    /* 内容区的 height 是模板里的内联样式，只能用 !important 压掉，
+       改由上面的 flex 决定高度 */
+    .cont {
+      height: 100% !important;overflow: auto;
+      .h5-list-box{
+       margin:12px;padding:0 !important;background:none !important;
+       .item{
+         border:none;
+         .t2{
+           dl{
+             font-size:14px;color:#666;
+             dd{
+               margin:0;
+               color:#323232;
+               text-align:right;
+             }
+           }
+         }
+       }
+      }
     }
 
-    > div {
-      position: fixed;
-      top: 24%;
-      left: 32px;
-      right: 32px;
-      box-shadow: 0 0 14px rgba(0, 0, 0, 0.16);
-      border-radius: 18px;
-      padding: 68px 16px 18px;
-      text-align: center;
-      z-index: 999;
-      background-color: #fff;
-      background-size: 100% auto;
-      border: solid 2px #fff;
-
-      .icon {
-        background: url(~@/resources/images/icon-tips.png) no-repeat center;
-        background-size: cover;
-        position: absolute;
-        top: -19px;
-        left: 50%;
-        margin-left: -34px;
-        width: 68px;
-        height: 68px;
-        border-radius: 50%;
-        border: solid 2px #fff;
-      }
+    /* 底部「关闭」：与底部动作栏同款胶囊，铺满一行 */
+    > .el-dialog__footer {
+      flex: none;
+      padding: 8px 13px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
 
-      .cont {
-        padding: 0 0 18px;
+      .button-sty,
+      .el-button {
+        width: 100%;
+        height: 40px;
+        border-radius: 30px;
+        padding: 0;
+        font-size: 13px;
 
-        .name {
-          font-weight: 600;
-          font-size: 18px;
-          margin-bottom: 24px;
+        i {
+          margin-right: 3px;
         }
+      }
+    }
 
-        /* max-height + overflow:auto 是给「自定义确认文案」这类可能很长的内容留的
-           （提醒内容、脚本里配的提示都走这里）。但确认框里多数只有一行短句，
-           真机 WebView 又是经典滚动条（不像桌面那样会自动淡出），于是「您确定要
-           中断流程吗？」这种一行字旁边也挂着一条灰色滚动条。
-           保留可滚动（长文案照样能滑），只把滚动条本身藏掉 —— 移动端本来就该是
-           无痕滚动。 */
-        .txt,
-        .txt2 {
-          overflow: auto;
-          word-break: break-word;
-          scrollbar-width: none; // Firefox
-          -ms-overflow-style: none; // 旧 Edge/IE
-
-          &::-webkit-scrollbar {
-            display: none;
-          }
+    /*步骤条*/
+    /* ---- 任务情况时间轴 ---- */
+    .h5-process-info {
+      font-size: $xformH5Size;
+      padding: 12px 16px;
+      background: #fff;
+      margin: 12px 16px;
+      border-radius: 15px;
+      overflow:auto;
+      width:100%;
+      .item {
+        display: flex;
+        line-height: 1.4;
+        padding: 6px 0 8px;
+        position: relative;
+
+        &:after {
+          content: "";
+          width: 2px;
+          position: absolute;
+          background: #e9e9e9;
+          top: 22px;
+          bottom: -10px;
+          left: 76px;
+          z-index: 2;
         }
 
-        .txt {
-          max-height: 100px;
+        &:last-child:after {
+          display: none;
         }
 
-        .txt2 {
-          max-height: 200px;
+        .time {
+          color: #666;
+          width: 82px;
+          position: absolute;
+          top: 37px;
+          left: -14px;
+          right: 0;
+          text-align: center;
+          zoom: 0.9;
         }
 
-        .form-box {
-          border: solid 1px #dcdcdc;
-          padding: 0 12px;
-          border-radius: 10px;
-          margin-top: -8px;
+        .status {
+          width: 50px;
+          line-height: 16px;
+          padding: 2px 0;
+          height: 100%;
+          text-align: center;
+          border-radius: 22px;
+          vertical-align: middle;
+          background: #fff;
+          border: 1px solid #dcdfe6;
+          color: #606266;
 
-          .line {
-            border: solid 1px #e8e8e8;
+          &.green {
+            border: solid 1px #acedc9;
+            background: #e7faf0;
+            color: #67c23a;
+          }
+          &.red {
+            border: solid 1px #ffcaca;
+            background: #ffeded;
+            color: #f56c6c;
+          }
+          &.gray {
+            color: #d6d6d6;
+            background: #f4f4f5;
+            border-color: #d3d4d6;
+          }
+          &.orgn {
+            color: #e6a23c;
+            background: #fdf6ec;
+            border-color: #f5dab1;
+          }
+          &.blue {
+            background-color: transparentize($baseColor, 0.94);
+            color: $baseColor;
+            border: solid 1px transparentize($baseColor, 0.72);
           }
         }
-      }
 
-      .btns {
-        display: flex;
+        .circle {
+          background: $baseColor;
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+          border: solid 3px #fff;
+          display: inline-block;
+          margin: 3px 20px;
+          z-index: 9;
+        }
 
-        .btn {
-          flex: 1;
-          height: 40px;
-          border-radius: 12px;
+        .info {
+          width: calc(100% - 100px);
+          color:#666;
+          p {
+            margin: 2px 0;
+            display: block;
+
+            > span {
+              display: inline-block;
+              min-width: 50%;
+
+              &.name {
+                font-weight: 600;
+                width: 100%;
+                margin-bottom: 3px;
+                color:#323232;
+              }
+            }
+
+            &.t {
+              display: flex;
 
-          &.el-button--primary.is-plain {
-            border-color: $baseColor;
+              .t1 {
+                min-width: 65px;
+                margin-right: 0;
+                flex: none;
+              }
+
+              span {
+                flex: 1;
+                white-space: pre-line;
+              }
+            }
           }
         }
       }
     }
 
-    &.error > div .icon {
-      background-image: url(~@/resources/images/icon-error.png);
-      border-color: #fff;
-    }
   }
-}
-
-/* ============ 页面底色 ============ */
-.xform-h5 .h5-detail-wrap {
-  background: $xformH5PageBg;
-}