upp

code/src/App.tsx

@@ -135,7 +135,21 @@ export default function App() {
       {searchShow ? <Z1Search colseFu={() => setSearchShow(false)} /> : null}
 
       {/* 点击顶部的村落出来的选择卡 */}
-      <B1Card isShow={!tab2Show} closeFu={() => setTab2Show(false)} />
+      <B1Card
+        isShow={!tab2Show}
+        closeFu={() => setTab2Show(false)}
+        clickCardFu={(id) => {
+          // 从卡片里面点击 进入村落
+          setTab2Show(false);
+          history.push(`/village?id=${id}`);
+          // if (routerAc.includes("#/village")) {
+          //   // 已经在村落路由页面了，直接隐藏
+          //   setTab2Show(false);
+          // } else {
+          //   history.push(`/village?id=${id}`);
+          // }
+        }}
+      />
 
       {/* antd 轻提示 ---兼容360浏览器 */}
       <MessageCom />

code/src/assets/styles/base.css

@@ -165,7 +165,7 @@ textarea {
 }
 .mySorrl::-webkit-scrollbar {
   /*滚动条整体样式*/
-  width: 5px;
+  width: 3px;
   /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
 }

code/src/assets/styles/base.less

@@ -214,7 +214,7 @@ textarea {
 // 滚动条
 .mySorrl::-webkit-scrollbar {
   /*滚动条整体样式*/
-  width: 5px;
+  width: 3px;
   /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
 }

code/src/pages/B1Card/index.module.scss

@@ -1,4 +1,4 @@
-.B1Card{
+.B1Card {
   position: absolute;
   top: 0;
   left: 0;
@@ -7,7 +7,81 @@
   z-index: 9;
   background-color: rgba(28, 21, 12, 0.5);
   backdrop-filter: blur(10px);
-  :global{
-    
+  padding-top: 140px;
+  padding-bottom: 80px;
+
+  :global {
+    .B1Cmain {
+      width: 100%;
+      height: 100%;
+      padding: 0 20px;
+      display: flex;
+
+      .B1CmainRow {
+        width: 20%;
+        height: 100%;
+        padding: 0 20px;
+
+        .B1Ci1 {
+          cursor: pointer;
+          width: 100%;
+          height: 100%;
+          background-size: 100% 100%;
+          transition: all .3s;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+
+          .B1Ciname {
+            color: #fff;
+            font-size: 28px;
+            // font-weight: 700;
+            letter-spacing: 4px;
+          }
+
+          .B1Cihover {
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            padding: 24% 10%;
+            transition: all .3s;
+            display: flex;
+            align-items: flex-end;
+
+            &>div {
+              width: 100%;
+              height: 40%;
+              overflow-y: auto;
+              color: #fff;
+
+              letter-spacing: 4px;
+              font-size: 14px;
+              line-height: 24px;
+              text-indent: 2em;
+
+            }
+          }
+
+          &:hover {
+            .B1Cihover {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+
+    .B1Cclose {
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+      background-image: url('../../assets/img/icon_cancel.png');
+      background-size: 100% 100%;
+      margin: 15px auto 0;
+    }
   }
 }

code/src/pages/B1Card/index.tsx

@@ -1,20 +1,61 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
+import { baseUrl } from "@/index";
 
 type Props = {
   isShow: boolean;
   closeFu: () => void;
+  clickCardFu: (id: number) => void;
 };
 
-function B1Card({ isShow, closeFu }: Props) {
+function B1Card({ isShow, closeFu, clickCardFu }: Props) {
+  const data = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.village
+  );
+
+  // 控制显示和隐藏
+  const [acId, setAcId] = useState(0);
+
+  const [pathAcId, setPathAcId] = useState(0);
 
-  const data =useSelector((state:RootState)=>state.A0Layout.dataAll)
+  useEffect(() => {
+    if (!isShow) {
+      const temp = window.location.hash;
+      if (temp.includes("#/village?id=")) {
+        const url = temp.split("?id=")[1];
+        setPathAcId(Number(url));
+      }
+    } else setPathAcId(0);
+  }, [isShow]);
 
   return (
-    <div className={styles.B1Card} hidden={isShow} onClick={closeFu}>
-      <h1>B1Card</h1>
+    <div className={styles.B1Card} hidden={isShow}>
+      <div className="B1Cmain">
+        {data.map((v) => (
+          <div className="B1CmainRow" key={v.id}>
+            <div
+              className="B1Ci1"
+              onClick={() => clickCardFu(v.id)}
+              onMouseEnter={() => setAcId(v.id)}
+              onMouseLeave={() => setAcId(0)}
+              style={{
+                backgroundImage: `url(${baseUrl}/B1Village/pc/${v.id}${
+                  acId === v.id || pathAcId === v.id ? "Ac" : ""
+                }.png)`,
+              }}
+            >
+              <p className="B1Ciname">{v.name}</p>
+              {/* 鼠标移入的效果 */}
+              <div className="B1Cihover">
+                <div className="mySorrl">{v.infoTxt}</div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="B1Cclose" onClick={closeFu}></div>
     </div>
   );
 }

code/src/types/api/layot.d.ts

@@ -34,4 +34,12 @@ export type DataAllType = {
       };
     }[];
   };
+  village: {
+    id: number;
+    name: string;
+    infoTxt: string;
+    info: {
+      id: number;
+    }[];
+  }[];
 };