cloud-web-corejs 1.0.281 → 1.1.0-dev.11

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

@@ -0,0 +1,2262 @@
+/**
+ * xform H5（移动端）版式样式基线
+ *
+ * 作用域：全部收在 .xform-h5 下。该根类由 form-render/index.vue 依
+ * formConfig.layoutType === 'H5' 输出，PC/Pad 版式下整份样式不生效。
+ *
+ * 为什么放包内而不是 resources/css/style.scss：
+ *   package.json 的 files 只含 src/resources/js，不含 src/resources/css ——
+ *   style.scss 不随 cloud-web-corejs 发布，消费应用用的是自己那份拷贝。
+ *   样式写在这里才能随包走，改一次各应用同步生效。
+ *   详见 docs/2026-08 xform 移动端布局对齐 bill_setting 方案.md 决策 2。
+ *
+ * ★ 特异度硬约束（改这个文件前必读）：
+ *   style.scss 里已有一批裸类名的 H5 规则（.h5-detail-wrap .h5-item ...），
+ *   它走全局 styles/index.scss，本文件走组件 <style> 块，两者加载先后在
+ *   webpack 下不可靠，不能靠「后写覆盖先写」。因此：
+ *     1. 覆盖规则的选择器段数必须严格多于对手（对手 0,3,0 就写到 0,4,0 以上）；
+ *     2. 对手带 !important 的，本方也必须带，特异度再高也压不过。
+ *   每处覆盖点都标了对手所在行号，便于核对。
+ */
+
+@import "~@/styles/variables.scss";
+
+/* ============ 块 A：变量 ============ */
+/* 收掉 bill_setting 散在 4 处 5 个值的 calc(100vh - N)，不要抄它的具体数值 */
+$xformH5HeaderHeight: 38px; // 标题栏
+$xformH5FooterHeight: 56px; // 底部动作栏
+$xformH5RowHeight: 48px; // 字段行高
+$xformH5LabelWidth: 80px; // 标签宽
+$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
+   .c-item / .tit 是 components/mobile/h5Card/h5CardPane.vue 的外壳类
+   （移动版 wf 面板 content.vue 的根节点就是 <h5-card-pane>）。
+   把它们并进来，wf 面板直接复用 xform 的卡片视觉，不必再搬一套卡片皮肤。 */
+.xform-h5 .h5-detail-wrap {
+  .h5-item,
+  .c-item {
+    background: #fff;
+    border-radius: $xformH5CardRadius;
+    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
+       .tit 同上，是 h5CardPane 的标题类 */
+    .h5-title,
+    .tit {
+      line-height: 45px;
+      padding: 0 12px;
+      border-bottom:none;
+      position: relative;
+
+      b {
+        font-size: 15px;
+        font-weight: 600;
+        color: #323232;
+      }
+
+      /* 左侧竖色条，对齐 bill_setting 的 .tit > b::before */
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 16px;
+        width: 4px;
+        height: 13px;
+        background: $baseColor;
+        border-radius: 4px;
+      }
+
+      /* 展开/收起箭头。h5CardPane 的那份在块 L 里（.c-item > .tit > .arrow），
+         这里是 xform 自己的卡片 h5-card-pane-item.vue，口径保持一致。 */
+      > .arrow {
+        position: absolute;
+        right: 12px;
+        top: 0;
+        line-height: 45px;
+        font-size: 16px;
+        color: #909399;
+      }
+    }
+  }
+
+  /* 标题栏的按钮区原本贴右边（style.scss:13786 right:12px），会和箭头叠在一起，
+     给箭头让出一格。对手 (0,4,0)，本方 (0,5,0)。 */
+  .h5-item .h5-title .btns {
+    right: 34px;
+  }
+}
+
+/* ============ 块 C：字段行（表格版式的 CSS 复刻） ============ */
+/* 决策 4 走 CSS 复刻而非真 <table>：字段组件全部依赖 el-form-item 挂
+   prop/rules，compareView 也包在里面，拆 th/td 会打断校验链与对比包裹。
+
+   ★ 锚点（2026-08-29 改）：行版式挂 .field-wrapper.h5-field，不再挂容器。
+   原来锚 `.h5-detail-wrap .h5-item .h5-form-box`，而 `.h5-item` 只有 h5-card-pane
+   会吐（h5-card-pane-item.vue:4）；h5-card 吐的是 `.grid-cell`（h5-card-item.vue:2），
+   字段/表格直挂 detail-h5.panes 时连 `.h5-form-box` 都没有（detail-h5-widget.vue:29
+   的 draggable 是单一 dragGroup，任何容器都能拖进去）。那两种摆法下整套行版式
+   静默落空，表现为「标签右对齐、值左对齐」（element 默认）。
+   h5-field 由 form-item-wrapper 按 formConfig.layoutType === 'H5' 打，PC 不打。
+   代价是特异度基线从 (0,5,0) 降到 (0,3,0)，故本块每条都按对手重算，见各条注释。 */
+
+/* 容器层仍按容器锚：内边距与两列排布是容器职责，不是字段职责。
+   写到 (0,4,0)，压过 style.scss:13801/13886 的
+   `.h5-detail-wrap .h5-item .h5-form-box{padding:12px / padding-bottom:0}` (0,3,0)
+   —— 同分只能靠加载顺序，而本文件与 style.scss 的先后不可靠，必须多一段。
+
+   ★ 这里只锚 h5-card-pane 出的 .h5-item：曾并列加过一条 `.grid-cell .h5-form-box`
+   想覆盖 h5-card，那是错的 —— h5-card 的 panes 只能装卡片(h5-card-pane)、装不了字段
+   （widgetsConfig 里它就是 `panes: []`，h5-card-item 也只遍历 panes），
+   给它加 12px 不会让任何字段受益，只会把里面的卡片整体往里缩一圈，
+   结果是同一屏里 h5-card 里的卡片比流程面板窄 30px、左右对不齐。 */
+.xform-h5 .h5-detail-wrap .h5-item .h5-form-box {
+  /* 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;
+    }
+  }
+}
+
+/* h5-card 在 H5 版式下只是个分组壳，里面直接装卡片，壳自己不该再占内边距。
+   那 3px 来自 h5-card-item.vue 的 scoped 样式（`.grid-cell{min-height:80px;padding:3px}`，
+   从设计器画布抄来的），(0,2,0)；本方 (0,4,0) 压得过。
+   抹平之后，h5-card 里的卡片与直接挂在滚动区下的流程面板一样都落在 margin 8px 上。 */
+.xform-h5 .h5-detail-body > .form-widget-list > .grid-cell {
+  padding: 0;
+}
+
+/* ★ 不要给 `.h5-detail-body > .form-widget-list` 也加 flex-wrap：那一层装的是
+   卡片（detail-h5-item.vue 的 panes），卡片自身没有宽度，一旦父级变 flex 容器
+   就会按内容宽并排成一行。字段直挂 detail-h5.panes 时靠下面的
+   `.field-wrapper.h5-field{width:100%}` 自然堆叠即可 —— 该摆法下 h5Span=half
+   不成两列（没有 flex 父级），这是刻意取舍：半宽本就是卡片内的排布选项。 */
+
+/* 行版式本体 */
+.xform-h5 .field-wrapper.h5-field {
+  width: 100%;
+
+  /* 半宽（两列），由字段选项 h5Span === 'half' 打在 form-item-wrapper 根节点上。
+     表格布局里不生效：对手 `.designer-view .table-layout td.table-cell
+     .field-wrapper{width:100%}` (0,4,1) 高于本条 (0,4,0)，列宽本就该由表格自己控。 */
+  &.h5-half {
+    width: 50%;
+  }
+
+  /* 表格布局里 style.scss:9896 把它变成 display:table (0,4,1)，本块不去争，
+     那条正是块 C1 依赖的前提。 */
+  .el-form-item {
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+    min-height: $xformH5RowHeight;
+    margin-bottom: 0;
+  }
+
+  /* 对手：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 {
+    width: $xformH5LabelWidth;
+    padding: 0 5px 0 0;
+    margin: 0;
+    line-height: 1.4;
+    height: auto;
+    overflow: hidden;
+    color: #666666;
+    text-align: left !important;
+
+    /* 标签后自动补冒号，对齐 bill_setting form-table 的 th::after。
+       对手把 display 关了，必须先打开再给 content。本方 (0,5,1)。 */
+    &::after {
+      display: inline !important;
+      content: ":";
+      margin-left:2px;
+    }
+  }
+
+  .el-form-item > .el-form-item__content {
+    flex: 1;
+    line-height: 1.4;
+    word-break: break-word;
+    /* el-form-item 按 label-width 写的内联 margin-left 在 flex 行里是多余的左空白：
+       值是右对齐的所以看不出来，但它白白压缩可用宽度、让长值提前折行。
+       内联样式只能 !important 压（同款处理见块 C2）。 */
+    margin-left: 0 !important;
+  }
+
+  /* 卡片里最后一行不留分隔线。:last-child 计入 class 列，本条 (0,5,0)
+     高于上面 .el-form-item 的 border-bottom (0,4,0)。 */
+}
+
+/* ============ 块 C1：表格布局（.table-layout）下退回块 C 的 flex 行 ============ */
+/* 字段落进 td.table-cell 时，style.scss:9896 起把它改成「table 模拟」：
+   `.field-wrapper{display:table}` / `.el-form-item{display:table-row}` /
+   label 与 content 各 `display:table-cell`。这套在 H5 下有个死结：
+
+     form-item-wrapper 的根节点里还夹着一层普通 <div>
+     （.field-wrapper > div > .el-form-item），block 盒卡在 table 与 table-row 之间，
+     CSS 会给它补匿名 table-cell + 匿名 table —— el-form-item 落进的是那张**匿名表**，
+     而匿名表是 shrink-to-fit：整行只有「标签 80px + 值内容宽」那么宽，撑不满单元格，
+     值永远贴在标签右边，而不是单元格右缘（实测 305px 的格子里行只有 128px）。
+     改动前看着「还行」，是因为 PC 的 td.w1 给 content 钉了 172.2px 死宽顶着，
+     块 C3 一解除死宽就塌了 —— 那个死宽本来就是 PC 像素值，不能留。
+
+   另外 table-row 上 min-height/padding/border 一律不生效，element 的 label 又自带
+   float:left（float 非 none 会把 display 强制算成 block，标签直接脱出表格流），
+   顺着 table 模拟走要打三处补丁才勉强成型。
+
+   所以整段退回块 C 的 flex 行：一套行模型走到底，min-height/padding/border 跟着
+   恢复生效，值靠 content 的 flex:1 + text-align:right 贴到单元格右缘。
+   对手 `.designer-view .table-layout td.table-cell .field-wrapper …` (0,4,1)~(0,6,1)；
+   本方 (0,6,1)~(0,8,1)（:not(.h5-block) 按其参数计一个 class）。
+   宽内容字段（h5-block）不走这条：它要的是「标签在上、内容整行」，见块 C2。 */
+.xform-h5
+  .table-layout
+  td.table-cell
+  .field-wrapper.h5-field:not(.h5-block) {
+  display: block;
+
+  .el-form-item {
+    display: flex;
+    align-items: center;
+
+    > .el-form-item__label,
+    > .el-form-item__content {
+      display: block;
+      float: none;
+    }
+
+    > .el-form-item__content {
+      flex: 1;
+      min-width: 0; // 不写这行，长值撑破行而不是折行
+    }
+  }
+}
+
+/* ============ 块 C3：表格布局里的字段值也贴右 ============ */
+/* 光有块 C/C1 还不够，表格路径上另有两条 PC 老规则顶着：
+
+   对手一 style.scss:5185 `.table-d-box td .field-wrapper .el-form-item__content span
+     { text-align:left }` (0,3,2) —— 只读字段的展示值正是一个 <span>
+     （form-item-wrapper 的兜底分支），块 C 的容器右对齐被这个子元素直接盖掉。
+   对手二 style.scss:5191 起 `.table-d-box td.w1 .field-wrapper .el-form-item__content
+     { width:172.2px !important }` (0,4,1)+!important，四档 w1~w4 全是 PC 像素宽；
+     375px 屏上 w1 的 td 就要 284.2px，值区被钉在 172.2px，右对齐也只在这块死宽里
+     生效，看着仍然不贴边。td 自身的 width:284.2px~1138.8px 同理。
+     注：w{colspan} 只有 table/table2 的单元格会打（table-cell-item.vue:2、
+     table2-cell-item.vue:3），h5-table 的单元格不打，故 h5-table 只中对手一。
+
+   ★ 不做「H5 下表格自动降成一列」：会打断 colspan/rowspan 合并，且与总方案
+     「PC 的 data-table/sub-form 不做 H5 自动降级」是同一条口径。列数交给设计器
+     用 h5-table 或 cellWidth 控制。 */
+.xform-h5 .table-layout.table-d-box {
+  /* 解除 w1~w4 的 PC 死宽。设计器里显式配了 cellWidth 的单元格走内联
+     style="width:xx !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 并排）时，左列的值右对齐后正好停在右列的左边界上，
+     读起来就是「值粘在下一个字段名上」（实测 359 对 360）。
+     对齐 bill_setting form-table 的处理：它用 `th:nth-child(3){padding-left:12px}`
+     让第二列的标签让出间隔。这里把间隔加在单元格上而不是标签上 —— 标签有 80px
+     定宽，加内边距会挤掉字数（全局 box-sizing 是 border-box）。 */
+  > 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 {
+      text-align: right;
+      display: flex;
+      justify-content: flex-end;
+      /* 对手一 (0,3,2)，本方 (0,8,2) */
+      span {
+        font-size:$xformH5Size;
+      }
+    }
+  }
+}
+
+/* ============ 块 D：输入控件归一（去边框、右对齐） ============ */
+.xform-h5 .field-wrapper.h5-field .el-form-item > .el-form-item__content {
+  .el-input,
+  .el-select {
+    width: 100% !important;
+  }
+
+  /* 对手：style.scss:13858 `.h5-detail-wrap .h5-item .el-input .el-input__inner` (0,4,0)
+     带 height/line-height 双 !important，故本方两条也带；本方 (0,7,0)。 */
+  .el-input .el-input__inner,
+  .el-textarea .el-textarea__inner {
+    height: auto !important;
+    line-height: 1.4 !important;
+    min-height: 34px;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 0;
+    text-align: right;
+    background: transparent;
+  }
+
+  /* 对手：style.scss:13845 `.h5-detail-wrap .h5-item .h5-form-box .el-input
+     .el-input__suffix .el-input__icon` (0,5,0)+!important；本方 (0,9,0)。 */
+  .el-input .el-input__suffix,
+  .el-input .el-input__prefix {
+    .el-input__icon {
+      line-height: 34px !important;
+    }
+  }
+
+  .el-radio-group .el-radio,
+  .el-checkbox-group .el-checkbox {
+    margin: 0 0 0 8px;
+
+    .el-radio__label,
+    .el-checkbox__label {
+      padding-left: 4px;
+    }
+  }
+}
+
+/* ============ 块 C2：宽内容字段不走紧凑行版式 ============ */
+/* 附件、图片、富文本这类字段的内容是一片区域而不是一行值。
+   块 C/D 那套（标签定宽 80px + 内容 flex:1 右对齐）是给单行输入设计的，
+   套上去会把附件列表挤到右侧贴着边框、文件名压线、缩略图变形。
+   这里让它们恢复成「标签在上、内容整行左对齐」。
+   h5-block 由 form-item-wrapper 按字段类型打，见其 isH5BlockField。
+   ★ 必须排在块 D 之后：输入框那条与块 D 的 text-align 需要靠段数取胜，
+     本块写全 `.el-form-item > .el-form-item__content …` 拿到 (0,8,0) > 块 D (0,7,0)，
+     不依赖书写顺序；其余各条 (0,6,0) > 块 C 的 (0,5,0)。 */
+.xform-h5 .field-wrapper.h5-field.h5-block {
+  width: 100%;
+
+  .el-form-item {
+    display: block;
+  }
+
+  .el-form-item > .el-form-item__label {
+    width: auto;
+    float: none;
+    display: block;
+    text-align: left !important;
+  }
+
+  .el-form-item > .el-form-item__content {
+    flex: none;
+    text-align: left;
+    margin-left: 0 !important; // el-form 的 label-width 会给 content 留左边距
+  }
+
+  /* 上传组件内部不该继承「输入框去边框 + 右对齐」那几条 */
+  .el-form-item > .el-form-item__content {
+    .el-input .el-input__inner,
+    .el-textarea .el-textarea__inner {
+      text-align: left;
+    }
+  }
+}
+
+/* ============ 块 E：必填星号与校验错误位 ============ */
+/* 字段行改 flex 后 Element 的星号与错误提示会错位，必须显式定位
+   （bill_setting 的 .el-form-item__label:before{position:absolute} 是同一处理） */
+.xform-h5 .field-wrapper.h5-field .el-form-item {
+  &.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
+    position: absolute;
+    left: -8px;
+    margin: 0;
+  }
+
+  .el-form-item__error {
+    position: static;
+    text-align: right;
+    padding-top: 2px;
+  }
+}
+
+/* ============ 块 F：半宽落单行 ============ */
+/* 一行末尾落单的半宽字段保持半宽、右侧留白（bill_setting 的 table 版式天然如此）。
+   若产品要求撑满整行，把下面这条注释放开即可。 */
+// 用 // 而非 /* */：sass 的块注释会原样输出到生产 CSS，被注释掉的规则不该进产物
+// .xform-h5 .field-wrapper.h5-field.h5-half:nth-child(odd):last-child {
+//   width: 100%;
+// }
+
+/* ============ 块 G：骨架（flex 列 + 内部滚动区） ============ */
+/* 改动前是「整页滚 + 底栏 position:fixed」，底栏在弹框里会钉到屏幕底部
+   （三个弹框各写过 .H5 补丁想推回去，但那三条选择器从未生效，已删）。
+   改成流内布局后，底栏自然贴容器底部，且 iOS 键盘弹起不再顶飞底栏。 */
+.xform-h5 {
+  height: 100%;
+
+  /* container-item-wrapper 那层，高度要能传下去 */
+  .container-wrapper {
+    height: 100%;
+    width:100%;
+  }
+
+  .h5-detail-wrap {
+    //display: flex;
+    //flex-direction: column; 弹框在里面会有问题
+    height: 100%;
+    min-height: 0; // 允许在 flex 父级下收缩
+    /* 压掉 style.scss:13765 的 padding-bottom:68px（那是给 fixed 底栏让位用的） */
+    padding-bottom: 0 !important;
+  }
+
+  .h5-header {
+    flex: none;
+    height: $xformH5HeaderHeight !important;
+    line-height: $xformH5HeaderHeight;
+  }
+
+  .h5-detail-body {
+    flex: 1;
+    /* ★ 必写：flex 子项默认 min-height:auto 会被内容撑开，
+       结果是父级溢出而不是子级滚动 */
+    min-height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* 滚到底时最后一张卡片要留出呼吸位，否则它的下边缘正好压在底部动作栏上。
+       卡片是 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% }`，而该组件的根节点
+       正是 .h5-detail-wrap.grid-container —— 于是这个 transition-group 被钉成
+       滚动区的高度（100%），跟内容实际高度脱钩：内容更高时，排在它后面的
+       流程面板会按 100% 那个位置起排，直接压到卡片上（实测重叠 65px，表现
+       就是「流程信息和附件信息之间没有间隔」）；内容更矮时则反过来空一大段。
+       对手是 scoped 的 .grid-container .form-widget-list[data-v-x] (0,3,0)，
+       本方 (0,4,0)。 */
+    > .form-widget-list {
+      height: auto;
+    }
+
+  }
+
+  .h5-fixed-bottom-btns {
+    /* 压掉 style.scss:10246 附近的 position:fixed 与 height:56px!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；
+   此时 min-height:100vh 会被内容撑高 → 整页滚动 → 标题栏和底部动作栏跟着滚走。
+   改成 height:100vh + overflow:hidden：容器恰好一屏、外层无可滚余量，
+   内容只在 .h5-detail-body 里滚，标题栏与底栏才真正固定。
+
+   ★ 但 100vh 在手机浏览器上不是「可见高度」：Chrome/Safari 的 vh 取的是**地址栏
+   收起后的大视口**，地址栏还在时容器比可视区高出一截（Chrome 约 56px），
+   底栏正好被顶到屏幕外 —— 表现就是「一进来看不到审批按钮，往下拖一下、
+   地址栏收起了才出现」。改用动态视口单位 dvh：它随地址栏收放实时变化，
+   永远等于当前可见高度。
+   两行都要留：不认识 dvh 的旧内核（Chrome<108 / iOS<15.4 / 老 Android WebView）
+   会丢弃后一行、退回 100vh 的老行为，不会整条失效。 */
+.xform-h5 .h5-detail-wrap {
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+/* 弹框/抽屉态：高度由弹框自己的 .cont 给，跟随容器而不是视口 */
+.el-dialog .xform-h5 .h5-detail-wrap,
+.el-drawer .xform-h5 .h5-detail-wrap {
+  height: 100%;
+}
+
+/* ============ 块 H：底部动作栏（胶囊按钮，单行、最多三个 + 图标下拉） ============ */
+
+.xform-h5 .h5-detail-wrap .h5-fixed-bottom-btns {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  padding: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
+
+  .form-widget-list,
+  .el-form {
+    display: flex;
+    flex: 1;
+    min-width: 0; // 让内部按钮能被压缩，否则长文案会把下拉挤出去
+  }
+
+  /* flex:1 等分 —— 1 个铺满、2 个各一半、3 个各三分之一，全自动 */
+  .field-wrapper {
+    flex: 1;
+    min-width: 0;
+    margin: 0 5px;
+  }
+
+  .button-sty,
+  .el-button {
+    width: 100%;
+    height: 40px;
+    border-radius: 30px;
+    padding: 0;
+    /* 三个并排时按钮偏窄：字号收一档、超长省略，避免文字撑破 */
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    i {
+      margin-right: 3px;
+    }
+  }
+
+  /* 「更多」：一个裸的箭头图标，不做成按钮 —— 没有底色、边框、圆角，
+     只按内容宽占位，不参与等分。 */
+  > .h5-more-dropdown {
+    flex: none;
+    margin-left: 4px;
+
+    .h5-more-icon {
+      display: block;
+      padding: 0 8px;
+      font-size: 20px;
+      line-height: 40px;
+      color: $baseColor;
+      cursor: pointer;
+    }
+  }
+}
+
+/* ============ 「更多」下拉菜单 ============ */
+/* ★ 不能嵌进 .xform-h5：el-dropdown-menu 默认 append-to-body，
+   菜单 DOM 会被挪到 <body> 下、脱离根类作用域，嵌套写法一律失效。
+   bill_setting 的 .mobileApp_dropdown.el-dropdown-menu 也是顶层选择器，同一模式。 */
+.xform-h5-dropdown.el-dropdown-menu {
+  .el-dropdown-menu__item {
+    margin: 8px 0;
+    line-height: normal;
+  }
+
+  .button-sty,
+  .el-button {
+    width: 100%;
+    height: 36px;
+    border-radius: 30px;
+    padding: 0 16px;
+    font-size: 13px;
+
+    i {
+      margin-right: 4px;
+    }
+  }
+}
+
+
+/* ============ 明细行的「查看」角标 ============ */
+/* 对齐 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;
+    top: 10px;
+    z-index: 1;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    font-size: 12px;
+    border-radius: 50%;
+    background: transparentize($baseColor, 0.88);
+    color: $baseColor;
+
+    &::before {
+      content: "\e6e0";
+      font-family: element-icons !important;
+    }
+  }
+
+  /* 给角标让位。整块让位（.t2{padding-right:28px}）在值左对齐时看不出来，
+     但块 I2 把值改成右对齐后，所有行的值都会离右边框 28+14=42px、明显不贴边。
+     改成只让被角标压住的第一行：角标是 right:12px + 20px 宽，14(dl 自带) + 26 = 40px。
+
+     ★ 用角标自身作条件（它在 DOM 里就排在 .t2 前面，list-h5-item.vue:84），
+     而不是按位置写死：弹框里那份 list 不渲染角标，跟着让位会白缺一块（实测首行
+     比其余行短 26px）。查询选择场景（isQueryTable）同样不渲染角标（那时点行是勾选、
+     不进详情），自然也不让位。
+     ★ 整行/半行混排后，被角标压住的是「首行最右那格」，分两种：
+       ① 首格就是整行 → 它自己占满首行；
+       ② 首格半行且第二格也半行 → 右上角那格是第二格。
+     首格半行、第二格整行时，整行那格放不进首行会换到第二行，首行只剩左半格，
+     够不着角标，不必让位（所以没有第三条）。
+     基础内边距 7px + 角标占到卡片右缘 32px，让到 28px 刚好留出约 4px 空隙。
+     ★ 用相邻兄弟 `+` 而不是 `~`：有主标题(.t1)时角标压的是标题行、由块 I3 让位，
+     字段区不该再缩，`+` 在中间隔着 .t1 时自然不匹配。 */
+  .h5-item-arrow + .t2 > dl:first-child:not(.m2),
+  .h5-item-arrow + .t2 > dl.m2:first-child + dl.m2 {
+    padding-right: 28px;
+  }
+}
+
+/* ============ 块 I2：明细行字段「标签左 / 值右」 ============ */
+/* 与块 C 的详情行口径对齐 —— 同一屏里不该有两套。
+   注意参考物 bill_setting 的明细卡片本身是左对齐的：它全局那条
+   `.form-list-table td .el-form-item__content{text-align:right}`(style.scss:14406)
+   被 render.vue 自己的 scoped `.pro-item .info ::v-deep …{text-align:left}`
+   (0,5,0) > (0,4,2) 压掉了。这里对齐的是它的主表 .form-table 口径。
+
+   对手全在 style.scss:14089-14115，裸类名、无 !important：
+     `.h5-list-box .item .t2 > dl` (0,3,1)   width:100%; display:inline-block
+     `.h5-list-box .item .t2 > dl dt` (0,3,2)  width:74px
+     `.h5-list-box .item .t2 > dl dd` (0,3,2)  flex:1（没设 text-align，故默认左）
+     `.h5-list-box .item .t2 > dl .field-wrapper` (0,4,1) width:calc(100vw - 159px)
+   本方 (0,4,1) / (0,4,3) / (0,5,2) 起步。 */
+
+/* 一行一个 / 一行两个混排。默认整行；列在设计器里配了「H5列宽=半行」时，
+   list-h5-item 会给它的 <dl> 打上 m2（判等只认 'half'）。
+   m2 这个类名沿用 style.scss:14095 早就写好的 `.t2 > dl.m2{width:50%}` ——
+   那条规则一直没人往 dl 上打类，是条死规则，这里把它接上。
+   .t2 要先变成 flex 容器，否则 dl 自带的 width:100% 会让 50% 也各占一行。
+   全局 box-sizing:border-box，dl 的左右内边距算在 50% 里，不会溢出。 */
+.xform-h5 .h5-list-box .item .t2 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  /* 列间距收一半：dl 自带的左右各 14px 会在两列中间叠成 28px 的空档，
+     而卡片外缘只有 14px。改成 .t2 与 dl 各 7px —— 外缘仍是 14px，
+     列间也是 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; // 值折行时标签跟着顶对齐，别居中
+  }
+
+  > div > dt {
+    flex: 0 0 auto;
+    width: auto; // 撤掉 74px：右对齐后定宽标签不再承担对齐职责，只剩死白
+    max-width: 45%;
+    padding-right: 8px;
+    color: #999;
+  }
+
+  > div > dd {
+    flex: 1;
+    min-width: 0; // 不写这行，长值会撑破行而不是折行
+    //text-align: right;
+    margin: 0;
+    word-break: break-word;
+    color: #323232; // 值加深、标签留灰，同块 C 的 #808080 / 默认色关系
+  }
+
+  /* 半行（一行两个）。整行的列不写 width，沿用 style.scss 的 100%。
+     本方 (0,5,1) > 对手 style.scss:14090 的 (0,3,1)。 */
+  &.m2 {
+    width: 50%;
+  }
+
+  /* 半行列里塞不下的值，整段落到标签下一行（仍在本列内右对齐），
+     而不是被挤成竖排的一两个字 —— 375px 屏上一列净宽只有约 131px，
+     标签先占掉 40~50px。
+     ★ 关键在 `flex-basis:auto`（即 `flex:1 1 auto`）：换行判定用的是弹性项的
+     「假定主尺寸」，basis:auto 时它等于内容宽，于是短值放得下就并排、长值放不下
+     才整段换行 —— 这是按内容自适应，不是拍一个阈值。
+     通用那条写的是 `flex:1`（= `1 1 0%`），假定尺寸恒为 0，永远不会触发换行；
+     早先改用 min-width 当阈值，131-44=87 与阈值 88 只差 1px，结果连「电视机」
+     这种短值都被踢到下一行。min-width:0 保留，让独占一行的超长值能内部折行而不溢出。
+     本方 (0,5,3) > 上面通用那条 (0,4,3)。 */
+  &.m2 > div {
+    flex-wrap: wrap;
+  }
+
+  &.m2 > div > dd {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+
+/* 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;
+    width: auto;
+  }
+
+  /* 块 C 会把它做成带下边框的 48px 行，而这里的行分隔由 dl 自己给。
+     本方 (0,7,3) > 块 C 的 (0,4,0)。 */
+  .field-wrapper.h5-field .el-form-item {
+    display: block;
+    min-height: 0;
+    margin-bottom: 0;
+    padding: 0;
+    border-bottom: none;
+  }
+
+  /* dt 已经出过字段名，控件自带的 label 是第二个 —— 藏掉。
+     （list-h5 传的 tableParam 没有 $table，form-item-wrapper 的
+     shouldHideFieldLabel/isDataTableColumnItem 判不出来，标签照出，
+     于是弹框里一直是「dt + label」两个字段名。）
+     content 的左边距是 element 按 label-width 写的内联样式，只能 !important 压。 */
+  .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;
+  }
+}
+
+
+/* ============ 块 I：明细行卡片皮肤（list-h5 的 itemStyle=card） ============ */
+/* 现状 .h5-list-box .item（style.scss:14029）已经是白底+radius8+1px边框+左侧竖条的卡片，
+   与 bill_setting 的 .pro-item 只差 4 点：圆角、竖条→圆点、右上角箭头角标、小字段字号。
+   对手 .h5-list-box .item (0,2,0)；本方 .xform-h5 .h5-list-box .item.h5-item-card (0,4,0)。 */
+.xform-h5 .h5-list-box .item.h5-item-card {
+  border-radius: $xformH5CardRadius;
+
+  .t1 {
+    padding-right: 40px; // 给右上角箭头角标让位
+
+    /* 左侧 4px 竖条 → 5px 圆点（对手 .t1:before 是 0,3,1，本方 0,5,1） */
+    &::before {
+      position: relative !important;
+      display: inline-block;
+      left: auto !important;
+      top: auto !important;
+      width: 5px !important;
+      height: 5px !important;
+      margin-right: 4px;
+      border-radius: 50% !important;
+      vertical-align: middle;
+    }
+  }
+
+  .t2 > dl {
+    min-width: 49%;
+    font-size: 11px;
+  }
+
+  /* 行级对比标记（getCompareRowClass 的返回值），角标对齐 bill_setting 的
+     .pro-item .t i.el-icon-warning */
+  &.xform-compare-row-changed::after {
+    content: "\e7a3";
+    font-family: element-icons !important;
+    position: absolute;
+    right: 38px;
+    top: 10px;
+    font-size: 14px;
+    color: #ff731c;
+  }
+
+  &.xform-compare-row-new {
+    border-color: $baseColor;
+  }
+}
+
+/* ============ 块 I3：明细卡片的主标题（对齐 bill_setting 的 .pro-item .t） ============ */
+/* .t1 原本只有查询选择列表在用（一行排若干「标题：值」），style.scss:14031 起给它的
+   样式是照那个场景配的：display:flex、line-height:38px、左侧一根 4px 竖条。
+   明细卡片的主标题要的是 bill_setting 那副样子 —— 14px 深色单行、前面一个 5px 圆点、
+   右边给「查看」角标让位。h5-item-title 由 list-h5-item 只打在明细卡片那条分支上，
+   查询选择列表的 .t1 一条都不受影响。
+   对手 `.h5-list-box .item .t1` (0,3,0)、`.t1:before` (0,3,1)；本方 (0,5,0)/(0,5,1)。
+   与块 I 卡片皮肤那条圆点规则同分，写在其后，且两者取值一致。 */
+.xform-h5 .h5-list-box .item .t1.h5-item-title {
+  display: block; // 对手的 flex 是给「标题：值」多对并排用的
+  line-height: 22px;
+  /* 上边距 9px 是算出来的，不是拍的：角标 position:absolute、top:10px、高 20px，
+     中心落在距卡片内容顶 20px 处（+1px 边框 = 21px）。标题文字中心 =
+     padding-top + line-height/2 = 9 + 11 = 20（+1px 边框 = 21px），正好对齐。
+     改动 line-height 或角标的 top/height 时，这个 9px 要跟着重算。
+     （角标在 DOM 里排在标题前面，没法用选择器反查「后面有没有标题」来单独挪它 ——
+     :has() 在移动端 webview 上不能指望，所以由标题这边去对齐角标。）
+     右侧 40px 给角标让位：角标占到卡片右缘 32px。 */
+  padding: 9px 40px 6px 12px;
+  color: #323232;
+
+  > b {
+    font-size: 14px;
+    font-weight: 400;
+    word-break: break-word; // 主字段常是长编码，别撑破卡片
+  }
+
+  /* 左侧 4px 竖条 → 5px 圆点。对手把它 position:absolute 钉在 left:0/top:18px，
+     三条定位都得显式还原成流内元素。 */
+  &::before {
+    position: relative !important;
+    display: inline-block;
+    left: auto !important;
+    top: auto !important;
+    width: 5px !important;
+    height: 5px !important;
+    margin-right: 4px;
+    border-radius: 50% !important;
+    vertical-align: middle;
+  }
+
+  /* style.scss:14079 的 `.t1 + .t2{margin-top:0}` 会让字段区紧贴标题，补一点呼吸位。
+     对手 (0,4,1)，本方 (0,5,1)。 */
+  + .t2 {
+    margin-top: 4px;
+  }
+}
+
+/* ============ 块 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 的直接子元素，而
+   VabUpload 不是。这一版照 VabUpload/view.vue 的真实结构重写：
+
+     .upload-list                        一个附件一个（模板内联 inline-block + float:left）
+       .upload-box > ul.el-upload-list--picture
+         li.el-upload-list__item
+           > div                          ← 唯一子元素，行的 flex 容器只能挂在它上面
+             .el-upload-list__item-thumbnail > p > .el-image
+             .el-upload-list__item-name   > p 文件名 / p 大小 / p 创建时间
+             .el-upload-input             showSortInput / showNameInput 时才有
+             .el-upload-list__item-status-label
+             .el-icon-close               删除（编辑态才渲染）
+             .el-icon-tagEdit             下载 + 详情
+
+   改成「一行一个附件」：左 56px 缩略图，右文件名两行截断 + 次要信息，行右端是常驻的
+   操作图标。PC 那套是 102px 卡片流式排，一个附件就吃掉 H5 小半屏，还大片留白。
+
+   ★ 操作入口必须常驻：PC 上 .show-video 靠 :hover 出现、.el-icon-tagEdit 被
+     style.scss 的 H5 段直接 display:none —— 触摸屏没有 hover，等于下载/详情在 H5
+     上根本点不到。（view.vue 里这两个还受 attachment.h5 !== 1 控制，那是历史遗留
+     开关，不是「H5 不给操作」的意思，故三个入口全放开。）
+     预览不用放开 .show-video：它只是缩略图上的 hover 遮罩，el-image 自己就绑了
+     @click="openPreview"，H5 上直接点缩略图即可，放出来反而挡住图。
+
+   ★ 特异度：真正难缠的对手是 style.scss:15604 起的 `#uploadImage.widgetSize-N`
+     一段（尺寸全在那里：li 的 width/height/padding-left、缩略图的 width/height 与
+     margin-left:-98px 负边距、p 与 img 的定死宽高），**带 id，(1,3,0)~(1,6,0)，
+     再多的 class 也压不过**。所以本块整体嵌在 #uploadImage 下取到 (1,5,0) 起步，
+     每一条都严格高于对应对手。另外两个较弱的对手是 style.scss:13801 起的
+     .h5-detail-wrap .h5-item .h5-form-box …（0,4,0~0,5,0）和 body .el-upload-list
+     … .show-video（0,4,1），顺带一并压掉。
+     注：#uploadImage 是 VabUpload 每个实例都写死的 id（DOM 里会重复），这里只把它
+     当选择器用来抬特异度，不依赖它唯一。 */
+/* 三条并列锚点，段数一致（(1,4,0) 起步），覆盖附件字段的三种摆法：
+   h5-card-pane（.h5-item）/ h5-card（.grid-cell）/ 直挂 detail-h5。
+   这里不能换成块 C 的 .field-wrapper.h5-field 锚点：那样只有 (1,3,0)，
+   压不过上面点名的 #uploadImage.widgetSize-N 那一段。 */
+.xform-h5 .h5-detail-wrap .h5-item .h5-form-box #uploadImage,
+.xform-h5 .h5-detail-wrap .grid-cell .h5-form-box #uploadImage,
+.xform-h5 .h5-detail-body .field-wrapper.h5-field #uploadImage {
+  /* 行容器。模板里写死了内联 display:inline-block;float:left，只能用 !important 压 */
+  .upload-list {
+    display: block !important;
+    float: none !important;
+    width: 100%;
+    margin: 0 0 12px;
+  }
+
+  .upload-box {
+    border-top: none;
+    margin-top: 0;
+  }
+
+  .el-upload-list {
+    margin: 0;
+  }
+
+  .el-upload-list__item {
+    width: 100%;
+    height: auto;
+    margin: 0;
+    padding: 8px;
+    overflow: visible;
+    background: #fff;
+    border: solid 1px $xformH5RowBorder;
+    border-radius: 8px;
+    transition: none; // element 的 item 有 transform 过渡，行式下没意义还会闪
+
+    /* 行本体。li 下只有这一个 div，所有子块都在它里面 */
+    > div {
+      display: flex;
+      flex-wrap: wrap; // showSortInput/showNameInput 时那两个输入框整行另起
+      align-items: center;
+      width: 100%;
+    }
+
+    .el-upload-list__item-thumbnail {
+      flex: none;
+      width: 56px;
+      height: 56px;
+      margin: 0 10px 0 0;
+      padding: 0;
+      border-radius: 8px;
+      overflow: hidden;
+      background: #f7f8fa;
+
+      /* 这三层的宽高在 #uploadImage.widgetSize-N 里都被写死成 88/98px，逐层压掉 */
+      p {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+      }
+
+      .el-image {
+        width: 100%;
+        height: 100%;
+        img{width:56px;height:56px}
+      }
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      /* hover 遮罩：H5 用不上，直接点缩略图就是预览 */
+      .show-video {
+        display: none;
+      }
+    }
+
+    .el-upload-list__item-name {
+      flex: 1;
+      min-width: 0; // 不写这行，长文件名会把行撑破而不是省略
+      width: auto;
+      height: auto;
+      margin: 0;
+      padding: 0;
+      line-height: 1.4;
+
+      /* 文件名：两行截断 */
+      > .el-tooltip > p,
+      > p:first-child {
+        margin: 0;
+        font-size: 13px;
+        color: #212121;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        word-break: break-all;
+      }
+
+      /* 大小 / 创建时间等次要信息 */
+      > p + p,
+      > .el-tooltip + p {
+        margin: 2px 0 0;
+        font-size: 11px;
+        color: rgba(128, 128, 128, 0.8);
+      }
+    }
+
+    /* 序号 / 名称输入：整行另起，不跟缩略图挤一行 */
+    .el-upload-input {
+      width: 100%;
+      margin: 8px 0 0;
+    }
+
+    .el-upload-list__item-status-label {
+      display: none;
+    }
+
+    /* 行右端常驻操作：只留「下载」。点击区按 44px 给足 */
+    .el-icon-tagEdit {
+      display: flex;
+      flex: none;
+      position: static;
+      align-items: center;
+      margin-left: 4px;
+      color: $baseColor;
+
+      i {
+        margin: 0;
+        padding: 0 8px;
+        font-size: 20px;
+        line-height: 44px;
+      }
+
+      /* 「文件详情」（属性弹框）H5 上不出：它是 PC 的管理向功能，
+         弹的是一整张属性表，小屏上既挤又用不上。 */
+      .icon-shuxing {
+        display: none;
+      }
+    }
+
+    /* 删除（编辑态才渲染）：并进右端图标组，不再做成飘在角上的红点 */
+    .el-icon-close {
+      display: flex;
+      flex: none;
+      position: static;
+      align-items: center;
+      width: auto;
+      height: auto;
+      top: auto;
+      right: auto;
+      background: none;
+      border-radius: 0;
+      color: $dred;
+      opacity: 1;
+
+      i {
+        padding: 0 8px;
+        font-size: 18px;
+        line-height: 44px;
+      }
+    }
+  }
+
+  /* 上传入口（编辑态）：PC 是 100×100 的虚线方块，跟行式列表放一起很突兀。
+     改成整行一条虚线「+」条，与上面每条附件同宽同圆角。
+     .el-upload 的 float/inline-block 是模板内联样式，只能 !important 压。 */
+  .el-upload.el-upload--picture {
+    display: block !important;
+    float: none !important;
+    width: 100%;
+
+    .avatar-uploader {
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+      margin: 0;
+      padding: 0;
+      background: none;
+      border: dashed 1px #dfdfdf;
+      border-radius: 10px;
+      color: $baseColor;
+
+      .avatar-uploader-icon {
+        font-size: 18px;
+        line-height: 44px;
+      }
+    }
+  }
+}
+
+/* ============ 块 K：H5 按钮基线 —— 不出图标 ============ */
+/* H5 的按钮只出文字，不带 el-icon-*。底部动作栏本来就是这样（detail-h5-item.vue
+   构造按钮时明确不取注册表的 iconClass/elIcon），但弹框里的按钮是直接沿用 PC 模板
+   的，`icon="el-icon-close"` / `icon="el-icon-check"` 都跟着进来了，同一屏里两种样子。
+
+   用 CSS 抹而不是逐个删模板上的 icon 属性：这些模板（选用户 views/mobile/user/user、
+   加签 addTaskUserdialog、减签、催办、修改候选人…）同时被手写移动页用着，
+   改模板会波及包外；收在 .xform-h5 下则只影响 xform 的 H5 版式。
+
+   只作用于 el-button 的直接子 i（element 把 icon 渲染成按钮的第一个子元素）。
+   底栏「更多」下拉的触发器是裸 <i class="h5-more-icon">、不在 el-button 里，不受影响。 */
+.xform-h5 {
+  .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 实际用到的类搬进包内。
+   原规则嵌在 .h5-box .form-box .c .c-item .cont 下（xform 没有 .h5-box 祖先，
+   本来就命中不了），这里重新挂到 .xform-h5 下，不存在与原规则的覆盖竞争。
+   卡片外壳 .c-item / .tit 已并进块 B，此处只补 wf 专属部分。 */
+.xform-h5 {
+  /* h5CardPane 的折叠箭头 */
+  .c-item > .tit > .arrow {
+    position: absolute;
+    right: 12px;
+    top: 0;
+    line-height: 45px;
+    font-size: 16px;
+  }
+
+  /* ---- 流程信息区 ---- */
+  .flowPath-box {
+    overflow: hidden;
+    padding: 0 12px;
+
+    > .t,
+    .m2 .t {
+      color: #666;
+      padding:8px;
+
+      &:before {
+        content: "";
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background: $baseColor;
+        margin-right: 3px;
+        vertical-align: middle;
+        display: inline-block;
+      }
+
+      span {
+        vertical-align: middle;
+      }
+    }
+
+    .c {
+      padding: 0 5px;
+      margin-top: 5px;
+      height: auto;
+      margin-bottom: 12px;
+
+      .name {
+        font-weight: 600;
+
+        .el-tag {
+          line-height: 19px;
+          font-weight: 400;
+          display: inline-block;
+          margin-top: 4px;
+        }
+      }
+
+      .btn {
+        color: $baseColor;
+        background: transparentize($baseColor, 0.91);
+        padding: 7px 10px;
+        font-size: 13px;
+
+        i {
+          font-size: 12px;
+          margin-right: 3px;
+        }
+      }
+    }
+
+    .m2 {
+      min-width: 50%;
+      float: left;
+      margin-bottom: 12px;
+    }
+  }
+
+  /* ---- 审批动作按钮区 ---- */
+  .flowPath-btns {
+    padding: 12px 0;
+    margin: 0 0 0 -10px;
+
+    .btn {
+      height: 34px;
+      border-radius: 20px;
+      padding: 0 0 0 12px;
+      font-size: 13px;
+      width: calc(33% - 24px);
+      margin-left: 24px;
+      margin-bottom: 10px;
+      background: none;
+      position: relative;
+
+      i {
+        width: 22px;
+        height: 23px;
+        background: #e9e9e9;
+        margin: 0 17px 0 -7px;
+        vertical-align: middle;
+        border-radius: 15px;
+        display: inline-block;
+        line-height: 22px;
+        text-align: center;
+        color: #fff;
+        position: absolute;
+        left: 0;
+        top: 4px;
+        font-size: 14px;
+
+        &.icon-tongguo {
+          font-size: 16px;
+          line-height: 24px;
+        }
+      }
+
+      &.el-button--success {
+        color: $green;
+        > i {
+          background: $green;
+        }
+      }
+
+      &.el-button--primary > i {
+        background: $baseColor;
+      }
+
+      &.el-button--warning {
+        color: $yellow;
+        > i {
+          background: $yellow;
+        }
+      }
+
+      &.el-button--danger {
+        color: $dred;
+        > i {
+          background: $dred;
+        }
+      }
+    }
+  }
+
+
+
+}
+
+/* ---- 确认/表单提示框（通过、驳回、中断、转办、加签）---- */
+/* ★ 顶层选择器，不能收回 .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: rgba(0, 0, 0, 0.4);
+    z-index: 998;
+  }
+
+  > 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(~@/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;
+    }
+
+    .cont {
+      padding: 0 0 18px;
+
+      .name {
+        font-weight: 600;
+        font-size: 18px;
+        margin-bottom: 24px;
+      }
+
+      /* 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}
+      }
+    }
+
+    .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;
+      position: relative;
+      display: flex;
+      padding: 8px 16px 0;
+
+      .txt {
+        flex: 1;
+        position: relative;
+        height: 38px;
+        background: #fff;
+        border: solid 1px #e4e4e4;
+        border-radius: 38px 0 0 38px;
+
+        .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;
+        }
+
+        /* 放大镜挪到左侧（element 默认在右） */
+        .el-input__suffix {
+          position: absolute;
+          left: 12px;
+          right: inherit;
+          top: 7px;
+          width: 20px;
+          transform: inherit !important;
+        }
+
+        .el-input-group__append {
+          border: none;
+          background: none;
+
+          .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 */
+    > div > .form-box {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+    }
+
+  }
+
+      /* 按钮口径与块 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;
+
+  &: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;
+      position: relative;
+      text-align: center;
+      height: $xformH5HeaderHeight;
+      line-height: $xformH5HeaderHeight;
+      font-size: 16px;
+      color: #212121;
+      border-bottom: solid 1px #eee;
+
+      .back {
+        position: absolute;
+        right: 14px;
+        top: 50%;
+        margin-top: -10px;
+        line-height: 20px;
+        font-size: 20px;
+      }
+    }
+
+    .p-cont {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 10px 16px 0;
+
+      .txt {
+        width: 100%;
+      }
+
+      .el-form .el-form-item {
+        margin-bottom: 4px;
+
+        .el-form-item__label {
+          padding: 0;
+          margin: 0;
+          font-size: 13px;
+        }
+
+        .el-input {
+          width: 100% !important;
+          height: 38px;
+          border-radius: 4px;
+        }
+
+        .el-input__inner {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .p-btn {
+      flex: none;
+      display: flex;
+      padding: 8px;
+
+      .btn {
+        flex: 1;
+        margin: 0 8px;
+        height: 42px;
+        border-radius: 42px;
+      }
+    }
+  }
+}
+
+.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-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;
+    background:#FFF;
+    .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;
+      }
+    }
+  }
+
+  /* 内容区的 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;
+           }
+         }
+       }
+     }
+    }
+  }
+
+  /* 底部「关闭」：与底部动作栏同款胶囊，铺满一行 */
+  > .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: $xformH5Size;
+    padding: 12px 16px;
+    background: #fff;
+    margin: 12px 16px;
+    border-radius: 15px;
+    overflow:auto;
+    .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;
+      }
+
+      &:last-child:after {
+        display: none;
+      }
+
+      .time {
+        color: #666;
+        width: 82px;
+        position: absolute;
+        top: 37px;
+        left: -14px;
+        right: 0;
+        text-align: center;
+        zoom: 0.9;
+      }
+
+      .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;
+
+        &.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);
+        }
+      }
+
+      .circle {
+        background: $baseColor;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: solid 3px #fff;
+        display: inline-block;
+        margin: 3px 20px;
+        z-index: 9;
+      }
+
+      .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;
+
+            .t1 {
+              min-width: 65px;
+              margin-right: 0;
+              flex: none;
+            }
+
+            span {
+              flex: 1;
+              white-space: pre-line;
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+  /* 搜索行（选用户 / 加签）：输入框 + 右侧「高级筛选」 */
+  .search-H5box {
+    flex: none;
+    position: relative;
+    display: flex;
+    padding: 8px 16px 0;
+
+    .txt {
+      flex: 1;
+      position: relative;
+      height: 38px;
+      background: #fff;
+      border: solid 1px #e4e4e4;
+      border-radius: 38px 0 0 38px;
+
+      .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;
+      }
+
+      /* 放大镜挪到左侧（element 默认在右） */
+      .el-input__suffix {
+        position: absolute;
+        left: 12px;
+        right: inherit;
+        top: 7px;
+        width: 20px;
+        transform: inherit !important;
+      }
+
+      .el-input-group__append {
+        border: none;
+        background: none;
+
+        .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;
+
+        .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 {
+      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;
+      }
+
+      .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);
+        }
+      }
+    }
+
+    .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;
+        }
+      }
+    }
+  }
+
+
+  /* 列表里的一张候选卡片。原文挂在 .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;
+
+  i {
+    margin-right: 3px;
+  }
+}