Kaynağa Gözat

upload

ctt_ywq
HolyKnightIX 2 yıl önce
ebeveyn
işleme
ac5049eb5b
1 değiştirilmiş dosya ile 70 ekleme ve 109 silme
  1. +70
    -109
      src/components/views/live.vue

+ 70
- 109
src/components/views/live.vue Dosyayı Görüntüle

@@ -1,24 +1,15 @@
<template>
<div class="Box" id="top">
<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"
<div class="module_1">
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png"
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">
@@ -26,21 +17,18 @@
<div>能为您在各种场景下7*24工作</div>
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaStream</div>
<div class="title_item1" v-if="characters != 1">MetaStreaming</div>
<div class="title_item1_y" v-if="characters != 1">
Digital human content production has never been so efficient and
convenient
The live broadcast virtual person is natural and lifelike,
ultra-realistic hardly to tell the differences from real human being.
</div>
<div class="desc" v-if="characters != 1">
<div>
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
Virtual live broadcast solves real-world problems such as production
capacity of real people, IP ownership, etc. by virtual digital human
</div>
<div>Can work for you 7*24 in various scenarios</div>
</div>
<div class="title_btn" @click="showBox">
@@ -51,76 +39,38 @@
</div>
<div class="module_2">
<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>
<div class="title" v-if="characters != 1">
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
Digital live broadcasting manipulated by AI, text, voice, video etc.to
free real people workforce on camera.
</div>
<div class="images">
<li>
<img
v-if="characters == 1"
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_live/001_en.jpg"
alt=""
/>
</li>
<li>
<div class="imgBox">
<li style="position: relative">
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002@2x.png"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@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"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png"
alt=""
/>
<div class="textInImg" v-if="characters != 1">中の人</div>
</li>
<li>
<li style="position: relative">
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003@2x.png"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003_en.jpg"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png"
alt=""
/>
</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 class="textInImg" v-if="characters != 1">
Digital live streaming
</div>
</li>
<li style="position: relative">
@@ -158,10 +108,18 @@
</div>
<div class="module_3">
<div class="title" v-if="characters == 1">中之人驱动</div>
<div class="title" v-if="characters != 1">“中の人” driving</div>
<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=""
/>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png"
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png"
alt=""
/>
</div>
@@ -337,14 +295,6 @@ 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);
@@ -628,30 +578,41 @@ export default {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548);
background: #e7627b;
cursor: pointer;
.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;
}
}
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;
}
}
}


Yükleniyor…
İptal
Kaydet