@@ -553,6 +553,44 @@ | |||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", | |||
"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": { | |||
"version": "4.3.4", | |||
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz", | |||
@@ -573,6 +611,32 @@ | |||
"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": { | |||
"version": "2.1.2", | |||
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz", | |||
@@ -587,6 +651,28 @@ | |||
"requires": { | |||
"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": { | |||
"version": "3.5.4", | |||
"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: ()=> 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({ | |||
@@ -1,3 +1,7 @@ | |||
const path = require('path') | |||
function resolve(dir) { | |||
return path.join(__dirname, dir) | |||
} | |||
module.exports = { | |||
css: { | |||
loaderOptions: { | |||
@@ -44,4 +48,11 @@ module.exports = { | |||
}, | |||
lintOnSave: false, | |||
publicPath: './', // 打包后引用的资源路径 | |||
configureWebpack: { | |||
resolve: { | |||
alias: { | |||
'@': resolve('src') | |||
} | |||
} | |||
} | |||
} |