zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat ui设计稿

Browse Source
This commit is contained in:
Ironsp
2026-09-30 15:55:36 +08:00
parent ce8210fb3f
commit 9ab6253c81
102 changed files with 4855 additions and 2359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/reset.less
View File

@@ -14,7 +14,7 @@ body {
body {
color: @text-color;
font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, 'Helvetica Neue', Arial, sans-serif;
font-family: 'PingFang SC', 'Source Han Sans SC', 'Microsoft YaHei', -apple-system, 'Helvetica Neue', Arial, sans-serif;
font-size: @font-size-base;
line-height: 1.5;
background-color: @bg-color;

222
src/styles/variables.less
View File

@@ -1,29 +1,37 @@
// ★ less 变量唯一来源（颜色/间距/字号/圆角）
// 注：蓝湖设计稿到位前为原型近似值，到位后按标注精确校准
// 注：下列色值已按蓝湖设计稿（lanhu pid=b0052b6c）标注实测校准，
// 换算约定：设计画布内容宽 1780px → 应用内容宽 1368px（.container 1400 − 2×16），
// 即 设计px × 0.77 ≈ CSS px；小字号（设计 ≤12px）按可读下限不跟缩。
// 品牌色（按案例库设计稿标注校准）
@primary-color: #276fff;
// 品牌色（设计稿实测：填充按钮/下划线 #1F67EF，内容强调 #024FFF）
@primary-color: #1f67ef;
@primary-strong: #024fff;
@primary-hover: #598bff;
@primary-light: #eaf1ff;
// 功能色
@success-color: #34c724;
// 功能色（设计稿实测：危险 #EF4444、成功 #16A34A）
@success-color: #16a34a;
@warning-color: #ff8f1f;
@danger-color: #f54a45;
@danger-color: #ef4444;
@info-color: #8a94a6;
// 文字色
@heading-color: #1f2733;
@text-color: #525e71;
@text-color-secondary: #8a94a6;
@text-color-disabled: #b8c0cc;
// 文字色（设计稿灰阶：#1F2937 / #4B5563 / #6B7280 / #9CA3AF）
@heading-color: #1f2937;
@text-color: #4b5563;
@text-color-secondary: #6b7280;
@text-color-disabled: #9ca3af;
// 背景 / 边框
// 背景 / 边框（设计稿实测：页面 #F4F6F8、顶栏 #F4F5F9、顶栏下边线 #D8D8D8、页脚 #0C1321）
@bg-color: #f5f6f8;
@bg-color-light: #fafbfc;
@border-color: #e4e7ec;
@border-color-dark: #cdd3dd;
@white: #ffffff;
@black: #000000;
@header-bg: #f4f5f9;
@header-border: #d8d8d8;
@footer-bg: #0c1321;
// 圆角
@radius-sm: 4px;
@@ -50,27 +58,44 @@
// 布局（容器宽度按设计稿标注校准：设计稿为约 1400 宽的整幅版面）
@container-width: 1400px;
@header-height: 64px;
@header-nav-gap: 72px; // 顶栏导航项间距（设计 94px × 0.77；≤1280 视口降为 32px）
@footer-height: 240px;
@footer-inset: 65px; // 页脚内容左右内缩（设计 85px × 0.77，页脚比正文更窄）
// 阴影
@shadow-base: 0 2px 8px rgba(31, 39, 51, 0.08);
@shadow-lg: 0 4px 16px rgba(31, 39, 51, 0.12);
// 案例库（按设计稿标注校准；筛选面板 / 案例卡片专用）
@filter-selected-bg: #e6f7ff; // 业务类型选中行底色
@pill-bg: #f2f2f2; // 胶囊选项默认底色
@pill-selected-bg: #d4e2ff; // 胶囊选项选中底色
@chips-panel-bg: #eff6ff; // 「已选条件」区底色
@input-bg: #f3f4f6; // 搜索框 / 日期区间底色
@tag-hardware: #82b43b; // 业务标签：硬件电路
// 案例库（蓝湖设计稿 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; // 业务标签：其他
// 需求提报（按需求提报设计稿标注校准）
@demand-selected-bg: #dee8fc; // 业务类型卡片 / 预算胶囊选中底色
@demand-accent: #2563eb; // 业务类型选中描边与右上角圆点
@demand-secondary-bg: #e6e6e6; // 底部「保存草稿 / 重置」按钮底色
@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)）
// 项目中心（按项目中心设计稿标注校准）
@project-table-head-bg: #e8e8e8; // 表头底色（设计稿实取 (232,232,232)）
@@ -79,11 +104,11 @@
// 项目详情（按 docs/prototype/项目中心-演示.html 设计稿校准）
// ⚠️ 换算系数：设计画布内容宽 1776px → 应用内容宽 1368px（.container 1400 − 2×16），
// 即 设计px × 0.77 ≈ CSS px。下列数值 = 设计稿实测值 × 0.77 后取整。
@project-accent: #2563eb; // 竖条 / 状态文字 / 进度条 / 激活页签 / 里程碑进行中（设计稿实取 rgba(37,99,235,1)）
@project-track: #e8e8e8; // 进度条轨道（设计稿实取）
@milestone-done: #34c724; // 里程碑已完成圆点
@milestone-idle: #cecece; // 里程碑待开始圆环 + 连接线（设计稿实取）
@team-avatar-bg: #54bcbd; // 团队头像底色（设计稿实取）
@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 后取整。
@@ -102,13 +127,136 @@
// 项目详情 → 合同财务（付款计划卡 / 发票·合同文件行）
// 来源 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-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; // 服务类型·桌面工具 圆形底（设计实取）
// 需求提报 / 登录注册（蓝湖设计稿）
// 设计稿索引：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）
// 项目中心（蓝湖设计稿）
// 蓝湖设计 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 实取）
// 合同中心（蓝湖设计稿）
// 设计索引：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）
// 财务中心（蓝湖设计稿）
// 设计索引：37 财务概览，30 账单明细，31 账单详情，33·34 扫码支付，32 支付结果，35·36 发票抬头。
// ⚠️ 换算约定：设计画布内容宽 1780 → 应用内容宽 1368（.container 1400 − 2×16），设计px × 0.77；
// 字号 = 设计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 实取采样）
// 消息中心 / 在线客服（蓝湖设计稿）
// 设计索引：43 消息中心列表，42 通知详情，38 在线客服聊天。
// ⚠️ 换算约定同上：设计px × 0.77 ≈ CSS px；设计 ≤14px 小字号按可读下限取 11px。
// 复用同值既有 token：行分割线/聊天卡描边 @project-divider(#f0f1f3)、灰字 #9ca3af=@text-color-disabled、
// 搜索框底 @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）
// 个人中心（蓝湖设计稿）
// 设计索引：14 布局+专属客服热线，28 账号安全列表，22~29 安全类弹窗，20 地址管理，17 资质列表，
// 18 意见反馈，16 帮助中心，19 关于我们。
// ⚠️ 换算约定同上：设计px × 0.77 ≈ CSS px；字号 = round(设计px × 0.77)，≤14 设计px 按可读下限取 11px
// （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-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）
// 财务中心（蓝湖设计稿）· 补充
@finance-pay-bg: #f7f8f9; // 扫码支付页底色（设计实取 #f7f8f9）