feat: .

scene/src/components/hotspot/image.vue

@@ -1,38 +1,37 @@
 <template>
-    <div v-if="!isMobile" class="images" >
-      <div class="title" v-html="hotspot.title"></div>
-      <div class="img-con">
-        <span v-if="hotspot.images.length>1" @click="handlePage('prev')" >
-          <img :src="require('@/assets/images/project/prev.png')" alt="">
-        </span>
-        <img v-viewer :src="g_dealUrl(hotspot.images[active])" alt="">
-        <span v-if="hotspot.images.length>1" @click="handlePage('next')">
-          <img :src="require('@/assets/images/project/next.png')" alt="">
-        </span>
-        <ul class="pagna">
-          <li v-for="(item,i) in hotspot.images" :class="{active:i==active}" :key="i"></li>
-        </ul>
-      </div>
-      <div class="desc" v-html="hotspot.content">
-      </div>
+  <div v-if="!isMobile" class="images">
+    <div class="title" v-html="hotspot.title"></div>
+    <div class="img-con">
+      <span v-if="hotspot.images.length > 1" @click="handlePage('prev')">
+        <img :src="require('@/assets/images/project/prev.png')" alt="" />
+      </span>
+      <img v-viewer :src="g_dealUrl(hotspot.images[active])" alt="" />
+      <span v-if="hotspot.images.length > 1" @click="handlePage('next')">
+        <img :src="require('@/assets/images/project/next.png')" alt="" />
+      </span>
+      <ul class="pagna">
+        <li v-for="(item, i) in hotspot.images" :class="{ active: i == active }" :key="i"></li>
+      </ul>
     </div>
-    <div v-else class="mbimages" >
-      <div class="title" v-html="hotspot.title"></div>
-      <div class="swcon" v-swiper:mySwiper="swiperOption">
-        <ul class="swiper-wrapper swiper-wrapper-n">
-          <div class="swiper-slide" v-for="(item,index) in hotspot.images" :key="index">
-            <div class="sl-item">
-              <img v-viewer :src="g_dealUrl(item)">
-            </div>
+    <div class="desc" v-html="hotspot.content"></div>
+  </div>
+  <div v-else class="mbimages">
+    <div class="title" v-html="hotspot.title"></div>
+    <div class="swcon" v-swiper:mySwiper="swiperOption">
+      <ul class="swiper-wrapper swiper-wrapper-n">
+        <div class="swiper-slide" v-for="(item, index) in hotspot.images" :key="index">
+          <div class="sl-item">
+            <img v-viewer :src="g_dealUrl(item)" />
           </div>
-        </ul>
-        <div class="swiper-pagination pagination" slot="pagination"></div>
-      </div>
-   
-      <div v-if="hotspot.content" class="desc">
-        <div v-html="hotspot.content"></div>
-      </div>
+        </div>
+      </ul>
+      <div class="swiper-pagination pagination" slot="pagination"></div>
     </div>
