@@ -20,10 +20,10 @@ | |||||
<el-dropdown-item command="MetaGene"> | <el-dropdown-item command="MetaGene"> | ||||
{{ characters == 1 ? "邃芒慧生" : "MetaGene" }} | {{ characters == 1 ? "邃芒慧生" : "MetaGene" }} | ||||
</el-dropdown-item> | </el-dropdown-item> | ||||
<el-dropdown-item command="MetaManeuver">{{ | |||||
<el-dropdown-item command="MetaNeuver">{{ | |||||
characters == 1 ? "邃芒慧影" : "MetaNeuver" | characters == 1 ? "邃芒慧影" : "MetaNeuver" | ||||
}}</el-dropdown-item> | }}</el-dropdown-item> | ||||
<el-dropdown-item command="MetaStream">{{ | |||||
<el-dropdown-item command="MetaStreaming">{{ | |||||
characters == 1 ? "邃芒慧播" : "MetaStreaming" | characters == 1 ? "邃芒慧播" : "MetaStreaming" | ||||
}}</el-dropdown-item> | }}</el-dropdown-item> | ||||
<el-dropdown-item command="MetaTuring">{{ | <el-dropdown-item command="MetaTuring">{{ | ||||
@@ -1,42 +1,34 @@ | |||||
<template> | <template> | ||||
<div class="Box" id="top"> | <div class="Box" id="top"> | ||||
<div class="module_1"> | <div class="module_1"> | ||||
<video | |||||
ref="video" | |||||
src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4" | |||||
<img | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png" | |||||
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"> | ||||
<div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div> | |||||
<div>高自然度,逼真度让您的数字人完全跨过恐怖谷</div> | |||||
<div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | |||||
<div>能为您在各种场景下7*24工作</div> | |||||
</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"> | <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> | ||||
<div class="desc" v-if="characters != 1"> | <div class="desc" v-if="characters != 1"> | ||||
<div> | <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> | ||||
<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"> | ||||
@@ -47,83 +39,87 @@ | |||||
</div> | </div> | ||||
<div class="module_2"> | <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"> | <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> | ||||
<div class="images"> | |||||
<li> | |||||
<div class="imgBox"> | |||||
<li style="position: relative"> | |||||
<img | <img | ||||
v-if="characters == 1" | v-if="characters == 1" | ||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001@2x.png" | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@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_live/001_en.jpg" | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png" | |||||
alt="" | alt="" | ||||
/> | /> | ||||
<div class="textInImg" v-if="characters != 1">中の人</div> | |||||
</li> | </li> | ||||
<li> | |||||
<li style="position: relative"> | |||||
<img | <img | ||||
v-if="characters == 1" | 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/imgList2@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_live/002_en.jpg" | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png" | |||||
alt="" | alt="" | ||||
/> | /> | ||||
<div class="textInImg" v-if="characters != 1"> | |||||
Digital live streaming | |||||
</div> | |||||
</li> | </li> | ||||
<li> | |||||
<li style="position: relative"> | |||||
<img | <img | ||||
v-if="characters == 1" | 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/imgList3@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_live/003_en.jpg" | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2xEnglish.png" | |||||
alt="" | alt="" | ||||
/> | /> | ||||
<div class="textInImg" v-if="characters != 1">Toonman live</div> | |||||
</li> | </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 ref="videoII" src="../../assets/video/video2.mp4" /> | |||||
</div> | |||||
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> --> | |||||
</li> | |||||
<div class="redCard" v-if="characters == 1">无缝接入各主流平台</div> | |||||
<div class="redCard" v-if="characters != 1"> | |||||
Seamless access to all platforms, tictok,intagram, facebook,wechat | |||||
etc. | |||||
</div> | |||||
<div class="pinkCard" v-if="characters == 1"> | |||||
IP版权归属明确 无后顾之忧 | |||||
</div> | |||||
<div class="pinkCard" v-if="characters != 1"> | |||||
No IP copyright concerns | |||||
</div> | |||||
<div class="blueCard" v-if="characters == 1"> | |||||
出镜声形从此统一 打造沉淀企业IP | |||||
</div> | |||||
<div class="blueCard" v-if="characters != 1"> | |||||
Unified voice and appearance for digital IP of the precipitation | |||||
enterprise will be created。 | |||||
</div> | |||||
</div> | </div> | ||||
</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">“中の人” 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 | <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@2x.png" | |||||
alt="" | |||||
/> | |||||
<img | |||||
v-if="characters != 1" | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png" | |||||
alt="" | alt="" | ||||
/> | /> | ||||
</div> | </div> | ||||
@@ -180,9 +176,9 @@ import { mapState, mapActions } from "vuex"; | |||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
isPlayed: true, | |||||
//零时存放 | //零时存放 | ||||
charactersMy: 1, | charactersMy: 1, | ||||
// | // | ||||
userName: "", | userName: "", | ||||
@@ -299,14 +295,6 @@ 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); | ||||
@@ -482,11 +470,10 @@ export default { | |||||
.titleBox { | .titleBox { | ||||
width: 36%; | width: 36%; | ||||
position: absolute; | position: absolute; | ||||
top: 390px; | |||||
top: 240px; | |||||
left: 194px; | left: 194px; | ||||
overflow: hidden; | overflow: hidden; | ||||
// color: #323232; | |||||
color: #fff; | |||||
color: #fefefe; | |||||
.title_item1 { | .title_item1 { | ||||
margin-bottom: 14px; | margin-bottom: 14px; | ||||
font-size: 60px; | font-size: 60px; | ||||
@@ -509,11 +496,9 @@ export default { | |||||
width: 220px; | width: 220px; | ||||
text-align: center; | text-align: center; | ||||
line-height: 60px; | line-height: 60px; | ||||
color: #fff; | |||||
// color: #323232; | |||||
color: #fefefe; | |||||
border-radius: 40px; | border-radius: 40px; | ||||
border: #fff solid 3px; | |||||
// border: #323232 solid 3px; | |||||
border: #fefefe solid 3px; | |||||
font-size: 18px; | font-size: 18px; | ||||
cursor: pointer; | cursor: pointer; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
@@ -530,93 +515,124 @@ export default { | |||||
} | } | ||||
} | } | ||||
.module_2 { | .module_2 { | ||||
height: 760px; | |||||
height: 810px; | |||||
background: #ffffff; | background: #ffffff; | ||||
padding-top: 32px; | padding-top: 32px; | ||||
padding-left: 116px; | |||||
padding-right: 85px; | |||||
padding-left: 331px; | |||||
padding-right: 306px; | |||||
.title { | .title { | ||||
text-align: center; | text-align: center; | ||||
margin-bottom: 72px; | |||||
margin-bottom: 52px; | |||||
font-size: 36px; | font-size: 36px; | ||||
img { | |||||
position: relative; | |||||
top: 18px; | |||||
width: 59px; | |||||
height: 60px; | |||||
} | |||||
} | } | ||||
.images { | |||||
.imgBox { | |||||
display: flex; | display: flex; | ||||
position: relative; | |||||
justify-content: space-between; | justify-content: space-between; | ||||
text-align: center; | |||||
li { | li { | ||||
list-style: none; | list-style: none; | ||||
margin-right: 9px; | |||||
> img { | |||||
margin-right: 7px; | |||||
.textInImg { | |||||
position: absolute; | |||||
top: 20px; | |||||
left: 20px; | |||||
width: 10px; | |||||
font-size: 35px; | |||||
line-height: 35px; | |||||
color: #fff; | |||||
font-weight: 900; | |||||
transition: all 0.3s; | |||||
} | |||||
img { | |||||
width: 423px; | width: 423px; | ||||
height: 540px; | |||||
height: 639px; | |||||
cursor: pointer; | cursor: pointer; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
&:hover { | &:hover { | ||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.548); | |||||
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.548); | |||||
transform: translateY(-20px); | |||||
} | |||||
&:hover ~ .textInImg { | |||||
transform: translateY(-20px); | transform: translateY(-20px); | ||||
} | } | ||||
} | } | ||||
img:hover .textInImg { | |||||
top: -5px; | |||||
} | |||||
} | } | ||||
} | |||||
.videoLi { | |||||
overflow: hidden; | |||||
.imgBox1 { | |||||
position: relative; | |||||
float: left; | |||||
width: 100%; | |||||
height: 100%; | |||||
.redCard { | |||||
position: absolute; | |||||
left: -111px; | |||||
bottom: 69px; | |||||
width: 230px; | |||||
// height: 50px; | |||||
font-size: 18px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
text-align: center; | |||||
color: #ffffff; | |||||
line-height: 46px; | |||||
border-radius: 4px; | |||||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | |||||
background: #e7627b; | |||||
cursor: pointer; | 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 { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
&: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; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.module_3 { | .module_3 { | ||||
height: 810px; | |||||
height: 700px; | |||||
background-color: #ebeef7; | background-color: #ebeef7; | ||||
padding-top: 33px; | padding-top: 33px; | ||||
text-align: center; | text-align: center; | ||||
.title { | .title { | ||||
text-align: center; | text-align: center; | ||||
font-size: 48px; | |||||
font-size: 36px; | |||||
font-family: Microsoft YaHei; | font-family: Microsoft YaHei; | ||||
font-weight: 400; | font-weight: 400; | ||||
color: #4d4d4d; | color: #4d4d4d; | ||||
line-height: 36px; | line-height: 36px; | ||||
margin-bottom: 44px; | |||||
margin-bottom: -25px; | |||||
} | } | ||||
img { | img { | ||||
width: 1250px; | |||||
height: 665px; | |||||
width: 1446px; | |||||
height: 638px; | |||||
opacity: 0.85; | opacity: 0.85; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
&:hover { | &:hover { | ||||
@@ -1,34 +1,42 @@ | |||||
<template> | <template> | ||||
<div class="Box" id="top"> | <div class="Box" id="top"> | ||||
<div class="module_1"> | <div class="module_1"> | ||||
<img | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png" | |||||
<video | |||||
ref="video" | |||||
src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.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"> | ||||
<div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | |||||
<div>能为您在各种场景下7*24工作</div> | |||||
<div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div> | |||||
<div>高自然度,逼真度让您的数字人完全跨过恐怖谷</div> | |||||
</div> | </div> | ||||
<!-- 英文部分 --> | <!-- 英文部分 --> | ||||
<div class="title_item1" v-if="characters != 1">MetaManeuver</div> | |||||
<div class="title_item1" v-if="characters != 1">MetaNeuver</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,87 +47,83 @@ | |||||
</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 | <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/002@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/002_en.jpg" | |||||
alt="" | alt="" | ||||
/> | /> | ||||
<div class="textInImg" v-if="characters != 1"> | |||||
Digital live streaming | |||||
</div> | |||||
</li> | </li> | ||||
<li style="position: relative"> | |||||
<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/imgList3@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/imgList3@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">Toonman live</div> | |||||
</li> | </li> | ||||
<div class="redCard" v-if="characters == 1">无缝接入各主流平台</div> | |||||
<div class="redCard" v-if="characters != 1"> | |||||
Seamless access to all platforms, tictok,intagram, facebook,wechat | |||||
etc. | |||||
</div> | |||||
<div class="pinkCard" v-if="characters == 1"> | |||||
IP版权归属明确 无后顾之忧 | |||||
</div> | |||||
<div class="pinkCard" v-if="characters != 1"> | |||||
No IP copyright concerns | |||||
</div> | |||||
<div class="blueCard" v-if="characters == 1"> | |||||
出镜声形从此统一 打造沉淀企业IP | |||||
</div> | |||||
<div class="blueCard" v-if="characters != 1"> | |||||
Unified voice and appearance for digital IP of the precipitation | |||||
enterprise will be created。 | |||||
</div> | |||||
<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 ref="videoII" src="../../assets/video/video2.mp4" /> | |||||
</div> | |||||
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> --> | |||||
</li> | |||||
</div> | </div> | ||||
</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> | |||||
<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@2x.png" | |||||
alt="" | |||||
/> | |||||
<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> | ||||
@@ -176,9 +180,9 @@ import { mapState, mapActions } from "vuex"; | |||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
isPlayed: true, | |||||
//零时存放 | //零时存放 | ||||
charactersMy: 1, | charactersMy: 1, | ||||
// | // | ||||
userName: "", | userName: "", | ||||
@@ -295,6 +299,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); | ||||
@@ -470,10 +482,11 @@ export default { | |||||
.titleBox { | .titleBox { | ||||
width: 36%; | width: 36%; | ||||
position: absolute; | position: absolute; | ||||
top: 240px; | |||||
top: 390px; | |||||
left: 194px; | left: 194px; | ||||
overflow: hidden; | overflow: hidden; | ||||
color: #fefefe; | |||||
// color: #323232; | |||||
color: #fff; | |||||
.title_item1 { | .title_item1 { | ||||
margin-bottom: 14px; | margin-bottom: 14px; | ||||
font-size: 60px; | font-size: 60px; | ||||
@@ -496,9 +509,11 @@ export default { | |||||
width: 220px; | width: 220px; | ||||
text-align: center; | text-align: center; | ||||
line-height: 60px; | line-height: 60px; | ||||
color: #fefefe; | |||||
color: #fff; | |||||
// color: #323232; | |||||
border-radius: 40px; | border-radius: 40px; | ||||
border: #fefefe solid 3px; | |||||
border: #fff solid 3px; | |||||
// border: #323232 solid 3px; | |||||
font-size: 18px; | font-size: 18px; | ||||
cursor: pointer; | cursor: pointer; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
@@ -515,124 +530,93 @@ export default { | |||||
} | } | ||||
} | } | ||||
.module_2 { | .module_2 { | ||||
height: 810px; | |||||
height: 760px; | |||||
background: #ffffff; | background: #ffffff; | ||||
padding-top: 32px; | padding-top: 32px; | ||||
padding-left: 331px; | |||||
padding-right: 306px; | |||||
padding-left: 116px; | |||||
padding-right: 85px; | |||||
.title { | .title { | ||||
text-align: center; | text-align: center; | ||||
margin-bottom: 52px; | |||||
margin-bottom: 72px; | |||||
font-size: 36px; | font-size: 36px; | ||||
img { | |||||
position: relative; | |||||
top: 18px; | |||||
width: 59px; | |||||
height: 60px; | |||||
} | |||||
} | } | ||||
.imgBox { | |||||
.images { | |||||
display: flex; | display: flex; | ||||
position: relative; | |||||
justify-content: space-between; | justify-content: space-between; | ||||
text-align: center; | |||||
li { | li { | ||||
list-style: none; | list-style: none; | ||||
margin-right: 7px; | |||||
.textInImg { | |||||
position: absolute; | |||||
top: 20px; | |||||
left: 20px; | |||||
width: 10px; | |||||
font-size: 35px; | |||||
line-height: 35px; | |||||
color: #fff; | |||||
font-weight: 900; | |||||
transition: all 0.3s; | |||||
} | |||||
img { | |||||
margin-right: 9px; | |||||
> img { | |||||
width: 423px; | width: 423px; | ||||
height: 639px; | |||||
height: 540px; | |||||
cursor: pointer; | cursor: pointer; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
&:hover { | &:hover { | ||||
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.548); | |||||
transform: translateY(-20px); | |||||
} | |||||
&:hover ~ .textInImg { | |||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.548); | |||||
transform: translateY(-20px); | transform: translateY(-20px); | ||||
} | } | ||||
} | } | ||||
img:hover .textInImg { | |||||
top: -5px; | |||||
} | |||||
} | } | ||||
.redCard { | |||||
position: absolute; | |||||
left: -111px; | |||||
bottom: 69px; | |||||
width: 230px; | |||||
// height: 50px; | |||||
font-size: 18px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
text-align: center; | |||||
color: #ffffff; | |||||
line-height: 46px; | |||||
border-radius: 4px; | |||||
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; | |||||
} | |||||
.videoLi { | |||||
overflow: hidden; | |||||
.imgBox1 { | |||||
position: relative; | |||||
float: left; | |||||
width: 100%; | |||||
height: 100%; | |||||
cursor: pointer; | 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 { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
&:hover { | |||||
.play { | |||||
transform: scale(1); | |||||
opacity: 1; | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.module_3 { | .module_3 { | ||||
height: 700px; | |||||
height: 810px; | |||||
background-color: #ebeef7; | background-color: #ebeef7; | ||||
padding-top: 33px; | padding-top: 33px; | ||||
text-align: center; | text-align: center; | ||||
.title { | .title { | ||||
text-align: center; | text-align: center; | ||||
font-size: 36px; | |||||
font-size: 48px; | |||||
font-family: Microsoft YaHei; | font-family: Microsoft YaHei; | ||||
font-weight: 400; | font-weight: 400; | ||||
color: #4d4d4d; | color: #4d4d4d; | ||||
line-height: 36px; | line-height: 36px; | ||||
margin-bottom: -25px; | |||||
margin-bottom: 44px; | |||||
} | } | ||||
img { | img { | ||||
width: 1446px; | |||||
height: 638px; | |||||
width: 1250px; | |||||
height: 665px; | |||||
opacity: 0.85; | opacity: 0.85; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
&:hover { | &:hover { | ||||
@@ -36,9 +36,9 @@ const routes = [ | |||||
component: () => import("../components/views/turing"), | component: () => import("../components/views/turing"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/MetaStream', | |||||
path: '/MetaStreaming', | |||||
name: 'live', | name: 'live', | ||||
component: () => import("../components/views/shadow"), | |||||
component: () => import("../components/views/live"), | |||||
}, | }, | ||||
{ | { | ||||
path: '/MetaGene', | path: '/MetaGene', | ||||
@@ -46,9 +46,9 @@ const routes = [ | |||||
component: () => import("../components/views/generate"), | component: () => import("../components/views/generate"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/MetaManeuver', | |||||
path: '/MetaNeuver', | |||||
name: 'shadow', | name: 'shadow', | ||||
component: () => import("../components/views/live"), | |||||
component: () => import("../components/views/shadow"), | |||||
}, | }, | ||||
] | ] | ||||