From 83a5f358e20fdcb67191d015e1c789f849809496 Mon Sep 17 00:00:00 2001 From: ZF sun <34314687@qq.com> Date: Tue, 7 Jul 2026 09:16:31 +0800 Subject: [PATCH] =?UTF-8?q?style(diy-category-item):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=92=A8=E8=AF=A2=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8Ftoken?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 扩展咨询按钮的可配置css属性，添加内边距、圆角、字重等独立token，便于后台全局调整按钮样式 --- common/js/style_color.js | 56 ++++++++++++++++++++++++++++ components-diy/diy-category-item.vue | 26 ++++++------- 2 files changed, 69 insertions(+), 13 deletions(-) diff --git a/common/js/style_color.js b/common/js/style_color.js index 1d4490b..5606678 100644 --- a/common/js/style_color.js +++ b/common/js/style_color.js @@ -79,6 +79,13 @@ export default { diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_bg: '#FF4646',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调) + diy_category_item_consult_now_padding: '12rpx 30rpx',// 咨询/AI按钮内边距(独立可调) + diy_category_item_consult_now_radius: '40rpx', // 咨询/AI按钮圆角(独立可调) + diy_category_item_consult_now_weight: '500', // 咨询/AI按钮字重(独立可调) + diy_category_item_consult_now_line_height:'1.2', // 咨询/AI按钮行高(独立可调) + diy_category_item_consult_now_text_align: 'center', // 咨询/AI按钮文字对齐(独立可调) + diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调) + diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调) }, // ===== 营销 token(本次统一, 全 8 preset 一致) ===== @@ -218,6 +225,13 @@ export default { diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_bg: '#19C650',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调) + diy_category_item_consult_now_padding: '12rpx 30rpx',// 咨询/AI按钮内边距(独立可调) + diy_category_item_consult_now_radius: '40rpx', // 咨询/AI按钮圆角(独立可调) + diy_category_item_consult_now_weight: '500', // 咨询/AI按钮字重(独立可调) + diy_category_item_consult_now_line_height:'1.2', // 咨询/AI按钮行高(独立可调) + diy_category_item_consult_now_text_align: 'center', // 咨询/AI按钮文字对齐(独立可调) + diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调) + diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调) }, // ===== 营销 token(本次统一, 全 9 preset 一致) ===== ...{ @@ -356,6 +370,13 @@ export default { diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_bg: '#36ABFF',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调) + diy_category_item_consult_now_padding: '12rpx 30rpx',// 咨询/AI按钮内边距(独立可调) + diy_category_item_consult_now_radius: '40rpx', // 咨询/AI按钮圆角(独立可调) + diy_category_item_consult_now_weight: '500', // 咨询/AI按钮字重(独立可调) + diy_category_item_consult_now_line_height:'1.2', // 咨询/AI按钮行高(独立可调) + diy_category_item_consult_now_text_align: 'center', // 咨询/AI按钮文字对齐(独立可调) + diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调) + diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调) }, // ===== 营销 token(本次统一, 全 9 preset 一致) ===== ...{ @@ -494,6 +515,13 @@ export default { diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_bg: '#FF407E',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调) + diy_category_item_consult_now_padding: '12rpx 30rpx',// 咨询/AI按钮内边距(独立可调) + diy_category_item_consult_now_radius: '40rpx', // 咨询/AI按钮圆角(独立可调) + diy_category_item_consult_now_weight: '500', // 咨询/AI按钮字重(独立可调) + diy_category_item_consult_now_line_height:'1.2', // 咨询/AI按钮行高(独立可调) + diy_category_item_consult_now_text_align: 'center', // 咨询/AI按钮文字对齐(独立可调) + diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调) + diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调) }, // ===== 营销 token(本次统一, 全 9 preset 一致) ===== ...{ @@ -632,6 +660,13 @@ export default { diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_bg: '#CFAF70',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调) + diy_category_item_consult_now_padding: '12rpx 30rpx',// 咨询/AI按钮内边距(独立可调) + diy_category_item_consult_now_radius: '40rpx', // 咨询/AI按钮圆角(独立可调) + diy_category_item_consult_now_weight: '500', // 咨询/AI按钮字重(独立可调) + diy_category_item_consult_now_line_height:'1.2', // 咨询/AI按钮行高(独立可调) + diy_category_item_consult_now_text_align: 'center', // 咨询/AI按钮文字对齐(独立可调) + diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调) + diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调) }, // ===== 营销 token(本次统一, 全 9 preset 一致) ===== ...{ @@ -770,6 +805,13 @@ export default { diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_bg: '#A253FF',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调) + diy_category_item_consult_now_padding: '12rpx 30rpx',// 咨询/AI按钮内边距(独立可调) + diy_category_item_consult_now_radius: '40rpx', // 咨询/AI按钮圆角(独立可调) + diy_category_item_consult_now_weight: '500', // 咨询/AI按钮字重(独立可调) + diy_category_item_consult_now_line_height:'1.2', // 咨询/AI按钮行高(独立可调) + diy_category_item_consult_now_text_align: 'center', // 咨询/AI按钮文字对齐(独立可调) + diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调) + diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调) }, // ===== 营销 token(本次统一, 全 9 preset 一致) ===== ...{ @@ -908,6 +950,13 @@ export default { diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_bg: '#FFD009',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_text: '#303133',// 咨询/AI按钮文字(独立可调) + diy_category_item_consult_now_padding: '12rpx 30rpx',// 咨询/AI按钮内边距(独立可调) + diy_category_item_consult_now_radius: '40rpx', // 咨询/AI按钮圆角(独立可调) + diy_category_item_consult_now_weight: '500', // 咨询/AI按钮字重(独立可调) + diy_category_item_consult_now_line_height:'1.2', // 咨询/AI按钮行高(独立可调) + diy_category_item_consult_now_text_align: 'center', // 咨询/AI按钮文字对齐(独立可调) + diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调) + diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调) }, // ===== 营销 token(本次统一, 全 9 preset 一致) ===== ...{ @@ -1046,6 +1095,13 @@ export default { diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_bg: '#222222',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调) + diy_category_item_consult_now_padding: '12rpx 30rpx',// 咨询/AI按钮内边距(独立可调) + diy_category_item_consult_now_radius: '40rpx', // 咨询/AI按钮圆角(独立可调) + diy_category_item_consult_now_weight: '500', // 咨询/AI按钮字重(独立可调) + diy_category_item_consult_now_line_height:'1.2', // 咨询/AI按钮行高(独立可调) + diy_category_item_consult_now_text_align: 'center', // 咨询/AI按钮文字对齐(独立可调) + diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调) + diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调) }, // ===== 营销 token(本次统一, 全 9 preset 一致) ===== ...{ diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index d15ec46..bce00c8 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -1410,19 +1410,19 @@ export default { } .consult-now-btn { - // 兼容: 微信小程序 / 鸿蒙元服务 — background-color / color 接受 var() 无问题 - // 三个属性都用 --diy-category-item-consult-now-* 独立 token, - // 便于后台单独调整(不复用全局 --goods-btn-color 和 --btn-text-color) - background-color: var(--diy-category-item-consult-now-bg, #FF4646); - color: var(--diy-category-item-consult-now-text, #FFFFFF); - padding: 12rpx 30rpx; - border-radius: 40rpx; - font-size: var(--diy-category-item-consult-now-size, 26rpx); - font-weight: 500; - line-height: 1.2; - text-align: center; - white-space: nowrap; - display: inline-block; + // 兼容: 微信小程序 / 鸿蒙元服务 — 所有 var() 属性无问题 + // 10 个属性都用 --diy-category-item-consult-now-* 独立 token, + // 便于后台单独调整任何一项(配色 / 尺寸 / 字重 / 对齐 / 显示模式) + background-color: var(--diy-category-item-consult-now-bg, #FF4646); + color: var(--diy-category-item-consult-now-text, #FFFFFF); + padding: var(--diy-category-item-consult-now-padding, 12rpx 30rpx); + border-radius: var(--diy-category-item-consult-now-radius, 40rpx); + font-size: var(--diy-category-item-consult-now-size, 26rpx); + font-weight: var(--diy-category-item-consult-now-weight, 500); + line-height: var(--diy-category-item-consult-now-line-height,1.2); + text-align: var(--diy-category-item-consult-now-text-align, center); + white-space: var(--diy-category-item-consult-now-white-space,nowrap); + display: var(--diy-category-item-consult-now-display, inline-block); } \ No newline at end of file