From aafd88859611b4c44ae8bd31cfb2d5a2672b2142 Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Wed, 2 Sep 2026 10:51:46 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E8=A1=A8=E5=8D=95=E6=A8=AA?=
 =?UTF-8?q?=E5=B9=85=E7=BC=A9=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .local.config.js            |  2 +-
 components-diy/diy-form.vue | 28 +++++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/.local.config.js b/.local.config.js
index a87462b..bb6b23c 100644
--- a/.local.config.js
+++ b/.local.config.js
@@ -202,7 +202,7 @@ const localDevConfig = ({
 // })['2724']; // 生物菌肥
 // })['2811']; // 选择要使用的环境配置
 // })['local-11']; // 选择要使用的环境配置
-})['5g-97']; // 本地
+})['2811']; // 本地
 // })['local-2']; // 本地
 // })['local-11']; // 本地
 // })['1-test']; // test
diff --git a/components-diy/diy-form.vue b/components-diy/diy-form.vue
index 043a366..5a10325 100644
--- a/components-diy/diy-form.vue
+++ b/components-diy/diy-form.vue
@@ -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;
 		}
 	}