upp

code/src/App.tsx

@@ -36,7 +36,7 @@ export default function App() {
   );
 
   // 视频的播放
-  const [videoShow, setVideoShow] = useState(false);
+  const [videoShow, setVideoShow] = useState(true);
 
   // 是否需要显示视频
   const [isVideoShow, setIsVideoShow] = useState(false);

code/src/assets/styles/base.css

@@ -72,7 +72,6 @@ textarea {
   height: 100%;
   z-index: 20;
   overflow: hidden;
-  background-color: #e7dfdb;
 }
 #root #App .Appvideo video {
   width: 100%;

code/src/assets/styles/base.less

@@ -88,7 +88,7 @@ textarea {
       height: 100%;
       z-index: 20;
       overflow: hidden;
-      background-color: #e7dfdb;
+      // background-color: black;
 
       video {
         width: 100%;

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

@@ -120,8 +120,8 @@
 
       .A1back {
         position: absolute;
-        top: 30px;
-        left: 30px;
+        bottom: 50px;
+        left: 50px;
         cursor: pointer;
         width: 60px;
         height: 60px;

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

@@ -1,6 +1,191 @@
-.C1Architec{
+.C1Architec {
   background-size: 100% 100%;
-  :global{
-    
+  position: relative;
+  overflow: hidden;
+
+  :global {
+    .C1bs {
+      position: absolute;
+      z-index: 3;
+      left: 40px;
+      top: 40%;
+      transform: translateY(-50%);
+      background-image: url('../../assets/img/tab3//btn_cunluo.png');
+      background-size: 100% 100%;
+      width: 80px;
+      min-height: 200px;
+      text-align: center;
+      padding: 24px 20px;
+
+      &>img {
+        cursor: pointer;
+        display: inline-block;
+        padding: 10px 0;
+      }
+
+      .C1noneImg {
+        opacity: .5;
+        pointer-events: none;
+      }
+
+      &>div {
+        height: calc(100% - 120px);
+        display: flex;
+        flex-direction: column;
+        font-size: 20px;
+        color: var(--themeColor2);
+        text-shadow: 1px 1px black;
+        padding: 0 10px;
+      }
+    }
+
+    .C1main {
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+      overflow-x: auto;
+
+      &::-webkit-scrollbar {
+        width: 0px;
+        height: 0px;
+      }
+
+      .C1mainBox {
+        height: 100%;
+        width: auto;
+        white-space: nowrap;
+        display: inline-block;
+
+        .C1row {
+          opacity: 0;
+          transition: all .3s;
+          display: inline-block;
+          min-width: 400px;
+          width: 25vw;
+          height: 100%;
+          background: linear-gradient(rgba(45, 40, 37, 0), rgba(45, 40, 37, 1));
+          padding-top: 160px;
+          position: relative;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1px;
+            height: 100%;
+            background: linear-gradient(rgba(252, 233, 172, 0), rgba(252, 233, 172, 1), rgba(252, 233, 172, 0));
+          }
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 1px;
+            height: 100%;
+            background: linear-gradient(rgba(252, 233, 172, 0), rgba(252, 233, 172, 1), rgba(252, 233, 172, 0));
+          }
+
+          &>h1 {
+            font-weight: 400;
+            text-align: center;
+            font-size: 22px;
+            letter-spacing: 2px;
+            color: var(--themeColor2);
+          }
+
+          .C1line {
+            width: 80%;
+            margin: 6px auto;
+            height: 16px;
+            background-image: url('../../assets/img/line.png');
+            background-size: 100% 100%;
+          }
+
+          &>img {
+            width: 100%;
+            height: calc(100% - 240px);
+            pointer-events: none;
+            object-fit: contain;
+          }
+
+          &>P {
+            width: 100%;
+            padding: 6px 10px;
+            margin-top: 20px;
+            height: 150px;
+            text-indent: 2em;
+            color: #fff;
+            white-space: normal;
+            letter-spacing: 2px;
+            line-height: 20px;
+          }
+        }
+        .C1rowShow{
+          opacity: 1;
+        }
+      }
+
+    }
+
+    .C1cent {
+      position: absolute;
+      bottom: 0;
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        width: 0px;
+        height: 0px;
+      }
+
+      .C1cent1 {
+        background-color: #655b54;
+        position: absolute;
+        bottom: 180px;
+        height: 400px;
+        width: auto;
+        white-space: nowrap;
+        display: inline-block;
+
+        .C1crow {
+          cursor: pointer;
+          position: relative;
+          display: inline-block;
+          min-width: 400px;
+          width: 25vw;
+          height: 100%;
+          transition: all .3s;
+
+          &>img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+
+          &>p {
+            z-index: 10;
+            position: absolute;
+            bottom: -40px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 20px;
+            color: var(--themeColor);
+            letter-spacing: 2px;
+          }
+        }
+        .C1crowNone{
+          opacity: 0;
+        }
+      }
+
+
+    }
   }
 }

code/src/pages/C1Architec/index.tsx

@@ -1,27 +1,136 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
 import { useLocation } from "react-router-dom";
 import { baseUrl } from "@/index";
+import classNames from "classnames";
+import upimg from "@/assets/img/tab3/icon_up.png";
+import downimg from "@/assets/img/tab3/icon_down.png";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+
 function C1Architec() {
   const location = useLocation();
 
   const [uId, setUid] = useState("");
 
+  const dataObj = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.architec
+  );
+
+  const info = useMemo(() => {
+    const info = dataObj[uId as "key"] || { name: "", data: [] };
+    return info;
+  }, [dataObj, uId]);
+
   useEffect(() => {
     const query = new URLSearchParams(location.search);
     const param = query.get("id");
     console.log("建筑页面获取id", param);
     setUid(param!);
   }, [location.search]);
+
+  // 点击箭头切换村落
+  const cutChangeFu = useCallback(
+    (num: number) => {
+      const id = Number(uId);
+      const numRes = id + num;
+      setUid(numRes + "");
+
+      // 改变滚动状态
+      const dom1 = document.querySelector(".C1main") as HTMLDivElement;
+      const dom2 = document.querySelector(".C1cent") as HTMLDivElement;
+      dom1.scrollLeft = 0;
+      dom2.scrollLeft = 0;
+    },
+    [uId]
+  );
+
+  // 滚轮滑动事件
+  useEffect(() => {
+    const dom1 = document.querySelector(".C1main") as HTMLDivElement;
+    // dom1.onwheel = (e) => {
+    //   const num = dom1.scrollLeft;
+    //   dom1.scrollLeft = num + e.deltaY;
+    // };
+
+    const dom2 = document.querySelector(".C1cent") as HTMLDivElement;
+    dom2.onwheel = (e) => {
+      const num1 = dom1.scrollLeft;
+      dom1.scrollLeft = num1 + e.deltaY;
+
+      const num2 = dom2.scrollLeft;
+      dom2.scrollLeft = num2 + e.deltaY;
+    };
+  }, []);
+
+  // 输入移入的
+  const [hoverId, setHoverId] = useState(0);
+
   return (
     <div
       className={styles.C1Architec}
       style={{ backgroundImage: `url(${baseUrl}/C1Architec/pc/bg.jpg)` }}
     >
-
       {/* 村落标识 */}
-      
+      <div className="C1bs">
+        <img
+          className={classNames(Number(uId) === 1 ? "C1noneImg" : "")}
+          src={upimg}
+          alt=""
+          onClick={() => cutChangeFu(-1)}
+        />
+        <div>{info.name}</div>
+        <img
+          className={classNames(Number(uId) === 5 ? "C1noneImg" : "")}
+          src={downimg}
+          alt=""
+          onClick={() => cutChangeFu(1)}
+        />
+      </div>
+
+      {/* 鼠标移入的效果 */}
+      <div className="C1main">
+        <div className="C1mainBox">
+          {info.data.map((v) => (
+            <div
+              className={classNames(
+                "C1row",
+                v.id === hoverId ? "C1rowShow" : ""
+              )}
+              key={v.id}
+            >
+              <h1>{v.name}</h1>
+              <div className="C1line"></div>
+              <img src={`${baseUrl}/C1Architec/pc/${uId}/${v.id}.png`} alt="" />
+              <p>{v.txt}</p>
+            </div>
+          ))}
+
+          {/* 棕色底图 */}
+        </div>
+      </div>
 
+      <div className="C1cent">
+        <div
+          className="C1cent1"
+          // style={{ backgroundImage: `url(${baseUrl}/C1Architec/pc/bac.png)` }}
+        >
+          {info.data.map((v) => (
+            <div
+              className={classNames(
+                "C1crow",
+                v.id === hoverId ? "C1crowNone" : ""
+              )}
+              key={v.id}
+              onMouseEnter={() => setHoverId(v.id)}
+              onMouseLeave={() => setHoverId(0)}
+            >
+              <img src={`${baseUrl}/C1Architec/pc/${uId}/${v.id}.png`} alt="" />
+              <p>{v.name}</p>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

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

@@ -11,7 +11,7 @@
     .Z1back {
       position: absolute;
       top: 30px;
-      left: 30px;
+      right: 30px;
       cursor: pointer;
       width: 60px;
       height: 60px;

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

@@ -45,9 +45,13 @@ export type DataAllType = {
   }[];
   // 待完善
   architec: {
-    [string]: {
+    key: {
       name: string;
-      data: never[];
+      data: {
+        id: number;
+        name: string;
+        txt: string;
+      }[];
     };
   };
 };

静态资源/staticData/dataTemp.js

@@ -132,7 +132,74 @@ const staticDataTemp = {
     1: {
       // 村落名字，和上面相同
       name: '锦江里',
-      data: []
-    }
+      data: [
+        {
+          id: 1,
+          name: '养贤别墅1',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 2,
+          name: '养贤别墅2',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 3,
+          name: '养贤别墅3',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 4,
+          name: '养贤别墅4',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 5,
+          name: '养贤别墅5',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 6,
+          name: '养贤别墅6',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+      ]
+    },
+    2: {
+      // 村落名字，和上面相同
+      name: '锦江里二',
+      data: [
+        {
+          id: 1,
+          name: '养贤别墅1',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 2,
+          name: '养贤别墅2',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 3,
+          name: '养贤别墅3',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 4,
+          name: '养贤别墅4',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 5,
+          name: '养贤别墅5',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+        {
+          id: 6,
+          name: '养贤别墅6',
+          txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
+        },
+      ]
+    },
   }
 };