@@ -1,30 +1,14 @@
<template>
<template>
<div class="Box">
<div class="Box">
<div class="topBox">
<div class="more" @click="showPopup">
<div class="wire"></div>
<div class="wire"></div>
<div class="wire"></div>
</div>
</div>
<div class="module_1">
<div class="module_1">
<video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop"/>
<video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop"/>
<div class="titleBox">
<div class="titleBox">
<div class="title_item1" v-if="characters==1">打造自主数字人IP</div>
<div class="title_item1" v-if="characters==1">打造自主数字人IP</div>
<div class="title_item2" v-if="characters==1">沉淀数字资产</div>
<div class="title_item2" v-if="characters==1">沉淀数字资产</div>
<!-- <div class="title_item3" v-if="characters==1">自动化实时创作过程 帮助您快速定义形象 多种类型</div> -->
<!-- <div class="title_item3" v-if="characters==1">创造生成 超真实 超写实 风格化 不同性别</div> -->
<!-- <div class="title_item3" v-if="characters==1">多人种 分身化身随心创造</div> -->
<div class="title_item1_y" v-if="characters!=1">Create virtual human IP</div>
<div class="title_item1_y" v-if="characters!=1">Create virtual human IP</div>
<div class="title_item2" v-if="characters!=1">for your business as digital assets</div>
<div class="title_item2" v-if="characters!=1">for your business as digital assets</div>
<!-- <div
class="title_item3"
v-if="characters!=1"
>Automatic creation process, speed up character defined from months to hours Diversity character types, ultra-realistic, stylized or customized freely</div>-->
<div class="title_btn" @click="showBox">{{characters==1?'立刻体验':'Try it now'}}</div>
<div class="title_btn" @click="showBox">{{characters==1?'[立刻体验]':'Try it now'}}</div>
</div>
</div>
<div class="md1" id="md1"></div>
<div class="md1" id="md1"></div>
</div>
</div>
@@ -69,41 +53,6 @@
<img src="../../assets/img/module_3_2.png" alt>
<img src="../../assets/img/module_3_2.png" alt>
</div>
</div>
</div>
</div>
<div class="module_7">
<div
class="title"
>{{characters==1?'超写实数字人的互动全新体验':'A new interactive experience of hyper-realistic digital people'}}</div>
<div class="fillBox">
<div class="hintBox">
<div class="triangle"></div>
<div class="news1">{{characters==1?'你好,我是XXXX':"Hello, I'm XXXX"}}</div>
</div>
<div class="hintBox2">
<div class="triangle"></div>
<div class="news1">{{characters==1?'你会说英语吗?Avrli':"Do you speak English? Avrli"}}</div>
</div>
<div class="hintBox3">
<div class="triangle"></div>
<div class="news1">
<span>Which one would you like--this one or that one</span>
</div>
</div>
<div class="hintBox4">
<div class="triangle"></div>
<div class="news1">{{characters==1?'你会说英语吗?Avrli':"Do you speak English? Avrli"}}</div>
</div>
<div class="hintBox5">
<div class="triangle"></div>
<div
class="news1"
>{{characters==1?'据北京市气象局消息,丰台、石景山有雷阵雨天气':"According to the Beijing Meteorological Bureau,"}}</div>
</div>
<div class="bnt_look" @click="showBox">{{characters==1?'立刻体验':'Try it now'}}</div>
</div>
</div>
<div class="module_5" id="module_5">
<div class="module_5" id="module_5">
<img src="../../assets/img/module_5_bg2.png" alt class="module_5_bg1">
<img src="../../assets/img/module_5_bg2.png" alt class="module_5_bg1">
@@ -142,6 +91,10 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div class="module_7">
<h1>超写实数字人的互动全新体验</h1>
<img src="@/assets/img/home_3.jpg" alt="">
</div>
<!-- <div class="module_8" id="module_8">
<!-- <div class="module_8" id="module_8">
@@ -170,13 +123,13 @@
<div class="title" v-if="characters==2">ABOUT ME</div>
<div class="title" v-if="characters==2">ABOUT ME</div>
<div class="title_h" v-if="characters==1">关于我们</div>
<div class="title_h" v-if="characters==1">关于我们</div>
<div
<div
: class="characters==1?' ctn1':'ctn' "
class="ctn"
>{{characters==1?'北京邃芒科技公司正式成立于2021年8月,团队组建于2018年10月。':"Metavatar is founded in August 2021, the team built up in year 2018. "}}</div>
>{{characters==1?'北京邃芒科技公司正式成立于2021年8月,团队组建于2018年10月。':"Metavatar is founded in August 2021, the team built up in year 2018. "}}</div>
<div
<div
: class="characters==1?'c tn_c1':'ctn_c' "
class="ctn"
>{{characters==1?'3年迭代形成AI技术为基础的数字人全生产流程,拥有业界顶尖AI形象生成和驱动技术,积累了独有的亚洲超现实数字人数据资产,已成功商用于工业级影视、品牌商和直播。团队均来自科研机构及一流院所,拥有来自悉尼科技大学, 北邮,中科院,清华的博士硕士团队和行业内一流人才 。':"In the past 3 years, Metavatar has iteratively been forming the whole production process of digital human based on AI technology. We own the industry's top AI image generation and driving technology, and has accumulated unique Asian surreal digital human data assets, which have been successfully used in industrial-grade film and television, brand owners and live broadcasts. The team is from scientific research institutions and first-class institutes, with PhD and Masters from the UTS, BUPT , CAS, Tsinghua University and first-class talents in the industry."}}</div>
>{{characters==1?'3年迭代形成AI技术为基础的数字人全生产流程,拥有业界顶尖AI形象生成和驱动技术,积累了独有的亚洲超现实数字人数据资产,已成功商用于工业级影视、品牌商和直播。团队均来自科研机构及一流院所,拥有来自悉尼科技大学, 北邮,中科院,清华的博士硕士团队和行业内一流人才 。':"In the past 3 years, Metavatar has iteratively been forming the whole production process of digital human based on AI technology. We own the industry's top AI image generation and driving technology, and has accumulated unique Asian surreal digital human data assets, which have been successfully used in industrial-grade film and television, brand owners and live broadcasts. The team is from scientific research institutions and first-class institutes, with PhD and Masters from the UTS, BUPT , CAS, Tsinghua University and first-class talents in the industry."}}</div>
<div
<div
: class="characters==1?'c tn_c1':'ctn_c' "
class="ctn"
>{{characters==1?'邃芒科技专注虚拟数字人,提供未来世界数字形象巨量需求的生产力与能力,依靠技术与商业双轮驱动为用户打开元宇宙大门。':"Metavatar focus on digital human sector, provides capability of producing the massive amount requirements for the future metaverse. Vision to be the first level company as a KEY to knock out the door of metaverse; Developing the leading technology and create customer value along the way."}}</div>
>{{characters==1?'邃芒科技专注虚拟数字人,提供未来世界数字形象巨量需求的生产力与能力,依靠技术与商业双轮驱动为用户打开元宇宙大门。':"Metavatar focus on digital human sector, provides capability of producing the massive amount requirements for the future metaverse. Vision to be the first level company as a KEY to knock out the door of metaverse; Developing the leading technology and create customer value along the way."}}</div>
</div>
</div>
</div>
</div>
@@ -235,25 +188,6 @@
</div>
</div>
<div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</div>
<div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</div>
</div>
</div>
<van-popup
v-model="show"
position="top"
:style="{ width: '70%', height: '90%', 'background-color': 'rgb(255, 255, 255,0)','margin-top': '10%'}"
>
<div class="goItem" @click="goView('module_2')">{{characters==1?'产品能力':'Product'}}</div>
<div class="goItem" @click="goView('module_5')">{{characters==1?'创新技术':'Technology'}}</div>
<div class="goItem" @click="goView('module_6')">{{characters==1?'解决方案':'Solutions'}}</div>
<!-- <div class="goItem">{{characters==1?'精选案例':'Cases'}}</div> -->
<!-- @click="go('/aboutUe')" -->
<div class="goItem" @click="goView('module_9')">{{characters==1?'关于我们':'About us'}}</div>
<div class="languageImgBox" @click="change(1)">
<img src="../../assets/img/cn.jpeg" alt class="cutImg">
</div>
<div class="languageImgBox" @click="change(2)">
<img src="../../assets/img/en.jpg" alt class="cutImg">
</div>
</van-popup>
</div>
</div>
</template>
</template>
@@ -273,7 +207,6 @@ export default {
userName: "",
userName: "",
phone: "",
phone: "",
email: "",
email: "",
show: false,
form: {
form: {
name: "",
name: "",
phone: "",
phone: "",
@@ -444,10 +377,6 @@ export default {
},
},
methods: {
methods: {
...mapActions(["setCharacters"]),
...mapActions(["setCharacters"]),
showPopup() {
this.show = true;
},
change(value) {
change(value) {
this.setCharacters(value);
this.setCharacters(value);
this.show = false;
this.show = false;
@@ -616,6 +545,15 @@ export default {
width: 100%;
width: 100%;
overflow: hidden;
overflow: hidden;
}
}
.module_7{
background: #f0f4f7;
h1{
font-size: 44px;
text-align: center;
line-height: 150px;
font-weight: normal;
}
}
.topBox {
.topBox {
width: 100%;
width: 100%;
height: 30px;
height: 30px;
@@ -721,16 +659,13 @@ export default {
color: #fff;
color: #fff;
text-align: center;
text-align: center;
.title_item1 {
.title_item1 {
margin-bottom: 6px;
font-size: 18px;
font-size: 45px;
}
}
.title_item1_y {
.title_item1_y {
// margin-bottom: 14px;
font-size: 18px;
font-size: 45px;
}
}
.title_item2 {
.title_item2 {
margin-bottom: 8px;
font-size: 18px;
font-size: 45px;
}
}
.title_item3 {
.title_item3 {
font-size: 12px;
font-size: 12px;
@@ -738,14 +673,9 @@ export default {
}
}
.title_btn {
.title_btn {
margin-top: 24px;
margin-top: 24px;
height: 22px;
width: 80px;
text-align: center;
text-align: center;
line-height: 22px;
color: #fff;
color: #fff;
border-radius: 16px;
border: #fff solid 2px;
font-size: 14px;
font-size: 42px;
cursor: pointer;
cursor: pointer;
margin: 0 auto;
margin: 0 auto;
}
}
@@ -757,10 +687,10 @@ export default {
// height: 180px;
// height: 180px;
background-color: #202020;
background-color: #202020;
.title {
.title {
font-size: 18 px;
font-size: 26 px;
text-align: center;
text-align: center;
color: #fff;
color: #fff;
margin-top: 10px ;
margin: 30px 0 ;
}
}
.xian {
.xian {
width: 80%;
width: 80%;
@@ -769,20 +699,19 @@ export default {
background-color: #16e9d6;
background-color: #16e9d6;
}
}
.title_ctn {
.title_ctn {
width: 92%;
margin: 0 auto 6px auto;
font-size: 6px;
margin: 18px auto;
font-size: 20px;
color: #7e7e7e;
color: #7e7e7e;
font-family: Microsoft YaHei ;
padding: 0 7.5% ;
}
}
.title_btn {
.title_btn {
margin: 0 auto 10 px auto;
height: 22 px;
width: 8 0px;
margin:44 px auto;
height: 60 px;
width: 20 0px;
text-align: center;
text-align: center;
line-height: 22 px;
border-radius: 16 px;
font-size: 1 2px;
line-height: 60 px;
border-radius: 30 px;
font-size: 20 px;
cursor: pointer;
cursor: pointer;
color: #16e9d6;
color: #16e9d6;
border: #16e9d6 solid 1px;
border: #16e9d6 solid 1px;
@@ -794,7 +723,6 @@ export default {
background-color: #202020;
background-color: #202020;
.imgBox1 {
.imgBox1 {
width: 100%;
width: 100%;
height: 228px;
float: left;
float: left;
// background-color: #16e9d6;
// background-color: #16e9d6;
img {
img {
@@ -804,7 +732,6 @@ export default {
}
}
.imgBox2 {
.imgBox2 {
width: 100%;
width: 100%;
height: 228px;
float: right;
float: right;
// background-color: #16e9d6;
// background-color: #16e9d6;
img {
img {
@@ -871,34 +798,29 @@ export default {
overflow: hidden;
overflow: hidden;
.module_5_bg1 {
.module_5_bg1 {
width: 100%;
width: 100%;
height: 560px;
}
}
.titleBox {
.titleBox {
margin-top: 20px;
margin-top: 20px;
.title {
.title {
font-size: 20px;
font-family: Inter;
font-size: 62px;
font-weight: 600;
font-weight: 600;
margin-bottom: 28px;
margin-bottom: 28px;
color: #fff;
color: #fff;
text-align: center;
text-align: center;
}
}
.paragraph {
.paragraph {
width: 90%;
margin: 0 auto 8px auto;
font-weight: 400;
margin: 35px 7.5%;
color: #7e7e7e;
color: #7e7e7e;
font-size: 6px;
font-family: Microsoft YaHei;
font-size: 22px;
}
}
.read_btn {
.read_btn {
margin: 20 px auto;
height: 22 px;
width: 8 0px;
margin:44 px auto;
height: 60 px;
width: 20 0px;
text-align: center;
text-align: center;
line-height: 22 px;
border-radius: 16 px;
font-size: 13 px;
line-height: 60 px;
border-radius: 30 px;
font-size: 20 px;
cursor: pointer;
cursor: pointer;
color: #16e9d6;
color: #16e9d6;
border: #16e9d6 solid 1px;
border: #16e9d6 solid 1px;
@@ -910,11 +832,10 @@ export default {
margin-bottom: 40px;
margin-bottom: 40px;
overflow: hidden;
overflow: hidden;
.title {
.title {
height: 20px;
text-align: center;
text-align: center;
font-size: 16 px;
font-size: 50 px;
color: #000;
color: #000;
margin-top: 3 0px;
margin-top: 6 0px;
}
}
.imgBox {
.imgBox {
width: 96%;
width: 96%;
@@ -923,10 +844,10 @@ export default {
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-evenly;
justify-content: space-evenly;
.itemBox {
.itemBox {
width: 170 px;
height: 172 px;
width: 318 px;
height: 318 px;
position: relative;
position: relative;
margin-bottom: 10 px;
margin-bottom: 18 px;
img {
img {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
@@ -938,199 +859,12 @@ export default {
bottom: 14px;
bottom: 14px;
margin: auto;
margin: auto;
color: #fff;
color: #fff;
width: 90%;
font-size: 12px;
font-family: Microsoft YaHei;
line-height: 14px;
font-weight: 400;
font-size: 22px;
text-align: center;
text-align: center;
}
}
}
}
}
}
}
}
.module_7 {
overflow: hidden;
height: 400px;
background-color: #f0f4f7;
position: relative;
background-image: url("../../assets/img/module_7_bg.png");
background-repeat: no-repeat;
background-size: 280px 370px;
background-position: 0% 30px;
.title {
width: 98%;
margin: 0 auto;
font-size: 14px;
margin-top: 12px;
height: 20px;
text-align: center;
}
.fillBox {
position: absolute;
top: 36px;
left: 48%;
.hintBox {
overflow: hidden;
margin-top: 9px;
.triangle {
width: 0;
height: 0;
border: 8px solid transparent;
border-right-color: #fff;
float: left;
margin-top: 4px;
}
.news1 {
height: 20px;
line-height: 20px;
max-width: 150px;
padding: 4px 8px;
background: #ffffff;
box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
border-radius: 12px;
font-size: 10px;
font-family: Inter;
font-weight: 400;
color: #232324;
float: left;
}
}
.hintBox2 {
overflow: hidden;
margin-top: 14px;
margin-left: 30px;
.triangle {
width: 0;
height: 0;
border: 8px solid transparent;
border-right-color: #fff;
float: left;
margin-top: 4px;
}
.news1 {
height: 20px;
line-height: 20px;
max-width: 150px;
padding: 4px 8px;
background: #ffffff;
box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
border-radius: 12px;
font-size: 10px;
font-family: Inter;
font-weight: 400;
color: #232324;
float: left;
}
}
.hintBox3 {
overflow: hidden;
margin-top: 14px;
.triangle {
width: 0;
height: 0;
border: 8px solid transparent;
border-right-color: #fff;
float: left;
margin-top: 14px;
}
.news1 {
height: 40px;
line-height: 20px;
max-width: 150px;
padding: 4px 8px;
background: #ffffff;
box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
border-radius: 12px;
font-size: 10px;
font-family: Inter;
font-weight: 400;
color: #232324;
float: left;
}
}
.hintBox4 {
overflow: hidden;
margin-top: 14px;
margin-left: 30px;
.triangle {
width: 0;
height: 0;
border: 8px solid transparent;
border-right-color: #fff;
float: left;
margin-top: 4px;
}
.news1 {
height: 20px;
line-height: 20px;
max-width: 150px;
padding: 4px 8px;
background: #ffffff;
box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
border-radius: 12px;
font-size: 10px;
font-family: Inter;
font-weight: 400;
color: #232324;
float: left;
}
}
.hintBox5 {
overflow: hidden;
margin-top: 14px;
.triangle {
width: 0;
height: 0;
border: 8px solid transparent;
border-right-color: #fff;
float: left;
margin-top: 14px;
}
.news1 {
height: 40px;
line-height: 20px;
max-width: 150px;
padding: 4px 8px;
background: #ffffff;
box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
border-radius: 12px;
font-size: 10px;
font-family: Inter;
font-weight: 400;
color: #232324;
float: left;
span {
width: 104%;
height: 100%;
display: block;
transform: scale(0.8);
}
}
}
.bnt_look {
margin-top: 30px;
margin-left: 64px;
height: 24px;
width: 88px;
border: 1px solid #000000;
border-radius: 33px;
font-size: 14px;
font-family: Inter;
font-weight: 600;
color: #000000;
line-height: 22px;
text-align: center;
cursor: pointer;
}
}
}
.module_8 {
.module_8 {
height: 420px;
height: 420px;
background: #ffffff;
background: #ffffff;
@@ -1186,11 +920,10 @@ export default {
.weBox {
.weBox {
overflow: hidden;
overflow: hidden;
.weText {
.weText {
width: 90%;
// background-color: #191919;
// background-color: #191919;
margin: 10px auto ;
margin: 10px 7.5% ;
.conBox {
.conBox {
overflow: hidden ;
margin-bottom: 60px ;
.title {
.title {
font-size: 18px;
font-size: 18px;
font-family: Inter;
font-family: Inter;
@@ -1200,48 +933,18 @@ export default {
text-align: right;
text-align: right;
}
}
.title_h {
.title_h {
margin-top: 20px;
font-size: 16px;
font-family: Microsoft YaHei;
margin-top: 40px;
font-size: 45px;
font-weight: 400;
font-weight: 400;
color: #ffffff;
color: #ffffff;
text-align: center;
text-align: center;
}
}
.ctn {
.ctn {
width: 100%;
font-size: 6px;
font-family: Microsoft YaHei;
font-size: 22px;
font-weight: 400;
font-weight: 400;
color: #696969;
color: #696969;
// line-height: 24px;
// line-height: 24px;
margin-top: 10px;
}
.ctn_c {
width: 100%;
font-size: 6px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #696969;
// line-height: 22px;
margin-top: 16px;
}
.ctn1 {
width: 100%;
font-size: 6px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #696969;
// line-height: 20px;
margin-top: 20px;
}
.ctn_c1 {
width: 100%;
font-size: 6px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #696969;
// line-height: 20px;
margin: 10px 0;
margin-top: 38px;
}
}
}
}
}
}
@@ -1280,8 +983,7 @@ export default {
overflow: hidden;
overflow: hidden;
.timeText {
.timeText {
width: 200px;
width: 200px;
font-size: 16px;
font-family: Inter;
font-size: 20px;
font-weight: 600;
font-weight: 600;
color: #313131;
color: #313131;
line-height: 30px;
line-height: 30px;
@@ -1302,8 +1004,7 @@ export default {
.ctn {
.ctn {
width: 160px;
width: 160px;
// height: 20px;
// height: 20px;
font-size: 12px;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
font-weight: 400;
color: #313131;
color: #313131;
line-height: 24px;
line-height: 24px;
@@ -1317,13 +1018,11 @@ export default {
// margin-bottom: 30px;
// margin-bottom: 30px;
.titleBox {
.titleBox {
.title_h {
.title_h {
font-size: 16px;
font-family: Microsoft YaHei;
font-size: 44px;
font-weight: 400;
font-weight: 400;
color: #0d0912;
color: #0d0912;
line-height: 40px;
margin-left: 10px;
text-align: center;
text-align: center;
margin: 40px auto;
}
}
}
}
}
}
@@ -1332,18 +1031,11 @@ export default {
display: flex;
display: flex;
justify-content: center;
justify-content: center;
flex-wrap: wrap;
flex-wrap: wrap;
width: 200px;
margin: 0 auto;
margin: 0 auto;
.cooperationItem0 {
.cooperationItem0 {
width: 80px;
height: 30px;
margin: 5px 10px;
width: 50%;
// margin-left: 100px;
// margin-left: 100px;
img {
width: 80px;
height: 36px;
}
}
}
.cooperationItem1 {
.cooperationItem1 {
width: 80px;
width: 80px;