diff --git a/components-diy/diy-card-mini.vue b/components-diy/diy-card-mini.vue index e40f409..b246c26 100644 --- a/components-diy/diy-card-mini.vue +++ b/components-diy/diy-card-mini.vue @@ -249,6 +249,19 @@ import { normalizeActVis, normalizeActDeleted, normalizeActLabels, normalizeCustomActs, normalizeActOrder, libIconBg, } from './diy-card-common.js'; +/** + * 2.20 三块「独立成块」逐向间距: 开关开启时输出逐向 margin/padding 覆盖串。 + * 关闭或缺键(存量实例)输出空串 -> 完全回落历史形态(统一 pad/类默认), 旧页面零变化。 + * 纯数值拼接, 不用 calc()(WXSS 不支持)。 + */ +function blockCustomSpacing(c, prefix) { + if (!flagOn(c[prefix + 'SpacingCustom'], false)) return ''; + const side = (k) => px2rpx(num(c[prefix + k], 0)); + const m = [side('MarginTop'), side('MarginRight'), side('MarginBottom'), side('MarginLeft')]; + const p = [side('PaddingTop'), side('PaddingRight'), side('PaddingBottom'), side('PaddingLeft')]; + return 'margin: ' + m.join('rpx ') + 'rpx; padding: ' + p.join('rpx ') + 'rpx;'; +} + export default { name: 'diy-card-mini', props: { @@ -338,7 +351,9 @@ export default { if (this.qrPos !== 'corner' || !this.showQrBase) return {}; const size = resolveQrSize(this.qrPos, this.c.qrSize); const pad = this.qrStyle === 'plain' ? 0 : (this.qrStyle === 'gradient' ? 12 : 20); - return { paddingRight: (size + pad + 40) + 'rpx' }; + // 2.20 逐向微调: 浮层 margin-right 使其左移, 头部右让位同步叠加(纯数值) + const customRight = flagOn(this.c.qrSpacingCustom, false) ? px2rpx(num(this.c.qrMarginRight, 0)) : 0; + return { paddingRight: (size + pad + 40 + customRight) + 'rpx' }; }, /** * corner 档资料行/操作区让位量: 按二维码实际占高反算 @@ -351,7 +366,9 @@ export default { const size = resolveQrSize(this.qrPos, this.c.qrSize); const pad = this.qrStyle === 'plain' ? 0 : (this.qrStyle === 'gradient' ? 6 : 10) * 2; const tip = this.showQrTip ? 42 : 0; - const total = 20 + size + pad + tip; + // 2.20 逐向微调: 二维码 margin-top 会把浮层下推, 让位量同步叠加(纯数值) + const customTop = flagOn(this.c.qrSpacingCustom, false) ? px2rpx(num(this.c.qrMarginTop, 0)) : 0; + const total = 20 + size + pad + tip + customTop; const headHeight = this.headTheme ? 164 : 104; return { marginTop: Math.max(24, total - headHeight + 10) + 'rpx' }; }, @@ -372,7 +389,11 @@ export default { style.marginLeft = this.blockEdgeMargin; style.marginRight = this.blockEdgeMargin; } - return this.$util.objToStyle(style); + let out = this.$util.objToStyle(style); + // 2.20 逐向微调: 追加逐向 margin/padding(margin 后置覆盖 edge 内缩; head/corner 浮层随 margin 平移) + const qrCustom = blockCustomSpacing(this.c, 'qr'); + if (qrCustom) out += ' ' + qrCustom; + return out; }, /** * 二维码衬底 · 外层框(qrStyle 装饰 + 微调位移都在这里) @@ -851,17 +872,27 @@ export default { }, actsBlockFinalStyle() { const clear = this.cornerClearStyle || {}; + const custom = blockCustomSpacing(this.c, 'acts'); const parts = []; if (this.actsBlockStyle) parts.push(this.actsBlockStyle); - if (clear.marginTop) parts.push('margin-top: ' + clear.marginTop + ';'); - if (this.actsBlockStyle) { - // 独立块左右与卡边留 8px(参考图), 抵消卡片内边距 - parts.push('margin-left: ' + this.blockEdgeMargin + ';'); - parts.push('margin-right: ' + this.blockEdgeMargin + ';'); + if (custom) { + // 2.20 逐向微调: 逐向 margin 完全接管(edge 内缩/让位/上浮并入 margin-top 数值叠加), 逐向 padding 覆盖统一 pad + parts.push(custom); + const customTop = px2rpx(num(this.c.actsMarginTop, 0)); + const clearTop = clear.marginTop ? parseFloat(clear.marginTop) : 0; + const floatTop = this.actsFloat ? -95 : 0; + parts.push('margin: ' + (clearTop + floatTop + customTop) + 'rpx ' + px2rpx(num(this.c.actsMarginRight, 0)) + 'rpx ' + px2rpx(num(this.c.actsMarginBottom, 0)) + 'rpx ' + px2rpx(num(this.c.actsMarginLeft, 0)) + 'rpx;'); + } else { + if (clear.marginTop) parts.push('margin-top: ' + clear.marginTop + ';'); + if (this.actsBlockStyle) { + // 独立块左右与卡边留 8px(参考图), 抵消卡片内边距 + parts.push('margin-left: ' + this.blockEdgeMargin + ';'); + parts.push('margin-right: ' + this.blockEdgeMargin + ';'); + } } if (this.actsFloat) { // 参考图定稿: 独立成块上浮, 压在蓝色 hero 下沿, 带阴影浮层观感 - parts.push('margin-top: -95rpx;'); + if (!custom) parts.push('margin-top: -95rpx;'); parts.push('z-index: 4;'); parts.push('box-shadow: 0 8rpx 30rpx rgba(30, 111, 217, 0.10);'); } @@ -911,8 +942,15 @@ export default { /** 资料区最终样式: 独立成块(白卡) 或 跟随卡片(连一体) + corner 让位合并 */ rowsFinalStyle() { const clear = this.rowsClearStyle || {}; + const custom = blockCustomSpacing(this.c, 'rows'); const extra = clear.marginTop ? 'margin-top: ' + clear.marginTop + ';' : ''; if (this.rowsIndependent) { + if (custom) { + // 2.20 逐向微调: 逐向 margin/padding 接管; corner 让位量并入 margin-top 数值叠加(纯数值, 无 calc) + const customTop = px2rpx(num(this.c.rowsMarginTop, 0)); + const combinedTop = clear.marginTop ? (parseFloat(clear.marginTop) + customTop) : customTop; + return ((this.rowsBlockStyle || '') + ' ' + custom + ' margin-top: ' + combinedTop + 'rpx;').trim(); + } return ((this.rowsBlockStyle || '') + ' ' + extra).trim(); } // 跟随卡片: 去掉 .mini-rows 静态白卡(白底/描边/阴影/圆角/内边距), 与上方资料同底连为一体 diff --git a/components-diy/diy-card-self.vue b/components-diy/diy-card-self.vue index 0d2e8c3..204ec94 100644 --- a/components-diy/diy-card-self.vue +++ b/components-diy/diy-card-self.vue @@ -161,6 +161,34 @@ export default { headPaddingRight: v.headPaddingRight, headPaddingBottom: v.headPaddingBottom, headPaddingLeft: v.headPaddingLeft, + // 2.20: 三块独立成块逐向间距(开关+逐向 margin/padding; 缺键=关=历史形态) + rowsSpacingCustom: v.rowsSpacingCustom, + rowsMarginTop: v.rowsMarginTop, + rowsMarginRight: v.rowsMarginRight, + rowsMarginBottom: v.rowsMarginBottom, + rowsMarginLeft: v.rowsMarginLeft, + rowsPaddingTop: v.rowsPaddingTop, + rowsPaddingRight: v.rowsPaddingRight, + rowsPaddingBottom: v.rowsPaddingBottom, + rowsPaddingLeft: v.rowsPaddingLeft, + actsSpacingCustom: v.actsSpacingCustom, + actsMarginTop: v.actsMarginTop, + actsMarginRight: v.actsMarginRight, + actsMarginBottom: v.actsMarginBottom, + actsMarginLeft: v.actsMarginLeft, + actsPaddingTop: v.actsPaddingTop, + actsPaddingRight: v.actsPaddingRight, + actsPaddingBottom: v.actsPaddingBottom, + actsPaddingLeft: v.actsPaddingLeft, + qrSpacingCustom: v.qrSpacingCustom, + qrMarginTop: v.qrMarginTop, + qrMarginRight: v.qrMarginRight, + qrMarginBottom: v.qrMarginBottom, + qrMarginLeft: v.qrMarginLeft, + qrPaddingTop: v.qrPaddingTop, + qrPaddingRight: v.qrPaddingRight, + qrPaddingBottom: v.qrPaddingBottom, + qrPaddingLeft: v.qrPaddingLeft, }; }, boxStyle() { diff --git a/components-diy/diy-card-show.vue b/components-diy/diy-card-show.vue index c669662..e130a15 100644 --- a/components-diy/diy-card-show.vue +++ b/components-diy/diy-card-show.vue @@ -127,6 +127,34 @@ export default { headPaddingRight: v.headPaddingRight, headPaddingBottom: v.headPaddingBottom, headPaddingLeft: v.headPaddingLeft, + // 2.20: 三块独立成块逐向间距(开关+逐向 margin/padding; 缺键=关=历史形态) + rowsSpacingCustom: v.rowsSpacingCustom, + rowsMarginTop: v.rowsMarginTop, + rowsMarginRight: v.rowsMarginRight, + rowsMarginBottom: v.rowsMarginBottom, + rowsMarginLeft: v.rowsMarginLeft, + rowsPaddingTop: v.rowsPaddingTop, + rowsPaddingRight: v.rowsPaddingRight, + rowsPaddingBottom: v.rowsPaddingBottom, + rowsPaddingLeft: v.rowsPaddingLeft, + actsSpacingCustom: v.actsSpacingCustom, + actsMarginTop: v.actsMarginTop, + actsMarginRight: v.actsMarginRight, + actsMarginBottom: v.actsMarginBottom, + actsMarginLeft: v.actsMarginLeft, + actsPaddingTop: v.actsPaddingTop, + actsPaddingRight: v.actsPaddingRight, + actsPaddingBottom: v.actsPaddingBottom, + actsPaddingLeft: v.actsPaddingLeft, + qrSpacingCustom: v.qrSpacingCustom, + qrMarginTop: v.qrMarginTop, + qrMarginRight: v.qrMarginRight, + qrMarginBottom: v.qrMarginBottom, + qrMarginLeft: v.qrMarginLeft, + qrPaddingTop: v.qrPaddingTop, + qrPaddingRight: v.qrPaddingRight, + qrPaddingBottom: v.qrPaddingBottom, + qrPaddingLeft: v.qrPaddingLeft, }; }, },