chore：精选名片名片高度变化时这段距离恒定改拉伸终点

components-diy/diy-card-show.vue

@@ -17,9 +17,11 @@
 
 		<!-- 名片: 主题色顶栏 + 白卡压边(参考图版式, 自绘不复用 mini 基件) -->
 		<view v-else class="show-block">
-			<view class="show-band" :style="bandStyle"></view>
+			<!-- 包裹层: 顶带与白卡同容器, 顶带 top/bottom 拉伸 → 高度始终自适应白卡 -->
+			<view class="show-card-wrap">
+				<view class="show-band" :style="bandStyle"></view>
 
-			<view class="show-card" :style="cardShellStyle">
+				<view class="show-card" :style="cardShellStyle">
 				<!-- 封面图作背景(面板可关): 铺满整卡 + 压暗遮罩, 内容层 z-index 抬升防遮挡 -->
 				<image v-if="showCover" class="card-cover" :src="$util.img(card.cover)" mode="aspectFill" />
 				<view v-if="showCover" class="card-cover-scrim"></view>
@@ -81,6 +83,7 @@
 					</view>
 				</view>
 			</view>
+			</view>
 
 			<!-- 主按钮上方档: 大码居中卡于白卡与发名片按钮之间 -->
 			<view v-if="showQrBottom" class="qr-center qr-center-bottom" :style="qrBlockStyle" hover-class="btn-press" @tap.stop="openCardShare">
@@ -481,21 +484,26 @@ export default {
 	.show-block {
 		position: relative;
 		width: 100%;
-		/* 卡片上方露蓝: 用 padding 撑开(子元素 margin-top 会塌陷出容器,
-		   把蓝色背景层一起推下去, 顶部就露出页面白底了) */
-		padding-top: 40rpx;
 
-		/* 主题色顶栏: 只铺上半段, 下半段回落页面底色(白卡自行压边);
-		   底部两角大圆角(2026-10-23 参考图定稿): 露出的蓝色侧条底端呈下收弧线;
-		   高度 520rpx(参考图: 弧线落在末行资料下方, 白卡底部附近) */
+		/* 顶带+白卡同容器: 顶带 top/bottom 拉伸, 高度始终自适应白卡
+		   (不管名片行数/二维码档位怎么变, 蓝色侧条弧线永远贴白卡底) */
+		.show-card-wrap {
+			position: relative;
+			/* 卡片上方露蓝沿 40rpx(由顶带 top:-40rpx 上伸形成) */
+			margin-top: 40rpx;
+		}
+
+		/* 主题色顶栏: 从露沿处拉伸, 底端始终距白卡底 88rpx(用户定稿:
+		   参考图中弧线到白卡底的这段距离, 名片高度变化时保持不变);
+		   顶部直角(2026-10-23 参考图定稿: 顶带两上角不再圆);
+		   底部 28rpx 小圆弧(用户定稿弧度) */
 		.show-band {
 			position: absolute;
 			left: 0;
-			top: 0;
-			width: 100%;
-			height: 350rpx;
-			/* 顶部直角(2026-10-23 参考图定稿: 顶带两上角不再圆);
-			   底部 40rpx 小圆弧(用户反馈: 弧度比 80rpx 收小一档, 参考第二张图) */
+			right: 0;
+			top: -40rpx;
+			bottom: 88rpx;
+			height: auto;
 			border-radius: 0 0 28rpx 28rpx;
 		}