浏览代码

upload

rtc
HolyKnightIX 1年前
父节点
当前提交
094c871e19
共有 1 个文件被更改,包括 133 次插入1 次删除
  1. +133
    -1
      src/components/home/home.vue

+ 133
- 1
src/components/home/home.vue 查看文件

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


正在加载...
取消
保存