upp

code/public/4dage.js

@@ -5294,7 +5294,8 @@ fdage = {
             },
             j.prototype.showPreview = function (e) {
                 this.clearView(),
-                    this.thumbnail = document.createElement("canvas");
+                //去掉封面
+                   /*  this.thumbnail = document.createElement("canvas");
                 var t = this.container.width / this.container.height;
                 this.thumbnail.height = this.viewer.mobile ? 200 : 300,
                     this.thumbnail.width = this.thumbnail.height * t | 0,
@@ -5304,7 +5305,7 @@ fdage = {
                     i.addColorStop(1, "rgb(7,62,92)"),
                     t.fillStyle = i,
                     t.fillRect(0, 0, this.thumbnail.width, this.thumbnail.height),
-                    this.container.appendChild(this.thumbnail),
+                    this.container.appendChild(this.thumbnail), */
                     this.playButton = document.createElement("input"),
                     this.playButton.type = "image",
                     // this.playButton.src = I.dataLocale + "play.png",
@@ -5330,6 +5331,7 @@ fdage = {
                 (this.loadingImageURL = e) && C.fetchImage(this.loadingImageURL, this.setThumbnail.bind(this))
             },
             j.prototype.setThumbnail = function (e) {
+                return//去掉封面
                 if (this.thumbnail)
                     if (e.height >= this.container.height) {
                         var t = this.container.height / e.height;
@@ -5583,7 +5585,7 @@ fdage = {
                 }
             },
             j.prototype.signalLoadProgress = function (e, t) {
-                if (this.thumbnail) {
+                //if (this.thumbnail) {
                     if (!this.progressBar) {
                         var i = document.createElement("div");
                         i.style.backgroundColor = "rgb(240,240,240)",
@@ -5608,7 +5610,7 @@ fdage = {
                                 delete this.playButton)
                     }
                     this.progressBar.style.width = t <= 0 ? (100 * e / (2097152 + e) | 0) + "%" : (100 * e / t | 0) + "%"
-                }
+                //}
             },
             j.prototype.animating = function () {
                 return !!this.fadeThumbnail || !!this.frameTimer

code/public/model.html

@@ -19,6 +19,7 @@
   <script>
     let number = getQueryVariable("m");
     let num = getQueryVariable("n");
+    let type = getQueryVariable("r");
     // console.log('ppppppppp',number);
 
     // window.autoRotate = true; // 是否自动旋转
@@ -36,7 +37,7 @@
     }
 
     // fdage.embed( number, {
-    fdage.embed(`${src}/C2ArchitecInfo/${number}/${num}.4dage`, {
+    fdage.embed(`${src}/${type}/${number}/${num}.4dage`, {
       transparentBackground: true,
       width: 800,
       height: 600,

code/src/App.tsx

@@ -17,6 +17,7 @@ const B1Village = React.lazy(() => import("./pages/B1Village"));
 const C1Architec = React.lazy(() => import("./pages/C1Architec"));
 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 tabList = [
@@ -37,6 +38,11 @@ export default function App() {
     (state: RootState) => state.A0Layout.homeTabShow
   );
 
+  // 开场视频的配置
+  const { isVideoFlag } = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.home
+  );
+
   // 视频的播放
   const [videoShow, setVideoShow] = useState(true);
 
@@ -82,6 +88,8 @@ export default function App() {
             <Route path="/architecInfo" component={C2ArchitecInfo} />
             {/* 构件 */}
             <Route path="/build" component={D1Build} />
+            {/* 构件详情 */}
+            <Route path="/buildInfo" component={D2BuildInfo} />
             {/* 场景 */}
             <Route path="/scene" component={Z2Scene} />
 
@@ -93,7 +101,7 @@ export default function App() {
 
       {/* 视频加载中 */}
       {videoShow && isVideoShow ? (
-        <div className="Appvideo">
+        <div className="Appvideo" hidden={isVideoFlag === "隐藏"}>
           <video
             onEnded={() => setVideoShow(false)}
             src={`${baseUrl}/A1Home/pc/start.mp4`}

code/src/assets/styles/base.css

@@ -72,6 +72,7 @@ textarea {
   height: 100%;
   z-index: 20;
   overflow: hidden;
+  background-color: #eae6e1;
 }
 #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: black;
+      background-color: #eae6e1;
 
       video {
         width: 100%;

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

@@ -175,5 +175,94 @@
       right: 0;
       background-size: 100% 100%;
     }
+
+    // 旧模型 打开的对比盒子
+    .C2openOld {
+      position: absolute;
+      z-index: 30;
+      width: 400px;
+      height: 680px;
+      background-color: #302a20;
+      top: 160px;
+      left: 500px;
+      border-radius: 6px;
+      padding: 6px;
+      opacity: 0;
+      pointer-events: none;
+      transition: all .3s;
+
+      .C2openClose {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -50px;
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+        background-image: url('../../assets/img/icon_cancel.png');
+        background-size: 100% 100%;
+      }
+
+      .C2openOldMain {
+        width: 100%;
+        height: 100%;
+        border: 1px solid var(--themeColor2);
+
+        .C2openTit {
+          position: relative;
+          z-index: 2;
+          font-size: 18px;
+          text-align: center;
+          color: var(--themeColor2);
+          letter-spacing: 2px;
+          margin: 15px 0;
+        }
+
+        .C2openLine {
+          position: relative;
+          z-index: 2;
+          width: 80%;
+          height: 16px;
+          background-image: url('../../assets/img/line.png');
+          background-size: 100% 100%;
+          margin: 0 auto;
+        }
+
+        iframe {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        img {
+          margin-top: 5px;
+          width: 100%;
+          height: calc(100% - 80px);
+          object-fit: contain;
+        }
+      }
+    }
+
+    .C2openOldShu {
+      width: 800px;
+      height: 300px;
+      top: 120px;
+      left: 40%;
+
+      .C2openClose {
+        top: 50%;
+        left: auto;
+        right: -60px;
+        transform: translate(0, -50%);
+      }
+    }
+
+    .C2openOldShow {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
   }
 }

code/src/components/ArcOrBuildInfo/index.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { baseUrl } from "@/index";
 import history from "@/utils/history";
-import { useSelector } from "react-redux";
-import { RootState } from "@/store";
 import classNames from "classnames";
+import { InfoRowType } from "@/types";
 
 const iconArr = [
   { id: 2, name: "放大" },
@@ -14,29 +13,11 @@ const iconArr = [
 ];
 
 type Props = {
-  type: "3" | "4";
-  uid: string;
-  cid: string;
+  info: InfoRowType;
+  type: "C2ArchitecInfo" | "D2BuildInfo";
 };
 
-function ArcOrBuildInfo({ type, cid, uid }: Props) {
-  // 建筑的数据
-  const architec = useSelector(
-    (state: RootState) => state.A0Layout.dataAll.architec
-  );
-
-  const info = useMemo(() => {
-    // 筛选出 村 的信息
-
-    const infoArr = architec[cid as "key"].data;
-
-    const infoRes = infoArr.filter((v) => v.id === Number(uid))[0];
-
-    // console.log(infoRes);
-
-    return type === "3" ? infoRes : infoRes;
-  }, [architec, cid, uid, type]);
-
+function ArcOrBuildInfo({ info, type }: Props) {
   // 模型的ref
   const ifrRefNew = useRef<any>(null);
 
@@ -53,6 +34,12 @@ function ArcOrBuildInfo({ type, cid, uid }: Props) {
   // 点击对比
   const [oldShow, setOldShow] = useState(false);
 
+  useEffect(() => {
+    if (oldShow) setOldFlag(true);
+  }, [oldShow]);
+
+  const [oldFlag, setOldFlag] = useState(false);
+
   // 点击全屏
   const [full, setFull] = useState(false);
 
@@ -101,17 +88,19 @@ function ArcOrBuildInfo({ type, cid, uid }: Props) {
       >
         <iframe
           ref={ifrRefNew}
-          src={`/model.html?m=${uid}&n=new`}
+          src={`/model.html?m=${info.id}&n=new&r=${type}`}
           frameBorder="0"
         ></iframe>
         {/* 进入室内按钮 */}
-        <div
-          hidden={full}
-          className="C2rToScene"
-          onClick={() => history.push(`/scene?id=${info.code}`)}
-        >
-          进入室内
-        </div>
+        {type === "C2ArchitecInfo" ? (
+          <div
+            hidden={full}
+            className="C2rToScene"
+            onClick={() => history.push(`/scene?id=${info.code}`)}
+          >
+            进入室内
+          </div>
+        ) : null}
 
         {/* 右侧的功能按钮 */}
         <div className="C2rBtn">
@@ -156,8 +145,35 @@ function ArcOrBuildInfo({ type, cid, uid }: Props) {
       </div>
 
       {/* 点击对比打开的元素 */}
-      <div className=""></div>
-
+      {oldFlag ? (
+        <div
+          className={classNames(
+            "C2openOld",
+            oldShow ? "C2openOldShow" : "",
+            info.isOld && info.isOld.loc === "横" ? "C2openOldShu" : ""
+          )}
+        >
+          <div className="C2openOldMain">
+            {info.isOld ? (
+              <>
+                <div className="C2openTit">{info.isOld.name}</div>
+                {/* 线 */}
+                <div className="C2openLine"></div>
+                {/* 模型或者图片 */}
+                {info.isOld.type === "model" ? (
+                  <iframe
+                    src={`/model.html?m=${info.id}&n=old&r=${type}`}
+                    frameBorder="0"
+                  ></iframe>
+                ) : (
+                  <img src={`${baseUrl}/${type}/${info.id}/old.png`} alt="" />
+                )}
+              </>
+            ) : null}
+          </div>
+          <div className="C2openClose" onClick={() => setOldShow(false)}></div>
+        </div>
+      ) : null}
     </div>
   );
 }

code/src/pages/A1Home/index.tsx

@@ -97,8 +97,6 @@ function A1Home() {
                 style={{
                   top: v.txtLoc.top,
                   left: v.txtLoc.left,
-                  right: v.txtLoc.right,
-                  bottom: v.txtLoc.bottom,
                 }}
               >
                 <div>

code/src/pages/C1Architec/index.tsx

@@ -80,7 +80,7 @@ function C1Architec() {
   }, []);
 
   // 输入移入的
-  const [hoverId, setHoverId] = useState(0);
+  const [hoverId, setHoverId] = useState("");
 
   // 滚轮提示
   const [isTit, setIsTit] = useState(true);
@@ -145,10 +145,8 @@ function C1Architec() {
               )}
               key={v.id}
               onMouseEnter={() => setHoverId(v.id)}
-              onMouseLeave={() => setHoverId(0)}
-              onClick={() =>
-                history.push(`/architecInfo?cid=${uId}&id=${v.id}&t=3`)
-              }
+              onMouseLeave={() => setHoverId("")}
+              onClick={() => history.push(`/architecInfo?id=${v.id}`)}
             >
               <img src={`${baseUrl}/C1Architec/pc/${uId}/${v.id}.png`} alt="" />
               <p>{v.name}</p>

code/src/pages/C2ArchitecInfo/index.tsx

@@ -1,33 +1,53 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { useLocation } from "react-router-dom";
 
 import ArcOrBuildInfo from "@/components/ArcOrBuildInfo";
+import { InfoRowType } from "@/types";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { MessageFu } from "@/utils/message";
+import history from "@/utils/history";
 function C2ArchitecInfo() {
   const location = useLocation();
 
-  const [uid, setUid] = useState("");
-  const [cid, setCid] = useState("");
+  const [info, setInfo] = useState({} as InfoRowType);
 
-  // 建筑还是构件
-  const [type, setType] = useState<"" | "3" | "4">("");
+  const { architec } = useSelector(
+    (state: RootState) => state.A0Layout.dataAll
+  );
+
+  const errFu = useCallback(() => {
+    MessageFu.warning("参数错误!");
+    history.replace("/404");
+  }, []);
 
   useEffect(() => {
     const query = new URLSearchParams(location.search);
     const id = query.get("id");
-    const cid = query.get("cid");
-    const type = query.get("t");
-    setUid(id!);
-    setCid(cid!);
-    setType(type as "3" | "4");
-  }, [location.search]);
+
+    if (id) {
+      // 从建筑中 获取数据
+      const tab3Arr = [] as InfoRowType[];
+      for (const k in architec) {
+        const arr = Reflect.get(architec, k).data as InfoRowType[];
+        arr.forEach((v) => {
+          tab3Arr.push(v);
+        });
+      }
+
+      // console.log(123, tab3Arr);
+
+      const temp1 = tab3Arr.find((v) => v.id === id);
+      if (temp1) setInfo(temp1);
+      else errFu();
+    } else errFu();
+  }, [architec, errFu, location.search]);
 
   return (
     <div className={styles.C2ArchitecInfo}>
-      {uid && cid && type ? (
-        <ArcOrBuildInfo type={type} uid={uid} cid={cid} />
-      ) : null}
+      {info.id ? <ArcOrBuildInfo info={info} type='C2ArchitecInfo'/> : null}
     </div>
   );
 }

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

@@ -1,5 +1,138 @@
-.D1Build{
-  :global{
-    
+.D1Build {
+  background-size: 100% 100%;
+  overflow: hidden;
+
+  :global {
+    .D1main {
+      width: 100%;
+      height: 100%;
+      overflow-x: auto;
+      overflow-y: hidden;
+
+      &::-webkit-scrollbar {
+        width: 0px;
+        height: 0px;
+      }
+
+      .D1main1 {
+        white-space: nowrap;
+        display: inline-block;
+        width: auto;
+        height: 100%;
+
+        .D1main1Row {
+          cursor: pointer;
+          width: 30vw;
+          height: 100%;
+          min-width: 480px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(rgba(177, 156, 125, 0), rgba(177, 156, 125, 1), rgba(177, 156, 125, 0));
+
+          }
+
+          .D1img1 {
+            position: absolute;
+            bottom: 80px;
+            left: 30%;
+            width: 100%;
+            object-fit: contain;
+            transition: all .3s;
+          }
+
+          .D1img2 {
+            opacity: 0;
+            transition: all .3s;
+            position: absolute;
+            bottom: 18%;
+            left: 30%;
+            width: 100%;
+            object-fit: contain;
+            z-index: 2;
+            pointer-events: none;
+          }
+
+          .D1RowName {
+            position: absolute;
+            top: 65%;
+            left: 80px;
+            width: 34px;
+            white-space: normal;
+            text-align: center;
+            transition: all .3s;
+
+            .D1RowName1 {
+              width: 34px;
+              height: 34px;
+              background-image: url('../../assets/img/tab4/label.png');
+              background-size: 100% 100%;
+              margin-bottom: 8px;
+            }
+
+            .D1RowName2 {
+              font-size: 22px;
+              color: var(--themeColor);
+            }
+
+          }
+
+          .D1RowTxt {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            font-size: 14px;
+            color: var(--themeColor);
+            width: 80%;
+            transform: translateX(-50%);
+            white-space: normal;
+            opacity: 0;
+            transition: all .3s;
+          }
+
+          &:hover {
+            overflow: visible;
+            background: linear-gradient(rgba(252, 233, 172, .4), rgba(252, 233, 172, .2), rgba(252, 233, 172, 0));
+            .D1RowName {
+              top: 140px;
+            }
+            .D1img1{
+              opacity: 0;
+            }
+            .D1img2{
+              opacity: 1;
+            }
+            .D1RowTxt{
+              opacity: 1;
+            }
+          }
+
+
+        }
+
+        .D1main1RowA {
+
+          // overflow: visible;
+          &::before {
+            // opacity: 0;
+          }
+        }
+
+        .D1main1RowLast {
+          display: inline-block;
+          width: 300px;
+          height: 100%;
+          pointer-events: none;
+        }
+      }
+    }
   }
 }

code/src/pages/D1Build/index.tsx

@@ -1,20 +1,63 @@
 import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { useLocation } from "react-router-dom";
-function D1Build() {
-  const location = useLocation();
+import { baseUrl } from "@/index";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+import classNames from "classnames";
 
-  const [uId, setUid] = useState("");
+function D1Build() {
+  const data = useSelector((state: RootState) => state.A0Layout.dataAll.build);
 
   useEffect(() => {
-    const query = new URLSearchParams(location.search);
-    const param = query.get("id");
-    console.log("构件页面获取id", param);
-    setUid(param!);
-  }, [location.search]);
+    const dom = document.querySelector(".D1main") as HTMLDivElement;
+    dom.onwheel = (e) => {
+      const num = dom.scrollLeft;
+      dom.scrollLeft = num + e.deltaY * 0.4;
+    };
+  }, []);
   return (
-    <div className={styles.D1Build}>
-      <h1>D1Build</h1>
+    <div
+      className={styles.D1Build}
+      style={{ backgroundImage: `url(${baseUrl}/C1Architec/pc/bg.jpg)` }}
+    >
+      <div className="D1main">
+        <div className="D1main1">
+          {data.map((v, i) => (
+            <div
+              className={classNames(
+                "D1main1Row",
+                i >= data.length - 1 ? "D1main1RowA" : ""
+              )}
+              key={v.id}
+            >
+              <img
+                className="D1img1"
+                src={`${baseUrl}/D1Build/pc/${v.id}.png`}
+                alt=""
+              />
+              <img
+                className="D1img2"
+                src={`${baseUrl}/D1Build/pc/${v.id}Ac.png`}
+                alt=""
+              />
+              {/* 左侧名字 */}
+              <div className="D1RowName">
+                <div className="D1RowName1"></div>
+                <div className="D1RowName2">{v.name}</div>
+              </div>
+
+              {/* 底部介绍 */}
+              <div
+                className="D1RowTxt"
+                dangerouslySetInnerHTML={{ __html: v.txt }}
+              ></div>
+            </div>
+          ))}
+          {/* 用来撑开最右边的盒子 */}
+          <div className="D1main1RowLast"></div>
+        </div>
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,5 @@
+// .D2BuildInfo{
+//   :global{
+    
+//   }
+// }

code/src/pages/D2BuildInfo/index.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/iframe-has-title */
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { useLocation } from "react-router-dom";
+
+import ArcOrBuildInfo from "@/components/ArcOrBuildInfo";
+import { InfoRowType } from "@/types";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { MessageFu } from "@/utils/message";
+import history from "@/utils/history";
+function D2BuildInfo() {
+  const location = useLocation();
+
+  const [info, setInfo] = useState({} as InfoRowType);
+
+  const { build } = useSelector((state: RootState) => state.A0Layout.dataAll);
+
+  const errFu = useCallback(() => {
+    MessageFu.warning("参数错误!");
+    history.replace("/404");
+  }, []);
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.search);
+    const id = query.get("id");
+
+    if (id) {
+      // 从构件中 获取数据
+
+      const temp1 = build.find((v) => v.id === id);
+      if (temp1) setInfo(temp1);
+      else errFu();
+    } else errFu();
+  }, [build, errFu, location.search]);
+
+  return (
+    <div className={styles.D2BuildInfo}>
+      {info.id ? <ArcOrBuildInfo info={info} type="D2BuildInfo" /> : null}
+    </div>
+  );
+}
+
+const MemoD2BuildInfo = React.memo(D2BuildInfo);
+
+export default MemoD2BuildInfo;

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

@@ -1,5 +1,6 @@
 export type DataAllType = {
   home: {
+    isVideoFlag: "显示" | "隐藏";
     dianOut: {
       id: number;
       name: string;
@@ -29,8 +30,6 @@ export type DataAllType = {
       txtLoc: {
         top: string;
         left: string;
-        right: string;
-        bottom: string;
       };
     }[];
   };
@@ -47,18 +46,21 @@ export type DataAllType = {
   architec: {
     key: {
       name: string;
-      data: {
-        id: number;
-        name: string;
-        txt: string;
-        code: string;
-        isBuild: { id: number; name: string }[];
-        isOld: {
-          name: string;
-          type: "img" | "model";
-          loc: "横" | "竖";
-        };
-      }[];
+      data: InfoRowType[];
     };
   };
+  build: InfoRowType[];
+};
+
+export type InfoRowType = {
+  id: string;
+  name: string;
+  txt: string;
+  code: string;
+  isBuild: { id: string; name: string }[];
+  isOld: {
+    name: string;
+    type: "img" | "model";
+    loc: "横" | "竖";
+  };
 };

静态资源/staticData/dataTemp.js

@@ -7,6 +7,8 @@ const baseUrlTemp = envTemp
 const staticDataTemp = {
   // 总览
   home: {
+    // 开场视频的显示和隐藏
+    isVideoFlag: '隐藏',  //显示\隐藏
     // 外面地图(村落)的标点
     dianOut: [
       {
@@ -66,8 +68,6 @@ const staticDataTemp = {
         txtLoc: {
           top: "50px",
           left: "80px",
-          right: "auto",
-          bottom: "auto",
         }
       }
     ],
@@ -134,57 +134,49 @@ const staticDataTemp = {
       name: '锦江里',
       data: [
         {
-          id: 1,
+          id: '3_1',
           name: '养贤别墅1',
           txt: '&emsp;&emsp;养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，<br/>当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。',
-          // 相关的构件id(和下面的 build 里面的id一致)  最多3个
           // 是否有场景，有就填写场景码，没有为空
           code: '1196',
+          // 相关的构件id(和下面的 build 里面的id一致)  最多3个
           isBuild: [
             {
-              id: 1,
+              id: '4_1',
               name: '构件1'
             },
             {
-              id: 2,
+              id: '4_2',
               name: '构件2'
             },
             {
-              id: 3,
+              id: '4_3',
               name: '构件3'
             },
           ],
-          // 假的，到时候放到构件里面
-          // 是否有新旧对比 没有不写
-          isOld:{
-            name:'旧的',
-            type:'img',// img、model
-            loc:'横' //横、竖
-          }
-
         },
         {
-          id: 2,
+          id: '3_2',
           name: '养贤别墅2',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
         {
-          id: 3,
+          id: '3_3',
           name: '养贤别墅3',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
         {
-          id: 4,
+          id: '3_4',
           name: '养贤别墅4',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
         {
-          id: 5,
+          id: '3_5',
           name: '养贤别墅5',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
         {
-          id: 6,
+          id: '3_6',
           name: '养贤别墅6',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
@@ -195,32 +187,32 @@ const staticDataTemp = {
       name: '锦江里二',
       data: [
         {
-          id: 1,
+          id: '3_7',
           name: '养贤别墅1',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
         {
-          id: 2,
+          id: '3_8',
           name: '养贤别墅2',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
         {
-          id: 3,
+          id: '3_9',
           name: '养贤别墅3',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
         {
-          id: 4,
+          id: '3_10',
           name: '养贤别墅4',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
         {
-          id: 5,
+          id: '3_11',
           name: '养贤别墅5',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
         {
-          id: 6,
+          id: '3_12',
           name: '养贤别墅6',
           txt: '养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。'
         },
@@ -228,10 +220,47 @@ const staticDataTemp = {
     },
   },
   // 构件
-  build:[
+  build: [
+    {
+      id: '4_1',
+      name: '构件1',
+      txt: '&emsp;&emsp;养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，<br/>当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。',
+      // 是否有新旧对比 没有不写
+      isOld: {
+        name: '旧的',
+        type: 'model',// img、model
+        loc: '竖' //横、竖
+      }
+
+    },
     {
-      id:1,
-      
-    }
+      id: '4_2',
+      name: '构件 l 实打实',
+      txt: '&emsp;&emsp;养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，<br/>当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。',
+      // 是否有新旧对比 没有不写
+      isOld: {
+        name: '旧的',
+        type: 'img',// img、model
+        loc: '竖' //横、竖
+      }
+
+    },
+    {
+      id: '4_3',
+      name: '构件3',
+      txt: '&emsp;&emsp;养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，<br/>当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。',
+      // 是否有新旧对比 没有不写
+      isOld: {
+        name: '旧的',
+        type: 'img',// img、model
+        loc: '横' //横、竖
+      }
+
+    },
+    {
+      id: '4_4',
+      name: '构件4',
+      txt: '&emsp;&emsp;养闲别墅建于1919年，是自立村现存碉楼和庐之一。主人是当地一名私塾教师，后赴南洋谋生。他家里有一个扎小脚的妻子，<br/>当时土匪横行乡里，水患不断，为了保护家人的安全，而建了这座楼。',
+    },
   ]
 };