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

32
pages_promotion/fenxiao/public/css/level.scss
View File

@@ -123,35 +123,47 @@
}
swiper-item {
// P0: 10 套分销等级渐变 → var(--level-N-grad-start/end),N=1..10
// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
&:nth-child(1) .level-wrap {
background: linear-gradient(to right, #9BA7B1, #D3DEE6);
background: #9BA7B1; // 兜底
background: linear-gradient(to right, var(--level-1-grad-start, #9BA7B1), var(--level-1-grad-end, #D3DEE6));
}
&:nth-child(2) .level-wrap {
background: linear-gradient(to right, #F57E2A, #FAD494);
background: #F57E2A;
background: linear-gradient(to right, var(--level-2-grad-start, #F57E2A), var(--level-2-grad-end, #FAD494));
}
&:nth-child(3) .level-wrap {
background: linear-gradient(to right, #F85151, #FF9999);
background: #F85151;
background: linear-gradient(to right, var(--level-3-grad-start, #F85151), var(--level-3-grad-end, #FF9999));
}
&:nth-child(4) .level-wrap {
background: linear-gradient(to right, #78B8B4, #AFE6E2);
background: #78B8B4;
background: linear-gradient(to right, var(--level-4-grad-start, #78B8B4), var(--level-4-grad-end, #AFE6E2));
}
&:nth-child(5) .level-wrap {
background: linear-gradient(to right, #4DA1E1, #58CBF0);
background: #4DA1E1;
background: linear-gradient(to right, var(--level-5-grad-start, #4DA1E1), var(--level-5-grad-end, #58CBF0));
}
&:nth-child(6) .level-wrap {
background: linear-gradient(to right, #81C636, #D1F677);
background: #81C636;
background: linear-gradient(to right, var(--level-6-grad-start, #81C636), var(--level-6-grad-end, #D1F677));
}
&:nth-child(7) .level-wrap {
background: linear-gradient(to right, #6D7279, #A5AAB0);
background: #6D7279;
background: linear-gradient(to right, var(--level-7-grad-start, #6D7279), var(--level-7-grad-end, #A5AAB0));
}
&:nth-child(8) .level-wrap {
background: linear-gradient(to right, #866DDB, #D49BFE);
background: #866DDB;
background: linear-gradient(to right, var(--level-8-grad-start, #866DDB), var(--level-8-grad-end, #D49BFE));
}
&:nth-child(9) .level-wrap {
background: linear-gradient(to right, #f1c74e, #f7dc81);
background: #f1c74e;
background: linear-gradient(to right, var(--level-9-grad-start, #f1c74e), var(--level-9-grad-end, #f7dc81));
}
&:nth-child(10) .level-wrap {
background: linear-gradient(to right, #418CCF, #9CC6F1);
background: #418CCF;
background: linear-gradient(to right, var(--level-10-grad-start, #418CCF), var(--level-10-grad-end, #9CC6F1));
}
}
}