feat

hot/public/config/config.json

@@ -0,0 +1,8 @@
+{
+  "KJ-t-tHpdpKvb0ew": {
+    "hotBgColor": {
+      "rightColor": "",
+      "leftColor": ""
+    }
+  }
+}

hot/src/views/Home.vue

@@ -12,21 +12,23 @@
       <!-- 下面的文字介绍 -->
 
       <div class="flooTxt" :class="{ flooTxtOne: oneTxt, hideText: hideText }">
-        <!-- <div class="close-btn" @click="hideText = !hideText"><span v-if="hideText">展开</span><span v-else>收起</span></div> -->
-        <div class="num" v-if="flooTab.length === 1 && data[myType] && data[myType].length && data[myType].length > 1">{{ myInd + 1 }} / {{ data[myType].length }}</div>
-        <div class="flooTxtBox">
-          <div class="myTitle">{{ myTitle }}</div>
-          <!-- <div class="line"></div> -->
-          <!-- 视频的介绍 -->
-          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
-            {{ videoTxt[myInd] }}
-          </div>
-          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
-            {{ imgTxt[myInd] }}
+        <div class="scroll-box">
+          <!-- <div class="close-btn" @click="hideText = !hideText"><span v-if="hideText">展开</span><span v-else>收起</span></div> -->
+          <div class="num" v-if="flooTab.length === 1 && data[myType] && data[myType].length && data[myType].length > 1">{{ myInd + 1 }} / {{ data[myType].length }}</div>
+          <div class="flooTxtBox">
+            <div class="myTitle">{{ myTitle }}</div>
+            <!-- <div class="line"></div> -->
+            <!-- 视频的介绍 -->
+            <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
+              {{ videoTxt[myInd] }}
+            </div>
+            <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
+              {{ imgTxt[myInd] }}
+            </div>
+            <div class="myTxt" v-html="myTxt"></div>
           </div>
-          <div class="myTxt" v-html="myTxt"></div>
+          <div class="pic"></div>
         </div>
-        <div class="pic"></div>
       </div>
       <div class="mainCon" v-show="!oneTxt">
         <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>
@@ -178,6 +180,11 @@ export default {
       this.lookPics = [url];
       this.dom.show();
     },
+    async getConfig() {
+      let url = `./config/config.json`;
+      let result = (await this.$http.get(url));
+      console.error(result)
+    },
     async getData() {
       // https://www.4dmodel.com/
 
@@ -234,11 +241,22 @@ export default {
   },
   mounted() {
     this.getData();
+    this.getConfig()
   },
 };
 </script>
 
 <style lang="less" scoped>
