|
|
@@ -3,127 +3,144 @@
|
|
|
<div class="home">
|
|
|
<audio
|
|
|
v-if="audio"
|
|
|
- class="audio"
|
|
|
id="audio1"
|
|
|
+ ref="musicBg"
|
|
|
+ class="audio"
|
|
|
:src="audio"
|
|
|
preload
|
|
|
- ref="musicBg"
|
|
|
@ended="overAudio"
|
|
|
- ></audio>
|
|
|
+ />
|
|
|
<div
|
|
|
- class="content"
|
|
|
v-if="(!audio && fixIcon.length > 0) || (audio && fixIcon.length > 1)"
|
|
|
+ class="content"
|
|
|
: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>
|
|
|
+ @click="slideto('slidePrev')"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ v-show="active === 'title' && isMobile"
|
|
|
+ class="mb-intro"
|
|
|
+ >
|
|
|
+ <p v-html="data.title" />
|
|
|
+ <p v-html="data.content" />
|
|
|
<p
|
|
|
- v-html="data.imagesDesc[myInd]"
|
|
|
v-if="
|
|
|
data.imagesDesc && data.imagesDesc[myInd] && active === 'images'
|
|
|
"
|
|
|
- ></p>
|
|
|
+ v-html="data.imagesDesc[myInd]"
|
|
|
+ />
|
|
|
<p
|
|
|
- v-html="data.videosDesc[myInd]"
|
|
|
v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
|
|
|
- ></p>
|
|
|
+ v-html="data.videosDesc[myInd]"
|
|
|
+ />
|
|
|
</div>
|
|
|
<!-- 查看图片 -->
|
|
|
- <viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
- <img :src="lookPics[0]" alt="" />
|
|
|
+ <viewer
|
|
|
+ ref="viewer"
|
|
|
+ class="viewerCla"
|
|
|
+ :images="lookPics"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="lookPics[0]"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
</viewer>
|
|
|
|
|
|
<swiper
|
|
|
v-show="active !== 'title'"
|
|
|
- class="warpper"
|
|
|
ref="mySwiper"
|
|
|
+ class="warpper"
|
|
|
:options="swiperOptions"
|
|
|
>
|
|
|
- <swiper-slide v-for="(item, i) in data[active]" :key="i">
|
|
|
+ <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))"
|
|
|
+ style="cursor: pointer"
|
|
|
alt=""
|
|
|
- />
|
|
|
+ @click="lookImg(fixUrl(item))"
|
|
|
+ >
|
|
|
<video
|
|
|
- class="videoDom"
|
|
|
v-else-if="active === 'video'"
|
|
|
+ class="videoDom"
|
|
|
:src="fixUrl(item.url)"
|
|
|
controls
|
|
|
- ></video>
|
|
|
+ />
|
|
|
<iframe
|
|
|
- @click="colseParent(item)"
|
|
|
v-else-if="active === 'model' || active === 'iframe'"
|
|
|
:src="fixUrl(item)"
|
|
|
frameborder="0"
|
|
|
- ></iframe>
|
|
|
+ @click="colseParent(item)"
|
|
|
+ />
|
|
|
</div>
|
|
|
</swiper-slide>
|
|
|
<div
|
|
|
- class="swiper-pagination"
|
|
|
- slot="pagination"
|
|
|
v-show="lengthShow"
|
|
|
- ></div>
|
|
|
+ slot="pagination"
|
|
|
+ class="swiper-pagination"
|
|
|
+ />
|
|
|
</swiper>
|
|
|
<div
|
|
|
v-if="!isMobile && lengthShow"
|
|
|
- @click="slideto('slideNext')"
|
|
|
class="swiper-button-next"
|
|
|
- ></div>
|
|
|
+ @click="slideto('slideNext')"
|
|
|
+ />
|
|
|
</div>
|
|
|
<ul
|
|
|
- class="iconarr"
|
|
|
v-if="fixIcon.length > 0"
|
|
|
+ class="iconarr"
|
|
|
:class="{ oneChuMusic: fixIcon.length === 1 && !audio }"
|
|
|
>
|
|
|
<li
|
|
|
+ v-for="(item, i) in fixIcon"
|
|
|
+ :key="i"
|
|
|
: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="" />
|
|
|
+ <img
|
|
|
+ :src="require(`@/assets/images/${item.img}.png`)"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
<span>{{ item.name }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
+ <!-- 文字解说 -->
|
|
|
<div
|
|
|
+ v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
|
|
|
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>
|
|
|
+ <h3 v-html="data.title" />
|
|
|
+ <p v-html="data.content" />
|
|
|
<p
|
|
|
- v-html="data.imagesDesc[myInd]"
|
|
|
v-if="data.imagesDesc && data.imagesDesc[myInd] && active === 'images'"
|
|
|
- ></p>
|
|
|
+ v-html="data.imagesDesc[myInd]"
|
|
|
+ />
|
|
|
<p
|
|
|
- v-html="data.videosDesc[myInd]"
|
|
|
v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
|
|
|
- ></p>
|
|
|
+ v-html="data.videosDesc[myInd]"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
-import "swiper/css/swiper.css";
|
|
|
-import browser from "@/utils/browser";
|
|
|
+import { Swiper, SwiperSlide } from "vue-awesome-swiper"
|
|
|
+import "swiper/css/swiper.css"
|
|
|
+import browser from "@/utils/browser"
|
|
|
|
|
|
let iconArr = [
|
|
|
{
|
|
|
@@ -137,13 +154,17 @@ let iconArr = [
|
|
|
{ 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 });
|
|
|
+ iconArr.push({ name: "介绍", id: "title", img: "txt-icon", display: false })
|
|
|
|
|
|
export default {
|
|
|
name: "Home",
|
|
|
+ components: {
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
lookPics: [],
|
|
|
@@ -159,38 +180,47 @@ export default {
|
|
|
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;
|
|
|
- },
|
|
|
+ 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;
|
|
|
- },
|
|
|
+ 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: "",
|
|
|
- };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ swiper() {
|
|
|
+ return this.$refs.mySwiper.$swiper
|
|
|
+ },
|
|
|
+ fixIcon() {
|
|
|
+ let arr = this.iconArr.filter((item) => !!item.display)
|
|
|
+ return arr
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
myInd: {
|
|
|
@@ -199,116 +229,113 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
if (this.active == "video") {
|
|
|
// 控制当前选中的视频播放
|
|
|
- let videoDoms = document.querySelectorAll(".videoDom");
|
|
|
+ let videoDoms = document.querySelectorAll(".videoDom")
|
|
|
videoDoms.forEach((v, i) => {
|
|
|
- if (i === newv) v.play();
|
|
|
- else v.pause();
|
|
|
- });
|
|
|
+ if (i === newv) v.play()
|
|
|
+ else v.pause()
|
|
|
+ })
|
|
|
}
|
|
|
- }, 500);
|
|
|
- });
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
},
|
|
|
immediate: true,
|
|
|
},
|
|
|
|
|
|
active(newVal) {
|
|
|
- let AcDataLength = this.data[newVal].length - 1;
|
|
|
- if (this.myInd > AcDataLength) this.myInd = AcDataLength;
|
|
|
+ let AcDataLength = this.data[newVal].length - 1
|
|
|
+ if (this.myInd > AcDataLength) this.myInd = AcDataLength
|
|
|
|
|
|
// 判断是否只有一张图片或者视频，ifrm lengthShow
|
|
|
- let tempType = this.data[newVal];
|
|
|
+ let tempType = this.data[newVal]
|
|
|
if (tempType && tempType.length && tempType.length > 1)
|
|
|
- this.lengthShow = true;
|
|
|
- else this.lengthShow = false;
|
|
|
+ this.lengthShow = true
|
|
|
+ else this.lengthShow = false
|
|
|
if (!newVal) {
|
|
|
- return;
|
|
|
+ return
|
|
|
}
|
|
|
if (!this.$refs.musicBg) {
|
|
|
- return;
|
|
|
+ return
|
|
|
}
|
|
|
// 如果点击的是音频
|
|
|
setTimeout(() => {
|
|
|
if (newVal == "video") {
|
|
|
- this.audioAc(false);
|
|
|
+ this.audioAc(false)
|
|
|
if (!this.$refs.musicBg.paused) {
|
|
|
- this.$refs.musicBg.pause();
|
|
|
+ this.$refs.musicBg.pause()
|
|
|
}
|
|
|
}
|
|
|
// 控制当前选中的视频播放
|
|
|
- let videoDoms = document.querySelectorAll(".videoDom");
|
|
|
+ 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;
|
|
|
+ if (i === this.myInd) v.play()
|
|
|
+ else v.pause()
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
},
|
|
|
},
|
|
|
- components: {
|
|
|
- Swiper,
|
|
|
- SwiperSlide,
|
|
|
+ mounted() {
|
|
|
+ this.getData()
|
|
|
+ document.addEventListener(
|
|
|
+ "WeixinJSBridgeReady",
|
|
|
+ () => {
|
|
|
+ this.autoplay()
|
|
|
+ },
|
|
|
+ false
|
|
|
+ )
|
|
|
},
|
|
|
methods: {
|
|
|
// 点击查看大图
|
|
|
lookImg(url) {
|
|
|
- let dom = this.$refs.viewer.$viewer;
|
|
|
- this.lookPics = [url];
|
|
|
- dom.show();
|
|
|
+ let dom = this.$refs.viewer.$viewer
|
|
|
+ this.lookPics = [url]
|
|
|
+ dom.show()
|
|
|
},
|
|
|
// 音频播放完毕
|
|
|
overAudio() {
|
|
|
- console.log("播放声音完毕");
|
|
|
- this.audioAc(false);
|
|
|
+ console.log("播放声音完毕")
|
|
|
+ this.audioAc(false)
|
|
|
},
|
|
|
// 音频的状态
|
|
|
audioAc(flag) {
|
|
|
this.iconArr.forEach((v) => {
|
|
|
- if (v.id === "audio") v.audioAc = flag;
|
|
|
- });
|
|
|
+ if (v.id === "audio") v.audioAc = flag
|
|
|
+ })
|
|
|
},
|
|
|
// 点击切换图片--视频
|
|
|
changeActive(id, flag) {
|
|
|
if (id === "audio" && flag === false) {
|
|
|
- this.audioAc(true);
|
|
|
- this.$refs.musicBg.play();
|
|
|
- return;
|
|
|
+ this.audioAc(true)
|
|
|
+ this.$refs.musicBg.play()
|
|
|
+ return
|
|
|
} else if (id === "audio" && flag === true) {
|
|
|
- this.audioAc(false);
|
|
|
- this.$refs.musicBg.pause();
|
|
|
- return;
|
|
|
+ this.audioAc(false)
|
|
|
+ this.$refs.musicBg.pause()
|
|
|
+ return
|
|
|
}
|
|
|
- this.active = id;
|
|
|
+ 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];
|
|
|
+ }/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("热点解析错误");
|
|
|
+ return alert("热点解析错误")
|
|
|
}
|
|
|
- this.audio = this.data["backgroundMusic"];
|
|
|
+ this.audio = this.data["backgroundMusic"]
|
|
|
if (!this.data.content && this.isMobile) {
|
|
|
- this.iconArr.pop();
|
|
|
+ this.iconArr.pop()
|
|
|
}
|
|
|
this.iconArr.forEach((item) => {
|
|
|
if (this.data[item.id]) {
|
|
|
- this.active = !this.active ? item.id : this.active;
|
|
|
- item.display = true;
|
|
|
+ this.active = !this.active ? item.id : this.active
|
|
|
+ item.display = true
|
|
|
}
|
|
|
// 如果有音频
|
|
|
- if (item.id === "audio" && this.audio) item.display = true;
|
|
|
- });
|
|
|
+ if (item.id === "audio" && this.audio) item.display = true
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
colseParent(item) {
|
|
|
@@ -317,13 +344,13 @@ export default {
|
|
|
item.indexOf("mp.weixin.qq.com/mp/") > -1 &&
|
|
|
this.active === "iframe"
|
|
|
) {
|
|
|
- window.parent.document.getElementById("closepop").click();
|
|
|
+ window.parent.document.getElementById("closepop").click()
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
fixUrl(item) {
|
|
|
let condition =
|
|
|
- item.indexOf("http://") > -1 || item.indexOf("https://") > -1;
|
|
|
+ item.indexOf("http://") > -1 || item.indexOf("https://") > -1
|
|
|
if (this.isMobile) {
|
|
|
if (
|
|
|
item.indexOf("mp.weixin.qq.com/mp/") > -1 &&
|
|
|
@@ -331,29 +358,19 @@ export default {
|
|
|
) {
|
|
|
return `https://www.4dmodel.com/SuperTwo/hot_online1/linktoWC.html?url=${encodeURIComponent(
|
|
|
item
|
|
|
- )}`;
|
|
|
+ )}`
|
|
|
}
|
|
|
}
|
|
|
if (!condition) {
|
|
|
- return "https://" + item;
|
|
|
+ return "https://" + item
|
|
|
}
|
|
|
- return item;
|
|
|
+ return item
|
|
|
},
|
|
|
slideto(action) {
|
|
|
- this.swiper[action]();
|
|
|
+ this.swiper[action]()
|
|
|
},
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getData();
|
|
|
- document.addEventListener(
|
|
|
- "WeixinJSBridgeReady",
|
|
|
- () => {
|
|
|
- this.autoplay();
|
|
|
- },
|
|
|
- false
|
|
|
- );
|
|
|
- },
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@@ -381,10 +398,19 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.home {
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- position: relative;
|
|
|
+ max-width: 1329px;
|
|
|
+ max-height: 848px;
|
|
|
+ background: #E5DFCD;
|
|
|
+ border-top: solid 8px #A10E0C;
|
|
|
+ border-bottom: solid 8px #A10E0C;
|
|
|
+ padding: 28px 100px;
|
|
|
+ box-sizing: border-box;
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
height: 80%;
|
任一存
