@@ -1,5 +1,5 @@ | |||
{ | |||
"name": "Metavatar", | |||
"name": "metavatar", | |||
"version": "0.1.0", | |||
"private": true, | |||
"scripts": { | |||
@@ -1,2 +0,0 @@ | |||
User-agent: * | |||
Disallow: |
@@ -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,10 +27,25 @@ | |||
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" @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">{{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="languageImgBox" @click="change(1)"> | |||
<img src="../../assets/img/cn.jpeg" alt class="cutImg"> | |||
@@ -69,6 +67,8 @@ export default { | |||
data() { | |||
return { | |||
show: false, | |||
menuFlag1: false, | |||
menuFlag2: false, | |||
languageLsit: [ | |||
{ | |||
name: "Cn", | |||
@@ -109,25 +109,37 @@ 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: 26px; | |||
line-height: 50px; | |||
padding: 0 20px; | |||
} | |||
.menu{ | |||
padding-left: 50px; | |||
color: #fff; | |||
font-size: 26px; | |||
line-height: 50px; | |||
} | |||
.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 | |||
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"> | |||
@@ -42,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"> | |||
@@ -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 | |||
* @Date: 2022-08-08 14:25:11 | |||
* @LastEditors: Chuting | |||
* @LastEditTime: 2022-08-13 23:34:39 | |||
* @LastEditTime: 2022-08-14 11:34:03 | |||
* @Description: | |||
*/ | |||
import Vue from 'vue' | |||
@@ -47,6 +47,12 @@ const routes = [ | |||
// component: Home | |||
component: ()=> import("@/components/case"), | |||
}, | |||
{ | |||
path: '/introduce/:id?', | |||
name: 'introduce', | |||
// component: Home | |||
component: ()=> import("@/components/introduce"), | |||
}, | |||
{ | |||
path: '/styleAdd', | |||
name: 'styleAdd', | |||
@@ -18,5 +18,5 @@ module.exports = { | |||
} | |||
}, | |||
lintOnSave: false, | |||
publicPath: './', // 打包后引用的资源路径 | |||
publicPath: '/', // 打包后引用的资源路径 | |||
} |