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

feat 登录页面

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

156
cdp.js Normal file
View File

@@ -0,0 +1,156 @@
// @ts-nocheck
/**
* 无依赖的 headless Chrome 截图 + DOM 测量工具（CDP over WebSocket）
*
* 用法:
* node cdp.js <url> [width] [height] [outPng] [evalExpr]
*
* 环境变量:
* CDP_FULL=1 截整页（captureBeyondViewport）
* CDP_WAIT=2500 导航后等待毫秒
* CDP_HASH= 路由 hash/附加查询串，直接拼在 url 后面
*
* 说明：本机 agent-browser 会反复 SIGTERM，故改为此脚本；仅用 Node 内置能力。
*/
import { spawn } from 'node:child_process'
import { writeFileSync, mkdtempSync, existsSync } from 'node:fs'
import { tmpdir } from 'node:os'
import { join } from 'node:path'
const CANDIDATES = [
'C:/Program Files/Google/Chrome/Application/chrome.exe',
'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe',
'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe',
'C:/Program Files/Microsoft/Edge/Application/msedge.exe',
]
const CHROME = CANDIDATES.find((p) => existsSync(p))
if (!CHROME) {
console.error('找不到 Chrome/Edge')
process.exit(1)
}
const [, , urlArg, wArg, hArg, outArg, exprArg] = process.argv
const url = (urlArg || 'http://localhost:5173/') + (process.env.CDP_HASH || '')
const width = Number(wArg || 1440)
const height = Number(hArg || 900)
const out = outArg || 'shot.png'
const expr = exprArg || ''
const full = process.env.CDP_FULL === '1'
const waitMs = Number(process.env.CDP_WAIT || 2800)
const PORT = 9300 + Math.floor(Math.random() * 400)
const userDataDir = mkdtempSync(join(tmpdir(), 'cdp-'))
const child = spawn(
CHROME,
[
'--headless=new',
`--remote-debugging-port=${PORT}`,
`--user-data-dir=${userDataDir}`,
`--window-size=${width},${height}`,
'--no-first-run',
'--no-default-browser-check',
'--disable-gpu',
'--force-device-scale-factor=1',
'about:blank',
],
{ stdio: 'ignore' },
)
async function findTarget() {
for (let i = 0; i < 100; i += 1) {
try {
const res = await fetch(`http://127.0.0.1:${PORT}/json/list`)
const list = await res.json()
const page = list.find((t) => t.type === 'page' && t.webSocketDebuggerUrl)
if (page) return page.webSocketDebuggerUrl
}
catch { /* 还没起来 */ }
await new Promise((r) => setTimeout(r, 150))
}
throw new Error('Chrome 调试端口未就绪')
}
function makeClient(wsUrl) {
const ws = new WebSocket(wsUrl)
let seq = 0
const pending = new Map()
const events = []
const ready = new Promise((resolve, reject) => {
ws.onopen = () => resolve()
ws.onerror = (e) => reject(new Error(`ws error ${e.message || ''}`))
})
ws.onmessage = (ev) => {
const msg = JSON.parse(ev.data)
if (msg.id && pending.has(msg.id)) {
const { resolve, reject } = pending.get(msg.id)
pending.delete(msg.id)
if (msg.error) reject(new Error(JSON.stringify(msg.error)))
else resolve(msg.result)
}
else if (msg.method) events.push(msg.method)
}
const send = (method, params = {}) =>
new Promise((resolve, reject) => {
seq += 1
pending.set(seq, { resolve, reject })
ws.send(JSON.stringify({ id: seq, method, params }))
})
return { ready, send, events, close: () => ws.close() }
}
const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
try {
const wsUrl = await findTarget()
const cdp = makeClient(wsUrl)
await cdp.ready
await cdp.send('Page.enable')
await cdp.send('Runtime.enable')
await cdp.send('Emulation.setDeviceMetricsOverride', {
width,
height,
deviceScaleFactor: 1,
mobile: false,
})
await cdp.send('Page.navigate', { url })
await sleep(waitMs)
if (expr) {
const res = await cdp.send('Runtime.evaluate', {
expression: expr,
returnByValue: true,
awaitPromise: true,
})
if (res.exceptionDetails) {
console.error('EVAL-ERROR:', JSON.stringify(res.exceptionDetails.exception?.description || res.exceptionDetails))
}
else {
console.log(typeof res.result.value === 'string' ? res.result.value : JSON.stringify(res.result.value))
}
}
let clip
if (full) {
const metrics = await cdp.send('Page.getLayoutMetrics')
const size = metrics.cssContentSize || metrics.contentSize
clip = { x: 0, y: 0, width: size.width, height: size.height, scale: 1 }
}
const shot = await cdp.send('Page.captureScreenshot', {
format: 'png',
captureBeyondViewport: full,
...(clip ? { clip } : {}),
})
writeFileSync(out, Buffer.from(shot.data, 'base64'))
console.error(`saved ${out} (${width}x${height}${full ? ' fullpage' : ''})`)
cdp.close()
}
catch (err) {
console.error('FAIL:', err.message)
process.exitCode = 1
}
finally {
try { child.kill() } catch { /* ignore */ }
}

