feat(frontend): redesign management login pages

frontend/platform_admin/src/views/login/components/login-form.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-form-wrapper">
-    <div class="login-form-title">登录和气平台</div>
-    <div class="login-form-sub-title">使用平台管理员账户登录</div>
+    <div class="login-form-title">登录和气平台总后台</div>
+    <div class="login-form-sub-title">全局治理 · 安全运营 · 数据协同</div>
     <a-form
       ref="loginForm"
       :model="userInfo"
@@ -40,23 +40,27 @@
           </template>
         </a-input-password>
       </a-form-item>
-      <a-space :size="16" direction="vertical">
-        <div class="login-form-password-actions">
-          <a-checkbox
-            checked="rememberPassword"
-            :model-value="loginConfig.rememberPassword"
-            @change="setRememberPassword as any"
-          >
-            记住用户名
-          </a-checkbox>
-        </div>
-        <div v-if="errorMessage" class="login-form-error-msg">
-          {{ errorMessage }}
-        </div>
-        <a-button type="primary" html-type="submit" long :loading="loading">
-          登录
-        </a-button>
-      </a-space>
+      <div class="login-form-password-actions">
+        <a-checkbox
+          checked="rememberPassword"
+          :model-value="loginConfig.rememberPassword"
+          @change="setRememberPassword as any"
+        >
+          记住用户名
+        </a-checkbox>
+      </div>
+      <div class="login-form-error-msg" aria-live="polite">
+        {{ errorMessage }}
+      </div>
+      <a-button
+        class="login-form-submit"
+        type="primary"
+        html-type="submit"
+        long
+        :loading="loading"
+      >
+        登录
+      </a-button>
     </a-form>
   </div>
 </template>
