feat 登录页面

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;