From 7b8e6c7f7e9215ba686aaab38be70560c86ff36a Mon Sep 17 00:00:00 2001
From: Stev_Wang <304865932@qq.com>
Date: Mon, 5 Jan 2026 16:59:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=8E=A9=E5=AE=B6=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E4=B8=AD=E5=BF=83=E7=99=BB=E5=BD=95=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/assets/account-logo-D9-eMHsk.png | Bin 0 -> 11762 bytes
 frontend/package-lock.json                | 234 +++++++
 frontend/package.json                     |   3 +
 frontend/src/main.ts                      |   1 +
 frontend/src/views/player/Login.vue       | 708 ++++++++++++++++++++--
 5 files changed, 882 insertions(+), 64 deletions(-)
 create mode 100644 frontend/assets/account-logo-D9-eMHsk.png

diff --git a/frontend/assets/account-logo-D9-eMHsk.png b/frontend/assets/account-logo-D9-eMHsk.png
new file mode 100644
index 0000000000000000000000000000000000000000..22cffd5994a639fb6174730163d9140ab79ac163
GIT binary patch
literal 11762
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

literal 0
HcmV?d00001

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b92f7f6..3618c83 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@remixicon/vue": "^4.8.0",
+        "@vicons/ionicons5": "^0.13.0",
+        "animate.css": "^4.1.1",
         "axios": "^1.13.2",
         "naive-ui": "^2.43.2",
         "pinia": "^3.0.4",
@@ -19,6 +21,7 @@
         "@types/node": "^24.10.1",
         "@vitejs/plugin-vue": "^6.0.1",
         "@vue/tsconfig": "^0.8.1",
+        "less": "^4.5.1",
         "typescript": "~5.9.3",
         "vite": "^7.2.4",
         "vue-tsc": "^3.1.4"
@@ -910,6 +913,12 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@vicons/ionicons5": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmmirror.com/@vicons/ionicons5/-/ionicons5-0.13.0.tgz",
+      "integrity": "sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.3",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.3.tgz",
@@ -1131,6 +1140,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
@@ -1279,6 +1294,20 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -1505,6 +1534,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -1559,6 +1596,34 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-what": {
       "version": "5.5.0",
       "resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
@@ -1571,6 +1636,54 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/less": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.5.1.tgz",
+      "integrity": "sha512-UKgI3/KON4u6ngSsnDADsUERqhZknsVZbnuzlRZXLQCmfC/MDld42fTydUE9B+Mla1AL6SJ/Pp6SlEFi/AVGfw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less/node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/less/node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
@@ -1592,6 +1705,21 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -1601,6 +1729,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
@@ -1683,6 +1825,34 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/needle": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -1715,6 +1885,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pinia": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/pinia/-/pinia-3.0.4.tgz",
@@ -1770,6 +1951,14 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
@@ -1818,12 +2007,50 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/sax": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.3.tgz",
+      "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "optional": true
+    },
     "node_modules/seemly": {
       "version": "0.3.10",
       "resolved": "https://registry.npmmirror.com/seemly/-/seemly-0.3.10.tgz",
       "integrity": "sha512-2+SMxtG1PcsL0uyhkumlOU6Qo9TAQ/WyH7tthnPIOQB05/12jz9naq6GZ6iZ6ApVsO3rr2gsnTf3++OV63kE1Q==",
       "license": "MIT"
     },
+    "node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1877,6 +2104,13 @@
       "integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==",
       "license": "MIT"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.9.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f7ce5b1..df32e3a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@remixicon/vue": "^4.8.0",
+    "@vicons/ionicons5": "^0.13.0",
+    "animate.css": "^4.1.1",
     "axios": "^1.13.2",
     "naive-ui": "^2.43.2",
     "pinia": "^3.0.4",
@@ -20,6 +22,7 @@
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
+    "less": "^4.5.1",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",
     "vue-tsc": "^3.1.4"
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index ef5fb9d..ede6b81 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import router from './router'
 import App from './App.vue'
+import 'animate.css'
 
 const app = createApp(App)
 
