From cb454db326da89dc0684a567e15e6bfac399cd7e Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Fri, 23 Oct 2026 09:59:12 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E6=88=91=E7=9A=84=E5=90=8D?=
=?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components-diy/diy-card-mini.vue | 76 ++++++++++++++++++++++----------
tests/diy-card-qr-style.test.js | 17 ++++---
2 files changed, 65 insertions(+), 28 deletions(-)
diff --git a/components-diy/diy-card-mini.vue b/components-diy/diy-card-mini.vue
index 260b212..7f567a5 100644
--- a/components-diy/diy-card-mini.vue
+++ b/components-diy/diy-card-mini.vue
@@ -23,8 +23,10 @@
-
-
+
+
+
+
@@ -99,15 +101,17 @@
{{ qrTip || '扫码查看完整名片' }}
-
-
- {{ detailBtnText || '发送名片' }}
-
-
{{ sendBtnText || '发名片' }}
+
+
+
+
+
+ {{ detailBtnText || '发送名片' }}
@@ -289,6 +293,10 @@ export default {
gradientStyle() {
return this.$util.objToStyle({ background: themeGradient(this.card) });
},
+ bandStyle() {
+ // 蓝色顶带底色: 名片主题渐变(精选名片 show 同款)
+ return this.$util.objToStyle({ background: themeGradient(this.card) });
+ },
avatarStyle() {
return this.$util.objToStyle({ background: avatarBg(this.card) });
},
@@ -381,11 +389,31 @@ export default {
.card-mini {
width: 100%;
+ /* 顶带+白卡同容器: 顶带 top/bottom 拉伸 → 高度自适应白卡,
+ 弧线始终距白卡底 88rpx(2026-10-23 参考图定稿, 与 show 同口径) */
+ .mini-card-wrap {
+ position: relative;
+ margin-top: 40rpx;
+ }
+
+ /* 主题色顶带: 从露沿处拉伸, 底端距白卡底 88rpx; 顶部直角, 底部 28rpx 小圆弧 */
+ .mini-band {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: -40rpx;
+ bottom: 88rpx;
+ height: auto;
+ border-radius: 0 0 28rpx 28rpx;
+ }
+
.mini-card {
position: relative;
overflow: hidden;
- width: 100%;
+ width: auto;
+ margin: 0 24rpx;
box-sizing: border-box;
+ z-index: 1;
.mini-badge-slot {
position: absolute;
@@ -641,21 +669,6 @@ export default {
}
}
- .mini-detail {
- position: relative;
- z-index: 2;
- margin-top: 24rpx;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .detail-text {
- font-size: 26rpx;
- font-weight: 600;
- color: #ffffff;
- }
- }
-
/* 发名片主按钮(名片详情页 send-bar 同款观感) */
.mini-send {
position: relative;
@@ -673,6 +686,23 @@ export default {
}
}
+ /* 发送名片大按钮: 白卡外下方(2026-10-23 参考图定稿),
+ 与精选名片「发名片」同款布局; 左右 24rpx 与白卡对齐 */
+ .mini-detail {
+ position: relative;
+ z-index: 2;
+ margin: 24rpx 24rpx 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .detail-text {
+ font-size: 26rpx;
+ font-weight: 600;
+ color: #ffffff;
+ }
+ }
+
/* 空态 */
.mini-empty {
width: 100%;
diff --git a/tests/diy-card-qr-style.test.js b/tests/diy-card-qr-style.test.js
index ec7d009..a3a6c91 100644
--- a/tests/diy-card-qr-style.test.js
+++ b/tests/diy-card-qr-style.test.js
@@ -158,11 +158,18 @@ test('common: qrTransform 位移(任一轴非零才输出; WXSS 支持 translate
// 2. mini.vue 基件契约
// =============================================================
-test('mini: 白卡平铺版式(2026-10-22 参考图定稿, 顶带方案已废弃)', () => {
- // 名片卡分支直接渲染, 不再包 mini-block/mini-band
- assert.match(miniSrc, / {
+ // 模板: 卡片包进 wrap, 顶带在最前
+ assert.match(miniSrc, /class="mini-card-wrap"/);
+ assert.match(miniSrc, /class="mini-band" :style="bandStyle"/);
+ assert.match(miniSrc, /class="mini-card fade-up" :style="wrapStyle"/);
+ // 计算属性: 顶带底色走主题渐变(与 show bandStyle 同口径)
+ assert.match(miniSrc, /bandStyle\(\)\s*\{\s*return this\.\$util\.objToStyle\(\{\s*background: themeGradient\(this\.card\)\s*\}\);/);
+ // CSS: wrap 撑露沿 + band 拉伸(top:-40rpx / bottom:88rpx) + 圆角(顶直底弧)
+ assert.match(miniSrc, /\.mini-card-wrap \{\s*position: relative;\s*margin-top: 40rpx;/);
+ assert.match(miniSrc, /\.mini-band \{\s*position: absolute;[\s\S]*?top: -40rpx;[\s\S]*?bottom: 88rpx;[\s\S]*?border-radius: 0 0 28rpx 28rpx;/);
+ // mini-block 方案不得回归
+ assert.ok(!miniSrc.includes('mini-block'));
});
test('mini: 企业徽标固定红底(参考图口径, 与头像底色解耦)', () => {