update

src/index.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 body {
-  background-color: #eae4de;
+  letter-spacing: 0.1rem;
 }

src/pages/home/index.tsx

@@ -1,9 +1,25 @@
+import { useState } from "react";
+
 export default function Home() {
+  let [hiddenDrawer, setHiddenDrawer] = useState(true);
   return (
-    <div className={"grid grid-cols-2 grid-rows-2"}>
+    <div className={""}>
       <Logo />
 
-      <Menu />
+      <Menu
+        onClickLogin={() => {
+          setHiddenDrawer(!hiddenDrawer);
+        }}
+      />
+
+      <Drawer
+        hidden={hiddenDrawer}
+        setHidden={() => {
+          setHiddenDrawer(true);
+        }}
+      />
+
+      <FileButton openLogin={() => setHiddenDrawer(false)} />
     </div>
   );
 }
@@ -12,7 +28,7 @@ function Logo() {
   return (
     <div
       className={
-        "m-4 box-border w-16 cursor-pointer select-none border border-4 border-red-900 bg-white text-center shadow-lg"
+        "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
@@ -20,27 +36,69 @@ function Logo() {
   );
 }
 
-function Menu() {
+function Menu(props: { onClickLogin: () => void }) {
   return (
-    <div
+    <ul
       className={
-        "top-2 right-2 flex origin-center items-center justify-end gap-2 pr-5 align-middle underline underline-offset-2"
+        "absolute right-8 top-0 m-4 flex justify-end gap-4 rounded-xl bg-base-200 px-12 py-4 shadow"
       }
     >
-      <div className={"cursor-pointer bg-green-300"}>定价</div>
-      <div className={"cursor-pointer bg-green-300"}>注册/登录</div>
-      <input type="date" className="mt-1 block w-full" />
-      <select className="form-select px-4 py-3">
-        <optgroup label={"xxx"}>
-          <title>xxx</title>
-          <option>中文</option>
-          <option>英文</option>
-        </optgroup>
-        <optgroup label={"www"}>
-          <option>中文</option>
-          <option>英文</option>
-        </optgroup>
-      </select>
+      <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>
   );
 }