移动端倍速

scene/src/views/gui/components/guide.vue

@@ -113,6 +113,7 @@ export default {
       this.beisuTabShow = false;
       localStorage.setItem("tourPlaybackRate", String(beisu));
       window.__tourPlaybackRate = beisu;
+      this.$emit("speedChange", beisu);
       const tourAudio = window.SoundManager?.list?.find((e) => e.name === "tour");
       if (tourAudio?.audio) {
         tourAudio.audio.playbackRate = beisu;
@@ -500,11 +501,22 @@ export default {
   }
   &.isMobile {
     // height: 2.6667rem;
-    padding: 34px 0.2667rem 0;
+    padding: 34px 1.8rem 0 0.2667rem;
     left: 0;
     right: 0;
     bottom: 0;
     height: 116px;
+    .nextScene{
+      gap: 2px;
+      & > img{
+        width: 1rem;
+        height: 1rem;
+      }
+      & > span{
+        font-size: 0.32rem;
+        color: #C7A770;
+      }
+    }
     &.collapse {
       bottom: -93px;
       .rotate-btn {

scene/src/views/gui/menu.vue

@@ -147,7 +147,7 @@
 
     <!-- 自动导览 -->
     <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
-      <Guide v-if="showGuide" :tourList="tourList" @nextScene="changeToNextScene" />
+      <Guide v-if="showGuide" :tourList="tourList" @nextScene="changeToNextScene" @speedChange="onSpeedChange" />
     </transition>
 
     <!-- 导览底部进度 -->
@@ -253,8 +253,9 @@
             :style="`display:${(['hots', 'route'].includes(i.type) && openType == 'immersive') || mode === 'dollhouse' ? 'none' : 'block'};`"
             @click.stop="hanlderButtons(i, i.type)"
           >
-            <img class="normal" :src="i.normalIcon" alt="" />
-            <img class="active" :src="i.activeIcon" alt="" />
+            <img class="normal" :src="i.normalIcon" alt="" v-if="i.normalIcon" />
+            <div class="normal normal-div" v-else>{{ menuSpeedDisplay }}x</div>
+            <img class="active" :src="i.activeIcon" alt="" v-if="i.activeIcon" />
           </div>
         </template>
       </div>
@@ -304,6 +305,7 @@ export default {
       isRoute: true,
       mode: "panorama",
       tourList: [],
+      speedRefreshKey: 0,
       openType: null,
       isGuide: true,
       musicState: true,
@@ -471,6 +473,12 @@ export default {
           type: "controls",
         },
         {
+          normalIcon: undefined,
+          activeIcon: undefined,
+          name: "倍速",
+          type: "controls",
+        },
+        {
           normalIcon: require("@/assets/image/icon/new-icon/icon_next.svg"),
           activeIcon: require("@/assets/image/icon/new-icon/icon_line_active.svg"),
           name: "前进",
@@ -481,6 +489,7 @@ export default {
       idMatch: "",
       sceneList: [],
       sceneNum: "",
+      speedOptions: [1.0, 1.25, 1.5, 2.0, 0.8],
     };
   },
   watch: {
@@ -516,6 +525,14 @@ export default {
     },
   },
   computed: {
+    menuSpeed() {
+      void this.speedRefreshKey;
+      return parseFloat(localStorage.getItem("tourPlaybackRate") || "1.0");
+    },
+    menuSpeedDisplay() {
+      const v = this.menuSpeed;
+      return Number.isInteger(v) ? v + ".0" : v;
+    },
     ...mapGetters({
       points: "points",
       flyInModel: "flyInModel",
@@ -696,6 +713,20 @@ export default {
         player.director.stopTour();
       }
     },
+    cycleSpeed() {
+      const opts = [1.0, 1.25, 1.5, 2.0, 0.8];
+      const cur = parseFloat(localStorage.getItem("tourPlaybackRate") || "1.0");
+      const idx = opts.findIndex((v) => Math.abs(v - cur) < 0.01) >= 0 ? opts.findIndex((v) => Math.abs(v - cur) < 0.01) : 0;
+      const next = opts[(idx + 1) % opts.length];
+      localStorage.setItem("tourPlaybackRate", String(next));
+      window.__tourPlaybackRate = next;
+      const tourAudio = window.SoundManager?.list?.find((e) => e.name === "tour");
+      if (tourAudio?.audio) tourAudio.audio.playbackRate = next;
+      this.speedRefreshKey++;
+    },
+    onSpeedChange() {
+      this.speedRefreshKey++;
+    },
     hanlderButtons(item, type) {
       // 飞入飞出中
       if (player.flying) return;
@@ -704,7 +735,7 @@ export default {
         item.handler();
         return;
       }
-      if (!["route", "fullScreen", "controls", "guide"].includes(type)) {
+      if (!["route", "fullScreen", "controls", "guide",].includes(type)) {
         if (this.openType != type) {
           if (this.openType === "immersive") window.__tourGuideActive = false;
           this.openType = type;
@@ -788,7 +819,10 @@ export default {
             }
           } else if (item.name == "前进") {
             window.tourPlayCtl.go(1);
-          } else {
+          } else if (item.name == "倍速") {
+            this.cycleSpeed();
+          }
+          else {
             window.tourPlayCtl.go(-1);
           }
           break;
@@ -1220,6 +1254,18 @@ export default {
       width: 100%;
       height: 100%;
     }
+    .normal-div {
+      width: 100%;
+      height: 100%;
+      background: rgba(55, 54, 53, 0.60);
+      border-radius: 50px 50px 50px 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 17px;
+      font-weight: bold;
+      color: #C7A770;
+    }
     .active {
       display: none;
     }