feat 登录页面

This commit is contained in:
Ironsp
2026-10-01 14:02:50 +08:00
parent eda0bc2200
commit b99b2a0a88
13 changed files with 481 additions and 289 deletions

View File

@@ -8,7 +8,7 @@
// 品牌色(设计稿实测)
@primary-color: #1f67ef;
@primary-strong: #024fff; // 内容强调 / 选中态(设计实测 #024FFF)
@primary-strong: #024fff; // 内容强调 / 选中态(设计实测 #024FFF)
@primary-hover: #598bff;
@primary-light: #eaf1ff;
@@ -29,14 +29,13 @@
@bg-color-light: #fafbfc;
@border-color: #e4e7ec;
@border-color-dark: #cdd3dd;
@border-color-btn: #d8dbdf; // 注销确认弹窗「暂不注销」底/描边(设计实取)
@border-color-btn: #d8dbdf; // 注销确认弹窗「暂不注销」底/描边(设计实取)
@white: #ffffff;
@black: #000000;
@header-bg: #f4f5f9;
@header-border: #d8d8d8;
@footer-bg: #0c1321;
// 圆角
@radius-sm: 4px;
@radius-base: 8px;
@@ -55,23 +54,23 @@
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-base: 14px;
@font-size-body: 16px; // 正文基准(设计稿最高频字号;body 默认值)
@font-size-body: 16px; // 正文基准(设计稿最高频字号;body 默认值)
@font-size-md: 16px;
@font-size-lg: 18px; // 顶栏导航 / 小标题(设计实测 18/500)
@font-size-lg: 18px; // 顶栏导航 / 小标题(设计实测 18/500)
@font-size-xl: 20px;
@font-size-title: 28px; // 栏目标题(设计实测 28/500)
@font-size-xxl: 36px; // 大标题(设计实测 36/700)
@font-size-hero: 48px; // 头图主标题(设计实测 48/500、52/700、60/700)
@font-size-title: 28px; // 栏目标题(设计实测 28/500)
@font-size-xxl: 36px; // 大标题(设计实测 36/700)
@font-size-hero: 48px; // 头图主标题(设计实测 48/500、52/700、60/700)
@font-size-hero-lg: 60px; // 首页头图主标题(设计实测 60/700)
// 首页头图(设计画板 y73 起,1920×661)
@banner-title-color: #12171A; // 头图标题/副标题色(设计实取)
@btn-gradient-from: #A061FE; // 主按钮渐变起(设计实取)
@btn-gradient-to: #045DFF; // 主按钮渐变止(设计实取)
@btn-ghost-color: #2B5FF0; // 描边按钮文字色(设计像素实测)
@banner-title-color: #12171a; // 头图标题/副标题色(设计实取)
@btn-gradient-from: #a061fe; // 主按钮渐变起(设计实取)
@btn-gradient-to: #045dff; // 主按钮渐变止(设计实取)
@btn-ghost-color: #2b5ff0; // 描边按钮文字色(设计像素实测)
// 布局(1:1,设计实测)
@container-width: 1920px; // 设计画布 / 通栏块总宽
@container-width: 1920px; // 设计画布 / 通栏块总宽
// 全局视觉缩放:设计稿按 1920 画布 1:1 实现,整体观感偏大,
// 按用户要求整体缩放 67%(html zoom,等比缩放、比例关系与通栏布局不破坏)。
@@ -84,8 +83,8 @@
// 常规页内容区(specs2 全量复核 2026-09-30:案例库/需求提报/项目/合同/财务/消息详情/客服/
// 收藏/发票抬头/业务详情 共 17 张设计稿内容块均为 x70→1850 = **1780 宽**;此前误标 155/1600
// 导致整站内容右移 85px、窄 170px,已修正回归设计稿)
@page-content: 1780px; // 常规页内容实宽(设计实测 x70→1850)
@page-gutter: 70px; // 常规页左右留白(设计实测)
@page-content: 1780px; // 常规页内容实宽(设计实测 x70→1850)
@page-gutter: 70px; // 常规页左右留白(设计实测)
// 个人中心系(个人中心/账号安全/地址管理等 13 张)视觉核对定版基准,独立不联动:
// 左列 x155 宽 200 + 右卡,视觉比对设计稿裁片确认(specs 嵌套组坐标为组内相对值,不可直接用)
@@ -93,21 +92,22 @@
@profile-gutter: 155px;
// 首页专用(首页设计稿单独基准:x120→1800)
@home-content: 1680px; // 首页内容实宽
@home-gutter: 120px; // 首页左右留白
@home-content: 1680px; // 首页内容实宽
@home-gutter: 120px; // 首页左右留白
// 兼容旧引用(= 常规页基准,即绝大多数页面)
@content-width: @page-content;
@container-width-inner: @page-content;
@header-height: 72px; // 顶栏高(设计实测 72px)
@header-nav-gap: 94px; // 顶栏导航项文字间距(设计实测:首页 x275→311,案例库 x405)
@footer-height: 481px; // 页脚高(设计实测 481px)
@footer-inset: 70px; // 页脚内容左右内缩(与常规页内容区对齐)
@header-height: 72px; // 顶栏高(设计实测 72px)
@header-nav-gap: 94px; // 顶栏导航项文字间距(设计实测:首页 x275→311,案例库 x405)
@footer-height: 481px; // 页脚高(设计实测 481px)
@footer-inset: 70px; // 页脚内容左右内缩(与常规页内容区对齐)
// 登录页(无顶栏/页脚)
@login-brand-width: 784px; // 左侧品牌渐变栏
@login-brand-width: 35%; // 左侧品牌渐变栏宽度占比(右栏 flex:1 → 自动占 65%)
@login-form-offset: 1022px; // 右侧表单区起点
@auth-font-scale: 1.5; // 登录页字体放大倍数(老大要求整体 ×2)
// 阴影
@shadow-base: 0 2px 8px rgba(31, 39, 51, 0.08);
@@ -116,153 +116,158 @@
// 案例库(蓝湖设计稿 04/08/15;筛选面板 / 案例卡片 / 分页专用)
// ⚠️ 换算约定:设计画布内容宽 1780px → 应用内容宽 1368px,即 设计px × 0.77 ≈ CSS px;
// 小字号(设计 ≤12px)按可读下限 11px 不跟缩。下列色值均为设计稿取色实测。
@filter-selected-bg: #e7eeff; // 业务类型选中行底色(设计15 实取 rgba(231,238,255))
@pill-bg: #ededed; // 胶囊选项默认底色(设计04 实取 rgba(237,237,237))
@pill-selected-bg: #075cff; // 胶囊选项选中底色(设计04 实取 rgba(7,92,255))
@chips-panel-bg: #eaf1ff; // 「已选条件」区底色(设计04 实取 rgba(234,241,255))
@input-bg: #ededed; // 日期区间胶囊底色(设计04 实取 rgba(237,237,237))
@tag-hardware: #4caf50; // 业务标签:硬件电路(设计15 实取 #4CAF50)
@tag-iot: #5720ba; // 业务标签:物联网全案
@tag-manufacturing: #ff8f1f; // 业务标签:生产制造
@tag-other: #8a94a6; // 业务标签:其他
@filter-selected-bg: #e7eeff; // 业务类型选中行底色(设计15 实取 rgba(231,238,255))
@pill-bg: #ededed; // 胶囊选项默认底色(设计04 实取 rgba(237,237,237))
@pill-selected-bg: #075cff; // 胶囊选项选中底色(设计04 实取 rgba(7,92,255))
@chips-panel-bg: #eaf1ff; // 「已选条件」区底色(设计04 实取 rgba(234,241,255))
@input-bg: #ededed; // 日期区间胶囊底色(设计04 实取 rgba(237,237,237))
@tag-hardware: #4caf50; // 业务标签:硬件电路(设计15 实取 #4CAF50)
@tag-iot: #5720ba; // 业务标签:物联网全案
@tag-manufacturing: #ff8f1f; // 业务标签:生产制造
@tag-other: #8a94a6; // 业务标签:其他
@cases-accent: #075cff; // 搜索/重置按钮、已选 chip 文字(设计04/08 实取 rgba(7,92,255))
@cases-confirm: #2563eb; // 底部「确定筛选」按钮底色(设计04 实取)
@cases-hero-title: #121212; // 「成功案例库」主标题(设计04 实取 18,18,18)
@cases-filter-title: #222222; // 「筛选条件」标题(设计04 实取 34,34,34)
@cases-text: #333333; // 筛选项 / 卡片正文(设计04 实取 51,51,51)
@cases-muted: #666666; // 次级文字:计数 / 页面标语(设计04 实取 102,102,102)
@cases-input-border: #999999; // 搜索框描边·占位文字 / 复选框描边(设计04 实取 153,153,153)
@cases-icon: #797979; // 搜索图标(设计04 实取 121,121,121)
@cases-reset-bg: #f0f0f0; // 底部「重置」按钮底色(设计04 实取 239.82→240)
@cases-card-border: #e1dfdf; // 案例卡片描边(设计04 实取 224.6,222.7,222.7)
@cases-accent: #075cff; // 搜索/重置按钮、已选 chip 文字(设计04/08 实取 rgba(7,92,255))
@cases-confirm: #2563eb; // 底部「确定筛选」按钮底色(设计04 实取)
@cases-hero-title: #121212; // 「成功案例库」主标题(设计04 实取 18,18,18)
@cases-filter-title: #222222; // 「筛选条件」标题(设计04 实取 34,34,34)
@cases-text: #333333; // 筛选项 / 卡片正文(设计04 实取 51,51,51)
@cases-muted: #666666; // 次级文字:计数 / 页面标语(设计04 实取 102,102,102)
@cases-input-border: #999999; // 搜索框描边·占位文字 / 复选框描边(设计04 实取 153,153,153)
@cases-icon: #797979; // 搜索图标(设计04 实取 121,121,121)
@cases-reset-bg: #f0f0f0; // 底部「重置」按钮底色(设计04 实取 239.82→240)
@cases-card-border: #e1dfdf; // 案例卡片描边(设计04 实取 224.6,222.7,222.7)
@cases-card-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); // 案例卡片常驻阴影(设计04 实取)
@cases-page-active-bg: #e0e9fa; // 分页当前页底色(设计15 实取 ≈ rgba(2,79,255,.12) 叠白)
// 需求提报(按需求提报设计稿 06/07 标注实测校准)
@demand-selected-bg: #024fff; // 业务类型卡片 / 预算胶囊选中底色(设计稿实取 rgba(2,79,255))
@demand-accent: #024fff; // 业务类型选中描边·右上圆点 / 步骤序号(设计稿强调色 #024FFF)
@demand-secondary-bg: #075cff; // 底部「保存草稿 / 重置 / 立即提报」按钮底色(设计稿实取 rgba(7,92,255))
@demand-selected-bg: #024fff; // 业务类型卡片 / 预算胶囊选中底色(设计稿实取 rgba(2,79,255))
@demand-accent: #024fff; // 业务类型选中描边·右上圆点 / 步骤序号(设计稿强调色 #024FFF)
@demand-secondary-bg: #075cff; // 底部「保存草稿 / 重置 / 立即提报」按钮底色(设计稿实取 rgba(7,92,255))
// 项目中心(按项目中心设计稿标注校准)
@project-table-head-bg: #e8e8e8; // 表头底色(设计稿实取 (232,232,232))
@project-table-line: #bbbbbb; // 表格网格线(设计稿实取 (187,187,187))
@project-table-head-bg: #e8e8e8; // 表头底色(设计稿实取 (232,232,232))
@project-table-line: #bbbbbb; // 表格网格线(设计稿实取 (187,187,187))
// 项目详情(按 docs/prototype/项目中心-演示.html 设计稿校准)
// ⚠️ 换算系数:设计画布内容宽 1776px → 应用内容宽 1368px(.container 1400 − 2×16),
// 即 设计px × 0.77 ≈ CSS px。下列数值 = 设计稿实测值 × 0.77 后取整。
@project-accent: #024fff; // 竖条 / 状态文字 / 进度条 / 激活页签 / 里程碑进行中(蓝湖设计稿实取 #024FFF)
@project-track: #edeff2; // 进度条轨道(蓝湖设计 13 实取 #EDEFF2)
@milestone-done: #22c55e; // 里程碑已完成圆点 + 已完成段连接线(蓝湖设计 13 实取 #22C55E)
@milestone-idle: #d6d9de; // 里程碑待开始圆环描边(蓝湖设计 13 实取)
@team-avatar-bg: #1f67ef; // 团队头像底色(蓝湖设计 13 实取 #1F67EF)
@project-accent: #024fff; // 竖条 / 状态文字 / 进度条 / 激活页签 / 里程碑进行中(蓝湖设计稿实取 #024FFF)
@project-track: #edeff2; // 进度条轨道(蓝湖设计 13 实取 #EDEFF2)
@milestone-done: #22c55e; // 里程碑已完成圆点 + 已完成段连接线(蓝湖设计 13 实取 #22C55E)
@milestone-idle: #d6d9de; // 里程碑待开始圆环描边(蓝湖设计 13 实取)
@team-avatar-bg: #1f67ef; // 团队头像底色(蓝湖设计 13 实取 #1F67EF)
// 收银台 / 确认支付(按「支付」设计稿标注校准)
// ⚠️ 换算系数:设计稿 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 圆圈描边
@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: 285px; // 计划卡定宽(蓝湖设计 09 实测 x70..440 = 370 设计px × 0.77),竖排左对齐
@finance-card-radius: 10px; // 计划卡圆角(蓝湖设计 09 实测 ≈13 设计px × 0.77)
@finance-meta-color: #6b7280; // 字段行「账单号:/ 关联项目:」(蓝湖设计 09 (107,114,128))
@finance-row-bg: #f7f8fa; // 项目文件行底色(蓝湖设计 09/10/11 实取 #F7F8FA)
@finance-paid: #16a34a; // 已支付:徽标文字 + 金额(蓝湖设计 09 (22,163,74))
@finance-pending: #f59e0b; // 待支付:「立即支付」按钮底色 + 金额(蓝湖设计 09 实取)
@finance-pending-amount: #f59e0b; // 待支付:金额文字(蓝湖设计 09 (245,158,11))
@finance-idle: #b3bfc4; // 未到期:金额文字(蓝湖设计 09 (179,185,196))
@finance-cta-hover: #e08d05; // 「立即支付」hover(与收银台 CTA 同色系)
@finance-card-width: 285px; // 计划卡定宽(蓝湖设计 09 实测 x70..440 = 370 设计px × 0.77),竖排左对齐
@finance-card-radius: 10px; // 计划卡圆角(蓝湖设计 09 实测 ≈13 设计px × 0.77)
@finance-meta-color: #6b7280; // 字段行「账单号:/ 关联项目:」(蓝湖设计 09 (107,114,128))
@finance-row-bg: #f7f8fa; // 项目文件行底色(蓝湖设计 09/10/11 实取 #F7F8FA)
@finance-paid: #16a34a; // 已支付:徽标文字 + 金额(蓝湖设计 09 (22,163,74))
@finance-pending: #f59e0b; // 待支付:「立即支付」按钮底色 + 金额(蓝湖设计 09 实取)
@finance-pending-amount: #f59e0b; // 待支付:金额文字(蓝湖设计 09 (245,158,11))
@finance-idle: #b3bfc4; // 未到期:金额文字(蓝湖设计 09 (179,185,196))
@finance-cta-hover: #e08d05; // 「立即支付」hover(与收银台 CTA 同色系)
// 首页 / 业务详情(蓝湖设计稿:03·05 首页,53 业务详情)
// ⚠️ 换算约定同上:设计px × 0.77 ≈ CSS px;设计 ≤12px 小字号按可读下限取 12/11px。
@home-ink: #121212; // 栏目标题 / 卡片标题 / 分类标签文字(设计实取 #121212)
@home-welcome: #2c2c2c; // 首页欢迎语与副文案(设计实取 #2C2C2C)
@home-body: #333333; // 详情页标题/标签、案例元信息(设计实取 #333333)
@home-paragraph: #222222; // 详情页富文本正文(设计实取 #222222)
@home-breadcrumb: #666666; // 详情页面包屑(设计实取 #666666)
@home-card-border: #ebebeb; // 首页仪表盘(欢迎卡/快捷入口卡)描边(设计实取)
@home-section-border: #e2e2e2; // 首页大区块卡(业务服务/案例库精选)描边(设计实取)
@home-case-border: #e0dede; // 案例卡片描边(设计实取 rgba(224,222,222))
@home-business-border: #999999; // 业务卡片未选中描边(设计实取 #999999)
@home-ring: #c6c2c2; // 业务卡片右上圆环·未选中 / 快捷入口「更多」箭头(设计实取)
@home-tab-active: #085dff; // 案例分类激活文字(设计实取 #085DFF,下划线仍用 @primary-color)
@home-banner-dot: #8d96ae; // 首页头图轮播指示条/点(设计实取 rgba(141,150,174))
@home-banner-bg: #f3f4f8; // 首页头图底色(设计实取,轮播无图时兜底)
@home-quick-blue: #a5d0ff; // 快捷入口·工单需求池(cyan,设计实取)
@home-quick-purple: #dbc9fe; // 快捷入口·案例库管理(purple,设计实取)
@home-quick-green: #c4f0be; // 快捷入口·客服工作台(green,设计实取)
@home-quick-peach: #ffcbbe; // 快捷入口·合同台账(blue tone,设计稿实取浅橙)
@home-quick-pink: #ffcadb; // 快捷入口·财务台账(amber tone,设计稿实取浅粉)
@home-detail-hero-bg: linear-gradient(115deg, #e2ebf7 0%, #cfe7fd 55%, #b6dfff 100%); // 业务详情头图底(设计实取采样渐变)
@home-detail-logo-bg: #d9e5ff; // 业务详情头像块底色(设计实取 rgba(217.8,229.4,255))
@home-service-web: #ae7eff; // 服务类型·Web应用 圆形底(设计实取)
@home-service-mp: #00b240; // 服务类型·小程序 圆形底(设计实取)
@home-service-app: #fd9a83; // 服务类型·APP 圆形底(设计实取)
@home-service-dev: #80e561; // 服务类型·二次开发 圆形底(设计实取)
@home-service-pc: #0081e3; // 服务类型·桌面工具 圆形底(设计实取)
@home-ink: #121212; // 栏目标题 / 卡片标题 / 分类标签文字(设计实取 #121212)
@home-welcome: #2c2c2c; // 首页欢迎语与副文案(设计实取 #2C2C2C)
@home-body: #333333; // 详情页标题/标签、案例元信息(设计实取 #333333)
@home-paragraph: #222222; // 详情页富文本正文(设计实取 #222222)
@home-breadcrumb: #666666; // 详情页面包屑(设计实取 #666666)
@home-card-border: #ebebeb; // 首页仪表盘(欢迎卡/快捷入口卡)描边(设计实取)
@home-section-border: #e2e2e2; // 首页大区块卡(业务服务/案例库精选)描边(设计实取)
@home-case-border: #e0dede; // 案例卡片描边(设计实取 rgba(224,222,222))
@home-business-border: #999999; // 业务卡片未选中描边(设计实取 #999999)
@home-ring: #c6c2c2; // 业务卡片右上圆环·未选中 / 快捷入口「更多」箭头(设计实取)
@home-tab-active: #085dff; // 案例分类激活文字(设计实取 #085DFF,下划线仍用 @primary-color)
@home-banner-dot: #8d96ae; // 首页头图轮播指示条/点(设计实取 rgba(141,150,174))
@home-banner-bg: #f3f4f8; // 首页头图底色(设计实取,轮播无图时兜底)
@home-quick-blue: #a5d0ff; // 快捷入口·工单需求池(cyan,设计实取)
@home-quick-purple: #dbc9fe; // 快捷入口·案例库管理(purple,设计实取)
@home-quick-green: #c4f0be; // 快捷入口·客服工作台(green,设计实取)
@home-quick-peach: #ffcbbe; // 快捷入口·合同台账(blue tone,设计稿实取浅橙)
@home-quick-pink: #ffcadb; // 快捷入口·财务台账(amber tone,设计稿实取浅粉)
@home-detail-hero-bg: linear-gradient(
115deg,
#e2ebf7 0%,
#cfe7fd 55%,
#b6dfff 100%
); // 业务详情头图底(设计实取采样渐变)
@home-detail-logo-bg: #d9e5ff; // 业务详情头像块底色(设计实取 rgba(217.8,229.4,255))
@home-service-web: #ae7eff; // 服务类型·Web应用 圆形底(设计实取)
@home-service-mp: #00b240; // 服务类型·小程序 圆形底(设计实取)
@home-service-app: #fd9a83; // 服务类型·APP 圆形底(设计实取)
@home-service-dev: #80e561; // 服务类型·二次开发 圆形底(设计实取)
@home-service-pc: #0081e3; // 服务类型·桌面工具 圆形底(设计实取)
// 需求提报 / 登录注册(蓝湖设计稿)
// 设计稿索引:06·07 需求提报,02·51 登录,54 注册,55 找回密码
// ⚠️ 换算约定同上:设计px × 0.77 ≈ CSS px;设计 ≤12px 小字号按可读下限取 11/12px。
@demand-ink: #121212; // 需求提报页主标题 / 卡片标题 / 输入值(设计实取 rgba(18,18,18))
@demand-heading: #333333; // 区块标题(01/02/03 旁)/ 表单标签 / 底部提示(设计实取 rgba(51,51,51))
@demand-subtitle: #666666; // 页面副标题「填写您的需求信息…」(设计实取 rgba(102,102,102))
@demand-line: #999999; // 输入框·胶囊·卡片描边 + 占位文案(设计实取 rgba(153,153,153))
@demand-upload-bg: #ededed; // 附件上传区 / 文件行底色(设计实取 rgba(236.8,236.8,236.8)≈#EDEDED)
@demand-radio-idle: #c7c2c2; // 业务类型未选中单选圈描边(设计实取 rgba(198.8,194.4,194.4))
@auth-gradient-from: #505be8; // 登录/注册左侧品牌渐变起点(设计实取采样)
@auth-gradient-to: #8b3fe8; // 登录/注册左侧品牌渐变终点(设计实取采样)
@auth-track: #edeff2; // 密码强度条轨道底色(设计实取 #EDEFF2)
@demand-ink: #121212; // 需求提报页主标题 / 卡片标题 / 输入值(设计实取 rgba(18,18,18))
@demand-heading: #333333; // 区块标题(01/02/03 旁)/ 表单标签 / 底部提示(设计实取 rgba(51,51,51))
@demand-subtitle: #666666; // 页面副标题「填写您的需求信息…」(设计实取 rgba(102,102,102))
@demand-line: #999999; // 输入框·胶囊·卡片描边 + 占位文案(设计实取 rgba(153,153,153))
@demand-upload-bg: #ededed; // 附件上传区 / 文件行底色(设计实取 rgba(236.8,236.8,236.8)≈#EDEDED)
@demand-radio-idle: #c7c2c2; // 业务类型未选中单选圈描边(设计实取 rgba(198.8,194.4,194.4))
@auth-gradient-from: #505be8; // 登录/注册左侧品牌渐变起点(设计实取采样)
@auth-gradient-to: #8b3fe8; // 登录/注册左侧品牌渐变终点(设计实取采样)
@auth-track: #edeff2; // 密码强度条轨道底色(设计实取 #EDEFF2)
// 项目中心(蓝湖设计稿)
// 蓝湖设计 09(合同财务)/10(售后信息)/11(项目文件)/12(申请售后)/13(项目进度)像素实取。
// 换算约定同上:设计px × 0.77 ≈ CSS px;设计 ≤12px 小字号按可读下限取 11/12px。
@project-divider: #f0f1f3; // 页签下分割线 / 计划卡描边 / 表单底栏分隔线(设计 (240,241,243))
@project-breadcrumb: #666666; // 详情页·申请售后页面包屑文字(设计 (102,102,102))
@project-logo-bg: #f2f4f6; // 详情头像方块「</>」底色(设计 09 实取 ≈#F1F3F5)
@project-banner-bg: #fdeeee; // 售后工单提示横幅底色(设计 10 实取 #FDEEEE)
@project-banner-title: #d93025; // 横幅标题红(设计 10 (217,48,37))
@project-apply: #e3464b; // 「申请售后」按钮底色(设计 10 实取 #E3464B)
@project-quiet-btn: #eef0f3; // 浅灰按钮底:上传文档 / 取消 / 重置(设计 10·12 实取)
@tag-success-bg: #e7f7ec; // 徽标底:已支付 / 成功(设计 09 实取)
@tag-warning-bg: #fef3e2; // 徽标底:待支付(设计 09 实取)
@tag-warning-text: #d97706; // 徽标字:待支付(设计 09 (217,119,6))
@tag-info-bg: #f3f4f6; // 徽标底:未支付 / 中性(设计 09 实取)
@milestone-line: #eeeff2; // 里程碑未完成连接线(设计 13 实取)
@project-divider: #f0f1f3; // 页签下分割线 / 计划卡描边 / 表单底栏分隔线(设计 (240,241,243))
@project-breadcrumb: #666666; // 详情页·申请售后页面包屑文字(设计 (102,102,102))
@project-logo-bg: #f2f4f6; // 详情头像方块「</>」底色(设计 09 实取 ≈#F1F3F5)
@project-banner-bg: #fdeeee; // 售后工单提示横幅底色(设计 10 实取 #FDEEEE)
@project-banner-title: #d93025; // 横幅标题红(设计 10 (217,48,37))
@project-apply: #e3464b; // 「申请售后」按钮底色(设计 10 实取 #E3464B)
@project-quiet-btn: #eef0f3; // 浅灰按钮底:上传文档 / 取消 / 重置(设计 10·12 实取)
@tag-success-bg: #e7f7ec; // 徽标底:已支付 / 成功(设计 09 实取)
@tag-warning-bg: #fef3e2; // 徽标底:待支付(设计 09 实取)
@tag-warning-text: #d97706; // 徽标字:待支付(设计 09 (217,119,6))
@tag-info-bg: #f3f4f6; // 徽标底:未支付 / 中性(设计 09 实取)
@milestone-line: #eeeff2; // 里程碑未完成连接线(设计 13 实取)
// 项目详情(蓝湖设计稿 5 张:项目进度 / 项目文件 / 合同财务 / 售后信息 / 申请售后)
// ⚠️ 换算约定:**1:1 像素级还原**,设计画布 1920px,直接使用设计标注 px,不做缩放。
// 实测锚点(1920 视口):面包屑 (70,116) 24/500 #666666;主标题 (142,212) 19/700;
// 页签行 (70,278) 1780×40,文字 13/600 激活 / 13/400 常规,节距 86;
// 分隔线 (70,317) 1780×1 #F0F1F3;区块标题 15/700 @(82,y)。
@project-ink: #1f2937; // 主标题 / 区块标题 / 文件名(设计实取 #1F2937)
@project-label: #6b7280; // 「项目编号:」等字段标签(设计实取 #6B7280)
@project-value: #1f2937; // 字段值(设计实取 #1F2937)
@project-muted: #9ca3af; // 次行说明:上传时间 / 占位文字(设计实取 #9CA3AF)
@project-cell: #4b5563; // 只读值 / 行内操作「预览·下载」(设计实取 #4B5563)
@project-card: #ffffff; // 表格区白底(设计实取)
@project-field-bg: #f3f4f6; // 只读字段底(设计实取 #F3F4F6)
@project-input-border: #dde1e7; // 只读框 / 输入框描边(设计实取 #DDE1E7)
@project-head-bg: #f7f8fa; // 里程碑 / 文件行浅底(设计实取 #F7F8FA)
@project-upload-tag: #ef4444; // 上传文档红字(设计实取 #EF4444)
@project-banner-soft: #fdeeee; // 售后工单横幅底(设计实取 #FDEEEE)
@project-ink: #1f2937; // 主标题 / 区块标题 / 文件名(设计实取 #1F2937)
@project-label: #6b7280; // 「项目编号:」等字段标签(设计实取 #6B7280)
@project-value: #1f2937; // 字段值(设计实取 #1F2937)
@project-muted: #9ca3af; // 次行说明:上传时间 / 占位文字(设计实取 #9CA3AF)
@project-cell: #4b5563; // 只读值 / 行内操作「预览·下载」(设计实取 #4B5563)
@project-card: #ffffff; // 表格区白底(设计实取)
@project-field-bg: #f3f4f6; // 只读字段底(设计实取 #F3F4F6)
@project-input-border: #dde1e7; // 只读框 / 输入框描边(设计实取 #DDE1E7)
@project-head-bg: #f7f8fa; // 里程碑 / 文件行浅底(设计实取 #F7F8FA)
@project-upload-tag: #ef4444; // 上传文档红字(设计实取 #EF4444)
@project-banner-soft: #fdeeee; // 售后工单横幅底(设计实取 #FDEEEE)
// 项目详情 → 里程碑(设计实测)
@milestone-node: 356px; // 节点列宽(相邻节点 x70→426 = 356)
@milestone-dot: 26px; // 已完成实心点直径(x235..261 = 26)
@milestone-ring: #e5e7eb; // 待开始连接线(设计实取 #E5E7EB)
@milestone-idle-text: #9ca3af; // 待开始 / 进行中的状态说明(设计实取 #9CA3AF)
@milestone-node: 356px; // 节点列宽(相邻节点 x70→426 = 356)
@milestone-dot: 26px; // 已完成实心点直径(x235..261 = 26)
@milestone-ring: #e5e7eb; // 待开始连接线(设计实取 #E5E7EB)
@milestone-idle-text: #9ca3af; // 待开始 / 进行中的状态说明(设计实取 #9CA3AF)
// 项目详情 → 项目团队(设计实测:头像 64,相邻中心距 99 → 间距 35)
@team-size: 64px;
@@ -271,15 +276,15 @@
// 合同中心(蓝湖设计稿)
// 设计索引:41 顶部横幅+搜索栏,46/47 表格+分页,40/44/52 合同详情,45 面包屑,39 签署。
// ⚠️ 换算约定同上:设计px × 0.77 ≈ CSS px;设计 ≤12px 小字号按可读下限取 11px,不跟缩。
@contract-accent: #075cff; // 列表:搜索/重置按钮、当前页码、「详情」链接(设计 46 实取 rgb(7,92,255))
@contract-muted: #666666; // 面包屑 / 顶部横幅副标语 / 分页箭头(设计 45·46 实取 #666666)
@contract-head-text: #222222; // 表头文字(设计 46 实取 #222222)
@contract-cell-text: #333333; // 表格正文(设计 46 实取 #333333)
@contract-line: #999999; // 表格边框·行分隔线·分页描边与页码(设计 46 实取 #999999)
@contract-table-head-bg: #ededed; // 表头底色(设计 46 实取 (237,237,237))
@contract-placeholder: #b3b9c4; // 搜索框占位文字(设计 41 实取 (179,185,196))
@contract-reset-bg: #eef0f3; // 搜索行「重置」按钮底色(设计 41 实取)
@contract-qr-bg: #d6d6d6; // 签署页二维码占位底色(设计 39 实取 #D6D6D6)
@contract-accent: #075cff; // 列表:搜索/重置按钮、当前页码、「详情」链接(设计 46 实取 rgb(7,92,255))
@contract-muted: #666666; // 面包屑 / 顶部横幅副标语 / 分页箭头(设计 45·46 实取 #666666)
@contract-head-text: #222222; // 表头文字(设计 46 实取 #222222)
@contract-cell-text: #333333; // 表格正文(设计 46 实取 #333333)
@contract-line: #999999; // 表格边框·行分隔线·分页描边与页码(设计 46 实取 #999999)
@contract-table-head-bg: #ededed; // 表头底色(设计 46 实取 (237,237,237))
@contract-placeholder: #b3b9c4; // 搜索框占位文字(设计 41 实取 (179,185,196))
@contract-reset-bg: #eef0f3; // 搜索行「重置」按钮底色(设计 41 实取)
@contract-qr-bg: #d6d6d6; // 签署页二维码占位底色(设计 39 实取 #D6D6D6)
// 财务中心(蓝湖设计稿)
// 设计索引:37 财务概览,30 账单明细,31 账单详情,33·34 扫码支付,32 支付结果,35·36 发票抬头。
@@ -287,15 +292,20 @@
// 字号 = 设计px × 0.77,≤14 设计px 折算不足 11px 时按可读下限取 11px(15/16 → 12,18 → 14,20 → 15,22 → 17,26 → 20,34 → 26,38 → 29)。
// 复用同值既有 token:表格/卡片分隔线 @project-divider(#f0f1f3)、占位文字 @contract-placeholder(#b3b9c4)、
// 「重置」按钮底 @project-quiet-btn(#eef0f3)、二维码占位底 @contract-qr-bg(#d6d6d6)。
@finance-hero-gradient: linear-gradient(115deg, #024fff 0%, #4b4ff3 55%, #7e75ec 100%); // 概览「累计消费总额」卡渐变(设计 37 实取采样 #034FFF→#7E75EC)
@finance-chart-bar: #4a90c4; // 概览月度账单柱条(设计 37 实取采样)
@finance-chart-grid: #edeef2; // 概览图表网格线(设计 37 实取 rgba(237,239,242))
@finance-table-head-bg: #f1f3f5; // 账单表头底色(设计 30 实取)
@finance-field-bg: #f3f4f6; // 搜索框底色(设计 30 实取 #F3F4F6)
@finance-page-active: #d5e2fe; // 分页当前页底色(设计 30/35 实取 #C5D7FE/#D5E2FE)
@finance-summary-cta: #ffb754; // 底部汇总条「立即支付」按钮(设计 30 实取采样)
@finance-result-circle: #7ed321; // 支付结果大圆勾底色(设计 32 实取采样)
@finance-safe-bg: #d2eedc; // 扫码支付「已通过安全验证」横幅底(设计 33 实取采样)
@finance-hero-gradient: linear-gradient(
115deg,
#024fff 0%,
#4b4ff3 55%,
#7e75ec 100%
); // 概览「累计消费总额」卡渐变(设计 37 实取采样 #034FFF→#7E75EC)
@finance-chart-bar: #4a90c4; // 概览月度账单柱条(设计 37 实取采样)
@finance-chart-grid: #edeef2; // 概览图表网格线(设计 37 实取 rgba(237,239,242))
@finance-table-head-bg: #f1f3f5; // 账单表头底色(设计 30 实取)
@finance-field-bg: #f3f4f6; // 搜索框底色(设计 30 实取 #F3F4F6)
@finance-page-active: #d5e2fe; // 分页当前页底色(设计 30/35 实取 #C5D7FE/#D5E2FE)
@finance-summary-cta: #ffb754; // 底部汇总条「立即支付」按钮(设计 30 实取采样)
@finance-result-circle: #7ed321; // 支付结果大圆勾底色(设计 32 实取采样)
@finance-safe-bg: #d2eedc; // 扫码支付「已通过安全验证」横幅底(设计 33 实取采样)
// 消息中心 / 在线客服(蓝湖设计稿)
// 设计索引:43 消息中心列表,42 通知详情,38 在线客服聊天。
@@ -304,8 +314,8 @@
// 搜索框底 @finance-field-bg(#f3f4f6)、「重置」底 @contract-reset-bg(#eef0f3)、占位字 @contract-placeholder(#b3b9c4)、
// 附件/输入框底 #f7f8fa=@finance-row-bg、聊天消息区底 #fafbfc=@bg-color-light、未读徽标红=@danger-color、
// 强调蓝(搜索/返回/发送/气泡/头像)#024fff=@primary-strong、分页激活底 #e1eafa≈@cases-page-active-bg。
@message-icon-bg: #3b82f6; // 消息行类型图标圆底(设计 43 实取 #3B82F6)
@service-user-avatar: #8d99ae; // 客服聊天·右侧用户头像底(设计 38 实取 #8D99AE)
@message-icon-bg: #3b82f6; // 消息行类型图标圆底(设计 43 实取 #3B82F6)
@service-user-avatar: #8d99ae; // 客服聊天·右侧用户头像底(设计 38 实取 #8D99AE)
// 个人中心(蓝湖设计稿)
// 设计索引:14 布局+专属客服热线,28 账号安全列表,22~29 安全类弹窗,20 地址管理,17 资质列表,
@@ -314,32 +324,32 @@
// (11/12/13/14 → 11,15/16 → 12,19/20 → 15,24 → 18)。
// 复用同值既有 token:页面底 @bg-color、强调蓝 #024fff=@primary-strong、卡片描边 #f0f1f3≈@project-divider、
// 成功绿底徽标 #e7f7ec≈@tag-success-bg、次级按钮底 #eef0f3≈@project-quiet-btn、文字灰阶 @text-color* 系列。
@profile-nav-active-bg: #e7eeff; // 左侧菜单选中项底色(设计 28 实取 rgba(231,238,255))
@profile-card-border: #f0f1f3; // 列表卡 / 分组卡描边(设计 28 实取 (240,241,243))
@profile-line: #e5e7eb; // 按钮描边 / 分隔线(设计 28 注销按钮描边实取 (229,231,235))
@profile-input-border: #dde1e7; // 输入框描边(设计 22 实取 (221,225,231))
@profile-radius: 6px; // 输入框 / 小按钮 / 菜单选中项圆角(设计 8px × 0.77)
@profile-page-bg: #f4f6f8; // 个人中心页底色(设计稿实取)
@profile-ink: #1f2937; // 个人中心标题字色(设计稿实取)
@profile-hotline-bg: #d6e4fb; // 专属客服热线卡底色(设计 14 实取 rgba(214,228,251))
@profile-icon-pwd: #c7d2fe; // 账号安全「修改密码」图标块底(设计 28 实取)
@profile-icon-phone: #fdebeb; // 账号安全「绑定手机」图标块底(设计 28 实取)
@profile-icon-email: #fee2e2; // 账号安全「绑定邮箱」图标块底(设计 28 实取)
@profile-user-from: #5459e8; // 用户卡渐变起点(设计 14 左上角实取)
@profile-user-to: #d2bdf3; // 用户卡渐变终点(设计 14 右下角实取)
@profile-user-avatar: #8976ed; // 用户卡头像圆底(设计 14 实取)
@profile-page-active-bg: #d1e0fe; // 分页当前页底色(设计 20 实取 #D1E0FE)
@profile-quiet-btn: #eef0f3; // 弹窗次级(取消)按钮底色(设计 24 实取 rgba(238,240,243))
@profile-nav-active-bg: #e7eeff; // 左侧菜单选中项底色(设计 28 实取 rgba(231,238,255))
@profile-card-border: #f0f1f3; // 列表卡 / 分组卡描边(设计 28 实取 (240,241,243))
@profile-line: #e5e7eb; // 按钮描边 / 分隔线(设计 28 注销按钮描边实取 (229,231,235))
@profile-input-border: #dde1e7; // 输入框描边(设计 22 实取 (221,225,231))
@profile-radius: 6px; // 输入框 / 小按钮 / 菜单选中项圆角(设计 8px × 0.77)
@profile-page-bg: #f4f6f8; // 个人中心页底色(设计稿实取)
@profile-ink: #1f2937; // 个人中心标题字色(设计稿实取)
@profile-hotline-bg: #d6e4fb; // 专属客服热线卡底色(设计 14 实取 rgba(214,228,251))
@profile-icon-pwd: #c7d2fe; // 账号安全「修改密码」图标块底(设计 28 实取)
@profile-icon-phone: #fdebeb; // 账号安全「绑定手机」图标块底(设计 28 实取)
@profile-icon-email: #fee2e2; // 账号安全「绑定邮箱」图标块底(设计 28 实取)
@profile-user-from: #5459e8; // 用户卡渐变起点(设计 14 左上角实取)
@profile-user-to: #d2bdf3; // 用户卡渐变终点(设计 14 右下角实取)
@profile-user-avatar: #8976ed; // 用户卡头像圆底(设计 14 实取)
@profile-page-active-bg: #d1e0fe; // 分页当前页底色(设计 20 实取 #D1E0FE)
@profile-quiet-btn: #eef0f3; // 弹窗次级(取消)按钮底色(设计 24 实取 rgba(238,240,243))
// 合同中心(蓝湖设计稿)· 补充
@contract-ink: #121212; // 页面最深标题色(设计实取 #121212)
@contract-page-bg: #f4f6f8; // 页面底色 / 详情只读值框底(设计 e6c3a361 实取 #F4F6F8)
@contract-ink: #121212; // 页面最深标题色(设计实取 #121212)
@contract-page-bg: #f4f6f8; // 页面底色 / 详情只读值框底(设计 e6c3a361 实取 #F4F6F8)
// 财务中心(蓝湖设计稿)· 补充
@finance-pay-bg: #f7f8f9; // 扫码支付页底色(设计实取 #f7f8f9)
@finance-pay-bg: #f7f8f9; // 扫码支付页底色(设计实取 #f7f8f9)
// 财务中心概览 / 账单(设计 6cd4aa76 等,1920 画布 1:1 实取)
@finance-muted-text: #6b7280; // 副标语 / 图表刻度 / 图例 / 次级文字(设计实取 #6B7280)
@finance-card-line: #f0f1f3; // 卡片描边(设计实取 #F0F1F3)
@finance-entry-text: #4b5563; // 快捷入口文字(设计实取 #4B5563)
@finance-axis-text: #9ca3af; // 图表 Y 轴刻度(设计实取 #9CA3AF)
@finance-ink: #1f2937; // 区块标题(设计实取 #1F2937)
@finance-muted-text: #6b7280; // 副标语 / 图表刻度 / 图例 / 次级文字(设计实取 #6B7280)
@finance-card-line: #f0f1f3; // 卡片描边(设计实取 #F0F1F3)
@finance-entry-text: #4b5563; // 快捷入口文字(设计实取 #4B5563)
@finance-axis-text: #9ca3af; // 图表 Y 轴刻度(设计实取 #9CA3AF)
@finance-ink: #1f2937; // 区块标题(设计实取 #1F2937)