chore:表单修改边距

This commit is contained in:
2026-09-02 11:44:19 +08:00
parent aafd888596
commit b31c133d8e

View File

@@ -6,7 +6,7 @@
<view :style="themeColor">
<!-- #endif -->
<!-- 顶部图条:位于 navbar 之下、表单卡片之上。宽度 calc(100% - 2*containerInset) 水平居中,
留下与卡片等宽的左右对称留白(默认容器内缩 50rpx ≈ 屏宽 6.7%,即内容宽 87%)。
留下与卡片等宽的左右对称留白(默认容器内缩 30rpx ≈ 屏宽 1.3%,即内容宽 97.3%,与参考图一致)。
图片由后台 form_config.bg_image / bgImage 下发;未配置时不渲染,保持原来的纯白布局。 -->
<view v-if="bgImage" class="formdata-bg" :style="bgLayerStyle"></view>
<!--
@@ -231,13 +231,15 @@ export default {
return raw ? this.$util.img(raw) : '';
},
// 容器左右内缩(rpx)。后台 form_config.container_inset / containerInset 可调;
// 默认 50rpx,在 750rpx 屏宽下左右各留 50rpx ≈ 6.7%,内容宽 ≈ 87%,
// 与参考图一致;CSS .system-form-wrap 中也写了这个默认 padding(防 H5 computed 未及时就绪时也生效)
// 默认 30rpx,在 750rpx 屏宽下左右各留 30rpx ≈ 4%,内容宽 ≈ 92%。
// ⚠️ 改这里才生效:本 computed 的返回值通过 containerStyle 内联样式作用于 .system-form-wrap,
// 内联样式优先级高于 SCSS 类选择器,会覆盖下方 SCSS 里的 padding(SCSS 仅作首屏兜底)。
// ⚠️ 后台优先级最高:若 form_config.containerInset / container_inset 下发了数值,会覆盖此默认值。
containerInset() {
const fc = (this.detail && this.detail.form_config) || {};
const raw = fc.containerInset !== undefined ? fc.containerInset : fc.container_inset;
const n = parseInt(raw);
return isNaN(n) ? 50 : Math.min(150, Math.max(0, n));
return isNaN(n) ? 30 : Math.min(150, Math.max(0, n));
},
// 顶部图条高度(rpx)。后台 form_config.bg_image_height 可调;clamp 80-600
bgImageHeight() {
@@ -986,8 +988,10 @@ page {
overflow: visible;
margin: 0 0 60rpx 0;
/* ===== 表单卡片:唯一保留白底的区域 =====
87% 宽居中 + 16rpx 圆角 + 白底,对应红色框范围(从图条底部到页面底部) */
padding: 0 50rpx;
92% 宽居中(左右各留 30rpx ≈ 4%) + 16rpx 圆角 + 白底,对应红色框范围(从图条底部到页面底部)。
⚠️ 注意:此 padding 仅为首屏兜底(H5 computed 尚未就绪时生效),
运行中会被 containerStyle 内联样式覆盖,实际值由 containerInset computed 决定 */
padding: 0 30rpx;
box-sizing: border-box;
background-color: #ffffff;
border-radius: 16rpx;
@@ -1021,7 +1025,9 @@ page {
overflow: visible;
margin: 0 0 60rpx 0;
// ===== 表单卡片:默认就是「白底圆角、左右内缩居中」(参考图效果),不依赖后台配置 =====
padding: 0 50rpx;
// 左右各留 30rpx(≈ 4% 屏宽),与 H5/MP/APP 端保持一致;后台可通过 form_config.container_inset 调整
// ⚠️ 注意:此 padding 仅为首屏兜底,运行中会被 containerStyle 内联样式覆盖(同 H5/MP/APP 端)
padding: 0 30rpx;
box-sizing: border-box;
background-color: #ffffff;
border-radius: 16rpx;
@@ -1037,7 +1043,7 @@ page {
*/
.form-card {}
// 穿透 diy-form 包装层:消除其自带的 10rpx 圆角与白色背景,
// 穿透 diy-form 包装层:消除其自带的 30rpx 圆角与白色背景,
// 让 form 内容区域保持与原始 ns-newform 接入时一致的视觉
.system-form-wrap ::v-deep .diy-from {
background: transparent;
@@ -1102,11 +1108,11 @@ page {
::v-deep .mescroll-totop {
/* #ifdef H5 */
right: 27rpx !important;
right: 230rpx !important;
bottom: 120rpx !important;
/* #endif */
/* #ifdef MP */
right: 27rpx !important;
right: 230rpx !important;
bottom: 180rpx !important;
/* #endif */
}