HolyKnightIX 1 год назад
Родитель
Сommit
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>
<!-- 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;


Загрузка…
Отмена
Сохранить