增加材料热点

src/views/HotspotDetail1.vue

@@ -29,20 +29,21 @@
     >
       <div
         v-show="pageLev === item.id"
-        v-touch:swipe.left="() => onSwipeChange(1, index)"
-        v-touch:swipe.right="() => onSwipeChange(-1, index)"
         :swipe-options="{ direction: 'horizontal' }"
         class="HD1_3AcMove"
+        @wheel="
+          ($event) => handleScroll($event, (val) => onSwipeChange(val, index))
+        "
       >
         <!-- :text="`${pageLev===11?'向右':pageLev===13?'向左':'左右'}滑动`" -->
-        <OperationTip
+        <!-- <OperationTip
           v-if="isShowOperationTip"
           class="operation-tip"
           :direction="'h'"
           :is-show="isShowOperationTip"
           color="green"
           text="左右滑动"
-        />
+        /> -->
       </div>
 
       <img
@@ -60,19 +61,19 @@
       :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`"
       :style="`opacity:${swChange && pageShow ? '1' : '0'}`"
     >
-      <h3>{{ txtShow.title }}</h3>
       <p>{{ txtShow.desc }}</p>
+      <h3>{{ txtShow.title }}</h3>
     </div>
 
-    <BtnBack
-      color="green"
-      @click="backBtnFu"
-    />
+    <BtnBack @click="backBtnFu" />
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue"
+import useRollFu from "../rollFu.js"
+
+const { handleScroll } = useRollFu()
 
 const emit = defineEmits(["close"])
 
@@ -124,7 +125,6 @@ const backBtnFu = () => {
     // 点击查看回复
     isLookImg.value = true
 
-
     pageShow.value = false
     pageLev.value = 1
   } else emit("close")
@@ -149,7 +149,6 @@ const isShowOperationTip = ref(false)
 const ImgClick = (item) => {
   if (!isShowOperationTip.value) {
     isShowOperationTip.value = true
-
   }
 
   pageShow.value = true
@@ -165,6 +164,7 @@ const swChange = ref(true)
 
 // 左滑右滑
 const onSwipeChange = (num, index) => {
+  console.log("在滚动", num, index)
   isShowOperationTip.value = false
   let newItem = imgList[index + num]
 
@@ -229,7 +229,6 @@ const imgBottomLoc = (nowId, itemId) => {
     left: 20%;
     width: 150px;
     height: 252px;
-
   }
 
   .HD1_2 {
@@ -266,29 +265,33 @@ const imgBottomLoc = (nowId, itemId) => {
     position: absolute;
     z-index: 10;
     transition: bottom 1s;
-    width: 25%;
+    height: 80vh;
     & > img {
-      width: 100%;
+      // width: 100%;
+      height: 100%;
     }
   }
   .HD1_3_1 {
-    right: -60%;
+    right: 7%;
     z-index: 1;
-    bottom: 8%;
+    bottom: -16%;
+    cursor: pointer;
   }
   .HD1_3_2 {
-    right: 18%;
+    right: 10%;
     z-index: 2;
-    bottom: -20%;
+    bottom: -30%;
+    cursor: pointer;
   }
   .HD1_3_3 {
-    right: 20%;
+    right: 12%;
     z-index: 3;
-    bottom: -34%;
+    bottom: -44%;
+    cursor: pointer;
   }
   .HD1_3Ac {
     bottom: -5px;
-    right: 0;
+    right: -10%;
     opacity: 1;
     .HD1_3AcMove {
       position: absolute;
@@ -301,6 +304,10 @@ const imgBottomLoc = (nowId, itemId) => {
       align-items: center;
       padding-top: 30%;
     }
+    > img {
+      width: 60vw;
+      height: auto;
+    }
   }
 
   .HD1_3HideLeft {
@@ -338,16 +345,20 @@ const imgBottomLoc = (nowId, itemId) => {
     h3 {
       font-weight: 700;
       text-align: center;
-      font-size: 30px;
+      font-size: 48px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transform: translate(150%, -150%);
     }
     p {
-      font-size: 16px;
-      position: absolute;
-      top: 50px;
-      left: 50%;
-      transform: translateX(-50%);
+      font-size: 30px;
+      // position: absolute;
+      // top: 15%;
+      // left: -250%;
+      // transform: translateX(-50%);
       letter-spacing: 2px;
-      height: calc(100% - 50px);
+      height: calc(100% - 0px);
       writing-mode: vertical-rl;
       line-height: 120%;
     }
@@ -355,7 +366,9 @@ const imgBottomLoc = (nowId, itemId) => {
 
   .HD1_4Ac {
     opacity: 1;
-    bottom: 65%;
+    bottom: 40%;
+    width: auto;
+    left: 20%;
   }
 }
 .hotspot-detail-2 {