upp

code/src/App.tsx

@@ -10,16 +10,18 @@ import { baseUrl } from ".";
 import classNames from "classnames";
 import Z1Search from "./pages/Z1Search";
 import B1Card from "./pages/B1Card";
+import { useSelector } from "react-redux";
+import store, { RootState } from "./store";
 const A1Home = React.lazy(() => import("./pages/A1Home"));
 const B1Village = React.lazy(() => import("./pages/B1Village"));
 const C1Architec = React.lazy(() => import("./pages/C1Architec"));
 const D1Build = React.lazy(() => import("./pages/D1Build"));
 
 const tabList = [
-  { id: 1, name: "总览", path: "/" },
-  { id: 2, name: "村落", path: "/village" },
-  { id: 3, name: "建筑", path: "/architec" },
-  { id: 4, name: "构件", path: "/build" },
+  { id: 1, name: "总览", pathUrl: "/", path: "/" },
+  { id: 2, name: "村落", pathUrl: "/village", path: "/village" },
+  { id: 3, name: "建筑", pathUrl: "/architec?id=1", path: "/architec" },
+  { id: 4, name: "构件", pathUrl: "/build?id=1", path: "/build" },
 ];
 
 export default function App() {
@@ -29,7 +31,9 @@ export default function App() {
   const [searchShow, setSearchShow] = useState(false);
 
   // 顶部tab的展开和收起
-  const [tabShow, setTabShow] = useState(true);
+  const homeTabShow = useSelector(
+    (state: RootState) => state.A0Layout.homeTabShow
+  );
 
   // 视频的播放
   const [videoShow, setVideoShow] = useState(false);
@@ -51,9 +55,9 @@ export default function App() {
   }, []);
 
   // 顶部tab的切换
-  const cutTab = useCallback((id: number, path: string) => {
+  const cutTab = useCallback((id: number, pathUrl: string) => {
     if (id !== 2) {
-      history.push(path);
+      history.push(pathUrl);
       setTab2Show(false);
     } else setTab2Show(true);
   }, []);
@@ -97,11 +101,11 @@ export default function App() {
       <div
         className="Apptab"
         style={{ backgroundImage: `url(${baseUrl}/A1Home/pc/tab.png)` }}
-        hidden={!tabShow}
+        hidden={!homeTabShow}
       >
         {tabList.map((v) => (
           <div
-            onClick={() => cutTab(v.id, v.path)}
+            onClick={() => cutTab(v.id, v.pathUrl)}
             className={classNames(
               "ApptabRow",
               (routerAc === "#/" && v.id === 1 && !tab2Show) ||
@@ -121,14 +125,21 @@ export default function App() {
         <div className="APPtabSearch" onClick={() => setSearchShow(true)}></div>
 
         {/* 展开和收起按钮 */}
-        <div className="APPtabShow" onClick={() => setTabShow(false)}></div>
+        <div
+          className="APPtabShow"
+          onClick={() =>
+            store.dispatch({ type: "layout/setHomeTab", payload: false })
+          }
+        ></div>
       </div>
 
       {/* 展开按钮 */}
       <div
         className="APPtabHide"
-        onClick={() => setTabShow(true)}
-        hidden={tabShow}
+        onClick={() =>
+          store.dispatch({ type: "layout/setHomeTab", payload: true })
+        }
+        hidden={homeTabShow}
       ></div>
 
       {/* 点击搜索出来的页面 */}
@@ -142,12 +153,6 @@ export default function App() {
           // 从卡片里面点击 进入村落
           setTab2Show(false);
           history.push(`/village?id=${id}`);
-          // if (routerAc.includes("#/village")) {
-          //   // 已经在村落路由页面了，直接隐藏
-          //   setTab2Show(false);
-          // } else {
-          //   history.push(`/village?id=${id}`);
-          // }
         }}
       />
 

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

@@ -1,5 +1,22 @@
 .B1Village{
+  position: relative;
   :global{
-    
+    .B1toTab3{
+      position: absolute;
+      bottom: 90px;
+      right: 90px;
+      cursor: pointer;
+      width: 104px;
+      height: 111px;
+      background-image: url('../../assets/img/tab2/btn_active.png');
+      background-size: 100% 100%;
+      color: var(--themeColor2);
+      font-size: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      letter-spacing: 2px;
+      text-shadow: 1px 1px black;
+    }
   }
 }

code/src/pages/B1Village/index.tsx

@@ -1,12 +1,42 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
- function B1Village() {
-  
+import { useLocation } from "react-router-dom";
+import history from "@/utils/history";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+function B1Village() {
+  const location = useLocation();
+
+  const [uId, setUid] = useState("");
+
+  const architec = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.architec
+  );
+
+ 
+
+  const [data,setData] =useState({
+    id:Number
+  })
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.search);
+    const param = query.get("id");
+    console.log("村落页面获取id", param);
+    setUid(param!);
+  }, [location.search]);
+
   return (
     <div className={styles.B1Village}>
-      <h1>B1Village</h1>
+      {/* 右下角的详情按钮 */}
+      <div
+        className="B1toTab3"
+        onClick={() => history.push(`/architec?id=${uId}`)}
+      >
+        详情
+      </div>
     </div>
-  )
+  );
 }
 
 const MemoB1Village = React.memo(B1Village);

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

@@ -1,4 +1,5 @@
 .C1Architec{
+  background-size: 100% 100%;
   :global{
     
   }

code/src/pages/C1Architec/index.tsx

@@ -1,12 +1,29 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
- function C1Architec() {
-  
+import { useLocation } from "react-router-dom";
+import { baseUrl } from "@/index";
+function C1Architec() {
+  const location = useLocation();
+
+  const [uId, setUid] = useState("");
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.search);
+    const param = query.get("id");
+    console.log("建筑页面获取id", param);
+    setUid(param!);
+  }, [location.search]);
   return (
-    <div className={styles.C1Architec}>
-      <h1>C1Architec</h1>
+    <div
+      className={styles.C1Architec}
+      style={{ backgroundImage: `url(${baseUrl}/C1Architec/pc/bg.jpg)` }}
+    >
+
+      {/* 村落标识 */}
+      
+
     </div>
-  )
+  );
 }
 
 const MemoC1Architec = React.memo(C1Architec);

code/src/pages/D1Build/index.tsx

@@ -1,12 +1,22 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
- function D1Build() {
-  
+import { useLocation } from "react-router-dom";
+function D1Build() {
+  const location = useLocation();
+
+  const [uId, setUid] = useState("");
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.search);
+    const param = query.get("id");
+    console.log("构件页面获取id", param);
+    setUid(param!);
+  }, [location.search]);
   return (
     <div className={styles.D1Build}>
       <h1>D1Build</h1>
     </div>
-  )
+  );
 }
 
 const MemoD1Build = React.memo(D1Build);

