pc端初步完工

code/src/assets/styles/base.less

@@ -282,7 +282,7 @@ textarea {
 
 
 // pc首页箭头动画帧
-.A1locBoxLoc{
+.A1locBoxLoc {
   animation: moveDian 1s linear infinite alternate;
 }
 
@@ -295,4 +295,6 @@ textarea {
     transform: translateY(6px);
   }
 
-}
+}
+
+

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

@@ -85,9 +85,17 @@
               width: 100%;
               height: 120px;
               padding: 0 80px;
-              color: #fff;
-              overflow-y: auto;
-              position: relative;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              &>div {
+                max-width: 100%;
+                max-height: 100%;
+                color: #fff;
+                overflow-y: auto;
+
+              }
 
 
             }
@@ -133,16 +141,131 @@
           }
 
           // 右侧打点定位
-          .B1infoRloc{
-            width: 150px;
-            height: 150px;
+          .B1infoRlocBox {
             position: absolute;
-            top: 10%;
-            right: 10%;
-            background-image: url('../../assets/img/tab2/btn-circle.png');
-            background-size: 100% 100%;
-            cursor: pointer;
+            z-index: 3;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            .B1infoRloc {
+              width: 150px;
+              height: 150px;
+              position: absolute;
+              background-image: url('../../assets/img/tab2/btn-circle.png');
+              background-size: 100% 100%;
+              cursor: pointer;
+
+              .B1infoRlocMain {
+                position: absolute;
+                width: 86%;
+                height: 86%;
+                border-radius: 50%;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                overflow: hidden;
+
+                &>img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: cover;
+                  transition: all .3s;
+                }
+
+                &>div {
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: 100%;
+                  height: 100%;
+                  z-index: 3;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  color: #fff;
+                  letter-spacing: 2px;
+                  background-color: rgba(0, 0, 0, .4);
+                  transition: all .3s;
+
+                }
+
+
+                &:hover {
+                  &>img {
+                    transform: scale(1.2);
+                  }
+
+                  &>div {
+                    color: var(--themeColor2);
+                    font-weight: 700;
+                  }
+                }
+              }
+            }
           }
