gx

public/unityMo/StreamingAssets/Settings.json

@@ -733,5 +733,17 @@
         }
       }
     }
-  ]
-}
+  ],
+  "stepBg": {
+    "showAnimationTime": 0,
+    "hideAnimationTime": 0,
+    "anchorMin": {
+      "x": 0,
+      "y": 0
+    },
+    "anchorMax": {
+      "x": 0.9,
+      "y": 0.98
+    }
+  }
+}

public/unityMo/StreamingAssets/aa/AddressablesLink/link.xml

@@ -88,9 +88,6 @@
     <type fullname="UnityEngine.Animator" preserve="all" />
     <type fullname="UnityEngine.RuntimeAnimatorController" preserve="all" />
   </assembly>
-  <assembly fullname="UnityEngine.AudioModule, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null">
-    <type fullname="UnityEngine.AudioListener" preserve="all" />
-  </assembly>
   <assembly fullname="UnityEngine.CoreModule, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null">
     <type fullname="UnityEngine.Camera" preserve="all" />
     <type fullname="UnityEngine.Cubemap" preserve="all" />

public/unityMo/StreamingAssets/aa/catalog.hash

@@ -1 +1 @@
-b977dfca9190d0f1dcc655c4789324a5
+55796b6dd866348d5aec9bb24eef85fa

public/unityMo/export_drawingBoard.js

@@ -24,10 +24,6 @@ window.onCancelDownload = function() {
     }
 }
 
-window.isMobile = function () {
-    return /(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i.test(navigator.userAgent);
-}
-
 function refreshShareBlockSize() {
     // Unity画布宽高比
     let unityCanvasWidth = 1515;

public/unityMo/export_tombstoneView.js

@@ -20,51 +20,63 @@ window.onModelControlled = function () {
 
 //更新配置
 window.refreshAppSettings = function (json) {
-    window.unityInstance.SendMessage('MainCanvas', 'RefreshAppSettings', json)
+    window.unityInstance.SendMessage('MainCanvas', 'RefreshAppSettings', json);
 }
 
 //设置模型自动旋转, 0代表不自动旋转
 window.setModelAutoRotation = function(speed){
     if (speed != 0) window.resetModel();
-    window.unityInstance.SendMessage('MainCanvas', 'SetModelAutoRotation', speed)
+    window.unityInstance.SendMessage('MainCanvas', 'SetModelAutoRotation', speed);
 }
 
 //切换背景图 (0目录页, 1玄石可观, 2石上春秋, 3碑刻密码, 4模型鉴赏) 这些名字对应的蓝湖设计的标题
 window.changePanel = function (index) {
-    window.unityInstance.SendMessage('MainCanvas', 'ChangePanel', index)
+    window.unityInstance.SendMessage('MainCanvas', 'ChangePanel', index);
 }
 
 //聚焦热点, 对应玄石可观中的热点, 在调用之前需要先调用changPanel(1), 退出页面时需要调用showHotspot(-1)
 window.showHotspot = function (index) {
-    window.unityInstance.SendMessage('MainCanvas', 'ShowHotspot', index)
+    window.unityInstance.SendMessage('MainCanvas', 'ShowHotspot', index);
 }
 
 //聚焦碑文, 对应碑刻密码中的碑文, 在调用之前需要先调用changPanel(3), 退出页面时需要调用showInscription(-1)
 //参数分别对应 0碑额 1碑文第一段 2碑文第二段 3碑文第三段 10全文赏析
 window.showInscription = function (index) {
-    window.unityInstance.SendMessage('MainCanvas', 'ShowInscription', index)
+    window.unityInstance.SendMessage('MainCanvas', 'ShowInscription', index);
 }
 
 //显示或隐藏碑文, 默认是显示状态, 离开页面时如果是隐藏状态, 则需要再次调用此函数让碑文显示
 window.openHightlight = function (isShow) {
-    window.unityInstance.SendMessage('MainCanvas', 'SetInscriptionActive', isShow ? 1 : 0)
+    window.unityInstance.SendMessage('MainCanvas', 'SetInscriptionActive', isShow ? 1 : 0);
 }
 
 //显示模型尺寸(待定) 对应蓝湖设计 "文物鉴赏-尺寸"
 window.showSize = function () {
-    window.unityInstance.SendMessage('MainCanvas', 'SetSizeActive', 1)
+    window.unityInstance.SendMessage('MainCanvas', 'SetSizeActive', 1);
 }
 //隐藏模型尺寸(待定) 对应蓝湖设计 "文物鉴赏-尺寸"
 window.hideSize = function () {
-    window.unityInstance.SendMessage('MainCanvas', 'SetSizeActive', 0)
+    window.unityInstance.SendMessage('MainCanvas', 'SetSizeActive', 0);
 }
 
 //改变模型缩放, 正数为放大, 负数为缩小, 对应蓝湖设计 "文物鉴赏-尺寸" 右侧的放大缩小按钮
 window.addModelScale = function (value) {
-    window.unityInstance.SendMessage('MainCanvas', 'AddModelScale', value)
+    window.unityInstance.SendMessage('MainCanvas', 'AddModelScale', value);
 }
 
 //重置模型, 对应蓝湖设计 "文物鉴赏-尺寸" 右侧的重置按钮
 window.resetModel = function () {
-    window.unityInstance.SendMessage('MainCanvas', 'ResetModel')
-}
+    window.unityInstance.SendMessage('MainCanvas', 'ResetModel');
+}
+
+//设置子背景状态
+window.setStepBgActive = function (isShow) {
+    window.unityInstance.SendMessage('MainCanvas', 'SetStepBgActive', isShow ? 1 : 0);
+}
+
+//设置光源位置, 默认位置是30, 范围需要限制在[-60]~[+60] 之间
+window.setLightRotationY = function(value){
+    window.unityInstance.SendMessage('MainCanvas', 'SetLightRotationY', value);
+}
+
+

public/unityMo/index.html

@@ -1,39 +1,42 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<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="index.css" />
-    <link rel="stylesheet" href="TemplateData/style.css" />
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="TemplateData/style.css">
     <script src="./export_main.js"></script>
     <script src="./export_tombstoneView.js"></script>
     <script src="./export_roomScene.js"></script>
     <script src="./export_drawingBoard.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 class="save-image-block">
-        <img src="" class="save-image-background" alt="" />
-      </div>
+        <div class="save-image-block">
+            <img src="" class="save-image-background" alt="">
+        </div>
     </div>
-  </body>
-  <script>
-    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')
+</body>
+<script>
+    window.isMobile = function () {
+        return /(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i.test(navigator.userAgent);
+    }
+
+    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'.
@@ -42,36 +45,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: 'FDage',
-      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: window.isMobile() ? 1 : 0,
+        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)
@@ -81,42 +84,42 @@
     // 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(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>
+            if (window.parent && window.parent !== window) {
+                window.parent.unityLoading(1);
+            }
+        }).catch((message) => {
+            alert(message);
+        });
+    };
+    document.body.appendChild(script);
+</script>
+
+</html>

