修改注册界面

src/views/LoginView.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="login-container">
+    <!-- 背景动画 -->
+    <div class="bg-animation">
+      <div v-for="n in 10" :key="n" class="circle-container">
+        <div class="circle"></div>
+      </div>
+    </div>
+    
     <div class="login-content">
       <div class="login-header">
         <div class="logo-wrapper">
           <img src="@/assets/logo.svg" alt="Logo" class="logo">
         </div>
         <h2>智慧养老服务平台</h2>
+        <p class="subtitle">让生活更智慧，让关爱更便捷</p>
       </div>
       
       <el-card class="login-card">
@@ -27,6 +35,7 @@
               v-model="loginForm.username"
               placeholder="请输入用户名"
               :prefix-icon="User"
+              class="custom-input"
             />
           </el-form-item>
           
@@ -37,12 +46,13 @@
               placeholder="请输入密码"
               :prefix-icon="Lock"
               show-password
+              class="custom-input"
             />
           </el-form-item>
           
           <div class="remember-forgot">
             <el-checkbox v-model="rememberMe">记住我</el-checkbox>
-            <el-link type="primary" @click="forgotPassword">忘记密码？</el-link>
+            <el-link type="primary" @click="forgotPassword" :underline="false">忘记密码？</el-link>
           </div>
           
           <el-button
@@ -51,15 +61,19 @@
             :loading="loading"
             @click="handleLogin"
           >
-            登录
+            {{ loading ? '登录中...' : '登录' }}
           </el-button>
           
           <div class="register-link">
             还没有账号？
-            <router-link to="/register">立即注册</router-link>
+            <router-link to="/register" class="register-btn">立即注册</router-link>
           </div>
         </el-form>
       </el-card>
+      
+      <div class="footer">
+        <p>© 2024 智慧养老服务平台 All Rights Reserved</p>
+      </div>
     </div>
   </div>
 </template>
@@ -135,28 +149,77 @@ const forgotPassword = () => {
   justify-content: center;
   align-items: center;
   background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 背景动画 */
+.bg-animation {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.circle-container {
+  position: absolute;
+  transform: translateY(10%);
+}
+
+.circle {
+  width: 100px;
+  height: 100px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  position: absolute;
+  animation: float 8s infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translateY(-20px) scale(1.1);
+    opacity: 0.3;
+  }
 }
 
 .login-content {
   width: 100%;
-  max-width: 400px;
+  max-width: 440px;
   padding: 20px;
+  position: relative;
+  z-index: 1;
 }
 
 .login-header {
   text-align: center;
   margin-bottom: 30px;
-  color: white;
 }
 
 .logo-wrapper {
-  width: 80px;
+  width: 90px;
-  height: 80px;
+  height: 90px;
-  margin: 0 auto 16px;
+  margin: 0 auto 20px;
-  padding: 10px;
+  padding: 12px;
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.15);
   border-radius: 50%;
   backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+  }
 }
 
 .logo {
@@ -168,24 +231,58 @@ const forgotPassword = () => {
 
 .login-header h2 {
   color: white;
-  font-size: 24px;
+  font-size: 28px;
   margin: 0;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.subtitle {
+  color: rgba(255, 255, 255, 0.9);
+  margin: 10px 0 0;
+  font-size: 16px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
 .login-card {
-  border-radius: 8px;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
 }
 
 .card-header {
   text-align: center;
-  font-size: 18px;
+  font-size: 20px;
-  font-weight: bold;
+  font-weight: 600;
+  color: #1890ff;
+  padding: 10px 0;
+}
+
+.custom-input :deep(.el-input__wrapper) {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  padding: 8px 15px;
+}
+
+.custom-input :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.1);
 }
 
 .login-button {
   width: 100%;
-  margin-top: 20px;
+  margin-top: 24px;
+  height: 44px;
+  font-size: 16px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
+  border: none;
+  transition: all 0.3s;
+}
+
+.login-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
 }
 
 .remember-forgot {
@@ -193,11 +290,68 @@ const forgotPassword = () => {
   justify-content: space-between;
   align-items: center;
   margin: 0 2px;
+  color: #666;
 }
 
 .register-link {
-  margin-top: 16px;
+  margin-top: 20px;
   text-align: center;
   font-size: 14px;
+  color: #666;
+}
+
+.register-btn {
+  color: #1890ff;
+  text-decoration: none;
+  margin-left: 4px;
+  font-weight: 500;
+}
+
+.register-btn:hover {
+  text-decoration: underline;
+}
+
+.footer {
+  text-align: center;
+  margin-top: 30px;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+}
+
+/* 生成10个不同位置和大小的圆 */
+.circle-container:nth-child(1) { left: 10%; animation-delay: 0s; }
+.circle-container:nth-child(2) { left: 20%; animation-delay: 2s; }
+.circle-container:nth-child(3) { left: 30%; animation-delay: 4s; }
+.circle-container:nth-child(4) { left: 40%; animation-delay: 6s; }
+.circle-container:nth-child(5) { left: 50%; animation-delay: 8s; }
+.circle-container:nth-child(6) { left: 60%; animation-delay: 10s; }
+.circle-container:nth-child(7) { left: 70%; animation-delay: 12s; }
+.circle-container:nth-child(8) { left: 80%; animation-delay: 14s; }
+.circle-container:nth-child(9) { left: 90%; animation-delay: 16s; }
+.circle-container:nth-child(10) { left: 95%; animation-delay: 18s; }
+
+.circle-container:nth-child(odd) .circle {
+  width: 150px;
+  height: 150px;
+}
+
+/* 响应式适配 */
+@media (max-width: 480px) {
+  .login-content {
+    padding: 15px;
+  }
+  
+  .login-header h2 {
+    font-size: 24px;
+  }
+  
+  .subtitle {
+    font-size: 14px;
+  }
+  
+  .logo-wrapper {
+    width: 80px;
+    height: 80px;
+  }
 }
 </style>