app-探索

houtai/src/pages/B1Scene/index.tsx

@@ -56,6 +56,7 @@ function Scene() {
           {list.map((v) => (
             <div className="box1Row" key={v.id}>
               <ImageLazy
+                // 图片直接放在测试服务器
                 src={`${baseURL}/backstage/sceneCover/${v.sceneCode}.jpg`}
                 width="100%"
                 height={180}

pc/src/pages/A2Main/index.tsx

@@ -10,7 +10,7 @@ import Tab5 from "./Tab5";
 import { A2_APIsaveModulesVisit } from "@/store/action/A2Main";
 
 // goods:文物 | knowledge：知识 | exhibition：展陈 | site：旧址 | video：视频
-const aIdObj = {
+export const aIdObj = {
   2: "exhibition",
   3: "site",
   4: "goods",

pc/src/pages/App/MainM/Tab1/ImgLook/data.ts

@@ -0,0 +1,39 @@
+export const tab1IObj = {
+  2: [
+    {
+      id: 1,
+      name: "虎门销烟陈列",
+      code: '1194',
+      top: "4%",
+      left: "22%",
+      right: "auto",
+    },
+    {
+      id: 2,
+      name: "虎门故事陈列",
+      code: '1194',
+      top: "12%",
+      left: "auto",
+      right: "1%",
+    },
+  ],
+  3: [
+    {
+      id: 3,
+      name: "海战馆",
+      code: '1194',
+      top: "30%",
+      left: "37%",
+      right: "auto",
+    },
+  ],
+};
+
+export type tab1IObjType = {
+  id: number;
+  name: string;
+  code: string;
+  top: string;
+  left: string;
+  right: string;
+}[];

pc/src/pages/App/MainM/Tab1/ImgLook/index.module.scss

@@ -0,0 +1,40 @@
+.ImgLook{
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  :global{
+    .tab1Iimg{
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+    .tab1Iback{
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      z-index: 10;
+    }
+    .tab1Itab{
+      position: absolute;
+      &>div{
+        height: 40px;
+        padding: 0 30px;
+        border-radius: 20px;
+        background-color: rgba(240, 217, 156, 0.5);
+        backdrop-filter: blur(4px);
+        color: #47392C;
+        line-height: 40px;
+        font-weight: 700;
+      }
+      &>img{
+        position: absolute;
+        top: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+}

pc/src/pages/App/MainM/Tab1/ImgLook/index.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { envUrl } from "@/utils/env";
+import ImgLoding from "@/components/ImgLoding";
+import { imgLodingFu } from "@/pages/A0Map/data";
+import { tab1IObj, tab1IObjType } from "./data";
+import Scene from "../Scene";
+
+type Props = {
+  closeFu: () => void;
+  imgId: number;
+};
+
+function ImgLook({ closeFu, imgId }: Props) {
+
+  const list = useMemo(() => {
+    let arr = [] as tab1IObjType;
+    arr = Reflect.get(tab1IObj, imgId) || [];
+    return arr;
+  }, [imgId]);
+
+  const [code, setCode] = useState("");
+
+  return (
+    <div className={styles.ImgLook}>
+      {/* 大图片加载中 */}
+      <ImgLoding id={imgId} />
+
+      <img
+        className="tab1Iimg"
+        onLoad={() => imgLodingFu(imgId)}
+        src={`${envUrl}/App/main1/bg${imgId}.jpg`}
+        alt=""
+      />
+
+      {/* 返回按钮 */}
+      <div className="tab1Iback" onClick={closeFu}>
+        <img src={`${envUrl}/App/main1/map${imgId}.png`} alt="" />
+      </div>
+
+      {/* 标签 */}
+      {list.map((v) => (
+        <div
+          onClick={() => setCode(v.code)}
+          className="tab1Itab"
+          key={v.id}
+          style={{ left: v.left, top: v.top, right: v.right }}
+        >
+          <div>{v.name}</div>
+          <img src={`${envUrl}/map/xianR.png`} alt="" />
+        </div>
+      ))}
+
+      {/* 点击标签出来的场景页面 */}
+      {code ? <Scene closeFu={() => setCode("")} code={code} /> : null}
+    </div>
+  );
+}
+
+const MemoImgLook = React.memo(ImgLook);
+
+export default MemoImgLook;

pc/src/pages/App/MainM/Tab1/Scene/index.module.scss

@@ -0,0 +1,20 @@
+.Scene{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  :global{
+    .tab1Sback{
+      position: absolute;
+      z-index: 10;
+      top: 15px;
+      left: 15px;
+    }
+    iframe{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

pc/src/pages/App/MainM/Tab1/Scene/index.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable jsx-a11y/iframe-has-title */
+import React, { useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import backImg from "@/assets/img/goods/toBack.png";
+import { baseURL } from "@/utils/http";
+
+type Props = {
+  closeFu: () => void;
+  code: string;
+};
+
+// 为 window 添加属性ts类型
+declare global {
+  interface Window {
+    sceneBackIconStatus: (flag: boolean) => void;
+  }
+}
+
+function Scene({ closeFu, code }: Props) {
+  // 给嵌套的场景页面调用，打开热点的时候 关闭返回按钮
+  const [flag, setFlag] = useState(true);
+
+  useEffect(() => {
+    window.sceneBackIconStatus = (flag) => {
+      setFlag(flag);
+    };
+  }, []);
+
+  return (
+    <div className={styles.Scene}>
+      <img
+        hidden={!flag}
+        className="tab1Sback"
+        onClick={closeFu}
+        src={backImg}
+        alt=""
+      />
+      <iframe
+        src={`${baseURL}/scene/index.html?m=${code}`}
+        frameBorder="0"
+      ></iframe>
+    </div>
+  );
+}
+
+const MemoScene = React.memo(Scene);
+
+export default MemoScene;

pc/src/pages/App/MainM/Tab1/data.ts

@@ -0,0 +1,105 @@
+export const appTab1Loc1 = [
+  {
+    // 这里的id从2开始，之前已经有图片加载的id为1了
+    id: 2,
+    name: "鸦片战争博物馆",
+    top: "5%",
+    left: "28.5%",
+  },
+  {
+    id: 3,
+    name: "海战馆",
+    top: "35%",
+    left: "15.5%",
+  },
+];
+
+export const appTab1Loc2 = [
+  {
+    id: 1,
+    name: "蛇头湾炮台旧址",
+    top: "36%",
+    left: "2%",
+    right: "auto",
+    bottom: "auto",
+    code: '1194',
+  },
+  {
+    id: 2,
+    name: "镇远炮台旧址",
+    top: "38%",
+    left: "4.5%",
+    right: "auto",
+    bottom: "auto",
+    code: '1194',
+  },
+  {
+    id: 3,
+    name: "靖远炮台旧址",
+    top: "40%",
+    left: "7.5%",
+    right: "auto",
+    bottom: "auto",
+    code: '1194',
+  },
+  {
+    id: 4,
+    name: "南山顶炮台旧址",
+    top: "35%",
+    left: "9%",
+    right: "auto",
+    bottom: "auto",
+    code: '1194',
+    loc: "顶部",
+  },
+  {
+    id: 5,
+    name: "威远炮台旧址",
+    top: "39%",
+    left: "11%",
+    right: "auto",
+    bottom: "auto",
+    code: '1194',
+  },
+  {
+    id: 6,
+    name: "定洋炮台旧址",
+    top: "36%",
+    left: "47%",
+    right: "auto",
+    bottom: "auto",
+    code: '1194',
+  },
+  {
+    id: 7,
+    name: "临高台旧址",
+    top: "auto",
+    left: "auto",
+    right: "29%",
+    bottom: "22%",
+    code: '1194',
+    sonLeft: "-30px",
+    loc: "顶部",
+  },
+  {
+    id: 8,
+    name: "濒海台旧址",
+    top: "auto",
+    left: "auto",
+    right: "28%",
+    bottom: "20%",
+    code: '1194',
+    sonLeft: "20px",
+    loc: "顶部",
+  },
+  {
+    id: 9,
+    name: "捕鱼台旧址",
+    top: "auto",
+    left: "auto",
+    right: "17%",
+    bottom: "14%",
+    code: '1194',
+    loc: "顶部",
+  },
+];

pc/src/pages/App/MainM/Tab1/index.module.scss

@@ -1,5 +1,138 @@
-.Tab1{
-  :global{
-    
+.Tab1 {
+  position: relative;
+
+  :global {
+    .tab1Btn {
+      position: absolute;
+      left: 10px;
+      bottom: 6px;
+      z-index: 10;
+
+      .tab1BtnRow {
+        width: 50px;
+        height: 50px;
+        margin-bottom: 4px;
+        background-size: 100% 100%;
+
+        &:nth-of-type(1) {
+          background-image: url('../../../../assets/img/main/2.png');
+        }
+
+        &:nth-of-type(2) {
+          background-image: url('../../../../assets/img/main/3.png');
+        }
+      }
+
+      .tab1BtnRowAc {
+        position: none;
+
+        &:nth-of-type(1) {
+          background-image: url('../../../../assets/img/main/2Ac.png');
+        }
+
+        &:nth-of-type(2) {
+          background-image: url('../../../../assets/img/main/3Ac.png');
+        }
+      }
+    }
+
+    .tab1ImgBox {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      overflow-x: auto;
+
+      .tab1ImgBoxSon {
+        width: auto;
+        height: 100%;
+        position: relative;
+        display: inline-block;
+
+        .tab1Img {
+          display: inline-block;
+          width: auto;
+          height: 100%;
+          max-width: 100000px;
+        }
+
+        // 展陈点位
+        .tab1Loc1 {
+          position: absolute;
+          z-index: 9;
+
+          .tab1Loc1_1 {
+            background-size: 100% 100%;
+            background-image: url('../../../../assets/img/map/icon1.png');
+            z-index: 10;
+            width: 35px;
+            height: 40px;
+            text-align: center;
+            line-height: 40px;
+            font-weight: 700;
+            font-size: 16px;
+          }
+
+          .tab1Loc1_2 {
+            opacity: 0;
+            pointer-events: none;
+            position: absolute;
+            top: 50px;
+            left: 3px;
+            width: 29px;
+            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;
+            padding: 6px 5px;
+            line-height: 22px;
+
+          }
+        }
+
+        .tab1Loc1Ac {
+          .tab1Loc1_1 {
+            color: #fff;
+            background-image: url('../../../../assets/img/map/icon1Ac.png');
+          }
+
+          .tab1Loc1_2 {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+
+        .tab1Loc2{
+          .tab1Loc1_1{
+            width: 26px;
+            height: 32px;
+            background-image: url('../../../../assets/img/map/icon2.png');
+          }
+          .tab1Loc1_2{
+            top: 36px;
+            left: -1px;
+          }
+          .tab1Loc1_2Top{
+            top: auto;
+            bottom: 36px;
+          }
+        }
+        .tab1Loc2Ac {
+          .tab1Loc1_1 {
+            background-image: url('../../../../assets/img/map/icon2Ac.png');
+          }
+
+          .tab1Loc1_2 {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+      }
+
+    }
+
   }
 }

pc/src/pages/App/MainM/Tab1/index.tsx

@@ -1,12 +1,129 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styles from "./index.module.scss";
- function Tab1() {
-  
+import classNames from "classnames";
+import { aIdObj } from "@/pages/A2Main";
+import { A2_APIsaveModulesVisit } from "@/store/action/A2Main";
+import { imgLodingFu } from "@/pages/A0Map/data";
+import { envUrl } from "@/utils/env";
+import ImgLoding from "@/components/ImgLoding";
+import { appTab1Loc1, appTab1Loc2 } from "./data";
+import ImgLook from "./ImgLook";
+import Scene from "./Scene";
+
+const btnObj = [
+  {
+    id: 2,
+    name: "展陈",
+  },
+  {
+    id: 3,
+    name: "旧址",
+  },
+];
+
+function Tab1() {
+  // 切换 展陈 和 旧址
+  const [acId, setAcId] = useState(2);
+
+  // 保存访问量
+  const saveModulesVisitFu = useCallback(async () => {
+    const key = Reflect.get(aIdObj, acId);
+    await A2_APIsaveModulesVisit(key);
+  }, [acId]);
+
+  useEffect(() => {
+    saveModulesVisitFu();
+  }, [saveModulesVisitFu]);
+
+  // 点击进入 大点 里面的 图片查看页面
+  const [lookImgId, setLookImgId] = useState(0);
+
+  // 点击 小点 打开场景
+  const [code, setCode] = useState("");
+
   return (
     <div className={styles.Tab1}>
-      <h1>Tab1</h1>
+      {/* 右下角的按钮 展陈 、 旧址*/}
+      <div className="tab1Btn">
+        {btnObj.map((v) => (
+          <div
+            key={v.id}
+            onClick={() => setAcId(v.id)}
+            className={classNames(
+              "tab1BtnRow",
+              acId === v.id ? "tab1BtnRowAc" : ""
+            )}
+          ></div>
+        ))}
+      </div>
+
+      {/* 大图片加载中 */}
+      <ImgLoding id={1} />
+
+      {/* 大图盒子 */}
+      <div className="tab1ImgBox">
+        <div className="tab1ImgBoxSon">
+          <img
+            className="tab1Img"
+            onLoad={() => imgLodingFu(1)}
+            src={`${envUrl}/App/main1/bg.jpg`}
+            alt=""
+          />
+
+          {/* 展陈点位 */}
+          {appTab1Loc1.map((v, i) => (
+            <div
+              onClick={() => setLookImgId(v.id)}
+              className={classNames("tab1Loc1", acId === 2 ? "tab1Loc1Ac" : "")}
+              key={v.id}
+              style={{ top: v.top, left: v.left }}
+            >
+              <div className="tab1Loc1_1">{i + 1}</div>
+              <div className="tab1Loc1_2">{v.name}</div>
+            </div>
+          ))}
+
+          {/* 旧址的点位 */}
+          {appTab1Loc2.map((v) => (
+            <div
+              onClick={()=>setCode(v.code)}
+              key={v.id}
+              style={{
+                top: v.top,
+                left: v.left,
+                right: v.right,
+                bottom: v.bottom,
+              }}
+              className={classNames(
+                "tab1Loc1",
+                "tab1Loc2",
+                acId === 3 ? "tab1Loc2Ac" : ""
+              )}
+            >
+              <div className="tab1Loc1_1"></div>
+              <div
+                style={{ left: v.sonLeft ? v.sonLeft : "-1px" }}
+                className={classNames(
+                  "tab1Loc1_2",
+                  v.loc === "顶部" ? "tab1Loc1_2Top" : ""
+                )}
+              >
+                {v.name}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 点击 大点 进入的图片页面 */}
+      {lookImgId ? (
+        <ImgLook closeFu={() => setLookImgId(0)} imgId={lookImgId} />
+      ) : null}
+
+      {/* 点击 小点 打开场景*/}
+      {code ? <Scene closeFu={() => setCode("")} code={code} /> : null}
     </div>
-  )
+  );
 }
 
 const MemoTab1 = React.memo(Tab1);

pc/src/pages/App/MainM/index.module.scss

@@ -3,6 +3,10 @@
     .mainBox {
       width: 100%;
       height: calc(100% - 90px);
+      &>div{
+        width: 100%;
+        height: 100%;
+      }
     }
 
     .mainFllo {