feat ui设计稿

src/views/login/index.vue

@@ -89,13 +89,7 @@ async function onGetCode(target: string): Promise<void> {
     <main class="auth-page__main">
       <div class="auth-page__card">
         <div class="auth-page__tabs">
-          <button
-            class="auth-page__tab"
-            :class="{ 'is-active': activeTab === 'account' }"
-            @click="activeTab = 'account'"
-          >
-            账号密码登录
-          </button>
+          <!-- 设计稿 Tab 顺序：手机验证码登录在前、账号密码登录在后 -->
           <button
             class="auth-page__tab"
             :class="{ 'is-active': activeTab === 'sms' }"
@@ -103,6 +97,13 @@ async function onGetCode(target: string): Promise<void> {
           >
             手机验证码登录
           </button>
+          <button
+            class="auth-page__tab"
+            :class="{ 'is-active': activeTab === 'account' }"
+            @click="activeTab = 'account'"
+          >
+            账号密码登录
+          </button>
         </div>
 
         <LoginForm
@@ -131,48 +132,59 @@ async function onGetCode(target: string): Promise<void> {
 
 <style lang="less" scoped>
 .auth-page {
+  position: relative;
   display: flex;
   min-height: 100vh;
-  background: @bg-color;
+  // 设计稿：右侧表单区为纯白底，无卡片描边/阴影
+  background: @white;
 
   &__brand {
-    flex: 0 0 44%;
-    .flex(row, center, center);
-    background: linear-gradient(135deg, @primary-color 0%, #1b4fd8 100%);
+    // 设计稿：左侧品牌渐变面板约占 786/1920 ≈ 41%
+    flex: 0 0 41%;
+    .flex(row, flex-start, stretch);
+    background: linear-gradient(135deg, @auth-gradient-from 0%, @auth-gradient-to 100%);
     color: @white;
   }
 
   &__brand-inner {
-    .flex(column, flex-start);
-    gap: @spacing-lg;
-    padding: @spacing-xxl;
+    .flex(column, space-between, flex-start);
+    width: 100%;
+    // 设计稿：文字列起点 x=257 ≈ 面板宽 32.7%；主标距顶 ≈ 28%、标语底边距底 ≈ 30%
+    padding: 26vh 48px 30vh 32%;
   }
 
   &__logo {
-    font-size: 32px;
+    font-size: 31px;
     font-weight: 700;
     letter-spacing: 2px;
-    line-height: 1.4;
+    line-height: 1.45;
+    // 设计稿文本框 432 设计px：定宽让 11 字在「虫子智造研发 / 一体化平台」处折行
+    max-width: 200px;
   }
 
   &__slogan {
-    font-size: @font-size-xl;
-    opacity: 0.85;
-    letter-spacing: 6px;
+    font-size: 17px;
+    font-weight: 600;
+    letter-spacing: 8px;
   }
 
+  // 设计稿：「游客模式」为右上角白底上的深色纯文本，无边框
   &__guest {
-    margin-top: @spacing-xl;
-    padding: @spacing-sm @spacing-base;
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    border-radius: @radius-base;
-    color: @white;
-    font-size: @font-size-base;
+    position: absolute;
+    top: 18px;
+    right: 16px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    color: @heading-color;
+    font-size: 11px;
     text-decoration: none;
-    transition: background 0.2s;
+    transition: color 0.2s;
 
     &:hover {
-      background: rgba(255, 255, 255, 0.15);
+      background: transparent;
+      color: @primary-strong;
     }
   }
 
@@ -184,46 +196,48 @@ async function onGetCode(target: string): Promise<void> {
 
   &__card {
     .flex(column, flex-start);
-    gap: @spacing-lg;
+    // 设计稿：表单列宽 688 设计px ≈ 530px，标题/Tab/输入/按钮纵向节奏 ≈ 41px
+    gap: 41px;
     width: 100%;
-    max-width: 420px;
-    padding: @spacing-xl @spacing-lg;
-    border-radius: @radius-lg;
-    background: @white;
-    box-shadow: @shadow-lg;
+    max-width: 530px;
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
   }
 
   &__tabs {
-    .flex(row, center);
-    gap: @spacing-lg;
-    border-bottom: 1px solid @border-color;
+    // 设计稿：Tab 左对齐于表单列，仅激活项带 2px 蓝色下划线（无整行分隔线）
+    .flex(row, flex-start);
+    gap: @spacing-sm;
+    border-bottom: none;
   }
 
   &__tab {
-    padding: @spacing-sm 0;
+    padding: 0 0 4px;
     border: none;
     border-bottom: 2px solid transparent;
     background: transparent;
-    font-size: @font-size-lg;
-    color: @text-color-secondary;
+    font-size: 11px;
+    color: @text-color;
     cursor: pointer;
     transition: all 0.2s;
 
     &.is-active {
-      border-bottom-color: @primary-color;
-      color: @primary-color;
+      border-bottom-color: @primary-strong;
+      color: @primary-strong;
       font-weight: 600;
     }
   }
 
   &__switch {
     text-align: center;
-    font-size: @font-size-base;
+    font-size: 11px;
     color: @text-color-secondary;
   }
 
   &__link {
-    color: @primary-color;
+    color: @primary-strong;
 
     &:hover {
       color: @primary-hover;