| @@ -13,6 +13,66 @@ | |||
| </div> | |||
| </div> | |||
| <!-- isVX && videoPlayBtn --> | |||
| <div class="module_0"> | |||
| <!-- <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> | |||
| <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" | |||
| playsinline | |||
| > | |||
| <!-- <source type="audio/ogg" /> --> | |||
| </video> | |||
| <div class="titleBox"> | |||
| <div v-if="characters == 1"> | |||
| <div class="text1">卓越之人</div> | |||
| <div class="text2">由ChatGPT强势驱动</div> | |||
| </div> | |||
| <div v-if="characters != 1"> | |||
| <div class="text1">Powered By ChatGPT.</div> | |||
| <div class="text2">Make it human.</div> | |||
| </div> | |||
| </div> | |||
| <div | |||
| :class="isBtnActice ? 'title_btn active' : 'title_btn'" | |||
| @touchstart="chatTouchStart" | |||
| @click="goToChat" | |||
| @touchend="chatTouchEnd" | |||
| > | |||
| {{ characters == 1 ? "开始聊天" : "Let's Talk" }} | |||
| </div> | |||
| </div> | |||
| <div class="module_1"> | |||
| <!-- <video id="video" ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> | |||
| @@ -528,6 +588,7 @@ export default { | |||
| return { | |||
| isAndroid: false, //判断是不是ios | |||
| inPage: false, | |||
| isBtnActice: false, | |||
| loading: false, // 加载状态 | |||
| videoUrl: "", // 视频路径 | |||
| videoUrl2: "", // 视频路径 | |||
| @@ -866,6 +927,25 @@ export default { | |||
| Toast.fail(err.message); | |||
| }); | |||
| }, | |||
| chatTouchStart() { | |||
| console.log("chatTouchStart"); | |||
| this.isBtnActice = true; | |||
| }, | |||
| chatTouchEnd() { | |||
| console.log("chatTouchEnd"); | |||
| this.isBtnActice = false; | |||
| }, | |||
| goToChat() { | |||
| console.log("goToChat"); | |||
| this.isBtnActice = false; | |||
| }, | |||
| startSocket() { | |||
| const socket = new WebSocket("wss://43.143.227.135:8989/webrtc"); | |||
| }, | |||
| }, | |||
| computed: { | |||
| ...mapState({ | |||
| @@ -899,7 +979,7 @@ export default { | |||
| }, | |||
| mounted() { | |||
| this.goView("top"); | |||
| this.startSocket(); | |||
| this.$nextTick(() => { | |||
| this.module_6_data = oneList; | |||
| this.carouselLsit = twoList; | |||
| @@ -1137,6 +1217,58 @@ export default { | |||
| height: 70px; | |||
| width: 100%; | |||
| } | |||
| .module_0 { | |||
| width: 100%; | |||
| background-color: #202020; | |||
| // height: 100vh; | |||
| // height: 640px; | |||
| // background-color: aquamarine; | |||
| // background-image: url("../../assets/img/bg.png"); | |||
| background-repeat: no-repeat; | |||
| background-size: 100% 100%; | |||
| overflow: hidden; | |||
| position: relative; | |||
| border-bottom: 3px solid #c0c0c0; | |||
| .titleBox { | |||
| position: absolute; | |||
| color: #fff; | |||
| left: 50%; | |||
| bottom: 70%; | |||
| transform: translate(-50%, -50%); | |||
| font-size: 20px; | |||
| text-align: center; | |||
| .text1 { | |||
| margin-bottom: 10px; | |||
| } | |||
| .text2 { | |||
| text-align: center; | |||
| } | |||
| } | |||
| .title_btn { | |||
| position: absolute; | |||
| left: 50%; | |||
| bottom: 10%; | |||
| transform: translate(-50%, -50%); | |||
| height: 40px; | |||
| line-height: 35px; | |||
| width: 120px; | |||
| text-align: center; | |||
| color: #16e9d6; | |||
| border-radius: 16px; | |||
| border: #16e9d6 solid 2px; | |||
| font-size: 18px; | |||
| cursor: pointer; | |||
| transition: all 0.1s; | |||
| &.active { | |||
| color: #ffffff; | |||
| background-color: #16e9d6; | |||
| transform: translate(-50%, -50%) scale(0.9); | |||
| } | |||
| } | |||
| } | |||
| .module_1 { | |||
| width: 100%; | |||
| background-color: #202020; | |||