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

5
pages_promotion/fenxiao/promote.vue
View File

@@ -383,7 +383,10 @@ export default {
margin: 0;
border-radius: 50rpx;
color: #985400;
background: linear-gradient(45deg, #ffe2ac 0%, #fdc174 100%);
// P0: 推广页金色按钮 → var(--promote-grad-start/end)
// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
background: #ffe2ac; // 兜底
background: linear-gradient(45deg, var(--promote-grad-start, #ffe2ac) 0%, var(--promote-grad-end, #fdc174) 100%);
}
}
}

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

11
pages_promotion/fenxiao/withdraw_apply.vue
View File

@@ -351,7 +351,9 @@
line-height: 62px;
border-radius: 34px !important;
border-radius: 128px;
background: #ff3c29;
// P0: 提现按钮默认底色 → var(--fenxiao-withdraw-start)
// 兼容: 微信小程序 / 鸿蒙元服务 — background 接受 var() 无问题
background: var(--fenxiao-withdraw-start, #ff3c29);
color: #fff;
font-size: 32px;
font-weight: 400;
@@ -359,8 +361,11 @@
border: 0;
}
.renren-btn.do {
background: -webkit-linear-gradient(317.43deg, #ff3c29, #ff6f29 94.38%);
background: linear-gradient(132.57deg, #ff3c29, #ff6f29 94.38%);
// P0: 分销提现按钮渐变 → var(--fenxiao-withdraw-start/end)
// 兼容: 微信小程序 / 鸿蒙元服务 — -webkit-linear-gradient 嵌套 var() 现代 runtime 支持
background: #ff3c29; // 兜底
background: -webkit-linear-gradient(317.43deg, var(--fenxiao-withdraw-start, #ff3c29), var(--fenxiao-withdraw-end, #ff6f29) 94.38%);
background: linear-gradient(132.57deg, var(--fenxiao-withdraw-start, #ff3c29), var(--fenxiao-withdraw-end, #ff6f29) 94.38%);
font-size: 28rpx;
font-weight: 500;
}