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

style(diy-category-item): 优化咨询按钮样式token支持度

Browse Source 
扩展咨询按钮的可配置css属性，添加内边距、圆角、字重等独立token，便于后台全局调整按钮样式
This commit is contained in:
ZF Sun
2026-07-07 09:16:31 +08:00
parent bd1a9a67e0
commit 83a5f358e2
2 changed files with 69 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
common/js/style_color.js
View File

@@ -79,6 +79,13 @@ export default {
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#FF4646',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_bg: '#FF4646',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/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 一致) ===== // ===== 营销 token(本次统一, 全 8 preset 一致) =====
@@ -218,6 +225,13 @@ export default {
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#19C650',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_bg: '#19C650',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/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 一致) ===== // ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{ ...{
@@ -356,6 +370,13 @@ export default {
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#36ABFF',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_bg: '#36ABFF',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/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 一致) ===== // ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{ ...{
@@ -494,6 +515,13 @@ export default {
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#FF407E',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_bg: '#FF407E',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/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 一致) ===== // ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{ ...{
@@ -632,6 +660,13 @@ export default {
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#CFAF70',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_bg: '#CFAF70',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/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 一致) ===== // ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{ ...{
@@ -770,6 +805,13 @@ export default {
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#A253FF',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_bg: '#A253FF',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/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 一致) ===== // ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{ ...{
@@ -908,6 +950,13 @@ export default {
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#FFD009',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_bg: '#FFD009',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#303133',// 咨询/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 一致) ===== // ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{ ...{
@@ -1046,6 +1095,13 @@ export default {
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号 diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#222222',// 咨询/AI按钮背景(独立可调) diy_category_item_consult_now_bg: '#222222',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/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 一致) ===== // ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{ ...{

26
components-diy/diy-category-item.vue
View File

@@ -1410,19 +1410,19 @@ export default {
} }
.consult-now-btn { .consult-now-btn {
// 兼容: 微信小程序 / 鸿蒙元服务 — background-color / color 接受 var() 无问题 // 兼容: 微信小程序 / 鸿蒙元服务 — 所有 var() 属性无问题
// 三个属性都用 --diy-category-item-consult-now-* 独立 token, // 10 个属性都用 --diy-category-item-consult-now-* 独立 token,
// 便于后台单独调整(不复用全局 --goods-btn-color 和 --btn-text-color) // 便于后台单独调整任何一项(配色 / 尺寸 / 字重 / 对齐 / 显示模式)
background-color: var(--diy-category-item-consult-now-bg, #FF4646); background-color: var(--diy-category-item-consult-now-bg, #FF4646);
color: var(--diy-category-item-consult-now-text, #FFFFFF); color: var(--diy-category-item-consult-now-text, #FFFFFF);
padding: 12rpx 30rpx; padding: var(--diy-category-item-consult-now-padding, 12rpx 30rpx);
border-radius: 40rpx; border-radius: var(--diy-category-item-consult-now-radius, 40rpx);
font-size: var(--diy-category-item-consult-now-size, 26rpx); font-size: var(--diy-category-item-consult-now-size, 26rpx);
font-weight: 500; font-weight: var(--diy-category-item-consult-now-weight, 500);
line-height: 1.2; line-height: var(--diy-category-item-consult-now-line-height,1.2);
text-align: center; text-align: var(--diy-category-item-consult-now-text-align, center);
white-space: nowrap; white-space: var(--diy-category-item-consult-now-white-space,nowrap);
display: inline-block; display: var(--diy-category-item-consult-now-display, inline-block);
} }
</style> </style>