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

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

@@ -1,13 +1,15 @@
 /**
  * xform H5（移动端）版式样式基线
  *
- * 作用域：全部收在 .xform-h5 下。该根类由 form-render/index.vue 依
- * formConfig.layoutType === 'H5' 输出，PC/Pad 版式下整份样式不生效。
+ * 作用域：覆盖规则全部收在 .xform-h5 下。该根类由 form-render/index.vue 依
+ * formConfig.layoutType === 'H5' 输出，PC/Pad 版式下本文件的覆盖不生效。
+ *
+ * 裸类名基线（.h5-detail-wrap / .h5-list-box 等）在同目录 h5-runtime.scss，
+ * 由 Core 入口加载一次。本文件选择器段数必须继续高于那份基线。
  *
  * 为什么放包内而不是 resources/css/style.scss：
- *   package.json 的 files 只含 src/resources/js，不含 src/resources/css ——
- *   style.scss 不随 cloud-web-corejs 发布，消费应用用的是自己那份拷贝。
- *   样式写在这里才能随包走，改一次各应用同步生效。
+ *   style.scss 是消费应用按需加载的历史业务样式，不随 cloud-web-corejs 发布。
+ *   组件样式写在这里才能随包走，改一次各应用同步生效。
  *   详见 docs/2026-08 xform 移动端布局对齐 bill_setting 方案.md 决策 2。
  *
  * ★ 特异度硬约束（改这个文件前必读）：
@@ -19,7 +21,7 @@
  *   每处覆盖点都标了对手所在行号，便于核对。
  */
 
-@import "~@/styles/variables.scss";
+@import "~@base/styles/variables.scss";
 
 /* ============ 块 A：变量 ============ */
 /* 收掉 bill_setting 散在 4 处 5 个值的 calc(100vh - N)，不要抄它的具体数值 */
@@ -27,9 +29,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 +44,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 +54,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 +119,37 @@ $xformH5PageBg: #f1f5fb;
    给它加 12px 不会让任何字段受益，只会把里面的卡片整体往里缩一圈，
    结果是同一屏里 h5-card 里的卡片比流程面板窄 30px、左右对不齐。 */
 .xform-h5 .h5-detail-wrap .h5-item .h5-form-box {
-  padding: 12px;
-
+  /* 12 拆成「容器 6 + 每个子项 6」，外缘仍是 12px，省出来的给列间距，见下面 > * 那条 */
+  padding:0 6px;
+  .item{
+    background: #FFF;
+    border-color: $xformH5RowBorder;
+  }
   > .form-widget-list {
     display: flex;
     flex-wrap: wrap;
+    .h5-header{
+      display: none;
+    }
+
+    /* 半宽两列的列间距（H5 版式最多两列，半宽的 50% 就是上限）。
+       没有这一条时两列是贴着的：值是右对齐的（块 D），左列的值正好停在
+       右列标签的左边界上，读起来就是「值粘在下一个字段名上」——
+       表格路径早就补过同一个问题（块 C3 的
+       `td.table-cell + td.table-cell .el-form-item{padding-left:12px}`），
+       流式路径一直缺。
+
+       ★ 用「容器减半 + 每项补一半」而不是给右列单独加左边距：
+       整宽/半宽混排时，谁是右列在 CSS 里数不出来（半宽跟在整宽后面会另起一行，
+       nth-child 的奇偶与列位对不上）。这个口径与明细卡片块 I2 的 .t2/dl 一致：
+       外缘不变、列间得到 6+6=12px。
+       ★ 打在所有直接子项上而不是只打 .field-wrapper：这一层还会装嵌套容器
+       （h5-table、list-h5 等），只给字段加的话容器会缩到距卡片边 6px、与字段行错开。
+       全局 box-sizing 是 border-box（styles/index.scss），内边距算在 50% 里不会溢出。 */
+    > * {
+      padding-left: 6px;
+      padding-right: 6px;
+    }
   }
 }
 
