feat: --

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

@@ -67,7 +67,11 @@ export default {
     }),
   },
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    guidePlayIndex(v) {
+      this.swiper.slideTo(v)
+    }
+  },
   //方法集合
   methods: {
     ...mapMutations(["setData", "setPanoOver"]),
@@ -85,7 +89,7 @@ export default {
     },
 
     initSwiper() {
-      new Swiper(this.$refs.mySwiper, {
+      this.swiper = new Swiper(this.$refs.mySwiper, {
         slidesPerView: "auto",
         autoplay: false,
         mousewheel: true,

scene/src/views/gui/menu.vue

@@ -205,11 +205,14 @@
               :key="index"
               v-show="(i.action == 'play' && !guideIsPlay && mode == 'panorama') || (i.action == 'pause' && guideIsPlay && mode == 'panorama')"
               class="button-item2 button-item"
+              :class="{pause: i.action === 'pause'}"
               @click.stop="hanlderButtons(i, i.type)"
             >
-              <img class="normal" :src="i.normalIcon" alt="" />
-              <img class="active" :src="i.activeIcon" alt="" />
-              <!-- <div class="tip-box">{{ i.name }}</div> -->
+              <template v-if="i.action !== 'pause'">
+                <img class="normal" :src="i.normalIcon" alt="" />
+                <img class="active" :src="i.activeIcon" alt="" />
+              </template>
+              <div class="tip-box">{{ i.name }}</div>
             </div>
           </div>
         </transition>
@@ -237,7 +240,7 @@
       <div class="mobile-bottom-button" :class="{ center: openType == 'immersive', ['show-guide']: showGuide && !isCollapse }">
         <div
           class="button-item"
-          :class="`${getBottomActive(i.type)} ${i.action === 'play' && guideIsPlay && 'active'}`"
+          :class="`${getBottomActive(i.type)} ${i.action === 'play' && guideIsPlay && 'active pause'}`"
           :style="`display:${i.type == 'hots' && openType == 'immersive' ? 'none' : 'block'};`"
           @click.stop="hanlderButtons(i, i.type)"
           v-for="(i, index) in mobileBottomBtns"
@@ -307,14 +310,14 @@ export default {
         {
           normalIcon: require("@/assets/image/icon_play.png"),
           activeIcon: require("@/assets/image/icon_play.png"),
-          name: "自动导览",
+          name: "讲解",
           action: "play",
           type: "guide",
         },
         {
-          normalIcon: require("@/assets/image/icon/new-icon/icon_pause_n.svg"),
-          activeIcon: require("@/assets/image/icon/new-icon/icon_pause_n.svg"),
-          name: "自动导览",
+          normalIcon: require("@/assets/image/icon/new-icon/icon_play.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_play.png"),
+          name: "暂停",
           action: "pause",
           type: "guide",
         },
@@ -357,8 +360,8 @@ export default {
         //   type: "tour",
         // },
         {
-          normalIcon: require("@/assets/image/icon/new-icon/icon_detail.svg"),
-          activeIcon: require("@/assets/image/icon/new-icon/icon_detail_active.svg"),
+          normalIcon: require("@/assets/image/icon/new-icon/icon_point.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_point_active.png"),
           name: "热点列表",
           type: "hots",
         },
@@ -418,7 +421,7 @@ export default {
           handler: () => {
             if (!this.openType) {
               this.openType = 'immersive'
-              this.setData({ showGuide: true, guideIsPlay: false, isCollapse: true });
+              this.setData({ showGuide: true, guideIsPlay: true, isCollapse: false });
               if (!this.tourList.length) {
                 this.tourList = window.player ? player?.model?.heroLocations : [];
               }
@@ -428,8 +431,8 @@ export default {
       ],
       mobileBottomBtns: [
         {
-          normalIcon: require("@/assets/image/icon/new-icon/icon_detail.svg"),
-          activeIcon: require("@/assets/image/icon/new-icon/icon_detail_active.svg"),
+          normalIcon: require("@/assets/image/icon/new-icon/icon_point.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_point_active.png"),
           name: "热点列表",
           type: "hots",
         },
@@ -453,7 +456,7 @@ export default {
         },
         {
           normalIcon: require("@/assets/image/icon_play.png"),
-          activeIcon: require("@/assets/image/icon/new-icon/icon_pause_n.svg"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_play.png"),
           name: "自动导览",
           action: "play",
           type: "controls",
@@ -600,7 +603,7 @@ export default {
           this.openType = type;
 
           if (type === 'immersive') {
-            this.setData({ showGuide: true, isCollapse: true });
+            this.setData({ showGuide: true, isCollapse: false, guideIsPlay: true });
             if (!this.tourList.length) {
               this.tourList = window.player ? player?.model?.heroLocations : [];
             }
@@ -1037,7 +1040,7 @@ export default {
     right: 6px;
   }
 }
-@mobileIconSize: 1.1733rem;
+@mobileIconSize: 44px;
 
 .mobile-top-button {
   width: @mobileIconSize;
@@ -1101,6 +1104,16 @@ export default {
         display: block;
       }
     }
+    &.pause {
+      background-image: url('../../assets/image/icon/new-icon/mb-icon-play.png');
+      background-repeat: no-repeat;
+      background-size: cover;
+      animation: mobile-play 2s steps(48) infinite;
+
+      img {
+        display: none !important;
+      }
+    }
   }
 }
 .left-btn {
@@ -1261,7 +1274,7 @@ export default {
   align-items: center;
   justify-content: flex-start;
   position: absolute;
-  left: 23%;
+  left: 206px;
   bottom: 40px;
   transition: bottom linear 0.2s;
 
@@ -1280,6 +1293,17 @@ export default {
     }
   }
   .button-item2 {
+    &.pause {
+      width: 56px;
+      height: 56px;
+      background-image: url('../../assets/image/icon/new-icon/icon_play.png');
+      background-repeat: no-repeat;
+      animation: play 2s steps(48) infinite;
+
+      img {
+        display: none;
+      }
+    }
     .tip-box {
       display: none;
       position: absolute;
@@ -1324,6 +1348,23 @@ export default {
   }
 }
 
+@keyframes play {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -2688px 0;
+  }
+}
+@keyframes mobile-play {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -2112px 0;
+  }
+}
+
 // 移动端
 @media screen and (max-width: 1000px) {
   .hoverTit {