@@ -126,35 +130,130 @@ const setRememberPassword = (value: boolean) => {
 <style lang="less" scoped>
   .login-form {
     &-wrapper {
-      width: 320px;
+      width: 100%;
+      text-align: center;
     }
 
     &-title {
-      color: var(--color-text-1);
-      font-weight: 500;
-      font-size: 24px;
-      line-height: 32px;
+      color: #17233d;
+      font-weight: 600;
+      font-size: 28px;
+      line-height: 38px;
+      letter-spacing: 0.01em;
     }
 
     &-sub-title {
-      color: var(--color-text-3);
-      font-size: 16px;
-      line-height: 24px;
+      margin-top: 6px;
+      color: #768198;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0.04em;
     }
 
     &-error-msg {
-      height: 32px;
-      color: rgb(var(--red-6));
-      line-height: 32px;
+      min-height: 34px;
+      padding-top: 8px;
+      color: #d83b42;
+      font-size: 13px;
+      line-height: 20px;
+      text-align: left;
     }
 
     &-password-actions {
       display: flex;
       justify-content: space-between;
+      margin-top: 2px;
+      color: #526078;
+      text-align: left;
     }
 
-    &-register-btn {
-      color: var(--color-text-3) !important;
+    &-submit {
+      height: 48px;
+      background: var(--login-accent) !important;
+      border-color: var(--login-accent) !important;
+      border-radius: 9px;
+      font-weight: 500;
+      font-size: 16px;
+      box-shadow: 0 10px 24px rgba(36, 104, 242, 0.2);
+      transition:
+        background-color 0.2s ease,
+        border-color 0.2s ease,
+        transform 0.2s ease;
+
+      &:hover {
+        background: var(--login-accent-hover) !important;
+        border-color: var(--login-accent-hover) !important;
+        transform: translateY(-1px);
+      }
+    }
+  }
+
+  .login-form {
+    margin-top: 26px;
+    text-align: left;
+  }
+
+  :deep(.arco-form-item) {
+    margin-bottom: 16px;
+  }
+
+  :deep(.arco-input-wrapper) {
+    height: 48px;
+    padding: 0 14px;
+    background: rgba(248, 250, 253, 0.86);
+    border: 1px solid #d7dde8;
+    border-radius: 9px;
+    box-shadow: none;
+    transition:
+      border-color 0.2s ease,
+      box-shadow 0.2s ease,
+      background-color 0.2s ease;
+
+    &:hover {
+      background: #fff;
+      border-color: #aeb9cb;
+    }
+
+    &.arco-input-focus {
+      background: #fff;
+      border-color: var(--login-accent);
+      box-shadow: 0 0 0 3px rgba(36, 104, 242, 0.12);
+    }
+  }
+
+  :deep(.arco-input-prefix) {
+    margin-right: 10px;
+    color: #8a96aa;
+    font-size: 18px;
+  }
+
+  :deep(.arco-checkbox-label) {
+    color: #526078;
+    font-size: 13px;
+  }
+
+  @media (max-width: @screen-sm) {
+    .login-form {
+      margin-top: 22px;
+
+      &-title {
+        font-size: 25px;
+        line-height: 34px;
+      }
+
+      &-sub-title {
+        letter-spacing: 0.01em;
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .login-form-submit {
+      transition: none;
+
+      &:hover {
+        transform: none;
+      }
     }
   }
 </style>

frontend/platform_admin/src/views/login/index.vue

@@ -1,79 +1,114 @@
 <template>
-  <div class="container">
-    <div class="logo">
-      <img alt="和气平台" :src="logoUrl" />
-      <div class="logo-text">和气平台总后台</div>
-    </div>
-    <LoginBanner />
-    <div class="content">
-      <div class="content-inner">
-        <LoginForm />
-      </div>
-      <div class="footer">
-        <Footer />
-      </div>
-    </div>
+  <div
+    class="login-page"
+    :style="{ backgroundImage: `url(${backgroundUrl})` }"
+  >
+    <main class="login-card" aria-label="和气平台总后台登录">
+      <img class="login-card-logo" :src="logoUrl" alt="和气" />
+      <LoginForm />
+      <div class="login-footer">© 2026 和气 · 安全连接每一程</div>
+    </main>
   </div>
 </template>
 
 <script lang="ts" setup>
+import backgroundUrl from '@/assets/images/login-background.jpg';
 import logoUrl from '@/assets/logo.svg?url';
-import Footer from '@/components/footer/index.vue';
-import LoginBanner from './components/login-banner.vue';
 import LoginForm from './components/login-form.vue';
 </script>
 
 <style lang="less" scoped>
-  .container {
-    display: flex;
-    height: 100vh;
+  .login-page {
+    --login-accent: #2468f2;
+    --login-accent-hover: #1756d8;
+    position: relative;
+    isolation: isolate;
+    display: grid;
+    min-height: 100vh;
+    min-height: 100dvh;
+    padding: 96px 24px 32px;
+    overflow: auto;
+    background-color: #0c2b58;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    place-items: center;
 
-    .banner {
-      width: 550px;
-      background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
-    }
-
-    .content {
-      position: relative;
-      display: flex;
-      flex: 1;
-      align-items: center;
-      justify-content: center;
-      padding-bottom: 40px;
-    }
-
-    .footer {
+    &::before {
       position: absolute;
-      right: 0;
-      bottom: 0;
-      width: 100%;
+      inset: 0;
+      z-index: -1;
+      background: rgba(3, 19, 45, 0.1);
+      content: '';
     }
   }
 
-  .logo {
-    position: fixed;
-    top: 24px;
-    left: 22px;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-
-    &-text {
-      margin-right: 4px;
-      margin-left: 4px;
-      color: var(--color-fill-1);
-      font-size: 20px;
-    }
+  .login-card {
+    width: min(420px, 100%);
+    padding: 34px 40px 18px;
+    transform: translateY(-56px);
+    background: rgba(255, 255, 255, 0.94);
+    border: 1px solid rgba(255, 255, 255, 0.68);
+    border-radius: 16px;
+    box-shadow: 0 28px 80px rgba(2, 18, 48, 0.28);
+    backdrop-filter: blur(18px);
   }
-</style>
 
-<style lang="less" scoped>
-  // responsive
-  @media (max-width: @screen-lg) {
-    .container {
-      .banner {
-        width: 25%;
+  .login-card-logo {
+    display: block;
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 14px;
+  }
+
+  .login-footer {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(29, 44, 75, 0.08);
+    color: #8a94a6;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+  }
+
+  @media (max-width: @screen-sm) {
+    .login-page {
+      padding: 82px 16px 20px;
+      background-position: center;
+
+      &::before {
+        background: rgba(3, 19, 45, 0.24);
       }
     }
+
+    .login-card {
+      padding: 28px 22px 16px;
+      transform: translateY(-24px);
+      background: rgba(255, 255, 255, 0.97);
+      backdrop-filter: blur(20px);
+    }
+
+    .login-card-logo {
+      width: 44px;
+      height: 44px;
+      margin-bottom: 12px;
+    }
+  }
+
+  @media (max-height: 720px) and (min-width: @screen-sm) {
+    .login-page {
+      padding-top: 82px;
+    }
+
+    .login-card {
+      padding-top: 26px;
+      transform: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .login-page {
+      scroll-behavior: auto;
+    }
   }
 </style>