登录页优化

package-lock.json

@@ -92,7 +92,6 @@
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -1769,7 +1768,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -1793,7 +1791,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1878,7 +1875,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -2226,7 +2222,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -3272,7 +3267,6 @@
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
       "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -3699,7 +3693,6 @@
       "integrity": "sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.12.16",
         "@soda/friendly-errors-webpack-plugin": "^1.8.0",
@@ -4438,7 +4431,6 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -4965,7 +4957,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -5772,7 +5763,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -5787,7 +5777,6 @@
       "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.33",
@@ -5876,7 +5865,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -8524,15 +8512,13 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash-unified": {
       "version": "1.0.3",
@@ -8969,7 +8955,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -9844,7 +9829,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -10773,7 +10757,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12942,7 +12925,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -13332,7 +13314,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
       "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.13",
         "@vue/compiler-sfc": "3.5.13",
@@ -13515,7 +13496,6 @@
       "integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.6",
@@ -13652,7 +13632,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -13770,7 +13749,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -13865,7 +13843,6 @@
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -13883,7 +13860,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",

src/i18n/lang/en-US.js

@@ -11,6 +11,7 @@ export default {
     login: 'Login',
     version: 'Version',
     expirationtime: 'Expiration Time',
+    assistant: 'TK high-value fan assistant',
   },
   hostsList: {
     // 顶部筛选

src/i18n/lang/zh-CN.js

@@ -11,6 +11,8 @@ export default {
     login: '登录',
     version: '版本号',
     expirationtime: '过期时间',
+    assistant: 'TK高价值粉丝助手',
+
   },
   hostsList: {
     filterPrivateUsers: '过滤隐私用户',

src/views/HomeView.vue

@@ -1,123 +1,125 @@
 <template>
   <div class="main">
-    <div class="container">
+    <div class="auth-shell">
-      <div class="right">
+      <!-- 顶部操作 -->
-        <img src="../assets/logoBg.png" class="background-video" alt="" />
+      <div class="top-actions">
-        <!-- 设置 -->
+        <div class="setup-item center-justify">
-        <div class="center-align">
+          <el-dropdown>
-          <div></div>
+            <span class="el-dropdown-link">
-          <div class="setup">
+              <span class="setup-text">{{ $t('common.networkSettings') }}</span>
-            <div class="setup-item center-justify">
+            </span>
-              <div></div>
+          </el-dropdown>
-              <span>{{ $t('common.networkSettings') }}</span>
-            </div>
-            <!-- <div class="setup-item center-justify"> -->
-            <div class="">
-              <el-select 
-                v-model="currentLanguage" 
-                :placeholder="$t('common.language')"
-                @change="changeLanguage"
-                size="small"
-                style="width: 120px;"
-              >
-                <el-option
-                  :label="$t('common.simplifiedChinese')"
-                  value="zh-CN"
-                />
-                <el-option
-                  :label="$t('common.english')"
-                  value="en-US"
-                />
-              </el-select>
-            </div>
-          </div>
         </div>
-        <div class="center-line" style="margin-top: 40px">
+
-          <!-- logo -->
+        <!-- 语言选择：用 el-select，但外观套进 setup-item -->
-          <div class="logo">
+        <div class="setup-item setup-item--dropdown">
-            <!-- <div class="center-justify" style="height: 80px; width: 300px;">
+          <el-dropdown trigger="click" @command="changeLanguage">
-							<img style="height: 100%;" src="@/assets/logotext.png">
+            <span class="lang-dropdown">
-						</div> -->
+              <span class="lang-dropdown__label">{{ currentLanguageLabel }}</span>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="zh-CN">
+                  {{ $t('common.simplifiedChinese') }}
+                </el-dropdown-item>
+                <el-dropdown-item command="en-US">
+                  {{ $t('common.english') }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </div>
+
+      <!-- 主卡片 -->
+      <div class="auth-card">
+        <!-- 左侧登录 -->
+        <div class="auth-left">
+          <div class="logo center-justify">
+            <!-- 你原本 logo 是空的，这里给你留一个位 -->
+            <!-- 想放logo就取消注释 -->
+            <img class="logo-image" src="@/assets/logo2.png" alt="" />
+            <span class="logo-title">{{ $t('common.assistant') }}</span>
           </div>
 
-          <!-- From -->
+          <div class="welcome">{{ $t('common.accountLogin') }}</div>
-          <div class="from">
-            <div class="from-title center-justify">
-              <div>{{ $t('common.accountLogin') }}</div>
-            </div>
 
+          <div class="from">
             <div class="from-input">
               <el-form label-position="left" label-width="100px" :model="formData">
+                <div class="field-label">{{ $t('common.tenantName') }}</div>
                 <div class="from-input-item1">
                   <img src="@/assets/username.png" alt="" />
-                  <el-input
+                  <el-input style="height: 25px" v-model="formData.tenantName" :placeholder="$t('common.tenantName')"
-                    style="height: 25px"
+                    clearable @keyup.enter="onSubmit" />
-                    v-model="formData.tenantName"
-                    :placeholder="$t('common.tenantName')"
-                    clearable
-                    @keyup.enter="onSubmit"
-                  />
                 </div>
+
+                <div class="field-label">{{ $t('common.account') }}</div>
                 <div class="from-input-item1">
                   <img src="@/assets/username.png" alt="" />
-                  <el-input
+                  <el-input style="height: 25px" v-model="formData.userId" :placeholder="$t('common.account')" clearable
-                    style="height: 25px"
+                    @keyup.enter="onSubmit" />
-                    v-model="formData.userId"
-                    :placeholder="$t('common.account')"
-                    clearable
-                    @keyup.enter="onSubmit"
-                  />
                 </div>
+
+                <div class="field-label">{{ $t('common.password') }}</div>
                 <div class="from-input-item1">
                   <img src="@/assets/password.png" alt="" />
-                  <el-input
+                  <el-input style="height: 25px" v-model="formData.password" type="password"
-                    style="height: 25px"
+                    :placeholder="$t('common.password')" show-password @keyup.enter="onSubmit" />
-                    v-model="formData.password"
-                    type="password"
-                    :placeholder="$t('common.password')"
-                    show-password
-                    @keyup.enter="onSubmit"
-                  />
                 </div>
 
                 <div class="from-input-item">
-                  <el-button
+                  <el-button class="loginButton" type="primary" :loading="isSubmitting" @click="onSubmit">
-                    class="loginButton"
+                    {{ $t('common.login') }}
-                    color="#8f7ee7"
+                  </el-button>
-                    type="primary"
-                    @click="onSubmit"
-                    >{{ $t('common.login') }}</el-button
-                  >
                 </div>
               </el-form>
             </div>
           </div>
+
+          <div class="version">{{ $t('common.version') }}：{{ version }}</div>
+        </div>
+
+        <!-- 右侧插画 -->
+        <div class="auth-right">
+          <img src="../assets/logoBg2.png" class="illustration" alt="" />
         </div>
-        <div class="version center-justify">{{ $t('common.version') }}：{{ version }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 import { login, rentgetloginID } from "@/api/account";
-import { getToken, setToken, setUser, setUserPass, getUserPass } from "@/utils/storage";
+import { setToken, setUser, setUserPass, getUserPass } from "@/utils/storage";
-import { ElLoading } from "element-plus";
 import { usePythonBridge } from "@/utils/pythonBridge";
-import { ElMessage } from 'element-plus';
+import { tokenStore, UserStore } from "@/stores/notice";
-import { tokenStore,UserStore } from '@/stores/notice'
+
+const router = useRouter();
+const { locale, t } = useI18n();
+
+const tokenCache = tokenStore();
+const userCache = UserStore();
 
-const { t, locale } = useI18n();
-const tokenCache = tokenStore()
-const userCache = UserStore()
 const { getVersion } = usePythonBridge();
 let version = ref("0.0.0");
 
 // 当前语言
-const currentLanguage = ref(localStorage.getItem('language') || 'zh-CN');
+const currentLanguage = ref(localStorage.getItem("language") || "zh-CN");
+const currentLanguageLabel = computed(() =>
+  currentLanguage.value === "zh-CN"
+    ? t("common.simplifiedChinese")
+    : t("common.english")
+);
+
+const formData = ref({
+  tenantName: "",
+  userId: "",
+  password: "",
+});
 
 onMounted(() => {
   setTimeout(() => {
@@ -128,217 +130,73 @@ onMounted(() => {
   }, 500);
 });
 
-async function getpassword(){
+async function getpassword() {
-    const res = await getUserPass();
+  const res = await getUserPass();
-    formData.value = {
+  formData.value = {
-      tenantName: res == null ? "" : res.tenantName,
+    tenantName: res == null ? "" : res.tenantName,
-      userId: res == null ? "" : res.userId,
+    userId: res == null ? "" : res.userId,
-      password: res == null ? "" : res.password,
+    password: res == null ? "" : res.password,
-    };
+  };
 }
 
 // 切换语言
 const changeLanguage = (lang) => {
   locale.value = lang;
   currentLanguage.value = lang;
-  localStorage.setItem('language', lang);
+  localStorage.setItem("language", lang);
-  // 重新加载页面以应用Element Plus语言包
   window.location.reload();
 };
 
-const router = useRouter();
+const isSubmitting = ref(false);
-
-const formData = ref({});
 
 const onSubmit = () => {
-  const loading = ElLoading.service({
+  if (isSubmitting.value) return;
-    lock: true,
+  isSubmitting.value = true;
-    text: "Loading",
-    background: "rgba(0, 0, 0, 0.7)",
-  });
-  rentgetloginID({
-    name: formData.value.tenantName,
-  })
-    .then((res) => {
-      console.log(res);
 
+  rentgetloginID({ name: formData.value.tenantName })
+    .then((tenantId) => {
       login({
         username: formData.value.userId,
-        tenantId: res,
+        tenantId: tenantId,
         password: formData.value.password,
       })
         .then((res) => {
-          loading.close();
+          isSubmitting.value = false;
-          console.log("123123123123",res);
           setToken(res.tokenValue);
-          tokenCache.setToken(res.tokenValue)
+          tokenCache.setToken(res.tokenValue);
-          userCache.setUser(res)
+          userCache.setUser(res);
           setUser(res);
           setUserPass(formData.value);
           router.push("/nav");
         })
-        .catch((err) => {
+        .catch(() => {
-          loading.close();
+          isSubmitting.value = false;
         });
     })
     .catch((err) => {
-      loading.close();
+      isSubmitting.value = false;
       console.log(err);
     });
 };
 </script>
 
 <style lang="less">
+/* ✅ 全屏自适应 */
 .main {
-  width: 1600px;
+  width: 100vw;
-  height: 900px;
+  height: 100vh;
   overflow: hidden;
   box-sizing: border-box;
+  background: linear-gradient(180deg, #f3f5f9 0%, #eef1f5 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
 
-  /* 页面无法选中 */
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-
-  .container {
-    display: flex;
-    box-sizing: border-box;
-    width: 1600px;
-    height: 900px;
-
-    .right {
-      box-sizing: border-box;
-      position: relative;
-      width: 1600px;
-      height: 900px;
-      padding: 20px 40px 20px 50px;
-      border-left: 3px solid #23516e;
-      position: relative;
-      /* 添加 position: relative */
-      overflow: hidden;
-      /* 防止内容溢出 */
-
-      .version {
-        color: #fff;
-        position: absolute;
-        font-size: 20px;
-        bottom: 20px;
-        left: calc(50% - 50px);
-        // box-sizing: border-box;
-        // width: 1600px;
-      }
-
-      .background-video {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-        /* 确保视频在内容之下 */
-      }
-
-      .setup {
-        display: flex;
-        align-items: center;
-        color: #fff;
-
-        .setup-item {
-          padding: 10px 6px;
-          display: flex;
-
-          div {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background-color: rgb(255, 255, 255);
-            margin-right: 5px;
-          }
-        }
-      }
-
-      .logo {
-        padding: 20px 0;
-        height: 80px;
-      }
-
-      .from {
-        width: 420px;
-        // height: 320px;
-        color: @bg-color;
-        background-color: #ffffff44;
-        border-radius: 20px;
-        border: 1px solid #fff;
-        padding: 32px;
-        box-sizing: border-box;
-
-        .from-title {
-          font-family: Source Han Sans SC;
-          font-weight: 500;
-          font-size: 24px;
-          color: @bg-color;
-          line-height: 37px;
-
-          div {
-            font-size: 20px;
-            font-weight: 600;
-            // border-bottom: 4px solid #1db97d;
-          }
-        }
-
-        .from-input {
-          width: 100%;
-          padding: 15px 0;
-
-          .from-input-item {
-            display: flex;
-            padding: 8px 0;
-
-            .from-input-item-title {
-              color: @bg-color;
-              font-size: 18px;
-              font-weight: 500;
-              width: 80px;
-              height: 50px;
-            }
-
-            .loginButton {
-              width: 359px;
-              height: 50px;
-              background: #ffffff;
-              border-radius: 24px;
-              border: 1px solid #ffffff;
-
-              font-family: Source Han Sans SC;
-              font-weight: 500;
-              font-size: 18px;
-              color: @bg-color;
-              line-height: 37px;
-            }
-          }
-
-          .from-input-item1 {
-            display: flex;
-            width: 359px;
-            height: 50px;
-            background: @bg-color-light-light;
-            border-radius: 24px;
-            border: 1px solid #ffffff;
-            padding: 12px 25px 13px 25px;
-            box-sizing: border-box;
-            margin-bottom: 16px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.center-line {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
 }
 
 .center-justify {
@@ -347,17 +205,268 @@ const onSubmit = () => {
   align-items: center;
 }
 
-.center-align {
+/* 外壳：自适应 */
+.auth-shell {
+  width: min(1320px, 92vw);
+  height: min(760px, 86vh);
+  position: relative;
   display: flex;
-  justify-content: space-between;
-}
-
-.center-flex {
-  display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
+/* 背景柔光 */
+.auth-shell::before,
+.auth-shell::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(0);
+}
+
+.auth-shell::before {
+  width: 420px;
+  height: 420px;
+  background: radial-gradient(circle, rgba(214, 226, 255, 0.7), rgba(214, 226, 255, 0));
+  left: -80px;
+  top: -40px;
+}
+
+.auth-shell::after {
+  width: 360px;
+  height: 360px;
+  background: radial-gradient(circle, rgba(255, 236, 214, 0.6), rgba(255, 236, 214, 0));
+  right: -40px;
+  bottom: -60px;
+}
+
+/* 顶部操作 */
+.top-actions {
+  position: absolute;
+  top: 50px;
+  right: 80px;
+  display: flex;
+  gap: 16px;
+  z-index: 2;
+}
+
+.setup-item {
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid #e1e6f2;
+  border-radius: 16px;
+  padding: 8px 12px 8px 14px;
+  box-shadow: 0 8px 18px rgba(40, 57, 108, 0.12);
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.setup-item::after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-right: 2px solid #9aa1b3;
+  border-bottom: 2px solid #9aa1b3;
+  transform: rotate(45deg);
+  margin-top: -2px;
+}
+
+.setup-item:hover {
+  transform: translateY(-1px);
+  border-color: #c9d2f4;
+  box-shadow: 0 12px 24px rgba(40, 57, 108, 0.16);
+}
+
+.setup-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: #2b3347;
+  letter-spacing: 0.2px;
+}
+
+/* el-select 这块不要小箭头重复：setup-item 自带 after 箭头，所以把 after 去掉 */
+.setup-item--select::after {
+  display: none;
+}
+
+
+/* 主卡片 */
+.auth-card {
+  width: min(1200px, 92vw);
+  height: min(680px, 80vh);
+  display: flex;
+  background: #ffffff;
+  border-radius: 28px;
+  overflow: hidden;
+  box-shadow: 0 24px 60px rgba(40, 57, 108, 0.16);
+  position: relative;
+  z-index: 1;
+}
+
+/* 左侧 */
+.auth-left {
+  width: 42%;
+  padding: clamp(20px, 3vw, 56px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.logo-image {
+  height: 200px;
+  margin-bottom: -20px;
+}
+
+.logo-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: #2b3347;
+  letter-spacing: 2px;
+  position: relative;
+  padding-left: 14px;
+  margin-bottom: -30px;
+}
+
+.logo-title::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 4px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, #4f6ef7, #5b7bff);
+}
+
+.welcome {
+  margin-top: 14px;
+  font-size: 24px;
+  font-weight: 600;
+  color: #2b3347;
+  margin-bottom: 8px;
+}
+
+.from {
+  width: 100%;
+  color: #2b3347;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.from-input {
+  width: 100%;
+  padding: 8px 0 0 0;
+}
+
+.field-label {
+  font-size: 13px;
+  color: #6b7280;
+  margin: 12px 0 6px;
+}
+
+.from-input-item {
+  display: flex;
+  padding: 16px 0 0 0;
+}
+
+/* 输入框胶囊 */
+.from-input-item1 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  background: #f6f8fc;
+  border-radius: 12px;
+  border: 1px solid #e6eaf2;
+  padding: 10px 14px;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+  gap: 10px;
+}
+
+.from-input-item1 img {
+  width: 18px;
+  height: 18px;
+  opacity: 0.6;
+}
+
+/* 按钮同款 */
+.loginButton {
+  width: 100%;
+  height: 48px;
+  background: linear-gradient(135deg, #4f6ef7, #5b7bff);
+  border-radius: 14px;
+  border: none;
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  box-shadow: 0 12px 24px rgba(79, 110, 247, 0.28);
+}
+
+.version {
+  margin-top: 24px;
+  font-size: 12px;
+  color: #9aa1b3;
+}
+
+/* 右侧插画 */
+.auth-right {
+  width: 58%;
+  background: linear-gradient(160deg, #f8f9fc 0%, #f0f3f9 100%);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.illustration {
+  width: 90%;
+  height: auto;
+  max-height: 88%;
+  object-fit: contain;
+  filter: drop-shadow(0 30px 60px rgba(40, 57, 108, 0.25));
+}
+
+/* 小屏：上下 */
+@media (max-width: 900px) {
+  .auth-shell {
+    width: 94vw;
+    height: auto;
+    padding: 16px 0;
+  }
+
+  .top-actions {
+    top: 10px;
+    right: 10px;
+  }
+
+  .auth-card {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .auth-left,
+  .auth-right {
+    width: 100%;
+  }
+
+  .auth-right {
+    min-height: 240px;
+  }
+}
+
+/* element-plus 变量 */
 .el-input__wrapper {
   --el-input-focus-border-color: rgba(255, 255, 0, 0);
   --el-menu-hover-bg-color: rgba(255, 255, 0, 0);
@@ -365,16 +474,54 @@ const onSubmit = () => {
 </style>
 
 <style scoped lang="less">
+/* 输入框内层去默认阴影 */
 ::v-deep(.el-input__wrapper) {
-  background-color: rgba(255, 0, 0, 0);
+  background-color: transparent;
   box-shadow: none;
 }
 
+/* 输入文字/placeholder 同款深色 */
 ::v-deep(.el-input__inner) {
-  color: #fff;
+  color: #2b3347;
 }
 
 ::v-deep(.el-input__inner::placeholder) {
-  color: @bg-color;
+  color: #9aa1b3;
+}
+
+/* 语言下拉：去边框、透明底，融入 setup-item */
+::v-deep(.lang-select .el-select__wrapper) {
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  padding: 0 8px;
+  min-height: 24px;
+  /* 或者 height: 24px */
+}
+
+::v-deep(.lang-select .el-select__selected-item) {
+  color: #2b3347;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 1.2;
+}
+
+::v-deep(.lang-select .el-select__caret) {
+  color: #9aa1b3;
+}
+
+.lang-dropdown {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  min-height: 24px;
+  min-width: 80px;
+}
+
+.lang-dropdown__label {
+  color: #2b3347;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 1.2;
 }
 </style>