暂时完成一版

Code/src/components/Zhot/type.d.ts

@@ -51,6 +51,8 @@ export type HotInfoType = {
   houCu: HotRowType[]
   plowZhuang: HotRowType[]
   plowCai: HotRowType[]
+  xianJu: HotRowType[]
+  xianJu2: HotRowType[]
   周礼九拜: {
     name: string
     tubiao: '普通' | '文物'

Code/src/pages/A6xian/A6PanoVideo/index.tsx

@@ -1,17 +1,18 @@
 import React, { useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { myData, otherUrl } from '@/utils/http'
-import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
+import { hotInfo, otherUrl } from '@/utils/http'
 import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
 import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano'
 import HotIcon from '@/components/HotIcon'
+import Zhot from '@/components/Zhot'
 
 // window.draggbleHotspotEvent = (ath: number, atv: number) => {
 //   console.log(`ath: ${ath}, atv: ${atv}`)
 // }
 
 function A6PanoVideo() {
-  const [ind, setInd] = useState(-1)
+  const [acName, setAcName] = useState('')
+
   const [activeIdx, setActiveIdx] = useState(-1)
   const middlewareIns = useRef<KrpanoMiddlewareMethods>(null)
 
@@ -44,31 +45,31 @@ function A6PanoVideo() {
             }}
           >
             <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
-            {myData.xianJu.hot.map((item, index) => (
+            {hotInfo.xianJu.map((item, index) => (
               // 热点图标
               <HotSpot
                 key={index}
                 type='text'
                 name={item.name}
-                atv={item.atv}
-                ath={item.ath}
+                atv={item.panoLoc.atv}
+                ath={item.panoLoc.ath}
                 edge='top'
                 distorted={true}
-                scale={item.size}
+                scale={item.panoLoc.size}
                 bg={false}
                 onOver={() => setActiveIdx(index)}
                 onOut={() => setActiveIdx(-1)}
-                onClick={() => setInd(index)}
+                onClick={() => setAcName(item.name)}
                 // @ts-ignore
                 // onDown='draggable_hotspot()'
               >
                 <HotIcon
-                  isModel={item.isModel ? true : false}
+                  isModel={item.tubiao === '文物' ? true : false}
                   key={index}
                   index={index}
                   isHoverAc={activeIdx === index}
                   hoverSrc={item.hoverSrc}
-                  panoWidth='113px'
+                  panoWidth='180px'
                 />
               </HotSpot>
             ))}
@@ -76,13 +77,7 @@ function A6PanoVideo() {
         </Krpano>
       </KrpanoMiddleware>
 
-      {ind !== -1 ? (
-        <Hot2
-          data={myData.xianJu.hot[ind].data}
-          closeFu={() => setInd(-1)}
-          name={myData.xianJu.hot[ind].name}
-        />
-      ) : null}
+      {acName ? <Zhot name={acName} closeFu={() => setAcName('')} /> : null}
     </div>
   )
 }

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

@@ -86,14 +86,20 @@
       .A6XimgBoxSon {
         width: 100%;
         height: 100%;
-        overflow-x: auto;
-        overflow-y: hidden;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-        video {
-          pointer-events: none;
-          width: auto;
+
+        .A6videoBox {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          overflow-x: auto;
+          overflow-y: hidden;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+          video {
+            pointer-events: none;
+            width: auto;
+          }
         }
       }
       .A6XimgBoxBtn {

Code/src/pages/A6xian/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import BaseImg from '@/components/BaseImg'
-import { baseURL, myData } from '@/utils/http'
+import { baseURL, hotInfo, myData } from '@/utils/http'
 import useLoding from '@/components/ownUse/useLoding'
 import CatVideo from '@/components/CatVideo'
 import A6PanoVideo from './A6PanoVideo'
@@ -11,6 +11,8 @@ import FloorBtn from '@/components/FloorBtn'
 import NextPage from '@/components/NextPage'
 import EndVideo from '@/components/EndVideo'
 import history from '@/utils/history'
+import HotIcon from '@/components/HotIcon'
+import Zhot from '@/components/Zhot'
 
 function A6xian() {
   // 过度动画
@@ -112,6 +114,16 @@ function A6xian() {
   // 二级的静态图
   const [erImg, setErImg] = useState(false)
 
+  // 打开热点
+  const [acName, setAcName] = useState('')
+
+  useEffect(() => {
+    if (acName) {
+      clearTimeout(actionRef.current)
+      clearInterval(actionMoveRef.current)
+    } else actionFu()
+  }, [acName, actionFu])
+
   return (
     <div className={styles.A6xian}>
       {/* 初始静态图 */}
@@ -187,27 +199,45 @@ function A6xian() {
           className='A6XimgBox'
           style={{ opacity: xianShow ? '1' : '0', pointerEvents: xianShow ? 'auto' : 'none' }}
         >
-          <div
-            className='A6XimgBoxSon'
-            style={{ cursor: isFlag ? 'move' : 'default' }}
-            ref={xianRef}
-            onMouseDown={() => setIsFlag(true)}
-            onMouseUp={() => setIsFlag(false)}
-            onMouseLeave={() => setIsFlag(false)}
-            onMouseMove={e => mousemoveFu(e)}
-            onWheel={e => mousemoveFu(e, true)}
-          >
-            <video
-              ref={videoRef}
-              playsInline
-              muted
-              webkit-playsinline='true'
-              x5-video-player-type='h5'
-              loop={true}
+          <div className='A6XimgBoxSon'>
+            <div
+              className='A6videoBox'
+              style={{ cursor: isFlag ? 'move' : 'default' }}
+              ref={xianRef}
+              onMouseDown={() => setIsFlag(true)}
+              onMouseUp={() => setIsFlag(false)}
+              onMouseLeave={() => setIsFlag(false)}
+              onMouseMove={e => mousemoveFu(e)}
+              onWheel={e => mousemoveFu(e, true)}
             >
-              <source type='video/mp4' src={`${baseURL}xianJu/chang.mp4`} />
-              Your browser does not support the video tag.
-            </video>
+              <video
+                ref={videoRef}
+                playsInline
+                muted
+                webkit-playsinline='true'
+                x5-video-player-type='h5'
+                loop={true}
+              >
+                <source type='video/mp4' src={`${baseURL}xianJu/chang.mp4`} />
+                Your browser does not support the video tag.
+              </video>
+
+              {/* 热点 */}
+              {hotInfo.xianJu2.map((item, index) => (
+                <HotIcon
+                  isModel={item.tubiao === '文物' ? true : false}
+                  style={{
+                    top: item.locPage.top,
+                    left: item.locPage.left
+                  }}
+                  key={index}
+                  index={index}
+                  clickSon={() => setAcName(item.name)}
+                  hoverSrc={item.hoverSrc}
+                  isXiao={0.67}
+                />
+              ))}
+            </div>
           </div>
           {/* 跳到下一章 */}
           <NextPage clickSon={() => setLastVideo(true)} txt='结束冥想' />
@@ -229,6 +259,8 @@ function A6xian() {
         path='/end'
         delDom='.A22Pano'
       />
+
+      {acName ? <Zhot name={acName} closeFu={() => setAcName('')} /> : null}
     </div>
   )
 }