feat: into

projects/translate-h5/src/view/home/archives/index.tsx

@@ -1,11 +1,67 @@
 // 档案
 import MainLayout from "@/layout/main/mainLayout";
 import styles from "./index.module.less";
+import archivesPicturePng from "@/assets/translate/archives-picture.png";
+import archivesDataPng from "@/assets/translate/archives-data.png";
+import archivesEquipmentPng from "@/assets/translate/archives-equipment.png";
+import archivesSwPng from "@/assets/translate/archives-sw.png";
+import archivesFunctionPng from "@/assets/translate/archives-function.png";
+import archivesBottomPng from "@/assets/translate/archives-bottom.png";
+import archivesCardPng from "@/assets/translate/archives-card.png";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
+import { Image, Space } from "antd-mobile";
+import { ListView, More, AddOne, AlignHorizontalCenterTwo } from "@icon-park/react";
 function Index() {
+  const [listShow, setListShow] = useState(false);
+
+  const navigate = useNavigate();
+
+  const onLink = (link: string) => {
+    // safeNavigate(link);
+    navigate(link);
+  };
+
+  const right = (
+    <div style={{ fontSize: 24 }}>
+      <Space style={{ "--gap": "16px" }}>
+        {listShow ? (
+          <AlignHorizontalCenterTwo onClick={() => setListShow(false)} fill="#333" />
+        ) : (
+          <ListView onClick={() => setListShow(true)} fill="#333" />
+        )}
+
+        <AddOne onClick={() => onLink("/translate/archives/add")} fill="#333" />
+        <More fill="#333" />
+      </Space>
+    </div>
+  );
+
   return (
-    <MainLayout isShowNavBar={true} title="宠物档案">
-      <div className={styles.archives}>档案</div>
+    <MainLayout navBarRight={right} isShowNavBar={true} title="宠物档案">
+      {listShow ? (
+        <div className={styles.archives}>
+          <Image className={styles.img} src={archivesCardPng}></Image>
+          <Image className={styles.img} src={archivesCardPng}></Image>
+          <Image className={styles.img} src={archivesCardPng}></Image>
+          <Image className={styles.img} src={archivesCardPng}></Image>
+        </div>
+      ) : (
+        <>
+          <div className={styles.bottom}>
+            <Image src={archivesBottomPng}></Image>
+          </div>
+          <div className={styles.archives}>
+            <Image src={archivesPicturePng}></Image>
+            <Image className={styles.img} src={archivesDataPng}></Image>
+            <Image className={styles.img} src={archivesEquipmentPng}></Image>
+            <Image className={styles.img} src={archivesSwPng}></Image>
+            <Image className={styles.img} src={archivesFunctionPng}></Image>
+            <div className={styles["placeholder-bottom"]}></div>
+          </div>
+        </>
+      )}
     </MainLayout>
   );
 }