chore:表单横幅缩小

This commit is contained in:
2026-09-02 10:51:46 +08:00
parent ff3c2a0d9b
commit aafd888596
2 changed files with 28 additions and 2 deletions

View File

@@ -202,7 +202,7 @@ const localDevConfig = ({
// })['2724']; // 生物菌肥
// })['2811']; // 选择要使用的环境配置
// })['local-11']; // 选择要使用的环境配置
})['5g-97']; // 本地
})['2811']; // 本地
// })['local-2']; // 本地
// })['local-11']; // 本地
// })['1-test']; // test

View File

@@ -7,7 +7,11 @@
r=function(){var o=this.value.show_banner...this.$mp.data...})
报 "Cannot read properties of undefined (reading 'show_banner')"。 -->
<view v-if="value && value.show_banner && value.form_banner" class="form-banner is-card-overlap" :style="bannerStyle + bannerBleedStyle">
<image :src="$util.img(value.form_banner)" mode="widthFix" class="banner-img" />
<!-- 固定高度容器:默认 180rpx ≈ 页面 1/8,由 formConfig.bannerHeight 控制。
图片用 mode="aspectFill" 居中裁剪填充,使横幅只占页面八分之一(与设计图一致)。 -->
<view class="banner-img-wrap" :style="bannerImgWrapStyle">
<image :src="$util.img(value.form_banner)" mode="aspectFill" class="banner-img" />
</view>
</view>
<!-- 卡片容器:仅在后台配置了 banner 图片时启用,让表单浮在 banner 之上(参考左图布局)。
无 banner 时不渲染 .form-card,保持原有平铺行为,零外溢。 -->
@@ -136,6 +140,14 @@ export default {
padding: `0 ${this._num(this.mergedFormConfig && this.mergedFormConfig.bannerPaddingX, 0)}rpx`
});
},
// Banner 图片包裹层高度(rpx)。固定高度使图片用 mode="aspectFill" 居中裁剪填充,
// 保证横幅只占页面 1/8 左右(默认 180rpx ≈ 1334rpx 屏高的 13.5%,接近 1/8)。
// 后台可配 formConfig.bannerHeight(camelCase)/ banner_height(snake_case)。
bannerImgWrapStyle() {
return this.$util.objToStyle({
height: `${this._num(this.mergedFormConfig && this.mergedFormConfig.bannerHeight, 180)}rpx`
});
},
// 后台配了 banner 图片时启用卡片浮起布局(与参考设计左图一致);无 banner 走原平铺,零外溢
hasBannerMode() {
const v = this.value || {};
@@ -261,6 +273,9 @@ export default {
// 通用全局配置(与后端 design.js getDefaultFormData().formConfig 字段名一致)
const base = {
formPaddingX: pick('formPaddingX', 'form_padding_x'),
// Banner 高度(rpx)。后台可配,默认 180rpx ≈ 页面 1/8 高度(适配主流手机屏高)
// 配合 mode="aspectFill" 居中裁剪,保证横幅只占页面八分之一左右
bannerHeight: pick('bannerHeight', 'banner_height'),
bannerPaddingX: pick('bannerPaddingX', 'banner_padding_x'),
tipPaddingX: pick('tipPaddingX', 'tip_padding_x'),
rowPaddingY: pick('rowPaddingY', 'row_padding_y'),
@@ -479,8 +494,19 @@ export default {
z-index: 1;
}
// 横幅图片固定高度容器:默认 180rpx ≈ 页面 1/8,与 bannerImgWrapStyle 默认值一致。
// 后台可通过 formConfig.bannerHeight / banner_height 覆盖。
// 配合 mode="aspectFill" 使图片居中裁剪填充,跨端一致呈现"只占页面八分之一"的视觉效果。
.banner-img-wrap {
width: 100%;
height: 180rpx;
overflow: hidden;
position: relative;
}
.banner-img {
width: 100%;
height: 100%;
display: block;
}
}