难写！

Code/public/myData/myData.js

@@ -36,13 +36,15 @@ const myDataTemp = {
     hot: [
       {
         // 热点名字
-        name: '热点1',
+        name: '周礼九拜',
         // 热点大小
         size: 1,
         // 垂直方向
         atv: 5,
         // 水平方向
         ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'visit/hot/hot1.png',
         data: [
           {
             // 名字
@@ -190,6 +192,8 @@ const myDataTemp = {
         atv: 5,
         // 水平方向
         ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'visit/hot/hot1.png',
         data: [
           {
             name: '高亮1',
@@ -216,13 +220,15 @@ const myDataTemp = {
       },
       {
         // 热点名字
-        name: '迎宾',
+        name: '迎宾礼仪',
         // 热点大小
         size: 1,
         // 垂直方向
         atv: 5,
         // 水平方向
         ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'visit/hot/hot1.png',
         data: [
           {
             name: '高亮1',
@@ -242,6 +248,8 @@ const myDataTemp = {
         atv: 5,
         // 水平方向
         ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'visit/hot/hot1.png',
         data: [
           {
             name: '悬山顶',
@@ -308,6 +316,8 @@ const myDataTemp = {
         atv: 5,
         // 水平方向
         ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'visit/hot/hot1.png',
         data: [
           {
             name: '轺车',
@@ -352,6 +362,8 @@ const myDataTemp = {
         atv: 5,
         // 水平方向
         ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'banquet/hot/hot1.png',
         data: [
           {
             name: '坐',
@@ -384,6 +396,132 @@ const myDataTemp = {
             imgArr: ['banquet/hot/8.png']
           }
         ]
+      },
+      {
+        // 热点名字
+        name: '汉代家具',
+        // 热点大小
+        size: 1,
+        // 垂直方向
+        atv: 5,
+        // 水平方向
+        ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'banquet/hot/hot1.png',
+        data: [
+          {
+            name: '汉代家具',
+            txt: `
+            <h3>汉代家具</h3>
+            `,
+            imgArr: ['banquet/hot/8.png']
+          }
+        ]
+      },
+      {
+        // 热点名字
+        name: '汉代坐具',
+        // 热点大小
+        size: 1,
+        // 垂直方向
+        atv: 5,
+        // 水平方向
+        ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'banquet/hot/hot1.png',
+        data: [
+          {
+            name: '汉代坐具',
+            txt: `
+            <h3>汉代坐具</h3>
+            `,
+            imgArr: ['banquet/hot/8.png']
+          }
+        ]
+      },
+      {
+        // 热点名字
+        name: '三角纹彩绘陶壶',
+        // 热点大小
+        size: 1,
+        // 垂直方向
+        atv: 5,
+        // 水平方向
+        ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'banquet/hot/hot1.png',
+        data: [
+          {
+            name: '三角纹彩绘陶壶',
+            txt: `
+            <h3>三角纹彩绘陶壶</h3>
+            `,
+            imgArr: ['banquet/hot/8.png']
+          }
+        ]
+      },
+      {
+        // 热点名字
+        name: '五凤铜熏炉',
+        // 热点大小
+        size: 1,
+        // 垂直方向
+        atv: 5,
+        // 水平方向
+        ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'banquet/hot/hot1.png',
+        data: [
+          {
+            name: '五凤铜熏炉',
+            txt: `
+            <h3>五凤铜熏炉</h3>
+            `,
+            imgArr: ['banquet/hot/8.png']
+          }
+        ]
+      },
+      {
+        // 热点名字
+        name: '红绿釉陶灯',
+        // 热点大小
+        size: 1,
+        // 垂直方向
+        atv: 5,
+        // 水平方向
+        ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'banquet/hot/hot1.png',
+        data: [
+          {
+            name: '红绿釉陶灯',
+            txt: `
+            <h3>红绿釉陶灯</h3>
+            `,
+            imgArr: ['banquet/hot/8.png']
+          }
+        ]
+      },
+      {
+        // 热点名字
+        name: '三角纹彩绘陶鼎',
+        // 热点大小
+        size: 1,
+        // 垂直方向
+        atv: 5,
+        // 水平方向
+        ath: 0,
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'banquet/hot/hot1.png',
+        data: [
+          {
+            name: '三角纹彩绘陶鼎',
+            txt: `
+            <h3>三角纹彩绘陶鼎</h3>
+            `,
+            imgArr: ['banquet/hot/8.png']
+          }
+        ]
       }
     ]
   },
@@ -401,9 +539,7 @@ const myDataTemp = {
         // 热点定位百分比
         loc: {
           top: '10%',
-          right: '10%',
-          bottom: 'auto',
-          left: 'auto'
+          left: '10%'
         }
       },
       {
@@ -413,9 +549,7 @@ const myDataTemp = {
         imgSrc: 'dance/hot2.png',
         // 热点定位百分比
         loc: {
-          top: 'auto',
-          right: 'auto',
-          bottom: '20%',
+          top: '20%',
           left: '30%'
         },
         data: [

Code/src/App.tsx

@@ -7,7 +7,6 @@ import SpinLoding from './components/SpinLoding'
 
 import NotFound from '@/components/NotFound'
 import store from './store'
-import { isLoc } from './utils/http'
 const A1home = React.lazy(() => import('./pages/A1home'))
 const A2visit = React.lazy(() => import('./pages/A2visit'))
 const A3banquet = React.lazy(() => import('./pages/A3banquet'))
@@ -22,12 +21,17 @@ const B3yun = React.lazy(() => import('./pages/B3yun'))
 // 仙居
 const B4xian = React.lazy(() => import('./pages/B4xian'))
 
+// unity页面
+const C1unity = React.lazy(() => import('./pages/C1unity'))
+
 const Text = React.lazy(() => import('./pages/Text'))
 declare global {
   //设置全局属性
   interface Window {
     //window对象属性
     isHH: boolean //加入对象
+    unityOpenHot: (index: number) => void
+    unityBack: () => void
   }
 }
 
@@ -47,12 +51,12 @@ const planSize = {
 
 export default function App() {
   useEffect(() => {
-    // 打包环境 刷新页面从 首页 开始
-    if (!isLoc) {
-      if (window.location.hash !== '#/') {
-        window.location.href = window.location.origin
-      }
-    }
+    // 打包环境 刷新页面从 首页 开始 --暂时关闭（待完善）
+    // if (!isLoc) {
+    //   if (window.location.hash !== '#/') {
+    //     window.location.href = window.location.origin
+    //   }
+    // }
   }, [])
 
   // 根元素
@@ -126,6 +130,7 @@ export default function App() {
             <Route path='/hots' component={B2hots} exact />
             <Route path='/yun' component={B3yun} exact />
             <Route path='/xian' component={B4xian} exact />
+            <Route path='/unity/:id' component={C1unity} exact />
             <Route path='/text' component={Text} exact />
             <Route path='*' component={NotFound} />
           </Switch>

Code/src/pages/A2visit/PanoVideo/index.module.scss

@@ -1,9 +1,36 @@
 .PanoVideo {
   width: 100%;
   height: 100%;
-  background-color: #e3d3af;
+  :global {
+    .pvHot {
+      display: inline-block;
+      cursor: pointer;
+      position: relative;
+      height: 30px;
+      width: auto;
+      & > img {
+        position: relative;
+        top: 0;
+        left: 0;
+        transition: all 0.3s;
+      }
+      .pvHotBase {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
 
-  font-size: 20px;
-  // :global {
-  // }
+      .pvHotHover {
+        opacity: 0;
+      }
+      &:hover {
+        .pvHotBase {
+          opacity: 0;
+        }
+        .pvHotHover {
+          opacity: 1;
+        }
+      }
+    }
+  }
 }

Code/src/pages/A2visit/PanoVideo/index.tsx

@@ -3,6 +3,7 @@ import styles from './index.module.scss'
 import Hot1 from './Hot1'
 import Hot2 from './Hot2'
 import { myData } from '@/utils/http'
+import useDataUrl from '@/components/ownUse/useDataUrl'
 function PanoVideo() {
   // 0为 第一种模式的热点 其他为第二种
   const [ind, setInd] = useState(-1)
@@ -12,13 +13,16 @@ function PanoVideo() {
     else return []
   }, [ind])
 
+  const { dataUrlSame } = useDataUrl()
+
   return (
     <div className={styles.PanoVideo}>
       {/* 待完善 */}
-      全景视频
+      全景视频页面-----
       {myData.visit.hot.map((item, index) => (
-        <div key={index} onClick={() => setInd(index)}>
-          {item.name}
+        <div className='pvHot' key={index} onClick={() => setInd(index)}>
+          <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
+          <img className='pvHotHover' src={dataUrlSame + item.hoverSrc} alt='' />
         </div>
       ))}
       {ind === -1 ? null : ind === 0 ? (

Code/src/pages/A2visit/index.tsx

@@ -161,8 +161,7 @@ function A2visit() {
         </div>
 
         <div className='pvRRbtn'>
-          {/* 漫游 待完善 */}
-          <div className='pvRRbtn1' title='漫游模式'></div>
+          <div className='pvRRbtn1' title='漫游模式' onClick={() => history.push('/unity/1')}></div>
           {/* 更多 跳新页面 */}
           <div title='更多' className='pvRRbtn2' onClick={() => history.push('/more')}></div>
         </div>

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

@@ -1,9 +1,37 @@
 .PanoImg {
   width: 100%;
   height: 100%;
-  background-color: #e3d3af;
 
-  font-size: 20px;
-  // :global {
-  // }
+  :global {
+    .pvHot {
+      display: inline-block;
+      cursor: pointer;
+      position: relative;
+      height: 30px;
+      width: auto;
+      & > img {
+        position: relative;
+        top: 0;
+        left: 0;
+        transition: all 0.3s;
+      }
+      .pvHotBase {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .pvHotHover {
+        opacity: 0;
+      }
+      &:hover {
+        .pvHotBase {
+          opacity: 0;
+        }
+        .pvHotHover {
+          opacity: 1;
+        }
+      }
+    }
+  }
 }

Code/src/pages/A3banquet/PanoImg/index.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { myData } from '@/utils/http'
 import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
+import useDataUrl from '@/components/ownUse/useDataUrl'
 function PanoImg() {
   // 0为 第一种模式的热点 其他为第二种
   const [ind, setInd] = useState(-1)
@@ -11,13 +12,16 @@ function PanoImg() {
     else return []
   }, [ind])
 
+  const { dataUrlSame } = useDataUrl()
+
   return (
     <div className={styles.PanoImg}>
       {/* 待完善 */}
       全景图
       {myData.banquet.hot.map((item, index) => (
-        <div key={index} onClick={() => setInd(index)}>
-          {item.name}
+        <div className='pvHot' key={index} onClick={() => setInd(index)}>
+          <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
+          <img className='pvHotHover' src={dataUrlSame + item.hoverSrc} alt='' />
         </div>
       ))}
       {ind === -1 ? null : (

Code/src/pages/A3banquet/index.tsx

@@ -164,8 +164,7 @@ function A3banquet() {
         </div>
 
         <div className='pvRRbtn'>
-          {/* 漫游 待完善 */}
-          <div className='pvRRbtn1' title='漫游模式'></div>
+          <div className='pvRRbtn1' title='漫游模式' onClick={() => history.push('/unity/2')}></div>
           {/* 更多 跳新页面 */}
           <div className='pvRRbtn2' title='更多' onClick={() => history.push('/more')}></div>
         </div>

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

@@ -102,7 +102,32 @@
         cursor: pointer;
         position: absolute;
         z-index: 30;
-        width: 15%;
+        display: inline-block;
+        height: 30px;
+        width: auto;
+        & > img {
+          position: relative;
+          top: 0;
+          left: 0;
+          transition: all 0.3s;
+        }
+        .pvHotBase {
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+
+        .pvHotHover {
+          opacity: 0;
+        }
+        &:hover {
+          .pvHotBase {
+            opacity: 0;
+          }
+          .pvHotHover {
+            opacity: 1;
+          }
+        }
       }
 
       // 底部

Code/src/pages/A4dance/index.tsx

@@ -131,20 +131,19 @@ function A4dance() {
           loding === 110 ? 'pvBoxShow' : 'pvBoxHide'
         )}
       >
-        {/* 热点 云气图*/}
+        {/* 热点 云气图为第一个 */}
         {myData.dance.hot.map((item, index) => (
           <div
             onClick={() => hotShowFu(index)}
             key={index}
-            className='pvHot hoverD'
+            className='pvHot'
             style={{
               top: item.loc.top,
-              right: item.loc.right,
-              bottom: item.loc.bottom,
               left: item.loc.left
             }}
           >
-            <img src={dataUrlSame + item.imgSrc} alt='' />
+            <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
+            <img className='pvHotHover' src={dataUrlSame + item.imgSrc} alt='' />
           </div>
         ))}
 
@@ -180,8 +179,7 @@ function A4dance() {
 
         {/* 右下角按钮 */}
         <div className='pvRRbtn'>
-          {/* 漫游 待完善 */}
-          <div className='pvRRbtn1' title='漫游模式'></div>
+          {/* <div className='pvRRbtn1' title='漫游模式'></div> */}
           {/* 更多 跳新页面 */}
           <div className='pvRRbtn2' title='更多' onClick={() => history.push('/chef')}></div>
         </div>

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

@@ -0,0 +1,12 @@
+.C1unity {
+  position: relative;
+  :global {
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

Code/src/pages/C1unity/index.tsx

@@ -0,0 +1,94 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import { useParams } from 'react-router-dom'
+import { isPc, myData } from '@/utils/http'
+import { VisitHotDataType } from '@/types'
+import Hot1 from '../A2visit/PanoVideo/Hot1'
+import Hot2 from '../A2visit/PanoVideo/Hot2'
+import history from '@/utils/history'
+
+const obj = {
+  1: {
+    pc: '室外电脑端',
+    mo: '室外移动端'
+  },
+  2: {
+    pc: '室内电脑端',
+    mo: '室内移动端'
+  }
+}
+
+function C1unity() {
+  const urlObj: any = useParams()
+
+  const [urlId, setUrlId] = useState('')
+
+  // 1:室外 2：室内
+  const [url, setUrl] = useState('')
+
+  useEffect(() => {
+    setUrlId(urlObj.id)
+
+    const temp = Reflect.get(obj, urlObj.id)
+
+    const res = Reflect.get(temp, isPc ? 'pc' : 'mo')
+
+    // 待完善 设置 url
+    console.log(123, res)
+
+    // 注册
+    window.unityOpenHot = (index: number) => {
+      // 打开热点
+      setInd(Number(index))
+    }
+
+    window.unityBack = () => {
+      // 退出
+      history.go(-1)
+    }
+  }, [urlObj.id])
+
+  // 打开热点的索引
+  const [ind, setInd] = useState(-1)
+
+  const data = useMemo(() => {
+    let arr: VisitHotDataType = []
+
+    if (ind !== -1) {
+      const data1 = myData.visit.hot[ind].data
+      const data2 = myData.banquet.hot[ind].data
+
+      arr = urlId === '1' ? data1 : data2
+    }
+
+    return arr
+  }, [ind, urlId])
+
+  const clickHot = useCallback((index: number) => {
+    setInd(index)
+  }, [])
+
+  return (
+    <div className={styles.C1unity}>
+      {url ? <iframe 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)} />
+      ) : (
+        <Hot2
+          data={data}
+          closeFu={() => setInd(-1)}
+          name={myData[urlId === '1' ? 'visit' : 'banquet'].hot[ind].name}
+        />
+      )}
+    </div>
+  )
+}
+
+const MemoC1unity = React.memo(C1unity)
+
+export default MemoC1unity

Code/src/types/declaration.d.ts

@@ -28,6 +28,7 @@ type MyDataType = {
       size: number
       atv: number
       ath: number
+      hoverSrc: string
       data: VisitHotDataType
     }[]
   }
@@ -40,6 +41,7 @@ type MyDataType = {
       size: number
       atv: number
       ath: number
+      hoverSrc: string
       data: VisitHotDataType
     }[]
   }
@@ -51,8 +53,6 @@ type MyDataType = {
       videoSrc: string
       loc: {
         top: string
-        right: string
-        bottom: string
         left: string
       }
       data: VisitHotDataType