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-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;