+
+    <div v-if="hotspot.content" class="desc">
+      <div v-html="hotspot.content"></div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -44,68 +43,66 @@ export default {
   directives: {
     swiper: directive,
   },
-  props:['hotspot'],
-  data(){
+  props: ["hotspot"],
+  data() {
     return {
-      active:0,
-      mbactive:0
-    }
+      active: 0,
+      mbactive: 0,
+    };
   },
-  methods:{
-    handlePage(type){
-    if (type==='next') {
-      console.log(this.hotspot.images.length);
-      if (this.active>=this.hotspot.images.length - 1) {
-          this.active = 0
-          return
-      }
-      this.active += 1
-    }
-    else{
-      if (this.active==0) {
-          this.active = this.hotspot.images.length - 1
-          return
+  methods: {
+    handlePage(type) {
+      if (type === "next") {
+        console.log(this.hotspot.images.length);
+        if (this.active >= this.hotspot.images.length - 1) {
+          this.active = 0;
+          return;
+        }
+        this.active += 1;
+      } else {
+        if (this.active == 0) {
+          this.active = this.hotspot.images.length - 1;
+          return;
+        }
+        this.active -= 1;
       }
-      this.active -= 1
-    }
-    
+    },
   },
-  },
-  computed:{
+  computed: {
     swiperOption() {
-      let that = this
+      let that = this;
       return {
-        slidesPerView: 'auto',
+        slidesPerView: "auto",
         autoplay: false,
         centeredSlides: true,
         watchSlidesProgress: true,
-        loop: this.hotspot.images.length>1,
+        loop: this.hotspot.images.length > 1,
         pagination: {
-          el: '.swiper-pagination'
+          el: ".swiper-pagination",
         },
-        on:{
-          slideChangeTransitionEnd:function () {
-            that.mbactive = this.realIndex
-          }
-        }
-      }
-    }
-  }
-}
+        on: {
+          slideChangeTransitionEnd: function () {
+            that.mbactive = this.realIndex;
+          },
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.noshow{
-  opacity: 0!important;;
-  pointer-events: none!important;;
+.noshow {
+  opacity: 0 !important;
+  pointer-events: none !important;
 }
 
-.images{
+.images {
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   text-align: center;
-  .title{
+  .title {
     max-width: 94%;
     padding: 8px 60px;
     display: inline-block;
@@ -114,18 +111,18 @@ export default {
     font-size: 30px;
     min-height: 60px;
     // line-height: 60px;
-    background: #0054A7;
+    background: #0054a7;
     border-radius: 60px;
     margin: 45px auto;
   }
-  .img-con{
+  .img-con {
     display: flex;
     justify-content: space-around;
     align-items: center;
     position: relative;
     padding-bottom: 40px;
-    >span{
-      @juli:68px;
+    > span {
+      @juli: 68px;
       display: inline-block;
       font-size: 0;
       width: 70px;
@@ -134,40 +131,40 @@ export default {
       left: @juli;
       top: 50%;
       transform: translateY(-50%);
-      >img{
+      > img {
         width: 100%;
       }
-      &:last-of-type{
+      &:last-of-type {
         left: unset;
         right: @juli;
       }
     }
-    >img{
+    > img {
       max-width: 1200px;
       max-height: 650px;
       cursor: pointer;
     }
-    .pagna{
+    .pagna {
       position: absolute;
       bottom: 0;
       text-align: center;
       z-index: 999;
-      >li{
+      > li {
         width: 60px;
         height: 6px;
-        background: #0054A7;
+        background: #0054a7;
         display: inline-block;
         margin: 0 4px;
-        &.active{
-          background: #00F3FF;
+        &.active {
+          background: #00f3ff;
         }
       }
     }
   }
-  .desc{
+  .desc {
     max-width: 1000px;
     margin: 20px auto 0;
-    color: #00F3FF;
+    color: #00f3ff;
     text-align: left;
     line-height: 1.5;
     max-height: 250px;
@@ -176,39 +173,39 @@ export default {
   }
 }
 
-@position:62px;
-.mbimages{
+@position: 62px;
+.mbimages {
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: 100% calc(100% + @position);
   background-position: 0 -@position;
   text-align: center;
-  .title{
+  .title {
     width: 90%;
     padding: 10px 20px;
     display: inline-block;
     color: #fff;
     font-weight: bold;
     font-size: 18px;
-    background: #0054A7;
+    background: #0054a7;
     border-radius: 44px;
     margin: 20px auto;
   }
-  .swcon{
+  .swcon {
     position: relative;
     padding-bottom: 30px;
     .swiper-wrapper {
       height: 70vh;
       padding: 0;
-      .swiper-slide  {
+      .swiper-slide {
         width: 100%;
         transform-style: preserve-3d;
         position: relative;
         height: 100%;
         margin: 0;
-        transform:translate3d(0,0,0);
-        .sl-item{
+        transform: translate3d(0, 0, 0);
+        .sl-item {
           position: absolute;
           top: 0;
           left: 0;
@@ -218,7 +215,7 @@ export default {
           display: flex;
           align-items: center;
           justify-content: center;
-          >img{
+          > img {
             max-width: 100%;
             max-height: 100%;
           }
@@ -226,35 +223,35 @@ export default {
       }
     }
 
-    .pagination{
+    .pagination {
       position: absolute;
       bottom: 5px;
-      & /deep/ .swiper-pagination-bullet,& /deep/ .swiper-pagination-bullet-active{
-          width: 40px!important;
-          height: 4px!important;
-          background: #005AFF!important;
-          display: inline-block!important;
-          margin: 0 4px!important;
-          border-radius: 0;
-          opacity: 1;
+      & /deep/ .swiper-pagination-bullet,
+      & /deep/ .swiper-pagination-bullet-active {
+        width: 40px !important;
+        height: 4px !important;
+        background: #005aff !important;
+        display: inline-block !important;
+        margin: 0 4px !important;
+        border-radius: 0;
+        opacity: 1;
       }
-      & /deep/ .swiper-pagination-bullet-active{
-          background: #00F3FF!important;
+      & /deep/ .swiper-pagination-bullet-active {
+        background: #00f3ff !important;
       }
     }
   }
-  
-  
-  .desc{
-    color: #00F3FF;
+
+  .desc {
+    color: #00f3ff;
     text-align: left;
     width: 85%;
     margin: 20px auto 0;
-    p{
+    p {
       font-size: 16px;
       font-weight: bold;
     }
-    div{
+    div {
       font-size: 14px;
       margin-top: 10px;
       line-height: 1.5;
@@ -263,6 +260,4 @@ export default {
     }
   }
 }
-
-
-</style>
+</style>

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

@@ -9,7 +9,7 @@
       <ul class="swiper-wrapper swiper-wrapper-n">
         <div class="swiper-slide" v-for="(i, index) in tourList">
           <img :src="i.heroLocations[0].thumbUrl" alt="" />
-          <div class="sl-item">
+          <div class="sl-item" :data-v="JSON.stringify(i)">
             <span>{{ i.heroLocations[0].name }}</span>
           </div>
         </div>
@@ -50,6 +50,16 @@ export default {
           slideChangeTransitionEnd: function () {
             // that.mbactive = this.realIndex;
           },
+          click: (event) => {
+            if (event.target.getAttribute("data-v")) {
+              // 这里的 obj 就是当前点击图片所对应的信息
+              let data = JSON.parse(event.target.getAttribute("data-v"));
+              // console.error(data);
+              let { panoId, quaternion } = data.heroLocations[0];
+              // player.model.heroLocations里的那些item
+              player.flyToPano({ pano: player.model.panos.get(panoId), quaternion });
+            }
+          },
         },
       };
     },
@@ -58,6 +68,12 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    goScene(item) {
+      console.error(1);
+      // let { panoId, quaternion } = heroLocation;
+      // // player.model.heroLocations里的那些item
+      // player.flyToPano({ pano: player.model.panos.get(panoId), quaternion });
+    },
     handleClickOutside() {
       this.$emit("close");
     },
@@ -127,6 +143,7 @@ export default {
       overflow: hidden;
       position: relative;
       margin-left: 16px;
+      pointer-events: auto;
       img {
         width: 100%;
       }

scene/src/views/gui/menu.vue

@@ -152,7 +152,7 @@
     </transition>
     <div class="kanzhan-btns">
       <transition name="preScene">
-        <div v-show="openType == 'immersive'" @click="player.guide2.go('prev')" class="button-item">
+        <div v-show="openType == 'immersive'" @click="goScene('prev')" class="button-item">
           <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_pre.png')" alt="" />
         </div>
       </transition>
@@ -161,8 +161,8 @@
           <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_mod_active.png')" alt="" />
         </div>
       </transition>
-      <transition name="nextScene"  @click="player.guide2.go('next')" >
-        <div v-show="openType == 'immersive'" class="button-item">
+      <transition name="nextScene" >
+        <div v-show="openType == 'immersive'" class="button-item" @click="goScene('next')">
           <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_next.png')" alt="" />
         </div>
       </transition>
@@ -273,6 +273,9 @@ export default {
     // this.tourList = window.player ? player?.model?.heroLocations : [];
   },
   methods: {
+    goScene(type) {
+      player.guider2.go(type);
+    },
     toggleMiniMap() {
       this.miniMapStatus = !this.miniMapStatus;
       if (this.miniMapStatus) {