diff --git a/components-diy/diy-card-mini.vue b/components-diy/diy-card-mini.vue index 6ed762e..67b0634 100644 --- a/components-diy/diy-card-mini.vue +++ b/components-diy/diy-card-mini.vue @@ -25,7 +25,7 @@ - + @@ -267,12 +267,18 @@ export default { }, wrapStyle() { const c = this.c; - return this.$util.objToStyle({ + const style = { background: flagOn(c.useCover, false) && this.card && this.card.cover ? 'transparent' : (c.bgColor || CardTokens.color.bg), borderRadius: px2rpx(num(c.borderRadius, CardTokens.radius.md)) + 'rpx', padding: px2rpx(num(c.padding, CardTokens.space.lg)) + 'rpx', boxShadow: flagOn(c.showShadow, true) ? CardTokens.shadow.card : 'none', - }); + }; + // 2.19.11: 外边距可配 + const mt = num(c.wrapMarginTop, 0); + const mb = num(c.wrapMarginBottom, 0); + if (mt > 0) style.marginTop = px2rpx(mt) + 'rpx'; + if (mb > 0) style.marginBottom = px2rpx(mb) + 'rpx'; + return this.$util.objToStyle(style); }, showCover() { return flagOn(this.c.useCover, false) && !!(this.card && this.card.cover); @@ -413,11 +419,16 @@ export default { */ headThemeStyle() { const pad = px2rpx(num(this.c.padding, CardTokens.space.lg)); - return this.$util.objToStyle({ - background: themeGradient(this.card), + const style = { margin: '-' + pad + 'rpx -' + pad + 'rpx 0', - padding: '32rpx ' + pad + 'rpx 28rpx', - }); + }; + // 2.19.11: headBg 自定义或主题渐变; headPadV/headPadH 可配 + const bg = String(this.c.headBg || '').trim(); + style.background = bg || themeGradient(this.card); + const padV = num(this.c.headPadV, 32); + const padH = num(this.c.headPadH, 0) || num(this.c.padding, CardTokens.space.lg); + style.padding = px2rpx(padV) + 'rpx ' + px2rpx(padH) + 'rpx'; + return this.$util.objToStyle(style); }, /** 资料区标题(2.17): 默认关(历史配置无此字段时不出标题) */ rowsTitleShow() { @@ -559,9 +570,18 @@ export default { gradientStyle() { return this.$util.objToStyle({ background: themeGradient(this.card) }); }, + /** 2.19.11: 顶带显隐(默认关) */ + bandShow() { + return flagOn(this.c.bandShow, false); + }, bandStyle() { - // 蓝色顶带底色: 名片主题渐变(精选名片 show 同款) - return this.$util.objToStyle({ background: themeGradient(this.card) }); + // 2.19.11: bandBg 自定义或名片主题渐变; bandHeight 控高度 + const bg = String(this.c.bandBg || '').trim(); + const h = num(this.c.bandHeight, 8); + return this.$util.objToStyle({ + background: bg || themeGradient(this.card), + height: px2rpx(h) + 'rpx', + }); }, shareBtnStyle() { // 分享抽屉主按钮(复制链接): 主题色 diff --git a/components-diy/diy-card-self.vue b/components-diy/diy-card-self.vue index 8a01aeb..cf675a1 100644 --- a/components-diy/diy-card-self.vue +++ b/components-diy/diy-card-self.vue @@ -140,6 +140,14 @@ export default { qrBlockBg: v.qrBlockBg, qrBlockRadius: v.qrBlockRadius, qrBlockPad: v.qrBlockPad, + bandShow: v.bandShow, + bandBg: v.bandBg, + bandHeight: v.bandHeight, + wrapMarginTop: v.wrapMarginTop, + wrapMarginBottom: v.wrapMarginBottom, + headBg: v.headBg, + headPadV: v.headPadV, + headPadH: v.headPadH, }; }, boxStyle() { diff --git a/components-diy/diy-card-show.vue b/components-diy/diy-card-show.vue index 451e397..db29c48 100644 --- a/components-diy/diy-card-show.vue +++ b/components-diy/diy-card-show.vue @@ -105,6 +105,14 @@ export default { qrBlockBg: v.qrBlockBg, qrBlockRadius: v.qrBlockRadius, qrBlockPad: v.qrBlockPad, + bandShow: v.bandShow, + bandBg: v.bandBg, + bandHeight: v.bandHeight, + wrapMarginTop: v.wrapMarginTop, + wrapMarginBottom: v.wrapMarginBottom, + headBg: v.headBg, + headPadV: v.headPadV, + headPadH: v.headPadH, }; }, }, diff --git a/tests/diy-card-qr-style.test.js b/tests/diy-card-qr-style.test.js index 9f98b65..ae75419 100644 --- a/tests/diy-card-qr-style.test.js +++ b/tests/diy-card-qr-style.test.js @@ -177,8 +177,8 @@ test('mini: 蓝色顶带版式(2026-10-23 与精选名片 show 同款: 自适应 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*\}\);/); + // 计算属性: 顶带底色可自定义(bandBg)或回落主题渐变; 高度可配(bandHeight) + assert.match(miniSrc, /bandStyle\(\)\s*\{[\s\S]*?bandBg[\s\S]*?themeGradient\(this\.card\)/); // 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;/);