chore:表单横幅缩小
This commit is contained in:
@@ -202,7 +202,7 @@ const localDevConfig = ({
|
||||
// })['2724']; // 生物菌肥
|
||||
// })['2811']; // 选择要使用的环境配置
|
||||
// })['local-11']; // 选择要使用的环境配置
|
||||
})['5g-97']; // 本地
|
||||
})['2811']; // 本地
|
||||
// })['local-2']; // 本地
|
||||
// })['local-11']; // 本地
|
||||
// })['1-test']; // test
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user