项目中心-支付模块

src/styles/variables.less

@@ -84,3 +84,31 @@
 @milestone-done: #34c724;      // 里程碑已完成圆点
 @milestone-idle: #cecece;      // 里程碑待开始圆环 + 连接线（设计稿实取）
 @team-avatar-bg: #54bcbd;      // 团队头像底色（设计稿实取）
+
+// 收银台 / 确认支付（按「支付」设计稿标注校准）
+// ⚠️ 换算系数：设计稿 250px 宽 ≈ 375 视口（缩放 1.5×），下列数值 = 设计稿实测值 × 1.5 后取整。
+// 页面底色沿用全站 @bg-color(#f5f6f8)，与设计稿实取的 #f5f5f5 仅差 1/255，不再单独开变量。
+@checkout-card: #ffffff;               // 卡片底色
+@checkout-line: #e1e1e1;               // 订单明细卡描边（设计稿实取 (225,225,225)）
+@checkout-amount: #ff5500;             // 合计金额（设计稿实取）
+@checkout-method-active-bg: #d3f3df;   // 选中支付行底色（设计稿实取）
+@checkout-wechat: #28c445;             // 微信绿（图标 / 选中 radio）
+@checkout-alipay: #1677ff;             // 支付宝蓝（图标）
+@checkout-cta: #f59e0b;                // 确认支付按钮（设计稿实取）
+@checkout-cta-hover: #e08d05;          // 确认支付 hover
+@checkout-muted: #9b9b9b;              // 次级说明文字（设计稿实取）
+@checkout-radio-idle: #c8c8c8;         // 未选 radio 圆圈描边
+
+// 项目详情 → 合同财务（付款计划卡 / 发票·合同文件行）
+// 来源 docs/prototype/项目中心-演示.html 第 1 帧（与 @project-accent 同源，换算同为 设计px × 0.77）。
+// ⚠️ 小字号例外：设计 12px/10px 折算后是 9/8px（不可读），按可读下限取 12/11px，不跟缩。
+@finance-card-width: 508px;                        // 计划卡定宽（设计 660px），竖排左对齐
+@finance-card-radius: 12px;                        // 计划卡圆角（设计 15px ≈ @radius-lg）
+@finance-card-shadow: 0 0 2px rgba(0, 0, 0, 0.4);  // 计划卡阴影（设计 0 0 3px rgba(0,0,0,.4)），设计稿无描边
+@finance-meta-color: #6c6c6c;                      // 字段行「账单号：/ 关联项目：」（设计实取 (108,108,108)）
+@finance-row-bg: #f8fafc;                          // 发票/合同文件行底色（设计实取 (248,250,252)，无描边无圆角）
+@finance-paid: #22c55e;                            // 已支付：徽标实底 + 金额文字
+@finance-pending: #f59e0b;                         // 待支付：徽标实底 + 「立即支付」按钮底色（设计实取）
+@finance-pending-amount: #f6ab29;                  // 待支付：金额文字（设计实取，比徽标略暖）
+@finance-idle: #9a9a9a;                            // 未到期：徽标实底 + 金额文字（设计实取）
+@finance-cta-hover: #e08d05;                       // 「立即支付」hover（与收银台 CTA 同色系）