From 887c1848a420e96ba243c8a7d911f9e9f710544d Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Fri, 23 Oct 2026 09:43:03 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E7=B2=BE=E9=80=89=E5=90=8D?=
 =?UTF-8?q?=E7=89=87=E5=90=8D=E7=89=87=E9=AB=98=E5=BA=A6=E5=8F=98=E5=8C=96?=
 =?UTF-8?q?=E6=97=B6=E8=BF=99=E6=AE=B5=E8=B7=9D=E7=A6=BB=E6=81=92=E5=AE=9A?=
 =?UTF-8?q?=E6=94=B9=E6=8B=89=E4=BC=B8=E7=BB=88=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-card-show.vue | 34 ++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/components-diy/diy-card-show.vue b/components-diy/diy-card-show.vue
index 24649f5..c9711e7 100644
--- a/components-diy/diy-card-show.vue
+++ b/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;
 		}