@@ -153,24 +182,25 @@ $xformH5PageBg: #f1f5fb;
      那条正是块 C1 依赖的前提。 */
   .el-form-item {
     display: flex;
-    align-items: flex-start;
+    /* 单行字段与移动端基本信息表格保持一致：标签和值都落在字段行中线。 */
+    align-items: center;
     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)
      带 text-align:left !important，且把 &:after 设成 display:none；本方 (0,5,0)。 */
   .el-form-item > .el-form-item__label {
+    display: flex !important;
+    align-items: center;
     width: $xformH5LabelWidth;
     padding: 0 5px 0 0;
     margin: 0;
     line-height: 1.4;
     height: auto;
     overflow: hidden;
-    color: #808080;
+    color: #666666;
     text-align: left !important;
 
     /* 标签后自动补冒号，对齐 bill_setting form-table 的 th::after。
@@ -178,13 +208,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 +224,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 +256,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 +290,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 +305,25 @@ $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;
-
+      display: flex;
+      justify-content: flex-end;
       /* 对手一 (0,3,2)，本方 (0,8,2) */
       span {
-        text-align: right;
+        font-size:$xformH5Size;
       }
     }
   }
@@ -408,11 +443,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 +457,7 @@ $xformH5PageBg: #f1f5fb;
 
   .h5-header {
     flex: none;
-    height: $xformH5HeaderHeight;
+    height: $xformH5HeaderHeight !important;
     line-height: $xformH5HeaderHeight;
   }
 
@@ -436,7 +472,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,17 +487,28 @@ $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;
   }
 }
 
+/* ============ 块 G2：底栏没按钮时把那一格还给内容区 ============ */
+/* 底栏一个按钮都没有时 detail-h5-item 不渲染它，并在根节点打 h5-no-bottom-btns。
+   块 G 的 .h5-detail-body 高度是 calc(100% - 底栏 - 标题栏) 硬减出来的，
+   不跟着改的话底部会空出一条 56px 的白带（底栏没了，减法还在）。
+   对手是块 G 里 .xform-h5 .h5-detail-body 那条 (0,2,0) + !important，
+   本方 (0,4,0) + !important，靠段数取胜，不依赖书写顺序。 */
+.xform-h5 .h5-detail-wrap.h5-no-bottom-btns .h5-detail-body {
+  height: calc(100% - $xformH5HeaderHeight) !important;
+}
+
 /* ★ 页面态必须定死一屏，不能用 min-height。
    实测宿主链没有确定高度（#containt 只有背景/圆角，没有 height），
    .designer-view{height:100%} → .xform-h5{height:100%} 一路塌陷成 auto；
@@ -486,6 +535,7 @@ $xformH5PageBg: #f1f5fb;
 }
 
 /* ============ 块 H：底部动作栏（胶囊按钮，单行、最多三个 + 图标下拉） ============ */
+
 .xform-h5 .h5-detail-wrap .h5-fixed-bottom-btns {
   display: flex;
   align-items: center;
@@ -565,60 +615,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 +696,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 +719,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 / 默认色关系
   }
@@ -741,9 +751,12 @@ $xformH5PageBg: #f1f5fb;
   }
 }
 
-/* dd 里是真控件的那份（「明细详情」弹框，list-h5-item.vue:478）。
-   列表行本身只出纯文本，这一段只对弹框生效。 */
+/* dd 里是真控件的那份。列表行本身只出纯文本。
+   明细详情弹框 append-to-body，不在 .xform-h5 下，真正生效的是
+   下方 .el-dialog.h5view-dialog 里同一口径的规则；这段留给弹框
+   万一没挂到 body 时的兜底。 */
 .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 +784,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 +857,7 @@ $xformH5PageBg: #f1f5fb;
 
   > b {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 400;
     word-break: break-word; // 主字段常是长编码，别撑破卡片
   }
 
@@ -892,6 +882,34 @@ $xformH5PageBg: #f1f5fb;
   }
 }
 