diff --git a/frontend/src/views/player/Login.vue b/frontend/src/views/player/Login.vue
index 7a0effa..b1a2fcb 100644
--- a/frontend/src/views/player/Login.vue
+++ b/frontend/src/views/player/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login-container">
+  <div class="view-account">
     <!-- 维护公告遮罩 -->
     <div v-if="!playerServiceEnabled" class="maintenance-overlay">
       <n-card title="系统维护公告" style="width: 500px; text-align: center;">
@@ -13,45 +13,141 @@
       </n-card>
     </div>
 
-    <!-- 登录表单 -->
-    <n-card v-else title="玩家登录" style="width: 400px;">
-      <n-form ref="formRef" :model="formValue" :rules="rules" size="large">
-        <n-form-item path="username" label="用户名">
-          <n-input v-model:value="formValue.username" placeholder="请输入用户名" />
-        </n-form-item>
-        <n-form-item path="password" label="密码">
-          <n-input
-            v-model:value="formValue.password"
-            type="password"
-            show-password-on="click"
-            placeholder="请输入密码"
-          />
-        </n-form-item>
-        <n-form-item v-if="captchaEnabled" path="captchaCode" label="验证码">
-          <n-space style="width: 100%">
+    <div class="view-account-header"></div>
+    <div class="view-account-background">
+      <div class="line line-1"></div>
+      <div class="line line-2"></div>
+      <div class="line line-3"></div>
+      <div class="square square-1"></div>
+      <div class="square square-2"></div>
+      <div class="triangle"></div>
+      <div class="wave wave-1"></div>
+      <div class="wave wave-2"></div>
+      <div class="wave wave-3"></div>
+    </div>
+    <div class="view-account-container animate__animated animate__fadeInDown">
+      <div class="view-account-top">
+        <div class="view-account-top-logo">
+          <img src="/assets/account-logo-D9-eMHsk.png" alt="梦幻西游" />
+        </div>
+        <div class="view-account-top-desc">梦幻西游玩家服务中心</div>
+      </div>
+      <div class="view-account-form">
+        <h2 class="view-account-title">游戏账号登录</h2>
+        <div class="login-welcome">欢迎回来，请登录您的游戏账号</div>
+        <n-form
+          ref="formRef"
+          label-placement="left"
+          size="large"
+          :model="formValue"
+          :rules="rules"
+          class="login-form"
+        >
+          <n-form-item path="username" class="username-item">
+            <n-input 
+              v-model:value="formValue.username" 
+              placeholder="请输入游戏账号"
+              class="login-input"
+            >
+              <template #prefix>
+                <n-icon size="18" color="#808695">
+                  <PersonOutline />
+                </n-icon>
+              </template>
+            </n-input>
+          </n-form-item>
+          <n-form-item path="password" class="password-item">
             <n-input
