fix(*): 优化

src/pages/A0base/component/Panoramic.tsx

@@ -20,7 +20,7 @@ const Panoramic = ({
 }) => {
   const [currentScene, setCurrentScene] = useState('center2')
   const [autorotateEnable, setAutorotateEnable] = useState(false)
-
+  const [hotspotHover, setHotspotHover] = useState(false)
   useEffect(() => {
     window.draggbleHotspotEvent = (ath: number, atv: number) => {
       console.log(`ath: ${ath}, atv: ${atv}`)
@@ -68,13 +68,13 @@ const Panoramic = ({
                     vlookat: 32
                   })}
               fovType='MFOV'
-              fov={130}
+              fov={120}
               maxPixelZoom={2}
               fovMin={70}
               fovMax={180}
               limitView='range'
               vlookatMax={90}
-              vlookatMin={-25}
+              vlookatMin={-55}
             />
 
             <HotSpot
@@ -156,34 +156,66 @@ const Panoramic = ({
                 <div className='A0hotspot-bg-xuni'></div>
               </div>
             </HotSpot>
+
+            <HotSpot
+              name='distance1'
+              type='text'
+              atv={49.13}
+              ath={14.54}
+              scale={0.5}
+              edge='top'
+              bg={false}
+              distorted={true}
+              onOut={() => setHotspotHover(false)}
+              onOver={() => setHotspotHover(true)}
+            >
+              <div className='A0hotspot-distance A0hotspot-distance-1'>
+                <div className='A0hotspot-distance-text'>6.8公里</div>
+                <div className='A0hotspot-distance-line1'></div>
+              </div>
+            </HotSpot>
+
+            <HotSpot
+              name='distance2'
+              type='text'
+              atv={36.79}
+              ath={-6.57}
+              scale={0.5}
+              edge='top'
+              bg={false}
+              distorted={true}
+              onOut={() => setHotspotHover(false)}
+              onOver={() => setHotspotHover(true)}
+            >
+              <div className='A0hotspot-distance A0hotspot-distance-2'>
+                <div className='A0hotspot-distance-text'>5.8公里</div>
+                <div className='A0hotspot-distance-line2'></div>
+              </div>
+            </HotSpot>
+
+            <HotSpot
+              name='distance3'
+              type='text'
+              atv={39.41}
+              ath={17.077}
+              scale={0.5}
+              edge='top'
+              bg={false}
+              distorted={true}
+              onOut={() => setHotspotHover(false)}
+              onOver={() => setHotspotHover(true)}
+            >
+              <div className='A0hotspot-distance A0hotspot-distance-3'>
+                <div className='A0hotspot-distance-text'>9.5公里</div>
+                <div className='A0hotspot-distance-line3'></div>
+              </div>
+            </HotSpot>
           </>
         )
       }
     ],
     []
   )
-  // const MENUS = [
-  //   {
-  //     title: '长沙国防教育馆',
-  //     scenes: CENTER_SCENE_LIST
-  //   }
-  // ]
-
-  // const handleSceneClick = (name: string) => {
-  //   setCurrentScene(name)
-  // }
-
-  // const handleMenuClick = (idx: number) => {
-  //   setCurrentMenu(idx)
-  // }
-
-  // const handleView = (direction: ROTATE_DIRECTION) => {
-  //   window.ReactKrpanoActionProxy?.rotateView(direction)
-  // }
-
-  // const handleZoom = (action: ZOOM_ACTION) => {
-  //   window.ReactKrpanoActionProxy?.zoomView(action)
-  // }
 
   const handleAutoRotateOneRound = () => {
     const count = window.ReactKrpanoActionProxy?.get('scene').count
@@ -229,66 +261,6 @@ const Panoramic = ({
           sc => sc.imageTagAttributes && <Scene key={sc.name!} {...(sc as SceneProps)} />
         )}
       </Krpano>
-
-      {/* <div className='scene-panel'>
-        <div className='scene-panel__menu'>
-          {MENUS.map((sc, idx) => (
-            <div
-              key={sc.title}
-              className={`scene-panel__menu__item ${idx === currentMenu && 'active'}`}
-              onClick={handleMenuClick.bind(undefined, idx)}
-            >
-              {sc.title}
-            </div>
-          ))}
-        </div>
-
-        <div className='scene-panel__list'>
-          {MENUS[currentMenu].scenes.map(sc => (
-            <div
-              key={sc.name}
-              className={`scene-panel__list__item ${sc.name === currentScene ? 'active' : ''}`}
-              onClick={handleSceneClick.bind(undefined, sc.name || '')}
-            >
-              <img src={sc.thumbUrl || sc.images![0].url.replace('%s', 'f')} alt={sc.name} />
-            </div>
-          ))}
-        </div>
-      </div> */}
-
-      {/* <div className='toolbar'>
-        <MouseHoldView onHold={handleView.bind(undefined, ROTATE_DIRECTION.LEFT)}>
-          <button>←</button>
-        </MouseHoldView>
-        <MouseHoldView onHold={handleView.bind(undefined, ROTATE_DIRECTION.RIGHT)}>
-          <button>→</button>
-        </MouseHoldView>
-        <MouseHoldView onHold={handleView.bind(undefined, ROTATE_DIRECTION.UP)}>
-          <button>↑</button>
-        </MouseHoldView>
-        <MouseHoldView onHold={handleView.bind(undefined, ROTATE_DIRECTION.DOWN)}>
-          <button>↓</button>
-        </MouseHoldView>
-        <MouseHoldView onHold={handleZoom.bind(undefined, ZOOM_ACTION.IN)}>
-          <button>+</button>
-        </MouseHoldView>
-        <MouseHoldView onHold={handleZoom.bind(undefined, ZOOM_ACTION.OUT)}>
-          <button>-</button>
-        </MouseHoldView>
-        <button
-          className={`${autorotateEnable && 'active-btn'}`}
-          onClick={() => setAutorotateEnable(!autorotateEnable)}
-        >
-          360°
-        </button>
-        <button
-          onClick={() => {
-            window.ReactKrpanoActionProxy?.call('webvr.enterVR();')
-          }}
-        >
-          vr
-        </button>
-      </div> */}
     </div>
   )
 }

src/pages/A0base/component/index.module.scss

@@ -508,5 +508,56 @@
         }
       }
     }
+
+    .A0hotspot-distance {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      &-text {
+        width: 200px;
+        line-height: 34px;
+        font-size: 28px;
+        font-weight: bold;
+        color: #fff;
+      }
+      &-line1 {
+        width: 640px;
+        border-style: dashed;
+        border-width: 0 0 6px 0;
+        border-color: #3098fb;
+        background-color: transparent;
+      }
+      &-line2 {
+        width: 284px;
+        height: 6px;
+        border-style: dashed;
+        border-width: 0 0 6px 0;
+        border-color: #3098fb;
+        background-color: transparent;
+        transform: rotate(113deg);
+      }
+      &-line3 {
+        width: 670px;
+        height: 6px;
+        border-style: dashed;
+        border-width: 0 0 6px 0;
+        border-color: #3098fb;
+        background-color: transparent;
+      }
+    }
+    .A0hotspot-distance-1 {
+      transform: rotate(-2.8deg);
+    }
+    .A0hotspot-distance-2 {
+      .A0hotspot-distance-text {
+        transform: rotate(13deg);
+        width: 240px;
+        text-align: right;
+      }
+    }
+    .A0hotspot-distance-3 {
+      transform: rotate(26.3deg);
+    }
   }
 }