登录页修改

src/views/login.vue

@@ -195,6 +195,7 @@ export default {
   max-width: 480px;
   padding: 0 20px;
   z-index: 1;
+  animation: slideInRight 0.8s ease-out;
 }
 
 .login-header {
@@ -222,37 +223,52 @@ export default {
 
 .login-form {
   border-radius: 16px;
-  background: #ffffff;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
   width: 100%;
   padding: 40px 35px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  border: 2px solid #ffffff;
+  animation: fadeInUp 1s ease-out 0.3s both;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: shimmer 2s ease-in-out 1.5s;
+  }
   
   .el-input {
     height: 48px;
     margin: 8px 0;
     position: relative;
     
-    .el-input__inner {
+      .el-input__inner {
-      height: 48px;
+        height: 48px;
-      border-radius: 8px;
+        border-radius: 8px;
-      border: 1px solid #e1e5e9;
+        border: 1px solid #e1e5e9;
-      padding-left: 45px;
+        padding-left: 45px;
-      font-size: 15px;
+        font-size: 15px;
-      transition: all 0.3s ease;
+        transition: all 0.3s ease;
-      background: #f9fafb;
-      
-      &:focus {
-        border-color: #1E6BFF;
-        box-shadow: 0 0 0 3px rgba(30, 107, 255, 0.1);
         background: #ffffff;
+        
+        &:focus {
+          border-color: #1E6BFF;
+          box-shadow: 0 0 0 3px rgba(30, 107, 255, 0.1);
+          background: #ffffff;
+        }
+        
+        &:hover {
+          border-color: #c0c4cc;
+          background: #ffffff;
+        }
       }
-      
-      &:hover {
-        border-color: #c0c4cc;
-        background: #ffffff;
-      }
-    }
     
     .el-input__prefix {
       position: absolute;
@@ -351,10 +367,12 @@ export default {
   cursor: pointer;
   transition: all 0.3s ease;
   flex-shrink: 0;
+  background: #ffffff;
   
   &:hover {
     border-color: #1E6BFF;
     transform: scale(1.02);
+    background: #ffffff;
   }
   
   img {
@@ -370,6 +388,72 @@ export default {
   height: 48px;
 }
 
+/* 动画效果 */
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* 输入框聚焦动画 */
+.login-form .el-input__inner:focus {
+  animation: inputFocus 0.3s ease-out;
+}
+
+@keyframes inputFocus {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* 按钮悬停动画 */
+.login-form .el-button:hover {
+  animation: buttonHover 0.3s ease-out;
+}
+
+@keyframes buttonHover {
+  0% {
+    transform: translateY(-1px);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
+  100% {
+    transform: translateY(-1px);
+  }
+}
+
 // 响应式优化
 @media (max-width: 768px) {
   .login {