+/* ============ 块 I4：明细列表的「更多」尾行 ============ */
+/* 详情里挂的明细列表默认只出 5 条（list-h5-item 的 H5_LIST_COLLAPSE_SIZE），
+   这一行是「更多（N）/ 收起」开关，两态同一行、只换文字与箭头方向，行高不变。
+   它是 .h5-list-box 的最后一个子元素，横向跟着那层 12px 内边距与卡片对齐；
+   卡片自带 12px 下边距（本文件块「查看角标」那段），这里不再叠上边距。
+   无对手规则，(0,3,0) 一条就够。 */
+.xform-h5 .h5-list-box .h5-list-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  border-radius: 8px;
+  background: #fff;
+  //border: solid 1px #eee;
+  color: $baseColor;
+  font-size: 13px;
+  cursor: pointer;
+  margin:-4px 0 8px;
+  .h5-list-more-count {
+    color: #999;
+  }
+
+  i {
+    margin-left: 2px;
+    font-size: 12px;
+  }
+}
+
 /* ============ 块 J：附件（VabUpload 列表的 H5 行式版式） ============ */
 /* 这一块的第一版是照抄 bill_setting/h5.scss 的 74px 方格口径，实测把附件压没了、
    已撤回；那套 DOM 里 .el-upload-list__item-thumbnail 是 item 的直接子元素，而
@@ -939,7 +957,7 @@ $xformH5PageBg: #f1f5fb;
     display: block !important;
     float: none !important;
     width: 100%;
-    margin: 0 0 8px;
+    margin: 0 0 12px;
   }
 
   .upload-box {
@@ -958,8 +976,8 @@ $xformH5PageBg: #f1f5fb;
     padding: 8px;
     overflow: visible;
     background: #fff;
-    border: solid 1px #f0f1f1;
-    border-radius: 10px;
+    border: solid 1px $xformH5RowBorder;
+    border-radius: 8px;
     transition: none; // element 的 item 有 transform 过渡，行式下没意义还会闪
 
     /* 行本体。li 下只有这一个 div，所有子块都在它里面 */
@@ -991,6 +1009,7 @@ $xformH5PageBg: #f1f5fb;
       .el-image {
         width: 100%;
         height: 100%;
+        img{width:56px;height:56px}
       }
 
       img {
@@ -1130,15 +1149,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 +1187,8 @@ $xformH5PageBg: #f1f5fb;
 
     > .t,
     .m2 .t {
-      color: $baseColor;
-      margin-top: 16px;
+      color: #666;
+      padding:8px;
 
       &:before {
         content: "";
@@ -1283,63 +1308,225 @@ $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: 19%;
+    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(~@base/core-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,.el-select{width:100% !important}
+      }
+      .link-underline{
+        border-bottom:solid 1px
+      }
+    }
+
+    .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(~@base/core-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,328 +1618,269 @@ $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;
-
-        .order-item {
-          background: #fff;
-
-          .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;
-            }
-          }
-
-          &.on {
-            border: solid 1px $baseColor;
-
-            .is-checked {
-              border-color: $baseColor;
-              background: $baseColor;
-            }
-          }
-        }
-      }
+  }
 
-      /* 已选区（底部固定，不滚） */
-      .checkbox-all {
+      /* 按钮口径与块 H 的底部动作栏、块 G 的明细详情弹框页脚保持一致（40px 高胶囊）。
+         原文搬过来时是 border-radius:14px —— 那是手写移动页 resources/css/h5.scss 的
+         口径，跟包内基线不是一套，同一屏里会出现两种按钮，故改齐。
+         左右 margin 保留：选用户/加签这些是两个按钮并排，需要中间那道缝。 */
+      .fixed-bottom-btns {
         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;
-        }
+        background: #f6f6f6;
+        display: flex;
+        padding: 4px 8px;
 
-        .ca-c span {
-          display: inline-block;
-          position: relative;
-          height: 24px;
-          line-height: 24px;
-          padding: 0 28px 0 2px;
-          margin: 4px 10px 4px 0;
+        .btn {
+          flex: 1;
+          margin: 4px 6px;
+          height: 40px;
+          border-radius: 30px;
+          padding: 0;
           font-size: 13px;
-          color: $baseColor;
-          border: solid 1px $baseColor;
-          border-radius: 4px;
 
           i {
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 24px;
-            height: 24px;
-            line-height: 24px;
-            text-align: center;
-            background: transparentize($baseColor, 0.91);
+            margin-right: 3px;
           }
         }
       }
 
-      .form-box {
-        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;
-
-          &:before {
-            content: "";
-            width: 5px;
-            height: 5px;
-            background: $baseColor;
-            border-radius: 50%;
-            vertical-align: middle;
-            margin-right: 5px;
-            display: inline-block;
-          }
 
-          > span {
-            vertical-align: middle;
-          }
-        }
-      }
-    }
 
