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\)/); });