75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
|
"use client"
|
||
|
|
import Image from "next/image"
|
||
|
|
import { LoginForm } from "./components/login-form"
|
||
|
|
import { LeftPanel } from "./components/LeftPanel"
|
||
|
|
import { IconButton } from "@/components/ui/button";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
|
||
|
|
const scrollBg = "/images/login/v1/bg.png";
|
||
|
|
const images = [
|
||
|
|
"/images/login/v1/1.png",
|
||
|
|
"/images/login/v1/2.png",
|
||
|
|
"/images/login/v1/3.png",
|
||
|
|
"/images/login/v1/4.png",
|
||
|
|
"/images/login/v1/5.png",
|
||
|
|
"/images/login/v1/6.png",
|
||
|
|
"/images/login/v1/7.png",
|
||
|
|
"/images/login/v1/8.png",
|
||
|
|
"/images/login/v1/9.png",
|
||
|
|
"/images/login/v1/10.png",
|
||
|
|
]
|
||
|
|
|
||
|
|
export default function LoginPage() {
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
router.replace('/');
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-screen w-screen overflow-hidden">
|
||
|
|
{/* 左侧 - 滚动背景 + 图片轮播 (桌面端显示) */}
|
||
|
|
<div className="hidden lg:block lg:w-1/2 relative">
|
||
|
|
<LeftPanel scrollBg={scrollBg} images={images} />
|
||
|
|
|
||
|
|
{/* 关闭按钮 - 桌面端 */}
|
||
|
|
<IconButton
|
||
|
|
iconfont="icon-close"
|
||
|
|
variant="tertiaryDark"
|
||
|
|
size="large"
|
||
|
|
className="absolute top-6 left-6 z-20"
|
||
|
|
onClick={handleClose}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 右侧 - 登录表单 */}
|
||
|
|
<div className="w-full lg:w-1/2 flex flex-col items-center justify-center px-6 sm:px-12 relative">
|
||
|
|
{/* 关闭按钮 - 移动端 */}
|
||
|
|
<IconButton
|
||
|
|
iconfont="icon-close"
|
||
|
|
variant="tertiary"
|
||
|
|
size="large"
|
||
|
|
className="absolute top-4 right-4 lg:hidden z-20"
|
||
|
|
onClick={handleClose}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Logo */}
|
||
|
|
<div className="w-[120px] h-[48px] sm:w-[160px] sm:h-[64px] relative mb-8 sm:mb-12">
|
||
|
|
<Image
|
||
|
|
src="/logo.svg"
|
||
|
|
alt="Crush Level"
|
||
|
|
fill
|
||
|
|
className="object-contain"
|
||
|
|
priority
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 登录表单 */}
|
||
|
|
<div className="w-full max-w-[340px]">
|
||
|
|
<LoginForm />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|