| @@ -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') | |||||
| } | |||||
| } | |||||
| } | |||||
| } | } | ||||