cloud-web-corejs 1.1.0-dev.15 → 1.1.0-dev.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.1.0-dev.15",
+  "version": "1.1.0-dev.16",
   "scripts": {
     "dev": "vue-cli-service serve",
     "dev:micro": "vue-cli-service serve --port 17527",

package/src/components/xform/form-render/container-item/list-h5-item.vue

@@ -604,7 +604,10 @@
                     <template
                       v-if="!widget.options.isQueryTable || !column.isMainFiled"
                     >
-                      <dl>
+                      <!-- 与列表卡片同口径：列配了 H5列宽=半行 时打 m2。
+                           弹框 append-to-body，样式挂在 .el-dialog.h5view-dialog，
+                           见 styles/h5.scss。 -->
+                      <dl :key="columnIndex" :class="{ m2: isHalfColumn(column) }">
                         <div>
                           <dt>{{ column.title }}：</dt>
                           <dd>

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

@@ -746,8 +746,10 @@ $xformH5Size:14px;
   }
 }
 
-/* dd 里是真控件的那份（「明细详情」弹框，list-h5-item.vue:478）。
-   列表行本身只出纯文本，这一段只对弹框生效。 */
+/* dd 里是真控件的那份。列表行本身只出纯文本。
+   明细详情弹框 append-to-body，不在 .xform-h5 下，真正生效的是
+   下方 .el-dialog.h5view-dialog 里同一口径的规则；这段留给弹框
+   万一没挂到 body 时的兜底。 */
 .xform-h5 .h5-list-box .item .t2 > dl > div > dd {
   margin:0;
   /* 压 style.scss:14112 的 width:calc(100vw - 159px)，本方 (0,5,2) > (0,4,1) */
@@ -1789,13 +1791,51 @@ $xformH5Size:14px;
      margin:12px;padding:0 !important;background:none !important;
      .item{
        border:none;
+       /* 明细详情弹框 append-to-body，节点不在 .xform-h5 里，
+          列表卡片那套 `.xform-h5 .h5-list-box .item .t2` 一行两个打不到。
+          这里按同一口径接上：.t2 变 flex 容器，dl.m2 占 50%。 */
        .t2{
-         dl{
+         display: flex;
+         flex-wrap: wrap;
+         align-items: flex-start;
+         > dl{
            font-size:14px;color:#666;
+           &.m2 {
+             width: 50%;
+           }
+           &.m2 > div {
+             flex-wrap: wrap;
+           }
+           &.m2 > div > dd {
+             flex: 1 1 auto;
+             min-width: 0;
+           }
            dd{
              margin:0;
              color:#323232;
              text-align:right;
+             min-width: 0;
+             /* 压 style.scss:14112 的 width:calc(100vw - 159px)。
+                弹框里是真控件，半行净宽撑不住整屏宽。 */
+             .field-wrapper,
+             .field-wrapper.h5-field {
+               display: block;
+               width: auto;
+             }
+             .field-wrapper.h5-field .el-form-item {
+               display: block;
+               min-height: 0;
+               margin-bottom: 0;
+               padding: 0;
+               border-bottom: none;
+             }
+             /* dt 已经出过字段名，藏掉控件自带的第二份 label */
+             .field-wrapper.h5-field .el-form-item > .el-form-item__label {
+               display: none;
+             }
+             .field-wrapper.h5-field .el-form-item > .el-form-item__content {
+               margin-left: 0 !important;
+             }
            }
          }
        }