74 lines
3.6 KiB
TypeScript
74 lines
3.6 KiB
TypeScript
import { Button, FloatButton, Form, Input } from "antd"
|
|
import { useNavigate } from "react-router-dom"
|
|
export default function Login() {
|
|
const navigate = useNavigate()
|
|
// 修正函数名拼写错误 (handeLogin → handleLogin)
|
|
const handleLogin = () => {
|
|
navigate("/path")
|
|
}
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-slate-900">
|
|
<FloatButton></FloatButton>
|
|
<div className="bg-gradient-to-r from-sky-500 to-cyan-600 w-full">
|
|
<div className="mx-auto px-4 max-w-3xl rounded-b-xl shadow-lg shadow-cyan-500/20">
|
|
<h1 className="text-center text-2xl md:text-3xl font-bold p-4 md:p-6 bg-gradient-to-r from-sky-400 to-cyan-400 bg-clip-text text-transparent">
|
|
系统登录
|
|
</h1>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div className="flex-1 ">
|
|
{/* 添加响应式边距和最大宽度 */}
|
|
<div className="relative mx-4 md:mx-[50vh] mt-16 md:mt-[20vh] max-w-[90%] md:max-w-full bg-gray-800 rounded-xl shadow-[0_0_30px_rgba(14,165,235,0.2)] border border-sky-400/50 py-6">
|
|
<Form
|
|
className="space-y-6 px-4"
|
|
onFinish={handleLogin}
|
|
layout="vertical"
|
|
>
|
|
{/* 添加响应式字体大小 */}
|
|
<h2 className="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-cyan-300 text-xl md:text-3xl font-bold text-center mb-8">
|
|
请登录
|
|
</h2>
|
|
|
|
<div className="space-y-8 flex-1">
|
|
<Form.Item
|
|
label="用户名"
|
|
name="username"
|
|
className="font-bold text-lg text-sky-200"
|
|
labelCol={{ style: { color: '#bae6fd' } }}
|
|
>
|
|
<Input
|
|
className="w-full bg-gray-700/50 border-sky-400 hover:border-sky-300 focus:border-sky-500 rounded-lg text-gray-100 placeholder-gray-400 h-12 text-lg px-4" // 移除max-width限制
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label="密码"
|
|
name="password"
|
|
className="font-bold text-lg text-sky-200"
|
|
labelCol={{ style: { color: '#bae6fd' } }}
|
|
>
|
|
<Input.Password
|
|
className="w-full bg-gray-700/50 border-sky-400 hover:border-sky-300 focus:border-sky-500 rounded-lg [&>input]:text-gray-100 h-12 text-lg px-4" // 移除max-width限制
|
|
/>
|
|
</Form.Item>
|
|
</div>
|
|
|
|
<div className="flex justify-center mt-8">
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
className="w-full md:w-2/3 bg-gradient-to-r from-sky-400 to-cyan-400 hover:from-sky-500 hover:to-cyan-500 h-12 text-lg font-bold rounded-xl transition-all duration-300 shadow-lg shadow-sky-500/20"
|
|
>
|
|
登录
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |