upp

code/src/App.tsx

@@ -8,7 +8,6 @@ import MessageCom from "./components/Message";
 import NotFound from "./components/NotFound";
 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";
@@ -19,6 +18,7 @@ const C2ArchitecInfo = React.lazy(() => import("./pages/C2ArchitecInfo"));
 const D1Build = React.lazy(() => import("./pages/D1Build"));
 const D2BuildInfo = React.lazy(() => import("./pages/D2BuildInfo"));
 const Z2Scene = React.lazy(() => import("./pages/Z2Scene"));
+const Z1Search = React.lazy(() => import("./pages/Z1Search"));
 
 const tabList = [
   { id: 1, name: "总览", pathUrl: "/", path: "/" },
@@ -30,9 +30,6 @@ const tabList = [
 export default function App() {
   const [routerAc, setRouterAc] = useState("/");
 
-  // 搜查页面
-  const [searchShow, setSearchShow] = useState(false);
-
   // 顶部tab的展开和收起
   const homeTabShow = useSelector(
     (state: RootState) => state.A0Layout.homeTabShow
@@ -92,7 +89,8 @@ export default function App() {
             <Route path="/buildInfo" component={D2BuildInfo} />
             {/* 场景 */}
             <Route path="/scene" component={Z2Scene} />
-
+            {/* 搜索 */}
+            <Route path="/search" component={Z1Search} />
             {/* 找不到页面 */}
             <Route path="*" component={NotFound} />
           </Switch>
@@ -136,7 +134,13 @@ export default function App() {
 
         {/* 搜索按钮 */}
 
-        <div className="APPtabSearch" onClick={() => setSearchShow(true)}></div>
+        <div
+          className="APPtabSearch"
+          onClick={() => {
+            setTab2Show(false);
+            history.push("/search");
+          }}
+        ></div>
 
         {/* 展开和收起按钮 */}
         <div
@@ -156,9 +160,6 @@ export default function App() {
         hidden={homeTabShow}
       ></div>
 
-      {/* 点击搜索出来的页面 */}
-      {searchShow ? <Z1Search colseFu={() => setSearchShow(false)} /> : null}
-
       {/* 点击顶部的村落出来的选择卡 */}
       <B1Card
         isShow={!tab2Show}

code/src/assets/styles/base.css

@@ -79,7 +79,7 @@ textarea {
 }
 #root #App .Apptab {
   position: absolute;
-  z-index: 10;
+  z-index: 32;
   left: 50%;
   transform: translateX(-50%);
   top: 20px;
@@ -145,7 +145,7 @@ textarea {
   position: absolute;
   top: 40px;
   right: 40px;
-  z-index: 10;
+  z-index: 32;
   width: 40px;
   height: 40px;
   border-radius: 50%;

code/src/assets/styles/base.less

@@ -98,7 +98,7 @@ textarea {
 
     .Apptab {
       position: absolute;
-      z-index: 10;
+      z-index: 32;
       left: 50%;
       transform: translateX(-50%);
       top: 20px;
@@ -173,7 +173,7 @@ textarea {
       position: absolute;
       top: 40px;
       right: 40px;
-      z-index: 10;
+      z-index: 32;
       width: 40px;
       height: 40px;
       border-radius: 50%;

code/src/components/SpinLoding/index.module.scss

@@ -3,7 +3,7 @@
   z-index: 9999;
   width: 100%;
   height: 100%;
-  // background-color: #fff;
+  background-color: #eae6e1;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -4,7 +4,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 9;
+  z-index: 31;
   background-color: rgba(28, 21, 12, 0.5);
   backdrop-filter: blur(10px);
   padding-top: 140px;

code/src/pages/C1Architec/index.tsx

@@ -8,6 +8,7 @@ import downimg from "@/assets/img/tab3/icon_down.png";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 import history from "@/utils/history";
+import { getTitFu, setTitFu } from "@/utils/storage";
 
 function C1Architec() {
   const location = useLocation();
@@ -74,16 +75,29 @@ function C1Architec() {
       dom3.scrollLeft = num3 + e.deltaY * 0.2;
     };
 
-    window.setTimeout(() => {
-      setIsTit(false);
-    }, 2000);
+    const arr = getTitFu();
+    if (arr && arr.includes("3")) {
+      // 已经显示过了
+    } else {
+      arr.push("3");
+      setTitFu(arr);
+
+      setIsTit(true);
+      window.setTimeout(() => {
+        setIsTit(false);
+      }, 2000);
+
+      return () => {
+        setIsTit(false);
+      };
+    }
   }, []);
 
   // 输入移入的
   const [hoverId, setHoverId] = useState("");
 
   // 滚轮提示
-  const [isTit, setIsTit] = useState(true);
+  const [isTit, setIsTit] = useState(false);
 
   return (
     <div

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

@@ -3,6 +3,30 @@
   overflow: hidden;
 
   :global {
+
+    .C1tit {
+      pointer-events: none;
+      transition: all .3s;
+      position: absolute;
+      z-index: 30;
+      left: 50%;
+      top: 140px;
+      transform: translateX(-50%);
+      text-align: center;
+
+      &>p {
+        margin-top: 20px;
+        color: var(--themeColor);
+        font-size: 18px;
+        letter-spacing: 2px;
+        font-weight: 700;
+      }
+    }
+
+    .C1titHide {
+      opacity: 0;
+    }
+
     .D1main {
       width: 100%;
       height: 100%;
@@ -101,16 +125,21 @@
           &:hover {
             overflow: visible;
             background: linear-gradient(rgba(252, 233, 172, .4), rgba(252, 233, 172, .2), rgba(252, 233, 172, 0));
+
             .D1RowName {
               top: 140px;
+              font-weight: 700;
             }
-            .D1img1{
+
+            .D1img1 {
               opacity: 0;
             }
-            .D1img2{
+
+            .D1img2 {
               opacity: 1;
             }
-            .D1RowTxt{
+
+            .D1RowTxt {
               opacity: 1;
             }
           }
@@ -118,14 +147,6 @@
 
         }
 
-        .D1main1RowA {
-
-          // overflow: visible;
-          &::before {
-            // opacity: 0;
-          }
-        }
-
         .D1main1RowLast {
           display: inline-block;
           width: 300px;

code/src/pages/D1Build/index.tsx

@@ -1,35 +1,60 @@
 import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
-import { useLocation } from "react-router-dom";
 import { baseUrl } from "@/index";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 import classNames from "classnames";
+import history from "@/utils/history";
+import { getTitFu, setTitFu } from "@/utils/storage";
 
 function D1Build() {
   const data = useSelector((state: RootState) => state.A0Layout.dataAll.build);
 
+  // 滚轮提示
+  const [isTit, setIsTit] = useState(false);
+
   useEffect(() => {
     const dom = document.querySelector(".D1main") as HTMLDivElement;
     dom.onwheel = (e) => {
       const num = dom.scrollLeft;
       dom.scrollLeft = num + e.deltaY * 0.4;
     };
+
+    const arr = getTitFu();
+    if (arr && arr.includes("4")) {
+      // 已经显示过了
+    } else {
+      arr.push("4");
+      setTitFu(arr);
+
+      setIsTit(true);
+      window.setTimeout(() => {
+        setIsTit(false);
+      }, 2000);
+
+      return () => {
+        setIsTit(false);
+      };
+    }
   }, []);
   return (
     <div
       className={styles.D1Build}
       style={{ backgroundImage: `url(${baseUrl}/C1Architec/pc/bg.jpg)` }}
     >
+      {/* 滚轮提示 */}
+      <div className={classNames("C1tit", isTit ? "" : "C1titHide")}>
+        <img src={`${baseUrl}/C1Architec/pc/img_tip.png`} alt="" />
+        <p>滑动滚轮即可查看更多构件</p>
+      </div>
+
       <div className="D1main">
         <div className="D1main1">
-          {data.map((v, i) => (
+          {data.map((v) => (
             <div
-              className={classNames(
-                "D1main1Row",
-                i >= data.length - 1 ? "D1main1RowA" : ""
-              )}
+              className={classNames("D1main1Row")}
               key={v.id}
+              onClick={() => history.push(`/buildInfo?id=${v.id}`)}
             >
               <img
                 className="D1img1"

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

@@ -4,7 +4,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 12;
+  z-index: 50;
   background-size: 100% 100%;
 
   :global {
@@ -18,5 +18,140 @@
       background-image: url('../../assets/img/back.png');
       background-size: 100% 100%;
     }
+
+    .Z1main {
+      width: 750px;
+      height: 700px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+
+      &>h1 {
+        margin-bottom: 6px;
+        letter-spacing: 4px;
+      }
+    }
+
+    .Z1input {
+      margin: 30px 0;
+      width: 100%;
+      height: 60px;
+      background-image: url('../../assets/img/tab4/label_search.png');
+      background-size: 100% 100%;
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 0 10px 0 30px;
+
+      .Z1input1 {
+        width: 30px;
+        height: 30px;
+        background-image: url('../../assets/img/tab4/icon_search_black.png');
+        background-size: 100% 100%;
+      }
+
+      .Z1input2 {
+        width: calc(100% - 150px);
+        height: 40px;
+        margin: 0 10px;
+
+        input {
+          font-size: 20px;
+          width: 100%;
+          height: 100%;
+          line-height: 40px;
+          background-color: transparent;
+          border: none;
+          outline: none;
+          color: var(--themeColor);
+        }
+      }
+
+      .Z1input3 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background-image: url('../../assets/img/tab4/btn_search.png');
+        background-size: 100% 100%;
+        color: #fff;
+        text-align: center;
+        line-height: 40px;
+        font-size: 18px;
+      }
+    }
+
+    .Z1list {
+      overflow-y: auto;
+      padding: 10px 20px;
+      height: 515px;
+      width: 100%;
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--themeColor);
+      }
+
+      .Z1listRow {
+        cursor: pointer;
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 18px;
+        border-bottom: 1px dashed #B19C7D;
+        letter-spacing: 2px;
+
+        &>div {
+          display: flex;
+          height: 100%;
+          align-items: center;
+
+          .Z1listRow1_1 {
+            margin-left: 20px;
+            border: 1px solid #B19C7D;
+            background-color: var(--themeColor2);
+            color: #B19C7D;
+            border-radius: 2px;
+            font-size: 14px;
+            padding: 4px 10px;
+          }
+
+          .Z1listRow2_1 {
+            font-size: 28px;
+          }
+        }
+
+        .Z1listRow2 {
+          font-size: 16px;
+          transition: all .3s;
+          padding-right: 20px;
+          color: #B19C7D;
+        }
+
+        &:hover {
+          .Z1listRow2 {
+            color: black;
+
+          }
+        }
+      }
+
+      .Z1listRowHide {
+        opacity: 0;
+      }
+    }
+
+    .Z1listNone{
+      height: 515px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-bottom: 80px;
+      letter-spacing: 4px;
+      font-size: 24px;
+    }
+
   }
 }

code/src/pages/Z1Search/index.tsx

@@ -1,19 +1,141 @@
-import React from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { baseUrl } from "@/index";
+import { SwapRightOutlined } from "@ant-design/icons";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { InfoRowType, SearchType } from "@/types";
+import history from "@/utils/history";
+import classNames from "classnames";
 
-type Props = {
-  colseFu: () => void;
-};
+function Z1Search() {
+  const [value, setValue] = useState("");
+
+  // 获取所有数据
+  const { village, architec, build } = useSelector(
+    (state: RootState) => state.A0Layout.dataAll
+  );
+
+  const dataAllRef = useRef([] as SearchType[]);
+
+  const [data, setData] = useState([
+    { id: "0", type: "建筑", name: "", path: "", txt: "" },
+  ] as SearchType[]);
+
+  useEffect(() => {
+    const arr = [] as SearchType[];
+    village.forEach((v) => {
+      arr.push({
+        id: v.id + "村落",
+        name: v.name,
+        txt: v.infoTxt,
+        type: "村落",
+        path: `/village?id=${v.id}`,
+      });
+    });
+
+    for (const k in architec) {
+      const arr2 = Reflect.get(architec, k).data as InfoRowType[];
+      arr2.forEach((v) => {
+        arr.push({
+          id: v.id + "建筑",
+          name: v.name,
+          txt: v.txt,
+          type: "建筑",
+          path: `architecInfo?id=${v.id}`,
+        });
+      });
+    }
+
+    build.forEach((v) => {
+      arr.push({
+        id: v.id + "构件",
+        name: v.name,
+        txt: v.txt,
+        type: "构件",
+        path: `/buildInfo?id=${v.id}`,
+      });
+    });
+
+    dataAllRef.current = arr;
+    setData(arr);
+  }, [architec, build, village]);
+
+  // 点击搜索
+  const btnSearchFu = useCallback(() => {
+    const dom = document.querySelector(".Z1list") as HTMLDivElement;
+    if (dom) dom.scrollTop = 0;
+
+    if (value) {
+      const arr = dataAllRef.current.filter(
+        (v) => v.name.includes(value) || v.txt.includes(value)
+      );
+      setData(arr);
+    } else setData(dataAllRef.current);
+  }, [value]);
 
-function Z1Search({ colseFu }: Props) {
   return (
     <div
       className={styles.Z1Search}
       style={{ backgroundImage: `url(${baseUrl}/Z1Search/pc/bg.jpg)` }}
     >
       {/* 返回 */}
-      <div className="Z1back" onClick={colseFu}></div>
+      <div className="Z1back" onClick={() => history.go(-1)}></div>
+
+      {/* 主体 */}
+      <div className="Z1main">
+        <h1>近代建筑一张图</h1>
+        <p>开平碉楼与村落及赤坎旧镇</p>
+        {/* 搜索框 */}
+        <div
+          className="Z1input"
+          onKeyUp={(e) => {
+            if (e.key === "Enter") btnSearchFu();
+          }}
+        >
+          <div className="Z1input1"></div>
+          <div className="Z1input2">
+            <input
+              placeholder="请输入关键词..."
+              maxLength={30}
+              value={value}
+              onChange={(e) => setValue(e.target.value.trim())}
+            />
+          </div>
+          <div className="Z1input3" onClick={btnSearchFu}>
+            搜 索
+          </div>
+        </div>
+
+        {/* 信息展示 */}
+        {data.length ? (
+          <div className="Z1list mySorrl">
+            {data.map((v) => (
+              <div
+                className={classNames(
+                  "Z1listRow",
+                  v.id === "0" ? "Z1listRowHide" : ""
+                )}
+                key={v.id}
+                onClick={() => history.push(v.path)}
+              >
+                <div className="Z1listRow1">
+                  <div>{v.name}</div>
+                  <div className="Z1listRow1_1">{v.type}</div>
+                </div>
+                <div className="Z1listRow2">
+                  <div>查看</div>
+                  <div className="Z1listRow2_1">
+                    <SwapRightOutlined rev={undefined} />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="Z1listNone">没有找到相关信息...</div>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 .Z2Scene {
   position: relative;
-  z-index: 30;
+  z-index: 40;
   overflow: hidden;
   
   :global {

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

@@ -64,3 +64,11 @@ export type InfoRowType = {
     loc: "横" | "竖";
   };
 };
+
+export type SearchType = {
+  id: string;
+  name: string;
+  type: "村落" | "建筑" | "构件";
+  path: string;
+  txt:string
+};

code/src/utils/storage.ts

@@ -0,0 +1,16 @@
+// 本地存储-临时会话
+const TOKEN_KEY = "KP_WEB_TIT";
+
+/**
+ * 获取临时存储信息
+ */
+export const getTitFu = (): string[] => {
+  return JSON.parse(sessionStorage.getItem(TOKEN_KEY) || "[]");
+};
+
+/**
+ *  信息存入缓存
+ */
+export const setTitFu = (val: string[]): void => {
+  sessionStorage.setItem(TOKEN_KEY, JSON.stringify(val));
+};