105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
import { useState } from "react";
|
|
|
|
export default function Home() {
|
|
let [hiddenDrawer, setHiddenDrawer] = useState(true);
|
|
return (
|
|
<div className={""}>
|
|
<Logo />
|
|
|
|
<Menu
|
|
onClickLogin={() => {
|
|
setHiddenDrawer(!hiddenDrawer);
|
|
}}
|
|
/>
|
|
|
|
<Drawer
|
|
hidden={hiddenDrawer}
|
|
setHidden={() => {
|
|
setHiddenDrawer(true);
|
|
}}
|
|
/>
|
|
|
|
<FileButton openLogin={() => setHiddenDrawer(false)} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Logo() {
|
|
return (
|
|
<div
|
|
className={
|
|
"absolute top-0 m-4 box-border h-8 w-24 cursor-pointer select-none border border-4 border-base-300 bg-white bg-base-100 text-center shadow-lg"
|
|
}
|
|
>
|
|
LOGO
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Menu(props: { onClickLogin: () => void }) {
|
|
return (
|
|
<ul
|
|
className={
|
|
"absolute right-8 top-0 m-4 flex justify-end gap-4 rounded-xl bg-base-200 px-12 py-4 shadow"
|
|
}
|
|
>
|
|
<li
|
|
className={"cursor-pointer select-none text-base hover:text-base-300"}
|
|
>
|
|
定价
|
|
</li>
|
|
<li
|
|
className={"cursor-pointer select-none text-base hover:text-base-300"}
|
|
onClick={props.onClickLogin}
|
|
>
|
|
注册/登录
|
|
</li>
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
function FileButton(props: { openLogin: () => void }) {
|
|
return (
|
|
<div className={"btn-group absolute top-1/2 left-1/4"}>
|
|
<button className={"btn"}>上传文件</button>
|
|
<button className={"btn"} onClick={props.openLogin}>
|
|
口令下载
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Drawer(props: { hidden: boolean; setHidden: () => void }) {
|
|
return props.hidden ? (
|
|
<></>
|
|
) : (
|
|
<div className={"absolute right-0 z-0 h-screen w-screen transition-all"}>
|
|
<div
|
|
className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"}
|
|
onClick={() => {
|
|
console.log("hidden");
|
|
props.setHidden();
|
|
}}
|
|
></div>
|
|
<div
|
|
className={
|
|
"absolute right-0 z-50 h-screen w-1/3 origin-right animate-fade-in-down bg-base-100"
|
|
}
|
|
>
|
|
<div className={"container mt-20 flex items-center justify-center"}>
|
|
<LoginContent />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LoginContent() {
|
|
return (
|
|
<div className={"flex bg-base-100"}>
|
|
<label className={"label mr-5 text-base-content"}>手机号</label>
|
|
<input className={"input input-primary"} />
|
|
</div>
|
|
);
|
|
}
|