From c0832a24b924d529aab9ab360c0d4d7234e73452 Mon Sep 17 00:00:00 2001
From: GeekMaster <yangjian102621@gmail.com>
Date: Fri, 15 Aug 2025 18:51:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=94=AF=E6=8C=81=20dark=20=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/theme-dark.scss  |  10 +
 web/src/assets/css/theme-light.scss |  10 +
 web/src/components/LoginDialog.vue  | 144 +++++----
 web/src/views/Home.vue              |   2 +-
 web/src/views/Login.vue             | 315 ++++---------------
 web/src/views/Register.vue          | 448 ++++------------------------
 6 files changed, 231 insertions(+), 698 deletions(-)

diff --git a/web/src/assets/css/theme-dark.scss b/web/src/assets/css/theme-dark.scss
index cf03574a..283720e6 100644
--- a/web/src/assets/css/theme-dark.scss
+++ b/web/src/assets/css/theme-dark.scss
@@ -97,4 +97,14 @@
 
   // 面板背景
   --panel-bg: linear-gradient(135deg, #252d58 0%, #1f243f 100%);
+
+  // 登录注册页面专用变量
+  --login-bg: linear-gradient(135deg, #252d58 0%, #1f243f 100%);
+  --login-card-bg: #252d58;
+  --login-card-border: rgba(255, 255, 255, 0.1);
+  --login-title-color: #fff;
+  --login-subtitle-color: #a3aed0;
+  --login-text-color: #a3aed0;
+  --login-link-color: #d1c7ff;
+  --login-link-hover-bg: rgba(209, 199, 255, 0.1);
 }
\ No newline at end of file
diff --git a/web/src/assets/css/theme-light.scss b/web/src/assets/css/theme-light.scss
index 27afcd22..6357d882 100644
--- a/web/src/assets/css/theme-light.scss
+++ b/web/src/assets/css/theme-light.scss
@@ -62,4 +62,14 @@
   --quote-text-color: #333;
   // 面板背景
   --panel-bg: linear-gradient(135deg, #f5eafe 0%, #e9e6fc 100%);
+
+  // 登录注册页面专用变量
+  --login-bg: linear-gradient(135deg, #f5eafe 0%, #e9e6fc 100%);
+  --login-card-bg: #fff;
+  --login-card-border: rgba(79, 89, 102, 0.122);
+  --login-title-color: #000;
+  --login-subtitle-color: #666;
+  --login-text-color: #666;
+  --login-link-color: #5b62ce;
+  --login-link-hover-bg: rgba(91, 98, 206, 0.1);
 }
diff --git a/web/src/components/LoginDialog.vue b/web/src/components/LoginDialog.vue
index 4b5d4b7e..1926f9b0 100644
--- a/web/src/components/LoginDialog.vue
+++ b/web/src/components/LoginDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login-dialog w-full">
     <div class="login-box" v-if="login">
-      <el-form :model="data" class="form">
+      <el-form :model="data" class="form space-y-5">
         <div class="block">
           <el-input placeholder="账号" size="large" v-model="data.username" autocomplete="off">
             <template #prefix>
@@ -29,25 +29,34 @@
           </el-input>
         </div>
 
-        <el-row class="btn-row" :gutter="20">
+        <el-row class="btn-row mt-8" :gutter="20">
           <el-col :span="24">
-            <el-button
-              class="login-btn"
-              type="primary"
-              size="large"
+            <button
+              class="w-full h-12 rounded-xl text-base font-medium text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 shadow-md"
               @click="submitLogin"
-              :loading="loading"
-              >{{ loading ? '登录中...' : '登 录' }}</el-button
             >
+              {{ loading ? '登录中...' : '登 录' }}
+            </button>
           </el-col>
         </el-row>
 
         <div class="w-full">
-          <div class="text flex justify-center items-center pt-3 text-sm">
+          <div
+            class="text flex justify-center items-center pt-3 text-sm"
+            style="color: var(--login-text-color);"
+          >
             还没有账号？
-            <el-button size="small" @click="login = false">注册</el-button>
+            <el-button
+              size="small"
+              class="ml-2 rounded-md px-2 py-1 transition-colors duration-200"
+              style="color: var(--login-link-color);"
+              @click="login = false"
+              @mouseenter="$event.target.style.background = 'var(--login-link-hover-bg)'"
+              @mouseleave="$event.target.style.background = 'transparent'"
+              >注册</el-button
+            >
 
-            <el-button type="info" class="forget" size="small" @click="showResetPass = true"
+            <el-button type="info" class="forget ml-4" size="small" @click="showResetPass = true"
               >忘记密码？</el-button
             >
           </div>
@@ -56,8 +65,8 @@
     </div>
 
     <div class="register-box w-full" v-else>
-      <el-form :model="data" class="form" v-if="enableRegister">
-        <el-tabs v-model="activeName" class="demo-tabs">
+      <el-form :model="data" class="form space-y-5" v-if="enableRegister">
+        <el-tabs v-model="activeName" class="demo-tabs dark:text-white">
           <el-tab-pane label="手机注册" name="mobile" v-if="enableMobile">
             <div class="block">
               <el-input
@@ -74,7 +83,7 @@
                 </template>
               </el-input>
             </div>
-            <div class="block">
+            <div class="block mt-4">
               <el-row :gutter="10">
                 <el-col :span="12">
                   <el-input
@@ -107,7 +116,7 @@
                 </template>
               </el-input>
             </div>
-            <div class="block">
+            <div class="block mt-4">
               <el-row :gutter="10">
                 <el-col :span="12">
                   <el-input
@@ -198,19 +207,26 @@
         </div>
 
         <div class="w-full">
-          <el-button
-            class="login-btn w-full"
-            type="primary"
-            size="large"
+          <button
+            class="w-full h-12 rounded-xl text-base font-medium text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 shadow-md"
             @click="submitRegister"
-            :loading="loading"
-            >{{ loading ? '注册中...' : '注 册' }}</el-button
           >
+            {{ loading ? '注册中...' : '注 册' }}
+          </button>
         </div>
 
-        <div class="text text-sm flex justify-center items-center w-full pt-3">
+        <div
+          class="text text-sm flex justify-center items-center w-full pt-3"
+          style="color: var(--login-text-color);"
+        >
           已有账号？
-          <el-button size="small" @click="login = true">登录</el-button>
+          <el-button
+            size="small"
+            class="ml-2 rounded-md px-2 py-1"
+            style="color: var(--login-link-color);"
+            @click="login = true"
+            >登录</el-button
+          >
         </div>
       </el-form>
 
@@ -245,14 +261,12 @@ import SendMsg from '@/components/SendMsg.vue'
 import { getSystemInfo } from '@/store/cache'
 import { setUserToken } from '@/store/session'
 import { useSharedStore } from '@/store/sharedata'
-import { setRoute } from '@/store/system'
-import { httpGet, httpPost } from '@/utils/http'
+import { httpPost } from '@/utils/http'
 import { arrayContains } from '@/utils/libs'
 import { validateEmail, validateMobile } from '@/utils/validate'
 import { Checked, Iphone, Lock, Message } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -439,46 +453,56 @@ const doRegister = (verifyData) => {
 .login-dialog {
   border-radius: 10px;
 
-  .el-tabs__nav {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-  }
+  // Dark theme support for Element Plus components
+  :deep(.el-tabs) {
+    .el-tabs__header {
+      .el-tabs__nav-wrap {
+        .el-tabs__nav {
+          .el-tabs__item {
+            color: var(--el-text-color-primary);
 
-  .form {
-    .block {
-      margin-bottom: 10px;
-    }
-
-    .btn-row {
-      display: flex;
-
-      .login-btn {
-        font-size: 16px;
-        width: 100%;
-      }
-
-      .text {
-        line-height: 40px;
-
-        .el-tag {
-          cursor: pointer;
+            &.is-active {
+              color: var(--el-color-primary);
+            }
+          }
         }
       }
-
-      .forget {
-        margin-left: 10px;
-      }
-    }
-
-    .text {
-      color: var(--el-text-color-primary);
     }
   }
 
-  .register-box {
-    .wechat-card {
-      text-align: center;
+  :deep(.el-input) {
+    .el-input__wrapper {
+      background: var(--el-fill-color-blank);
+      border-color: var(--el-border-color);
+
+      &.is-focus {
+        border-color: var(--el-color-primary);
+      }
+    }
+
+    .el-input__inner {
+      color: var(--el-text-color-primary);
+
+      &::placeholder {
+        color: var(--el-text-color-placeholder);
+      }
+    }
+
+    .el-input__prefix,
+    .el-input__suffix {
+      color: var(--el-text-color-regular);
+    }
+  }
+
+  :deep(.el-button) {
+    &.el-button--info {
+      color: var(--el-text-color-regular);
+      background: transparent;
+      border: none;
+
+      &:hover {
+        background: var(--el-fill-color-light);
+      }
     }
   }
 }
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 93c47309..6931fbf5 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -139,7 +139,7 @@
           登录后解锁功能
         </div>
       </template>
-      <div class="p-4 pt-2 pb-2">
+      <div class="w-full p-4 pt-2 pb-2">
         <LoginDialog @success="loginSuccess" @hide="store.setShowLoginDialog(false)" />
       </div>
     </el-dialog>
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 0cec81c7..536a6497 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -1,13 +1,38 @@
 <template>
-  <div class="login-page">
-    <router-link to="/" class="back-home-btn" title="返回首页">
-      <i class="iconfont icon-home"></i>
+  <div
+    class="min-h-screen flex items-center justify-center p-5 relative overflow-auto"
+    style="background: var(--login-bg);"
+  >
+    <router-link
+      to="/"
+      class="fixed top-5 left-5 z-50 flex items-center justify-center w-11 h-11 border border-transparent rounded-xl text-white no-underline shadow-lg backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl"
+      style="background: var(--btnColor);"
+      title="返回首页"
+    >
+      <i class="iconfont icon-home text-xl"></i>
     </router-link>
-    <div class="login-container">
-      <div class="login-card">
-        <div class="login-header">
-          <h1 class="login-title">欢迎登录</h1>
-          <p class="login-subtitle">登录您的账户以继续使用服务</p>
+    <div class="w-full max-w-md mx-auto">
+      <div
+        class="rounded-3xl p-10 shadow-2xl backdrop-blur-sm relative overflow-hidden"
+        style="background: var(--login-card-bg); border: 1px solid var(--login-card-border);"
+      >
+        <div
+          class="absolute top-0 left-0 right-0 h-1"
+          style="background: var(--btnColor);"
+        ></div>
+        <div class="text-center mb-8">
+          <h1 
+            class="text-3xl font-semibold m-0 mb-2 tracking-tight"
+            style="color: var(--login-title-color);"
+          >
+            欢迎登录
+          </h1>
+          <p 
+            class="text-base m-0 leading-relaxed"
+            style="color: var(--login-subtitle-color);"
+          >
+            登录您的账户以继续使用服务
+          </p>
         </div>
 
         <div class="login-content">
@@ -59,271 +84,57 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.login-page {
-  min-height: 100vh;
-  background: var(--theme-bg-all);
-  background-image: var(--panel-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  position: relative;
-  overflow: auto;
-}
-
-.back-home-btn {
-  position: fixed;
-  top: 20px;
-  left: 20px;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  background: var(--card-bg);
-  border: 1px solid var(--line-box);
-  border-radius: 12px;
-  color: var(--theme-text-color-primary);
-  text-decoration: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  backdrop-filter: blur(8px);
-  transition: all 0.3s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
-    background: var(--hover-deep-color);
-  }
-
-  .iconfont {
-    font-size: 20px;
-  }
-}
-
-.login-container {
-  width: 100%;
-  max-width: 480px;
-  margin: 0 auto;
-}
-
-.login-card {
-  background: var(--card-bg);
-  border: 1px solid var(--line-box);
-  border-radius: 20px;
-  padding: 40px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: var(--btnColor);
-  }
-}
-
-.login-header {
-  text-align: center;
-  margin-bottom: 32px;
-}
-
-.login-title {
-  font-size: 28px;
-  font-weight: 600;
-  color: var(--theme-text-color-primary);
-  margin: 0 0 8px 0;
-  letter-spacing: -0.5px;
-}
-
-.login-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-color-secondary);
-  margin: 0;
-  line-height: 1.5;
-}
-
-.login-content {
-  :deep(.login-dialog) {
-    .form {
-      .block {
-        margin-bottom: 20px;
-
-        .el-input {
-          .el-input__wrapper {
-            background: var(--el-fill-color-blank);
-            border: 1px solid var(--line-box);
-            border-radius: 12px;
-            box-shadow: none;
-            transition: all 0.3s ease;
-
-            &:hover,
-            &.is-focus {
-              border-color: var(--border-active);
-              box-shadow: 0 0 0 3px rgba(91, 98, 206, 0.1);
-            }
-          }
-
-          .el-input__inner {
-            color: var(--theme-text-color-primary);
-            font-size: 16px;
-
-            &::placeholder {
-              color: var(--theme-text-color-secondary);
-              opacity: 0.7;
-            }
-          }
-
-          .el-input__prefix {
-            color: var(--theme-text-color-secondary);
-          }
-        }
-      }
-
-      .btn-row {
-        margin-top: 32px;
-
-        .login-btn {
-          width: 100%;
-          height: 48px;
-          border-radius: 12px;
-          background: var(--btnColor);
-          border: none;
-          font-size: 16px;
-          font-weight: 500;
-          transition: all 0.3s ease;
-          box-shadow: 0 4px 16px rgba(91, 98, 206, 0.3);
-
-          &:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 24px rgba(91, 98, 206, 0.4);
-          }
-
-          &:active {
-            transform: translateY(0);
-          }
-        }
-      }
-
-      .text {
-        margin-top: 24px;
-        color: var(--theme-text-color-secondary);
-
-        .el-button {
-          color: var(--text-color-primary);
-          background: transparent;
-          border: none;
-          padding: 0 8px;
-          font-size: 14px;
-
-          &:hover {
-            background: var(--btn-bg);
-            border-radius: 6px;
-          }
-
-          &.forget {
-            color: var(--theme-text-color-secondary);
-
-            &:hover {
-              color: var(--text-color-primary);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// 移动端适配
+<style scoped>
+/* 移动端适配 */
 @media (max-width: 768px) {
-  .login-page {
-    padding: 16px;
+  .min-h-screen {
+    padding: 1rem;
   }
 
-  .back-home-btn {
-    top: 16px;
-    left: 16px;
-    width: 40px;
-    height: 40px;
-
-    .iconfont {
-      font-size: 18px;
-    }
+  .fixed.top-5.left-5 {
+    top: 1rem;
+    left: 1rem;
+    width: 2.5rem;
+    height: 2.5rem;
   }
 
-  .login-card {
-    padding: 32px 24px;
-    border-radius: 16px;
-    margin-top: 60px;
+  .fixed.top-5.left-5 .iconfont {
+    font-size: 1.125rem;
   }
 
-  .login-title {
-    font-size: 24px;
+  .max-w-md {
+    margin-top: 3.75rem;
   }
 
-  .login-subtitle {
-    font-size: 15px;
+  .p-10 {
+    padding: 2rem 1.5rem;
   }
 
-  .login-content {
-    :deep(.login-dialog) {
-      .form {
-        .block {
-          margin-bottom: 18px;
+  .rounded-3xl {
+    border-radius: 1rem;
+  }
 
-          .el-input {
-            .el-input__wrapper {
-              border-radius: 10px;
-            }
+  .text-3xl {
+    font-size: 1.5rem;
+  }
 
-            .el-input__inner {
-              font-size: 16px;
-            }
-          }
-        }
-
-        .btn-row {
-          margin-top: 28px;
-
-          .login-btn {
-            height: 46px;
-            border-radius: 10px;
-            font-size: 15px;
-          }
-        }
-
-        .text {
-          margin-top: 20px;
-          font-size: 13px;
-
-          .el-button {
-            font-size: 13px;
-            padding: 0 6px;
-          }
-        }
-      }
-    }
+  .text-base {
+    font-size: 0.875rem;
   }
 }
 
-// 小屏幕手机适配
+/* 小屏幕手机适配 */
 @media (max-width: 480px) {
-  .login-card {
-    padding: 24px 20px;
+  .p-10 {
+    padding: 1.5rem 1.25rem;
   }
 
-  .login-title {
-    font-size: 22px;
+  .text-3xl {
+    font-size: 1.25rem;
   }
 
-  .login-subtitle {
-    font-size: 14px;
+  .text-base {
+    font-size: 0.875rem;
   }
 }
 </style>
diff --git a/web/src/views/Register.vue b/web/src/views/Register.vue
index 62dc1297..8897593a 100644
--- a/web/src/views/Register.vue
+++ b/web/src/views/Register.vue
@@ -1,13 +1,38 @@
 <template>
-  <div class="register-page">
-    <router-link to="/" class="back-home-btn" title="返回首页">
-      <i class="iconfont icon-home"></i>
+  <div
+    class="min-h-screen flex items-center justify-center p-5 relative overflow-auto"
+    style="background: var(--login-bg);"
+  >
+    <router-link
+      to="/"
+      class="fixed top-5 left-5 z-50 flex items-center justify-center w-11 h-11 border border-transparent rounded-xl text-white no-underline shadow-lg backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl"
+      style="background: var(--btnColor);"
+      title="返回首页"
+    >
+      <i class="iconfont icon-home text-xl"></i>
     </router-link>
-    <div class="register-container">
-      <div class="register-card">
-        <div class="register-header">
-          <h1 class="register-title">用户注册</h1>
-          <p class="register-subtitle">创建您的账户以开始使用服务</p>
+    <div class="w-full max-w-md mx-auto">
+      <div
+        class="rounded-3xl p-10 shadow-2xl backdrop-blur-sm relative overflow-hidden"
+        style="background: var(--login-card-bg); border: 1px solid var(--login-card-border);"
+      >
+        <div
+          class="absolute top-0 left-0 right-0 h-1"
+          style="background: var(--btnColor);"
+        ></div>
+        <div class="text-center mb-8">
+          <h1 
+            class="text-3xl font-semibold m-0 mb-2 tracking-tight"
+            style="color: var(--login-title-color);"
+          >
+            用户注册
+          </h1>
+          <p 
+            class="text-base m-0 leading-relaxed"
+            style="color: var(--login-subtitle-color);"
+          >
+            创建您的账户以开始使用服务
+          </p>
         </div>
 
         <div class="register-content">
@@ -55,404 +80,57 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.register-page {
-  min-height: 100vh;
-  background: var(--theme-bg-all);
-  background-image: var(--panel-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  position: relative;
-  overflow: auto;
-}
-
-.back-home-btn {
-  position: fixed;
-  top: 20px;
-  left: 20px;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  background: var(--card-bg);
-  border: 1px solid var(--line-box);
-  border-radius: 12px;
-  color: var(--theme-text-color-primary);
-  text-decoration: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  backdrop-filter: blur(8px);
-  transition: all 0.3s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
-    background: var(--hover-deep-color);
-  }
-
-  .iconfont {
-    font-size: 20px;
-  }
-}
-
-.register-container {
-  width: 100%;
-  max-width: 480px;
-  margin: 0 auto;
-}
-
-.register-card {
-  background: var(--card-bg);
-  border: 1px solid var(--line-box);
-  border-radius: 20px;
-  padding: 40px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: var(--btnColor);
-  }
-}
-
-.register-header {
-  text-align: center;
-  margin-bottom: 32px;
-}
-
-.register-title {
-  font-size: 28px;
-  font-weight: 600;
-  color: var(--theme-text-color-primary);
-  margin: 0 0 8px 0;
-  letter-spacing: -0.5px;
-}
-
-.register-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-color-secondary);
-  margin: 0;
-  line-height: 1.5;
-}
-
-.register-content {
-  :deep(.login-dialog) {
-    .form {
-      .block {
-        margin-bottom: 20px;
-
-        .el-input {
-          .el-input__wrapper {
-            background: var(--el-fill-color-blank);
-            border: 1px solid var(--line-box);
-            border-radius: 12px;
-            box-shadow: none;
-            transition: all 0.3s ease;
-
-            &:hover,
-            &.is-focus {
-              border-color: var(--border-active);
-              box-shadow: 0 0 0 3px rgba(91, 98, 206, 0.1);
-            }
-          }
-
-          .el-input__inner {
-            color: var(--theme-text-color-primary);
-            font-size: 16px;
-
-            &::placeholder {
-              color: var(--theme-text-color-secondary);
-              opacity: 0.7;
-            }
-          }
-
-          .el-input__prefix,
-          .el-input__suffix {
-            color: var(--theme-text-color-secondary);
-          }
-        }
-      }
-
-      .btn-row {
-        margin-top: 32px;
-
-        .el-button {
-          &[type="primary"], 
-          &.register-btn {
-            width: 100%;
-            height: 48px;
-            border-radius: 12px;
-            background: var(--btnColor);
-            border: none;
-            font-size: 16px;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 16px rgba(91, 98, 206, 0.3);
-
-            &:hover {
-              transform: translateY(-2px);
-              box-shadow: 0 8px 24px rgba(91, 98, 206, 0.4);
-            }
-
-            &:active {
-              transform: translateY(0);
-            }
-          }
-        }
-      }
-
-      .text {
-        margin-top: 24px;
-        color: var(--theme-text-color-secondary);
-
-        .el-button {
-          color: var(--text-color-primary);
-          background: transparent;
-          border: none;
-          padding: 0 8px;
-          font-size: 14px;
-          
-          &:hover {
-            background: var(--btn-bg);
-            border-radius: 6px;
-          }
-
-          &.forget {
-            color: var(--theme-text-color-secondary);
-            
-            &:hover {
-              color: var(--text-color-primary);
-            }
-          }
-        }
-      }
-
-      // 验证码输入框样式
-      .verify-code {
-        .el-row {
-          .el-col:first-child {
-            .el-input__wrapper {
-              border-top-right-radius: 0;
-              border-bottom-right-radius: 0;
-            }
-          }
-
-          .el-col:last-child {
-            .el-button {
-              height: 40px;
-              border-top-left-radius: 0;
-              border-bottom-left-radius: 0;
-              border-left: none;
-              background: var(--btn-bg);
-              color: var(--theme-text-color-primary);
-              border: 1px solid var(--line-box);
-              font-size: 14px;
-
-              &:hover {
-                background: var(--hover-deep-color);
-                color: var(--text-color-primary);
-              }
-
-              &:disabled {
-                opacity: 0.6;
-                cursor: not-allowed;
-              }
-            }
-          }
-        }
-      }
-
-      // 邀请码输入框样式
-      .invite-code {
-        .el-input__wrapper {
-          background: var(--quote-bg-color);
-          border-color: var(--border-active);
-        }
-      }
-
-      // 协议条款样式
-      .agreement {
-        display: flex;
-        align-items: flex-start;
-        margin-bottom: 20px;
-        font-size: 14px;
-        color: var(--theme-text-color-secondary);
-        line-height: 1.5;
-
-        .el-checkbox {
-          margin-right: 8px;
-          flex-shrink: 0;
-          
-          :deep(.el-checkbox__inner) {
-            border-color: var(--line-box);
-            background: var(--el-fill-color-blank);
-            
-            &:hover {
-              border-color: var(--border-active);
-            }
-          }
-
-          :deep(.el-checkbox__input.is-checked) {
-            .el-checkbox__inner {
-              background: var(--btnColor);
-              border-color: var(--border-active);
-            }
-          }
-        }
-
-        a {
-          color: var(--text-color-primary);
-          text-decoration: none;
-          
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 移动端适配
+<style scoped>
+/* 移动端适配 */
 @media (max-width: 768px) {
-  .register-page {
-    padding: 16px;
+  .min-h-screen {
+    padding: 1rem;
   }
 
-  .back-home-btn {
-    top: 16px;
-    left: 16px;
-    width: 40px;
-    height: 40px;
-
-    .iconfont {
-      font-size: 18px;
-    }
+  .fixed.top-5.left-5 {
+    top: 1rem;
+    left: 1rem;
+    width: 2.5rem;
+    height: 2.5rem;
   }
 
-  .register-card {
-    padding: 32px 24px;
-    border-radius: 16px;
-    margin-top: 60px;
+  .fixed.top-5.left-5 .iconfont {
+    font-size: 1.125rem;
   }
 
-  .register-title {
-    font-size: 24px;
+  .max-w-md {
+    margin-top: 3.75rem;
   }
 
-  .register-subtitle {
-    font-size: 15px;
+  .p-10 {
+    padding: 2rem 1.5rem;
   }
 
-  .register-content {
-    :deep(.login-dialog) {
-      .form {
-        .block {
-          margin-bottom: 18px;
+  .rounded-3xl {
+    border-radius: 1rem;
+  }
 
-          .el-input {
-            .el-input__wrapper {
-              border-radius: 10px;
-            }
+  .text-3xl {
+    font-size: 1.5rem;
+  }
 
-            .el-input__inner {
-              font-size: 16px;
-            }
-          }
-        }
-
-        .btn-row {
-          margin-top: 28px;
-
-          .el-button {
-            &[type="primary"], 
-            &.register-btn {
-              height: 46px;
-              border-radius: 10px;
-              font-size: 15px;
-            }
-          }
-        }
-
-        .text {
-          margin-top: 20px;
-          font-size: 13px;
-
-          .el-button {
-            font-size: 13px;
-            padding: 0 6px;
-          }
-        }
-
-        .verify-code {
-          .el-row {
-            .el-col:last-child {
-              .el-button {
-                height: 38px;
-                font-size: 13px;
-              }
-            }
-          }
-        }
-
-        .agreement {
-          font-size: 13px;
-        }
-      }
-    }
+  .text-base {
+    font-size: 0.875rem;
   }
 }
 
-// 小屏幕手机适配
+/* 小屏幕手机适配 */
 @media (max-width: 480px) {
-  .register-card {
-    padding: 24px 20px;
+  .p-10 {
+    padding: 1.5rem 1.25rem;
   }
 
-  .register-title {
-    font-size: 22px;
+  .text-3xl {
+    font-size: 1.25rem;
   }
 
-  .register-subtitle {
-    font-size: 14px;
-  }
-
-  .register-content {
-    :deep(.login-dialog) {
-      .form {
-        .verify-code {
-          .el-row {
-            .el-col:first-child {
-              padding-right: 0;
-            }
-            .el-col:last-child {
-              padding-left: 0;
-              margin-top: 10px;
-              
-              .el-button {
-                width: 100%;
-                border-radius: 10px;
-                border-left: 1px solid var(--line-box);
-              }
-            }
-          }
-        }
-
-        .agreement {
-          font-size: 12px;
-        }
-      }
-    }
+  .text-base {
+    font-size: 0.875rem;
   }
 }
 </style>