swkk: 分组多了一个层级。

src/views/SwkkView.vue

@@ -147,7 +147,7 @@
           @click="changeScene(index)"
         >
           <img
-            :src="item.enter.cover"
+            :src="item.list[0].enter.cover"
             alt=""
             draggable="false"
           >
@@ -158,6 +158,9 @@
               width: autoMovingProgress + '%',
             }"
           />
+          <div class="title">
+            {{ item.name }}
+          </div>
         </li>
       </ul>
     </div>
@@ -176,6 +179,7 @@ export default {
 
       floor: 0,
 
+      canClickAutoMoving: false,
       isAutoMoving: false,
       isChangingAutoMovingStatus: false,
       autoMovingProgress: 0,
@@ -189,14 +193,6 @@ export default {
 
       baseHotData: null,
       hotspotDetail: null,
-
-      // ------- ?
-      title: true,
-      partId: 0,
-      frameId: null,
-      progress: 0,
-      disable: false,
-      playing: false,
     }
   },
   computed: {
@@ -271,22 +267,28 @@ export default {
       player.on("end", async () => {
         this.isAutoMoving = false
         this.isChangingAutoMovingStatus = false
-        this.progress = 0
+        this.autoMovingProgress = 0
         this.frameId = null
         this.cancelMustMute()
       })
 
       player.on("progress", ({ partId, frameId, progress }) => {
-        this.curSceneIdx = frameId
-        this.$refs['scene-item'][this.curSceneIdx].scrollIntoView()
-        this.autoMovingProgress = Number(progress * 100).toFixed(5)
+        if (partId !== this.curSceneIdx) {
+          this.curSceneIdx = partId
+          this.autoMovingProgress = 0
+          this.$refs['scene-item'][this.curSceneIdx].scrollIntoView()
+        }
+        this.autoMovingProgress = (frameId / this.tourList[partId].list.length + Number(progress).toFixed(5) / this.tourList[partId].list.length) * 100
       })
     })
 
     // 导览数据
     kankan.TourManager.on("loaded", (tours) => {
       try {
-        this.tourList = tours[0].list
+        this.tourList = tours
+        setTimeout(() => {
+          this.canClickAutoMoving = true
+        }, 1000)
       } catch (e) {
         console.error('没拿到导览数据：', e)
         this.tourList = []
@@ -446,6 +448,9 @@ export default {
       location.reload()
     },
     onClickAutoMoving() {
+      if (!this.canClickAutoMoving) {
+        return
+      }
       if (this.isAutoMoving) {
         this.stopAutoMoving()
       } else {
@@ -493,7 +498,7 @@ export default {
 
       let player = await this.kankan.TourManager.player
       player.pause()
-      await player.selectFrame(index)
+      await player.selectPart(index)
       this.isChangingScene = false
     },
   },
@@ -619,23 +624,38 @@ export default {
       > li {
         flex: 0 0 auto;
         width: 12.5rem;
-        height: 7.5rem;
+        height: 10.5rem;
         position: relative;
         > img {
           background: #D26868;
           width: 100%;
-          height: 100%;
+          height: 7.5rem;
           object-fit: cover;
         }
         > .progress {
           position: absolute;
           left: 0;
-          bottom: 0;
+          top: 6.7rem;
           height: 0.5rem;
           background-color: #930909;
         }
+        .title {
+          margin-top: 0.5rem;
+          text-align: center;
+          font-size: 1.25rem;
+          color: #FFFFFF;
+          white-space: pre;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
         &.active {
-          border: 0.33rem solid #930909;
+          > img {
+            border: 0.33rem solid #930909;
+          }
+          .title {
+            color: #930909;
+          }
         }
       }
     }