style(login): enhance animations and visual feedback for form interactions

- Add floating animation to background gradient elements for dynamic visual appeal
- Implement icon bounce animation on input focus for visual feedback
- Add hover and active state animations to password toggle button with scale transforms
- Create input focus animation with expanding box-shadow pulse effect
- Add icon pulse animation synchronized with input focus state
- Enhance email suggestions dropdown with slide-down entrance animation
- Update suggestion items with hover effects including left border accent and arrow indicator
- Add ripple effect animation to login button on active state
- Improve button hover state with subtle lift and enhanced shadow
- Refine suggestion dropdown styling with better spacing, shadows, and backdrop blur
- Update color values for better visual hierarchy and consistency

assets/css/mine/login.scss

@@ -18,6 +18,7 @@ page {
         height: 400rpx;
         height: 400rpx;
         background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
         background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
         pointer-events: none;
         pointer-events: none;
+        animation: float 8s ease-in-out infinite;
     }
     }
 
 
     &::after {
     &::after {
@@ -29,6 +30,19 @@ page {
         height: 300rpx;
         height: 300rpx;
         background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
         background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
         pointer-events: none;
         pointer-events: none;
+        animation: float 10s ease-in-out infinite reverse;
+    }
+
+    @keyframes float {
+        0%, 100% {
+            transform: translate(0, 0);
+        }
+        33% {
+            transform: translate(30rpx, -20rpx);
+        }
+        66% {
+            transform: translate(-20rpx, 30rpx);
+        }
     }
     }
 
 
     .logo {
     .logo {
@@ -88,7 +102,20 @@ page {
                 font-size: 38rpx;
                 font-size: 38rpx;
                 color: #94a3b8;
                 color: #94a3b8;
                 margin-right: 20rpx;
                 margin-right: 20rpx;
-                transition: color 0.25s ease;
+                transition: all 0.25s ease;
+
+                &:not(.password-toggle) {
+                    animation: iconBounce 0.5s ease;
+                }
+            }
+
+            @keyframes iconBounce {
+                0%, 100% {
+                    transform: scale(1);
+                }
+                50% {
+                    transform: scale(1.1);
+                }
             }
             }
 
 
             .uni-input {
             .uni-input {
@@ -104,9 +131,24 @@ page {
                 cursor: pointer;
                 cursor: pointer;
                 transition: all 0.25s ease;
                 transition: all 0.25s ease;
 
 
+                &:hover {
+                    color: #64748b;
+                    transform: scale(1.05);
+                }
+
                 &:active {
                 &:active {
                     color: #3b82f6;
                     color: #3b82f6;
                     transform: scale(0.9);
                     transform: scale(0.9);
+                    animation: toggleClick 0.3s ease;
+                }
+            }
+
+            @keyframes toggleClick {
+                0%, 100% {
+                    transform: scale(0.9);
+                }
+                50% {
+                    transform: scale(1.1);
                 }
                 }
             }
             }
 
 
@@ -114,9 +156,32 @@ page {
                 background: #ffffff;
                 background: #ffffff;
                 border-color: #3b82f6;
                 border-color: #3b82f6;
                 box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.12);
                 box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.12);
+                animation: inputFocus 0.4s ease;
 
 
-                .iconfont {
+                .iconfont:not(.password-toggle) {
                     color: #3b82f6;
                     color: #3b82f6;
+                    animation: iconPulse 0.6s ease;
+                }
+            }
+
+            @keyframes inputFocus {
+                0% {
+                    box-shadow: 0 0 0 0rpx rgba(59, 130, 246, 0);
+                }
+                50% {
+                    box-shadow: 0 0 0 8rpx rgba(59, 130, 246, 0.2);
+                }
+                100% {
+                    box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.12);
+                }
+            }
+
+            @keyframes iconPulse {
+                0%, 100% {
+                    transform: scale(1);
+                }
+                50% {
+                    transform: scale(1.15);
                 }
                 }
             }
             }
         }
         }