public/unityPc/StreamingAssets/Settings.json

@@ -733,5 +733,17 @@
         }
       }
     }
-  ]
-}
+  ],
+  "stepBg": {
+    "showAnimationTime": 0,
+    "hideAnimationTime": 0,
+    "anchorMin": {
+      "x": 0,
+      "y": 0
+    },
+    "anchorMax": {
+      "x": 0.9,
+      "y": 0.98
+    }
+  }
+}

public/unityPc/StreamingAssets/aa/AddressablesLink/link.xml

@@ -88,9 +88,6 @@
     <type fullname="UnityEngine.Animator" preserve="all" />
     <type fullname="UnityEngine.RuntimeAnimatorController" preserve="all" />
   </assembly>
-  <assembly fullname="UnityEngine.AudioModule, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null">
-    <type fullname="UnityEngine.AudioListener" preserve="all" />
-  </assembly>
   <assembly fullname="UnityEngine.CoreModule, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null">
     <type fullname="UnityEngine.Camera" preserve="all" />
     <type fullname="UnityEngine.Cubemap" preserve="all" />

public/unityPc/StreamingAssets/aa/catalog.hash

@@ -1 +1 @@
-e008853a118f37db8c721b717204c33d
+1742a835442fa1e8b64c2b54597ba7d8

public/unityPc/export_drawingBoard.js

@@ -24,10 +24,6 @@ window.onCancelDownload = function() {
     }
 }
 
