| @@ -19,14 +19,10 @@ | |||||
| <div class="vantLoadingBox" style="height: 550px" v-show="!loading"> | <div class="vantLoadingBox" style="height: 550px" v-show="!loading"> | ||||
| <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | ||||
| </div> | </div> | ||||
| <div | |||||
| v-if="isVX && videoPlayBtn" | |||||
| class="title_item3" | |||||
| @click="playVideo" | |||||
| style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; width: 100px; height: 100px"> | |||||
| <div v-if="isVX && videoPlayBtn && !isAndroid" @click="playVideo" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; width: 100px; height: 100px"> | |||||
| <img src="../../assets/icon/icon-play.png" alt="" style="width: 100px; height: 100px" /> | <img src="../../assets/icon/icon-play.png" alt="" style="width: 100px; height: 100px" /> | ||||
| </div> | </div> | ||||
| <video @play="videoPlayBtn = false" id="video" v-if="loading" :src="videoUrl" ref="vidoe" width="100%" height="100%" autoplay muted="muted" loop="loop"> | |||||
| <video @play="videoPlayBtn = false" id="video" v-if="loading" :src="videoUrl" ref="vidoe" width="100%" height="100%" autoplay muted="muted" loop="loop" playsinline> | |||||
| <!-- <source type="audio/ogg" /> --> | <!-- <source type="audio/ogg" /> --> | ||||
| </video> | </video> | ||||
| <div class="titleBox" @click="goLogin" :style="characters != 1 ? 'width:80%' : ''"> | <div class="titleBox" @click="goLogin" :style="characters != 1 ? 'width:80%' : ''"> | ||||
| @@ -96,14 +92,33 @@ | |||||
| {{ characters == 1 ? '立刻体验' : 'Try it now' }} | {{ characters == 1 ? '立刻体验' : 'Try it now' }} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 跳舞视频 --> | |||||
| <div v-if="loading" class="module_3" id="module_3"> | <div v-if="loading" class="module_3" id="module_3"> | ||||
| <!-- <div class="imgBox1"> | <!-- <div class="imgBox1"> | ||||
| <img src="../../assets/img/module_3_1.png" alt> | <img src="../../assets/img/module_3_1.png" alt> | ||||
| </div>--> | </div>--> | ||||
| <div class="imgBox2"> | |||||
| <!-- <div class="imgBox2"> | |||||
| <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/wap/module_3_2.png" alt /> | <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/wap/module_3_2.png" alt /> | ||||
| </div> --> | |||||
| <!-- <div class="imgBox3"> | |||||
| </div> --> | |||||
| <div v-if="isVX && videoPlayBtn2 && !isAndroid" @click="playVideo2" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; width: 100px; height: 100px"> | |||||
| <img src="../../assets/icon/icon-play.png" alt="" style="width: 100px; height: 100px" /> | |||||
| </div> | </div> | ||||
| <!-- <img style="width: 100%" v-if="isVX && videoPlayBtn2" src="../../assets/img/danceImg.jpg" alt="" /> --> | |||||
| <video | |||||
| @play="videoPlayBtn2 = false" | |||||
| id="video2" | |||||
| poster="../../assets/img/danceImg.jpg" | |||||
| v-if="loading" | |||||
| :src="videoUrl2" | |||||
| ref="vidoe2" | |||||
| width="100%" | |||||
| height="100%" | |||||
| autoplay | |||||
| playsinline | |||||
| muted="muted" | |||||
| loop="loop" /> | |||||
| </div> | </div> | ||||
| <div v-if="loading" class="module_5" id="module_5"> | <div v-if="loading" class="module_5" id="module_5"> | ||||
| @@ -322,11 +337,14 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| isAndroid: false, //判断是不是ios | |||||
| inPage: false, | inPage: false, | ||||
| loading: false, // 加载状态 | loading: false, // 加载状态 | ||||
| videoUrl: '', // 视频路径 | videoUrl: '', // 视频路径 | ||||
| videoUrl2: '', // 视频路径 | |||||
| isVX: null, //判断是不是微信浏览器 | isVX: null, //判断是不是微信浏览器 | ||||
| videoPlayBtn: true, // 播放按钮显示隐藏 | videoPlayBtn: true, // 播放按钮显示隐藏 | ||||
| videoPlayBtn2: true, // 播放按钮显示隐藏 | |||||
| userName: '', | userName: '', | ||||
| phone: '', | phone: '', | ||||
| email: '', | email: '', | ||||
| @@ -522,6 +540,10 @@ export default { | |||||
| this.videoPlayBtn = false; | this.videoPlayBtn = false; | ||||
| document.getElementById('video').play(); | document.getElementById('video').play(); | ||||
| }, | }, | ||||
| playVideo2() { | |||||
| this.videoPlayBtn2 = false; | |||||
| document.getElementById('video2').play(); | |||||
| }, | |||||
| goLogin() { | goLogin() { | ||||
| this.$router.push('/myPage'); | this.$router.push('/myPage'); | ||||
| return; | return; | ||||
| @@ -615,7 +637,6 @@ export default { | |||||
| }) | }) | ||||
| }, | }, | ||||
| created() { | created() { | ||||
| // console.log(!getDeviceType()); | |||||
| // 判断是不是微信浏览器,配合做视频的自动播放 | // 判断是不是微信浏览器,配合做视频的自动播放 | ||||
| var ua = window.navigator.userAgent.toLowerCase(); | var ua = window.navigator.userAgent.toLowerCase(); | ||||
| if (ua.match(/MicroMessenger/i) == 'micromessenger') { | if (ua.match(/MicroMessenger/i) == 'micromessenger') { | ||||
| @@ -625,6 +646,20 @@ export default { | |||||
| this.isVX = false; | this.isVX = false; | ||||
| return false; | return false; | ||||
| } | } | ||||
| const deviceType = getDeviceType(); | |||||
| this.isAndroid = false; | |||||
| if (!deviceType) { | |||||
| // 设备类型为pc | |||||
| this.isAndroid = false; | |||||
| } else { | |||||
| if (deviceType[0] == 'Android') { | |||||
| // 设备类型为安卓 | |||||
| this.isAndroid = true; | |||||
| } else { | |||||
| // 其他设备 | |||||
| this.isAndroid = false; | |||||
| } | |||||
| } | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.goView('top'); | this.goView('top'); | ||||
| @@ -634,6 +669,8 @@ export default { | |||||
| this.carouselLsit = twoList; | this.carouselLsit = twoList; | ||||
| this.partnerLsit = threeList; | this.partnerLsit = threeList; | ||||
| this.videoUrl = 'https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4'; | this.videoUrl = 'https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4'; | ||||
| this.videoUrl2 = 'https://video.metavatar.cc/sv/549c903-18843089e4c/549c903-18843089e4c.mp4'; | |||||
| // this.videoUrl2 = 'https://video.metavatar.cc/sv/26e58b0-188465a550e/26e58b0-188465a550e.mp4'; | |||||
| // 监听点击来播放视频,微信浏览器禁用自动播放 | // 监听点击来播放视频,微信浏览器禁用自动播放 | ||||
| this.loading = true; | this.loading = true; | ||||
| // document.getElementById('video').play(); | // document.getElementById('video').play(); | ||||
| @@ -950,8 +987,10 @@ export default { | |||||
| } | } | ||||
| .module_3 { | .module_3 { | ||||
| position: relative; | |||||
| overflow: hidden; | overflow: hidden; | ||||
| background-color: #202020; | background-color: #202020; | ||||
| .imgBox1 { | .imgBox1 { | ||||
| width: 100%; | width: 100%; | ||||
| height: 228px; | height: 228px; | ||||
| @@ -972,6 +1011,12 @@ export default { | |||||
| height: 100%; | height: 100%; | ||||
| } | } | ||||
| } | } | ||||
| .imgBox3 { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| height: 228px; | |||||
| // background-color: #16e9d6; | |||||
| } | |||||
| } | } | ||||
| .module_4 { | .module_4 { | ||||
| overflow: hidden; | overflow: hidden; | ||||