diff --git a/src/api/auth.api.ts b/src/api/auth.api.ts
index 64fb97b2..35c28cf9 100644
--- a/src/api/auth.api.ts
+++ b/src/api/auth.api.ts
@@ -61,6 +61,8 @@ export interface LoginFormData {
   captchaKey: string;
   /** 验证码 */
   captchaCode: string;
+  /** 记住我 */
+  rememberMe: boolean;
 }
 
 /** 登录响应 */
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 5b7c90d9..3e5642ed 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,132 +1,106 @@
 <template>
-  <div class="login">
+  <div class="login flex-center wh-full relative overflow-scroll">
     <!-- 登录页头部 -->
-    <div class="login-header">
-      <div class="flex-y-center">
-        <el-switch
-          v-model="isDark"
-          inline-prompt
-          active-icon="Moon"
-          inactive-icon="Sunny"
-          @change="toggleTheme"
-        />
-        <lang-select class="ml-2 cursor-pointer" />
-      </div>
+    <div class="flex-x-end absolute top-0 w-full p-4">
+      <el-switch
+        v-model="isDark"
+        inline-prompt
+        active-icon="Moon"
+        inactive-icon="Sunny"
+        @change="toggleTheme"
+      />
+      <lang-select class="ml-2 cursor-pointer" />
     </div>
 
     <!-- 登录页内容 -->
-    <div class="login-form">
-      <el-form ref="loginFormRef" :model="loginFormData" :rules="loginRules">
-        <div class="form-title">
-          <h2>{{ defaultSettings.title }}</h2>
-          <el-dropdown style="position: absolute; right: 0">
-            <div class="cursor-pointer">
-              <el-icon>
-                <arrow-down />
-              </el-icon>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item>
-                  <el-tag>{{ defaultSettings.version }}</el-tag>
-                </el-dropdown-item>
-                <el-dropdown-item @click="setLoginCredentials('root', '123456')">
-                  超级管理员：root/123456
-                </el-dropdown-item>
-                <el-dropdown-item @click="setLoginCredentials('admin', '123456')">
-                  系统管理员：admin/123456
-                </el-dropdown-item>
-                <el-dropdown-item @click="setLoginCredentials('test', '123456')">
-                  测试小游客：test/123456
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
+    <div
+      class="m-5 w-full min-w-[335px] max-w-[460px] p-5 shadow-[var(--el-box-shadow-light)] sm:p-10"
+      :class="[isDark ? 'bg-transparent' : 'bg-white']"
+    >
+      <div class="flex-center relative pb-5">
+        <h2>{{ defaultSettings.title }}</h2>
+        <el-dropdown class="absolute! right-0">
+          <div class="cursor-pointer">
+            <el-icon><arrow-down /></el-icon>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>
+                <el-tag>{{ defaultSettings.version }}</el-tag>
+              </el-dropdown-item>
+              <el-dropdown-item @click="setLoginCredentials('root', '123456')">
+                超级管理员: root/123456
+              </el-dropdown-item>
+              <el-dropdown-item @click="setLoginCredentials('admin', '123456')">
+                系统管理员: admin/123456
+              </el-dropdown-item>
+              <el-dropdown-item @click="setLoginCredentials('test', '123456')">
+                测试小游客: test/123456
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
 
+      <el-form ref="loginFormRef" :model="loginFormData" :rules="loginRules" size="large">
         <!-- 用户名 -->
         <el-form-item prop="username">
-          <div class="input-wrapper">
-            <el-icon class="mx-2">
-              <User />
-            </el-icon>
-            <el-input
-              ref="username"
-              v-model="loginFormData.username"
-              :placeholder="$t('login.username')"
-              name="username"
-              size="large"
-              class="h-[48px]"
-            />
-          </div>
+          <el-input v-model.trim="loginFormData.username" :placeholder="t('login.username')">
+            <template #prefix>
+              <el-icon :color="isDark ? 'white' : 'black'"><User /></el-icon>
+            </template>
+          </el-input>
         </el-form-item>
 
         <!-- 密码 -->
-        <el-tooltip :visible="isCapslock" :content="$t('login.capsLock')" placement="right">
+        <el-tooltip :visible="isCapsLock" :content="t('login.capsLock')" placement="right">
           <el-form-item prop="password">
