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