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

15
pages_promotion/point/public/css/list.scss
View File

@@ -19,7 +19,10 @@
left: 0;
top: 0;
z-index: 100;
background-image: linear-gradient(360deg, #F8F8F8 0%, #E74A32 100%);
// P0: 积分商品页头渐变 → var(--point-promo-start/end)
// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
background: #F8F8F8; // 兜底
background-image: linear-gradient(360deg, var(--point-promo-start, #F8F8F8) 0%, var(--point-promo-end, #E74A32) 100%);
background-size: 100% 400rpx;
background-position-y: top;
background-repeat: no-repeat;
@@ -75,7 +78,10 @@
}
.point-wrap {
background-image: linear-gradient(360deg, #F8F8F8 0%, #E74A32 100%);
// P0: 积分商品页 wrap 渐变 → var(--point-promo-start/end)
// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
background: #F8F8F8; // 兜底
background-image: linear-gradient(360deg, var(--point-promo-start, #F8F8F8) 0%, var(--point-promo-end, #E74A32) 100%);
background-size: 100% 380rpx;
background-repeat: no-repeat;
// #ifndef MP-WEIXIN
@@ -924,7 +930,10 @@
.item-wrap {
overflow: hidden;
background: linear-gradient(321deg, #F4402B 0%, #FD7C40 100%);
// P0: 积分商品卡渐变 → var(--point-item-grad-start/end)
// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
background: #F4402B; // 兜底
background: linear-gradient(321deg, var(--point-item-grad-start, #F4402B) 0%, var(--point-item-grad-end, #FD7C40) 100%);
border-radius: 16rpx;
position: relative;
padding-top: 40rpx;