Startsida Utforska Hjälp
Registrera dig Logga in
lanxin
/
Chengzhebei
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

Merge branch 'master' of http://192.168.0.115:3000/lanxin/Chengzhebei

lanxin 1 månad sedan
förälder
615b6fad90 8ea4896a41
incheckning
1f05fdf83b
30 ändrade filer med 562 tillägg och 409 borttagningar
Delad Vy Visa Diff Statistik
  1. BIN
      public/Beizhongshijie/Build/Build.data.unityweb
  2. BIN
      public/Beizhongshijie/Build/Build.framework.js.unityweb
  3. BIN
      public/Beizhongshijie/Build/Build.wasm.unityweb
  4. 83 75
      public/Beizhongshijie/index.html
  5. 4 4
      public/Beizhongshijie/unityExport.js
  6. BIN
      public/Chenzhebei-ShanxiMuseum/Build/Build.data.unityweb
  7. BIN
      public/Chenzhebei-ShanxiMuseum/Build/Build.framework.js.unityweb
  8. BIN
      public/Chenzhebei-ShanxiMuseum/Build/Build.wasm.unityweb
  9. 18 18
      public/Chenzhebei-ShanxiMuseum/StreamingAssets/Settings.json
  10. 0 1
      public/Chenzhebei-ShanxiMuseum/index.html
  11. 2 10
      public/Chenzhebei-ShanxiMuseum/unityExport.js
  12. BIN
      public/myData/home.ts
  13. 34 24
      public/myData/myDataEN.js
  14. BIN
      src/assets/sgImg/btn_skip@2x.png
  15. BIN
      src/assets/sgImg/icon_skip@2x.png
  16. 2 2
      src/assets/styles/base.css
  17. 17 3
      src/assets/styles/base.less
  18. 24 49
      src/components/MenuSider/index.module.scss
  19. 7 3
      src/components/MenuSider/index.tsx
  20. 52 0
      src/components/Skip/index.module.scss
  21. 48 0
      src/components/Skip/index.tsx
  22. 41 85
      src/pages/A0base/index.module.scss
  23. 20 16
      src/pages/A0base/index.tsx
  24. 13 24
      src/pages/A1home2/index.module.scss
  25. 25 18
      src/pages/A1home2/index.tsx
  26. 14 11
      src/pages/A6ybwx/Genealogy/index.module.scss
  27. 47 35
      src/pages/A6ybwx/Genealogy/index.tsx
  28. 45 16
      src/pages/A6ybwx/index.module.scss
  29. 64 13
      src/pages/A6ybwx/index.tsx
  30. 2 2
      src/pages/A7wjwj/conponents/Content/index.tsx

BIN
public/Beizhongshijie/Build/Build.data.unityweb
Visa fil


BIN
public/Beizhongshijie/Build/Build.framework.js.unityweb
Visa fil


BIN
public/Beizhongshijie/Build/Build.wasm.unityweb
Visa fil


+ 83 - 75
public/Beizhongshijie/index.html
Visa fil 

@@ -1,30 +1,31 @@
 
 <!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="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>

-    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>

+

+    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'.

@@ -33,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: '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: 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)

@@ -72,35 +73,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 => {

-        progressBarFull.style.width = 100 * progress + '%'

-      })

-        .then(unityInstance => {

-          loadingBar.style.display = 'none'

-          window.unityInstance = unityInstance

-        })

-        .catch(message => {

-          alert(message)

-        })

-    }

-    document.body.appendChild(script)

-  </script>

-</html>

+        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>

+ 4 - 4
public/Beizhongshijie/unityExport.js
Visa fil 

@@ -1,6 +1,6 @@
 
 //碑中世界 - 点击主要热点时触发