-              v-model:value="formValue.captchaCode"
-              placeholder="请输入验证码"
-              @keyup.enter="handleLogin"
-            />
-            <div class="captcha-image" @click="handleRefreshCaptcha" v-html="captchaSvg"></div>
-          </n-space>
-        </n-form-item>
-        <n-form-item>
-          <n-button type="primary" block @click="handleLogin" :loading="loading">
-            登录
-          </n-button>
-        </n-form-item>
-      </n-form>
-    </n-card>
+              v-model:value="formValue.password"
+              type="password"
+              showPasswordOn="click"
+              placeholder="请输入密码"
+              class="login-input"
+            >
+              <template #prefix>
+                <n-icon size="18" color="#808695">
+                  <LockClosedOutline />
+                </n-icon>
+              </template>
+            </n-input>
+          </n-form-item>
+          <n-form-item v-if="captchaEnabled" path="captchaCode" class="captcha-item">
+            <n-space style="width: 100%">
+              <n-input
+                v-model:value="formValue.captchaCode"
+                placeholder="请输入验证码"
+                class="login-input"
+              >
+                <template #prefix>
+                  <n-icon size="18" color="#808695">
+                    <ShieldOutline />
+                  </n-icon>
+                </template>
+              </n-input>
+              <div class="captcha-image" @click="handleRefreshCaptcha" v-html="captchaSvg"></div>
+            </n-space>
+          </n-form-item>
+          <n-form-item class="default-color remember-forgot">
+            <div class="flex-between-wrapper">
+              <div class="left">
+                <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
+              </div>
+              <div class="right">
+                <a href="javascript:" class="forgot-link">忘记密码</a>
+              </div>
+            </div>
+          </n-form-item>
+          <n-form-item>
+            <n-button 
+              type="primary" 
+              @click="handleLogin" 
+              size="large" 
+              :loading="loading" 
+              block
+              class="login-button"
+            >
+              登录
+            </n-button>
+          </n-form-item>
+          <n-form-item class="default-color other-item">
+            <div class="flex view-account-other">
+              <div class="flex-initial other-text">
+                <span>其它登录方式</span>
+              </div>
+              <!-- <div class="social-login">
+                <a href="javascript:" class="social-icon">
+                  <n-icon size="24" color="#909399">
+                    <LogoGithub />
+                  </n-icon>
+                </a>
+                <a href="javascript:" class="social-icon">
+                  <n-icon size="24" color="#909399">
+                    <LogoFacebook />
+                  </n-icon>
+                </a>
+                <a href="javascript:" class="social-icon">
+                  <n-icon size="24" color="#909399">
+                    <LogoWechat />
+                  </n-icon>
+                </a>
+              </div> -->
+              <div class="flex-initial" style="margin-left: auto">
+                <a href="javascript:" class="register-link">注册账号</a>
+              </div>
+            </div>
+          </n-form-item>
+        </n-form>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { NCard, NForm, NFormItem, NInput, NButton, NSpace, NIcon, useMessage } from 'naive-ui'
+import { NCard, NForm, NFormItem, NInput, NButton, NSpace, NIcon, NCheckbox, useMessage } from 'naive-ui'
 import { RiAlertLine } from '@remixicon/vue'
+import { PersonOutline, LockClosedOutline, ShieldOutline } from '@vicons/ionicons5'
 import { usePlayerStore } from '@/stores/player'
 import { generateCaptcha, checkCaptchaEnabled, checkPlayerServiceStatus } from '@/api/player'
 
@@ -66,6 +162,7 @@ const captchaSvg = ref('')
 const captchaId = ref('')
 const playerServiceEnabled = ref(true)
 const playerServiceCloseMsg = ref('玩家服务中心系统维护中')
