caszl-next/app/page.tsx

import Image from "next/image";
import leftBanner from "@/app/_assets/left-banner.jpg";
import ArticleBlock from "@/app/_components/ArticleBlock";
import { register } from "swiper/element/bundle";
import AnhuiSwiper from "@/app/_components/AnhuiSwiper";
import LatestNews from "@/app/_components/LatestNews";
import FriendLinks from "@/app/_components/FriendLinks";
import BranchLifeSketch from "@/app/_components/BranchLifeSketch";
import { ReactNode } from "react";

export default async function Home() {
  return (
    <main className={"mt-1 flex justify-between bg-[#f5fafe]"}>
      <div className={"left-side w-[222px]"}>
        <Image
          src={leftBanner}
          alt={"left banner"}
          useMap={"#hotAreaMap1539"}
        />
        <map name={"hotAreaMap1539"} id={"hotAreaMap1539"}>
          <area
            title=""
            shape="rect"
            coords="0,0,220,80"
            href="http://124.16.212.11/"
            target="_blank"
          />
          <area
            title=""
            shape="rect"
            coords="34,135,105,162"
            href="http://172.16.51.4:61080/"
            target="_blank"
          />
          <area
            title=""
            shape="rect"
            coords="119,135,187,160"
            href="http://www.clas.ac.cn/"
            target="_blank"
          />
          <area
            title=""
            shape="rect"
            coords="0,168,221,247"
            href="http://119.78.100.138/"
            target="_blank"
          />
          <area
            title=""
            shape="rect"
            coords="0,253,221,332"
            href="http://159.226.28.30/cigit/"
            target="_blank"
          />
          <area
            title=""
            shape="rect"
            coords="0,334,221,421"
            href="http://www.cigit.cas.cn/"
            target="_blank"
          />
          <area
            title=""
            shape="rect"
            coords="0,425,221,512"
            href="http://tmcloud.casip.ac.cn/f"
            target="_blank"
          />
          <area
            title="热区8"
            shape="rect"
            coords="0,516,221,612"
            href="http://www.cnipa.gov.cn/"
            target="_blank"
          />
          <area
            title="热区9"
            shape="rect"
            coords="0,620,221,703"
            href="http://www.sciencenet.cn/"
            target="_blank"
          />
        </map>
        <div className={"mt-1"}>
          <BranchLifeSketch />
        </div>
      </div>
      <div className={"main-content w-[540px]"}>
        <LatestNews />
        <div className={"mt-1"}>
          <ArticleBlock
            height={221}
            title={"综合新闻"}
            category={"4"}
            linkPrefix={"/general-news"}
            showDate={true}
          ></ArticleBlock>
        </div>
        <div className={"mt-1 flex justify-between"}>
          <ArticleBlock
            width={"49.5%"}
            height={221}
            title={"科研进展"}
            category={"9"}
            linkPrefix={"/research-progress"}
          ></ArticleBlock>
          <ArticleBlock
            width={"49.5%"}
            height={221}
            title={"学术活动"}
            category={"6"}
            linkPrefix={"/academic-exchange/academic-events"}
          ></ArticleBlock>
        </div>
        <div className={"mt-1 flex justify-between"}>
          <ArticleBlock
            width={"49.5%"}
            height={221}
            title={"科技成果"}
            category={"7"}
            linkPrefix={"/technological-achievements"}
          ></ArticleBlock>
          <ArticleBlock
            width={"49.5%"}
            height={221}
            title={"媒体扫描"}
            category={"8"}
            linkPrefix={"/media-scan"}
          ></ArticleBlock>
        </div>
        <div className={"mt-1"}>
          <AnhuiSwiper />
        </div>
      </div>
      <div className={"right-side w-[225px]"}>
        <ArticleBlock
          linkPrefix={"/announcements"}
          category={"3"}
          height={275}
          title={"公告通知"}
        ></ArticleBlock>
        <div className={"mt-1"}>
          <ArticleBlock
            linkPrefix={"/recruitment"}
            category={"12"}
            height={275}
            title={"研究院招聘"}
          ></ArticleBlock>
        </div>
        <div className={"mt-1"}>
          <FriendLinks />
        </div>
      </div>
    </main>
  );
}