Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：二维码独立块

Browse Source
This commit is contained in:
jing
2026-10-24 16:42:59 +08:00
parent e19837b887
commit d446377683
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components-diy/diy-card-mini.vue
View File

@@ -344,15 +344,16 @@ export default {
return { marginTop: Math.max(24, total - headHeight + 10) + 'rpx' }; return { marginTop: Math.max(24, total - headHeight + 10) + 'rpx' };
}, },
/** /**
* 二维码容器样式: 只管尺寸(自定义>档位自动) + 微调位移(transform, WXSS 支持)。 * 二维码容器样式: head/corner 按码尺寸定宽; rows/bottom 走通栏白卡(参考图),
* 宽度交给卡内容区。微调位移(transform, WXSS 支持)仍作用于容器。
* 外观衬底(白卡/主题色/渐变)在 qrImgStyle 上只包二维码图 —— * 外观衬底(白卡/主题色/渐变)在 qrImgStyle 上只包二维码图 ——
* 「扫码查看完整名片」提示(2026-10-23 用户要求)在衬底外, 无蓝底 * 「扫码查看完整名片」提示(2026-10-23 用户要求)在衬底外, 无蓝底
*/ */
qrBlockStyle() { qrBlockStyle() {
const size = resolveQrSize(this.qrPos, this.c.qrSize); const size = resolveQrSize(this.qrPos, this.c.qrSize);
const style = { const style = {};
width: size + 'rpx', // head/corner 浮层按码尺寸定宽; rows/bottom 通栏白卡宽度由卡内容区决定
}; if (this.qrPos === 'head' || this.qrPos === 'corner') style.width = size + 'rpx';
const transform = qrTransform(this.c.qrOffsetX, this.c.qrOffsetY); const transform = qrTransform(this.c.qrOffsetX, this.c.qrOffsetY);
if (transform) style.transform = transform; if (transform) style.transform = transform;
return this.$util.objToStyle(style); return this.$util.objToStyle(style);
@@ -1301,6 +1302,16 @@ export default {
} }
} }
/* 二维码独立白卡(参考图): rows/bottom 档通栏白底 + 圆角 + 细边 + 阴影 + 内边距 */
.mini-qr.mini-qr-center {
width: auto;
background: #ffffff;
border-radius: 20rpx;
border: 1rpx solid #EEF0F3;
box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.08);
padding: 24rpx;
}
.mini-qr { .mini-qr {
position: relative; position: relative;
z-index: 2; z-index: 2;