166 lines
3.9 KiB
JavaScript
166 lines
3.9 KiB
JavaScript
import { Fragment } from "react";
|
|
import { Dropdown } from "antd";
|
|
import NavBarButton from "./NavBarButton";
|
|
import funcLibrary from "@/assets/方法库.png";
|
|
// import funcLibrary from "@/assets/方法库2.png";
|
|
import threePoles from "@/assets/三极联动.png";
|
|
import dataShare from "@/assets/数据共享.jpg";
|
|
import onlineDecisionSupport from "@/assets/在线决策支持.png";
|
|
// import onlineDecisionSupport from "@/assets/在线决策支持2.png";
|
|
import styles from "./index.module.less";
|
|
|
|
const itemsTwo = [
|
|
{
|
|
key: "1",
|
|
label: (
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="http://casearthpoles.tpdc.ac.cn/zh-hans/data/analyze/list"
|
|
>
|
|
简介
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
key: "2",
|
|
label: (
|
|
<a target="_blank" rel="noopener noreferrer" href="/random_forest">
|
|
随机森林方法在线计算案例
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
key: "3",
|
|
label: (
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="/show/map/climateReconDataAssim"
|
|
>
|
|
过去千年气候重建数据同化
|
|
</a>
|
|
),
|
|
},
|
|
];
|
|
const itemsThree = [
|
|
{
|
|
key: "1",
|
|
label: (
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="http://project.lasg.ac.cn/FGOALS_f2-S2S/index.php?Var=Arctic-sea-ice"
|
|
>
|
|
北极海冰预报
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
key: "2",
|
|
label: (
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="http://arcticroute.tpdc.ac.cn/"
|
|
>
|
|
北极航线智能规划
|
|
</a>
|
|
),
|
|
},
|
|
];
|
|
const itemsFour = [
|
|
{
|
|
key: "1",
|
|
label: (
|
|
<a target="_blank" rel="noopener noreferrer" href="/show/map/1">
|
|
两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
key: "2",
|
|
label: (
|
|
<a target="_blank" rel="noopener noreferrer" href="/show/map/2">
|
|
两极协同—南极涛动有效调节青藏高原降水和加热
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
key: "3",
|
|
label: (
|
|
<a target="_blank" rel="noopener noreferrer" href="/show/map/3">
|
|
两极协同—连接南极和北极的热带大西洋经向模的媒介作用
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
key: "4",
|
|
label: (
|
|
<a target="_blank" rel="noopener noreferrer" href="/show/map/4">
|
|
三极联动影响青藏高原上层温度
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
key: "5",
|
|
label: (
|
|
<a target="_blank" rel="noopener noreferrer" href="/show/map/5">
|
|
三极联动影响东亚夏季风
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
key: "6",
|
|
label: (
|
|
<a target="_blank" rel="noopener noreferrer" href="/show/map/6">
|
|
三极冰盖/冰川表面冰雪冻融对比关联与科学认知
|
|
</a>
|
|
),
|
|
},
|
|
];
|
|
|
|
function NavBar() {
|
|
const navigateHandler = (url) => window.open(url, "_blank");
|
|
|
|
return (
|
|
<Fragment>
|
|
<div className="nav-bar-first">
|
|
<NavBarButton
|
|
text={"三极地数据集成与开放共享"}
|
|
onClick={() =>
|
|
navigateHandler("http://casearthpoles.tpdc.ac.cn/zh-hans/")
|
|
}
|
|
imgSrc={dataShare}
|
|
/>
|
|
<Dropdown
|
|
menu={{ items: itemsTwo }}
|
|
trigger={["click"]}
|
|
overlayClassName={styles.navDropdown}
|
|
>
|
|
<NavBarButton text={"方法库集成与在线计算"} imgSrc={funcLibrary} />
|
|
</Dropdown>
|
|
<Dropdown
|
|
menu={{ items: itemsThree }}
|
|
trigger={["click"]}
|
|
overlayClassName={styles.navDropdown}
|
|
>
|
|
<NavBarButton
|
|
text={"三极信息服务与决策支持"}
|
|
imgSrc={onlineDecisionSupport}
|
|
/>
|
|
</Dropdown>
|
|
<Dropdown
|
|
menu={{ items: itemsFour }}
|
|
trigger={["click"]}
|
|
overlayClassName={styles.navDropdown}
|
|
>
|
|
<NavBarButton text={"三极联动科学发现"} imgSrc={threePoles} />
|
|
</Dropdown>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
export default NavBar;
|