feat 需求提报

2026-10-09 09:29:08 +08:00
parent aa440d6bb5
commit f73103a2a6
14 changed files with 294 additions and 250 deletions
--- a/src/components/SmsCodeInput.vue
+++ b/src/components/SmsCodeInput.vue
@@ -36,12 +36,12 @@ function onGetCode(): void {
  &__input {
    flex: 1;
    min-width: 0;
-    height: 39px * @auth-font-scale;
-    padding: 0 12px * @auth-font-scale;
+    height: 40px;
+    padding: 0 12px;
    border: 1px solid #dde1e7;
    border-radius: @radius-sm;
    background: @white;
-    font-size: 13px * @auth-font-scale;
+    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.2s;
@@ -55,25 +55,30 @@ function onGetCode(): void {
    }
  }

+  // 设计稿 #38：「获取验证码」是带蓝色描边的独立按钮（62×16 文字居中），
+  // 不是纯文字链接。按键宽 88px，与输入框间距 @spacing-sm。
  &__btn {
    flex-shrink: 0;
-    min-width: 74px * @auth-font-scale;
-    height: 39px * @auth-font-scale;
+    width: 88px;
+    height: 40px;
    padding: 0;
-    border: none;
-    background: transparent;
+    border: 1px solid @primary-strong;
+    border-radius: @radius-sm;
+    background: @white;
    color: @primary-strong;
-    font-size: 12px * @auth-font-scale;
+    font-size: 12px;
    font-weight: 400;
-    text-align: right;
+    text-align: center;
    cursor: pointer;
-    transition: color 0.2s;
+    transition: all 0.2s;

    &:hover:not(:disabled) {
-      color: @primary-hover;
+      background: @primary-strong;
+      color: @white;
    }

    &:disabled {
+      border-color: @text-color-disabled;
      color: @text-color-disabled;
      cursor: not-allowed;
    }
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -22,50 +22,56 @@
  min-height: 100vh;
  background: @white;

+  // 设计稿 #36/#38/#39 的左侧品牌区为固定 784px 渐变块。
  &__brand {
-    .flex(column, flex-start, center);
+    .flex(column, flex-start, flex-start);
    flex: 0 0 @login-brand-width;
-    padding: 304px 24px 0;
+    padding: 304px 0 0 257px;
    background: linear-gradient(
      160deg,
      @auth-gradient-from 0%,
      @auth-gradient-to 100%
    );
    color: @white;
-    text-align: center;
+    text-align: left;
  }

  &__logo {
    margin: 0;
-    font-size: 40px * @auth-font-scale;
+    font-size: 40px;
    font-weight: 700;
-    line-height: 58px * @auth-font-scale;
+    line-height: 58px;
    color: @white;
  }

  &__key {
    margin: 26px 0 0;
-    font-size: 15px * @auth-font-scale;
+    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: @white;
  }

  &__slogan {
-    margin: 246px 0 0;
-    font-size: 22px * @auth-font-scale;
+    // logo(116) + key 上距 26 + key(20) = 162；设计稿 slogan 顶 715，
+    // 故与 key 底(446+20=466) 间距 249px。
+    margin: 249px 0 0;
+    font-size: 22px;
    font-weight: 600;
-    line-height: 29px * @auth-font-scale;
+    line-height: 29px;
    letter-spacing: 8px;
    color: @white;
  }

+  // 设计稿 #39：右上角「游客模式」12px，标注框 (1840,24) 64.2×16
+  // （64.2 含 Sketch 文本框内边距，实际文字 48px），右留白 16px。
  &__guest {
    position: absolute;
-    top: 28px;
-    right: 32px;
-    font-size: 20px;
+    top: 24px;
+    right: 16px;
+    font-size: 12px;
    font-weight: 400;
+    line-height: 16px;
    color: #1f2937;
    text-decoration: none;
    transition: color 0.2s;
@@ -79,27 +85,40 @@
    .flex(column, center, center);
    flex: 1;
    min-width: 0;
-    padding: 40px 0;
+    // 设计稿三页的标题顶分别为 306/287/268，卡片在 1080 视口中居中后
+    // 会比标注高 15px，用上内边距把内容整体下移补平。
+    padding: 80px 0 40px;
  }

+  // 设计稿表单区统一 693px 宽。标题/副标题按自身文字宽度相对表单居中，
+  // 不额外内缩——设计稿标注的 714px 宽是 Sketch 文本框含内边距的值。
  &__card {
    .flex(column, flex-start, flex-start);
-    width: 693px;
+    width: @login-form-width;
    text-align: left;
  }

  &__title {
    margin: 0;
-    font-size: 34px * @auth-font-scale;
+    font-size: 34px;
    font-weight: 700;
-    line-height: 45px * @auth-font-scale;
+    line-height: 45px;
    color: #1f2937;
  }

+  // 三页副标题样式一致且模板类名统一为 auth-page__subtitle，
+  // 放在公共层，避免各页 scoped 选择器与模板类名不匹配。
+  &__subtitle {
+    margin: 12px 0 0;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 17px;
+    color: #6b7280;
+  }
+
  &__title,
  &__subtitle {
    align-self: center;
-    padding-left: 17px;
    text-align: center;
  }

--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -78,9 +78,11 @@
@footer-height: 481px;
@footer-inset: 70px;

-@login-brand-width: 35%;
-@login-form-offset: 1022px;
-@auth-font-scale: 1.5;
+// 登录/注册/找回密码三页共用的品牌区宽度。设计稿 #36/#38/#39 的左侧渐变
+// artboard 均为 784×1080，是固定值而非百分比。
+@login-brand-width: 784px;
+// 表单区宽度。设计稿 el12/el14/el19 等标签层统一 693px 宽。
+@login-form-width: 693px;

@shadow-base: 0 2px 8px rgba(31, 39, 51, 0.08);
@shadow-lg: 0 4px 16px rgba(31, 39, 51, 0.12);
--- a/src/views/demand/cpns/BizTypeIcon.vue
+++ b/src/views/demand/cpns/BizTypeIcon.vue
@@ -6,7 +6,7 @@ interface Props {
  size?: number
 }

-withDefaults(defineProps<Props>(), { size: 40 })
+withDefaults(defineProps<Props>(), { size: 68 })
 </script>

 <template>
--- a/src/views/demand/cpns/DemandActionBar.vue
+++ b/src/views/demand/cpns/DemandActionBar.vue
@@ -15,9 +15,7 @@ const emit = defineEmits<{

 <template>
  <div class="demand-bar">
-    <div class="container demand-bar__inner">
    <p class="demand-bar__tip">
-        <span class="demand-bar__info" aria-hidden="true">i</span>
      提交后我们的专业顾问将在一个工作日内与您联系，为您提供一对一服务
    </p>
    <div class="demand-bar__actions">
@@ -38,59 +36,34 @@ const emit = defineEmits<{
        重置
      </button>
      <button
-          class="demand-bar__btn demand-bar__btn--primary"
+        class="demand-bar__btn"
        type="button"
-          :disabled="props.submitting"
+        :disabled="props.saving || props.submitting"
        @click="emit('submit')"
      >
        {{ props.submitting ? '提交中…' : '立即提报' }}
      </button>
    </div>
  </div>
-  </div>
 </template>

 <style lang="less" scoped>
 .demand-bar {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  border-top: 1px solid @border-color;
-  background: @white;
-
-  &__inner {
+  // 设计稿里操作栏不是 fixed 底栏，而是卡片内的一行：
+  // el66 提示文字 x=240 y=2297，按钮 el36/34/32 x=1009/1288/1567 y=2280 w=232 h=63。
+  // 内容左边界 194，提示文字比它右移 46px；按钮右边界 1799 与输入框右边界齐平。
  .flex(row, space-between, center);
-    height: 104px;
-    gap: @spacing-base;
-    padding-left: 170px;
-    padding-right: 121px;
-  }
+  margin-top: 66px;

  &__tip {
-    .flex(row, flex-start, center);
-    gap: 10px;
-    min-width: 0;
+    // 提示文字左边界 240 = 内容左边界 194 + 46。
+    margin: 0 0 0 114px;
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
    color: @demand-heading;
  }

-  &__info {
-    .flex(row, center, center);
-    flex-shrink: 0;
-    width: 26px;
-    height: 26px;
-    border: 1px solid @demand-accent;
-    border-radius: 50%;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    color: @demand-accent;
-  }
-
  &__actions {
    .flex(row, flex-end, center);
    gap: 47px;
@@ -118,16 +91,6 @@ const emit = defineEmits<{
      opacity: 0.6;
      cursor: not-allowed;
    }
-
-    &--primary {
-      min-width: 232px;
-      background: @demand-secondary-bg;
-      color: @white;
-
-      &:hover:not(:disabled) {
-        background: darken(@demand-secondary-bg, 6%);
-      }
-    }
  }
 }
 </style>
--- a/src/views/demand/cpns/DemandAttachments.vue
+++ b/src/views/demand/cpns/DemandAttachments.vue
@@ -105,14 +105,6 @@ function onDownload(file: DemandAttachment): void {
    <div class="demand-attach__head">
      <span class="demand-attach__label">附件上传</span>
      <span class="demand-attach__hint">支持图片/文档/压缩包，大小不超过1G</span>
-      <button
-        class="demand-attach__pick"
-        type="button"
-        :disabled="props.uploading"
-        @click="pick"
-      >
-        {{ props.uploading ? '上传中…' : '上传文档' }}
-      </button>
      <input
        ref="inputRef"
        class="demand-attach__input"
@@ -122,7 +114,16 @@ function onDownload(file: DemandAttachment): void {
      >
    </div>

-    <ul v-if="props.files.length > 0" class="demand-attach__list">
+    <button
+      class="demand-attach__drop"
+      type="button"
+      :disabled="props.uploading"
+      @click="pick"
+    >
+      {{ props.uploading ? '上传中…' : '点击上传附件' }}
+    </button>
+
+    <ul class="demand-attach__list">
      <li
        v-for="(file, index) in props.files"
        :key="`${file.ossId ?? file.originalName}-${index}`"
@@ -201,8 +202,13 @@ function onDownload(file: DemandAttachment): void {
 <style lang="less" scoped>
 .demand-attach {
  .flex(column, flex-start, stretch);
+  // el59标签底 1405 → el54 顶 1419 = 14px；el54 底 1509 → el53 顶 1529 = 20px。
  gap: 14px;

+  &__list {
+    gap: 20px;
+  }
+
  &__head {
    .flex(row, flex-start, center);
  }
@@ -221,23 +227,26 @@ function onDownload(file: DemandAttachment): void {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 400;
+    line-height: 23px;
    color: @demand-line;
  }

-  &__pick {
-    flex-shrink: 0;
-    height: 40px;
-    padding: 0 @spacing-lg;
-    border: 1px solid @demand-line;
+  // 设计稿 el54：x=194 y=1419 w=1605 h=90，整块浅灰上传区。
+  &__drop {
+    width: 100%;
+    height: 90px;
+    padding: 0;
+    border: none;
    border-radius: @radius-sm;
-    background: @white;
+    background: @demand-upload-bg;
+    font-family: inherit;
    font-size: 16px;
    color: @demand-line;
    cursor: pointer;
-    transition: border-color 0.2s, color 0.2s;
+    transition: background 0.2s, color 0.2s;

    &:hover:not(:disabled) {
-      border-color: @demand-accent;
+      background: darken(@demand-upload-bg, 4%);
      color: @demand-accent;
    }

@@ -259,6 +268,13 @@ function onDownload(file: DemandAttachment): void {
    list-style: none;
  }

+  // el53：x=194 y=1529 w=1605 h=90，空态占位块；有附件时列表项本身就是这个高度。
+  &__list:empty {
+    height: 90px;
+    border-radius: @radius-sm;
+    background: @demand-upload-bg;
+  }
+
  &__item {
    .flex(row, flex-start, center);
    gap: @spacing-base;
--- a/src/views/demand/cpns/DemandBizTypes.vue
+++ b/src/views/demand/cpns/DemandBizTypes.vue
@@ -39,7 +39,7 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
          v-else
          class="biz-types__icon"
          :name="option.icon"
-          :size="40"
+          :size="68"
        />
        <span class="biz-types__name">{{ option.label }}</span>
        <span v-if="option.desc" class="biz-types__desc">{{ option.desc }}</span>
@@ -72,7 +72,10 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
    gap: 0;
    height: 206px;
    box-sizing: border-box;
-    padding: 44px 16px 0;
+    // 设计稿 el21 "互联网软件" y=545 → 卡片 y=439 距顶 106px。
+    // 插画 el4 y=444 h=110 的框底 554 已越过 name 顶545，说明插画切片含
+    // 透明边距；按文字层定位为准，插画框给68px 见方、左对齐即可。
+    padding: 4px 16px 0;
    border: 1px solid @demand-line;
    border-radius: @radius-base;
    background: @white;
@@ -90,6 +93,7 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
    }
  }

+  // el8 "圆形51" x=442 y=467 w=30 h=30：卡片 x=194 w=307，右内缩 29px、上移 22px。
  &__check {
    position: absolute;
    top: 22px;
@@ -108,14 +112,16 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
    box-shadow: inset 0 0 0 3px @demand-selected-bg;
  }

+  // el4 插画 x=233 / el3 x=542 / el1 x=875 / el2 x=1190：
+  // 四张卡的插画都在卡片左边线右侧 27~39px 处，不是水平居中，按左对齐处理。
  &__icon {
-    margin-bottom: 15px;
+    margin-bottom: 33px;
  }

  &__logo {
-    width: 40px;
-    height: 40px;
-    margin-bottom: 15px;
+    width: 68px;
+    height: 68px;
+    margin-bottom: 33px;
    object-fit: contain;
  }

--- a/src/views/demand/cpns/DemandInfoForm.vue
+++ b/src/views/demand/cpns/DemandInfoForm.vue
@@ -174,7 +174,9 @@ function onBudgetManualBlur(event: Event): void {
 <style lang="less" scoped>
 .demand-info {
  .flex(column, flex-start, stretch);
-  gap: 29px;
+  // 设计稿纵向节奏：输入框底 881 → el42 标签顶 911 = 30px；
+  // textarea 底 1224 → el60 "预算范围" 顶 1254 = 30px。
+  gap: 30px;
  width: 1605px;

  &__field {
--- a/src/views/demand/index.vue
+++ b/src/views/demand/index.vue
@@ -105,8 +105,6 @@ onMounted(() => {
            @update="onUpdate"
          />
        </section>
-      </div>
-    </div>

        <DemandActionBar
          :saving="saving"
@@ -116,11 +114,13 @@ onMounted(() => {
          @submit="onSubmit"
        />
      </div>
+    </div>
+  </div>
 </template>

 <style lang="less" scoped>
 .demand-page {
-  padding-bottom: 104px;
+  // 操作栏已收进卡片内（设计稿 el36 y=2280），不需要为fixed 底栏预留空白。

  &.is-loading .demand {
    opacity: 0.6;
@@ -135,7 +135,8 @@ onMounted(() => {
  }

  &__hero-inner {
-    padding-left: 42px;
+    // 设计稿 el82：标题左边界 112px（hero 白底 1920 宽，标题左起 112）。
+    padding-left: 112px;
  }

  &__title {
@@ -157,12 +158,16 @@ onMounted(() => {

 .demand {
  margin-top: 20px;             // 271 − (72+179) = 20
-  padding: 48px 56px 111px;
+  // 设计稿 el83 卡片 x=70 w=1780；内容左边界 194（el68 输入框 x=194 w=1605），
+  // 右边界 1799。故左内边距 56、右内边距 51（不对称是设计稿本身如此）。
+  padding: 48px 51px 114px 56px;
  background: @white;

  &__heading {
-    .flex(row, flex-start, center);
-    gap: 15px;
+    // 设计稿三个 heading 的标签都比序号低 23px（el80 "01" y=319 →
+    // el79 "选择业务类型*" y=342），不是垂直居中，故用flex-start + margin-top。
+    .flex(row, flex-start, flex-start);
+    gap: 4px;
    margin: 0 0 50px;
    padding-left: 8px;
  }
@@ -177,6 +182,8 @@ onMounted(() => {
  }

  &__label {
+    // 与序号的顶部落差 23px（el80 y=319 → el79 y=342）。
+    margin-top: 23px;
    font-size: 28px;
    font-weight: 500;
    line-height: 41px;
@@ -188,22 +195,26 @@ onMounted(() => {
    color: @danger-color;
  }

+  // 内容左边界 194：卡片 x=70 + padding-left 56 + 内容缩进 68。
  &__heading + * {
-    margin-left: 46px;
+    margin-left: 68px;
  }

+  // el29业务类型卡片底 645 → el78 "02" 顶 705 = 60px。
  &__section + &__section {
    margin-top: 60px;
  }

+  // el53 附件灰块底 1619 → el76 "03" 顶 1689 = 70px。
  &__section + &__section:last-of-type {
-    margin-top: 50px;
+    margin-top: 70px;
  }

  &__section + &__section &__heading {
    margin-bottom: 0;
  }

+  // el78 "02" 底 775 → el70 "项目名称*" 顶 789 = 14px。
  &__section + &__section &__heading + * {
    margin-top: 14px;
  }
--- a/src/views/login/cpns/LoginForm.vue
+++ b/src/views/login/cpns/LoginForm.vue
@@ -67,36 +67,44 @@ const localAgree = computed({
 </template>

 <style lang="less" scoped>
+// 设计稿 #36（账号密码登录）纵向坐标：
+// 账号标签 457 → 密码标签 585（差 128）
+// 密码输入框底 ~648 → 勾选行 641 区间 → 登录按钮文字 688
+// 表单左边界与 title 内缩对齐：1032.5 - 982.5(title 层中心对齐后) ≈ 0，
+// 实测 title padding-left 17px 抵消 693/714 的差，故表单不再额外内缩。
 .login-form {
  .flex(column, flex-start, stretch);
-  margin: 26px 0 0 17px;
-  width: 680px;
+  margin: 26px 0 0;
+  width: 100%;

  &__field {
    .flex(column, flex-start, stretch);
-    gap: 8px;
-    width: 680px;
+    // 标签底 474 → 输入框顶 480，间距 6px
+    gap: 6px;
+    width: 100%;
  }

+  // 第一个字段底（480+40=520）→ 第二个字段标签顶 585，间距 65px
  &__field + &__field {
-    margin-top: 40px;
+    margin-top: 65px;
  }

  &__label {
-    font-size: 13px * @auth-font-scale;
+    font-size: 13px;
    font-weight: 500;
-    line-height: 17px * @auth-font-scale;
+    line-height: 17px;
    color: #1f2937;
+    text-align: center;
  }

  &__input {
    width: 100%;
-    height: 39px * @auth-font-scale;
-    padding: 0 12px * @auth-font-scale;
+    height: 40px;
+    padding: 0 12px;
    border: 1px solid #dde1e7;
    border-radius: @radius-sm;
    background: @white;
-    font-size: 13px * @auth-font-scale;
+    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.2s;
@@ -111,20 +119,23 @@ const localAgree = computed({
    }
  }

+  // 设计稿 #36：勾选框 (1042.2,642) 7.5×14，文字 12px 起于 x=1059。
+  // 注：设计稿勾选标注 y=642 与密码输入框底 648 重叠，二者无法同时满足，
+  // 这里按视觉取勾选行落在输入框下方 8px。
  &__agree {
    .flex(row, flex-start, center);
    gap: 8px;
-    margin-top: 22px;
-    font-size: 12px * @auth-font-scale;
+    margin-top: 8px;
+    font-size: 12px;
    font-weight: 400;
-    line-height: 16px * @auth-font-scale;
+    line-height: 16px;
    color: #6b7280;
    cursor: pointer;

    input {
      flex-shrink: 0;
-      width: 16px * @auth-font-scale;
-      height: 16px * @auth-font-scale;
+      width: 14px;
+      height: 14px;
      margin: 0;
      accent-color: @primary-strong;
    }
@@ -135,15 +146,17 @@ const localAgree = computed({
    }
  }

+  // 设计稿 #36：按钮文字 (1352,688) 54×20 居中，按钮盒约 693×46
  &__submit {
    width: 100%;
-    height: 46px * @auth-font-scale;
-    margin-top: 18px;
+    height: 46px;
+    // 勾选行底 657 → 按钮顶 674
+    margin-top: 17px;
    border: none;
    border-radius: @radius-sm;
    background: @primary-strong;
    color: @white;
-    font-size: 15px * @auth-font-scale;
+    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
--- a/src/views/login/cpns/SmsLoginForm.vue
+++ b/src/views/login/cpns/SmsLoginForm.vue
@@ -85,36 +85,41 @@ function onSubmit(): void {
 </template>

 <style lang="less" scoped>
+// 设计稿 #38（手机验证码登录）纵向坐标：
+// 手机号标签 438 → 验证码标签 520（差 82）
+// 验证码输入框底 ~588 → 勾选行 622 → 登录按钮文字 669
 .sms-login {
  .flex(column, flex-start, stretch);
-  margin: 26px 0 0 17px;
-  width: 680px;
+  margin: 26px 0 0;
+  width: 100%;

  &__field {
    .flex(column, flex-start, stretch);
-    gap: 8px;
-    width: 680px;
+    gap: 6px;
+    width: 100%;
  }

+  // 第一个字段底（457+40=497... 按标签 438+17+6+40=501）→ 第二标签 520，间距 19px
  &__field + &__field {
-    margin-top: 40px;
+    margin-top: 19px;
  }

  &__label {
-    font-size: 13px * @auth-font-scale;
+    font-size: 13px;
    font-weight: 500;
-    line-height: 17px * @auth-font-scale;
+    line-height: 17px;
    color: #1f2937;
+    text-align: center;
  }

  &__input {
    width: 100%;
-    height: 39px * @auth-font-scale;
-    padding: 0 12px * @auth-font-scale;
+    height: 40px;
+    padding: 0 12px;
    border: 1px solid #dde1e7;
    border-radius: @radius-sm;
    background: @white;
-    font-size: 13px * @auth-font-scale;
+    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.2s;
@@ -129,20 +134,21 @@ function onSubmit(): void {
    }
  }

+  // 设计稿 #38：勾选框 (992.2,623) 7.5×14，勾选文字 622
  &__agree {
    .flex(row, flex-start, center);
    gap: 8px;
-    margin-top: 22px;
-    font-size: 12px * @auth-font-scale;
+    margin-top: 14px;
+    font-size: 12px;
    font-weight: 400;
-    line-height: 16px * @auth-font-scale;
+    line-height: 16px;
    color: #6b7280;
    cursor: pointer;

    input {
      flex-shrink: 0;
-      width: 16px * @auth-font-scale;
-      height: 16px * @auth-font-scale;
+      width: 14px;
+      height: 14px;
      margin: 0;
      accent-color: @primary-strong;
    }
@@ -153,15 +159,16 @@ function onSubmit(): void {
    }
  }

+  // 设计稿 #38：按钮文字 (1302,669) 54×20
  &__submit {
    width: 100%;
-    height: 46px * @auth-font-scale;
-    margin-top: 18px;
+    height: 46px;
+    margin-top: 17px;
    border: none;
    border-radius: @radius-sm;
    background: @primary-strong;
    color: @white;
-    font-size: 15px * @auth-font-scale;
+    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -131,6 +131,8 @@ async function onGetCode(target: string): Promise<void> {

        <p class="auth-page__switch">
          没有账号？<RouterLink class="auth-page__link" to="/register">立即注册</RouterLink>
+          <span class="auth-page__switch-sep">|</span>
+          <RouterLink class="auth-page__link" to="/reset-password">找回密码</RouterLink>
        </p>
      </div>
    </main>
@@ -142,26 +144,21 @@ async function onGetCode(target: string): Promise<void> {

 <style lang="less" scoped>
 .auth-page {
-  &__subtitle {
-    margin: 12px 0 0;
-    font-size: 13px * @auth-font-scale;
-    font-weight: 400;
-    line-height: 17px * @auth-font-scale;
-    color: #6b7280;
-  }
-
+  // 设计稿 #36：两个 tab 顶 406，字号 14px，选中下划线 2px 位于 429。
+  // tab 文字底 425，下划线顶 429 → padding-bottom 6px。
+  // 上间距 26px：副标题底 380 → tab 文字顶 406。
  &__tabs {
    .flex(row, flex-start, center);
    gap: 24px;
-    margin: 26px 0 0 17px;
+    margin: 26px 0 0;
  }

  &__tab {
    position: relative;
-    padding: 0 0 8px;
+    padding: 0 0 6px;
    border: none;
    background: transparent;
-    font-size: 22px;
+    font-size: 14px;
    font-weight: 400;
    color: #4b5563;
    cursor: pointer;
@@ -183,13 +180,20 @@ async function onGetCode(target: string): Promise<void> {
    }
  }

+  // 设计稿 #36：「没有账号？」(1325,774)、「立即注册」(1384.5,774) 12px。
+  // 「找回密码」为设计稿外的补充入口，按同样式接在分隔符后。
  &__switch {
    align-self: center;
    margin: 53px 0 0;
-    font-size: 12px * @auth-font-scale;
+    font-size: 12px;
    font-weight: 400;
-    line-height: 16px * @auth-font-scale;
+    line-height: 16px;
    color: #6b7280;
+
+    &-sep {
+      margin: 0 8px;
+      color: #d0d5dd;
+    }
  }
 }
 </style>
--- a/src/views/login/register.vue
+++ b/src/views/login/register.vue
@@ -157,38 +157,43 @@ onBeforeUnmount(() => {
 </template>

 <style lang="less" scoped>
+// 设计稿 #39（注册账号）纵向坐标：
+// 手机号标签 368 → 验证码标签 450 → 设置密码标签 532 → 确认密码标签 658
+// 前三个字段间距均为 82px；设置密码字段含密码强度条，故到确认密码为 126px。
 .register {
  &__form {
    .flex(column, flex-start, stretch);
-    margin: 38px 0 0 17px;
-    width: 680px;
+    margin: 26px 0 0;
+    width: 100%;
  }

  &__field {
    .flex(column, flex-start, stretch);
-    gap: 8px;
-    width: 680px;
+    gap: 6px;
+    width: 100%;
  }

+  // 字段盒 = 标签17 + gap6 + 输入框40 = 63px；63 + 19 = 82px 字段间距
  &__field + &__field {
-    margin-top: 18px;
+    margin-top: 19px;
  }

  &__label {
-    font-size: 13px * @auth-font-scale;
+    font-size: 13px;
    font-weight: 500;
-    line-height: 17px * @auth-font-scale;
+    line-height: 17px;
    color: #1f2937;
+    text-align: center;
  }

  &__input {
    width: 100%;
-    height: 39px * @auth-font-scale;
-    padding: 0 12px * @auth-font-scale;
+    height: 40px;
+    padding: 0 12px;
    border: 1px solid #dde1e7;
    border-radius: @radius-sm;
    background: @white;
-    font-size: 13px * @auth-font-scale;
+    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.2s;
@@ -203,20 +208,21 @@ onBeforeUnmount(() => {
    }
  }

+  // 设计稿 #39：勾选框 (1002.2,749) 7.5×14
  &__agree {
    .flex(row, flex-start, center);
    gap: 8px;
-    margin-top: 22px;
-    font-size: 12px * @auth-font-scale;
+    margin-top: 21px;
+    font-size: 12px;
    font-weight: 400;
-    line-height: 16px * @auth-font-scale;
+    line-height: 16px;
    color: #6b7280;
    cursor: pointer;

    input {
      flex-shrink: 0;
-      width: 16px * @auth-font-scale;
-      height: 16px * @auth-font-scale;
+      width: 14px;
+      height: 14px;
      margin: 0;
      accent-color: @primary-strong;
    }
@@ -227,15 +233,16 @@ onBeforeUnmount(() => {
    }
  }

+  // 设计稿 #39：按钮文字 (1312,795) 54×20
  &__submit {
    width: 100%;
-    height: 46px * @auth-font-scale;
-    margin-top: 18px;
+    height: 46px;
+    margin-top: 17px;
    border: none;
    border-radius: @radius-sm;
    background: @primary-strong;
    color: @white;
-    font-size: 15px * @auth-font-scale;
+    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
@@ -245,20 +252,13 @@ onBeforeUnmount(() => {
    }
  }

+  // 设计稿 #39：「已有账号？」(1285,844)、「立即登录」(1344.5,844)
  &__switch {
    align-self: center;
-    margin: 16px 0 0;
-    font-size: 12px * @auth-font-scale;
+    margin: 17px 0 0;
+    font-size: 12px;
    font-weight: 400;
-    line-height: 16px * @auth-font-scale;
-    color: #6b7280;
-  }
-
-  &__subtitle {
-    margin: 12px 0 0;
-    font-size: 13px * @auth-font-scale;
-    font-weight: 400;
-    line-height: 17px * @auth-font-scale;
+    line-height: 16px;
    color: #6b7280;
  }
 }
--- a/src/views/login/reset.vue
+++ b/src/views/login/reset.vue
@@ -159,38 +159,42 @@ onBeforeUnmount(() => {
 </template>

 <style lang="less" scoped>
+// 找回密码与注册同为 4 字段布局（手机号/验证码/设置密码/确认密码），
+// 间距规则与设计稿 #39 注册页一致。
 .reset {
  &__form {
    .flex(column, flex-start, stretch);
-    margin: 38px 0 0 17px;
-    width: 680px;
+    margin: 26px 0 0;
+    width: 100%;
  }

  &__field {
    .flex(column, flex-start, stretch);
-    gap: 8px;
-    width: 680px;
+    gap: 6px;
+    width: 100%;
  }

+  // 字段盒 = 标签17 + gap6 + 输入框40 = 63px；63 + 19 = 82px 字段间距
  &__field + &__field {
-    margin-top: 18px;
+    margin-top: 19px;
  }

  &__label {
-    font-size: 13px * @auth-font-scale;
+    font-size: 13px;
    font-weight: 500;
-    line-height: 17px * @auth-font-scale;
+    line-height: 17px;
    color: #1f2937;
+    text-align: center;
  }

  &__input {
    width: 100%;
-    height: 39px * @auth-font-scale;
-    padding: 0 12px * @auth-font-scale;
+    height: 40px;
+    padding: 0 12px;
    border: 1px solid #dde1e7;
    border-radius: @radius-sm;
    background: @white;
-    font-size: 13px * @auth-font-scale;
+    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.2s;
@@ -208,17 +212,17 @@ onBeforeUnmount(() => {
  &__agree {
    .flex(row, flex-start, center);
    gap: 8px;
-    margin-top: 22px;
-    font-size: 12px * @auth-font-scale;
+    margin-top: 21px;
+    font-size: 12px;
    font-weight: 400;
-    line-height: 16px * @auth-font-scale;
+    line-height: 16px;
    color: #6b7280;
    cursor: pointer;

    input {
      flex-shrink: 0;
-      width: 16px * @auth-font-scale;
-      height: 16px * @auth-font-scale;
+      width: 14px;
+      height: 14px;
      margin: 0;
      accent-color: @primary-strong;
    }
@@ -231,13 +235,13 @@ onBeforeUnmount(() => {

  &__submit {
    width: 100%;
-    height: 46px * @auth-font-scale;
-    margin-top: 18px;
+    height: 46px;
+    margin-top: 17px;
    border: none;
    border-radius: @radius-sm;
    background: @primary-strong;
    color: @white;
-    font-size: 15px * @auth-font-scale;
+    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
@@ -250,17 +254,9 @@ onBeforeUnmount(() => {
  &__switch {
    align-self: center;
    margin: 17px 0 0;
-    font-size: 12px * @auth-font-scale;
+    font-size: 12px;
    font-weight: 400;
-    line-height: 16px * @auth-font-scale;
-    color: #6b7280;
-  }
-
-  &__subtitle {
-    margin: 12px 0 0;
-    font-size: 13px * @auth-font-scale;
-    font-weight: 400;
-    line-height: 17px * @auth-font-scale;
+    line-height: 16px;
    color: #6b7280;
  }
 }