feat 登录页面

2026-10-01 14:02:50 +08:00
parent eda0bc2200
commit b99b2a0a88
13 changed files with 481 additions and 289 deletions
--- a/cdp.js
+++ b/cdp.js
@@ -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 */ }
+}
--- a/shot-login-sms.png
+++ b/shot-login-sms.png
--- a/shot-login.png
+++ b/shot-login.png
--- a/shot-register.png
+++ b/shot-register.png
--- a/shot-reset-password.png
+++ b/shot-reset-password.png
--- a/src/components/SmsCodeInput.vue
+++ b/src/components/SmsCodeInput.vue
@@ -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;
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -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;

--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -36,7 +36,6 @@
@header-border: #d8d8d8;
@footer-bg: #0c1321;

-
 // 圆角
@radius-sm: 4px;
@radius-base: 8px;
@@ -65,10 +64,10 @@
@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; // 设计画布 / 通栏块总宽
@@ -106,8 +105,9 @@
@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);
@@ -204,7 +204,12 @@
@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-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; // 服务类型·小程序 圆形底（设计实取）
@@ -287,7 +292,12 @@
 //    字号 = 设计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-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 实取）
--- a/src/views/login/cpns/LoginForm.vue
+++ b/src/views/login/cpns/LoginForm.vue
@@ -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;
--- a/src/views/login/cpns/SmsLoginForm.vue
+++ b/src/views/login/cpns/SmsLoginForm.vue
@@ -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;
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -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;
  }
 }
--- a/src/views/login/register.vue
+++ b/src/views/login/register.vue
@@ -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;
  }
 }
--- a/src/views/login/reset.vue
+++ b/src/views/login/reset.vue
@@ -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;
  }
 }