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 @@ - + + + - + @@ -81,6 +83,7 @@ + @@ -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; }