v1

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

@@ -90,6 +90,7 @@
       bottom: 16%;
       height: calc(76% - 80px);
       width: 100%;
+      z-index: 40;
 
       .mySwiper {
         width: 100%;
@@ -110,22 +111,37 @@
           height: 100%;
           position: relative;
           z-index: 3;
-          .swiper-slide{
+
+          .swiper-slide {
             position: relative;
-            top: 100px;
             height: calc(100% - 100px);
-            transition: all .3s;
-            img{
+            text-align: center;
+            top: 100px;
+
+            img {
+              transition: all .3s;
               position: absolute;
               bottom: 0;
-              left: 0;
-              width: 100%;
+              left: 50%;
+              transform: translateX(-50%);
+              // width: 100%;
               height: 100%;
+              // object-fit: fill;
+
             }
           }
-          .swiper-slideBig{
-            top: 10px;
-            height: calc(100% - 10px);
+
+          .swiper-slideBig {
+
+            // transform: scale(1.4);
+            // top: 52px;
+            &>img {
+              height: calc(100% + 100px);
+              max-height: 150%;
+              max-width: 150%;
+            }
+
+            // height: calc(100% - 10px);
           }
         }
       }

code/src/pages/C1ArchitecM/index.tsx

@@ -59,6 +59,7 @@ function C1ArchitecM() {
       swiperRef.current = new Swiper(".mySwiper", {
         slidesPerView: 2,
         centeredSlides: true,
+        spaceBetween: 30,
         // effect: "cards",
         grabCursor: true,
         // 初始高亮

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

@@ -69,6 +69,7 @@
             bottom: 80px;
             left: 30%;
             width: 100%;
+            max-height: 600px;
             object-fit: contain;
             transition: all .3s;
           }
@@ -80,6 +81,8 @@
             bottom: 18%;
             left: 30%;
             width: 100%;
+            max-height: 600px;
+
             object-fit: contain;
             z-index: 2;
             pointer-events: none;

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

@@ -51,5 +51,57 @@
       }
     }
 
+    .D1list {
+      width: 100%;
+      height: calc(100% - 50px);
+      margin-top: 10px;
+      overflow-y: auto;
+      padding-top: 40px;
+
+      .D1row {
+        width: 100%;
+        height: 120px;
+        margin-bottom: 60px;
+        padding: 0 20px 0 60px;
+        position: relative;
+
+        .D1row1 {
+          width: 100%;
+          height: 100%;
+          background-size: 100% 100%;
+          padding-left: 130px;
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          color: var(--themeColor);
+          &>div{
+            font-size: 16px;
+            font-weight: 700;
+            margin-bottom: 6px;
+          }
+          &>p{
+            opacity: .6;
+          }
+        }
+
+        .D1row2 {
+          width: 160px;
+          height: 160px;
+          height: calc(100% + 40px);
+          position: absolute;
+          z-index: 10;
+          left: 15px;
+          top: -20px;
+          text-align: center;
+
+          &>img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+      }
+    }
+
   }
 }

code/src/pages/D1BuildM/index.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, 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";
 function D1BuildM() {
   // 看下是 新页面直接进来 还是通过路由进来
   const { isRouterPushBuild } = useSelector(
@@ -16,9 +17,30 @@ function D1BuildM() {
     (state: RootState) => state.A0Layout.dataAll.village
   );
 
-  // 当前选中的id
+  // 获取全部列表数据
+  const dataAll = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.build
+  );
+
+  // 当前选中的 村落 id ，默认0为全部
   const [idAc, setIdAc] = useState(0);
 
+  const data = useMemo(() => {
+    let arr = [] as InfoRowType[];
+    if (idAc === 0) arr = [...dataAll];
+    else {
+      // 从数据中筛选出 当前 村落 的数据
+      arr = dataAll.filter((v) => v.cid === idAc);
+    }
+    return arr;
+  }, [dataAll, idAc]);
+
+  // 切换村落的时候滚动到顶部
+  useEffect(() => {
+    const dom = document.querySelector(".D1list") as HTMLDivElement;
+    if (dom) dom.scrollTop = 0;
+  }, [idAc]);
+
   return (
     <div
       className={styles.D1BuildM}
@@ -49,6 +71,32 @@ function D1BuildM() {
           </div>
         </div>
       </div>
+
+      {/* 底部列表 */}
+      <div className="D1list">
+        {data.map((v) => (
+          <div
+            className="D1row"
+            key={v.id}
+            onClick={() => history.push(`/buildInfo?id=${v.id}`)}
+          >
+            {/* 背景盒子 */}
+            <div
+              className="D1row1"
+              style={{
+                backgroundImage: `url(${baseUrl}/D1Build/btn_subject.png)`,
+              }}
+            >
+              <div>{v.name}</div>
+              <p>{v.title2}</p>
+            </div>
+            {/* 左侧图片 */}
+            <div className="D1row2">
+              <img src={`${baseUrl}/D1Build/pc/${v.id}Ac.png`} alt="" />
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

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

@@ -1,5 +1,3 @@
-// .D2BuildInfo{
-//   :global{
-    
-//   }
-// }
+.D2BuildInfo{
+  position: relative;
+}

code/src/pages/D2BuildInfo/index.tsx

@@ -8,7 +8,8 @@ import { InfoRowType } from "@/types";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 import { MessageFu } from "@/utils/message";
-import history from "@/utils/history";
+import history, { isMobileFu } from "@/utils/history";
+import ArcOrBuildInfoM from "@/components/ArcOrBuildInfoM";
 function D2BuildInfo() {
   const location = useLocation();
 
@@ -35,8 +36,17 @@ function D2BuildInfo() {
   }, [build, errFu, location.search]);
 
   return (
-    <div className={styles.D2BuildInfo}>
-      {info.id ? <ArcOrBuildInfo info={info} type="D2BuildInfo" /> : null}
+    <div
+      className={styles.D2BuildInfo}
+      style={{ zIndex: isMobileFu() ? "40" : "0" }}
+    >
+      {info.id ? (
+        isMobileFu() ? (
+          <ArcOrBuildInfoM info={info} type="D2BuildInfo" />
+        ) : (
+          <ArcOrBuildInfo info={info} type="D2BuildInfo" />
+        )
+      ) : null}
     </div>
   );
 }

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

@@ -80,6 +80,7 @@ export type InfoRowType = {
     loc: "横" | "竖";
   };
   cid:number
+  title2:string
 };
 
 // 搜索列表