From bd1a9a67e01439ba4a67e639bab1cd0175870fcf Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Tue, 7 Jul 2026 09:12:06 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=87=8D=E6=9E=84=E5=88=86=E7=B1=BB?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=94=AF=E6=8C=81?=
=?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=8C=96=E9=85=8D=E7=BD=AE=E5=AD=97=E5=8F=B7?=
=?UTF-8?q?=E5=92=8C=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
1. 为分类树和分类项的文字样式替换为CSS变量，支持远端主题配置
2. 重命名AI咨询按钮的类名和样式变量，统一命名规范
3. 为每个主题预设添加分类页专属的样式token，包含字号、按钮背景和文字颜色
---
common/js/style_color.js | 128 +++++++++++++++++++++++++++
components-diy/diy-category-item.vue | 33 +++----
components-diy/diy-category.vue | 4 +-
3 files changed, 147 insertions(+), 18 deletions(-)
diff --git a/common/js/style_color.js b/common/js/style_color.js
index 56b020f..1d4490b 100644
--- a/common/js/style_color.js
+++ b/common/js/style_color.js
@@ -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 一致) =====
...{
// 拼团
diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue
index f6aa324..d15ec46 100644
--- a/components-diy/diy-category-item.vue
+++ b/components-diy/diy-category-item.vue
@@ -72,7 +72,7 @@
@scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll">
- {{ category.category_name
+ {{ category.category_name
}}
@@ -117,8 +117,8 @@
{{ showMarketPrice(item) }}
-
-
+
+
{{ $lang('components-diy.diy-category-item.consultNow') }}
@@ -211,8 +211,8 @@
{{ showMarketPrice(item) }}
-
-
+
+
{{ $lang('components-diy.diy-category-item.consultNow') }}
@@ -767,7 +767,7 @@ export default {
.category-title {
padding: 20rpx 0;
- font-size: 26rpx;
+ font-size: var(--diy-category-item-title-size, 26rpx);
// font-weight: bold;
color: #222;
position: relative;
@@ -845,7 +845,7 @@ export default {
text-align: center;
line-height: 1;
- font-size: 24rpx;
+ font-size: var(--diy-category-item-name-size, 24rpx);
}
}
}
@@ -895,7 +895,7 @@ export default {
border-bottom-right-radius: $border-radius;
top: 0;
left: 0;
- font-size: $font-size-goods-tag;
+ font-size: var(--diy-category-item-goods-tag-size, 22rpx);
}
.goods-tag-img {
@@ -922,7 +922,7 @@ export default {
}
.goods-name {
- font-size: $font-size-base;
+ font-size: var(--diy-category-item-goods-name-size, 28rpx);
line-height: 1.3;
margin-top: 20rpx;
white-space: nowrap;
@@ -1402,21 +1402,22 @@ export default {
}
}
-.ai-chat-btn-wrap {
+.consult-now-btn-wrap {
display: flex;
justify-content: flex-end;
margin-top: auto;
padding-top: 10rpx;
}
-.ai-chat-btn {
- // P0: 角标红 → var(--goods-cart-num-corner)
- // 兼容: 微信小程序 / 鸿蒙元服务 — background-color 接受 var() 无问题
- background-color: var(--goods-cart-num-corner, #ff0000);
- color: #fff;
+.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: 26rpx;
+ font-size: var(--diy-category-item-consult-now-size, 26rpx);
font-weight: 500;
line-height: 1.2;
text-align: center;
diff --git a/components-diy/diy-category.vue b/components-diy/diy-category.vue
index f054c4b..e6e01ce 100644
--- a/components-diy/diy-category.vue
+++ b/components-diy/diy-category.vue
@@ -622,7 +622,7 @@ export default {
white-space: break-word;
overflow: hidden;
text-align: center;
- font-size: 10px;
+ font-size: var(--diy-category-tree-normal-size, 20rpx);
}
&.border-top {
@@ -639,7 +639,7 @@ export default {
view {
color: #333;
font-weight: bold;
- font-size: $font-size-base;
+ font-size: var(--diy-category-tree-select-size, 28rpx);
}
&::before {