+
+          .B1infoRlocBox1 {
+            .B1infoRloc {
+              top: 38%;
+              right: 4%;
+            }
+          }
+
+          .B1infoRlocBox2 {
+            .B1infoRloc {
+              top: 30%;
+              right: 5%;
+
+              &:nth-of-type(2) {
+                top: 55%;
+                right: 5%;
+              }
+            }
+          }
+
+          .B1infoRlocBox3 {
+            .B1infoRloc {
+              top: 14%;
+              right: 11%;
+
+              &:nth-of-type(2) {
+                top: 37%;
+                right: 4%;
+              }
+
+              &:nth-of-type(3) {
+                top: 62%;
+                right: 7%;
+              }
+            }
+          }
+
+          // 图片的序列帧
+          .B1imgMove {
+            position: absolute;
+            bottom: 248px;
+            left: 16%;
+            z-index: 10;
+            width: 50%;
+            // height: auto;
+            height: calc(100% - 370px);
+            overflow: hidden;
+            // overflow-y: visible;
+
+            .B1imgMoveMain {
+              pointer-events: none;
+              position: absolute;
+              top: 50%;
+              transform: translateY(-50%);
+              left: 0;
+              // max-height: 10000px;
+              object-fit: fill;
+              // height: 100%;
+            }
+          }
+
         }
 
         .B1infoRowAc {

code/src/pages/B1Village/index.tsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
 import { useLocation } from "react-router-dom";
 import history from "@/utils/history";
@@ -11,12 +17,20 @@ function B1Village() {
   const location = useLocation();
 
   const [uId, setUid] = useState("");
-  const [curScene, setCurScene] = useState("scene_zlc");
+
   const [hotspotHoverName, setHotspotHoverName] = useState("");
+
   const villageData = useSelector(
     (state: RootState) => state.A0Layout.dataAll.village
   );
 
+  const curScene = useMemo(() => {
+    return (
+      villageData.find((v) => v.id === Number(uId))?.scene ||
+      villageData[0].scene
+    );
+  }, [uId, villageData]);
+
   //当前村落的 信息
   const curVillage = useMemo(
     () =>
@@ -35,13 +49,67 @@ function B1Village() {
   // 详情 索引
   const [infoInd, setInfoInd] = useState(-1);
 
+  // 每次索引变化的时候 动态加载 序列帧样式
+
+  const setFullFu = useCallback(() => {
+    // 看看是否已经插入的 script
+    const ruDom = document.querySelector("#myStyle");
+    if (ruDom) ruDom.remove();
+
+    clearTimeout(time.current);
+    time.current = window.setTimeout(() => {
+      const num = curVillage[infoInd].zhen;
+      // 获取序列帧 外层 盒子的 宽度
+      const dom = document.querySelector(".B1imgMove") as HTMLDivElement;
+      if (dom) {
+        const width = dom.getBoundingClientRect().width;
+        const leftNum = "-" + width * num + "px";
+        const styleStr = `.B1infoRowAc .B1imgMoveMain {
+             animation: tab2MoveImg 2.4s steps(${num}) infinite;
+           }
+           @keyframes tab2MoveImg {
+           
+             100% {
+               left: ${leftNum};
+             }
+           }`;
+
+        const styletDom = document.createElement("style");
+        styletDom.type = "text/css";
+        styletDom.id = "myStyle";
+        styletDom.innerHTML = styleStr;
+        document.querySelector("html")?.appendChild(styletDom);
+      }
+    }, 100);
+  }, [curVillage, infoInd]);
+
+  useEffect(() => {
+    if (infoInd !== -1) setFullFu();
+  }, [infoInd, setFullFu]);
+
+  const time = useRef(-1);
+
+  useEffect(() => {
+    window.addEventListener("resize", setFullFu, true);
+
+    return () => {
+      window.removeEventListener("resize", setFullFu);
+    };
+  }, [setFullFu]);
+
+  // 点击右侧的 场景 或者 构件
+  const rightClickFu = useCallback((id: string, name: string) => {
+    if (name === "室内场景") history.push(`/scene?id=${id}`);
+    else history.push(`/buildInfo?id=${id}`);
+  }, []);
+
   return (
     <div className={styles.B1Village}>
       {/* 全景相关 */}
       <Krpano
         className={styles.villageKrpano}
         xml="/scene.xml"
-        currentScene={curScene}
+        currentScene={"scene_zlc"}
       >
         {curVillage.map((item, index) => {
           const name = `hotspot${item.id}`;
@@ -53,7 +121,7 @@ function B1Village() {
               type="text"
               atv={item.atv}
               ath={item.ath}
-              scale={0.5}
+              scale={0.3}
               edge="top"
               bg={false}
               distorted={true}
@@ -89,18 +157,25 @@ function B1Village() {
               key={v.id}
             >
               {/* 大名字 */}
-              <div className="B1infoMainName">
-                <img
-                  src={`${baseUrl}/B1Village/pc/${uId}/name${v.id}.png`}
-                  alt=""
-                />
-              </div>
+              {uId ? (
+                <div className="B1infoMainName">
+                  <img
+                    src={`${baseUrl}/B1Village/pc/${uId}/name${v.id}.png`}
+                    alt=""
+                  />
+                </div>
+              ) : null}
+
               {/* 底部介绍 */}
               <div className="B1infoFloo">
-                <div
-                  className="B1infoFloo1 mySorrl"
-                  dangerouslySetInnerHTML={{ __html: v.txt }}
-                ></div>
+                <div className="B1infoFloo1">
+                  <div
+                    className="mySorrl"
+                    dangerouslySetInnerHTML={{
+                      __html: v.txt ? v.txt : "暂无介绍",
+                    }}
+                  ></div>
+                </div>
                 {/* 左右箭头 */}
                 <div
                   onClick={() => setInfoInd(infoInd - 1)}
@@ -127,11 +202,50 @@ function B1Village() {
                   查看
                 </div>
               </div>
+
               {/* 右侧的打点定位 */}
-              <div className="B1infoRloc"></div>
-              {v.buildArr.map((v2) => (
-                <div className={classNames("B1infoRloc",)} key={v2.id}></div>
-              ))}
+              <div
+                className={classNames(
+                  "B1infoRlocBox",
+                  `B1infoRlocBox${v.buildArr.length}`
+                )}
+              >
+                {v.buildArr.map((v2) => (
+                  <div
+                    className={classNames("B1infoRloc")}
+                    key={v2.id}
+                    onClick={() => rightClickFu(v2.id, v2.name)}
+                  >
+                    <div className="B1infoRlocMain">
+                      {uId ? (
+                        <img
+                          src={`${baseUrl}/B1Village/pc/${uId}/${v2.id}.png`}
+                          alt=""
+                        />
+                      ) : null}
+                      <div>{v2.name}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              {/* 图片的序列帧 */}
+              <div
+                className="B1imgMove"
+                // onMouseEnter={() => setImgHover(false)}
+                // onMouseLeave={() => setImgHover(true)}
+              >
+                {uId ? (
+                  <img
+                    className={classNames("B1imgMoveMain")}
+                    style={{
+                      width: v.zhen * 100 + "%",
+                      maxWidth: v.zhen * 100 + "%",
+                    }}
+                    src={`${baseUrl}/B1Village/pc/${uId}/move${v.id}.png`}
+                    alt=""
+                  />
+                ) : null}
+              </div>
             </div>
           ))}
         </div>

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

@@ -5,7 +5,7 @@
 
   :global {
 
-    .C1tit{
+    .C1tit {
       pointer-events: none;
       transition: all .3s;
       position: absolute;
@@ -14,7 +14,8 @@
       top: 140px;
       transform: translateX(-50%);
       text-align: center;
-      &>p{
+
+      &>p {
         margin-top: 20px;
         color: var(--themeColor);
         font-size: 18px;
@@ -22,7 +23,8 @@
         font-weight: 700;
       }
     }
-    .C1titHide{
+
+    .C1titHide {
       opacity: 0;
     }
 
@@ -61,6 +63,11 @@
       }
     }
 
+    .C1bsLong {
+      background-image: url('../../assets/img/tab3//btn_cunluo2.png');
+
+    }
+
     .C1main {
       pointer-events: none;
       position: absolute;

code/src/pages/C1Architec/index.tsx

@@ -19,6 +19,15 @@ function C1Architec() {
     (state: RootState) => state.A0Layout.dataAll.architec
   );
 
+  // 总共有多少个村落
+  const cunLength = useMemo(() => {
+    let num = 0;
+    for (const k in dataObj) {
+      if (k) num++;
+    }
+    return num;
+  }, [dataObj]);
+
   const info = useMemo(() => {
     const info = dataObj[uId as "key"] || { name: "", data: [] };
     return info;
@@ -111,7 +120,12 @@ function C1Architec() {
       </div>
 
       {/* 村落标识 */}
-      <div className="C1bs">
+      <div
+        className={classNames(
+          "C1bs",
+          info.name && info.name.length >= 5 ? "C1bsLong" : ""
+        )}
+      >
         <img
           className={classNames(Number(uId) === 1 ? "C1noneImg" : "")}
           src={upimg}
@@ -120,7 +134,7 @@ function C1Architec() {
         />
         <div>{info.name}</div>
         <img
-          className={classNames(Number(uId) === 5 ? "C1noneImg" : "")}
+          className={classNames(Number(uId) === cunLength ? "C1noneImg" : "")}
           src={downimg}
           alt=""
           onClick={() => cutChangeFu(1)}

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

@@ -54,12 +54,12 @@ export type DataAllType = {
 // 村落详情
 export type Tab2InfoType = {
   id: number;
-  code: string;
   label: string;
   atv: number;
   ath: number;
   txt:string
   architecId: string;
+  zhen:number
   buildArr:{id:string,name:string}[]
 };
 

静态资源/staticData/dataTemp.js

@@ -86,18 +86,20 @@ const staticDataTemp = {
       info: [
         {
           id: 1,
-          // 是否有场景，有就填写场景码，没有为空
-          code: '1196',
           label: '建筑名',
           // 垂直方向
           atv: 0,
           // 水平方向
           ath: 0,
-          // 建筑id，和下面的 architec 里的 data 里的 建筑 id一致
           txt: '&emsp;&emsp;村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介<br/>&emsp;&emsp;绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落',
+          // 建筑id，和下面的 architec 里的 data 里的 建筑 id一致
           architecId: '3_1',
-          // 构件id集合，没有就为空
+          // 帧动画的帧数
+          zhen: 53,
           buildArr: [
+            // 是否有场景，有的话，第一个填写场景,id为场景码,name为室内场景
+            { id: '1194', name: '室内场景' },
+            // 构件id集合，没有就不写
             // id 和下面的 build 的id 一致。最多关联2个构件
             { id: '4_1', name: '构件1' },
             { id: '4_2', name: '构件2' },
@@ -105,28 +107,49 @@ const staticDataTemp = {
         },
         {
           id: 2,
-          // 是否有场景，有就填写场景码，没有为空
-          code: '1196',
           label: '建筑名2',
           // 垂直方向
           atv: 0,
           // 水平方向
           ath: 30,
+          txt: '落介绍村落介绍村落22',
           // 建筑id，和下面的 architec 里的 data 里的 建筑 id一致
-          txt: '',
           architecId: '3_2',
-          // 构件id集合，没有就为空
+          // 帧动画的帧数
+          zhen: 53,
           buildArr: [
+            // 是否有场景，有的话，第一个填写场景,id为场景码,name为室内场景
+            { id: '1194', name: '室内场景' },
+            // 构件id集合，没有就不写
             // id 和下面的 build 的id 一致。最多关联2个构件
             { id: '4_3', name: '构件2-1' },
-            { id: '4_4', name: '构件2-2' },
           ]
-
-        }
+        },
+        {
+          id: 3,
+          label: '建筑名3',
+          // 垂直方向
+          atv: 10,
+          // 水平方向
+          ath: 40,
+          txt: '',
+          // 建筑id，和下面的 architec 里的 data 里的 建筑 id一致
+          architecId: '3_3',
+          // 帧动画的帧数
+          zhen: 53,
+          buildArr: [
+            // 是否有场景，有的话，第一个填写场景,id为场景码,name为室内场景
+            { id: '1194', name: '室内场景' },
+            // 构件id集合，没有就不写
+            // id 和下面的 build 的id 一致。最多关联2个构件
+            // { id: '4_3', name: '构件2-1' },
+          ]
+        },
       ]
     },
     {
       id: 2,
+      scene: 'scene_zlc',
       name: '锦江里2',
       // 村落介绍
       infoTxt: '村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍',
@@ -135,6 +158,7 @@ const staticDataTemp = {
     },
     {
       id: 3,
+      scene: 'scene_zlc',
       name: '锦江里3',
       // 村落介绍
       infoTxt: '村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍',
@@ -143,6 +167,7 @@ const staticDataTemp = {
     },
     {
       id: 4,
+      scene: 'scene_zlc',
       name: '锦江里4',
       // 村落介绍
       infoTxt: '村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍',
@@ -151,6 +176,7 @@ const staticDataTemp = {
     },
     {
       id: 5,
+      scene: 'scene_zlc',
       name: '锦江里5',
       // 村落介绍
       infoTxt: '村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍',
@@ -251,6 +277,11 @@ const staticDataTemp = {
         },
       ]
     },
+    3: {
+      // 村落名字，和上面相同
+      name: '锦江里二锦江里',
+      data: []
+    }
   },
   // 构件
   build: [