@@ -124,24 +189,62 @@ page {
         // 邮箱建议下拉列表样式
         // 邮箱建议下拉列表样式
         .email-suggestions {
         .email-suggestions {
             position: absolute;
             position: absolute;
-            top: 100%;
+            top: calc(100% + 8rpx);
             left: 0;
             left: 0;
             right: 0;
             right: 0;
             background: #ffffff;
             background: #ffffff;
             border-radius: 12rpx;
             border-radius: 12rpx;
-            box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
-            border: 2rpx solid #e2e8f0;
+            box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15), 0 4rpx 16rpx rgba(59, 130, 246, 0.1);
+            border: 1rpx solid rgba(59, 130, 246, 0.15);
             z-index: 1000;
             z-index: 1000;
-            max-height: 300rpx;
-            overflow-y: auto;
+            max-height: 240rpx;
+            overflow: hidden;
+            animation: slideDown 0.25s ease;
+            backdrop-filter: blur(8rpx);
+
+            @keyframes slideDown {
+                from {
+                    opacity: 0;
+                    transform: translateY(-12rpx);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
 
 
             .suggestion-item {
             .suggestion-item {
-                padding: 20rpx 24rpx;
-                font-size: 30rpx;
-                color: #1e293b;
+                padding: 24rpx 28rpx;
+                font-size: 28rpx;
+                color: #475569;
                 border-bottom: 1rpx solid #f1f5f9;
                 border-bottom: 1rpx solid #f1f5f9;
                 cursor: pointer;
                 cursor: pointer;
                 transition: all 0.2s ease;
                 transition: all 0.2s ease;
+                position: relative;
+                display: flex;
+                align-items: center;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    width: 0;
+                    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), transparent);
+                    transition: width 0.25s ease;
+                }
+
+                &::after {
+                    content: '→';
+                    position: absolute;
+                    right: 28rpx;
+                    font-size: 28rpx;
+                    color: #3b82f6;
+                    opacity: 0;
+                    transform: translateX(-8rpx);
+                    transition: all 0.25s ease;
+                }
 
 
                 &:last-child {
                 &:last-child {
                     border-bottom: none;
                     border-bottom: none;
@@ -149,8 +252,22 @@ page {
 
 
                 &:hover,
                 &:hover,
                 &:active {
                 &:active {
-                    background: #f8fafc;
+                    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), transparent);
                     color: #3b82f6;
                     color: #3b82f6;
+                    padding-left: 36rpx;
+
+                    &::before {
+                        width: 6rpx;
+                    }
+
+                    &::after {
+                        opacity: 1;
+                        transform: translateX(0);
+                    }
+                }
+
+                &:active {
+                    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent);
                 }
                 }
             }
             }
         }
         }
@@ -181,6 +298,25 @@ page {
                 transition: left 0.4s ease;
                 transition: left 0.4s ease;
             }
             }
 
 
+            &::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: 0;
+                height: 0;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.4);
+                transform: translate(-50%, -50%);
+                transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
+                opacity: 0;
+            }
+
+            &:hover {
+                box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.45);
+                transform: translateY(-2rpx);
+            }
+
             &:active {
             &:active {
                 transform: scale(0.98);
                 transform: scale(0.98);
                 box-shadow: 0 3rpx 12rpx rgba(37, 99, 235, 0.25);
                 box-shadow: 0 3rpx 12rpx rgba(37, 99, 235, 0.25);
@@ -190,6 +326,12 @@ page {
                 left: 100%;
                 left: 100%;
             }
             }
 
 
+            &:active::after {
+                width: 600rpx;
+                height: 600rpx;
+                opacity: 0;
+            }
+
             &.loading {
             &.loading {
                 opacity: 0.85;
                 opacity: 0.85;
                 pointer-events: none;
                 pointer-events: none;