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