| @@ -19,14 +19,10 @@ | |||
| <div class="vantLoadingBox" style="height: 550px" v-show="!loading"> | |||
| <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||
| </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" /> | |||
| </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" /> --> | |||
| </video> | |||
| <div class="titleBox" @click="goLogin" :style="characters != 1 ? 'width:80%' : ''"> | |||
| @@ -96,14 +92,33 @@ | |||
| {{ characters == 1 ? '立刻体验' : 'Try it now' }} | |||
| </div> | |||
| </div> | |||
| <!-- 跳舞视频 --> | |||
| <div v-if="loading" class="module_3" id="module_3"> | |||
| <!-- <div class="imgBox1"> | |||
| <img src="../../assets/img/module_3_1.png" alt> | |||
| </div>--> | |||
| <div class="imgBox2"> | |||
| <!-- <div class="imgBox2"> | |||
| <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> | |||
| <!-- <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 v-if="loading" class="module_5" id="module_5"> | |||
| @@ -322,11 +337,14 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| isAndroid: false, //判断是不是ios | |||
| inPage: false, | |||
| loading: false, // 加载状态 | |||
| videoUrl: '', // 视频路径 | |||
| videoUrl2: '', // 视频路径 | |||
| isVX: null, //判断是不是微信浏览器 | |||
| videoPlayBtn: true, // 播放按钮显示隐藏 | |||
| videoPlayBtn2: true, // 播放按钮显示隐藏 | |||
| userName: '', | |||
| phone: '', | |||
| email: '', | |||
| @@ -522,6 +540,10 @@ export default { | |||
| this.videoPlayBtn = false; | |||
| document.getElementById('video').play(); | |||
| }, | |||
| playVideo2() { | |||
| this.videoPlayBtn2 = false; | |||
| document.getElementById('video2').play(); | |||
| }, | |||
| goLogin() { | |||
| this.$router.push('/myPage'); | |||
| return; | |||
| @@ -615,7 +637,6 @@ export default { | |||
| }) | |||
| }, | |||
| created() { | |||
| // console.log(!getDeviceType()); | |||
| // 判断是不是微信浏览器,配合做视频的自动播放 | |||
| var ua = window.navigator.userAgent.toLowerCase(); | |||
| if (ua.match(/MicroMessenger/i) == 'micromessenger') { | |||
| @@ -625,6 +646,20 @@ export default { | |||
| this.isVX = 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() { | |||
| this.goView('top'); | |||
| @@ -634,6 +669,8 @@ export default { | |||
| this.carouselLsit = twoList; | |||
| this.partnerLsit = threeList; | |||
| 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; | |||
| // document.getElementById('video').play(); | |||
| @@ -950,8 +987,10 @@ export default { | |||
| } | |||
| .module_3 { | |||
| position: relative; | |||
| overflow: hidden; | |||
| background-color: #202020; | |||
| .imgBox1 { | |||
| width: 100%; | |||
| height: 228px; | |||
| @@ -972,6 +1011,12 @@ export default { | |||
| height: 100%; | |||
| } | |||
| } | |||
| .imgBox3 { | |||
| position: relative; | |||
| width: 100%; | |||
| height: 228px; | |||
| // background-color: #16e9d6; | |||
| } | |||
| } | |||
| .module_4 { | |||
| overflow: hidden; | |||