|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="home" @click="autoplay" @touchstart="autoplay">
|
|
|
+ <div class="home" @click="autoplay" @touchstart="autoplay" @touchend='huadong'>
|
|
|
<audio
|
|
|
v-if="audio"
|
|
|
class="audio"
|
|
|
@@ -16,6 +16,8 @@
|
|
|
v-if="fixIcon.length > 0"
|
|
|
:style="{ height: isMobile ? '100%' : '80%' }"
|
|
|
>
|
|
|
+ <h3 id="shoujititle" v-html="data.title"></h3>
|
|
|
+
|
|
|
<div
|
|
|
v-if="!isMobile && videoLength"
|
|
|
@click="slideto('slidePrev')"
|
|
|
@@ -43,10 +45,12 @@
|
|
|
controls
|
|
|
autoplay
|
|
|
></video>
|
|
|
+
|
|
|
+ <!-- :src="fixUrl(item)" -->
|
|
|
<iframe
|
|
|
@click="colseParent()"
|
|
|
v-else
|
|
|
- :src="fixUrl(item)"
|
|
|
+ :src="fixUrl(myFim[i])"
|
|
|
frameborder="0"
|
|
|
></iframe>
|
|
|
</div>
|
|
|
@@ -102,6 +106,7 @@ export default {
|
|
|
name: "Home",
|
|
|
data() {
|
|
|
return {
|
|
|
+ myFim:[],
|
|
|
videoLength:true,
|
|
|
loadAuto: false,
|
|
|
audio: "",
|
|
|
@@ -165,6 +170,22 @@ export default {
|
|
|
SwiperSlide,
|
|
|
},
|
|
|
methods: {
|
|
|
+ huadong(){
|
|
|
+ // console.log(666);
|
|
|
+ //点击的时候才加载，防止一次运行过多iframe标签导致页面崩溃
|
|
|
+ let myFim =document.querySelectorAll('.swiper-wrapper .swiper-slide')
|
|
|
+ let myFimCente =document.querySelectorAll('.swiper-wrapper .swiper-slide-active iframe')
|
|
|
+ console.log(myFim,myFimCente);
|
|
|
+ myFim.forEach((v,i)=>{
|
|
|
+ //拿到当前在屏幕中间的iframe
|
|
|
+ if(v.className.includes('swiper-slide-active') && i>1) {
|
|
|
+ // console.log(myFimCente[0].src);
|
|
|
+ if(myFimCente[0].src.includes('undefined')){
|
|
|
+ myFimCente[0].src =this.fixUrl(this.data.model[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
autoplay() {
|
|
|
if (this.loadAuto) {
|
|
|
return;
|
|
|
@@ -178,15 +199,26 @@ export default {
|
|
|
},
|
|
|
async getData() {
|
|
|
// http://192.168.0.44:8110
|
|
|
- let url = `http://192.168.0.44:8110/data/${
|
|
|
+ let url = `/data/${
|
|
|
this.id
|
|
|
}/hot/js/data.js?time=${Math.random()}`;
|
|
|
let result = (await this.$http.get(url)).data;
|
|
|
this.data = result[this.m];
|
|
|
+
|
|
|
+
|
|
|
+ //进页面只让iframe加载2个
|
|
|
+ // console.log(9999999,this.data.model);
|
|
|
+ if(this.data.model){
|
|
|
+ this.myFim[0]=this.data.model[0]
|
|
|
+ this.myFim[1]=this.data.model[1]
|
|
|
+ }
|
|
|
+ // this.myFim=this.data.model
|
|
|
+
|
|
|
+
|
|
|
if (!this.data) {
|
|
|
return alert("热点解析错误");
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
this.audio = this.data["backgroundMusic"];
|
|
|
|
|
|
if (!this.data.content && this.isMobile) {
|
|
|
@@ -206,10 +238,24 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
fixUrl(item) {
|
|
|
- return 'http://192.168.0.44:8110/'+item;
|
|
|
+ return 'http://192.168.0.44:8110'+item;
|
|
|
},
|
|
|
slideto(action) {
|
|
|
this.swiper[action]();
|
|
|
+
|
|
|
+
|
|
|
+ //点击的时候才加载，防止一次运行过多iframe标签导致页面崩溃
|
|
|
+ let myFim =document.querySelectorAll('.swiper-wrapper .swiper-slide')
|
|
|
+ let myFimCente =document.querySelectorAll('.swiper-wrapper .swiper-slide-next iframe')
|
|
|
+ myFim.forEach((v,i)=>{
|
|
|
+ //拿到当前在屏幕中间的iframe
|
|
|
+ if(v.className.includes('swiper-slide-next') && i>1) {
|
|
|
+ // console.log(myFimCente[0].src);
|
|
|
+ if(myFimCente[0].src.includes('undefined')){
|
|
|
+ myFimCente[0].src =this.fixUrl(this.data.model[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -217,8 +263,9 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
let videos =document.querySelectorAll('.slide video')
|
|
|
let Imgs =document.querySelectorAll('.slide img')
|
|
|
- console.log(11111,Imgs.length);
|
|
|
- if(videos.length===1 || Imgs.length===1) this.videoLength = false
|
|
|
+ let iframes = document.querySelectorAll('.slide iframe')
|
|
|
+ // console.log(11111,iframes);
|
|
|
+ if(videos.length===1 || Imgs.length===1 ||iframes.length===1) this.videoLength = false
|
|
|
|
|
|
}, 100);
|
|
|
this.getData();
|
|
|
@@ -239,7 +286,7 @@ export default {
|
|
|
max-width: 400px;
|
|
|
height: 50px;
|
|
|
position: fixed;
|
|
|
- top: 40%;
|
|
|
+ top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%,-50%);
|
|
|
}
|
|
|
@@ -270,6 +317,9 @@ export default {
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
+ #shoujititle{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
width: 100%;
|
|
|
height: 80%;
|
|
|
.warpper {
|
|
|
@@ -345,7 +395,7 @@ export default {
|
|
|
.mcenter{
|
|
|
position: absolute;
|
|
|
transform: translate(-50%,-50%);
|
|
|
- top: 50%;
|
|
|
+ top: 40%;
|
|
|
left: 50%;
|
|
|
max-height: none;
|
|
|
}
|
|
|
@@ -376,6 +426,21 @@ export default {
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
|
+ #shoujititle{
|
|
|
+ display: block !important;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: 80px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #cf7b0e;
|
|
|
+ }
|
|
|
+ .intro h3 {
|
|
|
+ bottom: 100px !important;
|
|
|
+ }
|
|
|
+ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
|
|
|
+ bottom: 240px;
|
|
|
+ }
|
|
|
.home {
|
|
|
background: url('../assets/images/Mbac.png') no-repeat center;
|
|
|
background-size: cover;
|
|
|
@@ -400,7 +465,7 @@ export default {
|
|
|
}
|
|
|
iframe {
|
|
|
width: 100%;
|
|
|
- height: 100vh;
|
|
|
+ height: 55vh;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -455,7 +520,11 @@ export default {
|
|
|
}
|
|
|
|
|
|
.swiper-pagination-bullet {
|
|
|
- background: #fff;
|
|
|
+ background-color: #fff;
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+.swiper-pagination-bullet-active {
|
|
|
+ background-color: #cf7b0e;
|
|
|
}
|
|
|
.swiper-slide {
|
|
|
text-align: center;
|
xzw
