@@ -553,6 +553,44 @@ | |||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", | "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", | ||||
"dev": true | "dev": true | ||||
}, | }, | ||||
"ansi-styles": { | |||||
"version": "4.3.0", | |||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz", | |||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"color-convert": "^2.0.1" | |||||
} | |||||
}, | |||||
"chalk": { | |||||
"version": "4.1.2", | |||||
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz", | |||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"ansi-styles": "^4.1.0", | |||||
"supports-color": "^7.1.0" | |||||
} | |||||
}, | |||||
"color-convert": { | |||||
"version": "2.0.1", | |||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", | |||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"color-name": "~1.1.4" | |||||
} | |||||
}, | |||||
"color-name": { | |||||
"version": "1.1.4", | |||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz", | |||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", | |||||
"dev": true, | |||||
"optional": true | |||||
}, | |||||
"debug": { | "debug": { | ||||
"version": "4.3.4", | "version": "4.3.4", | ||||
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz", | "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz", | ||||
@@ -573,6 +611,32 @@ | |||||
"universalify": "^0.1.0" | "universalify": "^0.1.0" | ||||
} | } | ||||
}, | }, | ||||
"has-flag": { | |||||
"version": "4.0.0", | |||||
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz", | |||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", | |||||
"dev": true, | |||||
"optional": true | |||||
}, | |||||
"json5": { | |||||
"version": "2.2.1", | |||||
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz", | |||||
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", | |||||
"dev": true, | |||||
"optional": true | |||||
}, | |||||
"loader-utils": { | |||||
"version": "2.0.2", | |||||
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz", | |||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"big.js": "^5.2.2", | |||||
"emojis-list": "^3.0.0", | |||||
"json5": "^2.1.2" | |||||
} | |||||
}, | |||||
"ms": { | "ms": { | ||||
"version": "2.1.2", | "version": "2.1.2", | ||||
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz", | "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz", | ||||
@@ -587,6 +651,28 @@ | |||||
"requires": { | "requires": { | ||||
"minipass": "^3.1.1" | "minipass": "^3.1.1" | ||||
} | } | ||||
}, | |||||
"supports-color": { | |||||
"version": "7.2.0", | |||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz", | |||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"has-flag": "^4.0.0" | |||||
} | |||||
}, | |||||
"vue-loader-v16": { | |||||
"version": "npm:vue-loader@16.8.3", | |||||
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz", | |||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"chalk": "^4.1.0", | |||||
"hash-sum": "^2.0.0", | |||||
"loader-utils": "^2.0.0" | |||||
} | |||||
} | } | ||||
} | } | ||||
}, | }, | ||||
@@ -10166,94 +10252,6 @@ | |||||
} | } | ||||
} | } | ||||
}, | }, | ||||
"vue-loader-v16": { | |||||
"version": "npm:vue-loader@16.8.3", | |||||
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz", | |||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"chalk": "^4.1.0", | |||||
"hash-sum": "^2.0.0", | |||||
"loader-utils": "^2.0.0" | |||||
}, | |||||
"dependencies": { | |||||
"ansi-styles": { | |||||
"version": "4.3.0", | |||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz", | |||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"color-convert": "^2.0.1" | |||||
} | |||||
}, | |||||
"chalk": { | |||||
"version": "4.1.2", | |||||
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz", | |||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"ansi-styles": "^4.1.0", | |||||
"supports-color": "^7.1.0" | |||||
} | |||||
}, | |||||
"color-convert": { | |||||
"version": "2.0.1", | |||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", | |||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"color-name": "~1.1.4" | |||||
} | |||||
}, | |||||
"color-name": { | |||||
"version": "1.1.4", | |||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz", | |||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", | |||||
"dev": true, | |||||
"optional": true | |||||
}, | |||||
"has-flag": { | |||||
"version": "4.0.0", | |||||
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz", | |||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", | |||||
"dev": true, | |||||
"optional": true | |||||
}, | |||||
"json5": { | |||||
"version": "2.2.1", | |||||
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz", | |||||
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", | |||||
"dev": true, | |||||
"optional": true | |||||
}, | |||||
"loader-utils": { | |||||
"version": "2.0.2", | |||||
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz", | |||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"big.js": "^5.2.2", | |||||
"emojis-list": "^3.0.0", | |||||
"json5": "^2.1.2" | |||||
} | |||||
}, | |||||
"supports-color": { | |||||
"version": "7.2.0", | |||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz", | |||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", | |||||
"dev": true, | |||||
"optional": true, | |||||
"requires": { | |||||
"has-flag": "^4.0.0" | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
"vue-router": { | "vue-router": { | ||||
"version": "3.5.4", | "version": "3.5.4", | ||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.4.tgz", | "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.4.tgz", | ||||
@@ -0,0 +1,92 @@ | |||||
<!-- 精选案例 --> | |||||
<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 { | |||||
margin-top: 70px; | |||||
background: #D7D8DE; | |||||
div { | |||||
width: 1280px; | |||||
margin: 0 auto; | |||||
padding-top: 128px; | |||||
h6 { | |||||
font-size: 36px; | |||||
font-weight: 400; | |||||
color: #000000; | |||||
margin: 0; | |||||
} | |||||
p{ | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #000000; | |||||
line-height: 32px; | |||||
margin-top: 28px; | |||||
} | |||||
img{ | |||||
width: 1280px; | |||||
height: 517px; | |||||
margin-top: 112px; | |||||
} | |||||
} | |||||
div:last-child { | |||||
padding-bottom: 128px; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,266 @@ | |||||
<!-- 创新技术 --> | |||||
<template> | |||||
<div class="introduce"> | |||||
<div class="top"> | |||||
<img src="@/assets/img/introduce_1.png" alt=""> | |||||
<div class="top_ct"> | |||||
<h6>{{ introduce[characters].title }}</h6> | |||||
<p>{{ introduce[characters].desc }}</p> | |||||
<span>{{ introduce[characters].btn }}</span> | |||||
</div> | |||||
</div> | |||||
<div class="ct_1"> | |||||
<h6>{{ introduce[characters].ct1.title }} </h6> | |||||
<div class="lst"> | |||||
<div v-for="(item, index) in introduce[characters].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="@/assets/img/introduce_6.png" alt=""> | |||||
</div> | |||||
<div class="ct_3"> | |||||
<h6>{{introduce[characters].ct3.title}}</h6> | |||||
<div class="lst"> | |||||
<div v-for="(item, index) in introduce[characters].ct3.list" :key="index"> | |||||
<img :src="item.imgUrl" alt=""> | |||||
<p> {{item.desc}} </p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="ct_4"> | |||||
<h6>{{introduce[characters].ct4.title}}</h6> | |||||
<p>{{introduce[characters].ct4.desc}}</p> | |||||
<img src="@/assets/img/introduce_11.png" alt=""> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { mapState } from 'vuex' | |||||
export default { | |||||
data() { | |||||
return { | |||||
introduce: { | |||||
1: { | |||||
title: '视频换脸', | |||||
desc: '无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量面容生成需求面容生成需求', | |||||
btn: '立刻体验', | |||||
ct1: { | |||||
title: '邃芒数字人视频换脸 影视级效果让人赞不绝口', | |||||
list: [ | |||||
{ | |||||
imgUrl: require('@/assets/img/introduce_2.png'), | |||||
desc: 'ai计算,节省85%以上成本' | |||||
}, | |||||
{ | |||||
imgUrl: require('@/assets/img/introduce_2.png'), | |||||
desc: 'ai计算,节省85%以上成本' | |||||
}, | |||||
{ | |||||
imgUrl: require('@/assets/img/introduce_2.png'), | |||||
desc: 'ai计算,节省85%以上成本' | |||||
}, | |||||
{ | |||||
imgUrl: require('@/assets/img/introduce_2.png'), | |||||
desc: 'ai计算,节省85%以上成本' | |||||
} | |||||
] | |||||
}, | |||||
ct3: { | |||||
title: '邃芒数字人视频换脸 影视级效果让人赞不绝口', | |||||
list: [ | |||||
{ | |||||
imgUrl: require('@/assets/img/introduce_7.png'), | |||||
desc: '数字人客服' | |||||
}, | |||||
{ | |||||
imgUrl: require('@/assets/img/introduce_8.png'), | |||||
desc: '虚拟主播' | |||||
}, | |||||
{ | |||||
imgUrl: require('@/assets/img/introduce_9.png'), | |||||
desc: '数字讲师' | |||||
}, | |||||
{ | |||||
imgUrl: require('@/assets/img/introduce_10.png'), | |||||
desc: '数字人孪生' | |||||
} | |||||
] | |||||
}, | |||||
ct4: { | |||||
title: '邃芒数字人的更多服务解决方案', | |||||
desc: '邃芒数字人通过StyleGAN和基于神经辐射场(NeRF)的场景表征与容积渲染将数字人创造带入了全新世代!和基于神经辐射场(NeRF)的场景表征与容积渲染将数字人创' | |||||
} | |||||
}, | |||||
2: { | |||||
title: '视频换脸', | |||||
desc: '无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量面容生成需求面容生成需求', | |||||
btn: '立刻体验' | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
characters: state => state.publicObj.characters | |||||
}) | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.introduce { | |||||
margin-top: 70px; | |||||
h6{ | |||||
margin: 0; | |||||
} | |||||
.top { | |||||
width: 100%; | |||||
position: relative; | |||||
img{ | |||||
width: 100%; | |||||
display: block; | |||||
} | |||||
.top_ct { | |||||
position: absolute; | |||||
left: 194px; | |||||
top: 363px; | |||||
h6{ | |||||
font-size: 48px; | |||||
font-weight: 400; | |||||
color: #FFFFFF; | |||||
margin: 0; | |||||
} | |||||
p{ | |||||
width: 448px; | |||||
font-size: 16px; | |||||
font-weight: 400; | |||||
color: #FEFEFE; | |||||
line-height: 36px; | |||||
margin-top: 70px; | |||||
} | |||||
span{ | |||||
width: 220px; | |||||
height: 60px; | |||||
border: 2px solid #FFFFFF; | |||||
border-radius: 30px; | |||||
text-align: center; | |||||
font-size: 18px; | |||||
line-height: 60px; | |||||
display: inline-block; | |||||
color: #FEFEFE; | |||||
margin-top: 110px; | |||||
} | |||||
} | |||||
} | |||||
.ct_1{ | |||||
width: 100%; | |||||
height: 1080px; | |||||
h6{ | |||||
font-size: 24px; | |||||
font-weight: 400; | |||||
color: #232324; | |||||
padding-top: 123px; | |||||
text-align: center; | |||||
} | |||||
.lst{ | |||||
display: flex; | |||||
width: 1275px; | |||||
margin: 125px auto 0; | |||||
div{ | |||||
flex: 1; | |||||
margin-right: 25px; | |||||
position: relative; | |||||
img{ | |||||
width: 300px; | |||||
height: 520px; | |||||
} | |||||
p{ | |||||
position: absolute; | |||||
bottom: 36px; | |||||
left: 38px; | |||||
font-size: 24px; | |||||
font-weight: 400; | |||||
color: #FFFFFF; | |||||
line-height: 36px; | |||||
span{ | |||||
display: block; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.ct_2{ | |||||
img{ | |||||
width: 100%; | |||||
display: block; | |||||
} | |||||
} | |||||
.ct_3{ | |||||
width: 100%; | |||||
height: 1080px; | |||||
background: #202020; | |||||
h6{ | |||||
font-size: 24px; | |||||
font-weight: 400; | |||||
color: #fff; | |||||
padding-top: 239px; | |||||
text-align: center; | |||||
} | |||||
.lst{ | |||||
display: flex; | |||||
width: 1275px; | |||||
margin: 125px auto 0; | |||||
div{ | |||||
flex: 1; | |||||
margin-right: 25px; | |||||
position: relative; | |||||
img{ | |||||
width: 300px; | |||||
height: 300px; | |||||
} | |||||
p{ | |||||
bottom: 36px; | |||||
left: 38px; | |||||
font-size: 24px; | |||||
font-weight: 400; | |||||
color: #FFFFFF; | |||||
text-align: center; | |||||
margin-top: 20px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.ct_4{ | |||||
width: 100%; | |||||
height: 1080px; | |||||
background: #EAEFF3; | |||||
text-align: center; | |||||
h6{ | |||||
height: 45px; | |||||
font-size: 48px; | |||||
font-weight: 400; | |||||
color: #202020; | |||||
padding-top: 194px; | |||||
} | |||||
p{ | |||||
margin: 90px auto 0; | |||||
text-align: center; | |||||
width: 1100px; | |||||
font-size: 18px; | |||||
font-weight: 400; | |||||
color: #7E7E7E; | |||||
line-height: 36px; | |||||
} | |||||
img{ | |||||
width: 680px; | |||||
height: 383px; | |||||
margin-top: 113px; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,140 @@ | |||||
<!-- 创新技术 --> | |||||
<template> | |||||
<div class="technology"> | |||||
<div class="top"> | |||||
<img src="@/assets/img/technology_1.png" alt=""> | |||||
<div class="top_ct"> | |||||
<h6>{{ technology[characters].title }}</h6> | |||||
<p>{{ technology[characters].desc }}</p> | |||||
<span>{{ technology[characters].btn }}</span> | |||||
</div> | |||||
</div> | |||||
<div class="content"> | |||||
<img src="@/assets/img/technology_2.png" alt=""> | |||||
<div class="content_ct"> | |||||
<p>{{ technology[characters].text1 }}</p> | |||||
<p>{{ technology[characters].text2 }}</p> | |||||
<img src="@/assets/img/technology_3.png" alt=""> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { mapState } from 'vuex' | |||||
export default { | |||||
data() { | |||||
return { | |||||
technology: { | |||||
1: { | |||||
title: 'MetaGene Avater技术', | |||||
desc: 'MetaGene是邃芒科技创造数字人的核心技术,以GAN(生成对抗网络)、NeRF(神经辐射场)以及多模态合成技术为基础,由数字人形象、数字人驱动以及数字人交互等组成的数字人创造平台,是元宇宙的基础设施。', | |||||
btn: '立刻体验', | |||||
text1: '通过MetaGene可以实时创造2K分辨率的虚拟数字人形象,或复刻真人形象,并且可以自由的编辑及风格化。', | |||||
text2: 'MetaGene还支持语音、文字、视频等多种有/无中之人的数字人驱动方式,实时的生成高质量的驱动视频。' | |||||
}, | |||||
2: { | |||||
title: 'MetaGene Avater技术en', | |||||
desc: 'MetaGene是邃芒科技创造数字人的核心技术,以GAN(生成对抗网络)、NeRF(神经辐射场)以及多模态合成技术为基础,由数字人形象、数字人驱动以及数字人交互等组成的数字人创造平台,是元宇宙的基础设施。', | |||||
btn: '立刻体验', | |||||
text1: '通过MetaGene可以实时创造2K分辨率的虚拟数字人形象,或复刻真人形象,并且可以自由的编辑及风格化。', | |||||
text2: 'MetaGene还支持语音、文字、视频等多种有/无中之人的数字人驱动方式,实时的生成高质量的驱动视频。' | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
characters: state => state.publicObj.characters | |||||
}) | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.technology { | |||||
margin-top: 70px; | |||||
.top { | |||||
width: 100%; | |||||
position: relative; | |||||
img{ | |||||
width: 100%; | |||||
display: block; | |||||
} | |||||
.top_ct { | |||||
position: absolute; | |||||
right: 357px; | |||||
top: 357px; | |||||
text-align: right; | |||||
h6{ | |||||
font-size: 48px; | |||||
font-weight: 400; | |||||
color: #FFFFFF; | |||||
margin: 0; | |||||
} | |||||
p{ | |||||
width: 693px; | |||||
height: 88px; | |||||
font-size: 16px; | |||||
font-weight: 400; | |||||
color: #FEFEFE; | |||||
line-height: 36px; | |||||
margin-top: 42px; | |||||
} | |||||
span{ | |||||
width: 220px; | |||||
height: 60px; | |||||
border: 2px solid #FFFFFF; | |||||
border-radius: 30px; | |||||
text-align: center; | |||||
font-size: 18px; | |||||
line-height: 60px; | |||||
display: inline-block; | |||||
color: #FEFEFE; | |||||
margin-top: 138px; | |||||
} | |||||
} | |||||
} | |||||
.content{ | |||||
width: 100%; | |||||
position: relative; | |||||
img{ | |||||
width: 100%; | |||||
display: block; | |||||
} | |||||
.content_ct{ | |||||
p:nth-of-type(1) { | |||||
height: 120px; | |||||
line-height: 120px; | |||||
background: #000000; | |||||
background-color: rgba(0,0,0,0.5); | |||||
color:#fff; | |||||
position: absolute; | |||||
left: 0; | |||||
right: 503px; | |||||
top: 0; | |||||
text-align: right; | |||||
font-size: 18px; | |||||
} | |||||
p:nth-of-type(2) { | |||||
height: 120px; | |||||
line-height: 120px; | |||||
background: #000000; | |||||
background-color: rgba(0,0,0,0.5); | |||||
color:#fff; | |||||
position: absolute; | |||||
right: 0; | |||||
bottom: 0; | |||||
text-align: center; | |||||
width: 1441px; | |||||
font-size: 18px; | |||||
} | |||||
img{ | |||||
width: 503px; | |||||
height: 505px; | |||||
position: absolute; | |||||
right: 0; | |||||
top: 0; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -28,6 +28,21 @@ const routes = [ | |||||
// component: Home | // component: Home | ||||
component: ()=> import("../components/styleAdd/styleAdd"), | component: ()=> import("../components/styleAdd/styleAdd"), | ||||
}, | }, | ||||
{ | |||||
path: '/case', | |||||
name: 'case', | |||||
component: ()=> import("@/components/case"), | |||||
}, | |||||
{ | |||||
path: '/technology', | |||||
name: 'technology', | |||||
component: ()=> import("@/components/technology"), | |||||
}, | |||||
{ | |||||
path: '/introduce', | |||||
name: 'introduce', | |||||
component: ()=> import("@/components/introduce"), | |||||
} | |||||
] | ] | ||||
const router = new VueRouter({ | const router = new VueRouter({ | ||||
@@ -1,3 +1,7 @@ | |||||
const path = require('path') | |||||
function resolve(dir) { | |||||
return path.join(__dirname, dir) | |||||
} | |||||
module.exports = { | module.exports = { | ||||
css: { | css: { | ||||
loaderOptions: { | loaderOptions: { | ||||
@@ -44,4 +48,11 @@ module.exports = { | |||||
}, | }, | ||||
lintOnSave: false, | lintOnSave: false, | ||||
publicPath: './', // 打包后引用的资源路径 | publicPath: './', // 打包后引用的资源路径 | ||||
configureWebpack: { | |||||
resolve: { | |||||
alias: { | |||||
'@': resolve('src') | |||||
} | |||||
} | |||||
} | |||||
} | } |