sync

src/pages/freshman/join.astro

@@ -6,5 +6,6 @@ import ReactChild from "./react/join.tsx";
 <BaseLayout title="加入我们">
   <main>
     <ReactChild client:load />
+    <img src="_assets/nbtca.gif" />
   </main>
 </BaseLayout>

src/pages/freshman/list.astro

@@ -1,10 +1,10 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro"
-import ReactChild from "./react/list.tsx";
+// import ReactChild from "./react/list.tsx";
 ---
 
-<BaseLayout title="加入我们">
+<BaseLayout title="列表">
   <main>
-    <ReactChild client:load />
+    <!-- <ReactChild client:load /> -->
   </main>
 </BaseLayout>

src/pages/freshman/react/join.tsx

@@ -11,6 +11,7 @@ export default function JoinForm() {
     phone: "",
     qq: "",
     email: "",
+    memo: "",
   })
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target
@@ -33,10 +34,23 @@ export default function JoinForm() {
     }
   }
   return (
-    <div>
+    <div
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        display: "flex",
+      }}
+    >
       <form>
         <Card>
-          <CardBody>
+          <CardBody
+            style={{
+              maxWidth: "700px",
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: "1rem",
+            }}
+          >
             <Input
               name="name"
               placeholder="姓名"
@@ -86,8 +100,21 @@ export default function JoinForm() {
               onChange={handleChange}
               required
             />
+            <Input
+              name="memo"
+              placeholder="备注"
+              value={formData.memo}
+              onChange={handleChange}
+              required
+            />
           </CardBody>
-          <CardFooter>
+          <CardFooter
+            style={{
+              justifyContent: "center",
+              alignItems: "center",
+              display: "flex",
+            }}
+          >
             <Button onClick={handleSubmit}>提交表单</Button>
           </CardFooter>
         </Card>