场景列表可拖拽

src/views/SwkkView.vue

@@ -154,19 +154,20 @@
     <!-- 导览栏 -->
     <div
       v-show="isShowTourGuide"
-      class="tour-guide-wrap"
+      class="tour-guide-wrap swiper-root"
       :style="{
         zIndex: $globalConfig.zIndex.swkkGuideBar.self
       }"
     >
       <ul
         v-if="tourList.length"
-        class="tour-guide"
+        class="tour-guide swiper-wrapper"
       >
         <li
           v-for="(item, index) in tourList"
           :key="item.sid"
           ref="scene-item"
+          class="swiper-slide"
           :class="{active: curSceneIdx === index}"
           @click="changeScene(index)"
         >
@@ -218,6 +219,9 @@
 import HotspotDetail from "@/components/HotspotDetail.vue"
 import HotspotList from "@/components/HotspotList.vue"
 
+import Swiper from 'swiper/swiper-bundle.esm.js'
+import 'swiper/swiper-bundle.css'
+
 export default {
   components: {
     HotspotDetail,
@@ -402,6 +406,24 @@ export default {
         this.tourList = tours
         console.log('tour list: ', this.tourList)
         setTimeout(() => {
+          new Swiper('.swiper-root', {
+            slidesPerView: 'auto',
+            freeMode: true,
+            mousewheel: true,
+            grabCursor: true,
+            // If we need pagination
+            // pagination: {
+            //   el: '.swiper-pagination',
+            // },
+
+            // Navigation arrows
+            // navigation: {
+            //   nextEl: '.swiper-button-next',
+            //   prevEl: '.swiper-button-prev',
+            // },
+          })
+        }, 0)
+        setTimeout(() => {
           this.canClickAutoMoving = true
         }, 1000)
       } catch (e) {
@@ -686,18 +708,17 @@ export default {
     background: rgba(133, 119, 69, 0.50);
     backdrop-filter: blur(10px);
     .tour-guide {
-      display: flex;
-      align-items: center;
-      overflow: auto;
-      width: 100%;
       height: 100%;
-      padding: 24px 46px;
+      padding: 24px 0;
+      width: fit-content !important;
       > li {
-        margin-right: 0.83rem;
+        margin-right: 10px;
+        &:first-child {
+          margin-left: 46px;
+        }
         &:last-child {
-          margin-right: initial;
+          margin-right: 46px;
         }
-        flex: 0 0 auto;
         width: 187px;
         height: 135px;
         position: relative;