refactor(diy-form.vue): 优化横幅裁剪逻辑，调整背景位置处理以适应uni-app H5编译器

components-diy/diy-form.vue

@@ -754,12 +754,13 @@ export default {
 				}
 			}
 
-			// 启用 aspectFill 裁剪时，包装一层 .banner-img-crop 承接裁剪位置 transform。
-			// 重要：uni-app image 在 H5 端固定转译为 <div style="background-image:url; background-size:cover; background-position:center center;"></div> + <img>，
-			// background-size:cover 让背景始终 cover 父容器，裁剪位置通过父 .banner-img 的 translateY 实现：
-			//   - crop-top    → image 不偏移（顶部对齐 wrap 顶部）
-			//   - crop-center → image translateY(-50%)（图片垂直居中）
-			//   - crop-bottom → image translateY(-100%)（图片底部对齐 wrap 底部）
+			// 启用 aspectFill 裁剪时，包装一层 .banner-img-crop 承接裁剪位置。
+			// 重要：uni-app image 在 H5 端固定转译为 <div style="background-image:url; background-size:cover; background-position:center center;"></div>，
+			// 内层 div 的 background-position 是运行时生成的 inline 样式，普通 CSS 覆盖不了，必须 !important；
+			// （不能用 .banner-img 的 translateY 实现位置：image 高度被钉死为容器 100% 后 transform 一去一回相互抵消，是零位移）
+			//   - crop-top    → background-position: center top（显示图片顶部区域）
+			//   - crop-center → 默认 center center（不覆盖）
+			//   - crop-bottom → background-position: center bottom（显示图片底部区域）
 			&.has-crop {
 				.banner-img-crop {
 					position: absolute;
@@ -777,16 +778,13 @@ export default {
 					top: 0;
 					width: 100%;
 				}
-				.banner-img-crop.crop-top .banner-img {
-					transform: translateY(0);
+				// uni-app H5 编译器会给样式追加 [data-v-xxx]（即使未写 scoped），
+				// 而 uni-image 运行时 JS 生成的内层 div 没有该属性 → 必须 ::v-deep 把属性选择器挪到 .banner-img 上
+				.banner-img-crop.crop-top .banner-img ::v-deep div {
+					background-position: center top !important;
 				}
-				.banner-img-crop.crop-center .banner-img {
-					transform: translateY(-50%);
-					top: 50%;
-				}
-				.banner-img-crop.crop-bottom .banner-img {
-					transform: translateY(-100%);
-					top: 100%;
+				.banner-img-crop.crop-bottom .banner-img ::v-deep div {
+					background-position: center bottom !important;
 				}
 			}