|
|
@@ -1,15 +1,24 @@ |
|
|
|
<template>
|
|
|
|
<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%"
|
|
|
|
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="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>
|
|
|
|
|
|
|
|
<div class="desc" v-if="characters == 1">
|
|
|
@@ -17,18 +26,21 @@ |
|
|
|
<div>能为您在各种场景下7*24工作</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">
|
|
|
|
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 class="desc" v-if="characters != 1">
|
|
|
|
<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>Can work for you 7*24 in various scenarios</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="title_btn" @click="showBox">
|
|
|
@@ -39,38 +51,76 @@ |
|
|
|
</div>
|
|
|
|
|
|
|
|
<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">
|
|
|
|
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 class="imgBox">
|
|
|
|
<li style="position: relative">
|
|
|
|
<div class="images">
|
|
|
|
<li>
|
|
|
|
<img
|
|
|
|
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=""
|
|
|
|
/>
|
|
|
|
<img
|
|
|
|
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=""
|
|
|
|
/>
|
|
|
|
<div class="textInImg" v-if="characters != 1">中の人</div>
|
|
|
|
</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
|
|
|
|
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=""
|
|
|
|
/>
|
|
|
|
<img
|
|
|
|
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=""
|
|
|
|
/>
|
|
|
|
<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>
|
|
|
|
</li>
|
|
|
|
<li style="position: relative">
|
|
|
@@ -108,18 +158,10 @@ |
|
|
|
</div>
|
|
|
|
|
|
|
|
<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
|
|
|
|
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=""
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
@@ -295,6 +337,14 @@ export default { |
|
|
|
methods: {
|
|
|
|
...mapActions(["setCharacters"]),
|
|
|
|
|
|
|
|
goSetVedio(flag) {
|
|
|
|
if (flag) {
|
|
|
|
this.$refs["videoII"].play();
|
|
|
|
} else {
|
|
|
|
this.$refs["videoII"].pause();
|
|
|
|
}
|
|
|
|
this.isPlayed = !flag;
|
|
|
|
},
|
|
|
|
change(value) {
|
|
|
|
console.log(value);
|
|
|
|
this.setCharacters(value);
|
|
|
@@ -578,41 +628,30 @@ export default { |
|
|
|
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548);
|
|
|
|
background: #e7627b;
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|