cloud-web-corejs 1.0.54-dev.810 → 1.0.54-dev.812

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

@@ -0,0 +1,1634 @@
+/**
+ * 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: #f3f3f3; // 行分隔线
+$xformH5CardRadius: 12px;
+$xformH5PageBg: #f1f5fb;
+
+/* ============ 块 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 8px 0;
+    padding-bottom: 6px;
+    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: 1px solid #f6f6f6;
+      position: relative;
+
+      b {
+        font-size: 14px;
+        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 会打断校验链与对比包裹。 */
+.xform-h5 .h5-detail-wrap .h5-item .h5-form-box {
+  padding: 12px;
+
+  .form-widget-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .field-wrapper {
+    width: 100%;
+  }
+
+  /* 半宽（两列），由字段选项 h5Span === 'half' 打在 form-item-wrapper 根节点上 */
+  .field-wrapper.h5-half {
+    width: 50%;
+  }
+
+  .el-form-item {
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+    min-height: $xformH5RowHeight;
+    padding: 6px 0;
+    margin-bottom: 0;
+    border-bottom: 1px solid $xformH5RowBorder;
+
+    /* 对手：style.scss:13860 附近 .h5-detail-wrap .h5-item .el-form-item__label (0,3,0)
+       带 text-align:left !important，且把 &:after 设成了 display:none */
+    .el-form-item__label {
+      width: $xformH5LabelWidth;
+      padding: 0 5px 0 0;
+      margin: 0;
+      line-height: 1.4;
+      height: auto;
+      overflow: hidden;
+      color: #808080;
+      text-align: left !important;
+
+      /* 标签后自动补冒号，对齐 bill_setting form-table 的 th::after。
+         对手把 display 关了，必须先打开再给 content。 */
+      &::after {
+        display: inline !important;
+        content: ":";
+      }
+    }
+
+    .el-form-item__content {
+      flex: 1;
+      line-height: 1.4;
+      text-align: right;
+      word-break: break-word;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+/* ============ 块 D：输入控件归一（去边框、右对齐） ============ */
+.xform-h5 .h5-detail-wrap .h5-item .h5-form-box .el-form-item__content {
+  .el-input,
+  .el-select {
+    width: 100% !important;
+  }
+
+  /* 对手：style.scss:13868 附近 .h5-detail-wrap .h5-item .el-input .el-input__inner (0,4,0)
+     带 height/line-height 双 !important，故本方三条也带 */
+  .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;
+  }
+
+  .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;
+    }
+  }
+}
+
+/* ============ 块 C1：表格布局（.table-layout）下的行高 ============ */
+/* 块 C 那套（flex 行 + min-height:48px）只在字段直接排在 .h5-form-box 里时生效。
+   表单若用「表格布局」，字段会被塞进 td.table-cell，此时 style.scss:9896 起把
+   .field-wrapper 变成 display:table、.el-form-item 变成 display:table-row：
+
+     - table-row 上的 min-height / padding / border 一律不生效 —— 块 C 的 48px
+       行高在这条路径上完全落空；
+     - 那段还想把 .el-form-item__label 设成 table-cell，但 element 的 label 自带
+       float:left，而 CSS 规范里 float 非 none 会把 display 强制算成 block，
+       于是标签变成浮动块、脱出表格流，整行高度只剩内容格的 16.8px（实测）。
+
+   所以这里做两件事：把标签的浮动去掉、还原成真正的 table-cell；行高改用
+   table-row 上的 height（对 table-row 而言 height 即最小高度）。两个单元格
+   vertical-align:middle 之后，标签与值在行内垂直居中。
+   对手 .designer-view .table-layout td.table-cell .field-wrapper .el-form-item …
+   是 (0,6,1)；本方 (0,7,1) 起步。 */
+.xform-h5
+  .h5-detail-wrap
+  .h5-item
+  .h5-form-box
+  .table-layout
+  td.table-cell
+  .field-wrapper
+  .el-form-item {
+  height: $xformH5RowHeight;
+
+  > .el-form-item__label,
+  > .el-form-item__content {
+    display: table-cell;
+    float: none;
+    vertical-align: middle;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+}
+
+/* ============ 块 C2：宽内容字段不走紧凑行版式 ============ */
+/* 附件、图片、富文本这类字段的内容是一片区域而不是一行值。
+   块 C/D 那套（标签定宽 80px + 内容 flex:1 右对齐）是给单行输入设计的，
+   套上去会把附件列表挤到右侧贴着边框、文件名压线、缩略图变形。
+   这里让它们恢复成「标签在上、内容整行左对齐」。
+   h5-block 由 form-item-wrapper 按字段类型打，见其 isH5BlockField。
+   本方 0,6,0 > 块 C/D 的 0,5,0，且在其后定义。 */
+.xform-h5 .h5-detail-wrap .h5-item .h5-form-box .field-wrapper.h5-block {
+  width: 100%;
+
+  .el-form-item {
+    display: block;
+
+    .el-form-item__label {
+      width: auto;
+      float: none;
+      display: block;
+      text-align: left !important;
+    }
+
+    .el-form-item__content {
+      flex: none;
+      text-align: left;
+      margin-left: 0 !important; // el-form 的 label-width 会给 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 .h5-detail-wrap .h5-item .h5-form-box .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 .h5-detail-wrap .h5-item .h5-form-box .field-wrapper.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%;
+  }
+
+  .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;
+    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;
+
+    /* ★ 字段卡片那组的高度必须由内容决定。
+       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;
+  }
+}
+
+/* ★ 页面态必须定死一屏，不能用 min-height。
+   实测宿主链没有确定高度（#containt 只有背景/圆角，没有 height），
+   .designer-view{height:100%} → .xform-h5{height:100%} 一路塌陷成 auto；
+   此时 min-height:100vh 会被内容撑高 → 整页滚动 → 标题栏和底部动作栏跟着滚走。
+   改成 height:100vh + overflow:hidden：容器恰好一屏、外层无可滚余量，
+   内容只在 .h5-detail-body 里滚，标题栏与底栏才真正固定。 */
+.xform-h5 .h5-detail-wrap {
+  height: 100vh;
+  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;
+    }
+  }
+}
+
+/* ============ 明细详情弹框：铺满视口 ============ */
+/* 这个弹框是 :modal="false"（无遮罩），高度又只由内容撑开，
+   于是底部动作栏（通过/驳回/中断）会从弹框下方露出来，看着像两层界面。
+   让它铺满一屏盖住底栏。作用域限定在 .xform-h5 内，不影响 bill_setting
+   那边同样用 .h5view-dialog 的弹框（弹框未 append-to-body，DOM 就在本作用域里）。 */
+.xform-h5 .el-dialog__wrapper .el-dialog.h5view-dialog {
+  margin: 0 !important;
+  height: 100vh;
+  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 {
+  .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;
+    }
+  }
+
+  /* 给角标让位：明细行没有 .t1 标题行，字段区直接顶到右边会被角标压住 */
+  .t2 {
+    padding-right: 28px;
+  }
+}
+
+/* ============ 块 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;
+  }
+}
+
+/* ============ 块 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 里会重复），这里只把它
+     当选择器用来抬特异度，不依赖它唯一。 */
+.xform-h5 .h5-detail-wrap .h5-item .h5-form-box #uploadImage {
+  /* 行容器。模板里写死了内联 display:inline-block;float:left，只能用 !important 压 */
+  .upload-list {
+    display: block !important;
+    float: none !important;
+    width: 100%;
+    margin: 0 0 8px;
+  }
+
+  .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 #f0f1f1;
+    border-radius: 10px;
+    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 {
+        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 {
+  .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;
+  }
+}
+
+/* ============ 块 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: $baseColor;
+      margin-top: 16px;
+
+      &: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;
+        }
+      }
+    }
+  }
+
+  /* ---- 全屏弹层（.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 {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #f6f6f6;
+    z-index: 99;
+
+    /* 骨架：标题栏 / 搜索行 / 底部按钮条 flex:none，中间那段独占剩余高度并内部滚动 */
+    > 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;
+    }
+
+    .flex {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+
+      /* 可滚动的候选列表 */
+      .checkbox-all_list {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+        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);
+
+        .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;
+          }
+        }
+      }
+    }
+
+    /* 按钮口径与块 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;
+        }
+      }
+    }
+
+    /* 列表里的一张候选卡片。原文挂在 .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;
+      }
+
+      .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%;
+          margin-bottom: 4px;
+          display: inline-block;
+        }
+      }
+
+      /* 修改候选人：卡片内的「设置候选人」按钮 */
+      .btns {
+        text-align: right;
+        margin-top: 4px;
+
+        .btn {
+          height: 28px;
+          padding: 0 10px;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+
+  /* ---- 高级筛选抽屉（h5SearchDialog，从 .pop-box 里再弹一层）---- */
+  .pop-screen-box {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+
+    &:before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.3);
+    }
+
+    > 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: 12px;
+        }
+      }
+    }
+  }
+
+  /* ---- 任务情况时间轴 ---- */
+  .h5-process-info {
+    font-size: 12px;
+    padding: 12px 16px;
+    background: #fff;
+    margin: 10px 12px;
+    border-radius: 15px;
+
+    .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);
+
+        p {
+          margin: 2px 0;
+          display: block;
+
+          > span {
+            display: inline-block;
+            min-width: 50%;
+
+            &.name {
+              font-weight: 600;
+              width: 100%;
+              margin-bottom: 3px;
+            }
+          }
+
+          &.t {
+            display: flex;
+
+            .t1 {
+              min-width: 65px;
+              margin-right: 0;
+              flex: none;
+            }
+
+            span {
+              flex: 1;
+              white-space: pre-line;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* ---- 确认/表单提示框（通过、驳回、转办等）---- */
+  /* 注意：.icon 沿用 resources/images 下的图标，`~@/` 在消费应用里解析到它自己的
+     src/resources/images —— 该目录同样不在 package.json files 内，属隐式依赖。
+     消费应用现有的 h5.scss 已引用同一批图，故风险可控；若要彻底解耦可换字体图标。 */
+  .pop-tipsBox {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: rgba(0, 0, 0, 0.4);
+      z-index: 998;
+    }
+
+    > div {
+      position: fixed;
+      top: 24%;
+      left: 32px;
+      right: 32px;
+      box-shadow: 0 0 14px rgba(0, 0, 0, 0.16);
+      border-radius: 18px;
+      padding: 68px 16px 18px;
+      text-align: center;
+      z-index: 999;
+      background-color: #fff;
+      background-size: 100% auto;
+      border: solid 2px #fff;
+
+      .icon {
+        background: url(~@/resources/images/icon-tips.png) no-repeat center;
+        background-size: cover;
+        position: absolute;
+        top: -19px;
+        left: 50%;
+        margin-left: -34px;
+        width: 68px;
+        height: 68px;
+        border-radius: 50%;
+        border: solid 2px #fff;
+      }
+
+      .cont {
+        padding: 0 0 18px;
+
+        .name {
+          font-weight: 600;
+          font-size: 18px;
+          margin-bottom: 24px;
+        }
+
+        .txt {
+          max-height: 100px;
+          overflow: auto;
+          word-break: break-word;
+        }
+
+        .txt2 {
+          max-height: 200px;
+          overflow: auto;
+          word-break: break-word;
+        }
+
+        .form-box {
+          border: solid 1px #dcdcdc;
+          padding: 0 12px;
+          border-radius: 10px;
+          margin-top: -8px;
+
+          .line {
+            border: solid 1px #e8e8e8;
+          }
+        }
+      }
+
+      .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;
+}