|
|
@@ -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;
|
|
|
|