+const autoLogin = ref(true)
 
 const formValue = ref({
   username: '',
@@ -110,7 +207,7 @@ const handleLogin = async () => {
     )
 
     if (success) {
-      message.success('登录成功')
+      message.success('登录成功，即将进入系统')
       router.push('/player/dashboard')
     } else {
       message.error('登录失败，请检查用户名和密码')
@@ -177,49 +274,532 @@ const handleRefreshStatus = async () => {
 onMounted(() => {
   checkCaptchaStatus()
   checkServiceStatus()
+  
+  setTimeout(() => {
+    const usernameInput = document.querySelector('input[placeholder="请输入用户名"]')
+    if (usernameInput) {
+      (usernameInput as HTMLElement).focus()
+    }
+  }, 500)
 })
 </script>
 
-<style scoped>
-.login-container {
+<style lang="less" scoped>
+.view-account {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  flex-direction: column;
   height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  overflow: auto;
+  background-color: #f0f2f5;
+  background: linear-gradient(140deg, #e8f1fa, #c2d9ec, #a1c3e0, #80aed3);
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMiIgZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMSkiIC8+Cjwvc3ZnPg==');
+    opacity: 0.6;
+    z-index: 0;
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KICA8cmVjdCB4PSI1MCIgeT0iNTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTUgNTUpIiBmaWxsPSJyZ2JhKDQ1LCAxNDAsIDI0MCwgMC4wNSkiIC8+Cjwvc3ZnPg==');
+    opacity: 0.8;
+    z-index: 0;
+  }
+
+  &-container {
+    padding: 32px 40px 20px;
+    max-width: 580px;
+    min-width: 460px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 12px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+    margin-top: 10vh;
+    position: relative;
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    transition: all 0.3s ease;
+    z-index: 1;
+    
+    &:hover {
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+      transform: translateY(-5px);
+    }
+  }
+
+  &-title {
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 8px;
+    position: relative;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40px;
+      height: 2px;
+      background: linear-gradient(to right, #2d8cf0, #0081ff);
+      border-radius: 2px;
+    }
+  }
+  
+  .login-welcome {
+    text-align: center;
+    font-size: 14px;
+    color: #606266;
+    margin-bottom: 30px;
+    margin-top: 20px;
+  }
+
+  &-top {
+    padding: 10px 0;
+    text-align: center;
+
+    &-logo {
+      margin-bottom: 8px;
+      display: flex;
+      justify-content: center;
+      
+      img {
+        height: 60px;
+      }
+    }
+
+    &-desc {
+      font-size: 14px;
+      color: #606266;
+    }
+  }
+
+  &-other {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .default-color {
+    color: #515a6e;
+
+    :deep(.ant-checkbox-wrapper) {
+      color: #515a6e;
+    }
+  }
+
+  .login-button {
+    margin-top: 10px;
+    height: 42px;
+    font-size: 16px;
+    border-radius: 4px;
+    transition: all 0.3s;
+    position: relative;
+    overflow: hidden;
+    
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+    }
+    
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 5px;
+      height: 5px;
+      background: rgba(255, 255, 255, 0.5);
+      opacity: 0;
+      border-radius: 100%;
+      transform: scale(1, 1) translate(-50%);
+      transform-origin: 50% 50%;
+    }
+    
+    &:focus:not(:active)::after {
+      animation: ripple 1s ease-out;
+    }
+    
+    @keyframes ripple {
+      0% {
+        transform: scale(0, 0);
+        opacity: 0.5;
+      }
+      20% {
+        transform: scale(25, 25);
+        opacity: 0.3;
+      }
+      100% {
+        opacity: 0;
+        transform: scale(40, 40);
+      }
+    }
+  }
+  
+  .remember-forgot {
+    margin-bottom: 5px;
+    
+    .flex-between-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+    
+    .right {
+      text-align: right;
+    }
+  }
+  
+  .forgot-link {
+    color: #606266;
+    transition: all 0.2s;
+    
+    &:hover {
+      color: #2d8cf0;
+    }
+  }
+
+  .social-login {
+    display: flex;
+    margin-left: 16px;
+  }
+
+  .social-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    margin-right: 12px;
+    transition: all 0.3s;
+    background-color: rgba(144, 147, 153, 0.1);
+    
+    &:hover {
+      background-color: rgba(45, 140, 240, 0.2);
+      transform: scale(1.1);
+      
+      :deep(svg) {
+        color: #2d8cf0 !important;
+      }
+    }
+  }
+
+  .register-link {
+    color: #2d8cf0;
+    transition: all 0.3s;
+    
+    &:hover {
+      color: #57a3f3;
+      text-decoration: underline;
+    }
+  }
+  
+  .login-form {
+    :deep(.n-form-item-feedback-wrapper) {
+      min-height: 18px;
+    }
+    
+    :deep(.n-input) {
+      border-radius: 4px;
+    }
+    
+    padding: 0;
+  }
+  
+  .login-input {
+    :deep(.n-input__input-el) {
+      padding-left: 5px;
+    }
+    
+    :deep(.n-input-wrapper) {
+      transition: all 0.3s ease;
+    }
+    
+    &:hover {
+      :deep(.n-input-wrapper) {
+        box-shadow: 0 0 0 1px rgba(45, 140, 240, 0.2);
+      }
+    }
+  }
+  
+  .username-item, .password-item, .captcha-item {
+    margin-bottom: 24px;
+  }
+  
+  .captcha-image {
+    width: 120px;
+    height: 40px;
+    cursor: pointer;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    transition: all 0.3s;
+  }
+
+  .captcha-image:hover {
+    border-color: #409eff;
+    box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
+  }
+
+  .captcha-image :deep(svg) {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .other-text {
+    padding-left: 5px;
+  }
+  
+  .other-item {
+    margin-bottom: 0;
+  }
+
+  .maintenance-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
 }
 
-.maintenance-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
+@media (min-width: 768px) {
+  .view-account {
+    background-image: url('../../assets/images/login.svg'), 
+                      radial-gradient(circle at 10% 20%, rgba(100, 149, 237, 0.25) 0%, rgba(65, 105, 225, 0.2) 40%, rgba(30, 144, 255, 0.1) 90%);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: cover;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(135deg, rgba(45, 140, 240, 0.1), rgba(45, 140, 240, 0.05));
+      backdrop-filter: blur(10px);
+      z-index: 0;
+    }
+    
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZGVmcz4KICA8cGF0dGVybiBpZD0icGF0dGVybiIgeD0iMCIgeT0iMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KICAgIDxjaXJjbGUgY3g9IjMwIiBjeT0iMzAiIHI9IjEuNSIgZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMikiIC8+CiAgPC9wYXR0ZXJuPgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiIC8+Cjwvc3ZnPg==');
+      opacity: 0.3;
+      z-index: 0;
+      pointer-events: none;
+    }
+    
+    &-container {
+      margin-top: 15vh;
+      z-index: 1;
+      position: relative;
+    }
+  }
 }
 
-.captcha-image {
-  width: 120px;
-  height: 40px;
-  cursor: pointer;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fff;
+@media (max-height: 650px) {
+  .view-account-container {
+    margin-top: 5vh;
+  }
 }
 
-.captcha-image:hover {
-  border-color: #409eff;
-}
-
-.captcha-image :deep(svg) {
+.view-account-background {
+  position: absolute;
   width: 100%;
   height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+  
+  .line {
+    position: absolute;
+    background: linear-gradient(90deg, rgba(45, 140, 240, 0.2), rgba(0, 129, 255, 0.1));
+    
+    &-1 {
+      width: 300px;
+      height: 2px;
+      top: 15%;
+      right: 5%;
+      transform: rotate(-30deg);
+      animation: pulse 8s ease-in-out infinite;
+    }
+    
+    &-2 {
+      width: 200px;
+      height: 2px;
+      bottom: 20%;
+      left: 10%;
+      transform: rotate(45deg);
+      animation: pulse 6s ease-in-out infinite 1s;
+    }
+    
+    &-3 {
+      width: 150px;
+      height: 2px;
+      top: 40%;
+      left: 5%;
+      transform: rotate(-15deg);
+      animation: pulse 7s ease-in-out infinite 2s;
+    }
+  }
+  
+  .square {
+    position: absolute;
+    
+    &-1 {
+      width: 80px;
+      height: 80px;
+      top: 10%;
+      left: 15%;
+      background: linear-gradient(45deg, rgba(45, 140, 240, 0.15), rgba(0, 129, 255, 0.05));
+      transform: rotate(30deg);
+      animation: rotate 15s linear infinite;
+    }
+    
+    &-2 {
+      width: 60px;
+      height: 60px;
+      bottom: 15%;
+      right: 10%;
+      border: 2px solid rgba(45, 140, 240, 0.1);
+      background: transparent;
+      animation: rotate 12s linear infinite reverse;
+    }
+  }
+  
+  .triangle {
+    position: absolute;
+    bottom: 30%;
+    right: 20%;
+    width: 0;
+    height: 0;
+    border-left: 50px solid transparent;
+    border-right: 50px solid transparent;
+    border-bottom: 80px solid rgba(45, 140, 240, 0.08);
+    animation: float 10s ease-in-out infinite;
+  }
+  
+  @keyframes pulse {
+    0% {
+      opacity: 0.3;
+    }
+    50% {
+      opacity: 0.6;
+    }
+    100% {
+      opacity: 0.3;
+    }
+  }
+  
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .wave {
+    position: absolute;
+    opacity: 0.3;
+    transform-origin: bottom left;
+    
+    &-1 {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 120px;
+      background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMikiIGQ9Ik0wLDMyMEMwLDI0MCA0MCwxNjAgODAsMTYwQzEyMCwxNjAgMTYwLDI0MCAyMDAsMjQwQzI0MCwyNDAgMjgwLDE2MCAzMjAsMTYwQzM2MCwxNjAgNDAwLDI0MCA0NDAsMjQwQzQ4MCwyNDAgNTIwLDE2MCA1NjAsMTYwQzYwMCwxNjAgNjQwLDI0MCA2ODAsMjQwQzcyMCwyNDAgNzYwLDE2MCA4MDAsMTYwQzg0MCwxNjAgODgwLDI0MCA5MjAsMjQwQzk2MCwyNDAgMTAwMCwxNjAgMTA0MCwxNjBDMTA4MCwxNjAgMTEyMCwyNDAgMTE2MCwyNDBDMTIwMCwyNDAgMTI0MCwxNjAgMTI4MCwxNjBDMTMyMCwxNjAgMTM2MCwyNDAgMTQwMCwyNDBDMTQ0MCwyNDAgMTQ0MCwxNjAgMTQ0MCwxNjBMMTQ0MCwzMjBMMCwzMjBaIj48L3BhdGg+PC9zdmc+');
+      background-size: 100% 120px;
+      animation: wave-left-to-right 15s ease-in-out infinite;
+      transform: rotate(-2deg);
+    }
+    
+    &-2 {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100px;
+      background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMTUpIiBkPSJNMCwzMjBDMCwyNDAgNjAsMTgwIDEyMCwxODBDMTgwLDE4MCAyNDAsMjQwIDMwMCwyNDBDMzYwLDI0MCA0MjAsMTgwIDQ4MCwxODBDNTQwLDE4MCA2MDAsMjQwIDY2MCwyNDBDNzIwLDI0MCA3ODAsMTgwIDg0MCwxODBDOTAwLDE4MCA5NjAsMjQwIDEwMjAsMjQwQzEwODAsMjQwIDExNDAsMTgwIDEyMDAsMTgwQzEyNjAsMTgwIDEzMjAsMjQwIDEzODAsMjQwQzE0NDAsMjQwIDE0NDAsMTgwIDE0NDAsMTgwTDE0NDAsMzIwTDAsMzIwWiI+PC9wYXRoPjwvc3ZnPg==');
+      background-size: 100% 100px;
+      animation: wave-left-to-right 18s ease-in-out infinite;
+      animation-delay: -5s;
+      transform: rotate(-1deg);
+    }
+    
+    &-3 {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 80px;
+      background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMSkiIGQ9Ik0wLDMyMEMwLDI2MCAzMCwyMDAgNjAsMjAwQzkwLDIwMCAxMjAsMjYwIDE1MCwyNjBDMTgwLDI2MCAyMTAsMjAwIDI0MCwyMDBDMjcwLDIwMCAzMDAsMjYwIDMzMCwyNjBDMzYwLDI2MCAzOTAsMjAwIDQyMCwyMDBDNDUwLDIwMCA0ODAsMjYwIDUxMCwyNjBDNTQwLDI2MCA1NzAsMjAwIDYwMCwyMDBDNjMwLDIwMCA2NjAsMjYwIDY5MCwyNjBDNzIwLDI2MCA3NTAsMjAwIDc4MCwyMDBDODEwLDIwMCA4NDAsMjYwIDg3MCwyNjBDOTAwLDI2MCA5MzAsMjAwIDk2MCwyMDBDOTkwLDIwMCAxMDIwLDI2MCAxMDUwLDI2MEMxMDgwLDI2MCAxMTEwLDIwMCAxMTQwLDIwMEMxMTcwLDIwMCAxMjAwLDI2MCAxMjMwLDI2MEMxMjYwLDI2MCAxMjkwLDIwMCAxMzIwLDIwMEMxMzUwLDIwMCAxMzgwLDI2MCAxNDEwLDI2MEMxNDQwLDI2MCAxNDQwLDIwMCAxNDQwLDIwMEwxNDQwLDMyMEwwLDMyMFoiPjwvcGF0aD48L3N2Zz4=');
+      background-size: 100% 80px;
+      animation: wave-left-to-right 20s ease-in-out infinite;
+      animation-delay: -2s;
+    }
+  }
+  
+  @keyframes wave-left-to-right {
+    0% {
+      background-position-x: 0;
+      background-position-y: 100%;
+    }
+    50% {
+      background-position-x: 720px;
+      background-position-y: 50%;
+    }
+    100% {
+      background-position-x: 1440px;
+      background-position-y: 0%;
+    }
+  }
+  
+  @keyframes float {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-15px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
 }
 </style>