upp

Code/public/myData/myData.js

@@ -29,8 +29,8 @@ const visitHotArr = [
     hoverSrc: 'visit/hot/hot1.png',
     // 热点定位百分比
     loc: {
-      top: '84%',
-      left: '50%'
+      top: '88%',
+      left: '55%'
     },
     data: [
       {
@@ -146,8 +146,8 @@ const visitHotArr = [
     hoverSrc: 'visit/hot/hot2.png',
     // 热点定位百分比
     loc: {
-      top: '81%',
-      left: '58%'
+      top: '92%',
+      left: '45.5%'
     },
     data: [
       {
@@ -189,8 +189,8 @@ const visitHotArr = [
     hoverSrc: 'visit/hot/hot3.png',
     // 热点定位百分比
     loc: {
-      top: '79%',
-      left: '42%'
+      top: '83%',
+      left: '45.5%'
     },
     data: [
       {
@@ -216,8 +216,8 @@ const visitHotArr = [
     hoverSrc: 'visit/hot/hot4.png',
     // 热点定位百分比
     loc: {
-      top: '63%',
-      left: '51%'
+      top: '70.5%',
+      left: '45%'
     },
     data: [
       {
@@ -342,8 +342,8 @@ const banquetHotArr = [
     hoverSrc: 'banquet/hot/hot1.png',
     // 热点定位百分比
     loc: {
-      top: '27%',
-      left: '39%'
+      top: '25%',
+      left: '29%'
     },
     data: [
       {
@@ -382,8 +382,8 @@ const banquetHotArr = [
     hoverSrc: 'banquet/hot/hot2.png',
     // 热点定位百分比
     loc: {
-      top: '35%',
-      left: '44%'
+      top: '36%',
+      left: '35%'
     },
     data: [
       {
@@ -415,8 +415,8 @@ const banquetHotArr = [
     hoverSrc: 'banquet/hot/hot3.png',
     // 热点定位百分比
     loc: {
-      top: '22%',
-      left: '48%'
+      top: '20%',
+      left: '38%'
     },
     data: [
       {
@@ -475,7 +475,7 @@ const banquetHotArr = [
     // 热点名字
     name: '五凤铜熏炉',
     // 热点大小
-    size: .6,
+    size: 0.6,
     // 垂直方向
     atv: -0.08,
     // 水平方向
@@ -507,7 +507,7 @@ const banquetHotArr = [
     // 热点名字
     name: '红绿釉陶灯',
     // 热点大小
-    size: .6,
+    size: 0.6,
     // 垂直方向
     atv: -0.08,
     // 水平方向
@@ -591,8 +591,8 @@ const danceHotArr = [
     },
     // 热点定位百分比(更多页面)
     loc: {
-      top: '32%',
-      left: '54%'
+      top: '31%',
+      left: '43%'
     },
     data: [
       {
@@ -625,8 +625,8 @@ const plowHotArr = [
     },
     // 热点定位百分比(更多页面)
     loc: {
-      top: '53%',
-      left: '24%'
+      top: '56%',
+      left: '16%'
     },
     data: [
       {
@@ -655,8 +655,8 @@ const plowHotArr = [
     },
     // 热点定位百分比(更多页面)
     loc: {
-      top: '15%',
-      left: '25%'
+      top: '9%',
+      left: '14%'
     },
     data: [
       {
@@ -683,8 +683,8 @@ const plowHotArr = [
     },
     // 热点定位百分比(更多页面)
     loc: {
-      top: '25%',
-      left: '20%'
+      top: '19%',
+      left: '10%'
     },
     data: [
       {
@@ -711,8 +711,8 @@ const plowHotArr = [
     },
     // 热点定位百分比(更多页面)
     loc: {
-      top: '35%',
-      left: '25%'
+      top: '30%',
+      left: '17%'
     },
     data: [
       {
@@ -1266,8 +1266,8 @@ const myDataTemp = {
           path: '/visit',
           // 热点定位百分比
           loc: {
-            top: '52%',
-            left: '18%'
+            top: '53%',
+            left: '15%'
           }
         },
         {
@@ -1283,7 +1283,7 @@ const myDataTemp = {
           // 热点定位百分比
           loc: {
             top: '40%',
-            left: '33%'
+            left: '29%'
           }
         },
         {
@@ -1296,8 +1296,8 @@ const myDataTemp = {
           path: '/dance',
           // 热点定位百分比
           loc: {
-            top: '30%',
-            left: '45%'
+            top: '31%',
+            left: '43%'
           }
         },
         {
@@ -1310,8 +1310,8 @@ const myDataTemp = {
           path: '/chef',
           // 热点定位百分比
           loc: {
-            top: '28%',
-            left: '66%'
+            top: '29%',
+            left: '69%'
           }
         },
         {
@@ -1324,7 +1324,7 @@ const myDataTemp = {
           path: '/plow',
           // 热点定位百分比
           loc: {
-            top: '13%',
+            top: '15%',
             left: '20%'
           }
         }

Code/src/App.tsx

@@ -152,7 +152,7 @@ export default function App() {
             <Route path='/yun' component={B3yun} exact />
             <Route path='/xian' component={B4xian} exact />
             <Route path='/unity/:id' component={C1unity} exact />
-            <Route path='/unend' component={C2unityEnd} exact />
+            <Route path='/unend/:key' component={C2unityEnd} exact />
             <Route path='/text' component={Text} exact />
             <Route path='*' component={NotFound} />
           </Switch>

Code/src/components/FloorBtn/index.module.scss

@@ -13,6 +13,14 @@
       cursor: pointer;
     }
 
+    .FloorBtn0 {
+      margin-right: 5px;
+      background-image: url('../../assets/img/icon-game.png');
+      &:hover {
+        background-image: url('../../assets/img/icon-game1.png');
+      }
+    }
+
     .FloorBtn1 {
       margin-right: 5px;
       background-image: url('../../assets/img/icon-walk.png');

Code/src/components/FloorBtn/index.tsx

@@ -4,11 +4,14 @@ import history from '@/utils/history'
 
 type Props = {
   unityId?: '1' | '2'
+  gameFu?: () => void
 }
 
-function FloorBtn({ unityId }: Props) {
+function FloorBtn({ unityId, gameFu }: Props) {
   return (
     <div className={styles.FloorBtn}>
+      {gameFu ? <div title='游戏' className='FloorBtn0' onClick={gameFu}></div> : null}
+
       <div
         className='FloorBtn1'
         hidden={!unityId}

Code/src/components/HotIcon/index.tsx

@@ -49,7 +49,7 @@ function HotIcon({
         left: style ? style.left : 0,
         zIndex: zIndex || 1,
         width: panoWidth ? panoWidth : 'auto',
-        transform: isXiao ? `scale(${isXiao}) translateX(-26%)` : ''
+        transform: isXiao ? `scale(${isXiao})` : ''
       }}
       className={classNames(
         styles.HotIcon,

Code/src/components/VideoModel/index.tsx

@@ -29,7 +29,10 @@ function VideoModel({ isShow, src, closeFu }: Props) {
   }, [isShow])
 
   return (
-    <div className={classNames(styles.VideoModel, isShow ? styles.VideoModelShow : '')}>
+    <div
+      id='VideoModel'
+      className={classNames(styles.VideoModel, isShow ? styles.VideoModelShow : '')}
+    >
       <video
         ref={videoRef}
         playsInline

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

@@ -19,5 +19,72 @@
       opacity: 1;
       pointer-events: auto;
     }
+
+    // 游戏弹窗
+    .A3gameBox {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 10;
+      background-color: rgba(70, 4, 1, 0.4);
+      backdrop-filter: blur(4px);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding-bottom: 50px;
+
+      .A3gtit {
+        color: #eacf60;
+        font-size: 22px;
+      }
+      .A3grow1 {
+        cursor: pointer;
+        margin-top: 18px;
+        margin-bottom: 20px;
+        padding: 0 20px 0 50px;
+        height: 36px;
+        line-height: 32px;
+        border-radius: 15px;
+        border: 1px solid #fffddc;
+        color: #fffddc;
+        transition: all 0.3s;
+        background-image: url('../../assets/img/game1.png');
+        background-repeat: no-repeat;
+        background-position: 15px center;
+        background-size: 26px 26px;
+        font-size: 18px;
+        &:hover {
+          color: #eacf60;
+          background-image: url('../../assets/img/game1Ac.png');
+          border-color: #eacf60;
+        }
+      }
+      .A3grow2 {
+        margin-top: 0;
+        margin-bottom: 0;
+        background-image: url('../../assets/img/game2.png');
+        &:hover {
+          color: #eacf60;
+          background-image: url('../../assets/img/game2Ac.png');
+          border-color: #eacf60;
+        }
+      }
+
+      #BtnRight {
+        bottom: 100px;
+        right: 25px;
+        z-index: 10;
+      }
+    }
+    .A3gameBoxShow {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }

Code/src/pages/A3banquet/index.tsx

@@ -9,6 +9,8 @@ import NextPage from '@/components/NextPage'
 import FloorBtn from '@/components/FloorBtn'
 import BaseImg from '@/components/BaseImg'
 import useLoding from '@/components/ownUse/useLoding'
+import BtnRight from '@/components/BtnRight'
+import history from '@/utils/history'
 
 function A3banquet() {
   // 过度动画
@@ -30,6 +32,9 @@ function A3banquet() {
   // 先加载背景图 序列帧等 在加载视频
   const { imgNow, imgNumFu } = useLoding(3)
 
+  // 游戏弹窗
+  const [gameShow, setGameShow] = useState(false)
+
   return (
     <div className={styles.A3banquet}>
       {/* 初始静态图 */}
@@ -47,7 +52,6 @@ function A3banquet() {
         <CatVideo
           isShow={cutVideoShow}
           src={baseURL + myData.banquet.videos[0]}
-          // src='https://houseoss.4dkankan.com/project/henan/1.mp4'
           parentFu={() => cutEndFu()}
         />
       ) : null}
@@ -60,18 +64,34 @@ function A3banquet() {
           {/* 跳到下一章 */}
           <NextPage clickSon={() => setLastVideo(true)} txt='乐舞百戏' />
 
-          {/* 右下角按钮 */}
+          {/* 右下角按钮 待完善 隐藏游戏*/}
+          {/* <FloorBtn unityId='2' gameFu={() => setGameShow(true)} /> */}
           <FloorBtn unityId='2' />
         </div>
       ) : null}
 
+      {/* 游戏弹窗 */}
+      {imgNow ? (
+        <div className={classNames('A3gameBox', gameShow ? 'A3gameBoxShow' : '')}>
+          <div className='A3gtit'>请选择游戏</div>
+          <div className='A3grow1' onClick={() => history.push('/unend/game1')}>
+            汉代器具连连看
+          </div>
+          <div className='A3grow1 A3grow2' onClick={() => history.push('/unend/game2')}>
+            汉代宴饮礼仪&emsp;
+          </div>
+
+          {/* 右下角的返回按钮 */}
+          <BtnRight imgName='back' clickSon={() => setGameShow(false)} title='返回' />
+        </div>
+      ) : null}
+
       {/* 结尾动画 */}
       {imgNow ? (
         <EndVideo
           lastVideo={lastVideo}
           delDom='.pvBox'
           src={baseURL + myData.banquet.lastVideo}
-          // src='https://houseoss.4dkankan.com/project/henan/3.mp4'
           path='/dance'
         />
       ) : null}

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

@@ -162,9 +162,8 @@
         }
 
         #BtnRight {
-          top: 60%;
-          transform: translateY(-50%);
-          right: 50px;
+          bottom: 100px;
+          right: 25px;
           z-index: 10;
         }
 

Code/src/pages/A7end/index.tsx

@@ -19,7 +19,7 @@ function A7end() {
       <div className='A7txt'>
         <div onClick={() => setIsShow(true)}>重新开始</div>
         <div onClick={() => history.push('/more')}>内容导航</div>
-        <div onClick={() => history.push('/unend')}>陶庄园</div>
+        <div onClick={() => history.push('/unend/end')}>陶庄园</div>
       </div>
 
       {/* 底部文字 */}

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

@@ -101,10 +101,12 @@
       bottom: 15px;
       left: 20px;
     }
-    #BtnRight {
-      top: 50%;
-      bottom: auto;
-      transform: translateY(-50%);
+    #VideoModel {
+      #BtnRight {
+        top: 50%;
+        bottom: auto;
+        transform: translateY(-50%);
+      }
     }
   }
 }

Code/src/pages/B1more/index.tsx

@@ -156,7 +156,7 @@ function B1more() {
           className='A6rBtn'
           style={{ opacity: isLoding ? 0 : 1, zIndex: videoSrc ? 10 : 30 }}
         >
-          <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend')}></div>
+          <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend/end')}></div>
           <div className='A6rBtn2' title='仙居世界' onClick={() => history.push('/hots')}></div>
         </div>
       ) : null}

Code/src/pages/C2unityEnd/index.tsx

@@ -1,33 +1,59 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import { isPc, otherUrl } from '@/utils/http'
+import { useParams } from 'react-router-dom'
 
-const url = isPc
-  ? 'unity/HeNanMuseum-pc/ManorScene/index.html'
-  : 'unity/HeNanMuseum-mobile/ManorScene/index.html'
+const obj = {
+  end: {
+    pc: 'unity/HeNanMuseum-pc/ManorScene/index.html',
+    app: 'unity/HeNanMuseum-mobile/ManorScene/index.html'
+  },
+  game1: {
+    pc: 'unity/HeNanMuseum-pc/LinkingGame/index.html',
+    app: 'unity/HeNanMuseum-mobile/LinkingGame/index.html'
+  },
+  game2: {
+    pc: 'unity/HeNanMuseum-pc/PuzzleGame/index.html',
+    app: 'unity/HeNanMuseum-mobile/PuzzleGame/index.html'
+  }
+}
 
 function C2unityEnd() {
+  const urlObj: any = useParams()
+
+  const [url, setUrl] = useState('')
+
   useEffect(() => {
-    if (isPc) {
-      const body = document.querySelector('body')
-      const iframe = document.createElement('iframe')
-      iframe.frameBorder = 'none'
-      iframe.title = '漫游'
-      iframe.id = 'myIframe'
-      iframe.src = url
-      body?.appendChild(iframe)
-    }
+    const key = urlObj.key
+
+    const objTemp = Reflect.get(obj, key)
+    const url = Reflect.get(objTemp, isPc ? 'pc' : 'app')
+    setUrl(otherUrl + url)
+  }, [urlObj.key])
+
+  useEffect(() => {
+    if (url) {
+      if (isPc) {
+        const body = document.querySelector('body')
+        const iframe = document.createElement('iframe')
+        iframe.frameBorder = 'none'
+        iframe.title = '漫游'
+        iframe.id = 'myIframe'
+        iframe.src = url
+        body?.appendChild(iframe)
+      }
 
-    return () => {
-      const iframeDom = document.querySelector('#myIframe')
+      return () => {
+        const iframeDom = document.querySelector('#myIframe')
 
-      iframeDom?.remove()
+        iframeDom?.remove()
+      }
     }
-  }, [])
+  }, [url])
 
   return (
     <div className={styles.C2unityEnd}>
-      {isPc ? null : <iframe title='陶庄园' src={otherUrl + url} frameBorder='0'></iframe>}
+      {!isPc && url ? <iframe title='陶庄园' src={url} frameBorder='0'></iframe> : null}
     </div>
   )
 }