-window.isMobile = function () {
-    return /(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i.test(navigator.userAgent);
-}
-
 function refreshShareBlockSize() {
     // Unity画布宽高比
     let unityCanvasWidth = 1515;

public/unityPc/export_tombstoneView.js

@@ -20,51 +20,63 @@ window.onModelControlled = function () {
 
 //更新配置
 window.refreshAppSettings = function (json) {
-    window.unityInstance.SendMessage('MainCanvas', 'RefreshAppSettings', json)
+    window.unityInstance.SendMessage('MainCanvas', 'RefreshAppSettings', json);
 }
 
 //设置模型自动旋转, 0代表不自动旋转
 window.setModelAutoRotation = function(speed){
     if (speed != 0) window.resetModel();
-    window.unityInstance.SendMessage('MainCanvas', 'SetModelAutoRotation', speed)
+    window.unityInstance.SendMessage('MainCanvas', 'SetModelAutoRotation', speed);
 }
 
 //切换背景图 (0目录页, 1玄石可观, 2石上春秋, 3碑刻密码, 4模型鉴赏) 这些名字对应的蓝湖设计的标题
 window.changePanel = function (index) {
-    window.unityInstance.SendMessage('MainCanvas', 'ChangePanel', index)
+    window.unityInstance.SendMessage('MainCanvas', 'ChangePanel', index);
 }
 
 //聚焦热点, 对应玄石可观中的热点, 在调用之前需要先调用changPanel(1), 退出页面时需要调用showHotspot(-1)
 window.showHotspot = function (index) {
-    window.unityInstance.SendMessage('MainCanvas', 'ShowHotspot', index)
+    window.unityInstance.SendMessage('MainCanvas', 'ShowHotspot', index);
 }
 
 //聚焦碑文, 对应碑刻密码中的碑文, 在调用之前需要先调用changPanel(3), 退出页面时需要调用showInscription(-1)
 //参数分别对应 0碑额 1碑文第一段 2碑文第二段 3碑文第三段 10全文赏析
 window.showInscription = function (index) {
-    window.unityInstance.SendMessage('MainCanvas', 'ShowInscription', index)
+    window.unityInstance.SendMessage('MainCanvas', 'ShowInscription', index);
 }
 
 //显示或隐藏碑文, 默认是显示状态, 离开页面时如果是隐藏状态, 则需要再次调用此函数让碑文显示
 window.openHightlight = function (isShow) {
-    window.unityInstance.SendMessage('MainCanvas', 'SetInscriptionActive', isShow ? 1 : 0)
+    window.unityInstance.SendMessage('MainCanvas', 'SetInscriptionActive', isShow ? 1 : 0);
 }
 
 //显示模型尺寸(待定) 对应蓝湖设计 "文物鉴赏-尺寸"
 window.showSize = function () {
-    window.unityInstance.SendMessage('MainCanvas', 'SetSizeActive', 1)
+    window.unityInstance.SendMessage('MainCanvas', 'SetSizeActive', 1);
 }
 //隐藏模型尺寸(待定) 对应蓝湖设计 "文物鉴赏-尺寸"
 window.hideSize = function () {
-    window.unityInstance.SendMessage('MainCanvas', 'SetSizeActive', 0)
+    window.unityInstance.SendMessage('MainCanvas', 'SetSizeActive', 0);
 }
 
 //改变模型缩放, 正数为放大, 负数为缩小, 对应蓝湖设计 "文物鉴赏-尺寸" 右侧的放大缩小按钮
 window.addModelScale = function (value) {
-    window.unityInstance.SendMessage('MainCanvas', 'AddModelScale', value)
+    window.unityInstance.SendMessage('MainCanvas', 'AddModelScale', value);
 }
 
 //重置模型, 对应蓝湖设计 "文物鉴赏-尺寸" 右侧的重置按钮
 window.resetModel = function () {
-    window.unityInstance.SendMessage('MainCanvas', 'ResetModel')
-}
+    window.unityInstance.SendMessage('MainCanvas', 'ResetModel');
+}
+
+//设置子背景状态
+window.setStepBgActive = function (isShow) {
+    window.unityInstance.SendMessage('MainCanvas', 'SetStepBgActive', isShow ? 1 : 0);
+}
+
+//设置光源位置, 默认位置是30, 范围需要限制在[-60]~[+60] 之间
+window.setLightRotationY = function(value){
+    window.unityInstance.SendMessage('MainCanvas', 'SetLightRotationY', value);
+}
+
+

public/unityPc/index.html

@@ -28,6 +28,9 @@
     </div>
 </body>
 <script>
+    window.isMobile = function () {
+        return /(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i.test(navigator.userAgent);
+    }
 
     var container = document.querySelector("#unity-container");
     var canvas = document.querySelector("#unity-canvas");
@@ -66,7 +69,7 @@
         frameworkUrl: buildUrl + "/Build.framework.js.unityweb",
         codeUrl: buildUrl + "/Build.wasm.unityweb",
         streamingAssetsUrl: "StreamingAssets",
-        devicePixelRatio: 2,
+        devicePixelRatio: window.isMobile() ? 1 : 0,
         companyName: "FDage",
         productName: "Chenzhebei-ShanxiMuseum",
         productVersion: "0.1",

src/assets/styles/base.css

@@ -234,13 +234,13 @@ textarea {
   }
   #root .ant-tooltip {
     transform: rotate(0) !important;
-    inset: 4.331px auto auto 417.25px !important;
     width: 410px !important;
     height: 150px !important;
     max-width: 440px !important;
+    inset: 88.7779px auto auto 334.985px !important;
   }
-  .ant-tooltip-inner {
-    background: url('../img/tooltipBg.png') no-repeat center center / 100% 100%;
+  #root .ant-tooltip .ant-tooltip-arrow {
+    display: none !important;
   }
   #root .ant-tooltip .tooltip_MT .top {
     position: relative;
@@ -348,12 +348,29 @@ textarea {
   width: 100% !important;
   height: 100% !important;
 }
+#root .ant-tooltip .ant-tooltip-arrow::before {
+  backdrop-filter: blur(2px);
+  background-color: rgba(33, 30, 26, 0.5) !important;
+}
+#root .ant-tooltip .ant-tooltip-arrow::after {
+  border: 1px solid rgba(255, 233, 182, 0.7);
+}
+#root .ant-tooltip.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
+  top: 1.5px !important;
+}
+#root .ant-tooltip.ant-tooltip-placement-topLeft .ant-tooltip-arrow {
+  bottom: 1px !important;
+}
+#root .ant-tooltip.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow {
+  top: 2px !important;
+}
 #root .ant-tooltip .ant-tooltip-inner {
