From 0345e29ce07682a485846f83a21c3485615c7e14 Mon Sep 17 00:00:00 2001
From: Aifeilong <2993607249@qq.com>
Date: Mon, 16 Oct 2023 10:47:48 +0800
Subject: [PATCH] fix home page

---
 src/components/home/Layout/NavBar.jsx        | 102 +++++++++--------
 src/components/home/Layout/NavBarButton.jsx  |   8 +-
 src/components/home/Layout/index.module.less | 109 +++++++++++++++++--
 3 files changed, 157 insertions(+), 62 deletions(-)

diff --git a/src/components/home/Layout/NavBar.jsx b/src/components/home/Layout/NavBar.jsx
index 23c76ea..9ebe4c8 100644
--- a/src/components/home/Layout/NavBar.jsx
+++ b/src/components/home/Layout/NavBar.jsx
@@ -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">
-      <NavBarButton
-        text={"两极协同-拉布拉多海"}
-        onClick={() => navigateHandler(1)}
-        icon={<MyIcon type={`icon-labrador`} />}
-      />
-      <NavBarButton
-        text={"两极协同-南极青藏高原"}
-        onClick={() => navigateHandler(2)}
-        icon={<MyIcon type={`icon-nanji`} />}
-      />
-      <NavBarButton
-        text={"两极协同-大西洋"}
-        onClick={() => navigateHandler(3)}
-        icon={<MyIcon type={`icon-daxiyang`} />}
-      />
-      <NavBarButton
-        text={"三级联动-青藏高原上层"}
-        onClick={() => navigateHandler(4)}
-        icon={<MyIcon type={`icon-shangcengwendu`} />}
-      />
-      <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`} />}
-      />
-    </div>
+    <Fragment>
+      <div className="nav-bar-first">
+        <NavBarButton
+          text={"数据集成和共享"}
+          onClick={() => navigateHandler(1)}
+        />
+        <NavBarButton
+          text={"随机森林方法在线计算案例"}
+          onClick={() => navigateHandler(1)}
+        />
+        <NavBarButton
+          text={"过去千年气候重建数据同化"}
+          onClick={() => navigateHandler(1)}
+        />
+        <NavBarButton
+          text={"北极海冰预报"}
+          onClick={() => navigateHandler(1)}
+        />
+        <NavBarButton
+          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>
   );
 }
 
diff --git a/src/components/home/Layout/NavBarButton.jsx b/src/components/home/Layout/NavBarButton.jsx
index cf69dc7..1138e46 100644
--- a/src/components/home/Layout/NavBarButton.jsx
+++ b/src/components/home/Layout/NavBarButton.jsx
@@ -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>
diff --git a/src/components/home/Layout/index.module.less b/src/components/home/Layout/index.module.less
index 119d8e5..11cb932 100644
--- a/src/components/home/Layout/index.module.less
+++ b/src/components/home/Layout/index.module.less
@@ -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;