76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
// 档案
|
|
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 { Outlet } 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: 16 }}>
|
|
<Space style={{ "--gap": "16px" }}>
|
|
{listShow ? (
|
|
<AlignHorizontalCenterTwo onClick={() => setListShow(false)} fill="#333" />
|
|
) : (
|
|
<ListView onClick={() => setListShow(true)} fill="#333" />
|
|
)}
|
|
|
|
<AddOne onClick={() => onLink("/translate/addArchives?flag=add")} fill="#333" />
|
|
<More fill="#333" />
|
|
</Space>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<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
|
|
onClick={() => onLink("/translate/addArchives?flag=edit")}
|
|
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>
|
|
</>
|
|
)}
|
|
<Outlet /> {/* 添加这行 */}
|
|
</MainLayout>
|
|
);
|
|
}
|
|
|
|
export default Index;
|