-  background: url(../img/tooltipBg.png) no-repeat;
-  background-size: 100% 100%;
+  background-color: rgba(33, 30, 26, 0.5) !important;
   box-shadow: none !important;
   width: 100% !important;
   height: 100% !important;
+  border: 1px solid #ffe9b6;
+  backdrop-filter: blur(2px);
 }
 .ant-image-preview-footer {
   display: none !important;
@@ -376,7 +393,7 @@ textarea {
   align-items: center;
 }
 #root .ant-tooltip .tooltip_MT .top .title {
-  width: 30px;
+  width: 50%;
   height: 100%;
   font-size: 10px;
   line-height: 15px;

src/assets/styles/base.less

@@ -302,16 +302,15 @@ textarea {
 
   #root .ant-tooltip {
     transform: rotate(0) !important;
-    inset: 4.331px auto auto 417.25px !important;
     width: 410px !important;
     height: 150px !important;
     max-width: 440px !important;
+    inset: 88.7779px auto auto 334.985px !important;
+    .ant-tooltip-arrow {
+      display: none !important;
+    }
   }
 
-  .ant-tooltip-inner {
-    background: url('../img/tooltipBg.png') no-repeat center center / 100% 100%;
-
-  }
 
 
 
@@ -461,12 +460,42 @@ textarea {
     height: 100% !important;
   }
 
+  .ant-tooltip-arrow::before {
+    backdrop-filter: blur(2px);
+    background-color: rgba(33, 30, 26, 0.5) !important;
+  }
+  .ant-tooltip-arrow::after {
+    border: 1px solid rgba(255, 233, 182, 0.7);
+  }
+  &.ant-tooltip-placement-bottomRight {
+    .ant-tooltip-arrow {
+      top: 1.5px !important;
+    }
+  }
+
+  &.ant-tooltip-placement-topLeft {
+    .ant-tooltip-arrow {
+      bottom: 1px !important;
+    }
+  }
+
+  &.ant-tooltip-placement-bottomLeft {
+    .ant-tooltip-arrow {
+      top: 2px !important;
+    }
+
+  }
+
+
   .ant-tooltip-inner {
-    background: url(../img/tooltipBg.png) no-repeat;
-    background-size: 100% 100%;
+    // background: url(../img/tooltipBg.png) no-repeat;
+    // background-size: 100% 100%;
+    background-color: rgba(33, 30, 26, 0.5) !important;
     box-shadow: none !important;
     width: 100% !important;
     height: 100% !important;
+    border: 1px solid rgba(255, 233, 182, 1);
+    backdrop-filter: blur(2px);
   }
 }
 
