|
|
@@ -19,152 +19,102 @@
|
|
|
>
|
|
|
</button>
|
|
|
|
|
|
- <div class="title-wrapper">
|
|
|
- <h1
|
|
|
- :title="hotspotData.title"
|
|
|
- v-html="hotspotData.title"
|
|
|
- />
|
|
|
+ <h1
|
|
|
+ :title="hotspotData.title"
|
|
|
+ v-html="hotspotData.title"
|
|
|
+ />
|
|
|
+
|
|
|
+ <button class="download">
|
|
|
<img
|
|
|
- src="@/assets/images/title-bottom-line.png"
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/download.png"
|
|
|
alt=""
|
|
|
- class="bottom-line"
|
|
|
+ draggable="false"
|
|
|
>
|
|
|
- </div>
|
|
|
+ <span>
|
|
|
+ Download brochure
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
|
|
|
- <div
|
|
|
- v-if="isShowVideos"
|
|
|
- v-show="!isShowShare"
|
|
|
- class="swiper-wrapper-mine video-wrap"
|
|
|
- >
|
|
|
+ <div class="content-wrapper">
|
|
|
+ <div
|
|
|
+ class="desc"
|
|
|
+ v-html="descForShow"
|
|
|
+ />
|
|
|
<div
|
|
|
- class="swiper-root"
|
|
|
+ class="swiper-wrapper-mine image-wrapper"
|
|
|
>
|
|
|
<div
|
|
|
- class="swiper-wrapper"
|
|
|
+ class="swiper-root"
|
|
|
>
|
|
|
<div
|
|
|
- v-for="(item, index) in hotspotData.video"
|
|
|
- :key="index"
|
|
|
- class="swiper-slide"
|
|
|
+ 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"
|
|
|
>
|
|
|
- <video
|
|
|
- ref="video"
|
|
|
- :src="item.url"
|
|
|
- controls
|
|
|
- controlslist="nodownload"
|
|
|
- disablePictureInPicture
|
|
|
- />
|
|
|
+ <img
|
|
|
+ v-for="(item, index) in hotspotData.images"
|
|
|
+ :key="index"
|
|
|
+ v-lazy="item"
|
|
|
+ class="swiper-slide"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="swiper-pagination" />
|
|
|
+ <!-- <div class="swiper-pagination" />
|
|
|
<div class="swiper-button-prev" />
|
|
|
- <div class="swiper-button-next" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- v-if="isShowModels"
|
|
|
- class="swiper-wrapper-mine model-wrap"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="swiper-root"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="swiper-wrapper"
|
|
|
- >
|
|
|
- <iframe
|
|
|
- v-for="(item, index) in hotspotData.model"
|
|
|
- :key="index"
|
|
|
- :src="item"
|
|
|
- frameborder="0"
|
|
|
- class="swiper-slide"
|
|
|
- />
|
|
|
+ <div class="swiper-button-next" /> -->
|
|
|
</div>
|
|
|
- <div class="swiper-pagination" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div
|
|
|
- v-if="isShowAudios"
|
|
|
- v-show="!isShowShare"
|
|
|
- class="swiper-wrapper-mine audio-wrap"
|
|
|
- >
|
|
|
<div
|
|
|
- class="swiper-root"
|
|
|
+ class="swiper-wrapper-mine video-wrapper"
|
|
|
>
|
|
|
<div
|
|
|
- class="swiper-wrapper"
|
|
|
+ class="swiper-root"
|
|
|
>
|
|
|
<div
|
|
|
- v-for="(item, index) in hotspotData.audio"
|
|
|
- :key="index"
|
|
|
- class="swiper-slide"
|
|
|
+ class="swiper-wrapper"
|
|
|
>
|
|
|
- <audio
|
|
|
- ref="audio"
|
|
|
- :src="item.url"
|
|
|
- controls
|
|
|
- controlslist="nodownload"
|
|
|
- disablePictureInPicture
|
|
|
- />
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in hotspotData.video"
|
|
|
+ :key="index"
|
|
|
+ class="swiper-slide"
|
|
|
+ @click="viewVideo(item)"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ ref="video"
|
|
|
+ :src="item.url"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="icon"
|
|
|
+ src="@/assets/images/play.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="swiper-pagination" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- v-if="isShowImages"
|
|
|
- v-show="!isShowShare"
|
|
|
- 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-pagination" />
|
|
|
<div class="swiper-button-prev" />
|
|
|
- <div class="swiper-button-next" />
|
|
|
+ <div class="swiper-button-next" /> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <menu>
|
|
|
+ <!-- <menu>
|
|
|
<button
|
|
|
v-if="bgAudioUrl"
|
|
|
@click="isBgAudioMuted = !isBgAudioMuted"
|
|
|
@@ -184,58 +134,29 @@
|
|
|
draggable="false"
|
|
|
>
|
|
|
</button>
|
|
|
- <!-- <button @click="onClickLike">
|
|
|
- <img
|
|
|
- class="like"
|
|
|
- src="@/assets/images/like-mobile.png"
|
|
|
- alt=""
|
|
|
- draggable="false"
|
|
|
- >
|
|
|
- <transition name="bubble">
|
|
|
- <div
|
|
|
- v-if="isShowPlusOne"
|
|
|
- class="plus-one"
|
|
|
- >
|
|
|
- +1
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
- </button> -->
|
|
|
- <!-- <button @click="onClickShare">
|
|
|
- <img
|
|
|
- class="share"
|
|
|
- src="@/assets/images/share-mobile.png"
|
|
|
- alt=""
|
|
|
- draggable="false"
|
|
|
- >
|
|
|
- </button> -->
|
|
|
- </menu>
|
|
|
-
|
|
|
- <div class="desc-wrap">
|
|
|
- <div
|
|
|
- class="place-holder"
|
|
|
- @mousedown.prevent
|
|
|
- @touchstart.prevent
|
|
|
- />
|
|
|
- <div class="desc-bg-wrap">
|
|
|
- <div class="top-bar" />
|
|
|
- <div
|
|
|
- class="desc"
|
|
|
- v-html="descForShow"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </menu> -->
|
|
|
|
|
|
<div
|
|
|
- v-if="isShowShare"
|
|
|
- class="share-wrap"
|
|
|
+ v-if="isShowVideoForPlay"
|
|
|
+ class="video-for-play-wrapper"
|
|
|
>
|
|
|
- <img
|
|
|
- v-click-outside.click="closeCode2d"
|
|
|
- src="@/assets/images/code2d.png"
|
|
|
- alt=""
|
|
|
- class="code"
|
|
|
- draggable="false"
|
|
|
+ <button
|
|
|
+ class="close"
|
|
|
+ @click="isShowVideoForPlay = false"
|
|
|
>
|
|
|
+ <img
|
|
|
+ src="@/assets/images/close.png"
|
|
|
+ alt="关闭"
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ <video
|
|
|
+ ref="video-for-play"
|
|
|
+ :src="videoSrcForPlay"
|
|
|
+ controls
|
|
|
+ controlslist="nodownload"
|
|
|
+ disablePictureInPicture
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -243,38 +164,23 @@
|
|
|
<script>
|
|
|
import Swiper from 'swiper/swiper-bundle.esm.js'
|
|
|
import 'swiper/swiper-bundle.css'
|
|
|
-import bgImg from "@/assets/images/bg.png"
|
|
|
import { deepProcess } from "@/utils/other.js"
|
|
|
-// import browser from "@/utils/browser";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
hotspotData: {}, // 热点数据
|
|
|
|
|
|
+ isShowVideoForPlay: false,
|
|
|
+ videoSrcForPlay: '',
|
|
|
+
|
|
|
bgAudioUrl: "", //背景音频url
|
|
|
isBgAudioMuted: false,
|
|
|
-
|
|
|
- isShowImages: false,
|
|
|
- isShowVideos: false,
|
|
|
- isShowModels: false,
|
|
|
- isShowAudios: false,
|
|
|
-
|
|
|
- currentSlideIdx: 0,
|
|
|
- bgImg,
|
|
|
- isShowPlusOne: false,
|
|
|
- isShowShare: false,
|
|
|
}
|
|
|
},
|
|
|
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 this.hotspotData.content
|
|
|
- }
|
|
|
+ return this.hotspotData.content
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -292,64 +198,65 @@ export default {
|
|
|
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',
|
|
|
- },
|
|
|
+ new Swiper('.swiper-wrapper-mine .swiper-root', {
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ // 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.isShowAudios) {
|
|
|
- that.$nextTick(() => {
|
|
|
- that.$refs.audio[0].play()
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- slideChange: function(e) {
|
|
|
- that.currentSlideIdx = e.activeIndex
|
|
|
+ // on: {
|
|
|
+ // // 自动播放
|
|
|
+ // afterInit: function (e) {
|
|
|
+ // if (that.isShowVideos) {
|
|
|
+ // that.$nextTick(() => {
|
|
|
+ // that.$refs.video[0].play()
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // if (that.isShowAudios) {
|
|
|
+ // that.$nextTick(() => {
|
|
|
+ // that.$refs.audio[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.isShowAudios) {
|
|
|
- for (let index = 0; index < that.$refs.audio.length; index++) {
|
|
|
- if (index !== that.currentSlideIdx) {
|
|
|
- that.$refs.audio[index].pause()
|
|
|
- } else {
|
|
|
- that.$refs.audio[index].play()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // // 自动播放
|
|
|
+ // 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.isShowAudios) {
|
|
|
+ // for (let index = 0; index < that.$refs.audio.length; index++) {
|
|
|
+ // if (index !== that.currentSlideIdx) {
|
|
|
+ // that.$refs.audio[index].pause()
|
|
|
+ // } else {
|
|
|
+ // that.$refs.audio[index].play()
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
- changeSubStr(str) {
|
|
|
- return str.replace('https://super.4dage.com/', process.env.VUE_APP_G_PREFIX)
|
|
|
- },
|
|
|
+ // changeSubStr(str) {
|
|
|
+ // return str.replace('https://super.4dage.com/', process.env.VUE_APP_G_PREFIX)
|
|
|
+ // },
|
|
|
async getData() {
|
|
|
let url = `${process.env.VUE_APP_G_PREFIX}/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
|
|
|
let result = (await this.$http.get(url)).data
|
|
|
- deepProcess(result, this.changeSubStr)
|
|
|
+ // deepProcess(result, this.changeSubStr) // 本地化部署时的处理
|
|
|
|
|
|
this.hotspotData = result[this.$route.query.m]
|
|
|
if (!this.hotspotData) {
|
|
|
@@ -357,43 +264,23 @@ export default {
|
|
|
}
|
|
|
console.log('热点数据：', this.hotspotData)
|
|
|
|
|
|
- // this.bgAudioUrl = this.hotspotData.backgroundMusic
|
|
|
+ this.bgAudioUrl = 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
|
|
|
- } else if (this.hotspotData.model && this.hotspotData.model.length) {
|
|
|
- this.isShowModels = true
|
|
|
- } else if (this.hotspotData.backgroundMusic) {
|
|
|
+ if (this.hotspotData.backgroundMusic) {
|
|
|
this.isShowAudios = true
|
|
|
this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
|
|
|
}
|
|
|
},
|
|
|
+ viewVideo(videoItem) {
|
|
|
+ this.videoSrcForPlay = videoItem.url
|
|
|
+ this.isShowVideoForPlay = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['video-for-play'].play()
|
|
|
+ })
|
|
|
+ },
|
|
|
onClickClose() {
|
|
|
window.parent.document.getElementById('closepop').click()
|
|
|
},
|
|
|
- // onClickLike() {
|
|
|
- // const res = globalApi.like()
|
|
|
- // if (res && res.then) {
|
|
|
- // res.then(() => {
|
|
|
- // this.isShowPlusOne = true
|
|
|
- // setTimeout(() => {
|
|
|
- // this.isShowPlusOne = false
|
|
|
- // }, 1000)
|
|
|
- // })
|
|
|
- // }
|
|
|
- // },
|
|
|
- onClickShare() {
|
|
|
- setTimeout(() => {
|
|
|
- this.isShowShare = true
|
|
|
- }, 200)
|
|
|
- },
|
|
|
- closeCode2d() {
|
|
|
- if (this.isShowShare) {
|
|
|
- this.isShowShare = false
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -401,242 +288,136 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.hotspot-home {
|
|
|
position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- color: #F1F3F4;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
z-index: 0;
|
|
|
+ border-top: 2.1vw solid #00A0E6;
|
|
|
+ width: 81.5vw;
|
|
|
+ height: 80vh;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 9vw 1vw 4vw 4vw;
|
|
|
> .bg-audio {
|
|
|
display: none;
|
|
|
}
|
|
|
-
|
|
|
> button.close {
|
|
|
position: absolute;
|
|
|
- top: 20px;
|
|
|
- right: 30px;
|
|
|
- width: 33.5px;
|
|
|
- height: 33.5px;
|
|
|
+ top: 4.8vw;
|
|
|
+ right: 2.8vw;
|
|
|
+ width: 6.2vw;
|
|
|
+ height: 6.2vw;
|
|
|
z-index: 1;
|
|
|
> img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- > .title-wrapper {
|
|
|
- position: absolute;
|
|
|
- top: 62px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 90%;
|
|
|
- z-index: 1;
|
|
|
- > h1 {
|
|
|
- width: 100%;
|
|
|
- font-size: 27.5px;
|
|
|
- line-height: 1.2em;
|
|
|
- font-size: 27.5px;
|
|
|
- font-family: DFLiShuW7;
|
|
|
- letter-spacing: 2px;
|
|
|
- text-align: center;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
+ > h1 {
|
|
|
+ font-size: 5vw;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1F3E7C;
|
|
|
+ line-height: 1.5em;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ }
|
|
|
+ > button.download {
|
|
|
+ margin-top: 3vw;
|
|
|
+ height: 5.4vw;
|
|
|
+ border: 1px solid #00A0E6;
|
|
|
+ border-radius: 2.7vw;
|
|
|
+ padding-left: 2.5vw;
|
|
|
+ padding-right: 2.5vw;
|
|
|
+ font-size: 2.8vw;
|
|
|
+ color: #00A0E6;
|
|
|
+ > img {
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 2.9vw;
|
|
|
+ height: 3.2vw;
|
|
|
+ margin-right: 1vw;
|
|
|
}
|
|
|
- > .bottom-line {
|
|
|
- position: absolute;
|
|
|
- top: 100%;
|
|
|
- left: calc(50% + 10px);
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 174px;
|
|
|
- height: 9.5px;
|
|
|
+ > span {
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .swiper-wrapper-mine {
|
|
|
- position: absolute;
|
|
|
- top: 150px;
|
|
|
- left: 0px;
|
|
|
+ > .content-wrapper {
|
|
|
+ flex: 1 0 1px;
|
|
|
+ overflow: auto;
|
|
|
+ margin-top: 6.2vw;
|
|
|
+ padding-right: 3vw;
|
|
|
width: 100%;
|
|
|
- height: 250px;
|
|
|
- z-index: 1;
|
|
|
- .swiper-root {
|
|
|
- overflow: hidden;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- .swiper-wrapper {
|
|
|
- }
|
|
|
- .swiper-pagination {
|
|
|
- position: absolute;
|
|
|
- top: 100%;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- font-size: 1.33rem;
|
|
|
- font-family: Inter-Regular, Inter;
|
|
|
- .cur {
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-button-prev {
|
|
|
- left: 10px;
|
|
|
- width: 20px;
|
|
|
- background-image: url(../assets/images/arrow-left.png);
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-button-next {
|
|
|
- right: 10px;
|
|
|
- width: 20px;
|
|
|
- background-image: url(../assets/images/arrow-right.png);
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- }
|
|
|
- }
|
|
|
+ > .desc {
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-size: 3.6vw;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 5.3vw;
|
|
|
}
|
|
|
- }
|
|
|
- .swiper-wrapper-mine.video-wrap {
|
|
|
- .swiper-root {
|
|
|
- .swiper-wrapper {
|
|
|
- .swiper-slide {
|
|
|
- > video {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #000;
|
|
|
+ .swiper-wrapper-mine {
|
|
|
+ margin-top: 5vw;
|
|
|
+ .swiper-root {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ .swiper-wrapper {
|
|
|
+ > .swiper-slide {
|
|
|
+ object-fit: contain;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 1.8vw;
|
|
|
+ width: 30.2vw;
|
|
|
+ height: 19.6vw;
|
|
|
+ position: relative;
|
|
|
+ > video {
|
|
|
+ object-fit: contain;
|
|
|
+ border-radius: 4px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ > img.icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 6.2vw;
|
|
|
+ height: 6.2vw;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-wrapper-mine.model-wrap {
|
|
|
- .swiper-root {
|
|
|
- .swiper-wrapper {
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-wrapper-mine.audio-wrap {
|
|
|
- .swiper-root {
|
|
|
- .swiper-wrapper {
|
|
|
- .swiper-slide {
|
|
|
- > audio {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- width: 80%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
+ .swiper-pagination {
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-wrapper-mine.image-wrap {
|
|
|
- .swiper-root {
|
|
|
- .swiper-wrapper {
|
|
|
- > img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: contain;
|
|
|
+ .swiper-button-prev {
|
|
|
+ }
|
|
|
+ .swiper-button-next {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- > menu {
|
|
|
- position: absolute;
|
|
|
- top: 415px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- z-index: 1;
|
|
|
- > button {
|
|
|
- display: inline-block;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin-right: 38.5px;
|
|
|
- position: relative;
|
|
|
- &:last-of-type{
|
|
|
- margin-right: initial;
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- // .plus-one {
|
|
|
- // position: absolute;
|
|
|
- // top: 0;
|
|
|
- // right: 0;
|
|
|
- // transform: translate(50%, -50%);
|
|
|
- // }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- > .desc-wrap {
|
|
|
+ > .video-for-play-wrapper {
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- overflow: auto;
|
|
|
- > .place-holder {
|
|
|
- width: 100%;
|
|
|
- height: 450px;
|
|
|
- }
|
|
|
- > .desc-bg-wrap {
|
|
|
- z-index: 2;
|
|
|
- position: absolute;
|
|
|
- top: 450px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: calc(100vw - 11px * 2);
|
|
|
- height: calc((100vw - 11px * 2) * 1.7);
|
|
|
- background-image: url(@/assets/images/bg-mobile.png);
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- > .top-bar {
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 127px;
|
|
|
- height: 4px;
|
|
|
- background: #F4D49F;
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
- > .desc {
|
|
|
- position: absolute;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 26px;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- top: 77px;
|
|
|
- bottom: 40px;
|
|
|
- left: 26px;
|
|
|
- right: 26px;
|
|
|
- width: calc(100% - 26px * 2);
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .share-wrap {
|
|
|
- position: absolute;
|
|
|
top: 0;
|
|
|
- left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- z-index: 1;
|
|
|
- > img.code {
|
|
|
+ background: rgba(0, 0, 0, 0.95);
|
|
|
+ z-index: 2;
|
|
|
+ > button.close {
|
|
|
+ position: absolute;
|
|
|
+ top: 4.8vw;
|
|
|
+ right: 2.8vw;
|
|
|
+ width: 6.2vw;
|
|
|
+ height: 6.2vw;
|
|
|
+ z-index: 1;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > video {
|
|
|
position: absolute;
|
|
|
- top: 190px;
|
|
|
left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 170px;
|
|
|
- height: 170px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -645,28 +426,4 @@ export default {
|
|
|
background: #a10e0c;
|
|
|
}
|
|
|
|
|
|
-// .bubble-enter {
|
|
|
-// opacity: 0;
|
|
|
-// top: 1rem !important;
|
|
|
-// }
|
|
|
-// .bubble-enter-to {
|
|
|
-// opacity: 1;
|
|
|
-// top: 0 !important;
|
|
|
-// }
|
|
|
-// .bubble-enter-active {
|
|
|
-// transition: all 0.5s;
|
|
|
-// }
|
|
|
-// .bubble-leave {
|
|
|
-// opacity: 1;
|
|
|
-// top: 0 !important;
|
|
|
-// }
|
|
|
-// .bubble-leave-to {
|
|
|
-// opacity: 0;
|
|
|
-// top: -1rem !important;
|
|
|
-// }
|
|
|
-// .bubble-leave-active {
|
|
|
-// transition: all 0.5s;
|
|
|
-// }
|
|
|
-
|
|
|
-::-webkit-scrollbar { width: 0; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
|
|
|
-</style>
|
|
|
+</style>
|
任一存
