chore:表单横幅缩小
This commit is contained in:
@@ -202,7 +202,7 @@ const localDevConfig = ({
|
|||||||
// })['2724']; // 生物菌肥
|
// })['2724']; // 生物菌肥
|
||||||
// })['2811']; // 选择要使用的环境配置
|
// })['2811']; // 选择要使用的环境配置
|
||||||
// })['local-11']; // 选择要使用的环境配置
|
// })['local-11']; // 选择要使用的环境配置
|
||||||
})['5g-97']; // 本地
|
})['2811']; // 本地
|
||||||
// })['local-2']; // 本地
|
// })['local-2']; // 本地
|
||||||
// })['local-11']; // 本地
|
// })['local-11']; // 本地
|
||||||
// })['1-test']; // test
|
// })['1-test']; // test
|
||||||
|
|||||||
@@ -7,7 +7,11 @@
|
|||||||
r=function(){var o=this.value.show_banner...this.$mp.data...})
|
r=function(){var o=this.value.show_banner...this.$mp.data...})
|
||||||
报 "Cannot read properties of undefined (reading 'show_banner')"。 -->
|
报 "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">
|
<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>
|
</view>
|
||||||
<!-- 卡片容器:仅在后台配置了 banner 图片时启用,让表单浮在 banner 之上(参考左图布局)。
|
<!-- 卡片容器:仅在后台配置了 banner 图片时启用,让表单浮在 banner 之上(参考左图布局)。
|
||||||
无 banner 时不渲染 .form-card,保持原有平铺行为,零外溢。 -->
|
无 banner 时不渲染 .form-card,保持原有平铺行为,零外溢。 -->
|
||||||
@@ -136,6 +140,14 @@ export default {
|
|||||||
padding: `0 ${this._num(this.mergedFormConfig && this.mergedFormConfig.bannerPaddingX, 0)}rpx`
|
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 走原平铺,零外溢
|
// 后台配了 banner 图片时启用卡片浮起布局(与参考设计左图一致);无 banner 走原平铺,零外溢
|
||||||
hasBannerMode() {
|
hasBannerMode() {
|
||||||
const v = this.value || {};
|
const v = this.value || {};
|
||||||
@@ -261,6 +273,9 @@ export default {
|
|||||||
// 通用全局配置(与后端 design.js getDefaultFormData().formConfig 字段名一致)
|
// 通用全局配置(与后端 design.js getDefaultFormData().formConfig 字段名一致)
|
||||||
const base = {
|
const base = {
|
||||||
formPaddingX: pick('formPaddingX', 'form_padding_x'),
|
formPaddingX: pick('formPaddingX', 'form_padding_x'),
|
||||||
|
// Banner 高度(rpx)。后台可配,默认 180rpx ≈ 页面 1/8 高度(适配主流手机屏高)
|
||||||
|
// 配合 mode="aspectFill" 居中裁剪,保证横幅只占页面八分之一左右
|
||||||
|
bannerHeight: pick('bannerHeight', 'banner_height'),
|
||||||
bannerPaddingX: pick('bannerPaddingX', 'banner_padding_x'),
|
bannerPaddingX: pick('bannerPaddingX', 'banner_padding_x'),
|
||||||
tipPaddingX: pick('tipPaddingX', 'tip_padding_x'),
|
tipPaddingX: pick('tipPaddingX', 'tip_padding_x'),
|
||||||
rowPaddingY: pick('rowPaddingY', 'row_padding_y'),
|
rowPaddingY: pick('rowPaddingY', 'row_padding_y'),
|
||||||
@@ -479,8 +494,19 @@ export default {
|
|||||||
z-index: 1;
|
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 {
|
.banner-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user