code/src/store/reducer/layout.ts

@@ -12,12 +12,16 @@ const initState = {
 
   // 所有数据
   dataAll: {} as DataAllType,
+
+  // 顶部tab的展开和收起
+  homeTabShow: true,
 };
 
 // 定义 action 类型
 type LayoutActionType =
   | { type: "layout/message"; payload: MessageType }
-  | { type: "layout/setDataAll"; payload: DataAllType };
+  | { type: "layout/setDataAll"; payload: DataAllType }
+  | { type: "layout/setHomeTab"; payload: boolean };
 
 // 频道 reducer
 export default function layoutReducer(
@@ -32,7 +36,9 @@ export default function layoutReducer(
     // 设置所有数据
     case "layout/setDataAll":
       return { ...state, dataAll: action.payload };
-
+    // 顶部tab的展开和收起
+    case "layout/setHomeTab":
+      return { ...state, homeTabShow: action.payload };
     default:
       return state;
   }

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

@@ -34,6 +34,7 @@ export type DataAllType = {
       };
     }[];
   };
+  // 待完善
   village: {
     id: number;
     name: string;
@@ -42,4 +43,11 @@ export type DataAllType = {
       id: number;
     }[];
   }[];
+  // 待完善
+  architec: {
+    [string]: {
+      name: string;
+      data: never[];
+    };
+  };
 };