数据更新

package.json

@@ -35,7 +35,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "dev": "react-app-rewired start --port 0.0.0.0",
+    "dev": "react-app-rewired start --host 0.0.0.0",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"

public/Chenzhebei-ShanxiMuseum/StreamingAssets/Settings.json

@@ -1,314 +1,347 @@
-{
-  "panels": [
-    {
-      "name": "DefaultVirtualCamera",
-      "cameraOrthographicSize": 9,
-      "viewportX": 0,
-      "offset": -10,
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "Panel1Camera",
-      "cameraOrthographicSize": 9,
-      "viewportX": 0,
-      "offset": -10,
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "Panel2Camera",
-      "cameraOrthographicSize": 9,
-      "viewportX": 0,
-      "offset": -10,
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "Panel3Camera",
-      "cameraOrthographicSize": 9,
-      "viewportX": 0,
-      "offset": -10,
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "Panel4Camera",
-      "cameraOrthographicSize": 9,
-      "viewportX": 0,
-      "offset": -10,
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": 0,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "Panel5Camera",
-      "cameraOrthographicSize": 9,
-      "viewportX": 0.5,
-      "offset": 0,
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      },
-      "rotationNotAllowed": true
-    }
-  ],
-  "hotspots": [
-    {
-      "name": "佛龛",
-      "camera": {
-        "cameraOrthographicSize": 5,
-        "viewportX": 0.5,
-        "offset": 0,
-        "position": {
-          "y": 1.1,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "佛像",
-      "camera": {
-        "cameraOrthographicSize": 5,
-        "viewportX": 0.5,
-        "offset": 0,
-        "position": {
-          "y": 0,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "佛龛两侧",
-      "camera": {
-        "cameraOrthographicSize": 5,
-        "viewportX": 0.5,
-        "offset": 0,
-        "position": {
-          "y": 0,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "佛龛上部",
-      "camera": {
-        "cameraOrthographicSize": 5,
-        "viewportX": 0.5,
-        "offset": 0,
-        "position": {
-          "y": 2,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "佛龛下部",
-      "camera": {
-        "cameraOrthographicSize": 5,
-        "viewportX": 0.5,
-        "offset": 0,
-        "position": {
-          "y": -1,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -180,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "畏兽",
-      "camera": {
-        "cameraOrthographicSize": 5,
-        "viewportX": 0.5,
-        "offset": 0,
-        "position": {
-          "y": 2,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -90,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "飞天",
-      "camera": {
-        "cameraOrthographicSize": 5,
-        "viewportX": 0.5,
-        "offset": 0,
-        "position": {
-          "y": 0,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -90,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "摩尼宝珠",
-      "camera": {
-        "cameraOrthographicSize": 5,
-        "viewportX": 0.5,
-        "offset": 0,
-        "position": {
-          "y": -1,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": -90,
-          "z": 0
-        }
-      }
-    }
-  ],
-  "inscriptions": [
-    {
-      "name": "碑额",
-      "camera": {
-        "cameraOrthographicSize": 2,
-        "viewportX": 0,
-        "offset": 0,
-        "position": {
-          "y": 4.4,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": 0,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "碑文1",
-      "camera": {
-        "cameraOrthographicSize": 2,
-        "viewportX": 0,
-        "offset": 0,
-        "position": {
-          "y": 3.6,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": 0,
-          "z": 0
-        }
-      }
-    },{
-      "name": "碑文2",
-      "camera": {
-        "cameraOrthographicSize": 9,
-        "viewportX": 0,
-        "offset": -10,
-        "position": {
-          "y": 0,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": 0,
-          "z": 0
-        }
-      }
-    },
-    {
-      "name": "碑文3",
-      "camera": {
-        "cameraOrthographicSize": 9,
-        "viewportX": 0,
-        "offset": -10,
-        "position": {
-          "y": 0,
-          "z": -50
-        }
-      },
-      "model": {
-        "rotation": {
-          "x": 0,
-          "y": 0,
-          "z": 0
-        }
-      }
-    }
-  ]
+{
+  "cameraDefaultBlendTime": 0.8,
+  "modelAutoRotationAnimationTime": 0.8,
+  "modelControlAnimationTime": 0.8,
+  "panels": [
+    {
+      "name": "DefaultVirtualCamera",
+      "cameraOrthographicSize": 7,
+      "viewportX": 0,
+      "offset": -6.5,
+      "cameraY": 0,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "Panel1Camera",
+      "cameraOrthographicSize": 7,
+      "viewportX": 0,
+      "offset": -6.5,
+      "cameraY": 0,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "Panel2Camera",
+      "cameraOrthographicSize": 7,
+      "viewportX": 0,
+      "offset": -9,
+      "cameraY": 0,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "Panel3Camera",
+      "cameraOrthographicSize": 5.4,
+      "viewportX": 0.5,
+      "offset": 0,
+      "cameraY": 0,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "Panel4Camera",
+      "cameraOrthographicSize": 6.4,
+      "viewportX": 0,
+      "offset": -7.5,
+      "cameraY": 0.6,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      },
+      "rotationNotAllowed": true
+    },
+    {
+      "name": "Panel5Camera",
+      "cameraOrthographicSize": 9,
+      "viewportX": 0.5,
+      "offset": 0,
+      "cameraY": 0,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    }
+  ],
+  "hotspots": [
+    {
+      "name": "佛龛",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+      "camera": {
+        "cameraOrthographicSize": 5,
+        "viewportX": 0.5,
+        "offset": -2,
+        "position": {
+          "y": 0.8,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "佛像",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+      "camera": {
+        "cameraOrthographicSize": 5,
+        "viewportX": 0.5,
+        "offset": -2,
+        "position": {
+          "y": 0,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "佛龛两侧",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+      "camera": {
+        "cameraOrthographicSize": 5.4,
+        "viewportX": 0.5,
+        "offset": -2.6,
+        "position": {
+          "y": 0,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "佛龛上部",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+      "camera": {
+        "cameraOrthographicSize": 5,
+        "viewportX": 0.5,
+        "offset": -2.4,
+        "position": {
+          "y": 2,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "佛龛下部",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+      "camera": {
+        "cameraOrthographicSize": 5,
+        "viewportX": 0.5,
+        "offset": -2.4,
+        "position": {
+          "y": -4.5,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "畏兽",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+       "camera": {
+        "cameraOrthographicSize": 4,
+        "viewportX": 0.5,
+        "offset": -1.2,
+        "position": {
+          "y": 2,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -90,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "飞天",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+      "camera": {
+         "cameraOrthographicSize": 4,
+        "viewportX": 0.5,
+        "offset": -1.4,
+        "position": {
+          "y": -1.5,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -90,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "摩尼宝珠",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+     "camera": {
+         "cameraOrthographicSize": 4,
+        "viewportX": 0.5,
+        "offset": -1.4,
+        "position": {
+          "y": -3,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -90,
+          "z": 0
+        }
+      }
+    }
+  ],
+  "inscriptions": [
+    {
+      "name": "碑额",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+      "camera": {
+        "cameraOrthographicSize": 2,
+        "viewportX": 0,
+        "offset": 0,
+        "position": {
+          "y": 4.4,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "碑文1",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+      "camera": {
+        "cameraOrthographicSize": 2,
+        "viewportX": 0,
+        "offset": 0,
+        "position": {
+          "y": 3.6,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      }
+    },{
+      "name": "碑文2",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+      "camera": {
+        "cameraOrthographicSize": 6.4,
+        "viewportX": 0,
+        "offset": -7,
+        "position": {
+          "y": 0.6,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "碑文3",
+      "animationTime": 0.8,
+      "startIntensity": 0,
+       "camera": {
+        "cameraOrthographicSize": 6.4,
+        "viewportX": 0,
+        "offset": -7,
+        "position": {
+          "y": 0.6,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      }
+    }
+  ]
 }

public/Chenzhebei-ShanxiMuseum/index.html

@@ -1,36 +1,31 @@
 <!DOCTYPE html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Chenzhebei-ShanxiMuseum</title>
-    <link rel="shortcut icon" href="TemplateData/favicon.ico" />
-    <link rel="stylesheet" href="TemplateData/style.css" />
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/style.css">
     <script src="./unityExport.js"></script>
-  </head>
-  <body>
+</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-progress-bar-empty">
-          <div id="unity-progress-bar-full"></div>
+        <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
+        <div id="unity-loading-bar">
+            <div id="unity-progress-bar-empty">
+                <div id="unity-progress-bar-full"></div>
+            </div>
         </div>
-      </div>
-      <div id="unity-warning"></div>
+        <div id="unity-warning"></div>
     </div>
-  </body>
-  <script>
-    window.centerCameraViewportX = 0.55
-    window.centerCameraOffsetX = 0
+</body>
+<script>
 
-    window.leftCameraViewportX = 0.268
-    window.leftCameraOffsetX = 0
-
-    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')
+    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'.
@@ -39,36 +34,36 @@
     // 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()
+        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 + '/Build.loader.js'
+    var buildUrl = "Build";
+    var loaderUrl = buildUrl + "/Build.loader.js";
     var config = {
-      dataUrl: buildUrl + '/Build.data.unityweb',
-      frameworkUrl: buildUrl + '/Build.framework.js.unityweb',
-      codeUrl: buildUrl + '/Build.wasm.unityweb',
-      streamingAssetsUrl: 'StreamingAssets',
-      devicePixelRatio: 2,
-      companyName: 'DefaultCompany',
-      productName: 'Chenzhebei-ShanxiMuseum',
-      productVersion: '0.1',
-      showBanner: unityShowBanner
-    }
+        dataUrl: buildUrl + "/Build.data.unityweb",
+        frameworkUrl: buildUrl + "/Build.framework.js.unityweb",
+        codeUrl: buildUrl + "/Build.wasm.unityweb",
+        streamingAssetsUrl: "StreamingAssets",
+        devicePixelRatio: 2,
+        companyName: "FDage",
+        productName: "Chenzhebei-ShanxiMuseum",
+        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)
@@ -78,42 +73,43 @@
     // 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)
-      document.querySelector('#unity-container').className = 'unity-mobile'
-      canvas.className = 'unity-mobile'
+        // 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);
+        document.querySelector("#unity-container").className = "unity-mobile";
+        canvas.className = "unity-mobile";
 
-      // To lower canvas resolution on mobile devices to gain some
-      // performance, uncomment the following line:
-      // config.devicePixelRatio = 1;
+        // To lower canvas resolution on mobile devices to gain some
+        // performance, uncomment the following line:
+        // config.devicePixelRatio = 1;
     }
 
-    loadingBar.style.display = 'block'
-    var script = document.createElement('script')
-    script.src = loaderUrl
+
+
+loadingBar.style.display = "block";
+    var script = document.createElement("script");
+    script.src = loaderUrl;
     script.onload = () => {
-      createUnityInstance(canvas, config, progress => {
-        if (window.parent && window.parent !== window) {
-          window.parent.unityLoading(progress)
-        }
-        progressBarFull.style.width = 100 * progress + '%'
-      })
-        .then(unityInstance => {
-          loadingBar.style.display = 'none'
-          window.unityInstance = unityInstance
+        createUnityInstance(canvas, config, (progress) => {
 
-          if (window.parent && window.parent !== window) {
-            window.parent.unityLoading(1)
-          }
-        })
-        .catch(message => {
-          alert(message)
-        })
-    }
-    document.body.appendChild(script)
-  </script>
-</html>
+            if (window.parent && window.parent !== window) {
+                window.parent.unityLoading(progress);
+            }
+            progressBarFull.style.width = 100 * progress + "%";
+        }).then((unityInstance) => {
+            loadingBar.style.display = "none";
+            window.unityInstance = unityInstance;
+            
+            if (window.parent && window.parent !== window) {
+                window.parent.unityLoading(1);
+            }
+        }).catch((message) => {
+            alert(message);
+        });
+    };
+    document.body.appendChild(script);
+</script>
+
+</html>

public/Chenzhebei-ShanxiMuseum/main.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-us">
+<html lang="zh-CN">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

public/Chenzhebei-ShanxiMuseum/unityExport.js

@@ -14,15 +14,25 @@ window.hideTag = function () {
 
 //当模型被操控的时候触发, 任何时候模型进行了移动/旋转/缩放, 都会触发这个函数, 包括主动调用addModelScale函数时, 该函数为unity主动调用的函数
 window.onModelControlled = function () {
-    // if (window.parent && window.parent !== window) {
-    //     window.parent.onModelControlled();
-    // }
+    if (window.parent && window.parent !== window) {
+        window.parent.onModelControlled();
+    }
 }
 
+window.onClickMainHotspot = function(hotspotName){
+    if (window.parent && window.parent !== window) {
+        window.parent.onClickMainHotspot();
+    }
+}
 
 //更新配置
-window.changePanel = function (index) {
-    window.unityInstance.SendMessage('MainCanvas', 'RefreshConfig')
+window.refreshAppSettings = function (json) {
+    window.unityInstance.SendMessage('MainCanvas', 'RefreshAppSettings', json)
+}
+
+window.setModelAutoRotation = function(speed){
+    window.unityInstance.SendMessage('MainCanvas', 'SetModelAutoRotation', speed)
+    
 }
 
 //切换背景图 (0目录页, 1玄石可观, 2石上春秋, 3碑刻密码, 4模型鉴赏) 这些名字对应的蓝湖设计的标题
@@ -47,7 +57,6 @@ window.openHightlight = function (isShow) {
     window.unityInstance.SendMessage('MainCanvas', 'SetInscriptionActive', isShow ? 1 : 0)
 }
 
-
 //显示模型尺寸(待定) 对应蓝湖设计 "文物鉴赏-尺寸"
 window.showSize = function () {
     window.unityInstance.SendMessage('MainCanvas', 'SetSizeActive', 1)
@@ -66,10 +75,3 @@ window.addModelScale = function (value) {
 window.resetModel = function () {
     window.unityInstance.SendMessage('MainCanvas', 'ResetModel')
 }
-
-// 调整模型大小和位置
-window.refreshAppSettings = function (json) {
-    console.log('xxxxxxxx',typeof(json));
-    
-    window.unityInstance.SendMessage('MainCanvas', 'RefreshAppSettings', json)
-}

public/Settings.json

@@ -0,0 +1,318 @@
+{
+  "panels": [
+    {
+      "name": "DefaultVirtualCamera",
+      "cameraOrthographicSize": 7,
+      "viewportX": 0,
+      "offset": -6.5,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "Panel1Camera",
+      "cameraOrthographicSize": 7,
+      "viewportX": 0,
+      "offset": -6.5,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "Panel2Camera",
+      "cameraOrthographicSize": 7,
+      "viewportX": 0,
+      "offset": -9,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "Panel3Camera",
+      "cameraOrthographicSize": 9,
+      "viewportX": 0,
+      "offset": -10,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "Panel4Camera",
+      "cameraOrthographicSize": 6.4,
+      "viewportX": 0,
+      "offset": -7.5,
+      "position": {
+          "y": 6,
+          "z": -50
+        },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      },
+      "rotationNotAllowed": true
+    },
+    {
+      "name": "Panel5Camera",
+      "cameraOrthographicSize": 9,
+      "viewportX": 0.5,
+      "offset": 0,
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    }
+  ],
+  "hotspots": [
+    {
+      "name": "佛龛",
+      "camera": {
+         "cameraOrthographicSize": 5,
+        "viewportX": 0.5,
+        "offset": -2,
+        "position": {
+          "y": 0.8,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "佛像",
+      "camera": {
+        "cameraOrthographicSize": 5,
+        "viewportX": 0.5,
+        "offset": -2,
+        "position": {
+          "y": 0,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "佛龛两侧",
+      "camera": {
+         "cameraOrthographicSize": 5.4,
+        "viewportX": 0.5,
+        "offset": -2.6,
+        "position": {
+          "y": 0,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "佛龛上部",
+      "camera": {
+        "cameraOrthographicSize": 5,
+        "viewportX": 0.5,
+        "offset": -2.4,
+        "position": {
+          "y": 2,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "佛龛下部",
+      "camera": {
+        "cameraOrthographicSize": 5,
+        "viewportX": 0.5,
+        "offset": -2.4,
+        "position": {
+          "y": -4.5,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -180,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "畏兽",
+      "camera": {
+        "cameraOrthographicSize": 4,
+        "viewportX": 0.5,
+        "offset": -1.2,
+        "position": {
+          "y": 2,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -90,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "飞天",
+      "camera": {
+         "cameraOrthographicSize": 4,
+        "viewportX": 0.5,
+        "offset": -1.4,
+        "position": {
+          "y": -1.5,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -90,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "摩尼宝珠",
+      "camera": {
+         "cameraOrthographicSize": 4,
+        "viewportX": 0.5,
+        "offset": -1.4,
+        "position": {
+          "y": -3,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": -90,
+          "z": 0
+        }
+      }
+    }
+  ],
+  "inscriptions": [
+    {
+      "name": "碑额",
+      "camera": {
+        "cameraOrthographicSize": 2,
+        "viewportX": 0,
+        "offset": 0,
+        "position": {
+          "y": 4.4,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "碑文1",
+      "camera": {
+        "cameraOrthographicSize": 2,
+        "viewportX": 0,
+        "offset": 0,
+        "position": {
+          "y": 3.6,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      }
+    },{
+      "name": "碑文2",
+      "camera": {
+        "cameraOrthographicSize": 7,
+        "viewportX": 0,
+        "offset": -8,
+        "position": {
+          "y": 0,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      }
+    },
+    {
+      "name": "碑文3",
+      "camera": {
+        "cameraOrthographicSize": 7,
+        "viewportX": 0,
+        "offset": -8,
+        "position": {
+          "y": 0,
+          "z": -50
+        }
+      },
+      "model": {
+        "rotation": {
+          "x": 0,
+          "y": 0,
+          "z": 0
+        }
+      }
+    }
+  ]
+}

public/beiyingzhihui/ServiceWorker.js

@@ -0,0 +1,6 @@
+
+self.addEventListener('install', function (e) {
+    console.log('[Service Worker] Install');
+    
+});
+

public/beiyingzhihui/TemplateData/style.css

@@ -0,0 +1,5 @@
+body { padding: 0; margin: 0 }
+#unity-container { position: fixed; width: 100%; height: 100%; }
+#unity-canvas { width: 100%; height: 100%; background: #231F20 }
+#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
+#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

public/beiyingzhihui/index.css

@@ -0,0 +1,63 @@
+.save-image-block {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.save-image-backgroup {
+    opacity: 0;
+    pointer-events: none;
+}
+
+#unity-loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#unity-loading-paper {
+    position: absolute;
+}
+
+#unity-loading-brush {
+    position: absolute;
+}
+
+#unity-loading-bg {
+    position: absolute;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
+#unity-loading-video {
+    position: absolute;
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+}
+
+#unity-loading-progress{
+    position: absolute;
+    width: 30vh;
+    height: 30vh;
+}
+
+#unity-loading-progress-text{
+    position: relative;
+    left: 5px;
+    top: -9px;
+    z-index: 10;
+    color: #fff;
+}

public/beiyingzhihui/index.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title></title>
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/style.css">
+    <link rel="manifest" href="manifest.webmanifest">
+    <link rel="stylesheet" href="./index.css">
+  </head>
+  <body>
+    <div id="unity-container">
+      <canvas id="unity-canvas" tabindex="-1"></canvas>
+
+      <div id="unity-loading">
+        <span id="unity-loading-progress-text"></span>
+      </div>
+      
+      <div id="unity-warning"> </div>
+    </div>
+
+    <div class="save-image-block">
+      <img src="" class="save-image-backgroup" alt="">
+    </div>
+    <script>
+
+      let container = document.querySelector("#unity-container");
+      let canvas = document.querySelector("#unity-canvas");
+      let 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';
+        }
+        let 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();
+      }
+
+      let buildUrl = "Build";
+      let loaderUrl = buildUrl + "/Build.loader.js";
+      let config = {
+        dataUrl: buildUrl + "/Build.data.unityweb",
+        frameworkUrl: buildUrl + "/Build.framework.js.unityweb",
+        codeUrl: buildUrl + "/Build.wasm.unityweb",
+        streamingAssetsUrl: "StreamingAssets",
+        companyName: "FDage",
+        productName: "Chenzhebei-ShanxiMuseum",
+        productVersion: "0.1.0",
+        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:
+        let 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);
+      }
+
+
+      let isShowLoading = true;
+      const loadingDom = document.querySelector('#unity-loading');
+      const progressText = document.querySelector('#unity-loading-progress-text');
+
+      progressText.innerHTML = "0%";
+      let opacity = 1;
+      function fadeOutVideo(){
+        if (opacity > 0) {
+          setTimeout(function() {
+            opacity = opacity - 0.05;
+            fadeOutVideo();
+          }, 20)
+        } else {
+          window.removeEventListener('resize', refreshLoadingPaperBlockSize);
+          loadingDom.remove();
+        }
+      }
+
+      let script = document.createElement("script");
+      script.src = loaderUrl;
+      script.onload = () => {
+        createUnityInstance(canvas, config, (progress) => {
+          progressText.innerHTML = parseInt(progress * 100) + "%";
+        }).then((unityInstance) => {
+          window.unityInstance = unityInstance;
+          fadeOutVideo();
+        }).catch((message) => {
+          alert(message);
+        });
+      };
+      document.body.appendChild(script);
+
+      function refreshLoadingPaperBlockSize() {
+        // Unity画布宽高比
+        const unityCanvasWidth = 1515;
+        const unityCanvasHeight = 780;
+
+        const unityPanelWidth = 1150;
+        const unityPanelHeight = 740;
+        const unityPanelOffsetY = 0;
+        const unityPanelOffsetX = 0;
+
+        const unityPanelBrushWidth = 462;
+        const unityPanelBrushHeight = 608;
+        const unityPanelBrushOffsetY = -115;
+        const unityPanelBrushOffsetX = 555;
+        
+        const innerWidth = window.innerWidth;
+        const innerHeight = window.innerHeight;
+
+        const scale = (unityCanvasWidth / unityPanelHeight) >
+        (innerWidth / innerHeight) ? (innerWidth / unityCanvasWidth) : (innerHeight / unityCanvasHeight);
+
+        loadingPaperDom.style.width = (unityPanelWidth * scale) + 'px';
+        loadingPaperDom.style.height = (unityPanelHeight * scale) + 'px';
+        loadingBrushDom.style.width = (unityPanelBrushWidth * scale) + 'px';
+        loadingBrushDom.style.height = (unityPanelBrushHeight * scale) + 'px';
+
+        if (unityPanelOffsetY > 0) {
+          loadingPaperDom.style.marginTop = (unityPanelOffsetY * scale * 2) + 'px';
+        } else {
+          loadingPaperDom.style.marginBottom = (-unityPanelOffsetY * scale * 2) + 'px';
+        }
+
+        if (unityPanelOffsetX > 0) {
+          loadingPaperDom.style.marginLeft = (unityPanelOffsetX * scale * 2) + 'px';
+        } else {
+          loadingPaperDom.style.marginRight = (-unityPanelOffsetX * scale * 2) + 'px';
+        }
+
+        if (unityPanelBrushOffsetY > 0) {
+          loadingBrushDom.style.marginTop = (unityPanelBrushOffsetY * scale * 2) + 'px';
+        } else {
+          loadingBrushDom.style.marginBottom = (-unityPanelBrushOffsetY * scale * 2) + 'px';
+        }
+
+        if (unityPanelBrushOffsetX > 0) {
+          loadingBrushDom.style.marginLeft = (unityPanelBrushOffsetX * scale * 2) + 'px';
+        } else {
+          loadingBrushDom.style.marginRight = (-unityPanelBrushOffsetX * scale * 2) + 'px';
+        }
+      }
+
+      refreshLoadingPaperBlockSize();
+      window.addEventListener('resize', refreshLoadingPaperBlockSize);
+    </script>
+    <script src="./index.js"></script>
+  </body>
+</html>

public/beiyingzhihui/index.js

@@ -0,0 +1,58 @@
+const saveDom = document.querySelector('.save-image-backgroup');
+let isShowSaveDom = false;
+
+window.onDownload = function (base64string) {
+    if (window.isMobile()){
+        saveDom.src = 'data:image/png;base64,' + base64string;
+        saveDom.style.pointerEvents = 'auto';
+        isShowSaveDom = true;
+        refreshShareBlockSize();
+    } else {
+        let link = document.createElement('a');
+        link.href = 'data:image/png;base64,' + base64string;
+        link.download = 'image';
+        link.click();
+    }
+}
+
+window.onCancelDownload = function() {
+    if (isShowSaveDom){
+        saveDom.src = '';
+        saveDom.style.pointerEvents = 'none';
+        isShowSaveDom = false;
+    }
+}
+
+window.isMobile = function () {
+    return navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
+}
+
+
+function refreshShareBlockSize() {
+
+    // Unity画布宽高比
+    let unityCanvasWidth = 1515;
+    let unityCanvaslHeight = 780;
+    let unityPanelWidth = 1150;
+    let unityPanelHeight = 740;
+    let unityPanelOffsetY = 0;
+
+    let innerWidth = window.innerWidth;
+    let innerHeight = window.innerHeight;
+
+    let scale = (unityCanvasWidth / unityPanelHeight) >
+    (innerWidth / innerHeight) ? (innerWidth / unityCanvasWidth) : (innerHeight / unityCanvaslHeight);
+
+    saveDom.style.width = (unityPanelWidth * scale) + 'px';
+    saveDom.style.height = (unityPanelHeight * scale) + 'px';
+
+    if (unityPanelOffsetY > 0){
+        saveDom.style.marginTop = (unityPanelOffsetY * scale * 2) + 'px';
+    } else {
+        saveDom.style.marginBottom = (-unityPanelOffsetY * scale * 2) + 'px';
+    }
+}
+
+window.addEventListener('resize', ()=>{
+    if (isShowSaveDom) refreshShareBlockSize();
+});

public/beiyingzhihui/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+    "name": {{{ JSON.stringify(PRODUCT_NAME) }}},
+    "short_name": {{{ JSON.stringify(PRODUCT_NAME) }}},
+    "start_url": "index.html",
+    "display": "fullscreen",
+    "background_color": "{{{ BACKGROUND_COLOR }}}",
+    "theme_color": "{{{  SPLASH_SCREEN_STYLE.toLowerCase() === 'light' ? '#fff' : '#000' }}}",
+    "description": {{{ JSON.stringify(PRODUCT_DESCRIPTION) }}},
+    "icons": [{
+      "src": "TemplateData/icons/unity-logo-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }]
+  }

public/myData/myData.js

@@ -57,7 +57,7 @@ const myDataTemp = {
     },
     {
       title: '尺寸',
-      text: '碑身：高120、宽67、厚23厘米。<br/>佛龛：高50、宽39、深9厘米。<br/>佛像：高47厘米。'
+      text: '碑身：高120、宽67、厚23厘米<br/>佛龛：高50、宽39、深9厘米<br/>佛像：高47厘米'
     }
   ],
   detail_modal: {

src/App.tsx

@@ -26,6 +26,9 @@ const A6ybwx = React.lazy(() => import('./pages/A6ybwx'))
 const A7Wjwj = React.lazy(() => import('./pages/A7wjwj'))
 const A6_1_zxys = React.lazy(() => import('./pages/A6ybwx/A6_1_zxys'))
 const A6_2_zxzgh = React.lazy(() => import('./pages/A6ybwx/A6_2_zxzgh'))
+const A8byzh = React.lazy(() => import('./pages/A8byzh'))
+
+
 
 declare global {
   //设置全局属性
@@ -169,12 +172,10 @@ export default function App() {
   const handleHashChange = () => {
     if (window.location.hash === '#/base') {
       callIframeFu('changePanel', 0)
-      callIframeFu('showInscription', -1)
       callIframeFu('showHotspot', -1)
     }
     if (window.location.hash === '#/yblm') {
       callIframeFu('changePanel', 1)
-      callIframeFu('showInscription', -1)
       callIframeFu('showHotspot', -1)
     }
     if (window.location.hash === '#/beie') {
@@ -185,7 +186,7 @@ export default function App() {
       callIframeFu('changePanel', 3)
       callIframeFu('showInscription', -1)
     }
-    if (window.location.hash === '#/wenwu') {
+    if (window.location.hash.includes('#/wenwu')) {
       callIframeFu('changePanel', 4)
       callIframeFu('showInscription', -1)
       callIframeFu('showHotspot', -1)
@@ -199,333 +200,333 @@ export default function App() {
   }, [])
 
   // 更新unity页面
-  useEffect(() => {
-    if (envFlag) {
-      window.addEventListener('keyup', e => {
-        if (e.code === 'Enter') {
-          callIframeFu(
-            'refreshAppSettings',
-            JSON.stringify(
-              {
-              panels: [
-                {
-                  name: 'DefaultVirtualCamera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0,
-                  offset: -10,
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: 'Panel1Camera',
-                  cameraOrthographicSize: 4,
-                  viewportX: 0.5,
-                  offset: -10,
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: 'Panel2Camera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0,
-                  offset: -10,
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: 'Panel3Camera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0,
-                  offset: -10,
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: 'Panel4Camera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0,
-                  offset: -10,
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: 0,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: 'Panel5Camera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0.5,
-                  offset: 0,
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  },
-                  rotationNotAllowed: true
-                }
-              ],
-              hotspots: [
-                {
-                  name: '佛龛',
-                  camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
-                    position: {
-                      y: 1.1,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '佛像',
-                  camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
-                    position: {
-                      y: 0,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '佛龛两侧',
-                  camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
-                    position: {
-                      y: 0,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '佛龛上部',
-                  camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
-                    position: {
-                      y: 2,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '佛龛下部',
-                  camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
-                    position: {
-                      y: -1,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -180,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '畏兽',
-                  camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
-                    position: {
-                      y: 2,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -90,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '飞天',
-                  camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
-                    position: {
-                      y: 0,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -90,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '摩尼宝珠',
-                  camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
-                    position: {
-                      y: -1,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: -90,
-                      z: 0
-                    }
-                  }
-                }
-              ],
-              inscriptions: [
-                {
-                  name: '碑额',
-                  camera: {
-                    cameraOrthographicSize: 2,
-                    viewportX: 0,
-                    offset: 0,
-                    position: {
-                      y: 4.4,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: 0,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '碑文1',
-                  camera: {
-                    cameraOrthographicSize: 2,
-                    viewportX: 0,
-                    offset: 0,
-                    position: {
-                      y: 3.6,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: 0,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '碑文2',
-                  camera: {
-                    cameraOrthographicSize: 9,
-                    viewportX: 0,
-                    offset: -10,
-                    position: {
-                      y: 0,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: 0,
-                      z: 0
-                    }
-                  }
-                },
-                {
-                  name: '碑文3',
-                  camera: {
-                    cameraOrthographicSize: 9,
-                    viewportX: 0,
-                    offset: -10,
-                    position: {
-                      y: 0,
-                      z: -50
-                    }
-                  },
-                  model: {
-                    rotation: {
-                      x: 0,
-                      y: 0,
-                      z: 0
-                    }
-                  }
-                }
-              ]
-            }),'json'
-          )
-        }
-      })
-    }
-  }, [])
+  // useEffect(() => {
+  //   if (envFlag) {
+  //     window.addEventListener('keyup', e => {
+  //       if (e.code === 'Enter') {
+  //         callIframeFu(
+  //           'refreshAppSettings',
+  //           JSON.stringify(
+  //             {
+  //               panels: [
+  //                 {
+  //                   name: 'DefaultVirtualCamera',
+  //                   cameraOrthographicSize: 9,
+  //                   viewportX: 0,
+  //                   offset: -10,
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: 'Panel1Camera',
+  //                   cameraOrthographicSize: 4,
+  //                   viewportX: 0.5,
+  //                   offset: -10,
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: 'Panel2Camera',
+  //                   cameraOrthographicSize: 9,
+  //                   viewportX: 0,
+  //                   offset: -10,
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: 'Panel3Camera',
+  //                   cameraOrthographicSize: 9,
+  //                   viewportX: 0,
+  //                   offset: -10,
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: 'Panel4Camera',
+  //                   cameraOrthographicSize: 9,
+  //                   viewportX: 0,
+  //                   offset: -10,
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: 0,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: 'Panel5Camera',
+  //                   cameraOrthographicSize: 9,
+  //                   viewportX: 0.5,
+  //                   offset: 0,
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   },
+  //                   rotationNotAllowed: true
+  //                 }
+  //               ],
+  //               hotspots: [
+  //                 {
+  //                   name: '佛龛',
+  //                   camera: {
+  //                     cameraOrthographicSize: 5,
+  //                     viewportX: 0.5,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: 1.1,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '佛像',
+  //                   camera: {
+  //                     cameraOrthographicSize: 5,
+  //                     viewportX: 0.5,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: 0,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '佛龛两侧',
+  //                   camera: {
+  //                     cameraOrthographicSize: 5,
+  //                     viewportX: 0.5,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: 0,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '佛龛上部',
+  //                   camera: {
+  //                     cameraOrthographicSize: 5,
+  //                     viewportX: 0.5,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: 2,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '佛龛下部',
+  //                   camera: {
+  //                     cameraOrthographicSize: 5,
+  //                     viewportX: 0.5,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: -1,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -180,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '畏兽',
+  //                   camera: {
+  //                     cameraOrthographicSize: 5,
+  //                     viewportX: 0.5,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: 2,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -90,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '飞天',
+  //                   camera: {
+  //                     cameraOrthographicSize: 5,
+  //                     viewportX: 0.5,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: 0,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -90,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '摩尼宝珠',
+  //                   camera: {
+  //                     cameraOrthographicSize: 5,
+  //                     viewportX: 0.5,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: -1,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: -90,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 }
+  //               ],
+  //               inscriptions: [
+  //                 {
+  //                   name: '碑额',
+  //                   camera: {
+  //                     cameraOrthographicSize: 2,
+  //                     viewportX: 0,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: 4.4,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: 0,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '碑文1',
+  //                   camera: {
+  //                     cameraOrthographicSize: 2,
+  //                     viewportX: 0,
+  //                     offset: 0,
+  //                     position: {
+  //                       y: 3.6,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: 0,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '碑文2',
+  //                   camera: {
+  //                     cameraOrthographicSize: 9,
+  //                     viewportX: 0,
+  //                     offset: -10,
+  //                     position: {
+  //                       y: 0,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: 0,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 },
+  //                 {
+  //                   name: '碑文3',
+  //                   camera: {
+  //                     cameraOrthographicSize: 9,
+  //                     viewportX: 0,
+  //                     offset: -10,
+  //                     position: {
+  //                       y: 0,
+  //                       z: -50
+  //                     }
+  //                   },
+  //                   model: {
+  //                     rotation: {
+  //                       x: 0,
+  //                       y: 0,
+  //                       z: 0
+  //                     }
+  //                   }
+  //                 }
+  //               ]
+  //             }), 'json'
+  //         )
+  //       }
+  //     })
+  //   }
+  // }, [])
 
   return (
     <>
@@ -543,6 +544,7 @@ export default function App() {
             <Route path='/wjwj' component={A7Wjwj} exact />
             <Route path='/zxys' component={A6_1_zxys} exact />
             <Route path='/sinicize' component={A6_2_zxzgh} exact />
+            <Route path='/byzh' component={A8byzh} exact />
             <Route path='*' component={NotFound} />
           </Switch>
         </React.Suspense>

src/assets/styles/base.css

@@ -226,7 +226,7 @@ textarea {
   }
   #root .ant-tooltip {
     transform: rotate(0) !important;
-    inset: 4.331px auto auto 399.25px !important;
+    inset: 4.331px auto auto 417.25px !important;
     width: 410px !important;
     height: 150px !important;
     max-width: 440px !important;
@@ -236,11 +236,11 @@ textarea {
   }
   #root .ant-tooltip .tooltip_MT .top {
     width: 100%;
-    height: 30px !important;
+    height: 22px !important;
   }
   #root .ant-tooltip .tooltip_MT .top .title {
     width: 80px !important;
-    font-size: 16px !important;
+    font-size: 15px !important;
     line-height: 30px !important;
   }
   #root .ant-tooltip .tooltip_MT .top .close {
@@ -256,9 +256,10 @@ textarea {
     object-fit: contain;
   }
   #root .ant-tooltip .tooltip_MT .content {
-    font-size: 16px !important;
-    line-height: 18px !important;
-    height: calc(100% - 50px) !important;
+    font-size: 14px !important;
+    line-height: 20px !important;
+    font-weight: 400 !important;
+    height: calc(100% - 30px) !important;
   }
   body #A7Back {
     transform: rotate(90deg);

src/assets/styles/base.less

@@ -294,7 +294,7 @@ textarea {
 
   #root .ant-tooltip {
     transform: rotate(0) !important;
-    inset: 4.331px auto auto 399.25px !important;
+    inset: 4.331px auto auto 417.25px !important;
     width: 410px !important;
     height: 150px !important;
     max-width: 440px !important;
@@ -309,11 +309,11 @@ textarea {
 
     .top {
       width: 100%;
-      height: 30px !important;
+      height: 22px !important;
 
       .title {
         width: 80px !important;
-        font-size: 16px !important;
+        font-size: 15px !important;
         line-height: 30px !important;
       }
 
@@ -332,9 +332,10 @@ textarea {
       }
     }
     .content {
-      font-size: 16px !important;
-      line-height: 18px !important;
-      height: calc(100% - 50px) !important;
+      font-size: 14px !important;
+      line-height: 20px !important;
+      font-weight: 400 !important;
+      height: calc(100% - 30px) !important;
     }
   }
 

src/components/MenuSider/index.tsx

@@ -67,7 +67,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
               </div>
             </div>
             <div className='icon'>
-              <div className='paint'>
+              <div className='paint' onClick={() => window.location.replace('#/byzh')}>
                 <img src={require('@/assets/img/icon_paint.png')} alt='' />
                 <div className='txt'>碑影智绘</div>
               </div>

src/pages/A0base/index.module.scss

@@ -164,7 +164,6 @@
 
     /* 先导片 */
     .guideVideo {
-      
       display: none !important;
 
       width: 50px;
@@ -230,11 +229,12 @@
       }
 
       .text {
-        color: black;
-        font-size: 18px;
+        font-size: 16px;
         line-height: 24px;
-        letter-spacing: 1px;
+        letter-spacing: 2px;
+        color: #504e40;
         text-align: justify;
+        font-weight: 400;
       }
 
       .btn {
@@ -244,7 +244,6 @@
         &::before {
           left: 72px;
           top: 30px;
-       
         }
       }
     }

src/pages/A0base/index.tsx

@@ -46,11 +46,11 @@ function A0base() {
 
       {/* 互动 */}
       <div className='interact'>
-        <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`} onClick={() => setShowIsDev(true)}>
+        <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`} >
 
-          <div className='inter'>碑影智绘</div>
-          <div className='inter'>展览图谱</div>
-          <div className='inter'>AI问答</div>
+          <div className='inter' onClick={() => window.location.replace('#/byzh')}>碑影智绘</div>
+          <div className='inter' onClick={() => setShowIsDev(true)}>展览图谱</div>
+          <div className='inter' onClick={() => setShowIsDev(true)}>AI问答</div>
         </div>
 
         <div className='icon' onClick={() => setIsOpenInteract(!isOpenInteract)}>

src/pages/A1home/index.tsx

@@ -6,6 +6,7 @@ import { isPc } from '@/utils/http'
 function A1home() {
   // 点击进入
   const [baseFlag, setBaseFlag] = useState(false)
+  const [isClickedSkip, setIsClickedSkip] = useState(false)
 
   // 初始视频
   useEffect(() => {
@@ -54,7 +55,7 @@ function A1home() {
         onPlay: () => { }, // 触发播放事件
         onPause: () => { }, // 触发暂停事件
         onEnded: () => {
-          window.location.replace('#/base')
+          if (!isClickedSkip) window.location.replace('#/base')
         }, // 触发播放结束事件
         onSourceEstablished: () => {
           setTimeout(() => {
@@ -101,14 +102,17 @@ function A1home() {
         <div className='Aloding'>
           <div className='AlodingT'>
             <div className='AlodingT1' style={{ width: `${loding}%` }}></div>
-            <img className='AlodingT2' style={{left: `${loding}%`}} src={require('@/assets/sgImg/icon_skip.png')} alt="" />
+            <img className='AlodingT2' style={{ left: `${loding}%` }} src={require('@/assets/sgImg/icon_skip.png')} alt="" />
           </div>
         </div>
       ) : null}
 
       <div className={classNames('A1video', loding >= 100 ? 'A1videoShow' : '')}>
         <div className='A1videoBox'></div>
-        <div className='A1videoBtn' onClick={() => window.location.replace('#/base')}>跳过</div>
+        <div className='A1videoBtn' onClick={() => {
+          setIsClickedSkip(true)
+          window.location.replace('#/base')
+        }}>跳过</div>
       </div>
     </div>
   )

src/pages/A2yblm/components/Detail/index.module.scss

@@ -16,6 +16,20 @@
       justify-content: center;
       gap: 30px;
 
+      .detail_line {
+        position: absolute;
+        top: 42%;
+        left: 73%;
+        transform: translate(-50%, -50%);
+        width: 4px;
+        height: 84%;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
       .detail_top,
       .detail_bottom {
         width: 100%;
@@ -40,11 +54,11 @@
             cursor: pointer;
             position: relative;
             .selectedBg {
-              width: 100%;
+              width: 120px;
               height: 100%;
               position: absolute;
-              top: -7%;
-              left: 33%;
+              top: -30%;
+              left: 31%;
               z-index: -1;
               & > img {
                 width: 100%;
@@ -66,13 +80,17 @@
           .split {
             width: 2px;
             height: 100%;
-            border-right: 1px dashed rgba(255, 255, 255, 1);
           }
           .txt {
             width: 40px;
             font-size: 15px;
+            writing-mode: vertical-rl;
+            text-orientation: upright;
             text-align: right;
-            color: #fff;
+            color: rgba(255, 233, 182, 1);
+          }
+          .txtActive {
+            color: rgba(255, 252, 246, 0.8);
           }
         }
       }
@@ -81,19 +99,19 @@
 }
 
 // ---------移动端
-.detailMo{
+.detailMo {
   :global {
     .selectContainner {
-      &>div {
-        &>div {
+      & > div {
+        & > div {
           .txt {
             font-size: 18px !important;
           }
-          .item{
+          .item {
             font-size: 18px !important;
           }
         }
       }
     }
   }
-}
+}

src/pages/A2yblm/components/Detail/index.tsx

@@ -28,8 +28,11 @@ function Detail({ currentTagIndex, setCurrentTagIndex, setIsShowTag }: DetailPro
   }
 
   return (
-    <div className={classNames(styles.detail,isPc?'':styles.detailMo)}>
+    <div className={classNames(styles.detail, isPc ? '' : styles.detailMo)}>
       <div className="selectContainner">
+        <div className="detail_line">
+          <img src={require(`@/assets/img/A2_line_${currentTagIndex >= myData.detail_modal.top.length ? 'beice.png' : 'beiyang.png'}`)} alt="" />
+        </div>
         <div className="detail_top">
           <div className="topL">
             {myData.detail_modal.top.map((item, index) => (
@@ -54,7 +57,7 @@ function Detail({ currentTagIndex, setCurrentTagIndex, setIsShowTag }: DetailPro
         </div>
           <div className="topR">
             <div className="split"></div>
-            <div className="txt">碑侧</div>
+            <div className={`txt ${currentTagIndex >= myData.detail_modal.top.length ? 'txtActive' : ''}`}>碑侧</div>
           </div></div>
       </div>
 

src/pages/A2yblm/components/Intro/index.module.scss

@@ -16,7 +16,7 @@
       width: 100px;
       height: 50px;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -30,24 +30,36 @@
       color: #fff;
 
       .label {
+        position: relative;
+        height: fit-content;
         font-size: 12px;
         font-weight: bold;
         white-space: nowrap;
         width: 40px;
         text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+        &::after {
+          content: '';
+          width: 28px;
+          height: 4px;
+          position: absolute;
+          z-index: -1;
+          top: 50%;
+          left: 50%;
+          transform: translate(-57%, 147%);
+          background-color: rgba(124, 75, 54, 1);
+          box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+        }
       }
 
       .content {
         width: calc(100% - 40px);
         color: rgba(255, 255, 255, 1);
         font-size: 12px;
-        font-weight: lighter;
       }
     }
   }
 }
 
-
 // --------移动端-----
 .IntroMo {
   padding-top: 30px;
@@ -59,16 +71,15 @@
     }
 
     .info {
-      &:last-child{
+      &:last-child {
         margin-bottom: 15px;
       }
       .label {
         font-size: 16px;
       }
-      .content{
+      .content {
         font-size: 16px;
-        text-align: justify;
       }
     }
   }
-}
+}

src/pages/A2yblm/components/ModalTxt/index.module.scss

@@ -57,7 +57,9 @@
           }
         }
 
-        .tab {
+        .tab0,
+        .tab1,
+        .tab2 {
           width: fit-content;
           min-width: 70px;
           height: 50px;
@@ -230,10 +232,18 @@
 
 // -----------移动端
 .modalTxtMo {
+  transform: translate(-4%, -50%);
+
   :global {
     .modalTxtContainner {
       .topBar {
+        padding-left: 0;
+        padding-right: 0;
+        justify-content: left;
+        width: 72%;
         .beie {
+          top: 11px;
+          left: -97px;
           height: 60px;
           width: 120px;
 
@@ -247,7 +257,9 @@
           }
         }
 
-        .tab {
+        .tab1,
+        .tab2,
+        .tab0 {
           height: 60px;
 
           img {
@@ -255,9 +267,26 @@
           }
 
           .txt {
+            width: 100%;
             font-size: 14px;
           }
         }
+        .tab0 {
+          width: 84px;
+        }
+        .tab1 {
+          width: 140px;
+          padding-left: 10px;
+          .tabNub {
+            transform: translate(-27%, -50%) !important;
+          }
+        }
+        .tab2 {
+          width: 60px;
+          .tabNub {
+            transform: translate(-50%, -50%) !important;
+          }
+        }
       }
 
       .content {
@@ -269,17 +298,24 @@
           line-height: 20px;
           font-size: 16px;
           line-height: 24px;
+          & > p {
+            padding-bottom: 10px;
+          }
         }
       }
 
       .intro {
-        font-size: 16px;
-        line-height: 18px;
+        font-size: 15px;
+        line-height: 21px;
+
+        font-weight: 400;
+        color: #504e40;
       }
 
       .detailTxt {
         .title {
-          font-size: 18px !important;
+          font-size: 16px !important;
+          line-height: 0px !important;
         }
 
         .txt {

src/pages/A2yblm/components/ModalTxt/index.tsx

@@ -22,10 +22,13 @@ function ModalTxt({
     selectedTabRef.current = selectedTab
   }, [selectedTab])
 
+  useEffect(() => {
+    console.log(selectedTab, ',============')
+  }, [selectedTab])
+
   const [activeAId, setActiveAId] = useState<number | null>(null)
   const [showTooltip, setShowTooltip] = useState(-1)
 
-  const content_touchStartX = useRef(0)
   const originRef = useRef<any>(null)
   const translateRef = useRef<any>(null)
   const contentRef = useRef<any>(null)
@@ -34,6 +37,9 @@ function ModalTxt({
     if (selectedTab !== 0) {
       setIsShowMzmTitle(true)
       setIsShowTabBar(false)
+    } else {
+      setIsShowMzmTitle(false)
+      setIsShowTabBar(true)
     }
   }, [selectedTab, setIsShowMzmTitle, setIsShowTabBar])
 
@@ -247,8 +253,8 @@ function ModalTxt({
             </div>
           </div>
 
-          {modalTxtTab.map(item => (
-            <div key={item.key} className='tab' onClick={() => handleTabClick(item.key, item.name)}>
+          {modalTxtTab.map((item, index) => (
+            <div key={item.key} className={`tab${index}`} onClick={() => handleTabClick(item.key, myData.readDetail[index]?.mzmtz?.title)}>
               <img
                 src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === item.key ? '_ac' : ''
                   }.png`)}
@@ -312,13 +318,10 @@ function ModalTxt({
             <div className='title myFont'>碑文概述</div>
             <div className='text'>
               <p>
-                碑额留出高约15厘米的空白范围，仅在碑额左侧题写造碑日期。《山
-                西通志》指出：其“碑额题‘大魏天平元年岁次甲寅十一月庚辰朔三日壬午造讫’
-                岁月书额，唐贞观晋祠铭以前，此为仅见”。
+                碑额留出高约15厘米的空白范围，仅在碑额左侧题写造碑日期。《山西通志》指出：其“碑额题‘大魏天平元年岁次甲寅十一月庚辰朔三日壬午造讫’岁月书额，唐贞观晋祠铭以前，此为仅见”。
               </p>
               <p>
-                程哲碑碑文，31行楷书，满行45字，字径约2厘米，带方界格，总计
-                1404字；未刻正式碑名。通篇颂德程氏家族的历史功绩。
+                程哲碑碑文，31行楷书，满行45字，字径约2厘米，带方界格，总计1404字；未刻正式碑名。通篇颂德程氏家族的历史功绩。
               </p>
             </div>
           </div>

src/pages/A2yblm/index.module.scss

@@ -51,7 +51,7 @@
       left: 4%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -67,7 +67,7 @@
       left: 4%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -83,7 +83,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      background-color: rgba(0, 0, 0, 0.7);
+      background-color: rgba(0, 0, 0, 0.5);
       border-radius: 15px;
       padding: 0 8px;
       cursor: pointer;
@@ -92,7 +92,7 @@
         width: 20px;
         height: 100%;
 
-        &>img {
+        & > img {
           height: 100%;
           object-fit: contain;
         }
@@ -140,7 +140,7 @@
           height: 50px;
           cursor: pointer;
 
-          &>img {
+          & > img {
             height: 100%;
             object-fit: contain;
           }
@@ -153,9 +153,9 @@
         line-height: 15px;
         font-weight: lighter;
         color: rgba(255, 255, 255, 1);
-        letter-spacing: 4px;
+        letter-spacing: 2px;
 
-        &>p {
+        & > p {
           padding-bottom: 15px;
         }
       }
@@ -163,7 +163,7 @@
 
     // sider内容
     .sider1 {
-      width: 35%;
+      width: 38%;
       height: 100%;
       position: absolute;
       z-index: 1;
@@ -204,21 +204,25 @@
 
     // 图像赏析的tag
     .tagInfo {
+      padding: 10px 0;
       position: absolute;
       z-index: 1;
-      top: 33%;
+      top: 26%;
       left: 14%;
-      width: 200px;
-      height: 260px;
+      width: 219px;
+      height: 266px;
       display: flex;
       flex-direction: column;
-
+      background: url('../../assets/img/A2_detail_bg.png') no-repeat center center;
+      background-size: 100% 100%;
       .top {
+        padding-right: 10px;
         width: 100%;
         height: 30px;
         display: flex;
         align-items: center;
-
+        justify-content: flex-end;
+        position: relative;
         .title {
           width: fit-content;
           max-width: 120px;
@@ -230,27 +234,38 @@
           display: flex;
           align-items: center;
           gap: 2px;
-
-          .dot {
-            font-size: 5px;
-          }
         }
-
-        .line {
-          width: 0;
-          flex: 1;
+      }
+      .arrow {
+        width: 100px;
+        position: absolute;
+        top: 10%;
+        left: 118%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        align-items: center;
+        .tagInfoLine1 {
+          width: 35px;
           height: 1px;
           border-top: 1px dashed rgba(124, 75, 54, 1);
         }
+        .tagInfoLine2 {
+          width: 45px;
+          height: 1px;
+          border-top: 1px dashed rgb(255, 233, 182);
+        }
 
         .icon {
-          width: 15px;
-          height: 15px;
+          width: 10px;
+          height: 10px;
           display: flex;
           align-items: center;
           justify-content: center;
-
-          &>img {
+          .dot {
+            color: rgb(255, 233, 182);
+            font-size: 5px;
+          }
+          & > img {
             width: 100%;
             height: 100%;
             object-fit: contain;
@@ -259,13 +274,27 @@
       }
 
       .content {
-        margin-top: 15px;
-        width: 70%;
+        width: 100%;
+        padding: 0 10px;
         height: 110px;
-        padding-right: 6px;
         overflow-y: auto;
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 1) 0%,
+          rgba(0, 0, 0, 1) 80%,
+          /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
+        );
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 1) 0%,
+          rgba(0, 0, 0, 1) 80%,
+          rgba(0, 0, 0, 0) 100%
+        );
+        &::-webkit-scrollbar {
+          width: 0px;
+        }
 
-        &>div {
+        & > div {
           color: #595547;
           width: 100%;
           height: 100%;
@@ -313,7 +342,7 @@
     .tagInfo {
       .top {
         .title {
-          font-size: 22px;
+          font-size: 20px;
 
           .dot {
             font-size: 10px;
@@ -322,28 +351,33 @@
       }
 
       .content {
+        margin-top: 5px;
         height: 240px;
 
-        &>div {
+        & > div {
           width: 100%;
           height: 100%;
-          line-height: 18px;
-
           font-size: 16px;
+          line-height: 24px;
+          letter-spacing: 2px;
+          color: #504e40;
+          font-weight: 400;
         }
       }
     }
 
     .extra {
-      width: auto;
+      width: fit-content;
+      bottom: 20%;
+      border-radius: 20px;
       height: 40px;
-
+      gap: 5px;
       .icon {
-        width: 30px;
+        width: 28px;
       }
 
       .txt {
-        font-size: 16px;
+        font-size: 14px;
       }
     }
 
@@ -360,9 +394,12 @@
       }
 
       .content {
-        font-size: 18px;
+        font-size: 16px;
         line-height: 24px;
+        letter-spacing: 3px;
+        font-weight: 400;
+        text-align: justify;
       }
     }
   }
-}
+}

src/pages/A2yblm/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 import styles from './index.module.scss'
 import { callIframeFu } from '@/utils/history'
 import Intro from '@/pages/A2yblm/components/Intro'
@@ -11,19 +11,19 @@ import classNames from 'classnames'
 function A2yblm() {
   const [currentTab, setCurrentTab] = useState('tab1')
 
-  useEffect(()=>{
-    
-    const urlAll =window.location.href
+  useEffect(() => {
+
+    const urlAll = window.location.href
 
-    if(urlAll.includes('?m=')){
-      const urlTab =urlAll.split('?m=')[1]
+    if (urlAll.includes('?m=')) {
+      const urlTab = urlAll.split('?m=')[1]
       setCurrentTab(urlTab)
     }
-  },[])
+  }, [])
 
   const [isShowTabBar, setIsShowTabBar] = useState(true)
   const [isShowMzmTitle, setIsShowMzmTitle] = useState(false)
-
+  const previousTab = useRef(currentTab);
 
   const [isOpenMzm, setIsOpenMzm] = useState(false)
   const [currentTagIndex, setCurrentTagIndex] = useState(1)
@@ -41,6 +41,8 @@ function A2yblm() {
 
   // 退出图像赏析时调用showHotspot(-1) 退出碑文解读时调用showInscription(-1)
   useEffect(() => {
+
+
     if (currentTab === 'tab2') setIsShowTag(true)
     if (currentTab !== 'tab2') {
       setCurrentTagIndex(1)
@@ -51,14 +53,26 @@ function A2yblm() {
     if (currentTab !== 'tab3') {
       setIsShowMzmTitle(false)
       setIsShowTabBar(true)
-      callIframeFu('showInscription', -1)
+      // 仅当上一个tab是tab3时才调用
+      if (previousTab.current === 'tab3') {
+        callIframeFu('showInscription', -1)
+      }
     }
     callIframeFu('changePanel', currentTab === 'tab1' ? 1 : currentTab === 'tab2' ? 2 : 3)
+
+    previousTab.current = currentTab; // 更新前一个tab值
   }, [currentTab])
 
+  const backToBase = () => {
+    if (previousTab.current === 'tab3') {
+      callIframeFu('showInscription', -1)
+    }
+    window.location.replace('#/base')
+  }
+
 
   // 底部文字
-  const [bottomTxt,setBottomTxt] =useState('')
+  const [bottomTxt, setBottomTxt] = useState('')
 
   return (
     <div className={classNames(isPc ? '' : styles.A2yblmMo, styles.A2yblm)}>
@@ -91,7 +105,7 @@ function A2yblm() {
       </div>
 
       {/* 返回，文物鉴赏，全文鉴赏 */}
-      <div className='back' onClick={()=> window.location.replace('#/base')}>
+      <div className='back' onClick={backToBase}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
       <div className='wenwu' onClick={gotoQuanwenOrWenwu}>
@@ -155,7 +169,7 @@ function A2yblm() {
         </div>
       )}
       {currentTab === 'tab3' && (
-        <ModalTxt setBottomTxt={(val)=>setBottomTxt(val)} setIsShowTabBar={setIsShowTabBar} setIsShowMzmTitle={setIsShowMzmTitle} />
+        <ModalTxt setBottomTxt={(val) => setBottomTxt(val)} setIsShowTabBar={setIsShowTabBar} setIsShowMzmTitle={setIsShowMzmTitle} />
       )}
 
       {/* menu界面 */}
@@ -165,21 +179,25 @@ function A2yblm() {
       <div className='tagInfo' style={{ display: isShowTag ? 'flex' : 'none' }}>
         <div className='top'>
           <div className='title'>
-            <div className='dot'>●</div>
             {currentTagIndex >= myData.detail_modal.top.length
               ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].title
               : myData.detail_modal.top[currentTagIndex].title}
-            <div className='dot'>●</div>
           </div>
-          <div className='line'></div>
+        </div>
+        <div className="arrow">
+          <div className='tagInfoLine1'></div>
+          <div className='tagInfoLine2'></div>
           <div className='icon'>
-            <img src={require('@/assets/img/icon_dot2.png')} alt='' />
+            {/* <img src={require('@/assets/img/icon_dot2.png')} alt='' /> */}
+            <div className='dot'>●</div>
           </div>
         </div>
         <div className='content'>
-          <div dangerouslySetInnerHTML={{__html:currentTagIndex >= myData.detail_modal.top.length
-            ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].txt
-            : myData.detail_modal.top[currentTagIndex].txt}}></div>
+          <div dangerouslySetInnerHTML={{
+            __html: currentTagIndex >= myData.detail_modal.top.length
+              ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].txt
+              : myData.detail_modal.top[currentTagIndex].txt
+          }}></div>
         </div>
       </div>
     </div>

src/pages/A4quanwen/index.module.scss

@@ -16,7 +16,7 @@
       left: 4%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -31,7 +31,7 @@
       left: 2%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -80,7 +80,7 @@
             width: 100%;
             height: 15px;
 
-            &>img {
+            & > img {
               width: 100%;
               object-fit: contain;
             }
@@ -119,22 +119,24 @@
         object-fit: fill !important;
       }
     }
-    .highlight{
+    .highlight {
       width: 40px;
       height: 40px;
     }
 
-
     .txtContent .item {
-      .left{
-        .icon{
+      .left {
+        .icon {
           height: 24px;
         }
       }
-      .right{
+      .right {
         font-size: 16px;
-        line-height: 22px;
+        line-height: 24px;
+        letter-spacing: 2px;
+        font-weight: 400;
+        color: #504e40;
       }
     }
   }
-}
+}

src/pages/A4quanwen/index.tsx

@@ -19,13 +19,14 @@ function A4quanwen() {
 
   const gotoBack = () => {
     const urlAll = window.location.href
+    callIframeFu('openHightlight', 1)
+    callIframeFu('showInscription', -1)
     if (urlAll.includes('?m=')) {
       const tabNum = urlAll.split('?m=')[1]
 
       backPageFu(`#/yblm?m=${tabNum}`)
     } else {
       backPageFu('#/yblm')
-      callIframeFu('openHightlight', 1)
     }
   }
 

src/pages/A5wenwu/index.module.scss

@@ -143,8 +143,8 @@
   justify-content: center;
   :global {
     .close {
-      width: 100px;
-      height: 50px;
+      width: 80px;
+      height: 40px;
       position: absolute;
       z-index: 3;
       top: 6%;

src/pages/A5wenwu/index.tsx

@@ -19,6 +19,10 @@ function A5wenwu() {
     }, 2000)
   }, [])
 
+  useEffect(() => {
+    if (currentTab !== 'tab1') callIframeFu('hideSize', undefined)
+  }, [currentTab])
+
   const handleTabClick = (tab: string) => {
     if (currentTab === tab) setCurrentTab('tab0')
     else setCurrentTab(tab)
@@ -53,13 +57,13 @@ function A5wenwu() {
 
   const gotoBack = () => {
     const urlAll = window.location.href
+    callIframeFu('hideSize', undefined)
     if (urlAll.includes('?m=')) {
       const tabNum = urlAll.split('?m=')[1]
 
       backPageFu(`#/yblm?m=${tabNum}`)
     } else {
       backPageFu('#/yblm')
-      callIframeFu('hideSize', undefined)
     }
   }
 

src/pages/A6ybwx/Genealogy/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import Graph from './components/Graph'
 import MemuSider from '@/components/MenuSider'
-import SvgGraph from './components/GraphSVG'
+// import SvgGraph from './components/GraphSVG'
 function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
   const [isShowIntro, setIsShowIntro] = useState(true)
   const [currentNodeIndex, setCurrentNodeIndex] = useState(-1)

src/pages/A6ybwx/index.module.scss

@@ -75,11 +75,11 @@
           font-size: 12px;
         }
         .tab1 {
-          background: url('../../assets/img/A6_shixi.png') no-repeat center center;
+          background: url('../../assets/img/A6_fanfeng.png') no-repeat center center;
           background-size: 100% 100%;
         }
         .tab2 {
-          background: url('../../assets/img/A6_fanfeng.png') no-repeat center center;
+          background: url('../../assets/img/A6_shixi.png') no-repeat center center;
           background-size: 100% 100%;
         }
         .tab3 {

src/pages/A6ybwx/index.tsx

@@ -68,8 +68,8 @@ function A6ybwx() {
 
         <div className="BtnTabBar" style={{ display: isEnter ? 'flex' : 'none' }}>
           <div className='tab1' onClick={() => setGotoTab(1)} />
-          <div className='tab2' style={{ left: '50%' }} onClick={() => setGotoTab(2)} />
-          <div className='tab3' style={{ left: '50%' }} onClick={() => setGotoTab(3)} />
+          <div className='tab2' onClick={() => setGotoTab(2)} />
+          <div className='tab3' onClick={() => setGotoTab(3)} />
         </div>
       </div>
 

src/pages/A7wjwj/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import styles from "./index.module.scss";
 import MenuSider from "@/components/MenuSider";
 import Discover from "./conponents/Discover";

src/pages/A8byzh/index.module.scss

@@ -0,0 +1,11 @@
+.A8byzh {
+  width: 100%;
+  height: 100%;
+  :global {
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+}

src/pages/A8byzh/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+function A8byzh() {
+
+  return (
+    <div className={styles.A8byzh}>
+      <iframe src="beiyingzhihui/index.html" title="byzh" />
+    </div>
+  )
+}
+
+const MemoA8byzh = React.memo(A8byzh);
+
+export default MemoA8byzh;

src/types/function.d.ts

@@ -2,6 +2,7 @@
 declare global {
   interface Window {
     WjwjScene: boolean
+    onModelControlled: () => void
     openPoem: () => void
     backToyblm: () => void
     setIsShowPano: (isShow: boolean) => void

src/utils/history.ts

@@ -51,4 +51,8 @@ export const callIframeFu = (fuName: string, params: any,type?:string) => {
   } else {
     console.warn(`iframe 方法调用失败: 方法不存在或 iframe 未加载`);
   }
-};
+};
+
+window.onModelControlled = ()=>{
+  console.log('模型被控制');
+}