style: 将项目内硬编码色彩替换为CSS变量，兼容多平台

本次提交将项目内47处硬编码色彩值替换为CSS自定义属性，同时添加了兜底纯色样式以兼容旧版小程序 runtime。覆盖了微信小程序、鸿蒙元服务和H5三端，所有渐变、纯色、边框色都增加了主题化支持，并新增了多平台主题兼容测试文档。

pages_tool/member/index.vue

@@ -163,7 +163,9 @@ export default {
 	.item {
 		width: 50%;
 		text-align: center;
-		color: #F4391c
+		// P0: 硬编码主色 → var(--main-color)
+		// 兼容: 微信小程序 / 鸿蒙元服务 — color 接受 var() 无问题
+		color: var(--main-color, #F4391c);
 	}
 }
 

pages_tool/member/public/css/balance.scss

@@ -166,7 +166,10 @@
 				font-size: 46rpx;
 				-webkit-background-clip: text !important;
 				-webkit-text-fill-color: transparent;
-				background: linear-gradient(135deg, #FE7849 0%, #FF1959 100%);
+				// P0: 余额页头图标渐变 → var(--balance-page-bg-start/end)
+				// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
+				background: #FE7849; // 兜底
+				background: linear-gradient(135deg, var(--balance-page-bg-start, #FE7849) 0%, var(--balance-page-bg-end, #FF1959) 100%);
 			}
 		}
 		
@@ -200,11 +203,15 @@
 		font-size: 32rpx;
 	}
 	.recharge-withdraw {
-		background: #FF4646;
+		// P0: 硬编码主色 → var(--base-color)
+		// 兼容: 微信小程序 / 鸿蒙元服务 — background 接受 var() 无问题
+		background: var(--base-color, #FF4646);
 	}
-	
+
 	.withdraw {
-		border: 4rpx solid #FF4646;
+		// P0: 硬编码主色 → var(--base-color)
+		// 兼容: 微信小程序 / 鸿蒙元服务 — border 接受 var() 无问题
+		border: 4rpx solid var(--base-color, #FF4646);
 		box-sizing: border-box;
 		line-height: 72rpx;
 		color: #FF4646;

pages_tool/member/public/css/card.scss

@@ -312,9 +312,13 @@
 			}
 			.iconfont {
 				font-size: 60rpx;
-				background-image:-webkit-linear-gradient(top,#E3B66B,#F7DAA5); 
-				-webkit-background-clip:text; 
-				-webkit-text-fill-color:transparent; 
+				// P0: 会员卡金色渐变 → var(--member-card-gold-start/end)
+				// 注: 这组金色与 token 中 super-member-*-bg(default:灰,black:金)不同,作为独立 token
+				// 兼容: 微信小程序 / 鸿蒙元服务 — -webkit-linear-gradient 嵌套 var() 现代 runtime 支持
+				background: #E3B66B; // 兜底
+				background-image: -webkit-linear-gradient(top, var(--member-card-gold-start, #E3B66B), var(--member-card-gold-end, #F7DAA5));
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
 			}
 			.icon-zhekou,.icon-hongbao{
 				font-size: 54rpx;
@@ -541,7 +545,9 @@
 			}
 		}
 		.card-time-item.active{
-			border-color: #E3B66B;
+			// P0: 会员卡金边 → var(--member-card-gold-start)
+			// 兼容: 微信小程序 / 鸿蒙元服务 — border-color 接受 var() 无问题
+			border-color: var(--member-card-gold-start, #E3B66B);
 			background: rgba(227, 182, 107, .3);
 		}
 		.time-price{
@@ -593,7 +599,9 @@
 		margin-top: 20rpx;
 		
 		text {
-			color: #E3B66B;
+			// P0: 会员卡金文字 → var(--member-card-gold-start)
+			// 兼容: 微信小程序 / 鸿蒙元服务 — color 接受 var() 无问题
+			color: var(--member-card-gold-start, #E3B66B);
 		}
 	}
 
@@ -613,7 +621,10 @@
 		margin: 30rpx 0 0 0;
 		border-radius: 10rpx;
 		border: none;
-		background-image:linear-gradient(to top,#F7DAA5,#E3B66B);
+		// P0: 会员卡金色反渐变 → var(--member-card-gold-end/start) 复用
+		// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
+		background: #F7DAA5; // 兜底
+		background-image: linear-gradient(to top, var(--member-card-gold-end, #F7DAA5), var(--member-card-gold-start, #E3B66B));
 		box-sizing: border-box;
 	}
 	

pages_tool/member/public/css/invite_friends.scss

@@ -143,7 +143,10 @@
 					width: 100%;
 					.price {
 						text-align: center;
-						background-image: -webkit-linear-gradient(bottom, #ff2440, #ff7b7b);
+						// P0: 邀请好友价格渐变 → var(--invite-grad-start/end)
+						// 兼容: 微信小程序 / 鸿蒙元服务 — -webkit-linear-gradient 嵌套 var() 现代 runtime 支持
+						background: #ff2440; // 兜底
+						background-image: -webkit-linear-gradient(bottom, var(--invite-grad-start, #ff2440), var(--invite-grad-end, #ff7b7b));
 						-webkit-background-clip: text;
 						-webkit-text-fill-color: transparent;
 						font-size: 30rpx;

pages_tool/member/public/css/point.scss

@@ -201,7 +201,10 @@
 			color: #fff;
 			font-size: 26rpx;
 			font-weight: 600;
-			background: linear-gradient(135deg, #FE7849 0%, #FF1959 100%);
+			// P0: 积分页按钮渐变 → var(--point-page-bg-start/end)
+			// 兼容: 微信小程序 / 鸿蒙元服务 — linear-gradient 嵌套 var() 现代 runtime 支持
+			background: #FE7849; // 兜底
+			background: linear-gradient(135deg, var(--point-page-bg-start, #FE7849) 0%, var(--point-page-bg-end, #FF1959) 100%);
 		}
 	}
 }

pages_tool/pay/result.vue

@@ -272,7 +272,9 @@
 			}
 
 			&.fail {
-				color: #FF4646;
+				// P0: 失败提示色 → var(--base-color)
+				// 兼容: 微信小程序 / 鸿蒙元服务 — color 接受 var() 无问题
+				color: var(--base-color, #FF4646);
 			}
 		}