|
|
@@ -12,14 +12,23 @@ |
|
|
|
<img class="userImg" src="../../assets/img/user center.png" alt="" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- isVX && videoPlayBtn --> |
|
|
|
<div class="module_1"> |
|
|
|
<!-- <video id="video" ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> |
|
|
|
<!-- <video ref="vidoe" src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> |
|
|
|
<div class="vantLoadingBox" style="height: 550px" v-show="!loading"> |
|
|
|
<van-loading type="spinner" color="#52d4e5" class="vantLoading" /> |
|
|
|
</div> |
|
|
|
<video id="video" v-if="loading" ref="vidoe" :src="videoUrl" width="100%" height="100%" autoplay muted="muted" loop="loop" /> |
|
|
|
<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"> |
|
|
|
<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"> |
|
|
|
<!-- <source type="audio/ogg" /> --> |
|
|
|
</video> |
|
|
|
<div class="titleBox" @click="goLogin"> |
|
|
|
<div class="title_item1" v-if="characters == 1">打造自主数字人IP</div> |
|
|
|
<div class="title_item2" v-if="characters == 1">沉淀数字资产</div> |
|
|
@@ -308,6 +317,7 @@ Vue.use(Toast); |
|
|
|
|
|
|
|
import { oneList, twoList, threeList } from './load.js'; |
|
|
|
|
|
|
|
import { getDeviceType } from '../../utils/index'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
top |
|
|
@@ -315,8 +325,10 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
inPage: false, |
|
|
|
loading: false, |
|
|
|
videoUrl: '', |
|
|
|
loading: false, // 加载状态 |
|
|
|
videoUrl: '', // 视频路径 |
|
|
|
isVX: null, //判断是不是微信浏览器 |
|
|
|
videoPlayBtn: true, // 播放按钮显示隐藏 |
|
|
|
userName: '', |
|
|
|
phone: '', |
|
|
|
email: '', |
|
|
@@ -507,6 +519,11 @@ export default { |
|
|
|
methods: { |
|
|
|
...mapActions(['setCharacters']), |
|
|
|
|
|
|
|
// 播放视频 |
|
|
|
playVideo() { |
|
|
|
this.videoPlayBtn = false; |
|
|
|
document.getElementById('video').play(); |
|
|
|
}, |
|
|
|
goLogin() { |
|
|
|
this.$router.push('/myPage'); |
|
|
|
return; |
|
|
@@ -599,25 +616,37 @@ export default { |
|
|
|
characters: state => state.publicObj.characters |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
// console.log(!getDeviceType()); |
|
|
|
// 判断是不是微信浏览器,配合做视频的自动播放 |
|
|
|
var ua = window.navigator.userAgent.toLowerCase(); |
|
|
|
if (ua.match(/MicroMessenger/i) == 'micromessenger') { |
|
|
|
this.isVX = true; |
|
|
|
return true; |
|
|
|
} else { |
|
|
|
this.isVX = false; |
|
|
|
return false; |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.goView('top'); |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
this.module_6_data = oneList; |
|
|
|
this.carouselLsit = twoList; |
|
|
|
this.partnerLsit = threeList; |
|
|
|
this.videoUrl = 'https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4'; |
|
|
|
// 监听点击来播放视频,微信浏览器禁用自动播放 |
|
|
|
document.addEventListener( |
|
|
|
'touchstart', |
|
|
|
function () { |
|
|
|
var video = document.getElementById('video'); |
|
|
|
video.play(); |
|
|
|
}, |
|
|
|
false |
|
|
|
); |
|
|
|
|
|
|
|
this.loading = true; |
|
|
|
// document.getElementById('video').play(); |
|
|
|
// document.addEventListener( |
|
|
|
// 'touchstart', |
|
|
|
// // 'WeixinJSBridgeReady', |
|
|
|
// function () { |
|
|
|
// document.getElementById('video').play(); |
|
|
|
// }, |
|
|
|
// false |
|
|
|
// ); |
|
|
|
}); |
|
|
|
|
|
|
|
new Swiper('.swiper-container', { |
|
|
|