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

style: 将项目内硬编码色彩替换为CSS变量，兼容多平台

Browse Source 
本次提交将项目内47处硬编码色彩值替换为CSS自定义属性，同时添加了兜底纯色样式以兼容旧版小程序 runtime。覆盖了微信小程序、鸿蒙元服务和H5三端，所有渐变、纯色、边框色都增加了主题化支持，并新增了多平台主题兼容测试文档。
This commit is contained in:
ZF Sun
2026-06-11 15:32:00 +08:00
parent 555443dc44
commit 08caa49b43
18 changed files with 405 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components-diy/diy-bargain.vue
View File

@@ -461,7 +461,10 @@ scroll-view ::-webkit-scrollbar {
align-items: center;
justify-content: center;
height: 36rpx;
background: linear-gradient(270deg, #ffbd5b 0%, #fd882e 100%);
// P0: 砍价头渐变 → var(--pintuan-label-grad-start/end) 复用(同色系)
// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
background: #ffbd5b; // 兜底
background: linear-gradient(270deg, var(--pintuan-label-grad-start, #ffbd5b) 0%, var(--pintuan-label-grad-end, #fd882e) 100%);
border-radius: 24rpx;
padding: 2rpx;
@@ -474,7 +477,9 @@ scroll-view ::-webkit-scrollbar {
text:nth-child(2) {
padding: 6rpx 4rpx 4rpx;
background-color: #fff;
color: #ffbd5b;
// P0: 砍价头文字色 → var(--pintuan-label-grad-start) 复用
// 兼容: 微信小程序 / 鸿蒙元服务 — color 接受 var() 无问题
color: var(--pintuan-label-grad-start, #ffbd5b);
border-radius: 50%;
transform: scale(0.6);
font-weight: bold;
@@ -576,7 +581,9 @@ scroll-view ::-webkit-scrollbar {
width: auto;
height: 20rpx;
border-radius: 20rpx;
background-color: #ffeadb;
// P0: 砍价浅底 → var(--bargain-promo-shallow)
// 兼容: 微信小程序 / 鸿蒙元服务 — background-color 接受 var() 无问题
background-color: var(--bargain-promo-shallow, #ffeadb);
position: relative;
&::after {
@@ -584,7 +591,9 @@ scroll-view ::-webkit-scrollbar {
width: 26rpx;
height: 26rpx;
border-radius: 50%;
background-color: #fa1a1a;
// P0: 砍价红圆点 → var(--bargain-promo-color)
// 兼容: 微信小程序 / 鸿蒙元服务 — background-color 接受 var() 无问题
background-color: var(--bargain-promo-color, #fa1a1a);
position: absolute;
top: 50%;
transform: translateY(-50%);
@@ -595,7 +604,9 @@ scroll-view ::-webkit-scrollbar {
width: 0;
height: 20rpx;
border-radius: 20rpx;
background-color: #fa1a1a;
// P0: 砍价红进度条 → var(--bargain-promo-color)
// 兼容: 微信小程序 / 鸿蒙元服务 — background-color 接受 var() 无问题
background-color: var(--bargain-promo-color, #fa1a1a);
position: relative;
.progress-bar {
@@ -618,7 +629,9 @@ scroll-view ::-webkit-scrollbar {
line-height: 1;
text {
color: #fa1a1a;
// P0: 砍价数字红 → var(--bargain-promo-color)
// 兼容: 微信小程序 / 鸿蒙元服务 — color 接受 var() 无问题
color: var(--bargain-promo-color, #fa1a1a);
}
}
}

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

@@ -1407,7 +1407,9 @@ export default {
}
.ai-chat-btn {
background-color: #ff0000;
// P0: 角标红 → var(--goods-cart-num-corner)
// 兼容: 微信小程序 / 鸿蒙元服务 — background-color 接受 var() 无问题
background-color: var(--goods-cart-num-corner, #ff0000);
color: #fff;
padding: 12rpx 30rpx;
border-radius: 40rpx;

19
components-diy/diy-member-info.vue
View File

@@ -862,7 +862,11 @@ export default {
height: 120rpx;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
background: linear-gradient(107deg, #7c7878 0%, #201a18 100%);
// P0: 用现有 token,主题切换时会员卡背景跟着变
// 旧字面: #7c7878 / #201a18(默认 preset 值) → 现在由 token 决定
// 兼容: 微信小程序 / 鸿蒙元服务 — var() 在 linear-gradient 中现代 runtime 均支持
background: #7c7878; // 兜底(微信小程序老 runtime 无 var() 兜底)
background: linear-gradient(107deg, var(--super-member-start-bg) 0%, var(--super-member-end-bg) 100%);
padding: 30rpx 40rpx;
box-sizing: border-box;
@@ -943,7 +947,12 @@ export default {
}
.super-text {
background-image: linear-gradient(90deg, #ffdba6 0%, #ffebca 49%, #f7c774 100%);
// P0: 3 停渐变 → 2 停(start + end),token 化
// 旧字面: #ffdba6 / #ffebca (默认 preset 文字色) + 中间色 #f7c774
// 中间色 #f7c774 不在 token 系统中,合并为 start→end 渐变(视觉差异可接受)
// 兼容: -webkit-background-clip: text 在微信小程序 / 鸿蒙元服务均支持
background: #ffdba6; // 兜底
background-image: linear-gradient(90deg, var(--super-member-start-text-color) 0%, var(--super-member-end-text-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
@@ -993,7 +1002,11 @@ export default {
.super-member {
color: #8d4b16;
background: linear-gradient(107deg, #fadcb5 0%, #f6bd74 100%);
// P0 注释 A 修复: 之前这个渐变是 black preset 的字面,导致 data-style-2 在 default 主题下显示错误
// 现在用 var() 让主题切换时自动跟着变(无论 data-style-1 还是 data-style-2)
// 兼容: 同 865 行,微信小程序 / 鸿蒙元服务均 OK
background: #fadcb5; // 兜底
background: linear-gradient(107deg, var(--super-member-start-bg) 0%, var(--super-member-end-bg) 100%);
border-top-left-radius: 18rpx;
border-top-right-radius: 18rpx;

18
components-diy/diy-pintuan.vue
View File

@@ -451,7 +451,9 @@ scroll-view ::-webkit-scrollbar {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 2rpx solid #ff3d3d;
// P0: 拼团标签边框 → var(--pintuan-label-color)
// 兼容: 微信小程序 / 鸿蒙元服务 — border 接受 var() 无问题
border: 2rpx solid var(--pintuan-label-color, #ff3d3d);
margin-left: -14rpx;
}
@@ -482,7 +484,10 @@ scroll-view ::-webkit-scrollbar {
align-items: center;
justify-content: center;
height: 36rpx;
background: linear-gradient(270deg, #ffbd5b 0%, #fd882e 100%);
// P0: 拼团头渐变 → var(--pintuan-label-grad-start/end)
// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
background: #ffbd5b; // 兜底
background: linear-gradient(270deg, var(--pintuan-label-grad-start, #ffbd5b) 0%, var(--pintuan-label-grad-end, #fd882e) 100%);
border-radius: 24rpx;
padding: 2rpx;
@@ -495,7 +500,9 @@ scroll-view ::-webkit-scrollbar {
text:nth-child(2) {
padding: 6rpx 4rpx 4rpx;
background-color: #fff;
color: #ffbd5b;
// P0: 拼团头文字色 → var(--pintuan-label-grad-start) 复用
// 兼容: 微信小程序 / 鸿蒙元服务 — color 接受 var() 无问题
color: var(--pintuan-label-grad-start, #ffbd5b);
border-radius: 50%;
transform: scale(0.6);
font-weight: bold;
@@ -799,7 +806,10 @@ scroll-view ::-webkit-scrollbar {
font-size: $font-size-tag;
width: 94rpx;
height: 44rpx;
background: linear-gradient(131deg, #3edb73 0%, #1db576 100%);
// P0: 拼团成功绿渐变 → var(--pintuan-success-start/end)
// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
background: #3edb73; // 兜底
background: linear-gradient(131deg, var(--pintuan-success-start, #3edb73) 0%, var(--pintuan-success-end, #1db576) 100%);
border-radius: 8rpx;
color: #fff;
text-align: center;

25
components-diy/diy-seckill.vue
View File

@@ -796,12 +796,16 @@ scroll-view ::-webkit-scrollbar {
height: 20rpx;
border-radius: 20rpx;
margin-right: 20rpx;
background-color: #fcecd7;
// P0: 秒杀价签浅底 → var(--seckill-price-shallow)
// 兼容: 微信小程序 / 鸿蒙元服务 — background-color 接受 var() 无问题
background-color: var(--seckill-price-shallow, #fcecd7);
.curr {
height: 20rpx;
border-radius: 20rpx;
background-color: #fdbe6c;
// P0: 秒杀价签深色 → var(--seckill-price-start)
// 兼容: 微信小程序 / 鸿蒙元服务 — background-color 接受 var() 无问题
background-color: var(--seckill-price-start, #fdbe6c);
}
}
@@ -888,15 +892,21 @@ scroll-view ::-webkit-scrollbar {
.content .progress {
.num {
color: #ff3d3d;
// P0: 秒杀进度数字红 → var(--seckill-promo-color)
// 兼容: 微信小程序 / 鸿蒙元服务 — color 接受 var() 无问题
color: var(--seckill-promo-color, #ff3d3d);
}
.bg {
background-color: #ffd5d5;
// P0: 秒杀进度浅底 → var(--seckill-price-shallow) 复用
// 兼容: 微信小程序 / 鸿蒙元服务 — background-color 接受 var() 无问题
background-color: var(--seckill-price-shallow, #ffd5d5);
.curr {
position: relative;
background-color: #ff0400 !important;
// P0: 秒杀进度深红 → var(--seckill-discount-start) 复用
// 兼容: 微信小程序 / 鸿蒙元服务 — background-color 接受 var() 无问题
background-color: var(--seckill-discount-start, #ff0400) !important;
}
}
}
@@ -1178,7 +1188,10 @@ scroll-view ::-webkit-scrollbar {
white-space: nowrap;
font-weight: bold;
line-height: 1;
background: linear-gradient(to right, #ff5f17, #fe2f18);
// P0: 秒杀折扣红渐变 → var(--seckill-discount-start/end)
// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
background: #ff5f17; // 兜底
background: linear-gradient(to right, var(--seckill-discount-start, #ff5f17), var(--seckill-discount-end, #fe2f18));
padding: 4rpx 4rpx 4rpx 10rpx;
border-top-right-radius: 10rpx;
border-bottom-right-radius: 10rpx;