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_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 一致) =====
...{

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

@@ -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);
}
</style>