shaogen1995 1 miesiąc temu
rodzic
commit
8debbeb838

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


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


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


+ 83 - 75
public/Beizhongshijie/index.html

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

@@ -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);
+    }
 }

Plik diff jest za duży
+ 22 - 12
public/myData/myDataEN.js


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


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


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

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

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

+ 9 - 31
src/pages/A1home2/index.module.scss

@@ -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,18 +120,10 @@
 }
 
 
-// --------------移动端
-.A1homeMo {
-  :global {
-    .loadingP {
-      .btn {
-        transform: translate(90px, 155px);
-      }
+// --------------英文版
+// .A1homeEm {
+//   :global {
+//     .loadingP {
 
-      .progress {
-        transform: translate(100px, 155px);
-        font-weight: 700;
-      }
-    }
-  }
-}
+//   }
+// }

+ 13 - 14
src/pages/A1home2/index.tsx

@@ -1,11 +1,11 @@
 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 { Toast } from 'antd-mobile'
+import Skip from '@/components/Skip'
 
 function A1home() {
   const { myLangue } = useSelector((state: RootState) => state.A0Layout)
@@ -127,7 +127,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)}
@@ -169,18 +169,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>

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

@@ -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);
+        }
+      }
+    }
   }
 }
 

+ 61 - 14
src/pages/A6ybwx/index.tsx

@@ -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()
@@ -89,10 +91,36 @@ function A6ybwx() {
       const A6ybwxIframe = document.getElementById('A6ybwxIframe') as HTMLIFrameElement
       if (A6ybwxIframe) {
         A6ybwxIframe.src = 'Beizhongshijie/index.html'
-        A6ybwxIframe.onload=()=>{
-          console.log('xxxxxxx加载');
-          
-        }
+      }
+    }
+  }, [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])
@@ -107,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)} />
@@ -137,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>
   )
 }