upp

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

@@ -1,7 +1,7 @@
 .HotIcon {
   display: inline-block;
   height: 30px;
-  width: 113px;
+  width: auto;
   :global {
     img {
       cursor: pointer;

Code/src/components/HotIcon/index.tsx

@@ -13,15 +13,31 @@ type Props = {
   isHoverAc?: boolean //鼠标移入索引
   hoverFu?: (index: number) => void //鼠标移入事件
   isZhan?: boolean //是否全部展开
+  // 全景视频和全景图的宽度
+  panoWidth?: string
 }
 
-function HotIcon({ index, clickSon, hoverSrc, style, isHoverAc, hoverFu, isZhan, zIndex }: Props) {
+function HotIcon({
+  index,
+  clickSon,
+  hoverSrc,
+  style,
+  isHoverAc,
+  hoverFu,
+  isZhan,
+  zIndex,
+  panoWidth
+}: Props) {
   const onMouseEnter = useCallback(() => {
     if (hoverFu) {
       hoverFu(index)
     }
   }, [hoverFu, index])
 
+  const clickSonFu = useCallback(() => {
+    if (clickSon) clickSon(index)
+  }, [clickSon, index])
+
   return (
     <div
       id='HotIcon'
@@ -29,7 +45,8 @@ function HotIcon({ index, clickSon, hoverSrc, style, isHoverAc, hoverFu, isZhan,
         position: style ? 'absolute' : 'relative',
         top: style ? style.top : 0,
         left: style ? style.left : 0,
-        zIndex: zIndex || 1
+        zIndex: zIndex || 1,
+        width: panoWidth ? panoWidth : 'auto'
       }}
       className={classNames(
         styles.HotIcon,
@@ -39,12 +56,15 @@ function HotIcon({ index, clickSon, hoverSrc, style, isHoverAc, hoverFu, isZhan,
       key={index}
     >
       <img
+        onMouseEnter={onMouseEnter}
+        onClick={clickSonFu}
         className='HotIconBase'
         src={`${baseURL}visit/hot/hotBase.png`}
         alt=''
       />
       <img
-        // style={{ opacity: isHoverAc ? 1 : 0 }}
+        onMouseEnter={onMouseEnter}
+        onClick={clickSonFu}
         className='HotIconHover'
         src={baseURL + hoverSrc}
         alt=''

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

@@ -7,8 +7,8 @@ import HotIcon from '@/components/HotIcon'
 import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano'
 
 window.draggbleHotspotEvent = (ath: number, atv: number) => {
-  console.log(`ath: ${ath}, atv: ${atv}`);
-};
+  console.log(`ath: ${ath}, atv: ${atv}`)
+}
 
 function PanoVideo() {
   // 0为 第一种模式的热点 其他为第二种
@@ -21,70 +21,75 @@ function PanoVideo() {
   }, [ind])
 
   const onReady = () => {
-    window.ReactKrpanoActionProxy?.krpanoRenderer?.call("set(control.dragging, false);")
+    window.ReactKrpanoActionProxy?.krpanoRenderer?.call('set(control.dragging, false);')
   }
 
-  return <>
-    <Krpano className={styles.PanoVideo} currentScene='scene1' onReady={onReady}>
-      <VideoScene name='scene1'
-        videointerfaceXmlUrl="/skin/videointerface.xml"
-        videoplayerUrl="/plugins/videoplayer.js"
-        sourceList={[
-          {
-            res: "2000x1000",
-            url: baseURL + "/pano/1.mp4",
-            poster: "",
-          },
-        ]}
-        playRes="2000x1000"
-        onVisibility={() => {
-          if (document.visibilityState === "visible") {
-            videoSceneModel.play();
-          }
-        }}
-      >
-        <View
-          hlookat={0}
-          vlookat={0}
-          fovType="MFOV"
-          fov={100}
-          maxPixelZoom={2}
-          fovMin={70}
-          fovMax={140}
-          limitView="auto"
-        />
+  return (
+    <>
+      <Krpano className={styles.PanoVideo} currentScene='scene1' onReady={onReady}>
+        <VideoScene
+          name='scene1'
+          videointerfaceXmlUrl='/skin/videointerface.xml'
+          videoplayerUrl='/plugins/videoplayer.js'
+          sourceList={[
+            {
+              res: '2000x1000',
+              url: baseURL + '/pano/1.mp4',
+              poster: ''
+            }
+          ]}
+          playRes='2000x1000'
+          onVisibility={() => {
+            if (document.visibilityState === 'visible') {
+              videoSceneModel.play()
+            }
+          }}
+        >
+          <View
+            hlookat={0}
+            vlookat={0}
+            fovType='MFOV'
+            fov={100}
+            maxPixelZoom={2}
+            fovMin={70}
+            fovMax={140}
+            limitView='auto'
+          />
 
-        {myData.visit.hot.map((item, index) => (
-          // 热点图标
-          <HotSpot
-            key={index}
-            type="text"
-            name={item.name}
-            atv={item.atv}
-            ath={item.ath}
-            edge="top"
-            distorted={true}
-            scale={item.size}
-            bg={false}
-            onOver={() => setActiveIdx(index)}
-            onOut={() => setActiveIdx(-1)}
-            onClick={() => setInd(index)}
-          >
-            <HotIcon index={index}
-              isHoverAc={activeIdx === index}
-              hoverSrc={item.hoverSrc}
-            />
-          </HotSpot>
-        ))}
-      </VideoScene>
-    </Krpano>
+          {myData.visit.hot.map((item, index) => (
+            // 热点图标
+            <HotSpot
+              key={index}
+              type='text'
+              name={item.name}
+              atv={item.atv}
+              ath={item.ath}
+              edge='top'
+              distorted={true}
+              scale={item.size}
+              bg={false}
+              onOver={() => setActiveIdx(index)}
+              onOut={() => setActiveIdx(-1)}
+              onClick={() => setInd(index)}
+            >
+              <HotIcon
+                index={index}
+                isHoverAc={activeIdx === index}
+                hoverSrc={item.hoverSrc}
+                panoWidth='113px'
+              />
+            </HotSpot>
+          ))}
+        </VideoScene>
+      </Krpano>
 
-    {ind === -1 ? null : ind === 0 ? (
-      <Hot1 data={data} closeFu={() => setInd(-1)} />
-    ) : (
-      <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.visit.hot[ind].name} />
-    )}
-  </>
+      {ind === -1 ? null : ind === 0 ? (
+        <Hot1 data={data} closeFu={() => setInd(-1)} />
+      ) : (
+        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.visit.hot[ind].name} />
+      )}
+    </>
+  )
 }
 
 const MemoPanoVideo = React.memo(PanoVideo)