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

style: 重构分类组件样式，支持主题化配置字号和按钮样式

Browse Source 
1. 为分类树和分类项的文字样式替换为CSS变量，支持远端主题配置
2. 重命名AI咨询按钮的类名和样式变量，统一命名规范
3. 为每个主题预设添加分类页专属的样式token，包含字号、按钮背景和文字颜色
This commit is contained in:
ZF Sun
2026-07-07 09:12:06 +08:00
parent 224b409455
commit bd1a9a67e0
3 changed files with 147 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
common/js/style_color.js
View File

@@ -65,6 +65,22 @@ export default {
hover_nav_text_color: '#000' // 文字颜色: 白色 '#FFFFFF', 黑色： '#000'
},
// ===== DIY 分类页字号 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-xxx-size, fallback) 引用
// 字号值带 rpx 单位, uni-app 各端均可正常渲染
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
diy_category_item_goods_name_size:'28rpx',// 商品名称
diy_category_item_goods_tag_size: '22rpx',// 商品角标
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#FF4646',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调)
},
// ===== 营销 token(本次统一, 全 8 preset 一致) =====
...{
// 拼团
@@ -187,6 +203,22 @@ export default {
hover_nav_bg_color: '#19C650',//背景色
hover_nav_text_color: '#FFFFFF'
},
// ===== DIY 分类页字号 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-xxx-size, fallback) 引用
// 字号值带 rpx 单位, uni-app 各端均可正常渲染
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
diy_category_item_goods_name_size:'28rpx',// 商品名称
diy_category_item_goods_tag_size: '22rpx',// 商品角标
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#19C650',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调)
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -309,6 +341,22 @@ export default {
hover_nav_bg_color: '#36ABFF',//背景色
hover_nav_text_color: '#FFFFFF'
},
// ===== DIY 分类页字号 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-xxx-size, fallback) 引用
// 字号值带 rpx 单位, uni-app 各端均可正常渲染
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
diy_category_item_goods_name_size:'28rpx',// 商品名称
diy_category_item_goods_tag_size: '22rpx',// 商品角标
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#36ABFF',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调)
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -431,6 +479,22 @@ export default {
hover_nav_bg_color: '#FF407E',//背景色
hover_nav_text_color: '#FFFFFF'
},
// ===== DIY 分类页字号 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-xxx-size, fallback) 引用
// 字号值带 rpx 单位, uni-app 各端均可正常渲染
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
diy_category_item_goods_name_size:'28rpx',// 商品名称
diy_category_item_goods_tag_size: '22rpx',// 商品角标
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#FF407E',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调)
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -553,6 +617,22 @@ export default {
hover_nav_bg_color: '#CFAF70',//背景色
hover_nav_text_color: '#FFFFFF'
},
// ===== DIY 分类页字号 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-xxx-size, fallback) 引用
// 字号值带 rpx 单位, uni-app 各端均可正常渲染
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
diy_category_item_goods_name_size:'28rpx',// 商品名称
diy_category_item_goods_tag_size: '22rpx',// 商品角标
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#CFAF70',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调)
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -675,6 +755,22 @@ export default {
hover_nav_bg_color: '#A253FF',//背景色
hover_nav_text_color: '#FFFFFF'
},
// ===== DIY 分类页字号 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-xxx-size, fallback) 引用
// 字号值带 rpx 单位, uni-app 各端均可正常渲染
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
diy_category_item_goods_name_size:'28rpx',// 商品名称
diy_category_item_goods_tag_size: '22rpx',// 商品角标
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#A253FF',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调)
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -797,6 +893,22 @@ export default {
hover_nav_bg_color: '#FFD009',//背景色
hover_nav_text_color: '#303133'
},
// ===== DIY 分类页字号 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-xxx-size, fallback) 引用
// 字号值带 rpx 单位, uni-app 各端均可正常渲染
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
diy_category_item_goods_name_size:'28rpx',// 商品名称
diy_category_item_goods_tag_size: '22rpx',// 商品角标
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#FFD009',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#303133',// 咨询/AI按钮文字(独立可调)
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -919,6 +1031,22 @@ export default {
hover_nav_bg_color: '#222222',//背景色
hover_nav_text_color: '#FFFFFF'
},
// ===== DIY 分类页字号 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-xxx-size, fallback) 引用
// 字号值带 rpx 单位, uni-app 各端均可正常渲染
...{
diy_category_tree_select_size: '28rpx',// 左侧分类树选中态字号
diy_category_tree_normal_size: '20rpx',// 左侧分类树未选中态字号
diy_category_item_title_size: '26rpx',// 分类标题(如"热销推荐")
diy_category_item_goods_title_size:'28rpx',// 商品模式分类标题(比普通标题大 2rpx)
diy_category_item_name_size: '24rpx',// 分类项名称
diy_category_item_goods_name_size:'28rpx',// 商品名称
diy_category_item_goods_tag_size: '22rpx',// 商品角标
diy_category_item_consult_now_size:'26rpx',// 咨询/AI按钮字号
diy_category_item_consult_now_bg: '#222222',// 咨询/AI按钮背景(独立可调)
diy_category_item_consult_now_text: '#FFFFFF',// 咨询/AI按钮文字(独立可调)
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团