|
|
@@ -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>
|