@@ -492,7 +521,7 @@ textarea {
     align-items: center;
 
     .title {
-      width: 30px;
+      width: 50%;
       height: 100%;
       font-size: 10px;
       line-height: 15px;

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

@@ -1,38 +1,40 @@
 .modalTxt {
-  width: 55%;
+  width: 62%;
   height: 100%;
   position: absolute;
   z-index: 1;
-  top: 50%;
-  left: 50%;
-  transform: translate(-4%, -50%);
+  right: 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 
   :global {
     .modalTxtContainner {
-      width: 450px;
+      width: 100%;
       height: 100%;
       display: flex;
-      flex-direction: column;
+      justify-content: flex-end;
+      align-items: center;
       gap: 10px;
+      padding-right: 10px;
+      position: relative;
 
       .topBar {
         padding-left: 0;
         padding-right: 0;
-        justify-content: left;
-        width: 72%;
-        height: 70px;
+        justify-content: center;
+        flex-direction: column;
+        width: 85px;
+        height: 65%;
         display: flex;
         align-items: center;
         position: relative;
-        gap: 10px;
-        margin-top: 10px;
+        gap: 3px;
+        margin-top: 30px;
 
         .beie {
-          top: 11px;
-          left: -97px;
+          top: -60px;
+          left: -414px;
           height: 60px;
           width: 120px;
           font-size: 10px;
@@ -41,7 +43,7 @@
           position: absolute;
           align-self: flex-start;
 
-          &>img {
+          & > img {
             width: 100%;
             object-fit: contain;
           }
@@ -64,15 +66,16 @@
         .tab2 {
           width: fit-content;
           min-width: 70px;
-          height: 60px;
+          width: 85px;
+          height: 90px;
           display: flex;
           align-items: center;
           flex-direction: column;
           cursor: pointer;
           position: relative;
 
-          &>img {
-            height: 50px;
+          & > img {
+            height: 60px;
             object-fit: contain;
           }
 
@@ -82,7 +85,7 @@
             position: absolute;
             top: 34%;
             left: 50%;
-            transform: translate(-55%, -50%);
+            transform: translate(-50%, -73%) !important;
             color: rgba(255, 233, 182, 0.6);
           }
 
@@ -91,58 +94,109 @@
           }
 
           .txt {
-            font-size: 10px;
             line-height: 15px;
             text-align: center;
             color: rgba(255, 255, 255, 1);
             width: 100%;
-            font-weight: 700;
             font-size: 14px;
+            transition: all 0.3s ease-in-out;
           }
         }
 
         .tab:nth-child(3) {
           width: 100px;
         }
-
-        .tab0 {
-          width: 88px;
-        }
-
-        .tab1 {
-          width: 140px;
-          padding-left: 10px;
-
-          .tabNub {
-            transform: translate(-27%, -50%) !important;
-          }
-        }
-
-        .tab2 {
-          width: 60px;
-
-          .tabNub {
-            transform: translate(-50%, -50%) !important;
-          }
-        }
       }
 
       .intro {
         width: 100%;
-        padding-right: 40px;
+        padding-left: 40px;
+        padding-right: 20px;
         height: 15%;
-        color: rgba(255, 255, 255, 1);
         text-align: justify;
-        overflow-y: auto;
         font-size: 15px;
-        line-height: 21px;
+        line-height: 24px;
         font-weight: 400;
         color: #504e40;
+        transition: opacity 0.3s ease-in-out;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .intro_title {
+          height: 40px;
+          font-size: 22px;
+          line-height: 30px;
+          color: rgba(255, 255, 255, 1);
+        }
+        .intro_txt {
+          margin-top: 10px;
+          height: fit-content;
+          max-height: calc(100% - 110px);
+          overflow-y: auto;
+          margin-bottom: 10px;
+          &::-webkit-scrollbar {
+            width: 0px;
+          }
+        }
+        .intro_btn {
+          width: 180px;
+          height: 50px;
+          background-image: url(../../../../assets/img/A6_sangzang_btn2.png);
+          background-position: center;
+          background-size: 100% 100%;
+          line-height: 50px;
+          font-size: 17px;
+          text-align: center;
+        }
+      }
+
+      .translateModal {
+        width: 80%;
+        height: 86%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        .txtWithTrans {
+          margin-left: 30px;
+          font-size: 16px !important;
+          line-height: 22px !important;
+          letter-spacing: 2px;
+          height: 100%;
+          text-align: justify;
+          font-weight: 500;
+          color: rgba(94, 52, 34, 1); // 原始颜色
+          overflow: auto;
+          padding-bottom: 10px;
+
+          &::-webkit-scrollbar {
+            width: 0px;
+          }
+
+          & > a {
+            color: rgba(94, 52, 34, 1);
+            position: relative;
+
+            &::after {
+              content: '';
+              position: absolute;
+              left: 0;
+              bottom: -2px;
+              width: 100%;
+              height: 2px;
+              background-color: rgba(166, 118, 67, 1);
+              transform: scaleX(0.95);
+              transform-origin: right center;
+            }
+          }
+          .translate {
+            color: rgba(148, 148, 148, 1);
+          }
+        }
       }
 
       .detailTxt {
         width: 100%;
-        padding-right: 40px;
 
         height: 62%;
         display: flex;
@@ -165,7 +219,6 @@
           }
 
           .txt {
-
             font-size: 16px !important;
             line-height: 22px !important;
             letter-spacing: 2px;
@@ -207,11 +260,11 @@
               color: rgba(0, 0, 0, 0.25);
             }
 
-            &:has(> a:hover)>a:not(:hover) {
+            &:has(> a:hover) > a:not(:hover) {
               color: rgba(0, 0, 0, 0.25);
             }
 
-            &>a {
+            & > a {
               color: rgba(94, 52, 34, 1);
               position: relative;
 
@@ -242,9 +295,11 @@
       }
 
       .content {
-        width: 100%;
-        height: 60%;
+        width: 70%;
+        height: 50%;
+        padding-right: 20px;
         display: flex;
+        justify-content: center;
         flex-direction: column;
         gap: 10px;
         color: rgba(94, 52, 34, 1);
@@ -263,7 +318,7 @@
           letter-spacing: 2px;
           color: #504e40;
 
-          &>p {
+          & > p {
             padding-bottom: 10px;
           }
         }
@@ -274,47 +329,45 @@
 
 // -----------英文版
 .modalTxtEn {
-
   :global {
-    .modalTxtContainner {
-      .topBar {
-        .beie .txt {
-          width: auto;
-          font-size: 16px;
-        }
-
-        .tab0 {
-          width: 100px;
-        }
-
-        .tab0,
-        .tab1,
-        .tab2 {
-          .txt {
-            font-size: 12px !important;
-          }
-        }
-
-        .txtAc {
-          width: 300px !important;
-          max-width: 9999px;
-          position: absolute;
-          bottom: -5px;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-
-      .content {
-        position: relative;
-        top: 20px;
-
-        .text {
-          text-align: start;
-          letter-spacing: 0;
-        }
-      }
-
-    }
+    // .modalTxtContainner {
+    //   .topBar {
+    //     .beie .txt {
+    //       width: auto;
+    //       font-size: 16px;
+    //     }
+
+    //     .tab0 {
+    //       width: 100px;
+    //     }
+
+    //     .tab0,
+    //     .tab1,
+    //     .tab2 {
+    //       .txt {
+    //         font-size: 12px !important;
+    //       }
+    //     }
+
+    //     .txtAc {
+    //       width: 300px !important;
+    //       max-width: 9999px;
+    //       position: absolute;
+    //       bottom: -5px;
+    //       left: 50%;
+    //       transform: translateX(-50%);
+    //     }
+    //   }
+
+    //   .content {
+    //     position: relative;
+    //     top: 20px;
+
+    //     .text {
+    //       text-align: start;
+    //       letter-spacing: 0;
+    //     }
+    //   }
+    // }
   }
-}
+}

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

@@ -20,6 +20,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
   const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   const [selectedTab, setSelectedTab] = useState(0)
+  const [isOpenTrans, setIsOpenTrans] = useState(false)
   const selectedTabRef = useRef(0)
 
   useEffect(() => {
@@ -60,6 +61,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
   }, [selectedTab, setIsShowMzmTitle, setIsShowTabBar])
 
   useEffect(() => {
+    if (selectedTab === 0) setIsOpenTrans(false)
     localStorage.setItem('selectedBeiwen', selectedTab.toString())
   }, [selectedTab])
 
@@ -167,12 +169,12 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
         OriContent.removeEventListener('touchstart', e => {
           handleStart(e, originStartX)
         })
-        OriContent.removeEventListener('touchmove', handlerOri) // 保持参数一致
+        OriContent.removeEventListener('touchmove', handlerOri)
         OriContent.removeEventListener('scroll', handleOriScroll)
         TransContent.removeEventListener('touchstart', e => {
           handleStart(e, translateStartX)
         })
-        TransContent.removeEventListener('touchmove', handlerTrans) // 保持参数一致
+        TransContent.removeEventListener('touchmove', handlerTrans)
         TransContent.removeEventListener('scroll', handleTransScroll)
       }
     }
@@ -190,16 +192,25 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
     define: string
     inset: string
   }) => {
-    const dragFlag = useRef(false) // 新增拖拽标志位
-
+    const dragFlag = useRef(false)
     const handleClick = () => {
-      if (dragFlag.current) return // 如果是拖拽操作则直接返回
+      if (dragFlag.current) return
       setActiveAId(index)
       setShowTooltip(index)
-      const tooltip = document.querySelector('.ant-tooltip') as HTMLElement
-      if (isMobiileFu() && tooltip) tooltip.style.inset = inset
     }
 
+    useEffect(() => {
+      setTimeout(() => {
+        console.log(inset, 'inset')
+        const tooltip = document.querySelector('.ant-tooltip') as HTMLElement
+        if (tooltip && isMobiileFu() && showTooltip === index) {
+          // tooltip.style.setProperty('inset', inset, 'important');
+          tooltip.style.inset = inset + '!important'
+        }
+      }, 100);
+
+    }, [index, inset])
+
     return (
       <Tooltip
         title={
@@ -229,10 +240,10 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
         }
         getPopupContainer={() => document.body.querySelector('#root') as HTMLElement}
         open={showTooltip === index}
-        trigger='click'
+        trigger='contextMenu'
         placement='topLeft'
-        align={{ offset: [-45, 0] }}
-        arrow={false}
+        align={{ offset: [-25, -10] }}
+      // arrow={false}
       >
         <a
           key={index}
@@ -244,8 +255,6 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
               // 只有非拖拽操作才处理
               handleClick()
             }
-            e.preventDefault()
-            e.stopPropagation()
           }}
           onClick={handleClick}
         >
@@ -338,8 +347,15 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
     [setBottomTxt, setIsShowMzmTitle]
   )
 
-  const gaiShuEn = 'The inscription on the Cheng Zhe Stele consists of 31 lines of regular script,<br/>with 45 characters per line at maximum.<br/>The characters are approximately 2 cm in size, set within square grids, totaling 1,404 characters.<br/>No formal title of the stele is engraved. <br/>The entire text praises the historical achievements of the Cheng family.'
-  const gaiShu = '程哲碑碑文，31行楷书，满行45字，<br/>字径约2厘米，带方界格，总计1404字；<br/>无正式碑名，通篇颂德程氏家族的历史功绩。'
+  // 原文 | 译文 的背景
+  useEffect(() => {
+    callIframeFu('setStepBgActive', isOpenTrans ? 1 : 0)
+  }, [isOpenTrans])
+
+  const gaiShuEn =
+    'The inscription on the Cheng Zhe Stele consists of 31 lines of regular script,<br/>with 45 characters per line at maximum.<br/>The characters are approximately 2 cm in size, set within square grids, totaling 1,404 characters.<br/>No formal title of the stele is engraved. <br/>The entire text praises the historical achievements of the Cheng family.'
+  const gaiShu =
+    '程哲碑碑文，31行楷书，满行45字，<br/>字径约2厘米，带方界格，总计1404字；<br/>无正式碑名，通篇颂德程氏家族的历史功绩。'
 
   return (
     <div
@@ -347,50 +363,26 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
       id='modalTxt'
     >
       <div className='modalTxtContainner'>
-        <div className='topBar'>
-          <div className='beie' hidden={selectedTab !== 0}>
-            <img src={require('@/assets/img/beie.png')} alt='' />
-            <div className='txt songFont' onClick={handleBeie}>
-              {myLangue === 'EN' ? 'forehead' : '碑额'}
-            </div>
-          </div>
 
-          {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`)}
-                alt=''
-              />
-              <div className={`tabNub songFont ${selectedTab === item.key ? 'tabNubAc' : ''}`}>
-                {item.sonTxt}
-              </div>
-              <div
-                className={classNames('txt songFont', selectedTab === item.key ? 'txtAc' : '')}
-                style={{ opacity: selectedTab === item.key || selectedTab === 0 ? '1' : '0' }}
-              >
-                {myLangue === 'EN' ? item.nameEn : item.name}
-              </div>
-            </div>
-          ))}
-        </div>
 
-        <div
+        {!isOpenTrans && <div
           className='intro'
           id='introContent'
           style={{
             opacity: selectedTab !== 0 ? '1' : '0',
-            height: selectedTab !== 0 ? '15%' : '5%'
+            height: selectedTab !== 0 ? '78%' : '0%',
+            width: selectedTab !== 0 ? '100%' : '0%'
           }}
         >
-          {selectedTab !== 0 && myData.readDetail[selectedTab - 1].intro}
-        </div>
+          <div className="intro_title songFont">
+            {selectedTab !== 0 && modalTxtTab[selectedTab - 1].name}
+          </div>
+          <div className="intro_txt"> {selectedTab !== 0 && myData.readDetail[selectedTab - 1].intro}</div>
+
+          <div className="intro_btn" onClick={() => setIsOpenTrans(true)}>原文 | 译文</div>
+        </div>}
 
-        {selectedTab !== 0 && (
+        {/* {selectedTab !== 0 && (
           <div className='detailTxt'>
             <div className='left'>
               <div className='title'>原文</div>
@@ -411,18 +403,58 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
               ></div>
             </div>
           </div>
-        )}
+        )} */}
 
         {selectedTab === 0 && (
           <div className='content'>
             <div className='title songFontc'>
               {myLangue === 'EN' ? 'Overview of the Inscription' : '碑文概述'}
             </div>
-            <div className='text' dangerouslySetInnerHTML={{ __html: myLangue === 'EN' ? gaiShuEn : gaiShu }}>
+            <div
+              className='text'
+              dangerouslySetInnerHTML={{ __html: myLangue === 'EN' ? gaiShuEn : gaiShu }}
+            ></div>
+          </div>
+        )}
 
+        <div className='topBar'>
+          <div className='beie' hidden={selectedTab !== 0}>
+            <img src={require('@/assets/img/beie.png')} alt='' />
+            <div className='txt songFont' onClick={handleBeie}>
+              {myLangue === 'EN' ? 'forehead' : '碑额'}
             </div>
           </div>
-        )}
+
+          {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`)}
+                alt=''
+              />
+              <div className={`tabNub songFont ${selectedTab === item.key ? 'tabNubAc' : ''}`}>
+                {item.sonTxt}
+              </div>
+              <div
+                className={classNames('txt songFont', selectedTab === item.key ? 'txtAc' : '')}
+                style={{ opacity: selectedTab === 0 ? '1' : '0' }}
+              >
+                {myLangue === 'EN' ? item.nameEn : item.name}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {(isOpenTrans && selectedTab !== 0) && <div className="translateModal">
+          <div className="txtWithTrans" onTouchMove={() => setShowTooltip(-1)}> {CommentText({
+            str: myData.readDetail[selectedTab - 1].translate_v2,
+            index: selectedTab - 1
+          })}</div>
+        </div>}
       </div>
     </div>
   )

src/pages/A7wjwj/conponents/Discover/index.module.scss

@@ -273,6 +273,19 @@
         padding-bottom: 15px;
         padding-top: 6px;
 
+        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: 0;
         }

src/pages/A7wjwj/conponents/Discover/index.tsx

@@ -115,12 +115,11 @@ function Discover(props: { style?: React.CSSProperties }) {
                 </div>
                 <div className='txt'>{item.title}</div>
               </div>
-              <div className='text'>
+              <div className='text' >
                 {index === 0 ? (
                   <img className='textBj' src={require('@/assets/sgImg/thrrTxtBg.png')} alt='' />
                 ) : null}
-
-                {item.txt}
+                <div dangerouslySetInnerHTML={{ __html: item.txt }}></div>
               </div>
               <div className='from'>{item.from}</div>
             </div>

src/types/declaration.d.ts

@@ -31,6 +31,7 @@ type MyDataType = {
     mzmtz: { title: string; content: string }
     origin: string
     translate: string
+    translate_v2: string
   }[]
   // 发现之谜
   discover: {