fix: 热点跳转功能

src/views/ShuangGou.vue

@@ -9,12 +9,24 @@
 
     <BtnBack @click="router.go(-1)" />
     <HotspotComp
-      class="hotspot"
+      class="hotspot-1"
       :style="{
-        left: hotspotX + 'px',
-        top: hotspotY + 'px',
+        left: hotspot1X + 'px',
+        top: hotspot1Y + 'px',
+        width: hotspotSize + 'px',
+        height: hotspotSize + 'px',
       }"
-      @click="onClickHotspot"
+      @click="onClickHotspot(1)"
+    />
+    <HotspotComp
+      class="hotspot-2"
+      :style="{
+        left: hotspot2X + 'px',
+        top: hotspot2Y + 'px',
+        width: hotspotSize + 'px',
+        height: hotspotSize + 'px',
+      }"
+      @click="onClickHotspot(2)"
     />
     <div class="title">
       <h1>双钩设色</h1>
@@ -104,12 +116,20 @@ const {
 
 const $env = inject('$env')
 
-const hotspotX = ref(-100)
-const hotspotY = ref(-100)
+const hotspot1X = ref(-100)
+const hotspot1Y = ref(-100)
+const hotspot2X = ref(-100)
+const hotspot2Y = ref(-100)
+const hotspotSize = ref(0)
 function setHotspotPos() {
-  const { x, y } = utils.mapPosFromDraftToWindow({ x: 610, y: 330 }, 'cover', 1920, 972)
-  hotspotX.value = x
-  hotspotY.value = y
+  const { x: x1, y: y1 } = utils.mapPosFromDraftToWindow({ x: 484, y: 420 }, 'cover', 1920, 972)
+  hotspot1X.value = x1
+  hotspot1Y.value = y1
+  const { x: x2, y: y2 } = utils.mapPosFromDraftToWindow({ x: 214, y: 700 }, 'cover', 1920, 972)
+  hotspot2X.value = x2
+  hotspot2Y.value = y2
+  const { x: size } = utils.mapPosFromDraftToWindow({ x: 48, y: 48 }, 'cover', 1920, 972)
+  hotspotSize.value = size
 }
 setHotspotPos()
 onMounted(() => {
@@ -121,8 +141,22 @@ onBeforeUnmount(() => {
 
 const isShowVideos = ref(false)
 
-function onClickHotspot() {
-  isShowVideos.value = true
+function onClickHotspot(idx) {
+  if (idx === 1) {
+    router.push({
+      name: 'PaintingDetail',
+      query: {
+        idx: 20,
+      }
+    })
+  } else if (idx === 2) {
+    router.push({
+      name: 'PaintingDetail',
+      query: {
+        idx: 21,
+      }
+    })
+  }
 }
 
 const activeVideoIdx = ref(0)
@@ -145,12 +179,13 @@ const activeVideoIdx = ref(0)
     width: 100%;
     object-fit: cover;
   }
-  .hotspot{
+  >.hotspot-1, .hotspot-2{
     position: absolute;
     width: 48px;
     height: 48px;
+    min-width: 40px;
+    min-height: 40px;
   }
-
   >.title{
     position: absolute;
     top: 8.13vh;