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

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

@@ -72,7 +72,7 @@
@scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll">
<!--一级分类展示商品显示-->
<view class="category-title" style="font-size: 28rpx;padding-bottom: 0;">{{ category.category_name
<view class="category-title" :style="{ fontSize: (themeStyle && themeStyle.diy_category_item_goods_title_size) || '28rpx', paddingBottom: 0 }">{{ category.category_name
}}</view>
<!--一级-->
@@ -117,8 +117,8 @@
<text>{{ showMarketPrice(item) }}</text>
</view>
</view>
<view class="ai-chat-btn-wrap" v-if="item.isinformation == 1">
<view class="ai-chat-btn" @tap.stop="sendToAIChat(item)">
<view class="consult-now-btn-wrap" v-if="item.isinformation == 1">
<view class="consult-now-btn" @tap.stop="sendToAIChat(item)">
{{ $lang('components-diy.diy-category-item.consultNow') }}
</view>
</view>
@@ -211,8 +211,8 @@
<text>{{ showMarketPrice(item) }}</text>
</view>
</view>
<view class="ai-chat-btn-wrap" v-if="item.isinformation == 1">
<view class="ai-chat-btn" @tap.stop="sendToAIChat(item)">
<view class="consult-now-btn-wrap" v-if="item.isinformation == 1">
<view class="consult-now-btn" @tap.stop="sendToAIChat(item)">
{{ $lang('components-diy.diy-category-item.consultNow') }}
</view>
</view>
@@ -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;

4
components-diy/diy-category.vue
View File

@@ -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 {