Автор | SHA1 | Повідомлення | Дата |
---|---|---|---|
|
7b224011d6 | 视频人脸 | 2 роки тому |
|
40dd98afda | 精选案例 | 2 роки тому |
|
027f5a6714 | 修改首页适配 | 2 роки тому |
|
ae1f1d4687 | edit 适配 | 2 роки тому |
@@ -1,10 +1,26 @@ | |||
module.exports = { | |||
"plugins": { | |||
"autoprefixer": {}, | |||
"postcss-px2rem": { | |||
"remUnit": 37.5 | |||
} | |||
} | |||
module.exports = ({ file }) => { | |||
let isVant = file && file.dirname && file.dirname.indexOf('vant') > -1 | |||
let rootValue = isVant ? 37.5 : 72 // 判断条件 请自行调整 | |||
return { | |||
"plugins": { | |||
// 兼容浏览器,添加前缀 | |||
"autoprefixer": { | |||
overrideBrowserslist: [ | |||
"Android 4.1", | |||
"iOS 7.1", | |||
"Chrome > 31", | |||
"ff > 31", | |||
"ie >= 8", | |||
"last 10 versions", // 所有主流浏览器最近10版本用 | |||
], | |||
grid: true, | |||
}, | |||
"postcss-pxtorem": { | |||
rootValue: rootValue,//本项目设计图宽度是750px。其他项目需自己换算 【设计图宽度/10】 | |||
propList: ["*"], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*'] | |||
unitPrecision: 6, //保留rem小数点多少位 | |||
minPixelValue: 2, //px小于2的不会被转换 | |||
} | |||
} | |||
} | |||
} | |||
@@ -1,5 +1,5 @@ | |||
{ | |||
"name": "Metavatar", | |||
"name": "metavatar", | |||
"version": "0.1.0", | |||
"private": true, | |||
"scripts": { | |||
@@ -7,9 +7,9 @@ | |||
"build": "vue-cli-service build" | |||
}, | |||
"dependencies": { | |||
"amfe-flexible": "^2.2.1", | |||
"axios": "^0.27.2", | |||
"lib-flexible": "^0.3.2", | |||
"postcss-px2rem": "^0.3.0", | |||
"postcss-pxtorem": "^5.1.1", | |||
"register-service-worker": "^1.7.1", | |||
"swiper": "^4.5.1", | |||
"vant": "^2.12.48", | |||
@@ -18,7 +18,6 @@ | |||
"vuex": "^3.4.0" | |||
}, | |||
"devDependencies": { | |||
"@vue/cli-plugin-pwa": "~4.5.13", | |||
"@vue/cli-plugin-router": "~4.5.13", | |||
"@vue/cli-plugin-vuex": "~4.5.13", | |||
"@vue/cli-service": "~4.5.13", | |||
@@ -1,3 +0,0 @@ | |||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/> | |||
</svg> |
@@ -1,9 +1,16 @@ | |||
<!-- | |||
* @Autor: Chuting | |||
* @Date: 2022-08-08 14:25:11 | |||
* @LastEditors: Chuting | |||
* @LastEditTime: 2022-08-13 22:03:19 | |||
* @Description: | |||
--> | |||
<!DOCTYPE html> | |||
<html lang=""> | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | |||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0 "> | |||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||
<title><%= htmlWebpackPlugin.options.title %></title> | |||
@@ -1,2 +0,0 @@ | |||
User-agent: * | |||
Disallow: |
@@ -1,7 +1,8 @@ | |||
<template> | |||
<div id="app"> | |||
<top/> | |||
<transition name="app" mode="out-in"> | |||
<transition name="app" mode="out-in" v-if="flag"> | |||
<router-view></router-view> | |||
</transition> | |||
<tail/> | |||
@@ -16,8 +17,16 @@ export default { | |||
tail | |||
}, | |||
data(){ | |||
return{} | |||
return{ | |||
flag: false | |||
} | |||
}, | |||
created() { | |||
var that = this | |||
setTimeout(function() { | |||
that.flag = true | |||
}, 2000) | |||
} | |||
} | |||
</script> | |||
@@ -0,0 +1,9 @@ | |||
*{ | |||
margin: 0; | |||
padding: 0; | |||
box-sizing: border-box; | |||
} | |||
img{ | |||
width: 100%; | |||
display: block; | |||
} |
@@ -0,0 +1,82 @@ | |||
<template> | |||
<div class="about"> | |||
<h1>{{about[characters].title1}}</h1> | |||
<img src="@/assets/img/about_1.png" alt=""> | |||
<p>{{about[characters].desc1}}</p> | |||
<img src="@/assets/img/about_2.png" alt=""> | |||
<h2>{{about[characters].title2}}</h2> | |||
<p>{{about[characters].desc2}}</p> | |||
<h2>{{about[characters].title3}}</h2> | |||
<p>{{about[characters].desc3}}</p> | |||
</div> | |||
</template> | |||
<script> | |||
import { mapState } from 'vuex' | |||
export default { | |||
data() { | |||
return { | |||
about: { | |||
1: { | |||
title1: '遂芒科技', | |||
desc1: `2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 449.4 亿元, | |||
同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,中国 | |||
企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。`, | |||
title2: '团队介绍', | |||
desc2: `2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%; | |||
完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 4 | |||
49.4 亿元,同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行 | |||
业唯一新签合同额 | |||
营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位, | |||
中国企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续 | |||
保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位 | |||
进一步巩固。`, | |||
title3: `公司愿景`, | |||
desc3: `2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%; | |||
完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 4 | |||
49.4 亿元,同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行 | |||
业唯一新签合同额 | |||
营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位, | |||
中国企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续 | |||
保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位 | |||
进一步巩固。` | |||
} | |||
} | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.about{ | |||
background: #202020; | |||
width: 100%; | |||
padding-top: 135px; | |||
padding-bottom: 80px; | |||
h1,h2{ | |||
font-size: 42px; | |||
color: #fff; | |||
text-align: center; | |||
margin-bottom: 35px; | |||
} | |||
h2{ | |||
margin: 70px; | |||
} | |||
p{ | |||
background: #2f2f2f; | |||
width: 90%; | |||
padding: 34px; | |||
font-size: 26px; | |||
line-height: 42px; | |||
color: #fff; | |||
margin: 40px auto; | |||
&:last-child { | |||
margin: 0 auto; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,87 @@ | |||
<template> | |||
<div class="case"> | |||
<div v-for="(item, index) in caseList[characters]" :key="index"> | |||
<h6>{{ item.title }}</h6> | |||
<p>{{ item.content }}</p> | |||
<img :src="item.imgUrl" alt=""> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { mapState } from 'vuex' | |||
export default { | |||
data() { | |||
return { | |||
caseList:{ | |||
1:[ | |||
{ | |||
title: 'TICOKOM直播小美', | |||
content: '当你不再寻觅,你想要的也就来了。真正的获利是安安静静的,一点都不折腾!今年一年真正做好几个股票只操作个几次就已经够复利百分将近', | |||
imgUrl: require('@/assets/img/case_1.png') | |||
}, | |||
{ | |||
title: 'TICOKOM直播小美', | |||
content: '当你不再寻觅,你想要的也就来了。真正的获利是安安静静的,一点都不折腾!今年一年真正做好几个股票只操作个几次就已经够复利百分将近', | |||
imgUrl: require('@/assets/img/case_2.png') | |||
}, | |||
{ | |||
title: 'TICOKOM直播小美', | |||
content: '当你不再寻觅,你想要的也就来了。真正的获利是安安静静的,一点都不折腾!今年一年真正做好几个股票只操作个几次就已经够复利百分将近', | |||
imgUrl: require('@/assets/img/case_3.png') | |||
} | |||
], | |||
2: [ | |||
{ | |||
title: 'TICOKOM直播小美enenen', | |||
content: '当你不再寻觅,你想要的也就来了。真正的获利是安安静静的,一点都不折腾!今年一年真正做好几个股票只操作个几次就已经够复利百分将近', | |||
imgUrl: require('@/assets/img/case_1.png') | |||
}, | |||
{ | |||
title: 'TICOKOM直播小美', | |||
content: '当你不再寻觅,你想要的也就来了。真正的获利是安安静静的,一点都不折腾!今年一年真正做好几个股票只操作个几次就已经够复利百分将近', | |||
imgUrl: require('@/assets/img/case_2.png') | |||
}, | |||
{ | |||
title: 'TICOKOM直播小美', | |||
content: '当你不再寻觅,你想要的也就来了。真正的获利是安安静静的,一点都不折腾!今年一年真正做好几个股票只操作个几次就已经够复利百分将近', | |||
imgUrl: require('@/assets/img/case_3.png') | |||
} | |||
] | |||
} | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.case{ | |||
background: #d7d8de; | |||
padding: 100px 0 36px; | |||
div { | |||
width: 100%; | |||
margin: 0 auto; | |||
h6 { | |||
font-size: 28px; | |||
font-weight: 400; | |||
color: #000000; | |||
margin: 36px 65px 0; | |||
} | |||
p{ | |||
font-size: 18px; | |||
font-weight: 400; | |||
color: #000000; | |||
line-height: 42px; | |||
margin: 22px 65px 14px; | |||
} | |||
img{ | |||
width: 96%; | |||
margin: 0 auto; | |||
} | |||
} | |||
} | |||
</style> |
@@ -26,7 +26,7 @@ | |||
<div class="tailText"> <img src="../../assets/img/logoh.png" alt=""></div> | |||
<div class="tailText">TEL:86 152 1093 7300</div> | |||
<div class="tailText">{{characters ==1?'北京市海淀区中关村南大街12号农业科学院信息楼311室':'311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing'}}</div> | |||
<div class="tailText">© 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号</div> | |||
<div class="tailText tailText3">© 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号</div> | |||
</div> | |||
</template> | |||
<script> | |||
@@ -100,10 +100,10 @@ export default { | |||
overflow: hidden; | |||
.title{ | |||
text-align: center; | |||
font-size: 18px; | |||
font-size: 44px; | |||
line-height: 30px; | |||
color: #323232; | |||
margin-top: 20px; | |||
margin-top: 42px; | |||
} | |||
overflow: hidden; | |||
// height: 578px; | |||
@@ -147,14 +147,16 @@ export default { | |||
margin: 10px auto; | |||
.contentInput { | |||
width: 220px; | |||
height: 36px; | |||
width: 90%; | |||
height: 90px; | |||
background: #ffffff; | |||
text-align: center; | |||
margin: 0 auto 10px auto; | |||
margin: 0 auto 16px auto; | |||
// border-radius: 30px; | |||
input { | |||
width: 200px; | |||
height: 36px; | |||
width: 90%; | |||
height: 90px; | |||
font-size: 30px; | |||
} | |||
input::placeholder { | |||
font-weight: 400; | |||
@@ -162,14 +164,14 @@ export default { | |||
} | |||
} | |||
.subBtn { | |||
width: 70px; | |||
height: 24px; | |||
width: 50%; | |||
height: 90px; | |||
background: #ffffff; | |||
border-radius: 24px; | |||
border-radius: 50px; | |||
text-align: center; | |||
line-height: 24px; | |||
line-height: 90px; | |||
cursor: pointer; | |||
font-size: 14px; | |||
font-size: 30px; | |||
margin: 20px auto 10px auto; | |||
} | |||
} | |||
@@ -245,40 +247,41 @@ export default { | |||
color: #696969 !important; | |||
} | |||
.tailText { | |||
height: 20px; | |||
line-height: 20px; | |||
// margin-top: 10px; | |||
text-align: center; | |||
font-size: 10px; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #191919; | |||
margin-bottom: 4px; | |||
font-size: 22px; | |||
color: #707070; | |||
margin-bottom: 10px; | |||
-webkit-text-size-adjust: none; | |||
text-size-adjust: none; | |||
img{ | |||
width: 110px; | |||
height: 30px; | |||
width: 300px; | |||
margin: 20px auto; | |||
} | |||
} | |||
.tailText3{ | |||
font-size: 16px; | |||
margin-bottom: 66px; | |||
} | |||
} | |||
::-webkit-input-placeholder { | |||
/* WebKit browsers,webkit内核浏览器 */ | |||
color: #ccc; | |||
font-size: 12px; | |||
font-size: 30px; | |||
} | |||
:-moz-placeholder { | |||
/* Mozilla Firefox 4 to 18 */ | |||
color: #ccc; | |||
font-size: 12px; | |||
font-size: 30px; | |||
} | |||
::-moz-placeholder { | |||
/* Mozilla Firefox 19+ */ | |||
color: #ccc; | |||
font-size: 12px; | |||
font-size: 30px; | |||
} | |||
:-ms-input-placeholder { | |||
/* Internet Explorer 10+ */ | |||
color: #ccc; | |||
font-size: 12px; | |||
font-size: 30px; | |||
} | |||
</style> | |||
@@ -19,23 +19,6 @@ | |||
<div class="wire"></div> | |||
<div class="wire"></div> | |||
</div> | |||
<!-- <el-select v-model="charactersMy" placeholder="请选择" @change="change"> | |||
<el-option | |||
v-for="item in languageLsit" | |||
:key="item.value" | |||
:label="item.name" | |||
:value="item.value" | |||
> | |||
<div class> | |||
<img | |||
:src="item.url" | |||
alt | |||
class="cutImg" | |||
> | |||
<span>{{item.name}}</span> | |||
</div> | |||
</el-option> | |||
</el-select>--> | |||
</div> | |||
</div> | |||
@@ -44,11 +27,26 @@ | |||
position="top" | |||
:style="{ width: '70%', height: '90%', 'background-color': 'rgb(255, 255, 255,0)','margin-top': '10%'}" | |||
> | |||
<div class="goItem">{{characters==1?'产品能力':'Product'}}</div> | |||
<div class="goItem">{{characters==1?'创新技术':'Technology'}}</div> | |||
<div class="goItem">{{characters==1?'解决方案':'Solutions'}}</div> | |||
<!-- <div class="goItem">{{characters==1?'精选案例':'Cases'}}</div> --> | |||
<div class="goItem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div> | |||
<div class="goItem" @click="menuChange(1)">{{characters==1?'产品能力':'Product'}} | |||
</div> | |||
<div class="menu" v-if="menuFlag1"> | |||
<p>人脸生成</p> | |||
<p>个性化</p> | |||
<p>风格化</p> | |||
</div> | |||
<div class="goItem" @click="go('/technology')">{{characters==1?'创新技术':'Technology'}}</div> | |||
<div class="goItem" @click="menuChange(2)"> | |||
{{characters==1?'解决方案':'Solutions'}} | |||
</div> | |||
<div class="menu" v-if="menuFlag2"> | |||
<p @click="go('/introduce/1')">数字人客服</p> | |||
<p @click="go('/introduce/1')">虚拟主播</p> | |||
<p @click="go('/introduce/1')">数字讲师</p> | |||
<p @click="go('/introduce/2')">视频换脸</p> | |||
<p @click="go('/introduce/3')">数字人孪生</p> | |||
</div> | |||
<div class="goItem" @click="go('/case')">{{characters==1?'精选案例':'Cases'}}</div> | |||
<div class="goItem" @click="go('/about')">{{characters==1?'关于我们':'About us'}}</div> | |||
<div class="languageImgBox" @click="change(1)"> | |||
<img src="../../assets/img/cn.jpeg" alt class="cutImg"> | |||
</div> | |||
@@ -69,6 +67,8 @@ export default { | |||
data() { | |||
return { | |||
show: false, | |||
menuFlag1: false, | |||
menuFlag2: false, | |||
languageLsit: [ | |||
{ | |||
name: "Cn", | |||
@@ -109,40 +109,51 @@ export default { | |||
this.show = true; | |||
}, | |||
change(value) { | |||
this.setCharacters(value); | |||
this.show = false; | |||
}, | |||
go(url) { | |||
this.$router.push(url); | |||
this.show = false; | |||
this.menuFlag1 = false | |||
this.menuFlag2 = false | |||
}, | |||
menuChange(tag) { | |||
let num = tag === 2 ? 1 : 2 | |||
this[`menuFlag${num}`] = false | |||
this[`menuFlag${tag}`] = true | |||
} | |||
}, | |||
mounted() { | |||
console.log(this.languageLsit, "characters"); | |||
} | |||
mounted() {} | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.goItem { | |||
margin: 20px; | |||
color: #fff; | |||
font-size: 14px; | |||
font-size: 26px; | |||
line-height: 50px; | |||
padding: 0 20px; | |||
} | |||
.menu{ | |||
padding-left: 50px; | |||
color: #fff; | |||
font-size: 26px; | |||
line-height: 50px; | |||
} | |||
.languageImgBox { | |||
margin: 10px 0 0 20px; | |||
margin: 20px 0 0 20px; | |||
overflow: hidden; | |||
img { | |||
width: 25px; | |||
height: 25px; | |||
width: 40px; | |||
height: 40px; | |||
border-radius: 50px; | |||
border: 1px #fff solid; | |||
} | |||
} | |||
.topBox { | |||
width: 100%; | |||
height: 30px; | |||
overflow: hidden; | |||
position: fixed; | |||
top: 0; | |||
@@ -159,8 +170,7 @@ export default { | |||
} | |||
.logo { | |||
float: left; | |||
width: 120px; | |||
height: 32px; | |||
width: 280px; | |||
} | |||
.logoTitle { | |||
float: left; | |||
@@ -202,16 +212,15 @@ export default { | |||
font-size: 15px; | |||
} | |||
.more { | |||
width: 20px; | |||
height: 20px; | |||
width: 76px; | |||
// background-color: aquamarine; | |||
overflow: hidden; | |||
} | |||
.wire { | |||
width: 20px; | |||
height: 1px; | |||
width: 76px; | |||
height: 2px; | |||
background-color: #fff; | |||
margin-top: 5px; | |||
margin-top: 12px; | |||
} | |||
.el-select { | |||
width: 120px; | |||
@@ -0,0 +1,139 @@ | |||
<!-- | |||
* @Autor: Chuting | |||
* @Date: 2022-08-16 14:39:13 | |||
* @LastEditors: Chuting | |||
* @LastEditTime: 2022-08-16 14:42:42 | |||
* @Description: | |||
--> | |||
<template> | |||
<van-popup v-model:show="dialogVisible" closeable> | |||
<div class="contentBox"> | |||
<div class="contentInput"> | |||
<input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> | |||
</div> | |||
<div class="contentInput"> | |||
<input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> | |||
</div> | |||
<div class="contentInput"> | |||
<input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> | |||
</div> | |||
<div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</div> | |||
</div> | |||
</van-popup> | |||
</template> | |||
<script> | |||
import { Toast } from "vant"; | |||
export default { | |||
components: { | |||
[Toast.name]: Toast | |||
}, | |||
data() { | |||
return { | |||
dialogVisible: false, | |||
userName: "", | |||
phone: "", | |||
email: "", | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
}, | |||
methods: { | |||
submit() { | |||
let phone = /^1[35789]\d{9}$/; | |||
if (this.userName == "") { | |||
Toast.fail(this.characters == 1 ? "请输入姓名" : "Please enter your name"); | |||
return; | |||
} else if (!phone.test(this.phone)) { | |||
Toast.fail( | |||
this.characters == 1 | |||
? "请输入手机号" | |||
: "Please enter your mobile phone number" | |||
); | |||
return; | |||
} else if (this.email == "") { | |||
Toast.fail( | |||
this.characters == 1 ? "请输入邮箱" : "Please enter email address" | |||
); | |||
return; | |||
} | |||
let params = { | |||
mallName: this.email, //邮箱 | |||
applicant: this.userName, //姓名 | |||
phone: this.phone //电话 | |||
}; | |||
this.$axios({ | |||
method: "post", | |||
url: "/api/callback/wxMallApply/add", | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8" | |||
}, | |||
data: params | |||
}) | |||
.then(res => { | |||
this.email = ""; | |||
this.userName = ""; | |||
this.phone = ""; | |||
this.dialogVisible = false; | |||
this.$emit('close'); | |||
Toast.success( | |||
this.characters == 1 ? "提交成功" : "submit successfully" | |||
); | |||
}) | |||
.catch(err => { | |||
Toast.fail(err.message); | |||
}); | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.contentBox { | |||
width: 600px; | |||
padding: 30px; | |||
.titleBox{ | |||
overflow: hidden; | |||
.guan{ | |||
float: right; | |||
font-size: 18px; | |||
padding: 10px 20px; | |||
text-align: center; | |||
color: #fff; | |||
} | |||
} | |||
.contentInput { | |||
width: 80%; | |||
height: 60px; | |||
background: #ffffff; | |||
text-align: center; | |||
margin: 0 auto 20px auto; | |||
input { | |||
width: 100%; | |||
height: 60px; | |||
font-size: 24px; | |||
border-bottom: 1px solid #c8c9cc; | |||
} | |||
input::placeholder { | |||
font-weight: 400; | |||
color: #949494; | |||
} | |||
} | |||
.subBtn { | |||
width: 80%; | |||
height: 80px; | |||
background: #ffffff; | |||
border-radius: 40px; | |||
text-align: center; | |||
line-height: 80px; | |||
cursor: pointer; | |||
font-size: 24px; | |||
margin: 40px auto 10px auto; | |||
border: 1px solid #c8c9cc; | |||
} | |||
} | |||
</style> |
@@ -1,30 +1,14 @@ | |||
<template> | |||
<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"> | |||
<video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop"/> | |||
<div class="titleBox"> | |||
<div class="title_item1" v-if="characters==1">打造自主数字人IP</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_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 class="md1" id="md1"></div> | |||
</div> | |||
@@ -38,7 +22,7 @@ | |||
<div | |||
class="title_ctn" | |||
>{{characters==1?'让您的数字人可以快速进行内容生产,真正实现智能全自动的内容生产(AIGC)。':'supporting multiple languages and inputs, generating digital content, bring new intelligence experience far more exciting than before .'}}</div> | |||
<div class="title_btn">{{characters==1?'立刻体验':'Try it now'}}</div> | |||
<div class="title_btn" @click="showBox">{{characters==1?'立刻体验':'Try it now'}}</div> | |||
</div> | |||
<div class="module_3" id="module_3"> | |||
@@ -58,7 +42,7 @@ | |||
<div | |||
class="title_ctn" | |||
>{{characters==1?' 为企业在数字内容上提供丰富的体验,大幅节省成本提高生产效率。':'complex cases Provide extremely expenses saving & extendable user experience in digital content producing process .'}}</div> | |||
<div class="title_btn">{{characters==1?'立刻体验':'Try it now'}}</div> | |||
<div class="title_btn" @click="showBox">{{characters==1?'立刻体验':'Try it now'}}</div> | |||
</div> | |||
<div class="module_3" id="module_3"> | |||
@@ -69,7 +53,7 @@ | |||
<img src="../../assets/img/module_3_2.png" alt> | |||
</div> | |||
</div> | |||
<div class="module_5" id="module_5"> | |||
<img src="../../assets/img/module_5_bg2.png" alt class="module_5_bg1"> | |||
<div class="titleBox"> | |||
@@ -107,42 +91,11 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div class="module_7"> | |||
<h1>超写实数字人的互动全新体验</h1> | |||
<img src="@/assets/img/home_3.jpg" alt=""> | |||
</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_8" id="module_8"> | |||
<div class="title">SELECTED CASES</div> | |||
@@ -170,13 +123,13 @@ | |||
<div class="title" v-if="characters==2">ABOUT ME</div> | |||
<div class="title_h" v-if="characters==1">关于我们</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> | |||
<div | |||
:class="characters==1?'ctn_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> | |||
<div | |||
:class="characters==1?'ctn_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> | |||
</div> | |||
</div> | |||
@@ -219,11 +172,8 @@ | |||
</span> | |||
</el-dialog>--> | |||
<div class="contentBox" v-if="dialogVisible"> | |||
<div class="titleBox"> | |||
<div class="guan" @click="dialogVisible = false">x</div> | |||
</div> | |||
<van-popup v-model:show="dialogVisible" closeable> | |||
<div class="contentBox"> | |||
<div class="contentInput"> | |||
<input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> | |||
</div> | |||
@@ -235,24 +185,6 @@ | |||
</div> | |||
<div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</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> | |||
</template> | |||
@@ -273,7 +205,6 @@ export default { | |||
userName: "", | |||
phone: "", | |||
email: "", | |||
show: false, | |||
form: { | |||
name: "", | |||
phone: "", | |||
@@ -444,10 +375,6 @@ export default { | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
showPopup() { | |||
this.show = true; | |||
}, | |||
change(value) { | |||
this.setCharacters(value); | |||
this.show = false; | |||
@@ -544,13 +471,8 @@ export default { | |||
</script> | |||
<style lang="scss" scoped> | |||
.contentBox { | |||
width: 90%; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
position: fixed; | |||
top: 200px; | |||
left: 5%; | |||
border-radius: 20px; | |||
overflow: hidden; | |||
width: 600px; | |||
padding: 30px; | |||
.titleBox{ | |||
overflow: hidden; | |||
.guan{ | |||
@@ -563,14 +485,16 @@ export default { | |||
} | |||
.contentInput { | |||
width: 220px; | |||
height: 36px; | |||
width: 80%; | |||
height: 60px; | |||
background: #ffffff; | |||
text-align: center; | |||
margin: 0 auto 10px auto; | |||
margin: 0 auto 20px auto; | |||
input { | |||
width: 200px; | |||
height: 36px; | |||
width: 100%; | |||
height: 60px; | |||
font-size: 24px; | |||
border-bottom: 1px solid #c8c9cc; | |||
} | |||
input::placeholder { | |||
font-weight: 400; | |||
@@ -578,15 +502,16 @@ export default { | |||
} | |||
} | |||
.subBtn { | |||
width: 70px; | |||
height: 24px; | |||
width: 80%; | |||
height: 80px; | |||
background: #ffffff; | |||
border-radius: 24px; | |||
border-radius: 40px; | |||
text-align: center; | |||
line-height: 24px; | |||
line-height: 80px; | |||
cursor: pointer; | |||
font-size: 14px; | |||
margin: 20px auto 10px auto; | |||
font-size: 24px; | |||
margin: 40px auto 10px auto; | |||
border: 1px solid #c8c9cc; | |||
} | |||
} | |||
@@ -616,6 +541,15 @@ export default { | |||
width: 100%; | |||
overflow: hidden; | |||
} | |||
.module_7{ | |||
background: #f0f4f7; | |||
h1{ | |||
font-size: 44px; | |||
text-align: center; | |||
line-height: 150px; | |||
font-weight: normal; | |||
} | |||
} | |||
.topBox { | |||
width: 100%; | |||
height: 30px; | |||
@@ -714,21 +648,20 @@ export default { | |||
.titleBox { | |||
width: 55%; | |||
position: absolute; | |||
top: 320px; | |||
left: 40px; | |||
bottom: 20px; | |||
left: 50%; | |||
margin-left: -27.5%; | |||
overflow: hidden; | |||
color: #fff; | |||
text-align: center; | |||
.title_item1 { | |||
margin-bottom: 6px; | |||
font-size: 18px; | |||
font-size: 45px; | |||
} | |||
.title_item1_y { | |||
// margin-bottom: 14px; | |||
font-size: 18px; | |||
font-size: 45px; | |||
} | |||
.title_item2 { | |||
margin-bottom: 8px; | |||
font-size: 18px; | |||
font-size: 45px; | |||
} | |||
.title_item3 { | |||
font-size: 12px; | |||
@@ -736,15 +669,11 @@ export default { | |||
} | |||
.title_btn { | |||
margin-top: 24px; | |||
height: 22px; | |||
width: 80px; | |||
text-align: center; | |||
line-height: 22px; | |||
color: #fff; | |||
border-radius: 16px; | |||
border: #fff solid 2px; | |||
font-size: 14px; | |||
font-size: 42px; | |||
cursor: pointer; | |||
margin: 0 auto; | |||
} | |||
} | |||
} | |||
@@ -754,10 +683,10 @@ export default { | |||
// height: 180px; | |||
background-color: #202020; | |||
.title { | |||
font-size: 18px; | |||
font-size: 34px; | |||
text-align: center; | |||
color: #fff; | |||
margin-top: 10px; | |||
margin: 30px 0; | |||
} | |||
.xian { | |||
width: 80%; | |||
@@ -766,20 +695,19 @@ export default { | |||
background-color: #16e9d6; | |||
} | |||
.title_ctn { | |||
width: 92%; | |||
margin: 0 auto 6px auto; | |||
font-size: 6px; | |||
margin: 18px auto; | |||
font-size: 26px; | |||
color: #7e7e7e; | |||
font-family: Microsoft YaHei; | |||
padding: 0 7.5%; | |||
} | |||
.title_btn { | |||
margin: 0 auto 10px auto; | |||
height: 22px; | |||
width: 80px; | |||
margin:44px auto; | |||
height: 60px; | |||
width: 200px; | |||
text-align: center; | |||
line-height: 22px; | |||
border-radius: 16px; | |||
font-size: 12px; | |||
line-height: 60px; | |||
border-radius: 30px; | |||
font-size: 22px; | |||
cursor: pointer; | |||
color: #16e9d6; | |||
border: #16e9d6 solid 1px; | |||
@@ -791,7 +719,6 @@ export default { | |||
background-color: #202020; | |||
.imgBox1 { | |||
width: 100%; | |||
height: 228px; | |||
float: left; | |||
// background-color: #16e9d6; | |||
img { | |||
@@ -801,7 +728,6 @@ export default { | |||
} | |||
.imgBox2 { | |||
width: 100%; | |||
height: 228px; | |||
float: right; | |||
// background-color: #16e9d6; | |||
img { | |||
@@ -868,34 +794,29 @@ export default { | |||
overflow: hidden; | |||
.module_5_bg1 { | |||
width: 100%; | |||
height: 560px; | |||
} | |||
.titleBox { | |||
margin-top: 20px; | |||
.title { | |||
font-size: 20px; | |||
font-family: Inter; | |||
font-size: 62px; | |||
font-weight: 600; | |||
margin-bottom: 28px; | |||
color: #fff; | |||
text-align: center; | |||
} | |||
.paragraph { | |||
width: 90%; | |||
margin: 0 auto 8px auto; | |||
font-weight: 400; | |||
margin: 35px 7.5%; | |||
color: #7e7e7e; | |||
font-size: 6px; | |||
font-family: Microsoft YaHei; | |||
font-size: 26px; | |||
} | |||
.read_btn { | |||
margin: 20px auto; | |||
height: 22px; | |||
width: 80px; | |||
margin:44px auto; | |||
height: 60px; | |||
width: 200px; | |||
text-align: center; | |||
line-height: 22px; | |||
border-radius: 16px; | |||
font-size: 13px; | |||
line-height: 60px; | |||
border-radius: 30px; | |||
font-size: 22px; | |||
cursor: pointer; | |||
color: #16e9d6; | |||
border: #16e9d6 solid 1px; | |||
@@ -907,11 +828,10 @@ export default { | |||
margin-bottom: 40px; | |||
overflow: hidden; | |||
.title { | |||
height: 20px; | |||
text-align: center; | |||
font-size: 16px; | |||
font-size: 50px; | |||
color: #000; | |||
margin-top: 30px; | |||
margin-top: 60px; | |||
} | |||
.imgBox { | |||
width: 96%; | |||
@@ -920,10 +840,10 @@ export default { | |||
flex-wrap: wrap; | |||
justify-content: space-evenly; | |||
.itemBox { | |||
width: 170px; | |||
height: 172px; | |||
width: 318px; | |||
height: 318px; | |||
position: relative; | |||
margin-bottom: 10px; | |||
margin-bottom: 18px; | |||
img { | |||
width: 100%; | |||
height: 100%; | |||
@@ -935,199 +855,12 @@ export default { | |||
bottom: 14px; | |||
margin: auto; | |||
color: #fff; | |||
width: 90%; | |||
font-size: 12px; | |||
font-family: Microsoft YaHei; | |||
line-height: 14px; | |||
font-weight: 400; | |||
font-size: 22px; | |||
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 { | |||
height: 420px; | |||
background: #ffffff; | |||
@@ -1183,11 +916,10 @@ export default { | |||
.weBox { | |||
overflow: hidden; | |||
.weText { | |||
width: 90%; | |||
// background-color: #191919; | |||
margin: 10px auto; | |||
margin: 10px 7.5%; | |||
.conBox { | |||
overflow: hidden; | |||
margin-bottom: 60px; | |||
.title { | |||
font-size: 18px; | |||
font-family: Inter; | |||
@@ -1197,48 +929,18 @@ export default { | |||
text-align: right; | |||
} | |||
.title_h { | |||
margin-top: 20px; | |||
font-size: 16px; | |||
font-family: Microsoft YaHei; | |||
margin-top: 40px; | |||
font-size: 45px; | |||
font-weight: 400; | |||
color: #ffffff; | |||
text-align: center; | |||
} | |||
.ctn { | |||
width: 100%; | |||
font-size: 6px; | |||
font-family: Microsoft YaHei; | |||
font-size: 26px; | |||
font-weight: 400; | |||
color: #696969; | |||
// 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; | |||
} | |||
} | |||
} | |||
@@ -1277,8 +979,7 @@ export default { | |||
overflow: hidden; | |||
.timeText { | |||
width: 200px; | |||
font-size: 16px; | |||
font-family: Inter; | |||
font-size: 20px; | |||
font-weight: 600; | |||
color: #313131; | |||
line-height: 30px; | |||
@@ -1299,8 +1000,7 @@ export default { | |||
.ctn { | |||
width: 160px; | |||
// height: 20px; | |||
font-size: 12px; | |||
font-family: Microsoft YaHei; | |||
font-size: 20px; | |||
font-weight: 400; | |||
color: #313131; | |||
line-height: 24px; | |||
@@ -1314,13 +1014,11 @@ export default { | |||
// margin-bottom: 30px; | |||
.titleBox { | |||
.title_h { | |||
font-size: 16px; | |||
font-family: Microsoft YaHei; | |||
font-size: 44px; | |||
font-weight: 400; | |||
color: #0d0912; | |||
line-height: 40px; | |||
margin-left: 10px; | |||
text-align: center; | |||
margin: 40px auto; | |||
} | |||
} | |||
} | |||
@@ -1329,18 +1027,12 @@ export default { | |||
display: flex; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
width: 200px; | |||
margin: 0 auto; | |||
width: 90%; | |||
.cooperationItem0 { | |||
width: 80px; | |||
height: 30px; | |||
margin: 5px 10px; | |||
width: 50%; | |||
// margin-left: 100px; | |||
img { | |||
width: 80px; | |||
height: 36px; | |||
} | |||
} | |||
.cooperationItem1 { | |||
width: 80px; | |||
@@ -0,0 +1,333 @@ | |||
<template> | |||
<div class="introduce"> | |||
<div class="top"> | |||
<img :src="introduce[characters][id].imgUrl" alt=""> | |||
<div> | |||
<h1>{{ introduce[characters][id].title}}</h1> | |||
<p>{{ introduce[characters][id].desc1}}</p> | |||
</div> | |||
</div> | |||
<div class="ct_1"> | |||
<h1> {{ introduce[characters][id].ct1.title }}</h1> | |||
<div class="lst"> | |||
<div v-for="(item, index) in introduce[characters][id].ct1.list" :key="index"> | |||
<img :src="item.imgUrl" alt=""> | |||
<!-- <p> | |||
<span v-for="(des, idx) in item.desc.split(',')" :key="idx">{{des}}</span> | |||
</p> --> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="ct_2"> | |||
<img :src="introduce[characters][id].ct2ImgUrl" alt=""> | |||
</div> | |||
<div class="ct_3"> | |||
<h1>{{introduce[characters][id].ct3.title}}</h1> | |||
<div class="lst"> | |||
<div v-for="(item, index) in introduce[characters][id].ct3.list" :key="index"> | |||
<img :src="item.imgUrl" alt=""> | |||
<p> {{item.desc}} </p> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="ct_4" v-if="introduce[characters][id].ct4"> | |||
<h1>{{introduce[characters][id].ct4.title}}</h1> | |||
<p>{{introduce[characters][id].ct4.desc}}</p> | |||
<img :src="introduce[characters][id].ct4.imgUrl" alt=""> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { mapState } from 'vuex' | |||
export default { | |||
data(){ | |||
return { | |||
id: this.$route.params.id, | |||
introduce: { | |||
1: { | |||
1: { | |||
imgUrl: require('@/assets/img/introduce_11_1.png'), | |||
title: '数字人客服', | |||
desc1: `无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量 无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海 量面容生成需求面容生成需求`, | |||
ct1: { | |||
title: '邃芒数字人视频换脸 影视级效果让人赞不绝口', | |||
list: [ | |||
{ | |||
imgUrl: require('@/assets/img/introduce_11_2.png'), | |||
desc: 'i计算,节省85%以上成本' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_11_3.png'), | |||
desc: '影视级别,效果无可挑剔' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_11_4.png'), | |||
desc: '数字人脸众生库、 ,客制化 满足任何需求' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_11_5.png'), | |||
desc: '面容替换+声音替换,让数字人进化为专有IP' | |||
} | |||
] | |||
}, | |||
ct2ImgUrl: require('@/assets/img/introduce_11_6.png'), | |||
ct3: { | |||
title: '邃芒数字人的更多服务解决方案', | |||
list: [ | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_7.png'), | |||
desc: '数字人客服' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_8.png'), | |||
desc: '虚拟主播' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_9.png'), | |||
desc: '数字讲师' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_10.png'), | |||
desc: '数字人孪生' | |||
} | |||
] | |||
}, | |||
ct4: { | |||
title: '邃芒数字人的技术优势', | |||
desc: '邃芒数字人通过StyleGAN和基于神经辐射场(NeRF)的场景表征与容积渲染将数字人创造带入了全新世代!和基于神经辐射场(NeRF)的场景表征与容积渲染将数字人创', | |||
imgUrl: require('@/assets/img/introduce_11_11.png') | |||
} | |||
}, | |||
2: { | |||
imgUrl: require('@/assets/img/introduce_1_1.png'), | |||
title: '视频换脸', | |||
desc1: `无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量 | |||
无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海 | |||
量面容生成需求面容生成需求`, | |||
ct1: { | |||
title: '邃芒数字人视频换脸 影视级效果让人赞不绝口', | |||
list: [ | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_2.png'), | |||
desc: 'i计算,节省85%以上成本' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_3.png'), | |||
desc: '影视级别,效果无可挑剔' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_4.png'), | |||
desc: '数字人脸众生库、 ,客制化 满足任何需求' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_5.png'), | |||
desc: '面容替换+声音替换,让数字人进化为专有IP' | |||
} | |||
] | |||
}, | |||
ct2ImgUrl: require('@/assets/img/introduce_1_6.png'), | |||
ct3: { | |||
title: '邃芒数字人的更多服务解决方案', | |||
list: [ | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_7.png'), | |||
desc: '数字人客服' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_8.png'), | |||
desc: '虚拟主播' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_9.png'), | |||
desc: '数字讲师' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_10.png'), | |||
desc: '数字人孪生' | |||
} | |||
] | |||
} | |||
}, | |||
3: { | |||
imgUrl: require('@/assets/img/introduce_3_1.png'), | |||
title: '数字人孪生', | |||
desc1: `无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量 | |||
无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海 | |||
量面容生成需求面容生成需求`, | |||
ct1: { | |||
title: '邃芒数字人视频换脸 影视级效果让人赞不绝口', | |||
list: [ | |||
{ | |||
imgUrl: require('@/assets/img/introduce_3_2.png'), | |||
desc: 'i计算,节省85%以上成本' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_3_3.png'), | |||
desc: '影视级别,效果无可挑剔' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_3_4.png'), | |||
desc: '数字人脸众生库、 ,客制化 满足任何需求' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_3_5.png'), | |||
desc: '面容替换+声音替换,让数字人进化为专有IP' | |||
} | |||
] | |||
}, | |||
ct2ImgUrl: require('@/assets/img/introduce_3_6.png'), | |||
ct3: { | |||
title: '邃芒数字人的更多服务解决方案', | |||
list: [ | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_7.png'), | |||
desc: '数字人客服' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_8.png'), | |||
desc: '虚拟主播' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_9.png'), | |||
desc: '数字讲师' | |||
}, | |||
{ | |||
imgUrl: require('@/assets/img/introduce_1_10.png'), | |||
desc: '数字人孪生' | |||
} | |||
] | |||
}, | |||
} | |||
} | |||
} | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
}, | |||
watch: { | |||
"$route.params": { | |||
immediate: true, | |||
handler(new_value, old_value) { | |||
this.id = Number(new_value.id) | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.introduce{ | |||
.top{ | |||
position: relative; | |||
div{ | |||
position: absolute; | |||
left: 95px; | |||
right: 95px; | |||
bottom: 90px; | |||
h1{ | |||
font-size: 34px; | |||
color: #fff; | |||
} | |||
p{ | |||
font-size: 26px; | |||
margin-top: 35px; | |||
color: #fff; | |||
} | |||
} | |||
} | |||
.ct_1{ | |||
h1{ | |||
font-size: 26px; | |||
font-weight: 400; | |||
color: #232324; | |||
padding-top: 48px; | |||
text-align: center; | |||
margin-bottom: 20px; | |||
} | |||
.lst{ | |||
display: flex; | |||
flex-wrap: wrap; | |||
margin: 0 40px; | |||
div{ | |||
flex: 1; | |||
position: relative; | |||
img{ | |||
width: 300px; | |||
height: 520px; | |||
margin-top: 20px; | |||
} | |||
p{ | |||
position: absolute; | |||
bottom: 36px; | |||
left: 38px; | |||
font-size: 24px; | |||
font-weight: 400; | |||
color: #FFFFFF; | |||
line-height: 36px; | |||
span{ | |||
display: block; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.ct_2{ | |||
margin-top: 30px; | |||
} | |||
.ct_3{ | |||
width: 100%; | |||
background: #202020; | |||
padding-bottom: 90px; | |||
h1{ | |||
font-size: 24px; | |||
font-weight: 400; | |||
color: #fff; | |||
padding-top: 48px; | |||
text-align: center; | |||
} | |||
.lst{ | |||
display: flex; | |||
margin: 68px auto 0; | |||
width: 90%; | |||
div{ | |||
flex: 1; | |||
position: relative; | |||
margin: 0 10px; | |||
p{ | |||
bottom: 36px; | |||
left: 38px; | |||
font-size: 16px; | |||
font-weight: 400; | |||
color: #FFFFFF; | |||
text-align: center; | |||
margin-top: 20px; | |||
} | |||
} | |||
} | |||
} | |||
.ct_4{ | |||
background: #eaeff3; | |||
padding: 40px 0; | |||
h1{ | |||
font-size: 38px; | |||
font-weight: normal; | |||
text-align: center; | |||
color: #323232; | |||
padding: 0 94px; | |||
} | |||
p{ | |||
font-size: 22px; | |||
color: #323232; | |||
margin-top: 33px; | |||
padding: 0 94px; | |||
} | |||
img{ | |||
margin-top: 20px; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,71 @@ | |||
<template> | |||
<div class="technology"> | |||
<div class="top"> | |||
<img src="@/assets/img/technology_1.png" alt=""> | |||
<div> | |||
<h1>{{ technology[characters].title}}</h1> | |||
<p>{{ technology[characters].desc1}}</p> | |||
</div> | |||
</div> | |||
<div> | |||
<div class="ct2"> | |||
{{ technology[characters].desc2}} | |||
</div> | |||
</div> | |||
<div> | |||
<img src="@/assets/img/technology_2.png" alt=""> | |||
</div> | |||
<div class="ct2"> | |||
{{ technology[characters].desc}} | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { mapState } from 'vuex' | |||
export default { | |||
data(){ | |||
return { | |||
technology: { | |||
1: { | |||
title: 'MetaGene Avater技术', | |||
desc1: 'MetaGene是邃芒科技创造数字人的核心技术,以GAN(生成对抗网络)、NeRF(神经辐射场) 以及多模态合成技术为基础,由数字人形象、数字人驱动以及数字人交互等组成的数字人创造平台, 是元宇宙的基础设施。', | |||
desc2: '通过MetaGene可以实时创造2K分辨率的虚拟数字人形象,或复刻真人形象,并且可以自由的编辑及风格化。', | |||
desc3: 'MetaGene还支持语音、文字、视频等多种有/无中之人的数字人驱动方式,实时的生成高质量的驱动视频。', | |||
} | |||
} | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.technology{ | |||
.top{ | |||
position: relative; | |||
div{ | |||
position: absolute; | |||
left: 95px; | |||
right: 95px; | |||
bottom: 90px; | |||
h1{ | |||
font-size: 34px; | |||
color: #fff; | |||
} | |||
p{ | |||
font-size: 26px; | |||
margin-top: 35px; | |||
color: #fff; | |||
} | |||
} | |||
} | |||
.ct2{ | |||
font-size: 26px; | |||
margin: 75px 95px; | |||
color: #3d3d3d; | |||
} | |||
} | |||
</style> |
@@ -1,16 +1,13 @@ | |||
import Vue from 'vue' | |||
import App from './App.vue' | |||
import './registerServiceWorker' | |||
// import './registerServiceWorker' | |||
import router from './router' | |||
import store from './store' | |||
import 'vant/lib/index.css' | |||
// 引入lib-flexible做rem适配 | |||
import 'lib-flexible' | |||
import '@/assets/style/index.css' | |||
import 'amfe-flexible' | |||
import axios from "axios" | |||
// Vue.use(ElementUI); | |||
Vue.config.productionTip = false | |||
Vue.prototype.$axios = axios | |||
@@ -1,3 +1,10 @@ | |||
/* | |||
* @Autor: Chuting | |||
* @Date: 2022-08-08 14:25:11 | |||
* @LastEditors: Chuting | |||
* @LastEditTime: 2022-08-14 11:34:03 | |||
* @Description: | |||
*/ | |||
import Vue from 'vue' | |||
import VueRouter from 'vue-router' | |||
@@ -22,6 +29,30 @@ const routes = [ | |||
// component: Home | |||
component: ()=> import("../components/aboutUe/aboutUe"), | |||
}, | |||
{ | |||
path: '/about', | |||
name: 'about', | |||
// component: Home | |||
component: ()=> import("@/components/about"), | |||
}, | |||
{ | |||
path: '/technology', | |||
name: 'technology', | |||
// component: Home | |||
component: ()=> import("@/components/technology"), | |||
}, | |||
{ | |||
path: '/case', | |||
name: 'case', | |||
// component: Home | |||
component: ()=> import("@/components/case"), | |||
}, | |||
{ | |||
path: '/introduce/:id?', | |||
name: 'introduce', | |||
// component: Home | |||
component: ()=> import("@/components/introduce"), | |||
}, | |||
{ | |||
path: '/styleAdd', | |||
name: 'styleAdd', | |||
@@ -36,4 +67,9 @@ const router = new VueRouter({ | |||
routes | |||
}) | |||
router.afterEach(() => { | |||
document.body.scrollTop = 0; | |||
document.documentElement.scrollTop = 0; | |||
}) | |||
export default router |
@@ -1,29 +1,4 @@ | |||
module.exports = { | |||
css: { | |||
loaderOptions: { | |||
css: { | |||
// options here will be passed to css-loader | |||
}, | |||
// postcss: { | |||
// // options here will be passed to postcss-loader | |||
// plugins: [require('postcss-px2rem')({ | |||
// remUnit: 75 | |||
// })] | |||
// } | |||
} | |||
}, | |||
pwa: { | |||
iconPaths: { | |||
favicon32: 'favicon.ico', | |||
favicon16: 'favicon.ico', | |||
appleTouchIcon: 'favicon.ico', | |||
maskIcon: 'favicon.ico', | |||
msTileImage: 'favicon.ico' | |||
} | |||
}, | |||
//http://www.metavatar.cc/ | |||
devServer: { | |||
overlay: { | |||
@@ -43,5 +18,5 @@ module.exports = { | |||
} | |||
}, | |||
lintOnSave: false, | |||
publicPath: './', // 打包后引用的资源路径 | |||
publicPath: '/', // 打包后引用的资源路径 | |||
} |