|
|
@@ -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> |