Merge branch 'master' of http://192.168.0.115:3000/shaogen1995/YPZZBWG

pc/README.md

@@ -1,46 +1,2 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+build的时候搜索 打包环境 来修改 配置。
+dev的时候先找到静态资源 staticData 文件夹 -在里面运行 http-server 确保路径是 http://127.0.0.1:8080

pc/package-lock.json

@@ -21,7 +21,6 @@
         "gsap": "^3.11.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-lazyimg-component": "^1.0.1",
         "react-redux": "^8.0.4",
         "react-router-dom": "5.3",
         "react-scripts": "5.0.1",
@@ -14263,17 +14262,6 @@
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "node_modules/react-lazyimg-component": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/react-lazyimg-component/-/react-lazyimg-component-1.0.1.tgz",
-      "integrity": "sha512-E3RqqLa4m1OO+L5jsiVo8Z8iFH4AkQn+MiZwb3T1J+5yqhd67cnlmjMYgMfa1B63bVecRAI6KNQO9uCVWgU6cg==",
-      "dependencies": {
-        "intersection-observer": "^0.12.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/react-redux": {
       "version": "8.0.4",
       "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.4.tgz",
@@ -27896,14 +27884,6 @@
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "react-lazyimg-component": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/react-lazyimg-component/-/react-lazyimg-component-1.0.1.tgz",
-      "integrity": "sha512-E3RqqLa4m1OO+L5jsiVo8Z8iFH4AkQn+MiZwb3T1J+5yqhd67cnlmjMYgMfa1B63bVecRAI6KNQO9uCVWgU6cg==",
-      "requires": {
-        "intersection-observer": "^0.12.0"
-      }
-    },
     "react-redux": {
       "version": "8.0.4",
       "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.4.tgz",

pc/public/S1/ServiceWorker.js

@@ -0,0 +1,33 @@
+const cacheName = "4DAGE-TheOpiumWarMuseumx-0.1";
+const contentToCache = [
+    "Build/gzip1.loader.js",
+    "Build/gzip1.framework.js.gz",
+    "Build/gzip1.data.gz",
+    "Build/gzip1.wasm.gz",
+    "TemplateData/style.css"
+
+];
+
+self.addEventListener('install', function (e) {
+    console.log('[Service Worker] Install');
+    
+    e.waitUntil((async function () {
+      const cache = await caches.open(cacheName);
+      console.log('[Service Worker] Caching all: app shell and content');
+      await cache.addAll(contentToCache);
+    })());
+});
+
+self.addEventListener('fetch', function (e) {
+    e.respondWith((async function () {
+      let response = await caches.match(e.request);
+      console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
+      if (response) { return response; }
+
+      response = await fetch(e.request);
+      const cache = await caches.open(cacheName);
+      console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
+      cache.put(e.request, response.clone());
+      return response;
+    })());
+});

pc/public/S1/TemplateData/style.css

@@ -0,0 +1,8 @@
+body { padding: 0; margin: 0 }
+#unity-container { position: fixed; width: 100%; height: 100%; }
+#unity-canvas { width: 100%; height: 100%; background: url('bg.jpg') no-repeat center ;background-size: cover;}
+#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
+#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
+#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
+#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
+#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

pc/public/S1/index.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Unity WebGL Player | TheOpiumWarMuseumx</title>
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/style.css">
+    <link rel="manifest" href="manifest.webmanifest">
+  </head>
+  <body>
+    <div id="unity-container">
+      <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
+      <div id="unity-loading-bar">
+        <div id="unity-logo"></div>
+        <div id="unity-progress-bar-empty">
+          <div id="unity-progress-bar-full"></div>
+        </div>
+      </div>
+      <div id="unity-warning"> </div>
+    </div>
+    <script>
+      window.addEventListener("load", function () {
+        if ("serviceWorker" in navigator) {
+          navigator.serviceWorker.register("ServiceWorker.js");
+        }
+      });
+
+      var container = document.querySelector("#unity-container");
+      var canvas = document.querySelector("#unity-canvas");
+      var loadingBar = document.querySelector("#unity-loading-bar");
+      var progressBarFull = document.querySelector("#unity-progress-bar-full");
+      var warningBanner = document.querySelector("#unity-warning");
+
+      // Shows a temporary message banner/ribbon for a few seconds, or
+      // a permanent error message on top of the canvas if type=='error'.
+      // If type=='warning', a yellow highlight color is used.
+      // Modify or remove this function to customize the visually presented
+      // way that non-critical warnings and error messages are presented to the
+      // user.
+      function unityShowBanner(msg, type) {
+        function updateBannerVisibility() {
+          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
+        }
+        var div = document.createElement('div');
+        div.innerHTML = msg;
+        warningBanner.appendChild(div);
+        if (type == 'error') div.style = 'background: red; padding: 10px;';
+        else {
+          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
+          setTimeout(function() {
+            warningBanner.removeChild(div);
+            updateBannerVisibility();
+          }, 5000);
+        }
+        updateBannerVisibility();
+      }
+
+      var buildUrl = "Build";
+      var loaderUrl = buildUrl + "/gzip1.loader.js";
+      var config = {
+        dataUrl: buildUrl + "/gzip1.data.gz",
+        frameworkUrl: buildUrl + "/gzip1.framework.js.gz",
+        codeUrl: buildUrl + "/gzip1.wasm.gz",
+        streamingAssetsUrl: "StreamingAssets",
+        companyName: "4DAGE",
+        productName: "TheOpiumWarMuseumx",
+        productVersion: "0.1",
+        showBanner: unityShowBanner,
+      };
+
+      // By default Unity keeps WebGL canvas render target size matched with
+      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
+      // Set this to false if you want to decouple this synchronization from
+      // happening inside the engine, and you would instead like to size up
+      // the canvas DOM size and WebGL render target sizes yourself.
+      // config.matchWebGLToCanvasSize = false;
+
+      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+        // Mobile device style: fill the whole browser client area with the game canvas:
+        var meta = document.createElement('meta');
+        meta.name = 'viewport';
+        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
+        document.getElementsByTagName('head')[0].appendChild(meta);
+      }
+
+      loadingBar.style.display = "block";
+
+      var script = document.createElement("script");
+      script.src = loaderUrl;
+      script.onload = () => {
+        createUnityInstance(canvas, config, (progress) => {
+          progressBarFull.style.width = 100 * progress + "%";
+        }).then((unityInstance) => {
+          loadingBar.style.display = "none";
+        }).catch((message) => {
+          alert(message);
+        });
+      };
+      document.body.appendChild(script);
+
+      function unityCallUrl(index) {
+        window.parent.postMessage({
+          index
+        })
+      }
+    </script>
+  </body>
+</html>

pc/public/S1/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+    "name": "TheOpiumWarMuseumx",
+    "short_name": "TheOpiumWarMuseumx",
+    "start_url": "index.html",
+    "display": "fullscreen",
+    "background_color": "#231F20",
+    "theme_color": "#000",
+    "description": "",
+    "icons": [{
+      "src": "TemplateData/icons/unity-logo-dark.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }]
+  }

pc/public/S2/ServiceWorker.js

@@ -0,0 +1,33 @@
+const cacheName = "4DAGE-TheOpiumWarMuseumx-0.1";
+const contentToCache = [
+    "Build/gzip2.loader.js",
+    "Build/gzip2.framework.js.gz",
+    "Build/gzip2.data.gz",
+    "Build/gzip2.wasm.gz",
+    "TemplateData/style.css"
+
+];
+
+self.addEventListener('install', function (e) {
+    console.log('[Service Worker] Install');
+    
+    e.waitUntil((async function () {
+      const cache = await caches.open(cacheName);
+      console.log('[Service Worker] Caching all: app shell and content');
+      await cache.addAll(contentToCache);
+    })());
+});
+
+self.addEventListener('fetch', function (e) {
+    e.respondWith((async function () {
+      let response = await caches.match(e.request);
+      console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
+      if (response) { return response; }
+
+      response = await fetch(e.request);
+      const cache = await caches.open(cacheName);
+      console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
+      cache.put(e.request, response.clone());
+      return response;
+    })());
+});

pc/public/S2/TemplateData/style.css

@@ -0,0 +1,8 @@
+body { padding: 0; margin: 0 }
+#unity-container { position: fixed; width: 100%; height: 100%; }
+#unity-canvas { width: 100%; height: 100%; background: url('bg.jpg') no-repeat center ;background-size: cover;}
+#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
+#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
+#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
+#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
+#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

pc/public/S2/index.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Unity WebGL Player | TheOpiumWarMuseumx</title>
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/style.css">
+    <link rel="manifest" href="manifest.webmanifest">
+  </head>
+  <body>
+    <div id="unity-container">
+      <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
+      <div id="unity-loading-bar">
+        <div id="unity-logo"></div>
+        <div id="unity-progress-bar-empty">
+          <div id="unity-progress-bar-full"></div>
+        </div>
+      </div>
+      <div id="unity-warning"> </div>
+    </div>
+    <script>
+      window.addEventListener("load", function () {
+        if ("serviceWorker" in navigator) {
+          navigator.serviceWorker.register("ServiceWorker.js");
+        }
+      });
+
+      var container = document.querySelector("#unity-container");
+      var canvas = document.querySelector("#unity-canvas");
+      var loadingBar = document.querySelector("#unity-loading-bar");
+      var progressBarFull = document.querySelector("#unity-progress-bar-full");
+      var warningBanner = document.querySelector("#unity-warning");
+
+      // Shows a temporary message banner/ribbon for a few seconds, or
+      // a permanent error message on top of the canvas if type=='error'.
+      // If type=='warning', a yellow highlight color is used.
+      // Modify or remove this function to customize the visually presented
+      // way that non-critical warnings and error messages are presented to the
+      // user.
+      function unityShowBanner(msg, type) {
+        function updateBannerVisibility() {
+          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
+        }
+        var div = document.createElement('div');
+        div.innerHTML = msg;
+        warningBanner.appendChild(div);
+        if (type == 'error') div.style = 'background: red; padding: 10px;';
+        else {
+          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
+          setTimeout(function() {
+            warningBanner.removeChild(div);
+            updateBannerVisibility();
+          }, 5000);
+        }
+        updateBannerVisibility();
+      }
+
+      var buildUrl = "Build";
+      var loaderUrl = buildUrl + "/gzip2.loader.js";
+      var config = {
+        dataUrl: buildUrl + "/gzip2.data.gz",
+        frameworkUrl: buildUrl + "/gzip2.framework.js.gz",
+        codeUrl: buildUrl + "/gzip2.wasm.gz",
+        streamingAssetsUrl: "StreamingAssets",
+        companyName: "4DAGE",
+        productName: "TheOpiumWarMuseumx",
+        productVersion: "0.1",
+        showBanner: unityShowBanner,
+      };
+
+      // By default Unity keeps WebGL canvas render target size matched with
+      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
+      // Set this to false if you want to decouple this synchronization from
+      // happening inside the engine, and you would instead like to size up
+      // the canvas DOM size and WebGL render target sizes yourself.
+      // config.matchWebGLToCanvasSize = false;
+
+      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+        // Mobile device style: fill the whole browser client area with the game canvas:
+        var meta = document.createElement('meta');
+        meta.name = 'viewport';
+        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
+        document.getElementsByTagName('head')[0].appendChild(meta);
+      }
+
+      loadingBar.style.display = "block";
+
+      var script = document.createElement("script");
+      script.src = loaderUrl;
+      script.onload = () => {
+        createUnityInstance(canvas, config, (progress) => {
+          progressBarFull.style.width = 100 * progress + "%";
+        }).then((unityInstance) => {
+          loadingBar.style.display = "none";
+        }).catch((message) => {
+          alert(message);
+        });
+      };
+      document.body.appendChild(script);
+
+      function unityCallUrl(index) {
+        window.parent.postMessage({
+          index
+        })
+      }
+    </script>
+  </body>
+</html>

pc/public/S2/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+    "name": "TheOpiumWarMuseumx",
+    "short_name": "TheOpiumWarMuseumx",
+    "start_url": "index.html",
+    "display": "fullscreen",
+    "background_color": "#231F20",
+    "theme_color": "#000",
+    "description": "",
+    "icons": [{
+      "src": "TemplateData/icons/unity-logo-dark.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }]
+  }

pc/public/knowInfo.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      user-select: none;
+      width: 100%;
+      height: 100%;
+    }
+
+    .title {
+      box-shadow: 0 1px 6px #ccc;
+      position: fixed;
+      z-index: 10;
+      right: 0;
+      left: 0;
+      height: 44px;
+      padding-right: 10px;
+      padding-left: 10px;
+      border-bottom: 0;
+      background-color: #f7f7f7;
+      text-align: center;
+      font-size: 17px;
+      font-weight: 500;
+      line-height: 44px;
+    }
+
+    .content {
+      padding: 85px 15px 15px;
+    }
+
+    p {
+      font-size: 14px;
+      margin-top: 0;
+      margin-bottom: 10px;
+      color: #8f8f94;
+      text-align: center;
+    }
+  </style>
+
+</head>
+
+<script>
+
+  const id = window.location.href.split('?sId=')[1]
+
+  // https://ypbwg.4dage.com
+  fetch(`/api/show/knowledge/cms/detail/${id}`)
+    .then(response => response.json())
+    .then(data => {
+      const dataRes = data.data
+
+      const titleDom = document.querySelector('.title')
+      const contentDom = document.querySelector('.content')
+
+      titleDom.innerHTML = dataRes.cName
+
+      contentDom.innerHTML = dataRes.cContent
+
+    });
+
+
+
+</script>
+
+<body>
+  <!-- 标题 -->
+  <div class="title"></div>
+  <!-- 主要内容 -->
+  <div class="content"></div>
+</body>
+
+</html>

pc/public/staticData.js

@@ -1,31 +1,12 @@
 // 开发环境
-const staticUrl ='http://localhost:3000/staticData'
+const staticUrl = window.location.href.includes('localhost:') ? 'http://127.0.0.1:8080' : '/pc/staticData'
 
-// 打包
+
+// 打包环境
 // const staticUrl ='/web'
 
 const staticData = [
   {
-    id: 1,
-    data: [
-      {
-        id: 1,
-        name: "虎门销烟1-1",
-        txt: "  撒大苏打撒旦111111111111111111111111111111111111111111撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦11111",
-      },
-      {
-        id: 2,
-        name: "虎门销烟1-2",
-        txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
-      },
-      {
-        id: 3,
-        name: "虎门销烟1-3",
-        txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
-      },
-    ],
-  },
-  {
     id: 2,
     data: [
       // {
@@ -61,4 +42,49 @@ const staticData = [
   },
   { id: 4 },
   { id: 5 },
+  {
+    id: 1,
+    data: [
+      {
+        id: 1,
+        name: "第1集-林则徐在虎门的186天",
+      },
+      {
+        id: 2,
+        name: "第2集-林则徐的朋友圈",
+      },
+      {
+        id: 3,
+        name: "第3集-林则徐开眼看世界",
+      },
+      {
+        id: 4,
+        name: "第4集-林则徐的“廉”字决",
+      },
+      {
+        id: 5,
+        name: "第5集-回首依依勒马看",
+      },
+      {
+        id: 6,
+        name: "第6集-春雷欻破零丁穴",
+      },
+      {
+        id: 7,
+        name: "第7集-蛮烟一扫海如镜",
+      },
+      {
+        id: 8,
+        name: "第8集-陈连升与节马的故事",
+      },
+      {
+        id: 9,
+        name: "第9集-虎门海防总设计师——关天培",
+      },
+      {
+        id: 10,
+        name: "第10集-关天培与《延龄瑞菊图》",
+      },
+    ],
+  },
 ]

pc/src/App.tsx

@@ -14,6 +14,7 @@ import MessageCom from "./components/Message";
 const A1Home = React.lazy(() => import("./pages/A1Home"));
 const A2Main = React.lazy(() => import("./pages/A2Main"));
 const A3Goods = React.lazy(() => import("./pages/A3Goods"));
+const A4Know = React.lazy(() => import("./pages/A4Know"));
 const NotFound = React.lazy(() => import("@/components/NotFound"));
 
 function App() {
@@ -33,6 +34,8 @@ function App() {
             <Route path="/main" exact component={A2Main} />
             {/* 通过文物分享id打开的页面 */}
             <Route path="/goods" component={A3Goods} />
+            {/* 单独打开的知识详情页面 */}
+            <Route path="/know" component={A4Know} />
             {/* 找不到页面 */}
             <Route path="*" component={NotFound} />
           </Switch>

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/Iframe/index.module.scss

@@ -0,0 +1,9 @@
+.MapSon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  border: 0;
+}

pc/src/pages/A0Map/Iframe/index.tsx

@@ -0,0 +1,37 @@
+import { FC, useEffect } from "react";
+import styles from "./index.module.scss";
+
+interface IframePageProps {
+  filename: string;
+  title: string;
+}
+
+const IframePage: FC<IframePageProps> = ({title, filename}) => {
+  useEffect(() => {
+    window.addEventListener("message", unityCallUrl);
+  }, []);
+
+  const unityCallUrl = (e: MessageEvent<any>) => {
+    if (!e.data || !e.data.index) return;
+    switch (e.data.index) {
+      case '3':
+        // 虎门故事陈列
+        window.open('https://www.4dkankan.com/spg.html?m=KJ-7NjKB1ssebo&lang=zh');
+        break;
+      case '2':
+        // 虎门销烟陈列
+        window.open('https://www.4dkankan.com/spg.html?m=KJ-dSR2wuQUDgD&lang=zh');
+        break;
+      default:
+        // 海战馆
+        window.open('https://www.4dkankan.com/spg.html?m=KJ-I6rH3CfNSQV&lang=zh');
+    }
+  }
+
+  return <iframe title={title}
+    className={styles.MapSon}
+    src={`./${filename}/index.html`}
+  />
+}
+
+export default IframePage

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

@@ -35,6 +35,7 @@
           position: relative;
           left: 50%;
           transform: translateX(-50%);
+          object-fit: contain;
 
         }
 
@@ -47,9 +48,10 @@
           height: 40px;
           line-height: 40px;
           border-radius: 20px;
-          background-color: rgba(200, 185, 146, 0.3);
+          background-color: rgba(200, 185, 146, 0.8);
           backdrop-filter: blur(4px);
-          color: var(--themeColor);
+          // color: var(--themeColor);
+          color: #47392C;
           font-size: 18px;
           transition: all .2s;
 

pc/src/pages/A0Map/MapSon/index.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { envUrl } from "@/utils/env";
 import { TabType, imgLodingFu, mapData1 } from "../data";
+import { baseURL } from "@/utils/http";
 
 type Props = {
   sId: number;
@@ -55,7 +56,7 @@ function MapSon({ sId }: Props) {
         {/* 标签 */}
         {tag.map((v) => (
           <div
-            onClick={() => window.open(v.link)}
+            onClick={() => window.open(baseURL+v.link)}
             className="tagBox"
             key={v.id}
             style={{ left: v.x, top: v.y, bottom: v.b, right: v.r }}

pc/src/pages/A0Map/data.ts

@@ -11,110 +11,218 @@ export type TabType = {
   link: string;
 };
 
-type MapType = {
+export type MapType = {
   id: number;
+  imgId:number
   name: string;
   x: string;
   y: string;
   ind: number;
+  filename: string;
   son: TabType[];
 };
 
 export const mapData1: MapType[] = [
+  // {
+  //   id: 1,
+  //   imgId:1,
+  //   name: "虎门故事",
+  //   x: "33%",
+  //   y: "7%",
+  //   ind: 23,
+  //   son: [
+  //     {
+  //       id: 1.1,
+  //       name: "虎门故事",
+  //       x: "21%",
+  //       y: "25%",
+  //       b: "auto",
+  //       r: "auto",
+  //       type: "底部",
+  //       link: "/scene/?m=1194",
+  //     },
+  //     {
+  //       id: 1.2,
+  //       name: "鸦片战争博物馆",
+  //       x: "9%",
+  //       y: "30%",
+  //       b: "auto",
+  //       r: "auto",
+  //       type: "底部",
+  //       link: "/scene/?m=1194",
+  //     },
+  //   ],
+  // },
   {
-    id: 1,
-    name: "虎门故事",
-    x: "37%",
-    y: "6%",
-    ind: 21,
+    id: 2,
+    imgId:2,
+    name: "鸦片战争博物馆",
+    x: "31.2%",
+    y: "4%",
+    ind: 22,
+    filename: "S1",
     son: [
       {
-        id: 1.1,
+        id: 2.1,
         name: "虎门故事",
-        x: "20%",
-        y: "10%",
+        x: "21%",
+        y: "25%",
         b: "auto",
         r: "auto",
         type: "底部",
-        link: "https://www.baidu.com/",
+        link: "/scene/?m=1194",
       },
       {
-        id: 1.2,
-        name: "消烟池",
-        x: "auto",
-        y: "auto",
-        b: "40%",
-        r: "40%",
-        type: "顶部",
-        link: "https://www.baidu.com/",
-      },
-    ],
-  },
-  {
-    id: 2,
-    name: "鸦片战争博物馆",
-    x: "35%",
-    y: "5.6%",
-    ind: 20,
-    son: [
-      {
-        id: 2.1,
-        name: "22222-1111",
-        x: "20%",
-        y: "10%",
+        id: 2.2,
+        name: "鸦片战争博物馆",
+        x: "9%",
+        y: "30%",
         b: "auto",
         r: "auto",
-        type: "顶部",
-        link: "https://www.baidu.com/",
+        type: "底部",
+        link: "/scene/?m=1194",
       },
     ],
   },
   {
     id: 3,
+    imgId:3,
     name: "海战馆",
-    x: "20.3%",
-    y: "44%",
-    ind: 20,
+    x: "18.5%",
+    y: "39.5%",
+    ind: 22,
+    filename: "S2",
     son: [
       {
         id: 2.1,
-        name: "22222-1111",
-        x: "20%",
+        name: "海战馆",
+        x: "39.4%",
         y: "10%",
         b: "auto",
         r: "auto",
         type: "顶部",
-        link: "https://www.baidu.com/",
+        link: "https://www.4dkankan.com/spg.html?m=KJ-I6rH3CfNSQV&lang=zh",
       },
     ],
   },
 ];
-// 沙角炮台
-// 林则徐纪念馆旧址
-// 捕鱼台
 
 export const maoData2 = [
   {
     id: 4,
-    name: "南山顶炮台",
-    x: "10%",
-    y: "40%",
+    name: "镇远炮台旧址",
+    x: "5.8%",
+    y: "43.4%",
     b: "auto",
     r: "auto",
     ind: 21,
     type: "left",
-    link: "https://www.baidu.com/",
+    link: "/scene/?m=1194",
   },
   {
     id: 5,
-    name: "威远炮台",
+    name: "靖远炮台旧址",
+    x: "9.5%",
+    y: "42.8%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "left",
+    link: "/scene/?m=1194",
+    loc: "顶部",
+  },
+  {
+    id: 6,
+    name: "南山顶炮台旧址",
+    x: "12%",
+    y: "37%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "left",
+    link: "/scene/?m=1194",
+    loc: "顶部",
+  },
+  {
+    id: 7,
+    name: "威远炮台旧址",
+    x: "14.3%",
+    y: "43.9%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "left",
+    link: "https://laser.4dkankan.com/index.html?m=SS-w1y1zhoOa0&lang=zh#/",
+  },
+  {
+    id: 8,
+    name: "蛇头湾炮台旧址",
+    x: "3.5%",
+    y: "40.2%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "left",
+    link: "/scene/?m=1194",
+  },
+  {
+    id: 12,
+    name: "定洋炮台旧址",
+    x: "50%",
+    y: "40.5%",
+    b: "auto",
+    r: "auto",
+    ind: 21,
+    type: "center",
+    link: "/scene/?m=1194",
+  },
+  // {
+  //   id: 8,
+  //   name: "威胜东台",
+  //   x: "12%",
+  //   y: "46%",
+  //   b: "auto",
+  //   r: "auto",
+  //   ind: 21,
+  //   type: "left",
+  //   link: "/scene/?m=1194",
+  // },
+  // --------------
+  {
+    id: 9,
+    name: "临高台旧址",
+    x: "auto",
+    y: "auto",
+    b: "13.8%",
+    r: "27.3%",
+    ind: 21,
+    type: "right",
+    link: "/scene/?m=1194",
+    loc: "顶部",
+  },
+  {
+    id: 10,
+    name: "濒海台旧址",
+    x: "auto",
+    y: "auto",
+    b: "12%",
+    r: "26.7%",
+    ind: 21,
+    type: "right",
+    link: "/scene/?m=1194",
+    loc: "顶部",
+  },
+  {
+    id: 11,
+    name: "捕鱼台旧址",
     x: "auto",
     y: "auto",
-    b: "5%",
-    r: "10%",
+    b: "2.5%",
+    r: "15%",
     ind: 21,
     type: "right",
-    link: "https://www.baidu.com/",
+    link: "/scene/?m=1194",
+    loc: "顶部",
   },
 ];
 

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

@@ -4,34 +4,11 @@
   position: relative;
   transform-style: preserve-3d;
   perspective: 1000px;
+  background-color: #837b68;
 
 
   :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 +193,45 @@
           display: none;
         }
 
-        .ic2txtBox5 {
+        .ic2txtBox5{
+          top: auto;
+          left: -5px;
+          bottom: -150px;
+        }
+        .ic2txtBox6 {
+          top: auto;
+          left: -4px;
+          bottom: 40px;
+        }
+        .ic2txtBox8 {
+          left: -15px;
+        }
+        .ic2txtBox9{
+          top: auto;
+          left: -30px;
+          bottom: -120px;
+        }
+        .ic2txtBox10{
+          top: auto;
+          bottom: 60px;
+          left: 0px;
+        }
+        .ic2txtBox11{
           top: auto;
           bottom: 40px;
         }
 
 
+
         // 鼠标悬停
         .ic2HoverBox {
           pointer-events: none;
           position: fixed;
-          bottom: 100px;
-          left: 100px;
+          bottom: 320px;
+          left: 330px;
           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 +264,13 @@
 
         .ic2HoverBox2 {
           left: auto;
-          right: 300px;
+          right: 600px;
+          bottom: 60px;
+        }
+        .ic2HoverBox3 {
+          left: auto;
+          left: 750px;
+          top: 400px;
         }
 
         &:hover {

pc/src/pages/A0Map/index.tsx

@@ -1,16 +1,15 @@
-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";
-import { imgLodingFu, maoData2, mapData1 } from "./data";
+import { MapType, imgLodingFu, 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";
-import MapSon from "./MapSon";
-import { useSelector } from "react-redux";
-import { RootState } from "@/store";
-import { domShowFu } from "@/utils/domShow";
+import MapSon from "./Iframe";
+import ImgLoding from "@/components/ImgLoding";
+import { baseURL } from "@/utils/http";
 
 type Props = {
   type: number;
@@ -18,92 +17,52 @@ type Props = {
 };
 
 function A0Map({ type, sonChaneType }: Props) {
-  // 进页面显示加载中
   useEffect(() => {
-    domShowFu("#AsyncSpinLoding", true);
-  }, []);
-
-  // 一级地图 图片的加载
-  const imgLodingArr = useSelector(
-    (state: RootState) => state.A0layout.imgLodingArr
-  );
+    if (type !== 2) {
+      setSonPage(null);
+      setCheckedData1(null);
+      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);
 
+  const [sonPage, setSonPage] = useState<string | null>(null);
+  const [checkedData1, setCheckedData1] = useState<MapType | null>(null);
+
   return (
     <div className={styles.A0Map}>
-      {/* 开场动画帧 */}
-      <div
-        className={classNames(
-          "videoBoxMove",
-          isImgLodingFu() ? "videoBoxHide" : ""
-        )}
-      >
-        <img src={`${envUrl}/yunMove/yan_${moveInd}.png`} alt="" />
-      </div>
+      {/* 大图片加载中 */}
+      <ImgLoding id={mapSon} />
 
-      {/* 一级地图 */}
+      {/* 一级地图盒子 */}
       <div
+        style={{ opacity: mapSon ? "0" : "1" }}
         className={classNames(
           "mapMain",
           type === 2 ? "mapMain2" : type === 3 ? "mapMain3" : ""
         )}
       >
         {/* 定位大图标 */}
-        {mapData1.map((v) => (
+        {mapData1.map((v, index) => (
           <div
             onMouseEnter={() => setIsHover(v.id)}
             onMouseLeave={() => setIsHover(0)}
             onClick={() => {
-              setMapSon(v.id);
+              setCheckedData1(v);
+              setSonPage(v.filename);
+
               sonChaneType(2);
             }}
             key={v.id}
             className="A0iconBox"
             style={{ top: v.y, left: v.x, zIndex: v.ind }}
           >
-            <div className="iconNum">{v.id}</div>
+            <div className="iconNum">{index + 1}</div>
 
             <img className="iconImg1" src={iconImg1} alt="" />
             <img className="iconImg2" src={iconImg1Ac} alt="" />
@@ -134,14 +93,16 @@ function A0Map({ type, sonChaneType }: Props) {
         {maoData2.map((v) => (
           <div
             onClick={() => {
-              window.open(v.link);
-              // setMapSon(v.id);
+              window.open(
+                v.link.startsWith("http") ? v.link : baseURL + v.link
+              );
+              // setMapSon(v.imgId);
               sonChaneType(3);
             }}
             key={v.id}
             className={classNames(
               "A0iconSmBox",
-              v.type === "right" ? "A0iconSmBoxR" : ""
+              v.loc === "顶部" ? "A0iconSmBoxR" : ""
             )}
             style={{
               top: v.y,
@@ -163,7 +124,11 @@ function A0Map({ type, sonChaneType }: Props) {
             <div
               className={classNames(
                 "ic2HoverBox",
-                v.type === "right" ? "ic2HoverBox2" : ""
+                v.type === "right"
+                  ? "ic2HoverBox2"
+                  : v.type === "center"
+                  ? "ic2HoverBox3"
+                  : ""
               )}
             >
               <div className="ic2HoverBoxll">{v.name}</div>
@@ -174,6 +139,7 @@ function A0Map({ type, sonChaneType }: Props) {
           </div>
         ))}
 
+        {/* 一级地图 图片 */}
         <div className="mapBac">
           <img
             onLoad={() => imgLodingFu(0)}
@@ -184,7 +150,9 @@ function A0Map({ type, sonChaneType }: Props) {
       </div>
 
       {/* 二级地图 */}
-      {mapSon ? <MapSon sId={mapSon} /> : null}
+      {sonPage && checkedData1 ? (
+        <MapSon title={checkedData1.name} filename={sonPage} />
+      ) : null}
 
       {/* <div className="yunBox">
         <div className="yunSon1"></div>