首页页面

2025-03-11 14:57:23 +08:00
parent 9b36ab40f2
commit 5e3ade9aba
38 changed files with 1092 additions and 182 deletions
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -0,0 +1,102 @@
+import {ReactNode} from 'react'
+
+export type LoginPageProps = {}
+
+export default function LoginPage(props: LoginPageProps) {
+  return (
+    
+    <div className="flex h-screen w-screen">
+      {/* 左侧背景图 */}
+      <div className="relative flex-1 hidden lg:block">
+        <img 
+          src="/images/login-bg.jpg" 
+          alt="登录背景"
+          className="object-cover w-full h-full"
+        />
+        <div className="absolute inset-0 bg-black/30">
+          <div className="flex items-center justify-center h-full">
+            <h1 className="text-4xl font-bold text-white">
+              欢迎回来
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      {/* 右侧登录表单 */}
+      <div className="w-[600px] flex items-center justify-center p-8">
+        <div className="w-full space-y-8">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold text-gray-900">
+              登录您的账户
+            </h2>
+            <p className="mt-2 text-sm text-gray-600">
+              或者{' '}
+              <a href="#" className="font-medium text-blue-600 hover:text-blue-500">
+                开始14天免费试用
+              </a>
+            </p>
+          </div>
+
+          <form className="mt-8 space-y-6">
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                  邮箱地址
+                </label>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                  密码
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  autoComplete="current-password"
+                  required
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <input
+                  id="remember-me"
+                  name="remember-me"
+                  type="checkbox"
+                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                />
+                <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
+                  记住我
+                </label>
+              </div>
+
+              <div className="text-sm">
+                <a href="#" className="font-medium text-blue-600 hover:text-blue-500">
+                  忘记密码？
+                </a>
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              登录
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}