登录页调整

components/pages/style/login.css

@@ -299,4 +299,203 @@
 
 .login-logo:hover::before {
   opacity: 1;
+}
+
+/* 响应式设计 - 移动端和平板端适配 */
+@media (max-width: 1024px) {
+  .main-container {
+    position: relative;
+  }
+
+  .left-panel {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  .right-panel {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background: transparent;
+    backdrop-filter: none;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 1rem;
+    padding-right: 2rem;
+  }
+
+  .auth-container {
+    /* max-width: 350px; */
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  .login-logo {
+    top: 1.5rem;
+    left: 1.5rem;
+    font-size: 1.5rem;
+  }
+
+  /* 移动端文字颜色调整 */
+  .auth-header h2 {
+    background: linear-gradient(135deg, #000, #333);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: #000;
+  }
+
+  .auth-header p {
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  .form-label {
+    color: rgba(0, 0, 0, 0.8);
+  }
+
+  .form-control {
+    color: #000;
+  }
+
+  .form-control::placeholder {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  /* 注册链接改为橙色 */
+  .auth-link {
+    color: #35daff;
+  }
+
+  .auth-link:hover {
+    color: #47dafb;
+  }
+
+  /* 其他文字元素 */
+  .text-red-500 {
+    color: #dc2626 !important;
+  }
+
+  .text-green-300 {
+    color: #86efac !important;
+  }
+
+  /* 底部提示文字 */
+  .text-center p {
+    color: rgba(0, 0, 0, 0.6) !important;
+  }
+
+  /* 忘记密码链接也改为橙色 */
+  .auth-link.small {
+    color: #35daff;
+  }
+
+  .auth-link.small:hover {
+    color: #47dafb;
+  }
+
+  /* Google登录按钮文字保持白色 */
+  button[type="button"] span {
+    color: white;
+  }
+
+  /* 分割线文字 */
+  .text-gray-400 {
+    color: rgba(0, 0, 0, 0.5) !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .right-panel {
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+  }
+
+  .auth-container {
+    max-width: 100%;
+    width: calc(100% - 2rem);
+    margin: 0;
+    padding: 2rem 1.5rem;
+  }
+
+  .login-logo {
+    top: 1rem;
+    left: 1rem;
+    font-size: 1.3rem;
+  }
+
+  .auth-header h2 {
+    font-size: 1.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .auth-container {
+    padding: 1.5rem 1rem;
+    border-radius: 1rem;
+  }
+
+  .login-logo {
+    font-size: 1.2rem;
+  }
+
+  .auth-header {
+    margin-bottom: 1.5rem;
+  }
+
+  .auth-header h2 {
+    font-size: 1.3rem;
+  }
+
+  .auth-header p {
+    font-size: 0.8rem;
+  }
+
+  .form-control {
+    padding: 0.6rem 0.8rem;
+  }
+
+  .btn-primary {
+    padding: 0.6rem;
+  }
+}
+
+/* 确保背景在所有尺寸下都能正确显示 */
+@media (max-width: 1024px) {
+  #vanta-background {
+    width: 100vw !important;
+    height: 100vh !important;
+  }
+}
+
+/* iPad横屏特殊处理 */
+@media (max-width: 1024px) and (min-width: 769px) and (orientation: landscape) {
+  .right-panel {
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 3rem;
+  }
+
+  .auth-container {
+    max-width: 380px;
+  }
+}
+
+/* 安全区域适配，适用于有刘海的设备 */
+@media (max-width: 1024px) {
+  .right-panel {
+    padding-top: max(1rem, env(safe-area-inset-top));
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+    padding-left: max(1rem, env(safe-area-inset-left));
+    padding-right: max(2rem, env(safe-area-inset-right));
+  }
+
+  .login-logo {
+    top: max(1rem, calc(env(safe-area-inset-top) + 0.5rem));
+    left: max(1rem, calc(env(safe-area-inset-left) + 0.5rem));
+  }
 }

components/vanta-halo-background.tsx

@@ -122,11 +122,11 @@ const VantaHaloBackground = memo(({ onLoaded }: VantaHaloBackgroundProps) => {
     <div
       ref={vantaRef}
       style={{
-        width: '61.8vw',
-        height: '100vh',
-        position: 'fixed',
-        top: 0,
-        left: 0,
+        width: '100%',
+        height: '100%',
+        // position: 'fixed',
+        // top: 0,
+        // left: 0,
         zIndex: -1,
         willChange: 'transform', // 优化图层合成
         transform: 'translateZ(0)', // 启用硬件加速