-window.onClickMainHotspot = function (hotspotName) {

-  if (window.parent && window.parent !== window) {

-    window.parent.onClickMainHotspot(hotspotName)

-  }

+window.onClickMainHotspot = function(hotspotName){

+    if (window.parent && window.parent !== window) {

+        window.parent.onClickMainHotspot(hotspotName);

+    }

 }

BIN
public/Chenzhebei-ShanxiMuseum/Build/Build.data.unityweb
Visa fil


BIN
public/Chenzhebei-ShanxiMuseum/Build/Build.framework.js.unityweb
Visa fil


BIN
public/Chenzhebei-ShanxiMuseum/Build/Build.wasm.unityweb
Visa fil


+ 18 - 18
public/Chenzhebei-ShanxiMuseum/StreamingAssets/Settings.json
Visa fil 

@@ -11,7 +11,7 @@
 
       "cameraY": 0,

       "model": {

         "rotation": {

-          "x": 0,

+          "x": 5,

           "y": -180,

           "z": 0

         }

@@ -25,7 +25,7 @@
 
       "cameraY": 0,

       "model": {

         "rotation": {

-          "x": 0,

+          "x": 5,

           "y": -180,

           "z": 0

         }

@@ -39,7 +39,7 @@
 
       "cameraY": 0,

       "model": {

         "rotation": {

-          "x": 0,

+          "x": 5,

           "y": -180,

           "z": 0

         }

@@ -53,7 +53,7 @@
 
       "cameraY": 0,

       "model": {

         "rotation": {

-          "x": 0,

+          "x": 5,

           "y": -180,

           "z": 0

         }

@@ -67,7 +67,7 @@
 
       "cameraY": 0.6,

       "model": {

         "rotation": {

-          "x": 0,

+          "x": -5,

           "y": 0,

           "z": 0

         }

@@ -82,7 +82,7 @@
 
       "cameraY": 0,

       "model": {

         "rotation": {

-          "x": 0,

+          "x": 5,

           "y": -180,

           "z": 0

         }

@@ -100,7 +100,7 @@
 
         "offset": -2,

         "position": {

           "y": 0.8,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -121,7 +121,7 @@
 
         "offset": -2,

         "position": {

           "y": 0,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -142,7 +142,7 @@
 
         "offset": -2.6,

         "position": {

           "y": 0,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -163,7 +163,7 @@
 
         "offset": -2.4,

         "position": {

           "y": 2,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -184,7 +184,7 @@
 
         "offset": -2.4,

         "position": {

           "y": -4.5,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -205,7 +205,7 @@
 
         "offset": -1.2,

         "position": {

           "y": 2,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -226,7 +226,7 @@
 
         "offset": -1.4,

         "position": {

           "y": -1.5,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -247,7 +247,7 @@
 
         "offset": -1.4,

         "position": {

           "y": -3,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -270,7 +270,7 @@
 
         "offset": 0,

         "position": {

           "y": 4.4,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -291,7 +291,7 @@
 
         "offset": 0,

         "position": {

           "y": 3.6,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -311,7 +311,7 @@
 
         "offset": -7,

         "position": {

           "y": 0.6,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

@@ -332,7 +332,7 @@
 
         "offset": -7,

         "position": {

           "y": 0.6,

-          "z": -50

+          "z": -20

         }

       },

       "model": {

+ 0 - 1
public/Chenzhebei-ShanxiMuseum/index.html
Visa fil 

@@ -93,7 +93,6 @@ loadingBar.style.display = "block";
 
     script.src = loaderUrl;

     script.onload = () => {

         createUnityInstance(canvas, config, (progress) => {

-

             if (window.parent && window.parent !== window) {

                 window.parent.unityLoading(progress);

             }

+ 2 - 10
public/Chenzhebei-ShanxiMuseum/unityExport.js
Visa fil 

@@ -1,4 +1,3 @@
 
-

 //当需要显示热点Tag的时候触发, 该函数为unity主动调用的函数

 window.showTag = function (index) {

     if (window.parent && window.parent !== window) {

@@ -19,20 +18,14 @@ window.onModelControlled = function () {
 
     }

 }

 

-window.onClickMainHotspot = function(hotspotName){

-    if (window.parent && window.parent !== window) {

-        window.parent.onClickMainHotspot();

-    }

-}

-

 //更新配置

 window.refreshAppSettings = function (json) {

     window.unityInstance.SendMessage('MainCanvas', 'RefreshAppSettings', json)

 }

 

+//设置模型自动旋转, 0代表不自动旋转

 window.setModelAutoRotation = function(speed){

     window.unityInstance.SendMessage('MainCanvas', 'SetModelAutoRotation', speed)

-    

 }

 

 //切换背景图 (0目录页, 1玄石可观, 2石上春秋, 3碑刻密码, 4模型鉴赏) 这些名字对应的蓝湖设计的标题

@@ -40,7 +33,6 @@ window.changePanel = function (index) {
 
     window.unityInstance.SendMessage('MainCanvas', 'ChangePanel', index)

 }

 

-

 //聚焦热点, 对应玄石可观中的热点, 在调用之前需要先调用changPanel(1), 退出页面时需要调用showHotspot(-1)

 window.showHotspot = function (index) {

     window.unityInstance.SendMessage('MainCanvas', 'ShowHotspot', index)

@@ -74,4 +66,4 @@ window.addModelScale = function (value) {
 
 //重置模型, 对应蓝湖设计 "文物鉴赏-尺寸" 右侧的重置按钮

 window.resetModel = function () {

     window.unityInstance.SendMessage('MainCanvas', 'ResetModel')

-}

+}

BIN
public/myData/home.ts
Visa fil


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 34 - 24
public/myData/myDataEN.js


BIN
src/assets/sgImg/btn_skip@2x.png
Visa fil


BIN
src/assets/sgImg/icon_skip@2x.png
Visa fil


+ 2 - 2
src/assets/styles/base.css
Visa fil 

@@ -248,7 +248,7 @@ textarea {
 
     height: 100%;
 
     cursor: pointer;
 
     display: flex;
 
-    justify-content: end;
 
+    justify-content: flex-end;
 
     align-items: center;
 
   }
 
   #root .ant-tooltip .tooltip_MT .top .close > img {
 
@@ -370,7 +370,7 @@ textarea {
 
   height: 100%;
 
   cursor: pointer;
 
   display: flex;
 
-  justify-content: end;
 
+  justify-content: flex-end;
 
   align-items: center;
 
 }
 
 #root .ant-tooltip .tooltip_MT .top .close > img {

+ 17 - 3
src/assets/styles/base.less
Visa fil 

@@ -322,7 +322,7 @@ textarea {
 
         height: 100%;
 
         cursor: pointer;
 
         display: flex;
 
-        justify-content: end;
 
+        justify-content: flex-end;
 
         align-items: center;
 
 
         &>img {
 
@@ -484,7 +484,7 @@ textarea {
 
       height: 100%;
 
       cursor: pointer;
 
       display: flex;
 
-      justify-content: end;
 
+      justify-content: flex-end;
 
       align-items: center;
 
 
       &>img {
 
@@ -581,4 +581,18 @@ textarea {
 
   img {
 
     object-fit: fill !important;
 
   }
 
-}
 
+}
 
+
 
+// 页面透明度渐变
 
+// #opacityCss {
 
+//   animation: opacityCss 2s linear forwards;
 
+// }
 
+
 
+// @keyframes opacityCss {
 
+//   0% {
 
+//     opacity: 0.5;
 
+//   }
 
+//   100% {
 
+//     opacity: 1;
 
+//   }
 
+// }

+ 24 - 49
src/components/MenuSider/index.module.scss
Visa fil 

@@ -1,14 +1,14 @@
 
 // 菜单
 
 .menu {
 
-  width: 50px;
 
-  height: 50px;
 
   position: fixed;
 
   z-index: 3;
 
-  top: 3%;
 
-  right: 3%;
 
   cursor: pointer;
 
+  top: 2%;
 
+  right: 2%;
 
+  width: 66px;
 
+  height: 66px;
 
 
-  & > img {
 
+  &>img {
 
     height: 100%;
 
     object-fit: contain;
 
   }
 
@@ -32,6 +32,7 @@
 
   &:global(.show) {
 
     opacity: 1;
 
     pointer-events: auto;
 
+
 
     :global {
 
       .sider {
 
         transition: all 0.3s ease-in-out 0.3s;
 
@@ -54,14 +55,14 @@
 
       display: flex;
 
       justify-content: flex-end;
 
 
-      & > img {
 
+      &>img {
 
         position: absolute;
 
-        height: 20px;
 
         top: 50%;
 
-        left: 0;
 
         transform: translateY(-50%);
 
         cursor: pointer;
 
         object-fit: contain;
 
+        height: 46px;
 
+        left: -6%;
 
       }
 
 
       .siderContent {
 
@@ -79,7 +80,7 @@
 
           text-align: center;
 
           width: 100%;
 
           height: 50px;
 
-          font-size: 17px;
 
+          font-size: 20px;
 
           font-weight: 500;
 
           color: rgba(124, 75, 54, 1);
 
           cursor: pointer;
 
@@ -96,7 +97,7 @@
 
             align-items: center;
 
             justify-content: center;
 
 
-            & > img {
 
+            &>img {
 
               width: 60%;
 
               height: 100%;
 
               object-fit: contain;
 
@@ -116,14 +117,14 @@
 
         .icon {
 
           position: relative;
 
           top: 60px;
 
-          width: 80%;
 
+          width: 65%;
 
           height: 60px;
 
           display: flex;
 
           align-items: center;
 
           justify-content: space-between;
 
           gap: 10px;
 
 
-          & > div {
 
+          &>div {
 
             font-size: 10px;
 
             font-weight: lighter;
 
             color: #fff;
 
@@ -132,44 +133,9 @@
 
             align-items: center;
 
             justify-content: center;
 
 
-            & > img {
 
-              width: 30px;
 
-              object-fit: contain;
 
-            }
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-
 
-// ------------移动端页面---------
 
-.menuMo {
 
-  top: 2%;
 
-  right: 2%;
 
-  width: 66px;
 
-  height: 66px;
 
-}
 
-
 
-.menuSiderMo {
 
-  :global {
 
-    .sider {
 
-      img {
 
-        height: 46px;
 
-        left: -6%;
 
-      }
 
-
 
-      .siderContent {
 
-        .tab {
 
-          font-size: 20px;
 
-        }
 
-
 
-        .icon {
 
-          width: 65%;
 
-
 
-          & > div {
 
-            img {
 
+            &>img {
 
               width: 34px;
 
+              object-fit: contain;
 
             }
 
 
             .txt {
 
@@ -182,3 +148,12 @@
 
     }
 
   }
 
 }
 
+
 
+
 
+
 
+// 英文页面
 
+// .menuEn {}
 
+
 
+// .menuSiderEn {
 
+//   :global {}
 
+// }

+ 7 - 3
src/components/MenuSider/index.tsx
Visa fil 

@@ -1,13 +1,17 @@
 
 import React, { useState } from 'react'
 
 import styles from './index.module.scss'
 
 import classNames from 'classnames'
 
-import { isPc } from '@/utils/http'
 
 import { Toast } from 'antd-mobile'
 
+import { useSelector } from 'react-redux'
 
+import { RootState } from '@/store'
 
 
 /**
 
  * @param activeTab 0:一碑两面 1:一碑万象 2:无尽未竟
 
  */
 
 function MenuSider({ activeTab }: { activeTab: number }) {
 
+
 
+  const {myLangue} =useSelector((state:RootState)=>state.A0Layout)
 
+
 
   const [isShowMenu, setIsShowMenu] = useState(false)
 
 
   const byzhClick = (activeTab: number) => {
 
@@ -22,7 +26,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
 
   return (
 
     <>
 
       <div
 
-        className={classNames(isPc ? '' : styles.menuMo, styles.menu)}
 
+        className={classNames(myLangue==='EN' ? styles.menuEn : '', styles.menu)}
 
         onClick={() => setIsShowMenu(true)}
 
       >
 
         <img src={require('@/assets/img/btn_menu.png')} alt='' />
 
@@ -31,7 +35,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
 
         className={classNames(
 
           styles.menuSider,
 
           isShowMenu ? 'show' : '',
 
-          isPc ? '' : styles.menuSiderMo
 
+          myLangue==='EN' ? styles.menuSiderEn : ''
 
         )}
 
       >
 
         <div className='sider'>

+ 52 - 0
src/components/Skip/index.module.scss
Visa fil 

@@ -0,0 +1,52 @@
 
+.Skip {
 
+  position: absolute;
 
+  bottom: 15px;
 
+  right: 15px;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  cursor: pointer;
 
+  background-image: url('../../assets/sgImg/btn_skip@2x.png');
 
+  background-size: 100% 100%;
 
+  width: 110px;
 
+  height: 36px;
 
+  padding: 2px 0 0 15px;
 
+  opacity: 0;
 
+  pointer-events: none;
 
+  transition: all 0.3s;
 
+
 
+  :global {
 
+    .skipTxt {
 
+      color: #ffe9b6;
 
+      font-size: 18px;
 
+      letter-spacing: 4px;
 
+    }
 
+
 
+    .skipIcon {
 
+      position: relative;
 
+      top: -2px;
 
+      width: 24px;
 
+      height: 24px;
 
+    }
 
+  }
 
+}
 
+
 
+.Skip2 {
 
+  background-image: none;
 
+
 
+  :global {
 
+    .skipIcon {
 
+      position: relative;
 
+      top: -2px;
 
+      width: 30px;
 
+      height: 30px;
 
+    }
 
+  }
 
+
 
+}
 
+
 
+
 
+.SkipShow {
 
+  opacity: 1;
 
+  pointer-events: auto;
 
+}

+ 48 - 0
src/components/Skip/index.tsx
Visa fil 

@@ -0,0 +1,48 @@
 
+import React, { useEffect, useRef, useState } from 'react'
 
+import styles from './index.module.scss'
 
+import { useSelector } from 'react-redux'
 
+import { RootState } from '@/store'
 
+import classNames from 'classnames'
 
+
 
+type Props = {
 
+  imgSrc?: string
 
+  clickFu: () => void
 
+  num?: number
 
+}
 
+
 
+function Skip({ imgSrc, clickFu, num = 1 }: Props) {
 
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
 
+
 
+  const [show, setShow] = useState(false)
 
+
 
+  const timeRef = useRef(-1)
 
+
 
+  useEffect(() => {
 
+    clearTimeout(timeRef.current)
 
+    timeRef.current = window.setTimeout(() => {
 
+      setShow(true)
 
+    }, num * 1000)
 
+
 
+    return () => {
 
+      clearTimeout(timeRef.current)
 
+    }
 
+  }, [num])
 
+
 
+  return (
 
+    <div
 
+      className={classNames(styles.Skip, show ? styles.SkipShow : '', imgSrc ? styles.Skip2 : '')}
 
+      onClick={clickFu}
 
+    >
 
+      <div className='skipTxt'> {myLangue === 'ZH' ? '跳过' : 'skip'}</div>
 
+      <img
 
+        className='skipIcon'
 
+        src={require(`@/assets/sgImg/${imgSrc ? imgSrc : 'icon_skip@2x'}.png`)}
 
+        alt=''
 
+      />
 
+    </div>
 
+  )
 
+}
 
+
 
+const MemoSkip = React.memo(Skip)
 
+
 
+export default MemoSkip

+ 41 - 85
src/pages/A0base/index.module.scss
Visa fil 

@@ -4,6 +4,7 @@
 
   background-color: #ccc;
 
   position: relative;
 
 
+
 
   :global {
 
     .A0baseContainner {
 
       width: 58%;
 
@@ -18,41 +19,44 @@
 
       align-items: center;
 
 
       .content {
 
-        width: 60%;
 
+        width: 68%;
 
         height: 100%;
 
         display: flex;
 
         flex-direction: column;
 
         gap: 10px;
 
+
 
         .title {
 
-          width: 150px;
 
           max-width: 80%;
 
-          font-size: 21px;
 
           color: rgba(124, 75, 54, 1);
 
           border-bottom: 1px solid rgba(93, 96, 96, 0.4);
 
+          width: 160px;
 
+          font-size: 26px;
 
         }
 
 
         .text {
 
           width: 90%;
 
           height: fit-content;
 
           max-height: 200px;
 
-          font-size: 13px;
 
-          line-height: 20px;
 
-          font-weight: lighter;
 
-          color: rgba(93, 96, 96, 1);
 
+          font-size: 16px;
 
+          line-height: 24px;
 
+          letter-spacing: 2px;
 
+          color: #504e40;
 
+          text-align: justify;
 
+          font-weight: 400;
 
         }
 
 
         .btn {
 
-          padding-top: 10px;
 
-          font-size: 14px;
 
           color: rgba(93, 96, 96, 1);
 
           cursor: pointer;
 
           position: relative;
 
+          font-size: 18px;
 
+          padding-top: 15px;
 
 
           &::before {
 
             content: '';
 
             position: absolute;
 
-            left: 55px;
 
-            top: 8px;
 
+            left: 72px;
 
+            top: 15px;
 
             width: 22px;
 
             height: 22px;
 
             background-image: url('../../assets/sgImg/icon_more.png');
 
@@ -94,12 +98,12 @@
 
 
     /* 互动 */
 
     .interact {
 
-      width: 60px;
 
-      height: 120px;
 
+      width: 100px;
 
+      height: 200px;
 
       position: absolute;
 
       z-index: 1;
 
       bottom: 5%;
 
-      left: 2%;
 
+      left: 0;
 
       display: flex;
 
       align-items: center;
 
       justify-content: flex-end;
 
@@ -135,11 +139,17 @@
 
       .inter_content_active {
 
         height: calc(100% - 50px);
 
         opacity: 1;
 
+
 
+        .inter {
 
+          margin: 4px 0;
 
+          height: 24px;
 
+          font-size: 16px;
 
+        }
 
       }
 
 
       .icon {
 
-        width: 50px;
 
-        height: 50px;
 
+        width: 64px;
 
+        height: 64px;
 
         cursor: pointer;
 
 
         img {
 
@@ -152,8 +162,8 @@
 
 
     /* 首页图标*/
 
     .home {
 
-      width: 30px;
 
-      height: 30px;
 
+      width: 44px;
 
+      height: 44px;
 
       position: absolute;
 
       z-index: 1;
 
       top: 3%;
 
@@ -179,16 +189,17 @@
 
       color: rgba(177, 150, 123, 1);
 
       cursor: pointer;
 
 
-      & > img {
 
-        height: 30px;
 
-        object-fit: contain;
 
+      &>img {
 
+        width: 44px;
 
+        object-fit: cover;
 
       }
 
 
-      & > .guideVideoTitle {
 
+      &>.guideVideoTitle {
 
         height: 12px;
 
         line-height: 8px;
 
-        font-size: 12px;
 
         font-weight: 500;
 
+        margin-top: 5px;
 
+        font-size: 16px;
 
       }
 
     }
 
   }
 
@@ -196,70 +207,15 @@
 
 
 // ------------移动端---------------
 
 
-.A0baseMo {
 
+.A0baseEn {
 
   :global {
 
-    .home {
 
-      width: 44px;
 
-      height: 44px;
 
-    }
 
-
 
-    .interact .icon {
 
-      width: 64px;
 
-      height: 64px;
 
-    }
 
-
 
-    .guideVideo {
 
-      & > img {
 
-        width: 44px;
 
-        object-fit: cover;
 
-      }
 
-
 
-      .guideVideoTitle {
 
-        margin-top: 5px;
 
-        font-size: 16px;
 
-      }
 
-    }
 
-
 
-    .A0baseContainner .content {
 
-      width: 68%;
 
-
 
-      .title {
 
-        width: 160px;
 
-        font-size: 26px;
 
-      }
 
-
 
-      .text {
 
-        font-size: 16px;
 
-        line-height: 24px;
 
-        letter-spacing: 2px;
 
-        color: #504e40;
 
-        text-align: justify;
 
-        font-weight: 400;
 
-      }
 
-
 
-      .btn {
 
-        font-size: 18px;
 
-        padding-top: 15px;
 
-
 
-        &::before {
 
-          left: 72px;
 
-          top: 15px;
 
-        }
 
-      }
 
-    }
 
-
 
-    .interact {
 
-      left: 0;
 
-      width: 100px;
 
-      height: 200px;
 
-
 
-      .inter_content_active {
 
-        .inter {
 
-          margin: 4px 0;
 
-          height: 24px;
 
-          font-size: 16px;
 
+    .A0baseContainner {
 
+      .content {
 
+        .title {
 
+          width: auto;
 
+          max-width: auto;
 
         }
 
       }
 
     }
 
   }
 
-}
 
+}

+ 20 - 16
src/pages/A0base/index.tsx
Visa fil 

@@ -1,6 +1,5 @@
 
 import React, { useState } from 'react'
 
 import styles from './index.module.scss'
 
-import { isPc } from '@/utils/http'
 
 import classNames from 'classnames'
 
 import { useSelector } from 'react-redux'
 
 import { RootState } from '@/store'
 
@@ -18,10 +17,11 @@ function A0base() {
 
     window.location.replace(path)
 
   }
 
 
-
 
-
 
   return (
 
-    <div className={classNames(isPc ? '' : styles.A0baseMo, styles.A0base)}>
 
+    <div
 
+      className={classNames(myLangue === 'ZH' ? '' : styles.A0baseEn, styles.A0base)}
 
+      id='opacityCss'
 
+    >
 
       <div className='A0baseContainner'>
 
         <div className={`content`}>
 
           <div className='title myFont'>{myData.baseInfo[currentBase].title}</div>
 
@@ -58,18 +58,24 @@ function A0base() {
 
           <div className='inter' onClick={() => window.location.replace('#/byzh')}>
 
             碑影智绘
 
           </div>
 
-          <div className='inter' onClick={() => {
 
-            Toast.show({
 
-              content: '正在开发中'
 
-            })
 
-          }}>
 
+          <div
 
+            className='inter'
 
+            onClick={() => {
 
+              Toast.show({
 
+                content: '正在开发中'
 
+              })
 
+            }}
 
+          >
 
             展览图谱
 
           </div>
 
-          <div className='inter' onClick={() => {
 
-            Toast.show({
 
-              content: '正在开发中'
 
-            })
 
-          }}>
 
+          <div
 
+            className='inter'
 
+            onClick={() => {
 
+              Toast.show({
 
+                content: '正在开发中'
 
+              })
 
+            }}
 
+          >
 
             AI问答
 
           </div>
 
         </div>
 
@@ -88,8 +94,6 @@ function A0base() {
 
         <img src={require('@/assets/img/guideVideo.png')} alt='' />
 
         <div className='guideVideoTitle'>先导片</div>
 
       </div>
 
-
 
-
 
     </div>
 
   )
 
 }

+ 13 - 24
src/pages/A1home2/index.module.scss
Visa fil 

@@ -52,9 +52,10 @@
 
         height: 30px;
 
         line-height: 30px;
 
         text-align: center;
 
-        transform: translate(70px, 155px);
 
+        transform: translate(100px, 155px);
 
         position: relative;
 
         z-index: 10;
 
+        font-weight: 700;
 
       }
 
 
       .btn {
 
@@ -62,7 +63,7 @@
 
         height: 60px;
 
         background: url(../../assets/img/btn_home.png) no-repeat center center;
 
         background-size: 100% 100%;
 
-        transform: translate(66px, 155px);
 
+        transform: translate(90px, 155px);
 
         cursor: pointer;
 
         display: flex;
 
         align-items: center;
 
@@ -111,21 +112,6 @@
 
         height: 100%;
 
       }
 
 
-      .A1videoBtn {
 
-        position: absolute;
 
-        bottom: 15px;
 
-        right: 15px;
 
-        color: #fff;
 
-        font-size: 18px;
 
-        letter-spacing: 4px;
 
-
 
-        &>img {
 
-          position: relative;
 
-          top: -3px;
 
-          width: 30px;
 
-          height: 30px;
 
-        }
 
-      }
 
     }
 
 
 
@@ -134,17 +120,20 @@
 
 }
 
 
 
-// --------------移动端
 
-.A1homeMo {
 
+// --------------英文版
 
+.A1homeEm {
 
   :global {
 
     .loadingP {
 
       .btn {
 
-        transform: translate(90px, 155px);
 
-      }
 
+        width: 70px;
 
+        height: 70px;
 
 
-      .progress {
 
-        transform: translate(100px, 155px);
 
-        font-weight: 700;
 
+        .txt {
 
+          width: 42px;
 
+          height: 21px;
 
+          font-size: 16px;
 
+
 
+        }
 
       }
 
     }
 
   }

+ 25 - 18
src/pages/A1home2/index.tsx
Visa fil 

@@ -1,10 +1,12 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import styles from './index.module.scss'
 
 import classNames from 'classnames'
 
-import { isPc } from '@/utils/http'
 
 import { domDelOwnFu } from '@/utils/utilsSome'
 
 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'
 
 
 function A1home() {
 
@@ -127,7 +129,7 @@ function A1home() {
 
   }, [baseFlag, loadOk, videoOk])
 
 
   return (
 
-    <div className={classNames(styles.A1home, isPc ? '' : styles.A1homeMo)}>
 
+    <div className={classNames(styles.A1home, myLangue === 'ZH' ? '' : styles.A1homeEm)}>
 
       {/* 背景图 */}
 
       <img
 
         onLoad={() => setBaseImg(true)}
 
@@ -156,10 +158,16 @@ function A1home() {
 
           className='A1Launge'
 
           hidden={progress < 100}
 
           onClick={() => {
 
-            Toast.show({
 
-              content: '正在开发中'
 
-            })
 
-            // locSetLangue(myLangue==='ZH'?'EN':'ZH')
 
+            if (envFlag) {
 
+              locSetLangue(myLangue === 'ZH' ? 'EN' : 'ZH')
 
+              setTimeout(() => {
 
+                window.location.reload()
 
+              }, 200)
 
+            } else {
 
+              Toast.show({
 
+                content: '正在开发中'
 
+              })
 
+            }
 
           }}
 
         >
 
           <img src={require(`@/assets/sgImg/${myLangue}.png`)} alt='' />
 
@@ -169,18 +177,17 @@ function A1home() {
 
       {baseFlag ? (
 
         <div className='A1videoBox'>
 
           <div className='A1video' style={{ opacity: 1 }}></div>
 
-          <div
 
-            className='A1videoBtn'
 
-            onClick={() => {
 
-              // 删除第二个动画
 
-              playerRef.current.destroy()
 
-              domDelOwnFu('.A1video')
 
-              window.location.replace('#/base')
 
-            }}
 
-          >
 
-            {myLangue === 'ZH' ? '跳过' : 'skip'}
 
-            <img src={require('@/assets/sgImg/icon_skip.png')} alt='' />
 
-          </div>
 
+
 
+          {loadOk ? (
 
+            <Skip
 
+              clickFu={() => {
 
+                // 删除第二个动画
 
+                playerRef.current.destroy()
 
+                domDelOwnFu('.A1video')
 
+                window.location.replace('#/base')
 
+              }}
 
+            />
 
+          ) : null}
 
         </div>
 
       ) : null}
 
     </div>

+ 14 - 11
src/pages/A6ybwx/Genealogy/index.module.scss
Visa fil 

@@ -10,8 +10,8 @@
 
   background-size: 100% 100%;
 
   :global {
 
     .back {
 
-      width: 60px;
 
-      height: 30px;
 
+      width: 80px;
 
+      height: 40px;
 
       position: absolute;
 
       z-index: 1;
 
       top: 3%;
 
@@ -19,15 +19,15 @@
 
       cursor: pointer;
 
       & > img {
 
         height: 100%;
 
-        object-fit: contain;
 
+        object-fit: fill !important;
 
       }
 
     }
 
     .icon1 {
 
-      width: 25px;
 
-      height: 25px;
 
+      width: 30px;
 
+      height: 30px;
 
       position: absolute;
 
       top: 4%;
 
-      left: 14%;
 
+      left: 16%;
 
       cursor: pointer;
 
       & > img {
 
         height: 100%;
 
@@ -113,13 +113,14 @@
 
       .big {
 
         width: 100%;
 
         height: 25px;
 
-        font-size: 22px;
 
+        font-size: 24px;
 
         color: rgba(255, 233, 182, 1);
 
+        margin-bottom: 8px;
 
       }
 
       .small {
 
         width: 100%;
 
         height: 25px;
 
-        font-size: 15px;
 
+        font-size: 16px;
 
         color: rgba(255, 255, 255, 1);
 
       }
 
       .sun {
 
@@ -145,14 +146,16 @@
 
     .content {
 
       width: 70%;
 
       height: 45%;
 
-      font-size: 15px;
 
+      font-size: 16px;
 
       color: rgba(209, 201, 178, 1);
 
       text-align: center;
 
+      line-height: 26px;
 
+      text-align: justify;
 
     }
 
     .close {
 
       cursor: pointer;
 
-      width: 55px;
 
-      height: 55px;
 
+      width: 70px;
 
+      height: 70px;
 
       & > img {
 
         height: 100%;
 
         object-fit: contain;

+ 47 - 35
src/pages/A6ybwx/Genealogy/index.tsx
Visa fil 

@@ -17,12 +17,13 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
 
   useEffect(() => {
 
     let timer: NodeJS.Timeout
 
     if (!isShowIntro) {
 
-      timer = setTimeout(() => {
 
-        setGestureState1('state1')
 
+      timer =
 
         setTimeout(() => {
 
-          setGestureState1('')
 
-        }, 2000)
 
-      }, 500)
 
+          setGestureState1('state1')
 
+          setTimeout(() => {
 
+            setGestureState1('')
 
+          }, 2000)
 
+        }, 500)
 
     }
 
     return () => {
 
       clearTimeout(timer)
 
@@ -44,36 +45,42 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
 
         <img src={require('@/assets/img/A6_gen_icon1.png')} alt='' />
 
       </div>
 
 
-      <div className={`${styles.gesture} ${gestureState1}`} onClick={() => setIsShowGesture(false)}>
 
-        <img src={require('@/assets/img/A6_gen_gesture.png')} draggable='false' alt='' />
 
-        点击查看更多
 
+      <div className='icon1' onClick={() => setIsShowIntro(true)}>
 
+        <img src={require('@/assets/img/A6_gen_icon1.png')} alt='' />
 
       </div>
 
 
-      {
 
-        isShowIntro && (
 
-          <div className={styles.intro}>
 
-            <div className='title'>
 
-              <div className='big'>世系铭远</div>
 
-              <div className='small'>程哲碑所载家族谱系</div>
 
-              <div className='sun'></div>
 
-            </div>
 
-            <div className='line'>
 
-              <img src={require('@/assets/img/A6_gen_introline.png')} draggable='false' alt='' />
 
-            </div>
 
-            <div className='content'>
 
-              东魏时期，北魏末年战乱虽让门阀制度略有松动，
 
-              但家族血缘依旧是社会结构的核心纽带，北魏“以姓定族”“以族定贵”的门阀传统得以延续，家族的政治地位、世系传承与宗族凝聚力成为衡量社会地位的核心标准。
 
-              程哲碑的碑文通过追溯祖先，将上党程氏家族塑造为世代簪缨的望族。
 
-              在社会动荡的背景下，以先祖攀附、郡望嫁接来重新构建地方家族门阀秩序显得意义重大，
 
-              也是这一时期地方家族巩固、提升社会地位潮流的产物。
 
-            </div>
 
-            <div className='close' onClick={() => setIsShowIntro(false)}>
 
-              <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />
 
-            </div>
 
-          </div>
 
-        )
 
-      }
 
+      {isShowGesture && (
 
+        <div
 
+          className={`${styles.gesture} ${gestureState1}`}
 
+          onClick={() => setIsShowGesture(false)}
 
+        >
 
+          <img src={require('@/assets/img/A6_gen_gesture.png')} draggable='false' alt='' />
 
+          点击查看更多
 
+        </div>
 
+      )}
 
 
+      {isShowIntro && (
 
+        <div className={styles.intro}>
 
+          <div className='title'>
 
+            <div className='big'>世系铭远</div>
 
+            <div className='small'>程哲碑所载家族谱系</div>
 
+            <div className='sun'></div>
 
+          </div>
 
+          <div className='line'>
 
+            <img src={require('@/assets/img/A6_gen_introline.png')} draggable='false' alt='' />
 
+          </div>
 
+          <div className='content'>
 
+            东魏时期，北魏末年战乱虽让门阀制度略有松动，
 
+            但家族血缘依旧是社会结构的核心纽带，北魏“以姓定族”“以族定贵”的门阀传统得以延续，家族的政治地位、世系传承与宗族凝聚力成为衡量社会地位的核心标准。
 
+            程哲碑的碑文通过追溯祖先，将上党程氏家族塑造为世代簪缨的望族。
 
+            在社会动荡的背景下，以先祖攀附、郡望嫁接来重新构建地方家族门阀秩序显得意义重大，
 
+            也是这一时期地方家族巩固、提升社会地位潮流的产物。
 
+          </div>
 
+          <div className='close' onClick={() => setIsShowIntro(false)}>
 
+            <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />
 
+          </div>
 
+        </div>
 
+      )}
 
 
       <div className={`${styles.nodeDetail} ${currentNodeIndex !== -1 ? 'showD' : 'hideD'}`}>
 
         <div className='sider'>
 
@@ -88,13 +95,18 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
 
               </div>
 
             ))}
 
           </div>
 
-          <div className='close' onClick={() => { setCurrentNodeIndex(-1); setIsShowGesture(false) }}>
 
+          <div
 
+            className='close'
 
+            onClick={() => {
 
+              setCurrentNodeIndex(-1)
 
+              setIsShowGesture(false)
 
+            }}
 
+          >
 
             <img src={require('@/assets/img/closeWithTxt2.png')} draggable='false' alt='' />
 
           </div>
 
         </div>
 
       </div>
 
-
 
-    </div >
 
+    </div>
 
   )
 
 }

+ 45 - 16
src/pages/A6ybwx/index.module.scss
Visa fil 

@@ -34,22 +34,6 @@
 
           width: 100%;
 
           height: 100%;
 
         }
 
-
 
-        .A1videoBtn {
 
-          position: absolute;
 
-          bottom: 15px;
 
-          right: 15px;
 
-          color: #fff;
 
-          font-size: 18px;
 
-          letter-spacing: 4px;
 
-
 
-          &>img {
 
-            position: relative;
 
-            top: -3px;
 
-            width: 30px;
 
-            height: 30px;
 
-          }
 
-        }
 
       }
 
 
       .enterBtn {
 
@@ -114,6 +98,51 @@
 
         }
 
       }
 
     }
 
+
 
+    // 加载进度条
 
+    .Aloding {
 
+      position: absolute;
 
+      top: 0;
 
+      left: 0;
 
+      width: 100%;
 
+      height: 100%;
 
+      z-index: 99;
 
+      background-color: rgba(0, 0, 0, .6);
 
+
 
+
 
+      .AlodingT {
 
+        position: absolute;
 
+        bottom: 10%;
 
+        left: 50%;
 
+        transform: translateX(-50%);
 
+        width: 70%;
 
+        height: 8px;
 
+        border: 1px solid #6b6355;
 
+        background-color: #6b6355;
 
+        border-radius: 4px;
 
+
 
+
 
+        .AlodingT1 {
 
+          width: 0%;
 
+          height: 100%;
 
+          background-color: #ffe9b6;
 
+          border-radius: 4px;
 
+          overflow: hidden;
 
+        }
 
+
 
+        .AlodingT2 {
 
+          width: 30px;
 
+          height: 30px;
 
+          max-height: 999999px;
 
+          object-fit: contain !important;
 
+          position: absolute;
 
+          z-index: 10;
 
+          top: -30px;
 
+          left: 0;
 
+          transform: translateX(-15px);
 
+        }
 
+      }
 
+    }
 
   }
 
 }

+ 64 - 13
src/pages/A6ybwx/index.tsx
Visa fil 

@@ -7,6 +7,7 @@ import Sangzang from './Sangzang'
 
 import classNames from 'classnames'
 
 import { isPc } from '@/utils/http'
 
 import MenuSider from '@/components/MenuSider'
 
+import Skip from '@/components/Skip'
 
 
 function A6ybwx() {
 
   const [isEnter, setIsEnter] = useState(false)
 
@@ -15,6 +16,7 @@ function A6ybwx() {
 
 
   window.onClickMainHotspot = (hotspotName: string) => {
 
     console.log('调用了onClickMainHotspot', hotspotName)
 
+
 
     if (hotspotName === '梵风汉韵') {
 
       window.location.replace('../index.html#/ybwx?tab=1')
 
     }
 
@@ -55,8 +57,8 @@ function A6ybwx() {
 
       objectFit: 'cover', // 视频的object-fit样式, 默认 cover
 
       loop: false, // 是否循环, 默认false
 
       autoplay: false, // 自动播放, 默认false
 
-      onPlay: () => { }, // 触发播放事件
 
-      onPause: () => { }, // 触发暂停事件
 
+      onPlay: () => {}, // 触发播放事件
 
+      onPause: () => {}, // 触发暂停事件
 
       onEnded: () => {
 
         setIsEnter(true)
 
         playerRef.current.destroy()
 
@@ -64,7 +66,6 @@ function A6ybwx() {
 
       onSourceEstablished: () => {
 
         if (isEnter) setVideoOk(false)
 
         setVideoOk(true)
 
-
 
       } //有足够的数据可以播放了
 
     }
 
     playerRef.current = F_Video('./myData/ybwx.ts', params)
 
@@ -85,11 +86,42 @@ function A6ybwx() {
 
     }
 
   }, [isEnter, videoOk])
 
 
-
 
   useEffect(() => {
 
     if (isEnter) {
 
       const A6ybwxIframe = document.getElementById('A6ybwxIframe') as HTMLIFrameElement
 
-      A6ybwxIframe.src = 'Beizhongshijie/index.html'
 
+      if (A6ybwxIframe) {
 
+        A6ybwxIframe.src = 'Beizhongshijie/index.html'
 
+      }
 
+    }
 
+  }, [isEnter])
 
+
 
+  // 进度条
 
+  const [loding, setLoding] = useState(0)
 
+  const lodingRef = useRef(0)
 
+
 
+  useEffect(() => {
 
+    window.unityLoading = (progress: number) => {
 
+      const num = Math.round(Number(progress * 100))
 
+      clearInterval(timeRef.current)
 
+      setLoding(num)
 
+    }
 
+  }, [])
 
+
 
+  useEffect(() => {
 
+    lodingRef.current = loding
 
+  }, [loding])
 
+
 
+  const timeRef = useRef(-1)
 
+
 
+  useEffect(() => {
 
+    if (isEnter) {
 
+      timeRef.current = window.setInterval(() => {
 
+        if (lodingRef.current >= 100) clearInterval(timeRef.current)
 
+        else setLoding(lodingRef.current + 1)
 
+      }, 100)
 
+      return () => {
 
+        clearInterval(timeRef.current)
 
+      }
 
     }
 
   }, [isEnter])
 
 
@@ -103,18 +135,22 @@ function A6ybwx() {
 
         {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
 
         <div className='A6video' style={{ opacity: 1 }}>
 
           <div className='A6videoDom'></div>
 
-          <div
 
-            className='A1videoBtn'
 
-            onClick={() => {
 
+
 
+          {/* 跳过组件 */}
 
+          <Skip
 
+            clickFu={() => {
 
               setIsEnter(true)
 
               playerRef.current.destroy()
 
             }}
 
-          >
 
-            跳过
 
-            <img src={require('@/assets/sgImg/icon_skip.png')} alt='' />
 
-          </div>
 
+            num={3}
 
+            imgSrc='icon_skip'
 
+          />
 
         </div>
 
-        <iframe id='A6ybwxIframe' style={{ zIndex: isEnter ? 2 : -1 }} title='A6ybwx' />
 
+        <iframe
 
+          id='A6ybwxIframe'
 
+          style={{ zIndex: isEnter ? 2 : -1, opacity: loding >= 100 ? 1 : 0 }}
 
+          title='A6ybwx'
 
+        />
 
 
         <div className='BtnTabBar' style={{ display: isEnter ? 'flex' : 'none' }}>
 
           <div className='tab1' onClick={() => setGotoTab(1)} />
 
@@ -133,6 +169,21 @@ function A6ybwx() {
 
 
       {/* 丧葬因素 */}
 
       {gotoTab === 3 && <Sangzang setGotoTab={setGotoTab} />}
 
+
 
+      {/* 进度条 */}
 
+      {isEnter && loding < 100 ? (
 
+        <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=''
 
+            />
 
+          </div>
 
+        </div>
 
+      ) : null}
 
     </div>
 
   )
 
 }

+ 2 - 2
src/pages/A7wjwj/conponents/Content/index.tsx
Visa fil 

@@ -61,7 +61,7 @@ function Content() {
 
         </div>
 
         <div className='content'>
 
           清光绪年间
 
-          <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂
 
+          <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂 
           <br /> 自北朝肇始，至宋金时期
 
           <br /> 这里始终佛事兴盛 <br /> 晨钟撞破晨雾，暮鼓漫过田畴
 
           <br /> 缭绕香火中，信众往来不绝 <br /> 梵音与尘世烟火相融共生
 
@@ -74,7 +74,7 @@ function Content() {
 
       {isShowScene ? (
 
         <iframe
 
           style={{ display: isShowScene ? 'block' : 'none' }}
 
-          id='wjwjScene'
 
+          id='wjwjScene'  
           title='wjwjScene'
 
           src='BigScene/index.html#/?m=SG-Oy6fyzoMQ0D'
 
         />