-            <div class="input-wrapper">
-              <el-icon class="mx-2">
-                <Lock />
-              </el-icon>
-              <el-input
-                v-model="loginFormData.password"
-                :placeholder="$t('login.password')"
-                type="password"
-                name="password"
-                size="large"
-                class="h-[48px] pr-2"
-                show-password
-                @keyup="checkCapslock"
-                @keyup.enter="handleLoginSubmit"
-              />
-            </div>
+            <el-input
+              v-model.trim="loginFormData.password"
+              :placeholder="t('login.password')"
+              type="password"
+              show-password
+              @keyup="checkCapsLock"
+              @keyup.enter="handleLoginSubmit"
+            >
+              <template #prefix>
+                <el-icon :color="isDark ? 'white' : 'black'"><Lock /></el-icon>
+              </template>
+            </el-input>
           </el-form-item>
         </el-tooltip>
 
         <!-- 验证码 -->
         <el-form-item prop="captchaCode">
-          <div class="input-wrapper">
-            <div class="i-svg:captcha mx-2" />
-
-            <el-input
-              v-model="loginFormData.captchaCode"
-              auto-complete="off"
-              size="large"
-              class="flex-1"
-              :placeholder="$t('login.captchaCode')"
-              @keyup.enter="handleLoginSubmit"
-            />
-
-            <el-image :src="captchaBase64" class="captcha-img" @click="getCaptcha" />
-          </div>
+          <el-input
+            v-model.trim="loginFormData.captchaCode"
+            :placeholder="t('login.captchaCode')"
+            @keyup.enter="handleLoginSubmit"
+          >
+            <template #prefix>
+              <div :class="['i-svg:captcha', isDark ? 'text-white' : 'text-black']" />
+            </template>
+            <template #suffix>
+              <el-image :src="captchaBase64" class="w-[138px] cursor-pointer" @click="getCaptcha" />
+            </template>
+          </el-input>
         </el-form-item>
 
-        <div class="flex-x-between w-full py-1">
-          <el-checkbox>
-            {{ $t("login.rememberMe") }}
-          </el-checkbox>
-
-          <el-link type="primary" href="/forget-password">
-            {{ $t("login.forgetPassword") }}
-          </el-link>
+        <div class="flex-x-between w-full">
+          <el-checkbox v-model="loginFormData.rememberMe">{{ t("login.rememberMe") }}</el-checkbox>
+          <el-link type="primary" @click="unfinished">{{ t("login.forgetPassword") }}</el-link>
         </div>
 
         <!-- 登录按钮 -->
-        <el-button
-          :loading="loading"
-          type="primary"
-          size="large"
-          class="w-full"
-          @click.prevent="handleLoginSubmit"
-        >
-          {{ $t("login.login") }}
+        <el-button :loading="loading" type="primary" class="w-full" @click="handleLoginSubmit">
+          {{ t("login.login") }}
         </el-button>
 
         <!-- 第三方登录 -->
         <el-divider>
-          <el-text size="small">{{ $t("login.otherLoginMethods") }}</el-text>
+          <el-text size="small">{{ t("login.otherLoginMethods") }}</el-text>
         </el-divider>
-        <div class="third-party-login">
+        <div class="flex-center gap-x-5 text-[var(--el-text-color-secondary)]">
           <div class="i-svg:wechat" />
           <div class="i-svg:qq" />
           <div class="i-svg:github" />
@@ -136,12 +110,10 @@
     </div>
 
     <!-- 登录页底部 -->
-    <div class="login-footer">
-      <el-text size="small">
-        Copyright © 2021 - 2025 youlai.tech All Rights Reserved.
-        <a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
-      </el-text>
-    </div>
+    <el-text size="small" class="py-2.5! fixed bottom-0 text-center">
+      Copyright © 2021 - 2025 youlai.tech All Rights Reserved.
+      <a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
+    </el-text>
   </div>
 </template>
 
@@ -168,7 +140,7 @@ const loginFormRef = ref<FormInstance>();
 
 const isDark = ref(settingsStore.theme === ThemeMode.DARK); // 是否暗黑模式
 const loading = ref(false); // 按钮 loading 状态
-const isCapslock = ref(false); // 是否大写锁定
+const isCapsLock = ref(false); // 是否大写锁定
 const captchaBase64 = ref(); // 验证码图片Base64字符串
 
 const loginFormData = ref<LoginFormData>({
@@ -176,6 +148,7 @@ const loginFormData = ref<LoginFormData>({
   password: "123456",
   captchaKey: "",
   captchaCode: "",
+  rememberMe: false,
 });
 
 const loginRules = computed(() => {
@@ -183,14 +156,14 @@ const loginRules = computed(() => {
     username: [
       {
         required: true,
-        trigger: "blur",
+        trigger: "change",
         message: t("login.message.username.required"),
       },
     ],
     password: [
       {
         required: true,
-        trigger: "blur",
+        trigger: "change",
         message: t("login.message.password.required"),
       },
       {
@@ -202,7 +175,7 @@ const loginRules = computed(() => {
     captchaCode: [
       {
         required: true,
-        trigger: "blur",
+        trigger: "change",
         message: t("login.message.captchaCode.required"),
       },
     ],
@@ -219,12 +192,13 @@ function getCaptcha() {
 
 // 登录提交处理
 async function handleLoginSubmit() {
-  // 1. 表单验证
-  const valid = await loginFormRef.value?.validate();
-  if (!valid) return;
-
-  loading.value = true;
   try {
+    // 1. 表单验证
+    const valid = await loginFormRef.value?.validate();
+    if (!valid) return;
+
+    loading.value = true;
+
     // 2. 执行登录
     await userStore.login(loginFormData.value);
 
@@ -275,10 +249,10 @@ const toggleTheme = () => {
 };
 
 // 检查输入大小写
-function checkCapslock(event: KeyboardEvent) {
+function checkCapsLock(event: KeyboardEvent) {
   // 防止浏览器密码自动填充时报错
   if (event instanceof KeyboardEvent) {
-    isCapslock.value = event.getModifierState("CapsLock");
+    isCapsLock.value = event.getModifierState("CapsLock");
   }
 }
 
@@ -288,138 +262,33 @@ const setLoginCredentials = (username: string, password: string) => {
   loginFormData.value.password = password;
 };
 
-onMounted(() => {
-  getCaptcha();
-});
+// 未实现功能提示
+const unfinished = () => {
+  ElMessage.warning("该功能尚未完成，敬请期待！");
+};
+
+onMounted(() => getCaptcha());
 </script>
 
 <style lang="scss" scoped>
 .login {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  overflow-y: auto;
   background: url("@/assets/images/login-bg.jpg") no-repeat center right;
-
-  .login-header {
-    position: absolute;
-    top: 0;
-    display: flex;
-    justify-content: right;
-    width: 100%;
-    padding: 15px;
-
-    .logo {
-      width: 26px;
-      height: 26px;
-    }
-
-    .title {
-      margin: auto 5px;
-      font-size: 24px;
-      font-weight: bold;
-      color: #3b82f6;
-    }
-  }
-
-  .login-form {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 460px;
-    padding: 40px;
-    overflow: hidden;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: var(--el-box-shadow-light);
-
-    @media (width <= 460px) {
-      width: 100%;
-      padding: 20px;
-    }
-
-    .form-title {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 0 20px;
-      text-align: center;
-    }
-
-    .input-wrapper {
-      display: flex;
-      align-items: center;
-      width: 100%;
-    }
-
-    .captcha-img {
-      height: 48px;
-      cursor: pointer;
-      border-top-right-radius: 6px;
-      border-bottom-right-radius: 6px;
-    }
-
-    .third-party-login {
-      display: flex;
-      justify-content: center;
-      width: 100%;
-      color: var(--el-text-color-secondary);
-
-      *:not(:first-child) {
-        margin-left: 20px;
-      }
-
-      .icon {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .login-footer {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    padding: 10px 0;
-    text-align: center;
-  }
 }
-
-:deep(.el-form-item) {
-  background: var(--el-input-bg-color);
-  border: 1px solid var(--el-border-color);
-  border-radius: 5px;
-}
-
-:deep(.el-input) {
-  .el-input__wrapper {
-    padding: 0;
-    background-color: transparent;
-    box-shadow: none;
-
-    &.is-focus,
-    &:hover {
-      box-shadow: none !important;
-    }
-
-    input:-webkit-autofill {
-      /* 通过延时渲染背景色变相去除背景颜色 */
-      transition: background-color 1000s ease-in-out 0s;
-    }
-  }
-}
-
 html.dark {
   .login {
     background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right;
-
-    .login-form {
+    .el-card {
       background: transparent;
-      box-shadow: var(--el-box-shadow);
     }
   }
 }
+.el-form-item {
+  margin-bottom: 20px;
+}
+:deep(.el-input) {
+  height: 48px;
+  .el-input__wrapper {
+    padding: 1px 10px;
+  }
+}
 </style>