|
|
@@ -0,0 +1,616 @@
|
|
|
+<template>
|
|
|
+ <!-- @click="autoplay" @touchstart="autoplay" -->
|
|
|
+ <div class="home">
|
|
|
+ <audio
|
|
|
+ v-if="audio"
|
|
|
+ class="audio"
|
|
|
+ id="audio1"
|
|
|
+ :src="audio"
|
|
|
+ preload
|
|
|
+ ref="musicBg"
|
|
|
+ @ended="overAudio"
|
|
|
+ ></audio>
|
|
|
+ <div
|
|
|
+ class="content"
|
|
|
+ v-if="(!audio && fixIcon.length > 0) || (audio && fixIcon.length > 1)"
|
|
|
+ :class="{ isMobileCon: isMobile }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="!isMobile && lengthShow"
|
|
|
+ @click="slideto('slidePrev')"
|
|
|
+ class="swiper-button-prev"
|
|
|
+ ></div>
|
|
|
+ <div class="mb-intro" v-show="active === 'title' && isMobile">
|
|
|
+ <p v-html="data.title"></p>
|
|
|
+ <p v-html="data.content"></p>
|
|
|
+ <p
|
|
|
+ v-html="data.imagesDesc[myInd]"
|
|
|
+ v-if="
|
|
|
+ data.imagesDesc && data.imagesDesc[myInd] && active === 'images'
|
|
|
+ "
|
|
|
+ ></p>
|
|
|
+ <p
|
|
|
+ v-html="data.videosDesc[myInd]"
|
|
|
+ v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
|
|
|
+ ></p>
|
|
|
+ </div>
|
|
|
+ <!-- 查看图片 -->
|
|
|
+ <viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
+ <img :src="lookPics[0]" alt="" />
|
|
|
+ </viewer>
|
|
|
+
|
|
|
+ <swiper
|
|
|
+ v-show="active !== 'title'"
|
|
|
+ class="warpper"
|
|
|
+ ref="mySwiper"
|
|
|
+ :options="swiperOptions"
|
|
|
+ >
|
|
|
+ <swiper-slide v-for="(item, i) in data[active]" :key="i">
|
|
|
+ <div class="slide">
|
|
|
+ <img
|
|
|
+ style="cursor: pointer"
|
|
|
+ v-if="active === 'images'"
|
|
|
+ v-lazy="fixUrl(item)"
|
|
|
+ @click="lookImg(fixUrl(item))"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <video
|
|
|
+ class="videoDom"
|
|
|
+ v-else-if="active === 'video'"
|
|
|
+ :src="fixUrl(item.url)"
|
|
|
+ controls
|
|
|
+ ></video>
|
|
|
+ <iframe
|
|
|
+ @click="colseParent(item)"
|
|
|
+ v-else-if="active === 'model' || active === 'iframe'"
|
|
|
+ :src="fixUrl(item)"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <div
|
|
|
+ class="swiper-pagination"
|
|
|
+ slot="pagination"
|
|
|
+ v-show="lengthShow"
|
|
|
+ ></div>
|
|
|
+ </swiper>
|
|
|
+ <div
|
|
|
+ v-if="!isMobile && lengthShow"
|
|
|
+ @click="slideto('slideNext')"
|
|
|
+ class="swiper-button-next"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <ul
|
|
|
+ class="iconarr"
|
|
|
+ v-if="fixIcon.length > 0"
|
|
|
+ :class="{ oneChuMusic: fixIcon.length === 1 && !audio }"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ :class="{
|
|
|
+ active: item.id === active || item.audioAc,
|
|
|
+ onlyTxt: audio && fixIcon.length === 2 && i !== 0,
|
|
|
+ }"
|
|
|
+ @click="changeActive(item.id, item.audioAc)"
|
|
|
+ v-for="(item, i) in fixIcon"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <img :src="require(`@/assets/images/${item.img}.png`)" alt="" />
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div
|
|
|
+ class="intro"
|
|
|
+ :class="{
|
|
|
+ ismtop:
|
|
|
+ (!audio && fixIcon.length === 0) || (audio && fixIcon.length === 1),
|
|
|
+ }"
|
|
|
+ v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
|
|
|
+ >
|
|
|
+ <h3 v-html="data.title"></h3>
|
|
|
+ <p v-html="data.content"></p>
|
|
|
+ <p
|
|
|
+ v-html="data.imagesDesc[myInd]"
|
|
|
+ v-if="data.imagesDesc && data.imagesDesc[myInd] && active === 'images'"
|
|
|
+ ></p>
|
|
|
+ <p
|
|
|
+ v-html="data.videosDesc[myInd]"
|
|
|
+ v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
|
|
|
+ ></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
+import "swiper/css/swiper.css";
|
|
|
+import browser from "@/utils/browser";
|
|
|
+
|
|
|
+let iconArr = [
|
|
|
+ {
|
|
|
+ name: "音频",
|
|
|
+ id: "audio",
|
|
|
+ img: "audio-icon",
|
|
|
+ display: false,
|
|
|
+ audioAc: false,
|
|
|
+ },
|
|
|
+ { name: "图片", id: "images", img: "img-icon", display: false },
|
|
|
+ { name: "视频", id: "video", img: "video-icon", display: false },
|
|
|
+ { name: "网页", id: "iframe", img: "iframe-icon", display: false },
|
|
|
+ { name: "模型", id: "model", img: "model-icon", display: false },
|
|
|
+];
|
|
|
+
|
|
|
+browser.mobile &&
|
|
|
+ iconArr.push({ name: "介绍", id: "title", img: "txt-icon", display: false });
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Home",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ lookPics: [],
|
|
|
+
|
|
|
+ // 图片描述的索引
|
|
|
+ myInd: 0,
|
|
|
+ lengthShow: false,
|
|
|
+ // 看看是不是只有一张图，一个视频或irm，只有一张图的时候隐藏左右按钮和小圆点
|
|
|
+ audio: "",
|
|
|
+ m: this.$route.query.m,
|
|
|
+ id: this.$route.query.id,
|
|
|
+ isMobile: browser.mobile,
|
|
|
+ isAndriod: browser.android,
|
|
|
+ swiperOptions: browser.mobile
|
|
|
+ ? {
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ slideChangeTransitionEnd: () => {
|
|
|
+ let swiper = this.$refs.mySwiper.$swiper;
|
|
|
+ let activeIndex = swiper.activeIndex;
|
|
|
+ this.myInd = activeIndex;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ : {
|
|
|
+ slidesPerView: 3,
|
|
|
+ spaceBetween: 0,
|
|
|
+ centeredSlides: true,
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ slideChangeTransitionEnd: () => {
|
|
|
+ let swiper = this.$refs.mySwiper.$swiper;
|
|
|
+ let activeIndex = swiper.activeIndex;
|
|
|
+ this.myInd = activeIndex;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: {},
|
|
|
+ iconArr,
|
|
|
+ active: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ myInd: {
|
|
|
+ handler(newv) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.active == "video") {
|
|
|
+ // 控制当前选中的视频播放
|
|
|
+ let videoDoms = document.querySelectorAll(".videoDom");
|
|
|
+ videoDoms.forEach((v, i) => {
|
|
|
+ if (i === newv) v.play();
|
|
|
+ else v.pause();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+
|
|
|
+ active(newVal) {
|
|
|
+ let AcDataLength = this.data[newVal].length - 1;
|
|
|
+ if (this.myInd > AcDataLength) this.myInd = AcDataLength;
|
|
|
+
|
|
|
+ // 判断是否只有一张图片或者视频，ifrm lengthShow
|
|
|
+ let tempType = this.data[newVal];
|
|
|
+ if (tempType && tempType.length && tempType.length > 1)
|
|
|
+ this.lengthShow = true;
|
|
|
+ else this.lengthShow = false;
|
|
|
+ if (!newVal) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.$refs.musicBg) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 如果点击的是音频
|
|
|
+ setTimeout(() => {
|
|
|
+ if (newVal == "video") {
|
|
|
+ this.audioAc(false);
|
|
|
+ if (!this.$refs.musicBg.paused) {
|
|
|
+ this.$refs.musicBg.pause();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 控制当前选中的视频播放
|
|
|
+ let videoDoms = document.querySelectorAll(".videoDom");
|
|
|
+ videoDoms.forEach((v, i) => {
|
|
|
+ if (i === this.myInd) v.play();
|
|
|
+ else v.pause();
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ swiper() {
|
|
|
+ return this.$refs.mySwiper.$swiper;
|
|
|
+ },
|
|
|
+ fixIcon() {
|
|
|
+ let arr = this.iconArr.filter((item) => !!item.display);
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide,
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 点击查看大图
|
|
|
+ lookImg(url) {
|
|
|
+ let dom = this.$refs.viewer.$viewer;
|
|
|
+ this.lookPics = [url];
|
|
|
+ dom.show();
|
|
|
+ },
|
|
|
+ // 音频播放完毕
|
|
|
+ overAudio() {
|
|
|
+ console.log("播放声音完毕");
|
|
|
+ this.audioAc(false);
|
|
|
+ },
|
|
|
+ // 音频的状态
|
|
|
+ audioAc(flag) {
|
|
|
+ this.iconArr.forEach((v) => {
|
|
|
+ if (v.id === "audio") v.audioAc = flag;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击切换图片--视频
|
|
|
+ changeActive(id, flag) {
|
|
|
+ if (id === "audio" && flag === false) {
|
|
|
+ this.audioAc(true);
|
|
|
+ this.$refs.musicBg.play();
|
|
|
+ return;
|
|
|
+ } else if (id === "audio" && flag === true) {
|
|
|
+ this.audioAc(false);
|
|
|
+ this.$refs.musicBg.pause();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.active = id;
|
|
|
+ },
|
|
|
+ async getData() {
|
|
|
+ // https://www.4dmodel.com/
|
|
|
+ let url = `https://super.4dage.com/data/${
|
|
|
+ this.id
|
|
|
+ }/hot/js/data.js?time=${Math.random()}`;
|
|
|
+ let result = (await this.$http.get(url)).data;
|
|
|
+ this.data = result[this.m];
|
|
|
+ if (!this.data) {
|
|
|
+ return alert("热点解析错误");
|
|
|
+ }
|
|
|
+ this.audio = this.data["backgroundMusic"];
|
|
|
+ if (!this.data.content && this.isMobile) {
|
|
|
+ this.iconArr.pop();
|
|
|
+ }
|
|
|
+ this.iconArr.forEach((item) => {
|
|
|
+ if (this.data[item.id]) {
|
|
|
+ this.active = !this.active ? item.id : this.active;
|
|
|
+ item.display = true;
|
|
|
+ }
|
|
|
+ // 如果有音频
|
|
|
+ if (item.id === "audio" && this.audio) item.display = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ colseParent(item) {
|
|
|
+ if (this.isMobile) {
|
|
|
+ if (
|
|
|
+ item.indexOf("mp.weixin.qq.com/mp/") > -1 &&
|
|
|
+ this.active === "iframe"
|
|
|
+ ) {
|
|
|
+ window.parent.document.getElementById("closepop").click();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fixUrl(item) {
|
|
|
+ let condition =
|
|
|
+ item.indexOf("http://") > -1 || item.indexOf("https://") > -1;
|
|
|
+ if (this.isMobile) {
|
|
|
+ if (
|
|
|
+ item.indexOf("mp.weixin.qq.com/mp/") > -1 &&
|
|
|
+ this.active === "iframe"
|
|
|
+ ) {
|
|
|
+ return `https://www.4dmodel.com/SuperTwo/hot_online1/linktoWC.html?url=${encodeURIComponent(
|
|
|
+ item
|
|
|
+ )}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!condition) {
|
|
|
+ return "https://" + item;
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ },
|
|
|
+ slideto(action) {
|
|
|
+ this.swiper[action]();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ document.addEventListener(
|
|
|
+ "WeixinJSBridgeReady",
|
|
|
+ () => {
|
|
|
+ this.autoplay();
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.viewerCla img {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.audio {
|
|
|
+ position: fixed;
|
|
|
+ top: -100px;
|
|
|
+ left: -100px;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-intro {
|
|
|
+ color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ > p {
|
|
|
+ line-height: 1.5;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ &:first-of-type {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ padding-right: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.home {
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 80%;
|
|
|
+ .warpper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .slide {
|
|
|
+ font-size: 0;
|
|
|
+ img,
|
|
|
+ video,
|
|
|
+ iframe {
|
|
|
+ max-height: 570px;
|
|
|
+ border-radius: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ iframe {
|
|
|
+ height: 570px;
|
|
|
+ width: 1000px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .isMobileCon {
|
|
|
+ height: calc(100vh - 90px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconarr {
|
|
|
+ z-index: 1999;
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ bottom: calc(20vh - 20px);
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ list-style: none;
|
|
|
+ font-size: 14px;
|
|
|
+ width: 90px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: solid 1px #fff;
|
|
|
+ margin-right: 10px;
|
|
|
+ span {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background: #19bbed;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .oneChuMusic {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ .onlyTxt {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ .intro {
|
|
|
+ max-height: 19vh;
|
|
|
+ overflow: auto;
|
|
|
+ width: 70%;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0 auto;
|
|
|
+ > h3 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-indent: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ismtop {
|
|
|
+ max-height: 65%;
|
|
|
+ height: 65%;
|
|
|
+ padding: 50px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1400px) {
|
|
|
+ .home {
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ .content {
|
|
|
+ .warpper {
|
|
|
+ .slide {
|
|
|
+ img,
|
|
|
+ video,
|
|
|
+ iframe {
|
|
|
+ max-height: 500px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ max-height: 80vh;
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+ iframe {
|
|
|
+ height: 500px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1000px) {
|
|
|
+ .home {
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ .content {
|
|
|
+ .warpper {
|
|
|
+ .slide {
|
|
|
+ width: 100%;
|
|
|
+ img,
|
|
|
+ video,
|
|
|
+ iframe {
|
|
|
+ max-height: none;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ max-height: 80vh;
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 90px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iconarr {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ list-style: none;
|
|
|
+ margin-right: 0px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0px;
|
|
|
+ right: 0px;
|
|
|
+ z-index: 1999;
|
|
|
+ li {
|
|
|
+ width: 70px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media only screen and (max-width: 906px) and (orientation: landscape) {
|
|
|
+ .home {
|
|
|
+ .content {
|
|
|
+ .warpper {
|
|
|
+ .slide {
|
|
|
+ width: 100%;
|
|
|
+ img,
|
|
|
+ video,
|
|
|
+ iframe {
|
|
|
+ max-width: 70%;
|
|
|
+ max-height: 80vh;
|
|
|
+ }
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ max-width: unset;
|
|
|
+ height: calc(100vh - 90px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.swiper-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-pagination-bullet {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.swiper-slide {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ transition: 300ms;
|
|
|
+ transform: scale(0.8);
|
|
|
+ position: relative;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-slide-active,
|
|
|
+.swiper-slide-duplicate-active {
|
|
|
+ transform: scale(1);
|
|
|
+ opacity: 1;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-button-prev,
|
|
|
+.swiper-button-next {
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ padding: 10px 20px;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+.swiper-button-prev {
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.swiper-button-next {
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 500px) {
|
|
|
+ .swiper-slide {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
任一存
2 éve
