fix home page
This commit is contained in:
parent
aa5d0ccf0f
commit
0345e29ce0
@ -1,15 +1,10 @@
|
||||
import { useCallback } from "react";
|
||||
import { Fragment, useCallback } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { createFromIconfontCN } from "@ant-design/icons";
|
||||
import NavBarButton from "./NavBarButton";
|
||||
|
||||
function NavBar() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const MyIcon = createFromIconfontCN({
|
||||
scriptUrl: "//at.alicdn.com/t/c/font_4281629_4lq551rfhki.js",
|
||||
});
|
||||
|
||||
const navigateHandler = useCallback(
|
||||
(type) => {
|
||||
navigate(`/map/${type}`, { replace: true });
|
||||
@ -18,48 +13,59 @@ function NavBar() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="nav-bar">
|
||||
<Fragment>
|
||||
<div className="nav-bar-first">
|
||||
<NavBarButton
|
||||
text={"两极协同-拉布拉多海"}
|
||||
text={"数据集成和共享"}
|
||||
onClick={() => navigateHandler(1)}
|
||||
icon={<MyIcon type={`icon-labrador`} />}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"两极协同-南极青藏高原"}
|
||||
onClick={() => navigateHandler(2)}
|
||||
icon={<MyIcon type={`icon-nanji`} />}
|
||||
text={"随机森林方法在线计算案例"}
|
||||
onClick={() => navigateHandler(1)}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"两极协同-大西洋"}
|
||||
onClick={() => navigateHandler(3)}
|
||||
icon={<MyIcon type={`icon-daxiyang`} />}
|
||||
text={"过去千年气候重建数据同化"}
|
||||
onClick={() => navigateHandler(1)}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"三级联动-青藏高原上层"}
|
||||
onClick={() => navigateHandler(4)}
|
||||
icon={<MyIcon type={`icon-shangcengwendu`} />}
|
||||
text={"北极海冰预报"}
|
||||
onClick={() => navigateHandler(1)}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"三级联动-东亚夏季风"}
|
||||
onClick={() => navigateHandler(5)}
|
||||
icon={<MyIcon type={`icon-dongyaxiajifeng`} />}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"三级联动-东亚夏季风"}
|
||||
onClick={() => navigateHandler(5)}
|
||||
icon={<MyIcon type={`icon-dongyaxiajifeng`} />}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"三级联动-东亚夏季风"}
|
||||
onClick={() => navigateHandler(5)}
|
||||
icon={<MyIcon type={`icon-dongyaxiajifeng`} />}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"三级联动-东亚夏季风"}
|
||||
onClick={() => navigateHandler(5)}
|
||||
icon={<MyIcon type={`icon-dongyaxiajifeng`} />}
|
||||
text={"北极航线智能规划"}
|
||||
onClick={() => navigateHandler(1)}
|
||||
/>
|
||||
</div>
|
||||
<div className="nav-bar-second">
|
||||
<div className="nav-bar-title">三极联动</div>
|
||||
<div className="nav-bar-container">
|
||||
<NavBarButton
|
||||
text={"两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温"}
|
||||
onClick={() => navigateHandler(1)}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"两极协同—南极涛动有效调节青藏高原降水和加热"}
|
||||
onClick={() => navigateHandler(2)}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"两极协同—连接南极和北极的热带大西洋经向模的媒介作用"}
|
||||
onClick={() => navigateHandler(3)}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"三极联动影响青藏高原上层温度"}
|
||||
onClick={() => navigateHandler(4)}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"三极联动影响东亚夏季风"}
|
||||
onClick={() => navigateHandler(5)}
|
||||
/>
|
||||
<NavBarButton
|
||||
text={"三极冰盖/冰川表面冰雪冻融对比关联与科学认知"}
|
||||
onClick={() => navigateHandler(6)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
function NavBarButton({ text, onClick, icon }) {
|
||||
function NavBarButton({ text, onClick }) {
|
||||
return (
|
||||
<div className="nav-bar-button" onClick={onClick}>
|
||||
<div className="btn-table left-top" />
|
||||
@ -6,10 +6,10 @@ function NavBarButton({ text, onClick, icon }) {
|
||||
<div className="btn-table left-bottom" />
|
||||
<div className="btn-table right-bottom" />
|
||||
<div className="nav-bar-content">
|
||||
<div className="nav-bar-content-icon">{icon}</div>
|
||||
<div className="nav-bar-content-text">
|
||||
<div>{text.split("-")[0]}</div>
|
||||
<div>{text.split("-")[1]}</div>
|
||||
{text}
|
||||
{/* <div>{text.split("-")[0]}</div>
|
||||
<div>{text.split("-")[1]}</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,27 +17,116 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
.nav-bar-first {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 200px auto;
|
||||
margin: 100px auto 0;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
// grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
|
||||
grid-auto-flow: row dense;
|
||||
gap: 32px 0;
|
||||
// justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-bar-button {
|
||||
// border: 1px solid #4096ff;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@btn-table-color: #04fbfd;
|
||||
transition: all 0.3s ease;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
max-width: 248px;
|
||||
max-width: 200px;
|
||||
|
||||
.btn-table {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
|
||||
&.left-top {
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-left: 1px solid @btn-table-color;
|
||||
border-top: 1px solid @btn-table-color;
|
||||
}
|
||||
&.left-bottom {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-left: 1px solid @btn-table-color;
|
||||
border-bottom: 1px solid @btn-table-color;
|
||||
}
|
||||
&.right-top {
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-right: 1px solid @btn-table-color;
|
||||
border-top: 1px solid @btn-table-color;
|
||||
}
|
||||
&.right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-right: 1px solid @btn-table-color;
|
||||
border-bottom: 1px solid @btn-table-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar-content {
|
||||
padding: 20px;
|
||||
font-size: 20px;
|
||||
color: @btn-table-color;
|
||||
background-color: #081633;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.anticon {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.nav-bar-content-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translate(0, -4px);
|
||||
|
||||
.nav-bar-content {
|
||||
background-color: #112f6a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar-second {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0px auto;
|
||||
color: #fff;
|
||||
|
||||
.nav-bar-title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: #04fbfd;
|
||||
padding: 30px 0;
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
.nav-bar-container {
|
||||
display: grid;
|
||||
grid-template-columns: 350px auto 350px;
|
||||
justify-content: space-between;
|
||||
gap: 32px 0;
|
||||
}
|
||||
|
||||
.nav-bar-button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@btn-table-color: #04fbfd;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
max-width: 350px;
|
||||
|
||||
.btn-table {
|
||||
width: 20px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user