+::-webkit-scrollbar {
+  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+}
+::-webkit-scrollbar-thumb {
+  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #edd3b0;
+  border-color: #edd3b0;
+  color: #edd3b0;
+  outline: none;
+}
 .home {
   .viewerCla img {
     display: none;
@@ -315,7 +333,7 @@ export default {
       &::before {
         content: "";
         width: 35px;
-        height: 768px;
+        height: 100%;
         background: url(../assets/images/pc/Vector1.png) no-repeat;
         background-size: 100% 100%;
         position: absolute;
@@ -430,15 +448,23 @@ export default {
       // width: 566px;
 
       width: 50%;
-      height: 100%;
-      // position: absolute;
-      // right: 0;
-      // top: 0;
-      padding: 71px 94px 30px 258px;
-      // background: linear-gradient(138deg, rgba(33, 28, 21, 0.9) 27.8%, rgba(90, 78, 61, 0.9) 97.76%);
+      // height: 100%;
+      // padding: 71px 94px 30px 258px;
+      height: 70vh;
+      padding: 0 5% 0 8%;
+
       box-sizing: border-box;
       transition: transform 0.3s;
       transform: translateX(0);
+      display: flex;
+      align-items: center;
+      .scroll-box {
+        width: 100%;
+        max-height: 100%;
+        overflow: auto;
+        // display: flex;
+        // align-items: center;
+      }
       .num {
         display: none;
       }
@@ -471,13 +497,12 @@ export default {
       }
       .flooTxtBox {
         width: 100%;
-        height: 100%;
-        // overflow-y: auto;
-        // overflow-x: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
+        // height: 100%;
+
+        // display: flex;
+        // align-items: center;
+        // justify-content: center;
+        // flex-direction: column;
         .myTitle {
           font-size: 24px;
           color: #ffffff;

scene/src/assets/image/icon/new-icon/icon_down.svg

@@ -0,0 +1,13 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon_down">
+<g id="Mask group">
+<path id="Vector 97" d="M31 21L18 21L24.5 28.8928L31 21Z" stroke="#C7A770" stroke-width="2" stroke-linejoin="round"/>
+<mask id="mask0_319_4980" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="17" y="20" width="15" height="10">
+<path id="Vector 98" d="M31 21L18 21L24.5 28.8928L31 21Z" stroke="#C7A770" stroke-width="2" stroke-linejoin="round"/>
+</mask>
+<g mask="url(#mask0_319_4980)">
+<rect id="Rectangle 474" x="13" y="25" width="21" height="10" fill="#A88959"/>
+</g>
+</g>
+</g>
+</svg>

scene/src/assets/image/icon/new-icon/icon_pause.svg

@@ -0,0 +1,14 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon_play">
+<rect id="Rectangle 469" x="19" y="17" width="4" height="19" rx="2" fill="#C7A770"/>
+<rect id="Rectangle 470" x="31" y="17" width="4" height="19" rx="2" fill="#C7A770"/>
+<g id="Mask group">
+<mask id="mask0_313_2562" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="17" width="16" height="19">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M21 17C19.8954 17 19 17.8954 19 19V34C19 35.1046 19.8954 36 21 36C22.1046 36 23 35.1046 23 34V19C23 17.8954 22.1046 17 21 17ZM33 17C31.8954 17 31 17.8954 31 19V34C31 35.1046 31.8954 36 33 36C34.1046 36 35 35.1046 35 34V19C35 17.8954 34.1046 17 33 17Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_313_2562)">
+<rect id="Rectangle 466" x="14" y="27" width="30" height="17" fill="#A88959"/>
+</g>
+</g>
+</g>
+</svg>

scene/src/assets/image/icon/new-icon/icon_play(1).svg

@@ -0,0 +1,14 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon_play">
+<rect id="Rectangle 469" x="19" y="17" width="4" height="19" rx="2" fill="#C7A770"/>
+<rect id="Rectangle 470" x="31" y="17" width="4" height="19" rx="2" fill="#C7A770"/>
+<g id="Mask group">
+<mask id="mask0_313_2562" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="17" width="16" height="19">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M21 17C19.8954 17 19 17.8954 19 19V34C19 35.1046 19.8954 36 21 36C22.1046 36 23 35.1046 23 34V19C23 17.8954 22.1046 17 21 17ZM33 17C31.8954 17 31 17.8954 31 19V34C31 35.1046 31.8954 36 33 36C34.1046 36 35 35.1046 35 34V19C35 17.8954 34.1046 17 33 17Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_313_2562)">
+<rect id="Rectangle 466" x="14" y="27" width="30" height="17" fill="#A88959"/>
+</g>
+</g>
+</g>
+</svg>

scene/src/assets/image/icon/new-icon/icon_play.svg

@@ -0,0 +1,17 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon_play">
+<g id="Rectangle 5">
+<rect x="1" y="1" width="54" height="54" rx="27" fill="#373635" fill-opacity="0.6"/>
+<rect x="0.5" y="0.5" width="55" height="55" rx="27.5" stroke="#805454" stroke-opacity="0.6"/>
+</g>
+<path id="Vector 91" d="M22 18.238V37.762C22 39.4523 23.9667 40.3804 25.2714 39.3059L37.1253 29.5439C38.0968 28.7438 38.0968 27.2562 37.1253 26.4561L25.2714 16.6941C23.9667 15.6196 22 16.5477 22 18.238Z" fill="#C7A770"/>
+<g id="Mask group">
+<mask id="mask0_313_2561" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="22" y="16" width="16" height="24">
+<path id="Vector 92" d="M22 18.238V37.762C22 39.4523 23.9667 40.3804 25.2714 39.3059L37.1253 29.5439C38.0968 28.7438 38.0968 27.2562 37.1253 26.4561L25.2714 16.6941C23.9667 15.6196 22 16.5477 22 18.238Z" fill="#C7A770"/>
+</mask>
+<g mask="url(#mask0_313_2561)">
+<rect id="Rectangle 466" x="15" y="28" width="30" height="17" fill="#A88959"/>
+</g>
+</g>
+</g>
+</svg>

scene/src/assets/image/icon/new-icon/icon_resume.svg

@@ -0,0 +1,13 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon_play">
+<path id="Vector 91" d="M21 17.238V36.762C21 38.4523 22.9667 39.3804 24.2714 38.3059L36.1253 28.5439C37.0968 27.7438 37.0968 26.2562 36.1253 25.4561L24.2714 15.6941C22.9667 14.6196 21 15.5477 21 17.238Z" fill="#C7A770"/>
+<g id="Mask group">
+<mask id="mask0_321_5007" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="21" y="15" width="16" height="24">
+<path id="Vector 92" d="M21 17.238V36.762C21 38.4523 22.9667 39.3804 24.2714 38.3059L36.1253 28.5439C37.0968 27.7438 37.0968 26.2562 36.1253 25.4561L24.2714 15.6941C22.9667 14.6196 21 15.5477 21 17.238Z" fill="#C7A770"/>
+</mask>
+<g mask="url(#mask0_321_5007)">
+<rect id="Rectangle 466" x="14" y="27" width="30" height="17" fill="#A88959"/>
+</g>
+</g>
+</g>
+</svg>

scene/src/store/index.js

@@ -7,6 +7,10 @@ const store = new Vuex.Store({
   state: {
     panoId: 0,
     points: null,
+    
+    showGuide: false,
+    guideIsPlay: false,
+    guideIsPlay: false,
   },
   getters: {
     points(state) {
@@ -15,6 +19,12 @@ const store = new Vuex.Store({
     panoId(state) {
       return state.panoId;
     },
+    showGuide(state) {
+      return state.showGuide;
+    },
+    guideIsPlay(state) {
+      return state.guideIsPlay;
+    },
   },
   mutations: {
     setData(state, payload) {

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

@@ -0,0 +1,318 @@
+<!--  -->
+<template>
+  <div class="guide-list" :class="{ isMobile }" v-click-outside="handleClickOutside">
+    <div class="guide-controls">
+      <div class="item" @click="handleTour">
+        <img v-if="guideIsPlay" class="normal" :src="require(`@/assets/image/icon/new-icon/icon_pause.svg`)" alt="" />
+        <img v-else class="normal" :src="require(`@/assets/image/icon/new-icon/icon_resume.svg`)" alt="" />
+        <div class="tip-box">{{ guideIsPlay ? "暂停" : "播放" }}</div>
+      </div>
+      <div class="item" @click="closeGuide()">
+        <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_down.svg')" alt="" />
+        <div class="tip-box">关闭</div>
+      </div>
+    </div>
+    <!-- <div class="swcon" v-swiper:mySwiper="swiperOption"  ref="floor1Swiper"> -->
+    <div class="swcon" ref="mySwiper">
+      <ul class="swiper-wrapper swiper-wrapper-n">
+        <div class="swiper-slide" :class="{ active: index == activeIndex }" v-for="(i, index) in tourList">
+          <img :src="i.heroLocations[0].thumbUrl" alt="" />
+          <div class="sl-item" :data-v="JSON.stringify({ data: i.heroLocations[0], index })">
+            <span>{{ i.heroLocations[0].name }}</span>
+          </div>
+          {{ index }}
+        </div>
+      </ul>
+    </div>
+
+    <div class="progress-box">
+      <div class="info">
+        <span>{{ activeIndex + 1 }}</span
+        >of<span>{{ tourList.length }}</span>
+      </div>
+      <div class="bar-box"><div :style="`width:${100 / tourList.length}%;left:${(activeIndex * 100) / tourList.length}%;`" class="current-box"></div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ClickOutside from "vue-click-outside";
+// import { directive } from "vue-awesome-swiper";
+import "swiper/css/swiper.css";
+import Swiper from "swiper";
+import { mapGetters, mapMutations } from "vuex";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  // directives: { ClickOutside, swiper: directive },
+  directives: { ClickOutside },
+  props: ["tourList"],
+  data() {
+    //这里存放数据
+    return { activeIndex: 5 };
+  },
+  //监听属性 类似于data概念
+  computed: {
+    ...mapGetters({
+      panoId: "panoId",
+      guideIsPlay: "guideIsPlay",
+    }),
+  },
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    ...mapMutations(["setData", "setPanoOver"]),
+    handleTour() {
+      this.setData({ guideIsPlay: !this.guideIsPlay });
+    },
+    closeGuide() {
+      this.setData({ showGuide: false });
+    },
+    changeGuide(i, index) {
+      console.error(i);
+      this.activeIndex = index;
+    },
+    initSwiper() {
+      new Swiper(this.$refs.mySwiper, {
+        slidesPerView: "auto",
+        autoplay: false,
+        mousewheel: true,
+        spaceBetween: 0,
+        freeMode: true,
+        centeredSlides: true,
+        slideToClickedSlide: true,
+        centerInsufficientSlides: true,
+        centeredSlidesBounds: true,
+        on: {
+          slideChangeTransitionEnd: function () {
+            // that.mbactive = this.realIndex;
+          },
+          click: (event) => {
+            if (event.target.getAttribute("data-v")) {
+              // 这里的 obj 就是当前点击图片所对应的信息
+
+              let { index, data } = JSON.parse(event.target.getAttribute("data-v"));
+              console.error(data, index);
+              this.activeIndex = index;
+              // let { panoId, quaternion } = data.heroLocations[0];
+              let { panoId, quaternion } = data;
+              // player.model.heroLocations里的那些item
+              player.blackToPano({ pano: player.model.panos.get(panoId), quaternion: new THREE.Quaternion(quaternion._x, quaternion._y, quaternion._z, quaternion._w) });
+            }
+          },
+        },
+      });
+    },
+    goScene(item) {
+      // let { panoId, quaternion } = heroLocation;
+      // // player.model.heroLocations里的那些item
+      // player.flyToPano({ pano: player.model.panos.get(panoId), quaternion });
+    },
+    handleClickOutside() {
+      this.$emit("close");
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.initSwiper();
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+//@import url(); 引入公共css类
+
+.guide-list {
+  width: 100%;
+
+  // height: 153px;
+  background: rgba(55, 54, 53, 0.6);
+  position: absolute;
+  bottom: 0;
+  left: 0%;
+  z-index: 10001;
+  padding: 12px 20px 8px 4px;
+  .guide-controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: absolute;
+    left: 20px;
+    bottom: 180px;
+    background: rgba(55, 54, 53, 0.6);
+    border-radius: 30px;
+    border: 1px solid rgba(128, 84, 84, 0.6);
+    .item {
+      width: 54px;
+      height: 54px;
+      cursor: pointer;
+      // margin-right: 25px;
+      position: relative;
+      &:hover {
+        .tip-box {
+          display: block;
+        }
+      }
+      .tip-box {
+        display: none;
+        position: absolute;
+        top: -38px;
+        left: 50%;
+        transform: translateX(-50%);
+        white-space: nowrap;
+        height: 29px;
+        color: #fff;
+        text-align: center;
+        line-height: 29px;
+        background: rgba(55, 54, 53, 0.6);
+        border: 1px solid #fff;
+        border-radius: 6px;
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        padding: 0 8px;
+      }
+      &:first-of-type {
+        &::after {
+          position: absolute;
+
+          content: "";
+          width: 1px;
+          height: 36px;
+
+          background: linear-gradient(180deg, rgba(199, 167, 112, 0), rgba(199, 167, 112, 1), rgba(199, 167, 112, 0));
+          right: -0.5px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+  }
+  .progress-box {
+    margin-top: 7px;
+    padding: 0 0 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .info {
+      font-size: 12px;
+      span {
+        &:nth-of-type(1) {
+          margin-right: 3px;
+        }
+        &:nth-of-type(2) {
+          margin-left: 3px;
+        }
+      }
+    }
+    .bar-box {
+      flex: 1;
+      height: 5px;
+      background: rgba(0, 0, 0, 0.46);
+      border-radius: 50px 50px 50px 50px;
+      margin-left: 16px;
+      overflow: hidden;
+      position: relative;
+      .current-box {
+        // width: 66px;
+        height: 3px;
+        background: #a88959;
+        border-radius: 10px 10px 10px 10px;
+        opacity: 0.5;
+        position: absolute;
+        left: 0%;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: left 0.3s;
+      }
+    }
+  }
+
+  .swcon {
+    height: 100%;
+  }
+  .swiper-wrapper {
+    height: 100%;
+    .swiper-slide {
+      display: inline-block;
+      width: 156px;
+      height: 110px;
+      border-radius: 10px;
+      cursor: pointer;
+      overflow: hidden;
+      position: relative;
+      margin-left: 16px;
+      pointer-events: auto;
+      border-radius: 8px;
+      &.active {
+        border: 2px solid rgba(199, 167, 112, 1);
+      }
+      img {
+        width: 100%;
+      }
+      .sl-item {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding-bottom: 13px;
+        font-size: 14px;
+        color: #fff;
+      }
+      // &.active {
+      //   .sl-item {
+      //     background: rgba(0, 0, 0, 0.4);
+      //   }
+      // }
+    }
+  }
+  &.isMobile {
+    height: 2.6667rem;
+    padding: 0.2667rem;
+    bottom: 0;
+    left: 0;
+    margin-left: 0;
+    width: 100%;
+    .tour-controls {
+      width: 2.9333rem;
+      height: 0.6133rem;
+      align-items: center;
+      justify-content: center;
+      top: -0.6133rem;
+      span {
+        font-size: 0.32rem;
+        color: rgba(179, 152, 105, 1);
+      }
+      i {
+        width: 0.28rem;
+        height: 0.1733rem;
+        background: url(../../../assets/image/icon/new-icon/icon_down-2.png) no-repeat;
+        background-size: 100% 100%;
+        margin-left: 5px;
+      }
+    }
+    .swiper-wrapper {
+      .swiper-slide {
+        width: 31%;
+        margin-left: 0.2667rem;
+        .sl-item {
+          font-size: 0.32rem;
+        }
+      }
+    }
+  }
+}
+</style>

scene/src/views/gui/menu.vue

@@ -145,11 +145,28 @@
       </transition>
     </template>
 
+    <!-- 自动导览 -->
+    <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" />
+    </transition>
+
+    <!-- 导览底部进度 -->
+
+    <div class="guide-progress" v-if="!showGuide && guideIsPlay">
+      <div class="progress-box">
+        <div class="info">
+          <span>{{ 1 }}</span
+          >of<span>{{ tourList.length }}</span>
+        </div>
+        <div class="bar-box"><div :style="`width:${100 / tourList.length}%;left:${(activeIndex * 100) / tourList.length}%;`" class="current-box"></div></div>
+      </div>
+    </div>
+
     <!-- 小地图控制按钮 -->
     <div class="minimap-controls" :class="{ open: !miniMapStatus, mobile: isMobile }" @click="toggleMiniMap"></div>
     <template v-if="!isMobile">
       <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
-        <div v-show="openType != 'immersive'" class="left-btn">
+        <div v-show="openType != 'immersive' && !showGuide" class="left-btn" :class="{}">
           <div class="button-item" :class="getActive(i.type)" v-if="i.type == 'model' || mode == 'panorama'" v-for="(i, index) in leftButtons" @click.stop="hanlderButtons(i, i.type)">
             <img class="normal" :src="i.normalIcon" alt="" />
             <img class="active" :src="i.activeIcon" alt="" />
@@ -157,6 +174,7 @@
           </div>
         </div>
       </transition>
+      <!-- 沉浸式看展按钮 -->
 
       <div class="kanzhan-btns">
         <transition name="preScene">
@@ -207,7 +225,7 @@
     </template>
     <!-- 音乐按钮 -->
     <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
-      <div class="right-btn" :class="{ mobile: isMobile }">
+      <div v-show="!showGuide" class="right-btn" :class="{ mobile: isMobile }">
         <div id="bgm" class="button-item" :class="getActive(i.type)" v-for="(i, index) in rightButtons">
           <img class="normal" id="openMusic" :src="i.normalIcon" alt="" @click="switchBGM(false)" />
           <img class="active" id="closeMusic" :src="i.activeIcon" alt="" @click="switchBGM(true)" />
@@ -227,13 +245,14 @@
 <script>
 import HotList from "./components/hotList.vue";
 import TourList from "./components/tourList.vue";
+import Guide from "./components/guide.vue";
 import LayerMap from "./components/layerMap.vue";
 import Share from "./components/share.vue";
 import { directive } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
 import { mapGetters, mapMutations } from "vuex";
 export default {
-  components: { HotList, TourList, LayerMap, Share },
+  components: { HotList, TourList, LayerMap, Guide, Share },
   directives: {
     swiper: directive,
   },
@@ -242,6 +261,7 @@ export default {
   },
   data() {
     return {
+      loaded: false,
       miniMapStatus: true,
       isRoute: true,
       mode: "panorama",
@@ -295,6 +315,12 @@ export default {
           name: "沉浸看展",
           type: "immersive",
         },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_play.svg"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_play.svg"),
+          name: "自动导览",
+          type: "guide",
+        },
       ],
       rightButtons: [
         {
@@ -362,6 +388,8 @@ export default {
   computed: {
     ...mapGetters({
       points: "points",
+      showGuide: "showGuide",
+      guideIsPlay: "guideIsPlay",
     }),
   },
   mounted() {
@@ -377,6 +405,7 @@ export default {
       //   console.error(window.bus)
       // }, 100);
       window.addEventListener("playerAndModelReady", () => {
+        this.loaded = true;
         player.on("flying.ended", () => {
           this.mode = player.mode;
           if (this.mode == "dollhouse") {
@@ -434,6 +463,16 @@ export default {
       }
 
       switch (item.type) {
+        case "guide":
+          if (this.guideIsPlay) {
+            this.setData({ guideIsPlay: false });
+            return;
+          }
+          this.setData({ showGuide: true, guideIsPlay: true });
+          if (!this.tourList.length) {
+            this.tourList = window.player ? player?.model?.heroLocations2 : [];
+          }
+          break;
         case "model":
           if (player.mode == "dollhouse") {
             player.FlyToMode("panorama");
@@ -597,6 +636,7 @@ export default {
   color: #edd3b0;
   outline: none;
 }
+
 // 鼠标移入显示的文字和图片
 #gui-modes-inside {
   position: relative;
@@ -766,6 +806,57 @@ export default {
 .viewContainer {
   padding: 10px 20px 0 34px;
 }
+.guide-progress {
+  width: 100%;
+  height: 12px;
+  background: rgba(55, 54, 53, 0.6);
+  border-radius: 5px 5px 5px 5px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 20px;
+  .progress-box {
+    width: 100%;
+    // margin-top: 7px;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .info {
+      font-size: 12px;
+      transform: scale(0.8);
+      span {
+        &:nth-of-type(1) {
+          margin-right: 3px;
+        }
+        &:nth-of-type(2) {
+          margin-left: 3px;
+        }
+      }
+    }
+    .bar-box {
+      flex: 1;
+      height: 5px;
+      background: rgba(0, 0, 0, 0.46);
+      border-radius: 50px 50px 50px 50px;
+      margin-left: 16px;
+      overflow: hidden;
+      position: relative;
+      .current-box {
+        // width: 66px;
+        height: 3px;
+        background: #a88959;
+        border-radius: 10px 10px 10px 10px;
+        opacity: 0.5;
+        position: absolute;
+        left: 0%;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: left 0.3s;
+      }
+    }
+  }
+}
 @iconW: 56px;
 @icomarginRight: 25px;
 .minimap-controls {
@@ -864,6 +955,11 @@ export default {
   position: absolute;
   left: 44px;
   bottom: 40px;
+  transition: bottom 0.3s;
+  &.hide {
+    display: none;
+  }
+
   .button-item {
     width: @iconW;
     height: @iconW;
@@ -916,6 +1012,7 @@ export default {
     }
   }
 }
+
 .right-btn {
   display: flex;
   align-items: center;
@@ -923,9 +1020,13 @@ export default {
   position: absolute;
   right: 44px;
   bottom: 40px;
+  &.hide {
+    display: none;
+  }
+
   .button-item {
-    width: @iconW;
-    height: @iconW;
+    // width: @iconW;
+    // height: @iconW;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -934,6 +1035,8 @@ export default {
     position: relative;
     img {
       display: none;
+      width: @iconW;
+      height: @iconW;
     }
     .tip-box {
       display: none;