upp

pc/public/staticData.js

@@ -1,3 +1,8 @@
+// 开发环境
+const staticUrl ='http://localhost:3000'
+
+// 打包
+// const staticUrl ='/web'
 
 const staticData = [
   {

pc/src/pages/A0Map/data.ts

@@ -0,0 +1,39 @@
+export const mapData1 = [
+  {
+    id: 1,
+    name: "虎门故事",
+    x: "20%",
+    y: "20%",
+    ind: 21,
+  },
+  {
+    id: 2,
+    name: "鸦片战争博物馆",
+    x: "30%",
+    y: "30%",
+    ind: 20,
+  },
+];
+
+export const maoData2 = [
+  {
+    id: 4,
+    name: "南山顶炮台",
+    x: "10%",
+    y: "40%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "left",
+  },
+  {
+    id: 5,
+    name: "威远炮台",
+    x: "auto",
+    y: "auto",
+    b: "5%",
+    r: "10%",
+    ind: 21,
+    type: "right",
+  },
+];

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

@@ -5,17 +5,6 @@
 
   :global {
 
-    .moveCCC {
-      position: absolute;
-      z-index: 100;
-      right: 20px;
-      top: 20px;
-      background-color: aqua;
-      padding: 10px;
-      cursor: pointer;
-      border-radius: 10px;
-    }
-
     .videoBoxMove {
       opacity: 1;
       pointer-events: auto;
@@ -76,6 +65,265 @@
           height: 100%;
         }
       }
+
+      // -----------大图标
+      .A0iconBox {
+        cursor: pointer;
+        position: absolute;
+        width: 40px;
+        height: 48px;
+
+        .iconNum {
+          position: absolute;
+          z-index: 10;
+          top: 0;
+          left: 0;
+          width: 40px;
+          height: 60px;
+          text-align: center;
+          line-height: 40px;
+          font-weight: 700;
+          font-size: 18px;
+        }
+
+        &>img {
+          width: 100%;
+        }
+
+        .iconImg2 {
+          display: none;
+        }
+
+        .txtBox {
+          position: absolute;
+          top: 40px;
+          padding-top: 20px;
+          left: 3px;
+          z-index: 10;
+          // color: #f0d99c;
+          display: none;
+
+          // writing-mode:vertical-rl;
+          &>div {
+            width: 100%;
+            height: 100%;
+            width: 34px;
+            padding: 6px 5px;
+            line-height: 22px;
+            height: auto;
+            color: #47392C;
+            background-color: rgba(255, 233, 175, 0.6);
+            backdrop-filter: blur(4px);
+            font-weight: 700;
+            font-size: 16px;
+            text-align: center;
+            border-radius: 0 6px 0 6px;
+
+          }
+        }
+
+        .hoverShowBox {
+          position: absolute;
+          top: 60px;
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 11;
+          width: 180px;
+          height: 120px;
+          display: none;
+
+          .hoverShowBoxM {
+            padding: 5px;
+            background-color: rgba(255, 233, 175, 0.6);
+            backdrop-filter: blur(4px);
+            border-radius: 0 6px 0 6px;
+
+            .hoverShowBox1 {
+              width: 30px;
+              display: flex;
+              flex-wrap: wrap;
+              align-items: center;
+              justify-content: center;
+              color: #47392C;
+              font-weight: 700;
+              font-size: 14px;
+              padding: 0px 5px;
+              line-height: 16px;
+            }
+
+            .hoverShowBox2 {
+              width: calc(100% - 34px);
+              height: 100%;
+
+              &>img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+
+
+        }
+
+
+        &:hover {
+          .iconImg1 {
+            display: none;
+          }
+
+          .iconImg2 {
+            display: block;
+          }
+
+          .iconNum {
+            color: #fff;
+          }
+
+          .txtBox {
+            display: none !important;
+          }
+
+          .hoverShowBox {
+            display: block;
+
+            .hoverShowBoxM {
+
+              display: flex;
+            }
+          }
+        }
+      }
+
+      // 小图标
+      .A0iconSmBox {
+        cursor: pointer;
+        position: absolute;
+        width: 27px;
+        height: 52px;
+
+        .ic2Img2 {
+          display: none;
+        }
+
+        .ic2txtBox {
+          position: absolute;
+          top: 40px;
+          left: -5px;
+          z-index: 10;
+          width: 34px;
+          padding: 6px 5px;
+          line-height: 22px;
+          height: auto;
+          color: #47392C;
+          background-color: rgba(255, 233, 175, 0.6);
+          backdrop-filter: blur(4px);
+          font-weight: 700;
+          font-size: 16px;
+          text-align: center;
+          border-radius: 0 6px 0 6px;
+        }
+
+        .ic2txtBox5 {
+          top: auto;
+          bottom: 40px;
+        }
+
+
+        // 鼠标悬停
+        .ic2HoverBox {
+          pointer-events: none;
+          position: fixed;
+          bottom: 100px;
+          left: 100px;
+          z-index: 30;
+          width: 180px;
+          height: 120px;
+          padding: 5px;
+          background-color: rgba(255, 233, 175, 0.6);
+          backdrop-filter: blur(4px);
+          border-radius: 0 6px 0 6px;
+          display: none;
+
+          .ic2HoverBoxll {
+            width: 30px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            color: #47392C;
+            font-weight: 700;
+            font-size: 14px;
+            padding: 0px 5px;
+            line-height: 16px;
+          }
+
+          .ic2HoverBoxrr {
+            width: calc(100% - 34px);
+            height: 100%;
+
+            &>img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+
+        .ic2HoverBox2 {
+          left: auto;
+          right: 300px;
+        }
+
+        &:hover {
+          .ic2Img1 {
+            display: none;
+          }
+
+          .ic2Img2 {
+            display: block;
+          }
+
+          .ic2HoverBox {
+            display: flex;
+          }
+
+        }
+      }
+
+      .A0iconSmBoxR {
+        padding-top: 20px;
+      }
+
+    }
+
+    .mapMain2 {
+
+      // -----------大图标
+      .A0iconBox {
+        .iconImg1 {
+          display: none;
+        }
+
+        .iconImg2 {
+          display: block;
+        }
+
+        .iconNum {
+          color: #fff;
+        }
+
+        .txtBox {
+          display: block;
+        }
+      }
+    }
+
+    .mapMain3{
+      // 小图标
+      .A0iconSmBox{
+        .ic2Img1{
+          display: none;
+        }
+      }
     }
 
 

pc/src/pages/A0Map/index.tsx

@@ -1,38 +1,20 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import styles from "./index.module.scss";
-import maoBacImg from "@/assets/img/map/mapBac.jpg";
 import classNames from "classnames";
-import { envUrl } from "@/utils/history";
-
-function A0Map() {
-  const mapBac1 = useRef<HTMLDivElement>(null);
-
-  // const mouseMoveFu = useCallback((e: MouseEvent) => {
-  //   let x = (e.clientX / window.innerWidth) * 2 - 1;
-  //   let y = -(e.clientY / window.innerHeight) * 2 + 1;
-
-  //   // x = x > 1 ? 1 : x < -1 ? -1 : x;
-  //   // y = y > 1 ? 1 : y < -1 ? -1 : y;
-
-  //   const moveParam = `rotateX(${y * 2.5}deg) rotateY(${x}deg) translate(${
-  //     -x * 10
-  //   }px,${y * 10}px)`;
-
-  //   if (mapBac1.current) mapBac1.current.style.transform = moveParam;
-  // }, []);
-
+import { envUrl } from "@/utils/env";
+import { maoData2, mapData1 } from "./data";
+import iconImg1 from "@/assets/img/map/icon1.png";
+import iconImg1Ac from "@/assets/img/map/icon1Ac.png";
+import iconImg2 from "@/assets/img/map/icon2.png";
+import iconImg2Ac from "@/assets/img/map/icon2Ac.png";
+
+type Props = {
+  type: number;
+};
+
+function A0Map({ type }: Props) {
   const [videoInd, setVidoeInd] = useState(true);
 
-  // useEffect(() => {
-  //   if (mapBac1.current) {
-  //     const dom1 = mapBac1.current;
-  //     dom1.addEventListener("mousemove", mouseMoveFu);
-  //     return () => {
-  //       dom1.removeEventListener("mousemove", mouseMoveFu);
-  //     };
-  //   }
-  // }, [mouseMoveFu]);
-
   const [moveInd, setMoveInd] = useState(0);
 
   // 30个动画帧div
@@ -75,11 +57,6 @@ function A0Map() {
 
   return (
     <div className={styles.A0Map}>
-      {/* 测试开场动画帧 */}
-      {/* <div className="moveCCC" onClick={() => setVidoeInd(true)}>
-        开始
-      </div> */}
-
       {/* 开场动画帧 */}
       <div
         className={classNames("videoBoxMove", !videoInd ? "videoBoxHide" : "")}
@@ -88,9 +65,82 @@ function A0Map() {
       </div>
 
       {/* 一级地图 */}
-      <div className="mapMain">
-        <div className="mapBac" ref={mapBac1}>
-          <img src={maoBacImg} alt="" />
+      <div
+        className={classNames(
+          "mapMain",
+          type === 2 ? "mapMain2" : type === 3 ? "mapMain3" : ""
+        )}
+      >
+        {/* 定位大图标 */}
+        {mapData1.map((v) => (
+          <div
+            key={v.id}
+            className="A0iconBox"
+            style={{ top: v.y, left: v.x, zIndex: v.ind }}
+          >
+            <div className="iconNum">{v.id}</div>
+
+            <img className="iconImg1" src={iconImg1} alt="" />
+            <img className="iconImg2" src={iconImg1Ac} alt="" />
+
+            {/* 文字标题 */}
+            <div className="txtBox">
+              <div>{v.name}</div>
+            </div>
+
+            {/* 悬停出来的图片和名称 */}
+            <div className="hoverShowBox">
+              <div className="hoverShowBoxM">
+                <div className="hoverShowBox1">{v.name}</div>
+                <div className="hoverShowBox2">
+                  <img src={`${envUrl}/map/icon/${v.id}.jpg`} alt="" />
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {/* 定位小图标 */}
+        {maoData2.map((v) => (
+          <div
+            key={v.id}
+            className={classNames(
+              "A0iconSmBox",
+              v.type === "right" ? "A0iconSmBoxR" : ""
+            )}
+            style={{
+              top: v.y,
+              left: v.x,
+              bottom: v.b,
+              right: v.r,
+              zIndex: v.ind,
+            }}
+          >
+            <img className="ic2Img1" src={iconImg2} alt="" />
+            <img className="ic2Img2" src={iconImg2Ac} alt="" />
+
+            {/* 文字标题 */}
+            <div className={classNames("ic2txtBox", `ic2txtBox${v.id}`)}>
+              {v.name}
+            </div>
+
+            {/* 悬停出来的图片和名称 */}
+            <div
+              className={classNames(
+                "ic2HoverBox",
+                v.type === "right" ? "ic2HoverBox2" : ""
+              )}
+            >
+              <div className="ic2HoverBoxll">{v.name}</div>
+              <div className="ic2HoverBoxrr">
+                <img src={`${envUrl}/map/icon/${v.id}.jpg`} alt="" />
+              </div>
+            </div>
+          </div>
+        ))}
+
+        <div className="mapBac">
+          <img src={`${envUrl}/map/1.jpg`} alt="" />
         </div>
       </div>
       <div className="yunBox">

pc/src/pages/A2Main/Tab1/index.tsx

@@ -1,15 +1,13 @@
 import React, { useMemo, useState } from "react";
 import styles from "./index.module.scss";
-import { envDataSonType } from "@/utils/env";
-import { envUrl } from "@/utils/history";
+import { envDataSonType, envUrl } from "@/utils/env";
 import classNames from "classnames";
 
 type Props = {
   data: envDataSonType[];
-  typeId: number;
 };
 
-function Tab1({ data, typeId }: Props) {
+function Tab1({ data }: Props) {
   // 当前选中状态
   const [isAc, setIsAc] = useState(1);
 

pc/src/pages/A2Main/VideoBox/index.module.scss

@@ -1,88 +0,0 @@
-.VideoBox {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 11;
-  width: 100%;
-  height: 100%;
-  backdrop-filter: blur(10px);
-  background-color: rgba(0, 0, 0, .8);
-  opacity: 0;
-  pointer-events: none;
-  transition: all .3s;
-  padding: 140px 100px 0 140px;
-
-  :global {
-    .videoClose {
-      position: absolute;
-      right: 40px;
-      top: 40px;
-      cursor: pointer;
-
-      // transform: scale(0.6);
-      &>img {
-        width: 70px;
-      }
-    }
-
-    .vidoMain {
-      width: 100%;
-      height: 100%;
-      display: flex;
-
-      .videobox {
-        width: 1000px;
-        max-height: 550px;
-
-        video {
-          max-width: 100%;
-          max-height: 100%;
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      .videoTxt {
-        width: calc(100% - 1000px);
-        max-height: 550px;
-
-        padding: 0 0px 0 40px;
-        color: #fff;
-
-        &>h3 {
-          font-size: 26px;
-          margin-bottom: 25px;
-          color: var(--themeColor);
-          border-bottom: 1px solid var(--themeColor);
-          padding-bottom: 30px;
-          position: relative;
-
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            bottom: -1px;
-            width: 60px;
-            height: 3px;
-            background-color: var(--themeColor);
-          }
-        }
-
-        .videoTxt_txt {
-          height: calc(100% - 150px);
-          font-size: 14px;
-          line-height: 22px;
-          overflow-y: auto;
-          padding-right: 20px;
-        }
-      }
-    }
-
-
-  }
-}
-
-.videoBoxAc {
-  opacity: 1;
-  pointer-events: auto;
-}

pc/src/pages/A2Main/VideoBox/index.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-import styles from "./index.module.scss";
-import classNames from "classnames";
-import { useSelector } from "react-redux";
-import store, { RootState } from "@/store";
-import { envUrl } from "@/utils/history";
-
-import closeImg from "@/assets/img/goods/close.png";
-
-function VideoBox() {
-  const { videoInfo } = useSelector((state: RootState) => state.A2Main);
-
-  return (
-    <div
-      className={classNames(
-        styles.VideoBox,
-        videoInfo.id ? styles.videoBoxAc : ""
-      )}
-    >
-      <div
-        className="videoClose"
-        onClick={() =>
-          store.dispatch({
-            type: "main/lookVideo",
-            payload: {
-              id: 0,
-              title: "",
-              txt: "",
-            },
-          })
-        }
-      >
-        <img src={closeImg} alt="" />
-      </div>
-      {videoInfo.id ? (
-        <div className="vidoMain">
-          <div className="videobox">
-            <video src={envUrl + "/swData/1/1.mp4"} autoPlay controls></video>
-          </div>
-          <div className="videoTxt">
-            <h3>{videoInfo.title}</h3>
-            
-            <div
-              className="videoTxt_txt myscroll"
-              dangerouslySetInnerHTML={{ __html: videoInfo.txt }}
-            ></div>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-const MemoVideoBox = React.memo(VideoBox);
-
-export default MemoVideoBox;

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

@@ -155,7 +155,6 @@
 
     .swBox2 {
       height: 100%;
-      padding-top: 30px;
     }
   }
 }

pc/src/pages/A2Main/index.tsx

@@ -3,7 +3,6 @@ import React, { useCallback, useState } from "react";
 import styles from "./index.module.scss";
 import LogoImg from "@/assets/img/logo.png";
 import classNames from "classnames";
-import VideoBox from "./VideoBox";
 import GoodsSw from "./GoodsSw";
 import history from "@/utils/history";
 import KnowLedge from "./KnowLedge";
@@ -12,10 +11,10 @@ import { envData, envDataSonType, envDataType } from "@/utils/env";
 import Tab1 from "./Tab1";
 
 function A2Main() {
-  // 传给轮播图的数据
+  // 传给历史
   const [swData, setSwData] = useState<envDataSonType[]>([]);
 
-  // 底部选中的状态
+  // 右侧选中的状态
   const [type, setType] = useState(0);
   const typeChangeFu = useCallback((item: envDataType) => {
     setSwData(item.data);
@@ -24,9 +23,9 @@ function A2Main() {
 
   return (
     <div className={styles.A2Main}>
-      {/* 三维模型页面 */}
+      {/* 图片页面 */}
       <div className="threeBox">
-        <A0Map />
+        <A0Map type={type} />
       </div>
 
       {/* 左上方logo */}
@@ -63,18 +62,14 @@ function A2Main() {
               }}
             ></div>
           </div>
-          {/* 轮播图主体 */}
+          {/* 历史 */}
           {type === 1 ? (
-            <Tab1 data={swData} typeId={type}/>
-          ) : type === 4 ? (
-            <GoodsSw />
-          ) : type === 5 ? (
-            <KnowLedge />
-          ) : null}
+            <Tab1 data={swData} />
+          ) : type === 4 ? // <GoodsSw />
+          null : type === 5 ? // <KnowLedge />
+          null : null}
         </div>
       </div>
-      {/* 历史播放视频 */}
-      <VideoBox />
     </div>
   );
 }

pc/src/utils/env.ts

@@ -12,3 +12,6 @@ export type envDataType = {
 
 //@ts-ignore
 export const envData = staticData as envDataType[];
+
+//@ts-ignore
+export const envUrl = `${staticUrl}/staticData`

pc/src/utils/history.ts

@@ -18,5 +18,3 @@ export const urlParameter = (data: string) => {
     return params;
   } else return {};
 };
-
-export const envUrl = window.location.origin