Browse Source

upload

ctt_ywq
HolyKnightIX 2 years ago
parent
commit
74ee2c48cb
1 changed files with 109 additions and 70 deletions
  1. +109
    -70
      src/components/views/live.vue

+ 109
- 70
src/components/views/live.vue View File

@@ -1,15 +1,24 @@
<template> <template>
<div class="Box" id="top"> <div class="Box" id="top">
<div class="module_1">
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png"
<div
class="module_1"
style="position: relative; background-color: #47aa5a; height: 800px"
>
<video
ref="video"
style="position: absolute; right: -20%"
src="https://video.metavatar.cc/sv/20bbc23b-1883359e457/20bbc23b-1883359e457.mp4"
width="100%" width="100%"
height="100%" height="100%"
autoplay
muted="muted"
loop="loop"
/> />
<!-- <img src="../../assets/img/metavatar_live/suiMang_live@2x.png" width="100%" height="100%" /> -->
<div class="titleBox"> <div class="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧播</div>
<div class="title_item1" v-if="characters == 1">邃芒慧</div>
<div class="title_item1_y" v-if="characters == 1"> <div class="title_item1_y" v-if="characters == 1">
直播虚拟人自然逼真,分身真假难辨
数字人内容生产从未如此高效便捷
</div> </div>
<div class="desc" v-if="characters == 1"> <div class="desc" v-if="characters == 1">
@@ -17,18 +26,21 @@
<div>能为您在各种场景下7*24工作</div> <div>能为您在各种场景下7*24工作</div>
</div> </div>
<!-- 英文部分 --> <!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaStreaming</div>
<div class="title_item1" v-if="characters != 1">MetaStream</div>
<div class="title_item1_y" v-if="characters != 1"> <div class="title_item1_y" v-if="characters != 1">
The live broadcast virtual person is natural and lifelike,
ultra-realistic hardly to tell the differences from real human being.
Digital human content production has never been so efficient and
convenient
</div> </div>
<div class="desc" v-if="characters != 1"> <div class="desc" v-if="characters != 1">
<div> <div>
Virtual live broadcast solves real-world problems such as production
capacity of real people, IP ownership, etc. by virtual digital human
Text, voice, and source video multiple drive methods support the
production of content at any time and keep up with hot spots
</div>
<div>
High naturalness and realism let your digital human completely cross
the uncanny valley
</div> </div>
<div>Can work for you 7*24 in various scenarios</div>
</div> </div>
<div class="title_btn" @click="showBox"> <div class="title_btn" @click="showBox">
@@ -39,38 +51,76 @@
</div> </div>
<div class="module_2"> <div class="module_2">
<div class="title" v-if="characters == 1">真人无需出镜驱动数字人直播</div>
<div class="title" v-if="characters == 1">
只需
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png"
/>
步完成一条数字人视频内容生成
</div>
<div class="title" v-if="characters != 1"> <div class="title" v-if="characters != 1">
Digital live broadcasting manipulated by AI, text, voice, video etc.to
free real people workforce on camera.
Just
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png"
/>
step to complete the generation of digital human video content
</div> </div>
<div class="imgBox">
<li style="position: relative">
<div class="images">
<li>
<img <img
v-if="characters == 1" v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2x.png"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001@2x.png"
alt="" alt=""
/> />
<img <img
v-if="characters != 1" v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001_en.jpg"
alt="" alt=""
/> />
<div class="textInImg" v-if="characters != 1">中の人</div>
</li> </li>
<li style="position: relative">
<li>
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002_en.jpg"
alt=""
/>
</li>
<li>
<img <img
v-if="characters == 1" v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2x.png"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003@2x.png"
alt="" alt=""
/> />
<img <img
v-if="characters != 1" v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003_en.jpg"
alt="" alt=""
/> />
<div class="textInImg" v-if="characters != 1">
Digital live streaming
</li>
<li class="videoLi">
<div class="imgBox1" @click="goSetVedio(isPlayed)">
<img
v-if="isPlayed"
class="play"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/play.png"
title="click to play"
/>
<img
v-else
class="play"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png"
title="click to pause"
/>
<video
style=""
ref="videoII"
src="https://video.metavatar.cc/sv/20bbc23b-1883359e457/20bbc23b-1883359e457.mp4"
/>
</div> </div>
</li> </li>
<li style="position: relative"> <li style="position: relative">
@@ -108,18 +158,10 @@
</div> </div>
<div class="module_3"> <div class="module_3">
<div class="title" v-if="characters == 1">脚本驱动数字人直播</div>
<div class="title" v-if="characters != 1">
Script-driven digital human live broadcast
</div>
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png"
alt=""
/>
<div class="title" v-if="characters == 1">中之人驱动</div>
<div class="title" v-if="characters != 1">“中の人” driving</div>
<img <img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png"
alt="" alt=""
/> />
</div> </div>
@@ -295,6 +337,14 @@ export default {
methods: { methods: {
...mapActions(["setCharacters"]), ...mapActions(["setCharacters"]),
goSetVedio(flag) {
if (flag) {
this.$refs["videoII"].play();
} else {
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},
change(value) { change(value) {
console.log(value); console.log(value);
this.setCharacters(value); this.setCharacters(value);
@@ -578,41 +628,30 @@ export default {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548);
background: #e7627b; background: #e7627b;
cursor: pointer; cursor: pointer;
transition: all 0.3s;
}
.pinkCard {
position: absolute;
left: 325px;
bottom: 204px;
width: 288px;
height: 50px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
line-height: 46px;
border-radius: 4px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548);
background: #dc62e7;
cursor: pointer;
transition: all 0.3s;
}
.blueCard {
position: absolute;
right: -49px;
bottom: 51px;
width: 321px;
// height: 50px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
line-height: 46px;
border-radius: 4px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548);
background: #6462e7;
cursor: pointer;
transition: all 0.3s;
.play {
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
z-index: 99;
transition: all 0.3s;
transform: scale(10);
opacity: 0;
}
// background-color: #16e9d6;
video {
background-color: #47aa5a;
width: 423px;
height: 540px;
}
&:hover {
.play {
transform: scale(1);
opacity: 1;
}
}
} }
} }
} }


Loading…
Cancel
Save