UPP

pc/src/components/ImgLoding/index.module.scss

@@ -0,0 +1,19 @@
+.ImgLoding {
+  position: absolute;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(131, 123, 104, 0.9);
+  backdrop-filter: blur(20px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  position: auto;
+  transition: all 1s;
+}
+
+.ImgLodingNo {
+  opacity: 0;
+  pointer-events: none;
+}

pc/src/components/ImgLoding/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import styles from "./index.module.scss";
+import { Spin } from "antd";
+import classNames from "classnames";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+
+type Props = {
+  id: number;
+};
+
+function ImgLoding({ id }: Props) {
+  // 图片已经加载完成的仓库数组（id）
+  const imgLodingArr = useSelector(
+    (state: RootState) => state.A0layout.imgLodingArr
+  );
+
+  return (
+    <div
+      className={classNames(
+        styles.ImgLoding,
+        imgLodingArr.includes(id) ? styles.ImgLodingNo : ""
+      )}
+    >
+      <Spin size="large" />
+    </div>
+  );
+}
+
+const MemoImgLoding = React.memo(ImgLoding);
+
+export default MemoImgLoding;

pc/src/components/SpinLoding/index.module.scss

@@ -3,7 +3,7 @@
   z-index: 9999;
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: rgba(131, 123, 104, 0.9);
   display: flex;
   justify-content: center;
   align-items: center;

pc/src/components/SpinLoding/index.tsx

@@ -1,13 +1,14 @@
 import styles from "./index.module.scss";
 import { Spin } from "antd";
 import React from "react";
+
 function SpinLoding() {
   return (
     <div className={styles.SpinLoding}>
-      <Spin size='large'/>
+      <Spin size="large" />
     </div>
   );
 }
 const MemoSpinLoding = React.memo(SpinLoding);
 
-export default MemoSpinLoding;
+export default MemoSpinLoding;

pc/src/pages/A0Map/data.ts

@@ -24,9 +24,9 @@ export const mapData1: MapType[] = [
   {
     id: 1,
     name: "虎门故事",
-    x: "37%",
-    y: "6%",
-    ind: 21,
+    x: "33%",
+    y: "7%",
+    ind: 23,
     son: [
       {
         id: 1.1,
@@ -53,9 +53,9 @@ export const mapData1: MapType[] = [
   {
     id: 2,
     name: "鸦片战争博物馆",
-    x: "35%",
-    y: "5.6%",
-    ind: 20,
+    x: "31%",
+    y: "6%",
+    ind: 22,
     son: [
       {
         id: 2.1,
@@ -72,9 +72,9 @@ export const mapData1: MapType[] = [
   {
     id: 3,
     name: "海战馆",
-    x: "20.3%",
-    y: "44%",
-    ind: 20,
+    x: "16%",
+    y: "41%",
+    ind: 22,
     son: [
       {
         id: 2.1,
@@ -89,16 +89,13 @@ export const mapData1: MapType[] = [
     ],
   },
 ];
-// 沙角炮台
-// 林则徐纪念馆旧址
-// 捕鱼台
 
 export const maoData2 = [
   {
     id: 4,
-    name: "南山顶炮台",
-    x: "10%",
-    y: "40%",
+    name: "镇远炮台",
+    x: "8%",
+    y: "45%",
     b: "auto",
     r: "auto",
     ind: 21,
@@ -107,14 +104,86 @@ export const maoData2 = [
   },
   {
     id: 5,
+    name: "靖远炮台",
+    x: "11%",
+    y: "42%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "left",
+    link: "https://www.baidu.com/",
+    loc: "顶部",
+  },
+  {
+    id: 6,
+    name: "南山顶炮台",
+    x: "12%",
+    y: "41%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "left",
+    link: "https://www.baidu.com/",
+    loc: "顶部",
+  },
+  {
+    id: 7,
     name: "威远炮台",
+    x: "10%",
+    y: "47%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "left",
+    link: "https://www.baidu.com/",
+  },
+  {
+    id: 8,
+    name: "威胜东台",
+    x: "12%",
+    y: "46%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "left",
+    link: "https://www.baidu.com/",
+  },
+  // --------------
+  {
+    id: 9,
+    name: "沙角炮台",
+    x: "auto",
+    y: "auto",
+    b: "11%",
+    r: "26.8%",
+    ind: 21,
+    type: "right",
+    link: "https://www.baidu.com/",
+    loc: "顶部",
+  },
+  {
+    id: 10,
+    name: "林则徐纪念馆旧址",
+    x: "auto",
+    y: "auto",
+    b: "11%",
+    r: "25.4%",
+    ind: 21,
+    type: "right",
+    link: "https://www.baidu.com/",
+    loc: "顶部",
+  },
+  {
+    id: 11,
+    name: "捕鱼台",
     x: "auto",
     y: "auto",
-    b: "5%",
-    r: "10%",
+    b: "6%",
+    r: "22.8%",
     ind: 21,
     type: "right",
     link: "https://www.baidu.com/",
+    loc: "顶部",
   },
 ];
 

pc/src/pages/A0Map/index.module.scss

@@ -8,30 +8,6 @@
 
   :global {
 
-    .videoBoxMove {
-      opacity: 1;
-      pointer-events: auto;
-      transition: all 1s;
-      position: absolute;
-      z-index: 11;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-
-    }
-
-    .videoBoxHide {
-      opacity: 0;
-      pointer-events: none;
-    }
-
     .mapMain {
       position: absolute;
       width: 100%;
@@ -216,21 +192,39 @@
           display: none;
         }
 
-        .ic2txtBox5 {
+        .ic2txtBox5{
+          top: auto;
+          left: -15px;
+          bottom: 40px;
+        }
+        .ic2txtBox6 {
+          top: auto;
+          left: 8px;
+          bottom: 40px;
+        }
+
+        .ic2txtBox9{
+          left: -15px;
+        }
+        .ic2txtBox10{
+          left: 0px;
+        }
+        .ic2txtBox9,.ic2txtBox10,.ic2txtBox11{
           top: auto;
           bottom: 40px;
         }
 
 
+
         // 鼠标悬停
         .ic2HoverBox {
           pointer-events: none;
           position: fixed;
-          bottom: 100px;
-          left: 100px;
+          bottom: 210px;
+          left: 130px;
           z-index: 30;
           width: 180px;
-          height: 120px;
+          height: 140px;
           padding: 5px;
           background-color: rgba(255, 233, 175, 0.6);
           backdrop-filter: blur(4px);
@@ -263,7 +257,8 @@
 
         .ic2HoverBox2 {
           left: auto;
-          right: 300px;
+          right: 570px;
+          bottom: 60px;
         }
 
         &:hover {

pc/src/pages/A0Map/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import classNames from "classnames";
 import { envUrl } from "@/utils/env";
@@ -8,9 +8,7 @@ import iconImg1Ac from "@/assets/img/map/icon1Ac.png";
 import iconImg2 from "@/assets/img/map/icon2.png";
 import iconImg2Ac from "@/assets/img/map/icon2Ac.png";
 import MapSon from "./MapSon";
-import { useSelector } from "react-redux";
-import { RootState } from "@/store";
-import { domShowFu } from "@/utils/domShow";
+import ImgLoding from "@/components/ImgLoding";
 
 type Props = {
   type: number;
@@ -18,78 +16,22 @@ type Props = {
 };
 
 function A0Map({ type, sonChaneType }: Props) {
-
-  
-  useEffect(()=>{
-    if(type===3) setMapSon(0)
-  },[type])
-
-  // 进页面显示加载中
   useEffect(() => {
-    domShowFu("#AsyncSpinLoding", true);
-  }, []);
-
-  // 一级地图 图片的加载
-  const imgLodingArr = useSelector(
-    (state: RootState) => state.A0layout.imgLodingArr
-  );
+    if (type === 3) setMapSon(0);
+  }, [type]);
 
   // 控制二级地图的显示
   const [mapSon, setMapSon] = useState(0);
 
-  // 大图片是否已经加载完
-  const isImgLodingFu = useCallback(() => {
-    let flag = false;
-
-    if (imgLodingArr.includes(mapSon)) {
-      domShowFu("#AsyncSpinLoding", false);
-      flag = true;
-    }
-
-    return flag;
-  }, [imgLodingArr, mapSon]);
-
-  // 开场动画帧的变化
-  const [moveInd, setMoveInd] = useState(0);
-  const moveTime = useRef(-1);
-  const moveYun = useCallback(() => {
-    if (!isImgLodingFu()) {
-      clearInterval(moveTime.current);
-      let num = 0;
-      moveTime.current = window.setInterval(() => {
-        setMoveInd(num);
-        num++;
-        if (num > 30 || isImgLodingFu()) {
-          clearInterval(moveTime.current);
-        }
-      }, 50);
-    }
-  }, [isImgLodingFu]);
-
-  useEffect(() => {
-    moveYun();
-
-    return () => {
-      clearInterval(moveTime.current);
-    };
-  }, [moveYun]);
-
   // 鼠标hover
   const [isHover, setIsHover] = useState(0);
 
   return (
     <div className={styles.A0Map}>
-      {/* 开场动画帧 */}
-      <div
-        className={classNames(
-          "videoBoxMove",
-          isImgLodingFu() ? "videoBoxHide" : ""
-        )}
-      >
-        <img src={`${envUrl}/yunMove/yan_${moveInd}.png`} alt="" />
-      </div>
+      {/* 大图片加载中 */}
+      <ImgLoding id={mapSon} />
 
-      {/* 一级地图 */}
+      {/* 一级地图盒子 */}
       <div
         className={classNames(
           "mapMain",
@@ -147,7 +89,7 @@ function A0Map({ type, sonChaneType }: Props) {
             key={v.id}
             className={classNames(
               "A0iconSmBox",
-              v.type === "right" ? "A0iconSmBoxR" : ""
+              v.loc === "顶部" ? "A0iconSmBoxR" : ""
             )}
             style={{
               top: v.y,
@@ -180,6 +122,7 @@ function A0Map({ type, sonChaneType }: Props) {
           </div>
         ))}
 
+        {/* 一级地图 图片 */}
         <div className="mapBac">
           <img
             onLoad={() => imgLodingFu(0)}

pc/src/pages/A1Home/index.module.scss

@@ -1,7 +1,11 @@
 .A1Home{
-  background-size: 100% 100%;
   position: relative;
   :global{
+    .HomeBac{
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
     .btn{
       position: absolute;
       left: 50%;

pc/src/pages/A1Home/index.tsx

@@ -2,12 +2,21 @@ import React from "react";
 import styles from "./index.module.scss";
 import history from "@/utils/history";
 import { envUrl } from "@/utils/env";
+import ImgLoding from "@/components/ImgLoding";
+import { imgLodingFu } from "../A0Map/data";
 function A1Home() {
   return (
-    <div
-      className={styles.A1Home}
-      style={{ backgroundImage: `url(${envUrl}/home/homeBg.jpg)` }}
-    >
+    <div className={styles.A1Home}>
+      {/* 大图片加载中 */}
+      <ImgLoding id={-1} />
+
+      <img
+        className="HomeBac"
+        onLoad={() => imgLodingFu(-1)}
+        src={`${envUrl}/home/homeBg.jpg`}
+        alt=""
+      />
+
       <div className="btn" onClick={() => history.push("/main")}>
         <img src={`${envUrl}/home/homeBtn.png`} alt="" />
       </div>