upp

Code/public/myData/myData.js

@@ -8,6 +8,9 @@ const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
 // Build开发资源目录
 const baseUrlAtl = 'https://houseoss.4dkankan.com/project/henan/staticData/'
 
+// 全景视频/全景图/unity场景资源地址
+const otherUrlTemp = 'https://houseoss.4dkankan.com/project/henan/'
+
 // 一些动态配置的数据
 
 // 车骑拜谒热点信息（后面的更多模块也会复用）
@@ -617,8 +620,8 @@ const plowHotArr = [
     hoverSrc: 'plow/hot/hot1.png',
     // 热点定位百分比(当前页面)
     locPage: {
-      top: '3%',
-      left: '24%'
+      top: '35%',
+      left: '80%'
     },
     // 热点定位百分比(更多页面)
     loc: {
@@ -647,8 +650,8 @@ const plowHotArr = [
     hoverSrc: 'plow/hot/hot2.png',
     // 热点定位百分比(当前页面)
     locPage: {
-      top: '30%',
-      left: '30%'
+      top: '47%',
+      left: '40%'
     },
     // 热点定位百分比(更多页面)
     loc: {
@@ -675,8 +678,8 @@ const plowHotArr = [
     hoverSrc: 'plow/hot/hot3.png',
     // 热点定位百分比(当前页面)
     locPage: {
-      top: '20%',
-      left: '30%'
+      top: '45%',
+      left: '60%'
     },
     // 热点定位百分比(更多页面)
     loc: {
@@ -703,8 +706,8 @@ const plowHotArr = [
     hoverSrc: 'plow/hot/hot4.png',
     // 热点定位百分比(当前页面)
     locPage: {
-      top: '10%',
-      left: '30%'
+      top: '45%',
+      left: '43%'
     },
     // 热点定位百分比(更多页面)
     loc: {
@@ -734,8 +737,8 @@ const plowHotArr = [
     hoverSrc: 'plow/hot/hot5.png',
     // 热点定位百分比(当前页面)
     locPage: {
-      top: '20%',
-      left: '30%'
+      top: '33%',
+      left: '54%'
     },
     // 热点定位百分比(更多页面)
     loc: {
@@ -764,8 +767,8 @@ const plowHotArr = [
     hoverSrc: 'plow/hot/hot6.png',
     // 热点定位百分比(当前页面)
     locPage: {
-      top: '20%',
-      left: '30%'
+      top: '44%',
+      left: '54%'
     },
     // 热点定位百分比(更多页面)
     loc: {
@@ -1042,14 +1045,14 @@ const myDataTemp = {
       <p>壁画长4.15米，宽0.32米</p>
       <br />
       <p>它“讲述”了西汉一对夫妇死后升仙的“故事”。“壁画距今已2000多年了，是国内发现最完整的西汉壁画，被学术界和文物考古界誉为“国宝级文物”。</p>`
-    },
-    {
-      id: 3,
-      name: '汉代先民的神仙信仰',
-      tit: '墓室壁画',
-      txt: `
-      <p>资料待完善</p>`
     }
+    // {
+    //   id: 3,
+    //   name: '汉代先民的神仙信仰',
+    //   tit: '墓室壁画',
+    //   txt: `
+    //   <p></p>`
+    // }
   ],
   // 后厨备宴(静态资源目录位置：staticData/chef)
   chef: {

Code/src/App.tsx

@@ -7,6 +7,7 @@ import SpinLoding from './components/SpinLoding'
 
 import NotFound from '@/components/NotFound'
 import store from './store'
+import { baseURL } from './utils/http'
 // import { isLoc, myData } from './utils/http'
 const A1home = React.lazy(() => import('./pages/A1home'))
 const A1_1base = React.lazy(() => import('./pages/A1_1base'))
@@ -145,6 +146,9 @@ export default function App() {
           </Switch>
         </React.Suspense>
       </Router>
+
+      {/* 背景音乐 */}
+      <audio id='bgMp3' loop style={{ display: 'none' }} src={baseURL + 'home/bg.mp3'}></audio>
     </>
   )
 }

Code/src/pages/A1home/index.tsx

@@ -40,6 +40,10 @@ function A1home() {
   const btnStartFu = useCallback(() => {
     // 播放长视频
     setLastVideo(true)
+
+    // 播放背景音乐
+    const audioDom: HTMLAudioElement = document.querySelector('#bgMp3')!
+    if (audioDom) audioDom.play()
   }, [])
 
   // 最后一个过长动画

Code/src/pages/A4dance/index.module.scss

@@ -138,11 +138,15 @@
       background-color: rgba(0, 0, 0, 0.4);
       .A4fMain {
         position: absolute;
-        top: 45%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 460px;
-        height: 260px;
+        // top: 45%;
+        // left: 50%;
+        // transform: translate(-50%, -50%);
+        // width: 460px;
+        // height: 260px;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
 
         // 边框遮盖
         .A4fMainKK {
@@ -157,15 +161,13 @@
           pointer-events: none;
         }
 
-        .A4fMback {
-          position: absolute;
-          top: 50%;
+        #BtnRight {
+          top: 60%;
           transform: translateY(-50%);
-          right: -50px;
-          width: 30px;
-          height: auto;
-          cursor: pointer;
+          right: 50px;
+          z-index: 10;
         }
+
         .A4fRow {
           position: absolute;
           top: 0;
@@ -173,7 +175,7 @@
           transition: opacity 1s;
           width: 100%;
           height: 100%;
-          padding: 8px 10px;
+          // padding: 8px 10px;
         }
       }
     }

Code/src/pages/A4dance/index.tsx

@@ -9,6 +9,8 @@ import HotIcon from '@/components/HotIcon'
 import FloorBtn from '@/components/FloorBtn'
 import NextPage from '@/components/NextPage'
 import useLoding from '@/components/ownUse/useLoding'
+import history from '@/utils/history'
+import BtnRight from '@/components/BtnRight'
 
 function A4dance() {
   const [baseSta, setBaseSta] = useState(false)
@@ -44,7 +46,10 @@ function A4dance() {
   const [hotInd, setHotInd] = useState(-1)
 
   const hotShowFu = useCallback((index: number) => {
-    setHotInd(index)
+    if (index === 0) {
+      // 云气图 直接跳页面
+      history.push('/yun')
+    } else setHotInd(index)
   }, [])
 
   // 先加载背景图 序列帧等 在加载视频
@@ -98,23 +103,26 @@ function A4dance() {
 
           {/* 底部 */}
           <div className='pvfloor'>
-            {myData.dance.floor.map((item, index) => (
-              <div
-                key={index}
-                onClick={() => setFloorAc(index)}
-                className={classNames('pvflRow', floorAc === index ? 'pvflRowAc' : '')}
-              >
-                {/* 蒙版 */}
-                <div className='pvflR1'></div>
-                {/* 底图 */}
-                <div className='pvflR2'>
-                  <img src={baseURL + item.hoverSrc} alt='' />
+            {myData.dance.floor.map((item, index) =>
+              // 直接去掉杂技
+              item.name === '杂技' ? null : (
+                <div
+                  key={index}
+                  onClick={() => setFloorAc(index)}
+                  className={classNames('pvflRow', floorAc === index ? 'pvflRowAc' : '')}
+                >
+                  {/* 蒙版 */}
+                  <div className='pvflR1'></div>
+                  {/* 底图 */}
+                  <div className='pvflR2'>
+                    <img src={baseURL + item.hoverSrc} alt='' />
+                  </div>
+
+                  {/* 文字 */}
+                  <div className='pvflR3'>{item.name}</div>
                 </div>
-
-                {/* 文字 */}
-                <div className='pvflR3'>{item.name}</div>
-              </div>
-            ))}
+              )
+            )}
           </div>
 
           {/* 跳到下一章 */}
@@ -130,15 +138,11 @@ function A4dance() {
           >
             <div className='A4fMain'>
               {/* 边框遮盖 */}
-              <img className='A4fMainKK' src={`${baseURL}dance/dongK.png`} alt='' />
+              {/* <img className='A4fMainKK' src={`${baseURL}dance/dongK.png`} alt='' /> */}
 
               {/* 返回按钮 */}
-              <img
-                className='A4fMback'
-                onClick={() => setFloorAc(-1)}
-                src={`${baseURL}dance/back22.png`}
-                alt=''
-              />
+              <BtnRight imgName='back' clickSon={() => setFloorAc(-1)} title='返回' />
+
               {myData.dance.floor.map((item, index) => (
                 <div key={index} className='A4fRow' style={{ opacity: floorAc === index ? 1 : 0 }}>
                   <video
@@ -147,6 +151,7 @@ function A4dance() {
                     muted
                     webkit-playsinline='true'
                     x5-video-player-type='h5'
+                    loop
                   >
                     <source type='video/mp4' src={baseURL + item.videoSrc} />
                     Your browser does not support the video tag.
@@ -159,14 +164,14 @@ function A4dance() {
       ) : null}
 
       {/* 点击四神云气图的动画 */}
-      {imgNow ? (
+      {/* {imgNow ? (
         <EndVideo
           lastVideo={hotInd === 0}
           delDom='.pvBox'
           src={baseURL + myData.dance.hot[0].videoSrc}
           path='/yun'
         />
-      ) : null}
+      ) : null} */}
 
       {/* 点击其他热点 */}
       {hotInd > 0 ? (

Code/src/pages/A5chef/index.module.scss

@@ -85,7 +85,7 @@
       height: 100%;
       opacity: 0;
       pointer-events: none;
-      transition: opacity 1s;
+      // transition: opacity 1s;
 
       // 热点里面的图文信息
       .A5vTxt {

Code/src/pages/A5chef/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
 import { baseURL, myData } from '@/utils/http'
@@ -27,15 +27,18 @@ function A5chef() {
   const [hotInd, setHotInd] = useState(-1)
 
   useEffect(() => {
-    setTimeout(() => {
-      const videoDomAll: any = document.querySelectorAll('.A5video video')
-      videoDomAll.forEach((v: HTMLVideoElement, index: number) => {
-        if (hotInd === index) {
-          v.currentTime = 0
-          v.play()
-        } else v.pause()
-      })
-    }, 100)
+    if (hotInd !== -1) {
+      setTimeout(() => {
+        const videoDomAll: any = document.querySelectorAll('.A5video video')
+        videoDomAll.forEach((v: HTMLVideoElement) => {
+          if (v.className === `A5videoSon${hotInd}1`) v.play()
+          else {
+            v.currentTime = 0
+            v.pause()
+          }
+        })
+      }, 100)
+    }
   }, [hotInd])
 
   const videoRef1 = useRef<HTMLVideoElement>(null)
@@ -46,10 +49,14 @@ function A5chef() {
 
   const video3End = useCallback((val: string) => {
     if (val === '1') {
+      setVideoPlay('2')
       setTimeout(() => {
         if (videoRef2.current) videoRef2.current.play()
       }, 100)
-    } else if (val === '3') setHotInd(-1)
+    } else if (val === '3') {
+      setVideoPlay('1')
+      setHotInd(-1)
+    }
   }, [])
 
   const videoRefRes = useCallback(
@@ -124,14 +131,13 @@ function A5chef() {
         ) : null}
       </div>
 
-      {/* 待完善 */}
-
       {/* 点击热点之后出来的视频 */}
       {imgNow
         ? myData.chef.hot.map((item, index) => (
             <div key={index} className={classNames('A5video', hotInd === index ? 'A5videoAc' : '')}>
               {['1', '2', '3'].map(vv => (
                 <video
+                  className={`A5videoSon${index}${vv}`}
                   key={vv}
                   hidden={videoPlay !== vv}
                   ref={videoRefRes(index, vv)}

Code/src/pages/B1more/S3goods/index.module.scss

@@ -54,7 +54,7 @@
             width: 38px;
             height: 100%;
             background-size: 100% 100%;
-            overflow: hidden;
+            // overflow: hidden;
             padding-top: 20px;
             color: #664824;
             writing-mode: vertical-lr;
@@ -72,11 +72,21 @@
               object-fit: fill !important;
             }
           }
+
+          .S3zRxian {
+            z-index: 10;
+            position: absolute;
+            pointer-events: none;
+            top: 7px;
+            right: -8px;
+            width: 16px;
+            height: auto;
+          }
+          .S3zRxian2 {
+            top: auto;
+            bottom: 7px;
+          }
         }
-        // .S3rowZhanMo {
-        //   overflow-x: hidden;
-        //   overflow-y: auto;
-        // }
       }
       // 展开状态
       .S3rowShow {

Code/src/pages/B1more/S3goods/index.tsx

@@ -147,9 +147,18 @@ function S3goods({ hidden }: Props) {
                     style={{ backgroundImage: `url(${row2Bac(index2)})` }}
                   >
                     {item2.name}
-                    {/* 上下的线 待完善 */}
-                    {/* <div className='S3zRxian'></div>
-                  <div className='S3zRxian S3zRxian2'></div> */}
+
+                    {/* 上下的线 */}
+                    {index2 < item1.info.length - 1 ? (
+                      <>
+                        <img className='S3zRxian' src={baseURL + 'more/moreXian.png'} alt='' />
+                        <img
+                          className='S3zRxian S3zRxian2'
+                          src={baseURL + 'more/moreXian.png'}
+                          alt=''
+                        />
+                      </>
+                    ) : null}
 
                     {/* 右下角图片 */}
                     <img className='S3zRimg' src={baseURL + item2.suoSrc} alt='' />

Code/src/pages/B1more/index.tsx

@@ -147,11 +147,7 @@ function B1more() {
 
       {/* 右下角的图标 */}
       {imgNow ? (
-        <div
-          hidden={floorTxt !== '探索庄园'}
-          className='A6rBtn'
-          style={{ opacity: isLoding ? 0 : 1, zIndex: videoSrc ? 10 : 30 }}
-        >
+        <div className='A6rBtn' style={{ opacity: isLoding ? 0 : 1, zIndex: videoSrc ? 10 : 30 }}>
           <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend')}></div>
           <div className='A6rBtn2' title='仙居世界' onClick={() => history.push('/hots')}></div>
         </div>

Code/src/pages/C1unity/index.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { useParams } from 'react-router-dom'
-import { isPc, myData } from '@/utils/http'
+import { isPc, myData, otherUrl } from '@/utils/http'
 import { VisitHotDataType } from '@/types'
 import Hot1 from '../A2visit/PanoVideo/Hot1'
 import Hot2 from '../A2visit/PanoVideo/Hot2'
@@ -9,12 +9,12 @@ import history from '@/utils/history'
 
 const obj = {
   1: {
-    pc: '室外电脑端',
-    mo: '室外移动端'
+    pc: 'unity/HeNanMuseum-pc/MainScene/index.html',
+    mo: 'unity/HeNanMuseum-mobile/MainScene/index.html'
   },
   2: {
-    pc: '室内电脑端',
-    mo: '室内移动端'
+    pc: 'unity/HeNanMuseum-pc/RoomScene/index.html',
+    mo: 'unity/HeNanMuseum-mobile/RoomScene/index.html'
   }
 }
 
@@ -33,8 +33,7 @@ function C1unity() {
 
     const res = Reflect.get(temp, isPc ? 'pc' : 'mo')
 
-    // 待完善 设置 url
-    setUrl(res)
+    setUrl(otherUrl + res)
 
     // 注册
     window.unityOpenHot = (index: number) => {
@@ -64,18 +63,10 @@ function C1unity() {
     return arr
   }, [ind, urlId])
 
-  const clickHot = useCallback((index: number) => {
-    setInd(index)
-  }, [])
-
   return (
     <div className={styles.C1unity}>
       {url ? <iframe frameBorder='none' title='漫游' src={url}></iframe> : null}
 
-      <div onClick={() => clickHot(0)}>测试点击热点0</div>
-      <div onClick={() => clickHot(1)}>测试点击热点1</div>
-      <div onClick={() => clickHot(2)}>测试点击热点2</div>
-
       {ind === -1 ? null : ind === 0 && urlId === '1' ? (
         <Hot1 data={data} closeFu={() => setInd(-1)} />
       ) : (

Code/src/pages/C2unityEnd/index.tsx

@@ -1,12 +1,16 @@
 import React from 'react'
 import styles from './index.module.scss'
-import { baseURL } from '@/utils/http'
+import { baseURL, isPc, otherUrl } from '@/utils/http'
 import history from '@/utils/history'
+
+const url = isPc
+  ? 'unity/HeNanMuseum-pc/ManorScene/index.html'
+  : 'unity/HeNanMuseum-mobile/ManorScene/index.html'
+
 function C2unityEnd() {
   return (
-    // 待完善路径
     <div className={styles.C2unityEnd}>
-      <iframe title='陶庄园' src='https://www.bilibili.com/' frameBorder='0'></iframe>
+      <iframe title='陶庄园' src={otherUrl + url} frameBorder='0'></iframe>
       {/* 返回按钮 */}
       <div
         style={{ backgroundImage: `url(${baseURL}chef/back23.png)` }}

Code/src/types/declaration.d.ts

@@ -12,6 +12,7 @@ declare const baseUrlLoc: string
 declare const baseUrlAtl: string
 declare const isPcTemp: boolean
 declare const myDataTemp: MyDataType
+declare const otherUrlTemp: string
 
 type MyDataType = {
   isLdong: boolean

Code/src/utils/http.ts

@@ -7,3 +7,6 @@ export const myData = myDataTemp
 
 // 是不是pc端
 export const isPc = isPcTemp
+
+// 全景视频/全景图/unity场景资源地址
+export const otherUrl = otherUrlTemp