🐛建筑 进入 村落卡片 点X关闭的 样式冲突问题

code/src/pages/B1CardM/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
 import { baseUrl } from "@/index";
 import { useSelector } from "react-redux";
-import { RootState } from "@/store";
+import store, { RootState } from "@/store";
 import classNames from "classnames";
 import btnImg from "@/assets/img/tab2/btn_m.png";
 import { SwapRightOutlined } from "@ant-design/icons";
@@ -21,6 +21,9 @@ function B1CardM({ closeFu, clickCardFu }: Props) {
   const [ind, setInd] = useState(0);
 
   useEffect(() => {
+    // 建筑 进入 村落卡片 点X关闭的 样式冲突问题
+    store.dispatch({ type: "layout/isCardShow", payload: true });
+
     let num = 0;
 
     const temp = window.location.hash;
@@ -57,7 +60,13 @@ function B1CardM({ closeFu, clickCardFu }: Props) {
   return (
     <div className={styles.B1CardM}>
       {/* 右上角的按钮 */}
-      <div className="B1Cback" onClick={closeFu}>
+      <div
+        className="B1Cback"
+        onClick={() => {
+          store.dispatch({ type: "layout/isCardShow", payload: false });
+          closeFu();
+        }}
+      >
         <img src={`${baseUrl}/A1Home/mobile/icon_cancel.png`} alt="" />
       </div>
 

code/src/pages/C1ArchitecM/index.tsx

@@ -73,9 +73,15 @@ function C1ArchitecM() {
     }, 20);
   }, []);
 
+  const { isCardShow } = useSelector((state: RootState) => state.A0Layout);
+
   useEffect(() => {
-    initSwiper();
-  }, [initSwiper]);
+    // 建筑 进入 村落卡片 点X关闭的 样式冲突问题
+    if (!isCardShow) {
+      setInd(0);
+      initSwiper();
+    }
+  }, [initSwiper, isCardShow]);
 
   // 点击箭头切换村落
   const cutChangeFu = useCallback(
@@ -144,48 +150,50 @@ function C1ArchitecM() {
         />
       </div>
 
-      <div className="C1Amain">
-        {/* 轮播图 */}
-        <div className="swiper mySwiper">
-          {/* 轮播图背景 */}
-          <div
-            className="C1AmainBac"
-            style={{
-              backgroundImage: `url(${baseUrl}/C1Architec/img_diwen.png)`,
-            }}
-          ></div>
-
-          <div className="swiper-wrapper">
-            {info.data.map((v, i) => (
-              <div
-                onClick={() => getUrlHashFu(v.id, "architecInfo",2)}
-                className={classNames(
-                  "swiper-slide",
-                  i === ind ? "swiper-slideBig" : ""
-                )}
-                key={v.id}
-              >
-                <img
-                  src={`${baseUrl}/C1Architec/pc/${uId}/${v.id}.png`}
-                  alt=""
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* 底部介绍 */}
-        {acInfo.txt ? (
-          <div className="C1Atxt">
+      {isCardShow ? null : (
+        <div className="C1Amain">
+          {/* 轮播图 */}
+          <div className="swiper mySwiper">
+            {/* 轮播图背景 */}
             <div
-              className="mySorrl"
-              dangerouslySetInnerHTML={{
-                __html: acInfo.txt,
+              className="C1AmainBac"
+              style={{
+                backgroundImage: `url(${baseUrl}/C1Architec/img_diwen.png)`,
               }}
             ></div>
+
+            <div className="swiper-wrapper">
+              {info.data.map((v, i) => (
+                <div
+                  onClick={() => getUrlHashFu(v.id, "architecInfo", 2)}
+                  className={classNames(
+                    "swiper-slide",
+                    i === ind ? "swiper-slideBig" : ""
+                  )}
+                  key={v.id}
+                >
+                  <img
+                    src={`${baseUrl}/C1Architec/pc/${uId}/${v.id}.png`}
+                    alt=""
+                  />
+                </div>
+              ))}
+            </div>
           </div>
-        ) : null}
-      </div>
+
+          {/* 底部介绍 */}
+          {acInfo.txt ? (
+            <div className="C1Atxt">
+              <div
+                className="mySorrl"
+                dangerouslySetInnerHTML={{
+                  __html: acInfo.txt,
+                }}
+              ></div>
+            </div>
+          ) : null}
+        </div>
+      )}
     </div>
   );
 }

code/src/store/reducer/layout.ts

@@ -18,6 +18,9 @@ const initState = {
 
   // 处理 单独打开构件页面  无法回跳的问题
   isRouterPushBuild: false,
+
+  // 建筑 进入 村落卡片 点X关闭的 样式冲突问题
+  isCardShow: false,
 };
 
 // 定义 action 类型
@@ -25,7 +28,8 @@ type LayoutActionType =
   | { type: "layout/message"; payload: MessageType }
   | { type: "layout/setDataAll"; payload: DataAllType }
   | { type: "layout/setHomeTab"; payload: boolean }
-  | { type: "layout/isRouterPushBuild"; payload: boolean };
+  | { type: "layout/isRouterPushBuild"; payload: boolean }
+  | { type: "layout/isCardShow"; payload: boolean };
 
 // 频道 reducer
 export default function layoutReducer(
@@ -47,6 +51,11 @@ export default function layoutReducer(
     // 顶部tab的展开和收起
     case "layout/isRouterPushBuild":
       return { ...state, isRouterPushBuild: action.payload };
+
+    // 建筑 进入 村落卡片 点X关闭的 样式冲突问题
+    case "layout/isCardShow":
+      return { ...state, isCardShow: action.payload };
+
     default:
       return state;
   }