hover交互优化

src/components/CameraContent-1-1-1.vue

@@ -2,7 +2,6 @@
 <template>
   <div
     class="camera-content-1-1"
-    @click="displayingHotspotIdx = -1"
   >
     <button
       class="return"
@@ -78,7 +77,8 @@
           :class="{
             active: displayingHotspotIdx === 0
           }"
-          @click.stop="displayingHotspotIdx = 0"
+          @mouseenter="displayingHotspotIdx = 0"
+          @mouseleave="displayingHotspotIdx = -1"
         >
           <div class="label">
             中轴线
@@ -95,7 +95,8 @@
           :class="{
             active: displayingHotspotIdx === 1
           }"
-          @click.stop="displayingHotspotIdx = 1"
+          @mouseenter="displayingHotspotIdx = 1"
+          @mouseleave="displayingHotspotIdx = -1"
         >
           <div class="label">
             水系
@@ -112,7 +113,8 @@
           :class="{
             active: displayingHotspotIdx === 2
           }"
-          @click.stop="displayingHotspotIdx = 2"
+          @mouseenter="displayingHotspotIdx = 2"
+          @mouseleave="displayingHotspotIdx = -1"
         >
           <div class="label">
             元大都外城
@@ -129,7 +131,8 @@
           :class="{
             active: displayingHotspotIdx === 3
           }"
-          @click.stop="displayingHotspotIdx = 3"
+          @mouseenter="displayingHotspotIdx = 3"
+          @mouseleave="displayingHotspotIdx = -1"
         >
           <div class="label">
             元大都皇城
@@ -206,7 +209,7 @@ const layoutDataList = [
   },
 ]
 
-const displayingHotspotIdx = ref(0)
+const displayingHotspotIdx = ref(-1)
 
 
 </script>

src/views/PanoView.vue

@@ -106,8 +106,10 @@
         :key="idx"
         class="camera-entry"
         :class="{
-          active: idx === Number(route.query.cameraIdx)
+          active: idx === activeCameraIdx
         }"
+        @mouseenter="activeCameraIdx = idx"
+        @mouseleave="activeCameraIdx = sceneIdx"
         @click="router.push({
           name: route.name,
           query:{
@@ -304,6 +306,7 @@ const sceneList = ref([
 const currentCameraList = computed(() => {
   return sceneList.value[sceneIdx.value].cameraList
 })
+const activeCameraIdx = ref(sceneIdx.value)
 
 const btnOnTrack1ImgUrl = computed(() => {
   return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'