|
|
@@ -0,0 +1,373 @@
|
|
|
+<template>
|
|
|
+ <div class="hotspot-home">
|
|
|
+ <button
|
|
|
+ class="close"
|
|
|
+ @click="onClickClose"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/images/close-thin.png"
|
|
|
+ alt="关闭"
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="isShowVideos"
|
|
|
+ class="swiper-wrapper-mine video-wrap"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="swiper-root swiper-root"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="swiper-wrapper"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in hotspotData.video"
|
|
|
+ :key="index"
|
|
|
+ class="swiper-slide"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ ref="video"
|
|
|
+ :src="item.url"
|
|
|
+ controls
|
|
|
+ controlslist="nodownload"
|
|
|
+ disablePictureInPicture
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <div
|
|
|
+ class="swiper-slide"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ ref="video"
|
|
|
+ :src="hotspotData.video[0].url"
|
|
|
+ controls
|
|
|
+ controlslist="nodownload"
|
|
|
+ disablePictureInPicture
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="swiper-slide"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ ref="video"
|
|
|
+ :src="hotspotData.video[0].url"
|
|
|
+ controls
|
|
|
+ controlslist="nodownload"
|
|
|
+ disablePictureInPicture
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="swiper-pagination">
|
|
|
+ <!-- <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span> -->
|
|
|
+ </div>
|
|
|
+ <!-- <div class="swiper-button-prev" />
|
|
|
+ <div class="swiper-button-next" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-show="isShowImages"
|
|
|
+ class="swiper-wrapper-mine image-wrap"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="swiper-root"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-viewer="{
|
|
|
+ button: true,
|
|
|
+ navbar: false,
|
|
|
+ title: false,
|
|
|
+ toolbar: false,
|
|
|
+ tooltip: false,
|
|
|
+ movable: true,
|
|
|
+ zoomable: true,
|
|
|
+ rotatable: true,
|
|
|
+ scalable: true,
|
|
|
+ transition: false,
|
|
|
+ fullscreen: false,
|
|
|
+ keyboard: true,
|
|
|
+ loop: false,
|
|
|
+ }"
|
|
|
+ class="swiper-wrapper"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-for="(item, index) in hotspotData.images"
|
|
|
+ :key="index"
|
|
|
+ v-lazy="item"
|
|
|
+ class="swiper-slide"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="swiper-pagination">
|
|
|
+ <!-- <span
|
|
|
+ class="cur"
|
|
|
+ >
|
|
|
+ {{ currentSlideIdx + 1 }}
|
|
|
+ </span>
|
|
|
+ /
|
|
|
+ <span>
|
|
|
+ {{ hotspotData.Images ? hotspotData.images.length : '' }}
|
|
|
+ </span> -->
|
|
|
+ </div>
|
|
|
+ <div class="swiper-button-prev" />
|
|
|
+ <div class="swiper-button-next" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="title-wrap">
|
|
|
+ <h1
|
|
|
+ :title="hotspotData.title"
|
|
|
+ v-html="hotspotData.title"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p
|
|
|
+ class="desc"
|
|
|
+ v-html="descForShow"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Swiper from 'swiper/swiper-bundle.esm.js'
|
|
|
+import 'swiper/swiper-bundle.css'
|
|
|
+
|
|
|
+// import browser from "@/utils/browser";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ hotspotData: {}, // 热点数据
|
|
|
+ audioUrl: "", //背景音频url
|
|
|
+ isShowImages: false,
|
|
|
+ isShowVideos: false,
|
|
|
+ currentSlideIdx: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ descForShow() {
|
|
|
+ if (this.isShowImages) {
|
|
|
+ return this.hotspotData.imagesDesc[this.currentSlideIdx] || this.hotspotData.content
|
|
|
+ } else if (this.isShowVideos) {
|
|
|
+ return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content
|
|
|
+ } else {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ await this.getData()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const that = this
|
|
|
+ new Swiper('.swiper-root', {
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination',
|
|
|
+ },
|
|
|
+ // navigation: {
|
|
|
+ // nextEl: '.swiper-button-next',
|
|
|
+ // prevEl: '.swiper-button-prev',
|
|
|
+ // },
|
|
|
+
|
|
|
+ on: {
|
|
|
+ // 自动播放
|
|
|
+ afterInit: function (e) {
|
|
|
+ if (that.isShowVideos) {
|
|
|
+ that.$nextTick(() => {
|
|
|
+ that.$refs.video[0].play()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // if (that.typesForShow[vNew].key === 'audio') {
|
|
|
+ // that.$nextTick(() => {
|
|
|
+ // that.$refs['audio-comp'][0].play()
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ slideChange: function(e) {
|
|
|
+ that.currentSlideIdx = e.activeIndex
|
|
|
+
|
|
|
+ // 自动播放
|
|
|
+ if (that.isShowVideos) {
|
|
|
+ for (let index = 0; index < that.$refs.video.length; index++) {
|
|
|
+ if (index !== that.currentSlideIdx) {
|
|
|
+ that.$refs.video[index].pause()
|
|
|
+ } else {
|
|
|
+ that.$refs.video[index].play()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // if (that.typesForShow[vNew].key === 'audio') {
|
|
|
+ // for (let index = 0; index < that.$refs['audio-comp'].length; index++) {
|
|
|
+ // if (index !== that.currentSlideIdx) {
|
|
|
+ // that.$refs['audio-comp'][index].pause()
|
|
|
+ // } else {
|
|
|
+ // that.$refs['audio-comp'][index].play()
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getData() {
|
|
|
+ let url = `https://super.4dage.com/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
|
|
|
+ let result = (await this.$http.get(url)).data
|
|
|
+ this.hotspotData = result[this.$route.query.m]
|
|
|
+ if (!this.hotspotData) {
|
|
|
+ return alert("热点解析错误")
|
|
|
+ }
|
|
|
+ console.log('热点数据：', this.hotspotData)
|
|
|
+
|
|
|
+ this.audioUrl = this.hotspotData["backgroundMusic"]
|
|
|
+
|
|
|
+ if (this.hotspotData.images && this.hotspotData.images.length) {
|
|
|
+ this.isShowImages = true
|
|
|
+ } else if (this.hotspotData.video && this.hotspotData.video.length) {
|
|
|
+ this.isShowVideos = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onClickClose() {
|
|
|
+ window.parent.document.getElementById('closepop').click()
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.hotspot-home {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ > button.close {
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ right: 15px;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-wrapper-mine {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 25%;
|
|
|
+ width: 100%;
|
|
|
+ height: 35.6%;
|
|
|
+ .swiper-root {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ .swiper-wrapper {
|
|
|
+ }
|
|
|
+ .swiper-pagination {
|
|
|
+ position: absolute;
|
|
|
+ top: 100%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ // .swiper-button-prev {
|
|
|
+ // left: calc(-1.67rem - 1.83rem);
|
|
|
+ // width: 1.83rem;
|
|
|
+ // height: 3.58rem;
|
|
|
+ // background-image: url(../assets/images/arrow-left.png);
|
|
|
+ // background-size: contain;
|
|
|
+ // &::after {
|
|
|
+ // content: '';
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .swiper-button-next {
|
|
|
+ // right: calc(-1.67rem - 1.83rem);
|
|
|
+ // width: 1.83rem;
|
|
|
+ // height: 3.58rem;
|
|
|
+ // background-image: url(../assets/images/arrow-right.png);
|
|
|
+ // background-size: contain;
|
|
|
+ // &::after {
|
|
|
+ // content: '';
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-wrapper-mine.video-wrap {
|
|
|
+ .swiper-root {
|
|
|
+ .swiper-wrapper {
|
|
|
+ .swiper-slide {
|
|
|
+ > video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .swiper-wrapper-mine.model-wrap {
|
|
|
+ // .swiper-root {
|
|
|
+ // .swiper-wrapper {
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .swiper-wrapper-mine.audio-wrap {
|
|
|
+ // width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
|
|
|
+ // height: 30rem;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 50%;
|
|
|
+ // top: 50%;
|
|
|
+ // transform: translate(-50%, -70%);
|
|
|
+ // .swiper-root {
|
|
|
+ // width: 100%;
|
|
|
+ // .swiper-wrapper {
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ .swiper-wrapper-mine.image-wrap {
|
|
|
+ .swiper-root {
|
|
|
+ .swiper-wrapper {
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .title-wrap {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ top: 66%;
|
|
|
+ > h1 {
|
|
|
+ padding: 0 26px;
|
|
|
+ white-space: pre;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ position: absolute;
|
|
|
+ left: 24px;
|
|
|
+ right: 24px;
|
|
|
+ bottom: 30px;
|
|
|
+ height: 22%;
|
|
|
+ overflow: auto;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 19px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.swiper-pagination-bullet {
|
|
|
+ opacity: 1;
|
|
|
+ background: #666;
|
|
|
+}
|
|
|
+/deep/.swiper-pagination-bullet-active {
|
|
|
+ background: #a10e0c;
|
|
|
+}
|
|
|
+</style>
|
任一存
