@@ -1,5 +1,5 @@ | |||||
{ | { | ||||
"name": "Metavatar", | |||||
"name": "metavatar", | |||||
"version": "0.1.0", | "version": "0.1.0", | ||||
"private": true, | "private": true, | ||||
"scripts": { | "scripts": { | ||||
@@ -1,2 +0,0 @@ | |||||
User-agent: * | |||||
Disallow: |
@@ -19,23 +19,6 @@ | |||||
<div class="wire"></div> | <div class="wire"></div> | ||||
<div class="wire"></div> | <div class="wire"></div> | ||||
</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> | ||||
</div> | </div> | ||||
@@ -44,10 +27,25 @@ | |||||
position="top" | position="top" | ||||
:style="{ width: '70%', height: '90%', 'background-color': 'rgb(255, 255, 255,0)','margin-top': '10%'}" | :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" @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="go('/technology')">{{characters==1?'创新技术':'Technology'}}</div> | ||||
<div class="goItem">{{characters==1?'解决方案':'Solutions'}}</div> | |||||
<!-- <div class="goItem">{{characters==1?'精选案例':'Cases'}}</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="goItem" @click="go('/about')">{{characters==1?'关于我们':'About us'}}</div> | ||||
<div class="languageImgBox" @click="change(1)"> | <div class="languageImgBox" @click="change(1)"> | ||||
<img src="../../assets/img/cn.jpeg" alt class="cutImg"> | <img src="../../assets/img/cn.jpeg" alt class="cutImg"> | ||||
@@ -69,6 +67,8 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
show: false, | show: false, | ||||
menuFlag1: false, | |||||
menuFlag2: false, | |||||
languageLsit: [ | languageLsit: [ | ||||
{ | { | ||||
name: "Cn", | name: "Cn", | ||||
@@ -109,25 +109,37 @@ export default { | |||||
this.show = true; | this.show = true; | ||||
}, | }, | ||||
change(value) { | change(value) { | ||||
this.setCharacters(value); | this.setCharacters(value); | ||||
this.show = false; | this.show = false; | ||||
}, | }, | ||||
go(url) { | go(url) { | ||||
this.$router.push(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> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.goItem { | .goItem { | ||||
margin: 20px; | |||||
color: #fff; | color: #fff; | ||||
font-size: 26px; | font-size: 26px; | ||||
line-height: 50px; | |||||
padding: 0 20px; | |||||
} | |||||
.menu{ | |||||
padding-left: 50px; | |||||
color: #fff; | |||||
font-size: 26px; | |||||
line-height: 50px; | |||||
} | } | ||||
.languageImgBox { | .languageImgBox { | ||||
@@ -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> |
@@ -22,7 +22,7 @@ | |||||
<div | <div | ||||
class="title_ctn" | class="title_ctn" | ||||
>{{characters==1?'让您的数字人可以快速进行内容生产,真正实现智能全自动的内容生产(AIGC)。':'supporting multiple languages and inputs, generating digital content, bring new intelligence experience far more exciting than before .'}}</div> | >{{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> | ||||
<div class="module_3" id="module_3"> | <div class="module_3" id="module_3"> | ||||
@@ -42,7 +42,7 @@ | |||||
<div | <div | ||||
class="title_ctn" | class="title_ctn" | ||||
>{{characters==1?' 为企业在数字内容上提供丰富的体验,大幅节省成本提高生产效率。':'complex cases Provide extremely expenses saving & extendable user experience in digital content producing process .'}}</div> | >{{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> | ||||
<div class="module_3" id="module_3"> | <div class="module_3" id="module_3"> | ||||
@@ -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> |
@@ -2,7 +2,7 @@ | |||||
* @Autor: Chuting | * @Autor: Chuting | ||||
* @Date: 2022-08-08 14:25:11 | * @Date: 2022-08-08 14:25:11 | ||||
* @LastEditors: Chuting | * @LastEditors: Chuting | ||||
* @LastEditTime: 2022-08-13 23:34:39 | |||||
* @LastEditTime: 2022-08-14 11:34:03 | |||||
* @Description: | * @Description: | ||||
*/ | */ | ||||
import Vue from 'vue' | import Vue from 'vue' | ||||
@@ -47,6 +47,12 @@ const routes = [ | |||||
// component: Home | // component: Home | ||||
component: ()=> import("@/components/case"), | component: ()=> import("@/components/case"), | ||||
}, | }, | ||||
{ | |||||
path: '/introduce/:id?', | |||||
name: 'introduce', | |||||
// component: Home | |||||
component: ()=> import("@/components/introduce"), | |||||
}, | |||||
{ | { | ||||
path: '/styleAdd', | path: '/styleAdd', | ||||
name: 'styleAdd', | name: 'styleAdd', | ||||
@@ -18,5 +18,5 @@ module.exports = { | |||||
} | } | ||||
}, | }, | ||||
lintOnSave: false, | lintOnSave: false, | ||||
publicPath: './', // 打包后引用的资源路径 | |||||
publicPath: '/', // 打包后引用的资源路径 | |||||
} | } |