BIN
shot-login-sms.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
shot-login.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
shot-register.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
shot-reset-password.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

21
src/components/SmsCodeInput.vue
View File

@@ -21,12 +21,8 @@ function onGetCode(): void {
class="sms-code__input"
type="text"
placeholder="请输入验证码"
>
<button
class="sms-code__btn"
:disabled="isCounting"
@click="onGetCode"
>
/>
<button class="sms-code__btn" :disabled="isCounting" @click="onGetCode">
{{ isCounting ? `${seconds}秒后重新获取` : '获取验证码' }}
</button>
</div>
@@ -38,15 +34,16 @@ function onGetCode(): void {
gap: @spacing-sm;
// 设计稿（02/54/55）：验证码输入框 590×39（整行 680，右侧留 90 给「获取验证码」）
// ⚠️ 盒高/字号随登录页 @auth-font-scale 放大，与各表单页输入框保持同高
&__input {
flex: 1;
min-width: 0;
height: 39px;
padding: 0 12px;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
font-size: 13px * @auth-font-scale;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -63,13 +60,13 @@ function onGetCode(): void {
// 设计稿：「获取验证码」为蓝字纯文本（无边框），12/400 #024FFF
&__btn {
flex-shrink: 0;
min-width: 74px;
height: 39px;
min-width: 74px * @auth-font-scale;
height: 39px * @auth-font-scale;
padding: 0;
border: none;
background: transparent;
color: @primary-strong;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
text-align: right;
cursor: pointer;

69
src/styles/common.less
View File

@@ -8,7 +8,8 @@
max-width: @container-width;
margin: 0 auto;
// 留白夹在 16 与 70 之间：(1920 − 1780) / 2 = 70
padding: 0 clamp(@spacing-base, calc((100% - @page-content) / 2), @page-gutter);
padding: 0
clamp(@spacing-base, calc((100% - @page-content) / 2), @page-gutter);
}
// 首页容器：首页设计稿单独基准（内容 1680，留白 120）
@@ -21,37 +22,44 @@
}
// ============ 登录 / 注册 / 找回密码（蓝湖设计稿 02·51·54·55） ============
// 三页共用外壳：左侧 784 品牌渐变面板 + 右侧白底表单区。
// 各页差异仅在「表单列起点 x」与「垂直顶 y」，由页面级 CSS 变量覆写。
// 三页共用外壳：左侧 784 品牌渐变面板 + 右侧白底表单区（表单块在右区内居中）。
// 设计稿锚点：面板 (0,0) 784×1080；主标 (257,304) 40/700；标语 (257,715) 22/600。
.auth-page {
--auth-form-x: 1022px; // 表单列起点（账号密码登录）
--auth-form-y: 306px; // 表单列垂直顶
position: relative;
display: flex;
min-height: 100vh;
// ⚠️ html 上有全局 zoom（@page-zoom）：内部 100vh 会被再缩一次，
// 渲染高 = 100vh × zoom，故必须除以 zoom 才能铺满真实视口（否则底部留灰带）。
min-height: calc(100vh / @page-zoom);
background: @white;
@media (max-width: 1286px) {
min-height: calc(100vh / @page-zoom--sm);
}
&__brand {
.flex(column, flex-start, flex-start);
flex: 0 0 @login-brand-width;
padding: 304px 0 0 257px;
background: linear-gradient(160deg, @auth-gradient-from 0%, @auth-gradient-to 100%);
.flex(column, flex-start, center);
flex: 0 0 @login-brand-width; // 35%，右栏 flex:1 自动占 65%
padding: 304px 24px 0;
background: linear-gradient(
160deg,
@auth-gradient-from 0%,
@auth-gradient-to 100%
);
color: @white;
text-align: center;
}
&__logo {
margin: 0;
font-size: 40px;
font-size: 40px * @auth-font-scale;
font-weight: 700;
line-height: 58px;
line-height: 58px * @auth-font-scale;
color: @white;
}
&__key {
margin: 26px 0 0;
font-size: 15px;
font-size: 15px * @auth-font-scale;
font-weight: 400;
letter-spacing: 0.5px;
color: @white;
@@ -59,18 +67,19 @@
&__slogan {
margin: 246px 0 0;
font-size: 22px;
font-size: 22px * @auth-font-scale;
font-weight: 600;
line-height: 29px;
line-height: 29px * @auth-font-scale;
letter-spacing: 8px;
color: @white;
}
// 游客模式固定 24px（不再乘 @auth-font-scale）
&__guest {
position: absolute;
top: 24px;
right: 16px;
font-size: 12px;
top: 28px;
right: 32px;
font-size: 20px;
font-weight: 400;
color: #1f2937;
text-decoration: none;
@@ -81,26 +90,40 @@
}
}
// 表单项在右侧区域内水平 + 垂直居中（不再按设计稿固定锚点定位）
&__main {
.flex(column, flex-start, flex-start);
.flex(column, center, center);
flex: 1;
min-width: 0;
padding: var(--auth-form-y) 0 0 calc(var(--auth-form-x) - @login-brand-width);
padding: 40px 0;
}
&__card {
.flex(column, flex-start, flex-start);
width: 693px;
// 标题 / 副标题 / 表单标签一律左对齐（设计稿 x1039）。
// 显式声明是为了不继承任何父级 text-align:center —— 三页（登录/注册/找回）共用。
text-align: left;
}
&__title {
margin: 0;
font-size: 34px;
font-size: 34px * @auth-font-scale;
font-weight: 700;
line-height: 45px;
line-height: 45px * @auth-font-scale;
color: #1f2937;
}
// 老大要求：主标 / 副标在**表单列内**居中（设计稿原锚点 x1039 是左对齐）。
// 表单列 = margin-left:17px + 宽 680；这里用 padding-left:17px 把居中盒同步右移，
// 使两者的视觉中轴与表单列中轴重合（而不是与 693 宽的卡片中轴重合，否则会偏左 7px）。
&__title,
&__subtitle {
align-self: center;
padding-left: 17px;
text-align: center;
}
&__link {
color: @primary-strong;

360
src/styles/variables.less
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）

33
src/views/login/cpns/LoginForm.vue
View File

@@ -80,25 +80,25 @@ const localAgree = computed({
}
&__field + &__field {
margin-top: 64px;
margin-top: 40px;
}
&__label {
font-size: 13px; // 设计稿 13/500 #1F2937
font-size: 13px * @auth-font-scale; // 设计稿 13/500 #1F2937，×@auth-font-scale
font-weight: 500;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #1f2937;
}
// 设计稿：输入框 680×39、白底 + #DDE1E7 描边、文字 13/400
// 设计稿：输入框 680×39、白底 + #DDE1E7 描边、文字 13/400（盒高随字体 ×@auth-font-scale）
&__input {
width: 100%;
height: 39px;
padding: 0 12px;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
font-size: 13px * @auth-font-scale;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -113,21 +113,22 @@ const localAgree = computed({
}
}
// 设计稿：协议行 @(1039,641)；密码输入底 649 → 协议行文字基线对齐
// 设计稿：协议行标 @(1039,641)，但密码输入框实为 y610→649 —— 设计值自相矛盾（重叠 8px）。
// 取与短信登录/注册/找回密码三页一致的 22px 间距（同页切 Tab 也不会跳）。
&__agree {
.flex(row, flex-start, center);
gap: 8px;
margin-top: -8px;
font-size: 12px;
margin-top: 22px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px;
height: 16px;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
margin: 0;
accent-color: @primary-strong;
}
@@ -139,16 +140,16 @@ const localAgree = computed({
}
}
// 设计稿：登录按钮 680×46 @y675、#024FFF 实底、文字 15/500
// 设计稿：登录按钮 680×46 @y675、#024FFF 实底、文字 15/500（盒高随字体 ×@auth-font-scale）
&__submit {
width: 100%;
height: 46px;
height: 46px * @auth-font-scale;
margin-top: 18px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: 15px * @auth-font-scale;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;

30
src/views/login/cpns/SmsLoginForm.vue
View File

@@ -97,27 +97,27 @@ function onSubmit(): void {
width: 680px;
}
// 设计稿：手机号输入底 502 → 验证码标签 520 = 18；标签行盒 17 → 18
// 与账号密码登录两字段间距一致
&__field + &__field {
margin-top: 18px;
margin-top: 40px;
}
&__label {
font-size: 13px; // 设计稿 13/500 #1F2937
font-size: 13px * @auth-font-scale; // 设计稿 13/500 #1F2937，×@auth-font-scale
font-weight: 500;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #1f2937;
}
// 设计稿：输入框 680×39、白底 + #DDE1E7 描边、文字 13/400
// 设计稿：输入框 680×39、白底 + #DDE1E7 描边、文字 13/400（盒高随字体 ×@auth-font-scale）
&__input {
width: 100%;
height: 39px;
padding: 0 12px;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
font-size: 13px * @auth-font-scale;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -137,16 +137,16 @@ function onSubmit(): void {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 22px;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px;
height: 16px;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
margin: 0;
accent-color: @primary-strong;
}
@@ -158,16 +158,16 @@ function onSubmit(): void {
}
}
// 设计稿：登录按钮 680×46 @y656、#024FFF 实底、文字 15/500
// 设计稿：登录按钮 680×46 @y656、#024FFF 实底、文字 15/500（盒高随字体 ×@auth-font-scale）
&__submit {
width: 100%;
height: 46px;
height: 46px * @auth-font-scale;
margin-top: 18px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: 15px * @auth-font-scale;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;

27
src/views/login/index.vue
View File

@@ -146,13 +146,13 @@ async function onGetCode(target: string): Promise<void> {
</style>
<style lang="less" scoped>
// ===== 账号密码登录页专属（--auth-form-x/y 默认值即本页基准） =====
// ===== 账号密码 / 手机验证码登录页专属 =====
.auth-page {
&__subtitle {
margin: 12px 0 0;
font-size: 13px; // 设计稿 13/400 #6B7280
font-size: 13px * @auth-font-scale; // 设计稿 13/400 #6B7280，整体 ×@auth-font-scale
font-weight: 400;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #6b7280;
}
@@ -161,14 +161,14 @@ async function onGetCode(target: string): Promise<void> {
.flex(row, flex-start, center);
gap: 24px;
margin: 26px 0 0 17px; // 406 − 363 = 43；x1039 − 1022 = 17
height: 25px;
}
&__tab {
padding: 0;
position: relative;
padding: 0 0 8px;
border: none;
background: transparent;
font-size: 14px; // 设计稿 14/400 #4B5563 → 激活 14/600 #024FFF
font-size: 22px; // 固定 22px
font-weight: 400;
color: #4b5563;
cursor: pointer;
@@ -177,15 +177,26 @@ async function onGetCode(target: string): Promise<void> {
&.is-active {
font-weight: 600;
color: @primary-strong;
// 抵消 html zoom，保证两 Tab 下划线视觉均为 2px（否则 2px×zoom 会因亚像素取整一粗一细）
&::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: calc(2px / @page-zoom);
background: @primary-strong;
}
}
}
&__switch {
align-self: center; // 设计稿：X 居中 @(1325,774)
margin: 53px 0 0; // 按钮底 721 → 774
font-size: 12px; // 设计稿 12/400 #6B7280
font-size: 12px * @auth-font-scale; // 设计稿 12/400 #6B7280
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
}
}

37
src/views/login/register.vue
View File

@@ -159,11 +159,8 @@ onBeforeUnmount(() => {
</template>
<style lang="less" scoped>
// 设计稿（注册账号）：表单列起点 x999（--auth-form-x 982 + 17）、垂直顶 268
// 注册账号页：表单块由 .auth-page__main 在右区内居中（设计稿 02）
.register {
--auth-form-x: 982px;
--auth-form-y: 268px;
&__form {
.flex(column, flex-start, stretch);
// 副标题底 342 → 首个标签 368 = 26（副标题行盒 17 + 外边距 12 → 实际需补 38）
@@ -183,20 +180,20 @@ onBeforeUnmount(() => {
}
&__label {
font-size: 13px; // 设计稿 13/500 #1F2937
font-size: 13px * @auth-font-scale; // 设计稿 13/500 #1F2937，×@auth-font-scale
font-weight: 500;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #1f2937;
}
&__input {
width: 100%;
height: 39px;
padding: 0 12px;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
font-size: 13px * @auth-font-scale;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -216,16 +213,16 @@ onBeforeUnmount(() => {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 22px;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px;
height: 16px;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
margin: 0;
accent-color: @primary-strong;
}
@@ -236,16 +233,16 @@ onBeforeUnmount(() => {
}
}
// 设计稿：注册按钮 680×46 @y782、#024FFF 实底、文字 15/500
// 设计稿：注册按钮 680×46 @y782、#024FFF 实底、文字 15/500（盒高随字体 ×@auth-font-scale）
&__submit {
width: 100%;
height: 46px;
height: 46px * @auth-font-scale;
margin-top: 18px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: 15px * @auth-font-scale;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
@@ -259,17 +256,17 @@ onBeforeUnmount(() => {
&__switch {
align-self: center;
margin: 16px 0 0;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
}
&__subtitle {
margin: 12px 0 0;
font-size: 13px; // 设计稿 13/400 #6B7280
font-size: 13px * @auth-font-scale; // 设计稿 13/400 #6B7280，×@auth-font-scale
font-weight: 400;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #6b7280;
}
}

37
src/views/login/reset.vue
View File

@@ -161,11 +161,8 @@ onBeforeUnmount(() => {
</template>
<style lang="less" scoped>
// 设计稿（找回密码）：表单列起点 x1040（--auth-form-x 1023 + 17）、垂直顶 261
// 找回密码页：表单块由 .auth-page__main 在右区内居中（设计稿 02）
.reset {
--auth-form-x: 1023px;
--auth-form-y: 261px;
&__form {
.flex(column, flex-start, stretch);
// 副标题底 335 → 首个标签 361 = 26（副标题行盒 17 + 外边距 12 → 实际需补 38）
@@ -185,20 +182,20 @@ onBeforeUnmount(() => {
}
&__label {
font-size: 13px; // 设计稿 13/500 #1F2937
font-size: 13px * @auth-font-scale; // 设计稿 13/500 #1F2937，×@auth-font-scale
font-weight: 500;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #1f2937;
}
&__input {
width: 100%;
height: 39px;
padding: 0 12px;
height: 39px * @auth-font-scale;
padding: 0 12px * @auth-font-scale;
border: 1px solid #dde1e7;
border-radius: @radius-sm;
background: @white;
font-size: 13px;
font-size: 13px * @auth-font-scale;
color: #1f2937;
outline: none;
transition: border-color 0.2s;
@@ -218,16 +215,16 @@ onBeforeUnmount(() => {
.flex(row, flex-start, center);
gap: 8px;
margin-top: 22px;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
cursor: pointer;
input {
flex-shrink: 0;
width: 16px;
height: 16px;
width: 16px * @auth-font-scale;
height: 16px * @auth-font-scale;
margin: 0;
accent-color: @primary-strong;
}
@@ -238,16 +235,16 @@ onBeforeUnmount(() => {
}
}
// 设计稿：确认修改按钮 680×46 @y775、#024FFF 实底、文字 15/500
// 设计稿：确认修改按钮 680×46 @y775、#024FFF 实底、文字 15/500（盒高随字体 ×@auth-font-scale）
&__submit {
width: 100%;
height: 46px;
height: 46px * @auth-font-scale;
margin-top: 18px;
border: none;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: 15px;
font-size: 15px * @auth-font-scale;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
@@ -261,17 +258,17 @@ onBeforeUnmount(() => {
&__switch {
align-self: center;
margin: 17px 0 0;
font-size: 12px;
font-size: 12px * @auth-font-scale;
font-weight: 400;
line-height: 16px;
line-height: 16px * @auth-font-scale;
color: #6b7280;
}
&__subtitle {
margin: 12px 0 0;
font-size: 13px; // 设计稿 13/400 #6B7280
font-size: 13px * @auth-font-scale; // 设计稿 13/400 #6B7280，×@auth-font-scale
font-weight: 400;
line-height: 17px;
line-height: 17px * @auth-font-scale;
color: #6b7280;
}
}