From efa7c736f9bc8703c12e8e56e784af7419e068ae Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Thu, 22 Oct 2026 18:25:00 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E4=B8=BB=E9=A2=98=E6=B8=90?=
=?UTF-8?q?=E5=8F=98=E9=A5=B0=E6=9D=A1=E6=AD=A3=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components-diy/diy-card-common.js | 5 ++++-
components-diy/diy-card-mini.vue | 24 ++++++++++++++++--------
tests/diy-card-ab-visual.test.js | 7 +++++--
3 files changed, 25 insertions(+), 11 deletions(-)
diff --git a/components-diy/diy-card-common.js b/components-diy/diy-card-common.js
index b5ba9cc..7bffa30 100644
--- a/components-diy/diy-card-common.js
+++ b/components-diy/diy-card-common.js
@@ -192,7 +192,10 @@ export function normalizeQrPosition(v) {
return QR_POSITION_ALIAS[s] || 'rows';
}
/** 各档位的二维码边长(rpx): 头部右侧紧凑, 浮层带衬底, 行下/底部大图便于扫 */
-export const QR_SIZES = { rows: 180, head: 120, corner: 120, bottom: 180 };
+/** 二维码默认尺寸(rpx); 面板「二维码尺寸」留空/0 = 按位自动取此档。
+ * rows/bottom(流内大码)240, head(头部右侧)200 —— 以 2026-10-22 用户参考图(C 端运行效果)定稿;
+ * corner(右上浮层, 占 Logo 位)空间受限保持 120 */
+export const QR_SIZES = { rows: 240, head: 200, corner: 120, bottom: 240 };
/**
* 二维码外观样式(四档): plain 原图 / card 白卡描边(默认) / theme 主题色底 /
diff --git a/components-diy/diy-card-mini.vue b/components-diy/diy-card-mini.vue
index a1fd54a..e3262cd 100644
--- a/components-diy/diy-card-mini.vue
+++ b/components-diy/diy-card-mini.vue
@@ -78,8 +78,8 @@
-
-
+
+
{{ qrTip || '扫码查看完整名片' }}
@@ -94,7 +94,7 @@
-
+
{{ qrTip || '扫码查看完整名片' }}
@@ -410,12 +410,14 @@ export default {
}
.mini-gradient {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 10rpx;
+ /* 流内饰条(2026-10-22 参考图定稿, show 的 .card-grad-bar 同款):
+ 不再 absolute 贴死卡顶, 改为排在头像行上方并与其拉开 28rpx */
+ position: relative;
z-index: 2;
+ width: 100%;
+ height: 14rpx;
+ border-radius: 8rpx;
+ margin-bottom: 28rpx;
}
.mini-logo {
@@ -584,6 +586,12 @@ export default {
flex-direction: column;
align-items: center;
+ /* rows/bottom 档(流内块级)水平居中; corner/head 档不带本类, 定位不受影响 */
+ &.mini-qr-center {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
/* 块尺寸由 qrBlockStyle 内联给出(自定义/档位), 图片填满内容盒 */
.qr-img {
width: 100%;
diff --git a/tests/diy-card-ab-visual.test.js b/tests/diy-card-ab-visual.test.js
index 4c1d528..16c419c 100644
--- a/tests/diy-card-ab-visual.test.js
+++ b/tests/diy-card-ab-visual.test.js
@@ -103,8 +103,11 @@ test('mini: 二维码四档渲染分支齐全', () => {
// 模板四个挂点
assert.match(miniSrc, /v-if="showQrCorner" class="mini-qr mini-qr-corner"/);
assert.match(miniSrc, /v-if="showQrHead" class="mini-qr mini-qr-head"/);
- assert.match(miniSrc, /v-if="showQrRows" class="mini-qr"/);
- assert.match(miniSrc, /v-if="showQrBottom" class="mini-qr"/);
+ // rows/bottom 档流内块级, 带 mini-qr-center 水平居中(2026-10-22: 修复二维码偏左)
+ assert.match(miniSrc, /v-if="showQrRows" class="mini-qr mini-qr-center"/);
+ assert.match(miniSrc, /v-if="showQrBottom" class="mini-qr mini-qr-center"/);
+ // 居中只加左右 auto 边距, 不碰 corner/head 档定位
+ assert.match(miniSrc, /&\.mini-qr-center \{\s*margin-left: auto;\s*margin-right: auto;\s*\}/);
// 总条件仍要求名片有 qr_url
assert.match(miniSrc, /showQrBase\(\)\s*\{\s*return flagOn\(this\.c\.showQr,\s*false\) && !!\(this\.card && this\.card\.qr_url\)/);
});