upp

code/src/AppM.tsx

@@ -142,15 +142,16 @@ export default function AppM() {
       </div>
 
       {/* 点击村落出来的选择卡 */}
-      <B1CardM
-        isShow={!tab2Show}
-        closeFu={() => setTab2Show(false)}
-        clickCardFu={(id) => {
-          // 从卡片里面点击 进入村落
-          setTab2Show(false);
-          history.push(`/village?id=${id}`);
-        }}
-      />
+      {tab2Show ? (
+        <B1CardM
+          closeFu={() => setTab2Show(false)}
+          clickCardFu={(id) => {
+            // 从卡片里面点击 进入村落
+            setTab2Show(false);
+            history.push(`/village?id=${id}`);
+          }}
+        />
+      ) : null}
 
       {/* antd 轻提示 ---兼容360浏览器 */}
       <MessageCom />

code/src/pages/A1HomeM/index.tsx

@@ -35,7 +35,7 @@ function A1HomeM() {
             right: v.rightM,
             bottom: v.bottomM,
           }}
-          onClick={() => history.push(`/villageInfo?id=${v.id}`)}
+          onClick={() => history.push(`/village?id=${v.id}`)}
         >
           {/* 名字 */}
           <div className="A1locBoxName">{v.name}</div>

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

@@ -16,5 +16,66 @@
       right: 20px;
     }
 
+    .swiper {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 90%;
+      max-width: 90%;
+      height: auto;
+    }
+
+    .swiper-3d .swiper-slide-shadow {
+      background: rgba(0, 0, 0, 0);
+    }
+
+    .swiper-slide {
+      color: #fff;
+      padding: 8% 8%;
+
+      .slideBac {
+        pointer-events: none;
+        position: absolute;
+        z-index: 3;
+        // top: -8%;
+        // left: -12%;
+        // width: 124%;
+        // height: 116%;
+        top: 0%;
+        left: 0%;
+        width: 100%;
+        height: 100%;
+        background-size: 100% 100%;
+      }
+
+      .slideBacAc {
+        // top: -5%;
+        // left: -5%;
+        // width: 110%;
+        // height: 110%;
+      }
+
+      p {
+        padding: 0 14%;
+        position: absolute;
+        left: 0;
+        bottom: 10%;
+        width: 100%;
+        color: #fff;
+        line-height: 18px;
+        overflow-y: auto;
+        letter-spacing: 2px;
+        max-height: 30%;
+      }
+
+      &>img {
+        width: 100%;
+        height: calc(100% - 170px);
+      }
+    }
+
+    .swiper-slide-active {}
+
   }
 }

code/src/pages/B1CardM/index.tsx

@@ -1,40 +1,87 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { baseUrl } from "@/index";
 
-// import Swiper from "./swiperCard/swiper-bundle.min.js";
+import Swiper from "./swiperCard/swiper-bundle.min.js";
 
-// import "./swiperCard/swiper-bundle.min.css";
+import "./swiperCard/swiper-bundle.min.css";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+import classNames from "classnames";
 
 type Props = {
-  isShow: boolean;
   closeFu: () => void;
   clickCardFu: (id: number) => void;
 };
 
-function B1CardM({ isShow, closeFu, clickCardFu }: Props) {
+function B1CardM({ closeFu, clickCardFu }: Props) {
+  const data = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.village
+  );
+
+  // 改变的 轮播图 索引 用来 显示顶部 名字
+  const [ind, setInd] = useState(0);
+
   useEffect(() => {
-    // new Swiper(".mySwiper", {
-    //   effect: "cards",
-    //   grabCursor: true,
-    //   // loop:true
-    // });
+    let num = 0;
+
+    const temp = window.location.hash;
+    if (temp.includes("#/village?id=")) {
+      const url = temp.split("?id=")[1];
+      num = Number(url) - 1;
+    }
+
+    new Swiper(".mySwiper", {
+      effect: "cards",
+      grabCursor: true,
+      // 初始高亮
+      initialSlide: num,
+      // loop:true
+      on: {
+        slideChange: function (swiper: any) {
+          setInd(swiper.activeIndex);
+        },
+      },
+    });
   }, []);
 
   return (
-    <div hidden={isShow} className={styles.B1CardM}>
+    <div className={styles.B1CardM}>
       {/* 右上角的按钮 */}
       <div className="B1Cback" onClick={closeFu}>
         <img src={`${baseUrl}/A1Home/mobile/icon_cancel.png`} alt="" />
       </div>
 
       {/* 卡片sw */}
-      {/* <div className="swiper mySwiper">
+      <div className="swiper mySwiper">
         <div className="swiper-wrapper">
-          <div>1</div>
-          <div>2</div>
+          {data.map((v, i) => (
+            <div className="swiper-slide" key={v.id}>
+              <img src={`${baseUrl}/B1Village/mobile/${v.id}.jpg`} alt="" />
+              <p
+                dangerouslySetInnerHTML={{
+                  __html:
+                    v.infoTxt.length >= 80
+                      ? v.infoTxt.substring(0, 80) + "..."
+                      : v.infoTxt,
+                }}
+              ></p>
+              {/* 背景图 */}
+              <div
+                className={classNames(
+                  "slideBac",
+                  ind === i ? "slideBacAc" : ""
+                )}
+                style={{
+                  backgroundImage: `url(${baseUrl}/B1Village/mobile/${
+                    ind === i ? "bacAc" : "bac"
+                  }.png)`,
+                }}
+              ></div>
+            </div>
+          ))}
         </div>
-      </div> */}
+      </div>
     </div>
   );
 }