-    /* 按钮口径与块 H 的底部动作栏、块 G 的明细详情弹框页脚保持一致（40px 高胶囊）。
-       原文搬过来时是 border-radius:14px —— 那是手写移动页 resources/css/h5.scss 的
-       口径，跟包内基线不是一套，同一屏里会出现两种按钮，故改齐。
-       左右 margin 保留：选用户/加签这些是两个按钮并排，需要中间那道缝。 */
-    .fixed-bottom-btns {
-      flex: none;
-      background: #f6f6f6;
-      display: flex;
-      padding: 4px 8px;
+}
 
-      .btn {
-        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;
 
-    /* 列表里的一张候选卡片。原文挂在 .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;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+  }
 
-      /* 左侧那道竖条 */
-      &:before {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 6px;
-        width: 3px;
-        height: 50px;
-        background: $baseColor;
-        border-radius: 5px;
-      }
+  > div {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 80%;
+    background: #fff;
 
-      /* 卡片里放的是用户资料原值，可能出现超长且无空格的串（「地址」字段实际存的
-         是一整条图片 URL）。默认不允许在非空白处断行，这种串会把卡片整体撑宽、
-         连带拖出横向滚动条，所以这里统一允许任意位置断行。 */
-      .t1,
-      .t2 {
-        word-break: break-all;
-        overflow-wrap: anywhere;
-      }
+    .header-box {
+      flex: none;
+      position: relative;
+      text-align: center;
+      height: $xformH5HeaderHeight;
+      line-height: $xformH5HeaderHeight;
+      font-size: 16px;
+      color: #212121;
+      border-bottom: solid 1px #eee;
 
-      .t1 {
-        margin-bottom: 6px;
+      .back {
+        position: absolute;
+        right: 14px;
+        top: 50%;
+        margin-top: -10px;
+        line-height: 20px;
+        font-size: 20px;
+      }
+    }
 
-        /* 模板里恒有 <i class="icon">（原文设了一圈头像样式后又 display:none，
-           等于留着没用）。照原样隐藏，避免哪天有人给裸 .icon 加了全局规则时冒出来。 */
-        .icon {
-          display: none;
-        }
+    .p-cont {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 10px 16px 0;
 
-        span {
-          vertical-align: middle;
-          margin: 0 5px 0 0;
-        }
+      .txt {
+        width: 100%;
       }
 
-      .t2 {
-        font-size: 11px;
-        color: rgba(128, 128, 128, 0.8);
+      .el-form .el-form-item {
+        margin-bottom: 4px;
 
-        p {
-          min-width: 50%;
-          /* 没有 max-width 时，inline-block 会被里面的长串顶到超出卡片宽度 */
-          max-width: 100%;
-          margin-bottom: 4px;
-          display: inline-block;
-          vertical-align: top;
+        .el-form-item__label {
+          padding: 0;
+          margin: 0;
+          font-size: 13px;
         }
-      }
 
-      /* 修改候选人：卡片内的「设置候选人」按钮 */
-      .btns {
-        text-align: right;
-        margin-top: 4px;
+        .el-input {
+          width: 100% !important;
+          height: 38px;
+          border-radius: 4px;
+        }
 
-        .btn {
-          height: 28px;
-          padding: 0 10px;
+        .el-input__inner {
           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);
-    }
-
-    > div {
+    .p-btn {
+      flex: none;
       display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: 80%;
-      background: #fff;
-
-      .header-box {
-        flex: none;
-        position: relative;
-        text-align: center;
-        height: $xformH5HeaderHeight;
-        line-height: $xformH5HeaderHeight;
-        font-size: 16px;
-        color: #212121;
-        border-bottom: solid 1px #eee;
+      padding: 8px;
 
-        .back {
-          position: absolute;
-          right: 14px;
-          top: 50%;
-          margin-top: -10px;
-          line-height: 20px;
-          font-size: 20px;
-        }
-      }
-
-      .p-cont {
+      .btn {
         flex: 1;
-        min-height: 0;
-        overflow-y: auto;
-        padding: 10px 16px 0;
-
-        .txt {
-          width: 100%;
-        }
+        margin: 0 8px;
+        height: 42px;
+        border-radius: 42px;
+      }
+    }
+  }
+}
 
-        .el-form .el-form-item {
-          margin-bottom: 4px;
+.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;
 
-          .el-form-item__label {
-            padding: 0;
-            margin: 0;
-            font-size: 13px;
-          }
+  > .el-dialog__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .form-box {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    background:#FFF;
+    .tit {
+      margin: 8px 12px;
+      background: rgba(51, 106, 153, 0.1);
+      border-radius: 11px;
+      padding: 10px 12px;
+      font-size: 13px;
+      color: $baseColor;
 
-          .el-input {
-            width: 100% !important;
-            height: 38px;
-            border-radius: 4px;
-          }
+      &:before {
+        content: "";
+        width: 5px;
+        height: 5px;
+        background: $baseColor;
+        border-radius: 50%;
+        vertical-align: middle;
+        margin-right: 5px;
+        display: inline-block;
+      }
 
-          .el-input__inner {
-            font-size: 13px;
-          }
-        }
+      > span {
+        vertical-align: middle;
       }
+    }
+  }
 
-      .p-btn {
-        flex: none;
-        display: flex;
-        padding: 8px;
+  /* 内容区的 height 是模板里的内联样式，只能用 !important 压掉，
+     改由上面的 flex 决定高度 */
+  .cont {
+    height: 100% !important;overflow: auto;
+    .h5-list-box{
+     margin:12px;padding:0 !important;background:none !important;
+     .item{
+       border:none;
+       /* 明细详情弹框 append-to-body，节点不在 .xform-h5 里，
+          列表卡片那套 `.xform-h5 .h5-list-box .item .t2` 一行两个打不到。
+          这里按同一口径接上：.t2 变 flex 容器，dl.m2 占 50%。 */
+       .t2{
+         display: flex;
+         flex-wrap: wrap;
+         align-items: flex-start;
+         > dl{
+           font-size:14px;color:#666;
+           &.m2 {
+             width: 50%;
+           }
+           &.m2 > div {
+             flex-wrap: wrap;
+           }
+           &.m2 > div > dd {
+             flex: 1 1 auto;
+             min-width: 0;
+           }
+           dd{
+             margin:0;
+             color:#323232;
+             text-align:right;
+             min-width: 0;
+             /* 压 style.scss:14112 的 width:calc(100vw - 159px)。
+                弹框里是真控件，半行净宽撑不住整屏宽。 */
+             .field-wrapper,
+             .field-wrapper.h5-field {
+               display: block;
+               width: auto;
+             }
+             .field-wrapper.h5-field .el-form-item {
+               display: block;
+               min-height: 0;
+               margin-bottom: 0;
+               padding: 0;
+               border-bottom: none;
+             }
+             /* dt 已经出过字段名，藏掉控件自带的第二份 label */
+             .field-wrapper.h5-field .el-form-item > .el-form-item__label {
+               display: none;
+             }
+             .field-wrapper.h5-field .el-form-item > .el-form-item__content {
+               margin-left: 0 !important;
+             }
+           }
+         }
+       }
+     }
+    }
+  }
 
-        .btn {
-          flex: 1;
-          margin: 0 8px;
-          height: 42px;
-          border-radius: 12px;
-        }
+  /* 底部「关闭」：与底部动作栏同款胶囊，铺满一行 */
+  > .el-dialog__footer {
+    flex: none;
+    padding: 8px 13px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
+    .dialog-footer{display:flex;}
+    .button-sty,
+    .el-button {
+      height: 40px;
+      border-radius: 30px;
+      padding: 0;
+      font-size: 13px;
+      flex:1;
+      i {
+        margin-right: 3px;
       }
     }
   }
 
+  /*步骤条*/
   /* ---- 任务情况时间轴 ---- */
   .h5-process-info {
-    font-size: 12px;
+    font-size: $xformH5Size;
     padding: 12px 16px;
     background: #fff;
-    margin: 10px 12px;
+    margin: 12px 16px;
     border-radius: 15px;
-
+    overflow:auto;
     .item {
       display: flex;
       line-height: 1.4;
@@ -1837,7 +1965,7 @@ $xformH5PageBg: #f1f5fb;
 
       .info {
         width: calc(100% - 100px);
-
+        color:#666;
         p {
           margin: 2px 0;
           display: block;
@@ -1850,6 +1978,7 @@ $xformH5PageBg: #f1f5fb;
               font-weight: 600;
               width: 100%;
               margin-bottom: 3px;
+              color:#323232;
             }
           }
 
@@ -1872,121 +2001,312 @@ $xformH5PageBg: #f1f5fb;
     }
   }
 
-  /* ---- 确认/表单提示框（通过、驳回、转办等）---- */
-  /* 注意：.icon 沿用 resources/images 下的图标，`~@/` 在消费应用里解析到它自己的
-     src/resources/images —— 该目录同样不在 package.json files 内，属隐式依赖。
-     消费应用现有的 h5.scss 已引用同一批图，故风险可控；若要彻底解耦可换字体图标。 */
-  .pop-tipsBox {
+
+  /* 搜索行（选用户 / 加签）：输入框 + 右侧「高级筛选」 */
+  .search-H5box {
+    flex: none;
     position: relative;
+    display: flex;
+    padding: 8px 16px 0;
 
-    &:before {
-      content: "";
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: rgba(0, 0, 0, 0.4);
-      z-index: 998;
-    }
+    .txt {
+      flex: 1;
+      position: relative;
+      height: 38px;
+      background: #fff;
+      border: solid 1px #e4e4e4;
+      border-radius: 38px 0 0 38px;
 
-    > 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;
+      .el-input {
+        width: 100% !important;
+      }
 
-      .icon {
-        background: url(~@/resources/images/icon-tips.png) no-repeat center;
-        background-size: cover;
+      .el-input__inner {
+        height: 38px !important;
+        width: 100%;
+        border: none;
+        background: none;
+        line-height: 38px;
+        padding-left: 39px;
+        font-size: 13px;
+      }
+
+      /* 放大镜挪到左侧（element 默认在右） */
+      .el-input__suffix {
         position: absolute;
-        top: -19px;
-        left: 50%;
-        margin-left: -34px;
-        width: 68px;
-        height: 68px;
-        border-radius: 50%;
-        border: solid 2px #fff;
+        left: 12px;
+        right: inherit;
+        top: 7px;
+        width: 20px;
+        transform: inherit !important;
       }
 
-      .cont {
-        padding: 0 0 18px;
+      .el-input-group__append {
+        border: none;
+        background: none;
 
-        .name {
-          font-weight: 600;
-          font-size: 18px;
-          margin-bottom: 24px;
+        .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;
         }
+      }
+    }
+
+    .icon-screen {
+      flex: none;
+      height: 38px;
+      line-height: 38px;
+      padding: 0 10px;
+      font-size: 13px;
+      color: $baseColor;
+      background: transparentize($baseColor, 0.88);
+      border: solid 1px #e4e4e4;
+      border-left: none;
+      border-radius: 0 10px 10px 0;
+
+      i {
+        margin-right: 5px;
+        font-size: 14px;
+      }
+    }
+  }
+
+  /* 修改单据：表单直接挂在骨架下，不套 .flex */
+  > .el-dialog__body > div > .form-box {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+  .selected-flex-box{
+    display: flex;height:100%;flex-direction: column;
+  }
+  .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;
+
+      .order-item {
+        background: #fff;
 
-        /* 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;
+        .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;
           }
         }
 
-        .txt {
-          max-height: 100px;
-        }
+        &.on {
+          border: solid 1px $baseColor;
 
-        .txt2 {
-          max-height: 200px;
+          .is-checked {
+            border-color: $baseColor;
+            background: $baseColor;
+          }
         }
+      }
+    }
 
-        .form-box {
-          border: solid 1px #dcdcdc;
-          padding: 0 12px;
-          border-radius: 10px;
-          margin-top: -8px;
+    /* 已选区（底部固定，不滚） */
+    .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);
+      border-bottom: solid 1px $xformH5RowBorder;
+      .ca-t {
+        margin: 8px 0;
+        font-size: 14px;
+        font-weight: 600;
+      }
 
-          .line {
-            border: solid 1px #e8e8e8;
-          }
+      .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 {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 24px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          background: transparentize($baseColor, 0.91);
         }
       }
+    }
 
-      .btns {
-        display: flex;
+    .form-box {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
 
-        .btn {
-          flex: 1;
-          height: 40px;
-          border-radius: 12px;
+      .tit {
+        margin: 8px 12px;
+        background: rgba(51, 106, 153, 0.1);
+        border-radius: 11px;
+        padding: 10px 12px;
+        font-size: 13px;
+        color: $baseColor;
 
-          &.el-button--primary.is-plain {
-            border-color: $baseColor;
-          }
+        &:before {
+          content: "";
+          width: 5px;
+          height: 5px;
+          background: $baseColor;
+          border-radius: 50%;
+          vertical-align: middle;
+          margin-right: 5px;
+          display: inline-block;
+        }
+
+        > span {
+          vertical-align: middle;
         }
       }
     }
+  }
+
 
-    &.error > div .icon {
-      background-image: url(~@/resources/images/icon-error.png);
-      border-color: #fff;
+  /* 列表里的一张候选卡片。原文挂在 .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;
+    }
+
+    /* 卡片里放的是用户资料原值，可能出现超长且无空格的串（「地址」字段实际存的
+       是一整条图片 URL）。默认不允许在非空白处断行，这种串会把卡片整体撑宽、
+       连带拖出横向滚动条，所以这里统一允许任意位置断行。 */
+    .t1,
+    .t2 {
+      word-break: break-all;
+      overflow-wrap: anywhere;
+    }
+
+    .t1 {
+      margin-bottom: 6px;
+
+      /* 模板里恒有 <i class="icon">（原文设了一圈头像样式后又 display:none，
+         等于留着没用）。照原样隐藏，避免哪天有人给裸 .icon 加了全局规则时冒出来。 */
+      .icon {
+        display: none;
+      }
+
+      span {
+        vertical-align: middle;
+        margin: 0 5px 0 0;
+      }
+    }
+
+    .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;
+      }
+    }
+
+    /* 修改候选人：卡片内的「设置候选人」按钮 */
+    .btns {
+      text-align: right;
+      margin-top: 4px;
+
+      .btn {
+        height: 28px;
+        padding: 0 10px;
+        font-size: 13px;
+      }
     }
   }
+
+}
+.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus{
+  background:none
 }
+.h5-dropdown-button.button-sty{
+  width: 100%;
+  height: 40px;
+  border-radius: 30px;
+  padding: 0;
+  /* 三个并排时按钮偏窄：字号收一档、超长省略，避免文字撑破 */
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
-/* ============ 页面底色 ============ */
-.xform-h5 .h5-detail-wrap {
-  background: $xformH5PageBg;
+  i {
+    margin-right: 3px;
+  }
 }