fix home page

src/components/home/Layout/NavBar.jsx

@@ -1,6 +1,12 @@
 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 = [
@@ -109,31 +115,35 @@ function NavBar() {
     <Fragment>
       <div className="nav-bar-first">
         <NavBarButton
-          text={"数据集成和共享"}
+          text={"三极地数据集成与开放共享"}
           onClick={() =>
             navigateHandler("http://casearthpoles.tpdc.ac.cn/zh-hans/")
           }
+          imgSrc={dataShare}
         />
         <Dropdown
           menu={{ items: itemsTwo }}
           trigger={["click"]}
           overlayClassName={styles.navDropdown}
         >
-          <NavBarButton text={"方法库集成与在线计算"} />
+          <NavBarButton text={"方法库集成与在线计算"} imgSrc={funcLibrary} />
         </Dropdown>
         <Dropdown
           menu={{ items: itemsThree }}
           trigger={["click"]}
           overlayClassName={styles.navDropdown}
         >
-          <NavBarButton text={"在线决策支持服务"} />
+          <NavBarButton
+            text={"三极信息服务与决策支持"}
+            imgSrc={onlineDecisionSupport}
+          />
         </Dropdown>
         <Dropdown
           menu={{ items: itemsFour }}
           trigger={["click"]}
           overlayClassName={styles.navDropdown}
         >
-          <NavBarButton text={"三极联动"} />
+          <NavBarButton text={"三极联动科学发现"} imgSrc={threePoles} />
         </Dropdown>
       </div>
     </Fragment>

src/components/home/Layout/NavBarButton.jsx

@@ -1,15 +1,16 @@
-function NavBarButton({ text, onClick }) {
+function NavBarButton({ text, onClick, imgSrc }) {
   return (
-    <div className="nav-bar-button" onClick={onClick}>
-      <div className="btn-table left-top" />
-      <div className="btn-table right-top" />
-      <div className="btn-table left-bottom" />
-      <div className="btn-table right-bottom" />
-      <div className="nav-bar-content">
-        <div className="nav-bar-content-text">
-          {text}
-          {/* <div>{text.split("-")[0]}</div>
-          <div>{text.split("-")[1]}</div> */}
+    <div className="xx">
+      <div className="nav-bar-button" onClick={onClick}>
+        <div className="btn-table left-top" />
+        <div className="btn-table right-top" />
+        <div className="btn-table left-bottom" />
+        <div className="btn-table right-bottom" />
+        <div className="nav-bar-content">
+          <div className="nav-bar-content-img">
+            <img src={imgSrc} alt="img" />
+          </div>
+          <div className="nav-bar-content-text">{text}</div>
         </div>
       </div>
     </div>

src/components/home/Layout/index.module.less

@@ -20,47 +20,51 @@
   .nav-bar-first {
     width: 100%;
     max-width: 1200px;
-    margin: 250px auto 0;
+    margin: 50px auto 0;
     color: #fff;
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-items: center;
+    grid-gap: 20px;
 
     .nav-bar-button {
+      width: 450px;
       position: relative;
-      cursor: pointer;
-      @btn-table-color: #04fbfd;
+      @btn-table-color: #04fdfdbd;
       transition: all 0.3s ease;
       text-align: center;
+      user-select: none;
+      cursor: pointer;
 
       .btn-table {
-        width: 20px;
-        height: 10px;
+        width: 20%;
+        height: 20%;
         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;
+          border-left: 2px solid @btn-table-color;
+          border-top: 2px solid @btn-table-color;
         }
         &.left-bottom {
           left: 0;
           bottom: 0;
-          border-left: 1px solid @btn-table-color;
-          border-bottom: 1px solid @btn-table-color;
+          border-left: 2px solid @btn-table-color;
+          border-bottom: 2px solid @btn-table-color;
         }
         &.right-top {
           right: 0;
           top: 0;
-          border-right: 1px solid @btn-table-color;
-          border-top: 1px solid @btn-table-color;
+          border-right: 2px solid @btn-table-color;
+          border-top: 2px solid @btn-table-color;
         }
         &.right-bottom {
           right: 0;
           bottom: 0;
-          border-right: 1px solid @btn-table-color;
-          border-bottom: 1px solid @btn-table-color;
+          border-right: 2px solid @btn-table-color;
+          border-bottom: 2px solid @btn-table-color;
         }
       }
 
@@ -68,16 +72,25 @@
         padding: 32px 20px;
         font-size: 32px;
         font-weight: 600;
-        color: @btn-table-color;
+        color: #04fdfd;
         background-color: #081633;
         height: 100%;
         display: flex;
-        justify-content: space-evenly;
+        flex-direction: column;
         align-items: center;
         gap: 8px;
 
-        .anticon {
-          font-size: 40px;
+        .nav-bar-content-img {
+          // border-radius: 999px;
+          overflow: hidden;
+          width: 100%;
+          height: 200px;
+
+          img {
+            width: 100%;
+            height: 100%;
+            // object-fit: cover;
+          }
         }
 
         .nav-bar-content-text {
@@ -91,8 +104,37 @@
       &:hover {
         // transform: translate(0, -4px);
 
+        .btn-table {
+          border-color: #04fdfd;
+
+          &.left-top {
+            height: 10%;
+            width: 30%;
+          }
+
+          &.left-bottom {
+            height: 30%;
+            width: 10%;
+          }
+
+          &.right-top {
+            height: 30%;
+            width: 10%;
+          }
+
+          &.right-bottom {
+            height: 10%;
+            width: 30%;
+          }
+        }
+
         .nav-bar-content {
           background-color: #112f6a;
+          .nav-bar-content-img {
+            img {
+              transform: scale(1.1);
+            }
+          }
         }
       }
     }