up

public/myData/myData.js

@@ -1768,7 +1768,7 @@ const myDataTemp = {
   // 丧葬因素
   sangzangData: [
     {
-      txt: '程哲碑，其以佛像为主题的造像风格与传统造像碑无二，但传统造像碑通常以发愿文为核心，内容多为祈福禳灾、超度亡灵或祈求功德，不强调墓主生平与家族世系。程哲碑则强调墓主生平与家族世系，其文字更多是丧葬语境下的内容，其行文与墓志铭密切相关。'
+      txt: '程哲碑，其以佛像为主题的造像风格与传统造像碑无二，但传统造像碑通常以发愿文为核心，内容多为祈福禳灾、超度亡灵或祈求功德，程哲碑则强调墓主生平与家族世系，其文字更多是丧葬语境下的内容，其行文与墓志铭密切相关。'
     },
     {
       txt: '碑文详述上党程氏先祖功绩、程哲生平及卒年信息，并以程氏家族三组父子的颂文结尾。虽其“支离杂沓、漫无体裁”，但在这一时期仍符合墓志铭常见“先祖+逝者生卒葬信息+颂文”的基本格式。'

public/unityMo/StreamingAssets/Settings.json

@@ -174,7 +174,7 @@
         "position": {
           "x": 0,
           "y": 0,
-          "z": -12
+          "z": -14
         },
         "physicalLensShift": {
           "x": 0,

public/unityMo/export_tombstoneView.js

@@ -1,69 +1,70 @@
 //当需要显示热点Tag的时候触发, 该函数为unity主动调用的函数
 window.showTag = function (index) {
-    if (window.parent && window.parent !== window) {
-        window.parent.showTag(index);
-    }
+  if (window.parent && window.parent !== window) {
+    window.parent.showTag(index)
+  }
 }
 //当需要隐藏热点Tag的时候触发, 该函数为unity主动调用的函数
 window.hideTag = function () {
-    if (window.parent && window.parent !== window) {
-        window.parent.hideTag();
-    }
+  if (window.parent && window.parent !== window) {
+    window.parent.hideTag()
+  }
 }
 
 //当模型被操控的时候触发, 任何时候模型进行了移动/旋转/缩放, 都会触发这个函数, 包括主动调用addModelScale函数时, 该函数为unity主动调用的函数
 window.onModelControlled = function () {
-    if (window.parent && window.parent !== window) {
-        window.parent.onModelControlled();
-    }
+  if (window.parent && window.parent !== window) {
+    window.parent.onModelControlled()
+  }
 }
 
 //更新配置
 window.refreshAppSettings = function (json) {
-    window.unityInstance.SendMessage('MainCanvas', 'RefreshAppSettings', json)
+  window.unityInstance.SendMessage('MainCanvas', 'RefreshAppSettings', json)
 }
 
 //设置模型自动旋转, 0代表不自动旋转
-window.setModelAutoRotation = function(speed){
-    window.unityInstance.SendMessage('MainCanvas', 'SetModelAutoRotation', speed)
+window.setModelAutoRotation = function (speed) {
+  if (speed != 0) window.resetModel()
+  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')
 }

public/unityMo/index.css

@@ -0,0 +1,11 @@
+.save-image-block {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.save-image-background {
+    opacity: 0;
+    pointer-events: none;
+}

public/unityMo/index.html

@@ -5,6 +5,7 @@
     <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">
     <script src="./export_main.js"></script>
     <script src="./export_tombstoneView.js"></script>

public/unityPc/StreamingAssets/Settings.json

@@ -5,16 +5,6 @@
   "panels": [
     {
       "name": "Panel1Camera",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.4,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
@@ -25,6 +15,10 @@
           "x": 0,
           "y": 0,
           "z": 0
+        },
+        "physicalLensShift": {
+          "x": 0.25,
+          "y": 0
         }
       },
       "model": {
@@ -52,22 +46,16 @@
     },
     {
       "name": "Panel2Camera",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.15,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.5,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
           "z": -13
         },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
+        },
         "rotation": {
           "x": 0,
           "y": 0,
@@ -99,21 +87,15 @@
     },
     {
       "name": "Panel3Camera",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
-          "z": -10
+          "z": -13
+        },
+        "physicalLensShift": {
+          "x": 0,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -147,21 +129,15 @@
     {
       "name": "Panel4Camera",
       "rotationNotAllowed": true,
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.15,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.45,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
-          "y": 0,
-          "z": -13
+          "y": 0.5,
+          "z": -12
+        },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -194,21 +170,15 @@
     },
     {
       "name": "Panel5Camera",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
-          "z": -15
+          "z": -14
+        },
+        "physicalLensShift": {
+          "x": 0,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -243,23 +213,17 @@
   "hotspots": [
     {
       "name": "佛龛",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
         "position": {
           "x": 0,
-          "y": 2,
-          "z": -8
+          "y": 1.6,
+          "z": -9
+        },
+        "physicalLensShift": {
+          "x": -0.08,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -292,19 +256,13 @@
     },
     {
       "name": "佛像",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.1,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": 0.8,
@@ -341,19 +299,13 @@
     },
     {
       "name": "佛龛两侧",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.1,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": 0.8,
@@ -390,19 +342,13 @@
     },
     {
       "name": "佛龛上部",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.1,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": 3,
@@ -439,19 +385,13 @@
     },
     {
       "name": "佛龛下部",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.1,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": -4,
@@ -488,19 +428,13 @@
     },
     {
       "name": "畏兽",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.08,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": 2.5,
@@ -537,19 +471,13 @@
     },
     {
       "name": "飞天",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.08,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": -0.5,
@@ -586,19 +514,13 @@
     },
     {
       "name": "摩尼宝珠",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.08,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": -3,
@@ -637,24 +559,18 @@
   "inscriptions": [
     {
       "name": "碑额",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.45,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0,
       "startIntensity": 0,
       "camera": {
         "position": {
-          "x": 1.4,
-          "y": 4.1,
+          "x": 1.2,
+          "y": 4.3,
           "z": -5
         },
+        "physicalLensShift": {
+          "x": 0.3,
+          "y": 0
+        },
         "rotation": {
           "x": 0,
           "y": 0,
@@ -686,24 +602,18 @@
     },
     {
       "name": "碑文1",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.45,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0,
       "startIntensity": 0,
       "camera": {
         "position": {
           "x": 1.6,
-          "y": 3.4,
+          "y": 2.7,
           "z": -5
         },
+        "physicalLensShift": {
+          "x": 0.25,
+          "y": 0
+        },
         "rotation": {
           "x": 0,
           "y": 0,
@@ -735,23 +645,17 @@
     },
     {
       "name": "碑文2",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.45,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0,
       "startIntensity": 0,
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
-          "z": -13
+          "z": -12
+        },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -784,23 +688,17 @@
     },
     {
       "name": "碑文3",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.45,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0,
       "startIntensity": 0,
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
-          "z": -13
+          "z": -12
+        },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -814,6 +712,10 @@
           "y": 0,
           "z": 0
         },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
+        },
         "limitScale": {
           "isLimit": true,
           "min": 0.2,

public/unityPc/export_drawingBoard.js

@@ -0,0 +1,57 @@
+let saveDom = null;
+let isShowSaveDom = false;
+
+window.onDownload = function (base64string) {
+    if (window.isMobile()){
+        saveDom = document.querySelector('.save-image-background');
+        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 /(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i.test(navigator.userAgent);
+}
+
+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/unityPc/export_main.js

@@ -31,6 +31,8 @@ window.loadScene = function (sceneName) {
     window.setLoadSceneAnimationTime(sceneName === 'DrawingBoard' ? 1 : 0)
     window.unityInstance.SendMessage('SceneLoader', 'LoadScene', sceneName)
     currentScene = sceneName
+
+    window.onCancelDownload();
 }
 
 //是否正在加载场景

public/unityPc/export_tombstoneView.js

@@ -25,6 +25,7 @@ window.refreshAppSettings = function (json) {
 
 //设置模型自动旋转, 0代表不自动旋转
 window.setModelAutoRotation = function(speed){
+    if (speed != 0) window.resetModel();
     window.unityInstance.SendMessage('MainCanvas', 'SetModelAutoRotation', speed)
 }
 

public/unityPc/index.css

@@ -0,0 +1,11 @@
+.save-image-block {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.save-image-background {
+    opacity: 0;
+    pointer-events: none;
+}

public/unityPc/index.html

@@ -5,10 +5,12 @@
     <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">
     <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>
     <div id="unity-container">
@@ -19,6 +21,10 @@
             </div>
         </div>
         <div id="unity-warning"></div>
+
+        <div class="save-image-block">
+            <img src="" class="save-image-background" alt="">
+        </div>
     </div>
 </body>
 <script>

src/App.tsx

@@ -420,7 +420,7 @@ export default function App() {
                     position: {
                       x: 0,
                       y: 0,
-                      z: -12
+                      z: -14
                     },
                     physicalLensShift: {
                       x: 0,

src/assets/styles/base.css

@@ -414,6 +414,9 @@ textarea {
   background-color: transparent;
   /* 确保背景透明 */
 }
+#opacityChange {
+  animation: opacityChange 2s infinite linear;
+}
 @keyframes opacityChange {
   0% {
     opacity: 1;
@@ -450,6 +453,17 @@ textarea {
 #root .moBack img {
   object-fit: fill !important;
 }
+#opacityCss {
+  animation: opacityCss 2s linear forwards;
+}
+@keyframes opacityCss {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .songFont {
   font-family: 'song' !important;
 }
@@ -457,3 +471,14 @@ textarea {
   font-family: 'song' !important;
   font-weight: 700 !important;
 }
+#Weijie {
+  animation: Weijie 3s linear forwards;
+}
+@keyframes Weijie {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: 70%;
+  }
+}

src/assets/styles/base.less

@@ -73,7 +73,7 @@ body #A7Back {
   left: 4%;
   cursor: pointer;
 
-  & > img {
+  &>img {
     height: 100%;
     object-fit: contain;
   }
@@ -84,7 +84,7 @@ body #A7Back {
   margin: auto;
   position: relative;
 
-  & > div {
+  &>div {
     width: 100%;
     height: 100%;
   }
@@ -214,7 +214,7 @@ textarea {
   bottom: 15px;
   right: 20px;
 
-  & > img {
+  &>img {
     position: absolute;
     top: 0;
     left: 0;
@@ -336,7 +336,7 @@ textarea {
         justify-content: flex-end;
         align-items: center;
 
-        & > img {
+        &>img {
           height: 90%;
           object-fit: contain;
         }
@@ -362,7 +362,7 @@ textarea {
     z-index: 3;
     cursor: pointer;
 
-    & > img {
+    &>img {
       height: 100%;
       object-fit: contain;
     }
@@ -498,7 +498,7 @@ textarea {
       justify-content: flex-end;
       align-items: center;
 
-      & > img {
+      &>img {
         height: 90%;
         object-fit: contain;
       }
@@ -540,6 +540,9 @@ textarea {
   /* 确保背景透明 */
 }
 
+#opacityChange {
+  animation: opacityChange 2s infinite linear;
+}
 
 @keyframes opacityChange {
   0% {
@@ -591,18 +594,19 @@ textarea {
 }
 
 // 页面透明度渐变
-// #opacityCss {
-//   animation: opacityCss 2s linear forwards;
-// }
+#opacityCss {
+  animation: opacityCss 2s linear forwards;
+}
 
-// @keyframes opacityCss {
-//   0% {
-//     opacity: 0.2;
-//   }
-//   100% {
-//     opacity: 1;
-//   }
-// }
+@keyframes opacityCss {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
 
 // 宋体
 .songFont {
@@ -612,4 +616,19 @@ textarea {
 .songFontc {
   font-family: 'song' !important;
   font-weight: 700 !important;
+}
+
+// 未解之思页面动画效果
+#Weijie {
+  animation: Weijie 3s linear forwards;
+}
+
+@keyframes Weijie {
+  0% {
+    height: 0;
+  }
+
+  100% {
+    height: 70%;
+  }
 }

src/pages/A0base/index.module.scss

@@ -9,6 +9,9 @@
   will-change: initial !important;
 
   :global {
+
+
+
     .A0baseContainner {
       width: 58%;
       height: 60%;
@@ -131,6 +134,7 @@
         transition: height 0.4s ease-in-out, opacity 0.3s ease-in-out;
         overflow: hidden;
         opacity: 0;
+        padding-top: 10px;
 
         .inter {
           width: 100%;

src/pages/A0base/index.tsx

@@ -45,11 +45,15 @@ function A0base() {
     <div className={classNames(myLangue === 'ZH' ? '' : styles.A0baseEn, styles.A0base)}>
       <Zloding isShow={loding} bacNum={1} />
 
-      <div className='A0baseContainner'>
+      <div className='A0baseContainner' id='opacityCss'>
         <div className={`content`}>
           <div className='title songFontc'>{myData.baseInfo[currentBase].title}</div>
           <div className='text'>{myData.baseInfo[currentBase].text}</div>
-          <div className='btn' onClick={e => goto(e, myData.baseInfo[currentBase].path)}>
+          <div
+            className='btn'
+            id='opacityChange'
+            onClick={e => goto(e, myData.baseInfo[currentBase].path)}
+          >
             {myLangue === 'ZH' ? '查看详情' : 'view details'}
           </div>
         </div>
@@ -76,7 +80,7 @@ function A0base() {
       </div>
 
       {/* 互动 */}
-      <div className='interact '>
+      <div className='interact' id='opacityCss'>
         <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`}>
           <div
             className='inter songFontc'
@@ -110,12 +114,12 @@ function A0base() {
         </div>
       </div>
 
-      <div className='home' onClick={e => goto(e, '#/')}>
+      <div className='home' id='opacityCss' onClick={e => goto(e, '#/')}>
         <img src={require('@/assets/img/home.png')} alt='' />
       </div>
 
       {/* 先导片 */}
-      <div className='guideVideo' onClick={() => setXianDao(true)}>
+      <div className='guideVideo' id='opacityCss' onClick={() => setXianDao(true)}>
         <img src={require('@/assets/img/guideVideo.png')} alt='' />
         <div className='guideVideoTitle'>{myLangue === 'EN' ? 'PromotionalVideo' : '先导片'}</div>
       </div>

src/pages/A1home2/index.tsx

@@ -6,8 +6,8 @@ import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import Skip from '@/components/Skip'
 import { locSetLangue } from '@/utils/storage'
-import { envFlag } from '@/utils/http'
-import { Toast } from 'antd-mobile'
+// import { envFlag } from '@/utils/http'
+// import { Toast } from 'antd-mobile'
 import { lodingUnityFu } from '../A0base/data'
 
 function A1home() {
@@ -135,18 +135,21 @@ function A1home() {
           className='A1Launge'
           hidden={progress < 100}
           onClick={() => {
-            if (envFlag) {
-              const res = myLangue === 'ZH' ? 'EN' : 'ZH'
-              locSetLangue(res)
-
-              // setTimeout(() => {
-              //   window.location.reload()
-              // }, 200)
-            } else {
-              Toast.show({
-                content: '正在开发中'
-              })
-            }
+            const res = myLangue === 'ZH' ? 'EN' : 'ZH'
+            locSetLangue(res)
+
+            // if (envFlag) {
+            //   const res = myLangue === 'ZH' ? 'EN' : 'ZH'
+            //   locSetLangue(res)
+
+            //   // setTimeout(() => {
+            //   //   window.location.reload()
+            //   // }, 200)
+            // } else {
+            //   Toast.show({
+            //     content: '正在开发中'
+            //   })
+            // }
           }}
         >
           <img src={require(`@/assets/sgImg/${myLangue}.png`)} alt='' />

src/pages/A5wenwu/index.module.scss

@@ -147,50 +147,20 @@
       display: flex;
       align-items: center;
       justify-content: center;
-
-      .TLeft {
-        position: absolute;
-        left: 2%;
-        width: 20%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 40px;
-
-        .Tbtn1,
-        .Tbtn2 {
-          transition: all 0.3s ease-in-out;
-          width: 70px;
-          height: 70px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 17px;
-          cursor: pointer;
-          background: url('../../assets/img/btn_tab.png') no-repeat;
-          background-size: 100% 100%;
-          color: rgba(255, 233, 182, 1);
-        }
-
-        .TActive {
-          color: rgba(124, 75, 54, 1);
-          background: url('../../assets/img/btn_tabAc.png') no-repeat;
-          background-size: 100% 100%;
-        }
-      }
+      padding: 7% 5% 2%;
     }
+
   }
 }
 
 // ---------英文版
 .A5wenwuEn {
   :global {
-    .A5_tabBar .tab .txt{
+    .A5_tabBar .tab .txt {
       width: auto;
     }
-    .A5_tabBarR .tab .txt{
+
+    .A5_tabBarR .tab .txt {
       width: auto;
     }
   }

src/pages/A5wenwu/index.tsx

@@ -13,9 +13,7 @@ function A5wenwu() {
   const [currentTab, setCurrentTab] = useState('tab0')
   const [isShowGesture, setIsShowGesture] = useState(true)
   const [isShowTapianModal, setIsShowTapianModal] = useState(false)
-  const [tapianType, setTapianType] = useState('碑面')
   const [isShowLineModal, setIsShowLineModal] = useState(false)
-  const [lineType, setLineType] = useState('碑面')
 
   const [gestureState1, setGestureState1] = useState('')
 
@@ -146,26 +144,7 @@ function A5wenwu() {
         />
 
         <div className='TContainner'>
-          <div className='TLeft'>
-            <div
-              className={`Tbtn1 ${tapianType === '碑面' ? 'TActive' : ''}`}
-              onClick={() => setTapianType('碑面')}
-            >
-               {myLangue === 'EN' ? 'face' : '碑面'}
-            </div>
-            <div
-              className={`Tbtn2 ${tapianType === '碑文' ? 'TActive' : ''}`}
-              onClick={() => setTapianType('碑文')}
-            >
-              {myLangue === 'EN' ? 'text' : '碑文'}
-            </div>
-          </div>
-          <div className='TRight'>
-            <img
-              src={require(`@/assets/img/A5_tapian${tapianType === '碑面' ? '1' : '2'}.png`)}
-              alt=''
-            />
-          </div>
+          <img src={require('@/assets/sgImg/img_tapian.png')} alt='' />
         </div>
       </div>
 
@@ -182,26 +161,7 @@ function A5wenwu() {
         />
 
         <div className='TContainner'>
-          <div className='TLeft'>
-            <div
-              className={`Tbtn1 ${lineType === '碑面' ? 'TActive' : ''}`}
-              onClick={() => setLineType('碑面')}
-            >
-              {myLangue === 'EN' ? 'face' : '碑面'}
-            </div>
-            <div
-              className={`Tbtn2 ${lineType === '碑文' ? 'TActive' : ''}`}
-              onClick={() => setLineType('碑文')}
-            >
-              {myLangue === 'EN' ? 'text' : '碑文'}
-            </div>
-          </div>
-          <div className='TRight'>
-            <img
-              src={require(`@/assets/img/A5_xiantu${lineType === '碑面' ? '1' : '2'}.png`)}
-              alt=''
-            />
-          </div>
+          <img src={require('@/assets/sgImg/img_xiantu.png')} alt='' />
         </div>
       </div>
     </div>

src/pages/A6ybwx/Genealogy/index.module.scss

@@ -8,6 +8,7 @@
   height: 100%;
   background: url('../../../assets/img/A6_gen_bg.png') no-repeat center center;
   background-size: 100% 100%;
+
   :global {
     .back {
       width: 80px;
@@ -17,11 +18,13 @@
       top: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: fill !important;
       }
     }
+
     .icon1 {
       width: 30px;
       height: 30px;
@@ -29,11 +32,13 @@
       top: 4%;
       left: 16%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     .miniGraph {
       position: relative;
       width: 200px;
@@ -46,15 +51,18 @@
       opacity: 0;
       pointer-events: none;
       transition: all 0.3s ease-in-out 0.3s;
+
       .sider {
         transition: all 0.3s ease-in-out;
         transform: translateX(-100%);
       }
     }
+
     .showD {
       opacity: 1;
       pointer-events: auto;
       transition: all 0.3s ease-in-out;
+
       .sider {
         transform: translateX(0);
         transition: all 0.3s ease-in-out 0.3s;
@@ -75,12 +83,15 @@
   color: rgba(255, 255, 255, 1);
   text-align: center;
   transition: all 0.3s ease-in-out;
-  & > img {
+
+  &>img {
     width: 100%;
     object-fit: contain;
   }
+
   &:global(.state1) {
     opacity: 1;
+
     :global {
       img {
         animation: gestureState1 2s linear;
@@ -104,12 +115,14 @@
   justify-content: center;
   gap: 10px;
   backdrop-filter: blur(3px);
+
   :global {
     .title {
       width: 60%;
       height: 50px;
       text-align: center;
       position: relative;
+
       .big {
         width: 100%;
         height: 25px;
@@ -117,12 +130,14 @@
         color: rgba(255, 233, 182, 1);
         margin-bottom: 8px;
       }
+
       .small {
         width: 100%;
         height: 25px;
         font-size: 16px;
         color: rgba(255, 255, 255, 1);
       }
+
       .sun {
         position: absolute;
         top: -3%;
@@ -135,14 +150,17 @@
         filter: blur(3px);
       }
     }
+
     .line {
       width: 38%;
       height: 20px;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     .intro_content {
       width: 80%;
       height: 200px;
@@ -151,11 +169,13 @@
       text-align: center;
       line-height: 26px;
     }
+
     .close {
       cursor: pointer;
       width: 80px;
       height: 40px;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
@@ -171,6 +191,7 @@
   width: 100%;
   height: 100%;
   backdrop-filter: blur(1px);
+
   :global {
     .sider {
       position: relative;
@@ -180,6 +201,7 @@
       background-size: 100% 100%;
       display: flex;
       align-items: center;
+
       .name {
         writing-mode: vertical-rl;
         text-orientation: upright; // 保持文字直立
@@ -191,12 +213,14 @@
         height: 100%;
         font-size: 20px;
         color: rgba(255, 233, 182, 1);
+
         .customN {
           letter-spacing: 5px;
           padding-top: 20px;
           font-size: 16px;
         }
       }
+
       .info {
         width: 80%;
         height: 80%;
@@ -205,20 +229,17 @@
         flex-direction: column;
         align-items: center;
         gap: 10px;
+        overflow: auto;
+        margin-bottom: 26px;
+
+        &::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
 
         .infoitem {
-          &:nth-child(2) {
-            max-height: 38%;
-          }
-          &:nth-child(3) {
-            max-height: 70%;
-          }
           width: 100%;
-          height: fit-content;
-          max-height: 20%;
-          display: flex;
-          flex-direction: column;
-          gap: 6px;
+
           .title {
             width: 100%;
             height: 20px;
@@ -226,33 +247,30 @@
             font-weight: bold;
             color: rgba(124, 75, 54, 1);
           }
+
           .txt {
             width: 100%;
-            height: fit-content;
             font-size: 15px;
             color: rgba(93, 96, 96, 1);
-            overflow: auto;
             max-height: calc(100% - 50px);
-
-            &::-webkit-scrollbar {
-              width: 0;
-              height: 0;
-            }
+            text-align: justify;
           }
         }
       }
+
       .close {
         position: absolute;
-        bottom: 4%;
+        bottom: 2%;
         right: 9%;
         cursor: pointer;
         width: 70px;
         height: 50px;
-        & > img {
+
+        &>img {
           height: 100%;
           object-fit: contain;
         }
       }
     }
   }
-}
+}

src/pages/A6ybwx/Genealogy/index.tsx

@@ -77,7 +77,7 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
               if (!!item.content) {
                 return (
                   <div className='infoitem' key={index}>
-                    <div className='title '>{item?.title}</div>
+                    <div className='title songFont'>{item?.title}</div>
                     <div className='txt'>{item?.content}</div>
                   </div>
                 )

src/pages/A6ybwx/Sangzang/components/Sangzangys/index.module.scss

@@ -328,7 +328,7 @@
           height: 100%;
           display: flex;
           flex-direction: column;
-          gap: 10px;
+          gap: 5px;
           transition: all 0.3s ease-in-out;
           position: relative;
 
@@ -344,7 +344,7 @@
           .text {
             width: 70%;
             height: auto;
-            max-height: 190px;
+            max-height: 200px;
             font-size: 16px;
             line-height: 28px;
             // letter-spacing: 1px;

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

@@ -161,6 +161,8 @@
             width: 80%;
             height: 100%;
             object-fit: contain;
+            position: relative;
+            z-index: 2;
           }
 
           .diwen {
@@ -170,6 +172,7 @@
             height: 100%;
             object-fit: contain;
             opacity: 0.7;
+            z-index: 1;
           }
         }
       }

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

@@ -0,0 +1,18 @@
+.Weijie {
+  width: 100%;
+  height: 0%;
+  position: relative;
+  color: rgba(93, 96, 96, 1);
+  font-size: 16px;
+  letter-spacing: 4px;
+  line-height: 28px;
+  overflow: hidden;
+  top: 20%;
+
+
+  :global {
+    p {
+      text-align: center;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import styles from './index.module.scss'
+
+type Props = {
+  txt: string
+}
+
+function Weijie({ txt }: Props) {
+  return <div id='Weijie' className={styles.Weijie} dangerouslySetInnerHTML={{ __html: txt }}></div>
+}
+
+const MemoWeijie = React.memo(Weijie)
+
+export default MemoWeijie

src/pages/A7wjwj/index.module.scss

@@ -44,40 +44,34 @@
         line-height: 40px;
         color: rgba(93, 96, 96, 0.8);
         cursor: pointer;
+        transition: all 0.8s;
+
+        &::after {
+          content: '';
+          transition: opacity 0.8s;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -56%);
+          width: 140%;
+          height: 110%;
+          background: url('../../assets/img/A7_btn_ac.png') no-repeat center center;
+          background-size: contain;
+          opacity: 0;
+        }
 
         &.active {
           color: rgba(124, 75, 54, 1);
 
           &::after {
-            content: '';
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -56%);
-            width: 140%;
-            height: 110%;
-            background: url('../../assets/img/A7_btn_ac.png') no-repeat center center;
-            background-size: contain;
+            opacity: 1
           }
+
         }
       }
     }
 
-    // 未解之思
-    .weijie {
-      width: 100%;
-      height: 98%;
-      position: relative;
-      color: rgba(93, 96, 96, 1);
-      font-size: 16px;
-      letter-spacing: 4px;
-      line-height: 28px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding-top: 40px;
-    }
+
   }
 }
 

src/pages/A7wjwj/index.tsx

@@ -7,6 +7,7 @@ import { isPc } from '@/utils/http'
 import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+import Weijie from './conponents/Weijie'
 
 function A7Wjwj() {
   const { myData } = useSelector((state: RootState) => state.A0Layout)
@@ -28,11 +29,7 @@ function A7Wjwj() {
       {/* 属性之辨 */}
       <Shuxing ref={tab2Ref} style={{ display: currentTab === 1 ? 'flex' : 'none' }} />
       {/* 未解之思 */}
-      <div
-        className='weijie'
-        dangerouslySetInnerHTML={{ __html: myData.weijie }}
-        style={{ display: currentTab === 2 ? 'flex' : 'none' }}
-      ></div>
+      {currentTab === 2 ? <Weijie txt={myData.weijie} /> : null}
 
       <div className={classNames('back', isPc ? '' : 'moBack')} onClick={() => gotoBack()}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />