| @@ -13,6 +13,66 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- isVX && videoPlayBtn --> | <!-- 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"> | <div class="module_1"> | ||||
| <!-- <video id="video" ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> | <!-- <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 { | return { | ||||
| isAndroid: false, //判断是不是ios | isAndroid: false, //判断是不是ios | ||||
| inPage: false, | inPage: false, | ||||
| isBtnActice: false, | |||||
| loading: false, // 加载状态 | loading: false, // 加载状态 | ||||
| videoUrl: "", // 视频路径 | videoUrl: "", // 视频路径 | ||||
| videoUrl2: "", // 视频路径 | videoUrl2: "", // 视频路径 | ||||
| @@ -866,6 +927,25 @@ export default { | |||||
| Toast.fail(err.message); | 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: { | computed: { | ||||
| ...mapState({ | ...mapState({ | ||||
| @@ -899,7 +979,7 @@ export default { | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.goView("top"); | this.goView("top"); | ||||
| this.startSocket(); | |||||
| this.$nextTick(() => { | this.$nextTick(() => { | ||||
| this.module_6_data = oneList; | this.module_6_data = oneList; | ||||
| this.carouselLsit = twoList; | this.carouselLsit = twoList; | ||||
| @@ -1137,6 +1217,58 @@ export default { | |||||
| height: 70px; | height: 70px; | ||||
| width: 100%; | 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 { | .module_1 { | ||||
| width: 100%; | width: 100%; | ||||
| background-color: #202020; | background-color: #202020; | ||||