Bläddra i källkod

二级页面

ctt
chutingting 2 år sedan
förälder
incheckning
fdff2a0cb4
23 ändrade filer med 610 tillägg och 88 borttagningar
  1. +86
    -88
      package-lock.json
  2. Binär
      src/assets/img/case_1.png
  3. Binär
      src/assets/img/case_2.png
  4. Binär
      src/assets/img/case_3.png
  5. Binär
      src/assets/img/introduce_1.png
  6. Binär
      src/assets/img/introduce_10.png
  7. Binär
      src/assets/img/introduce_11.png
  8. Binär
      src/assets/img/introduce_2.png
  9. Binär
      src/assets/img/introduce_3.png
  10. Binär
      src/assets/img/introduce_4.png
  11. Binär
      src/assets/img/introduce_5.png
  12. Binär
      src/assets/img/introduce_6.png
  13. Binär
      src/assets/img/introduce_7.png
  14. Binär
      src/assets/img/introduce_8.png
  15. Binär
      src/assets/img/introduce_9.png
  16. Binär
      src/assets/img/technology_1.png
  17. Binär
      src/assets/img/technology_2.png
  18. Binär
      src/assets/img/technology_3.png
  19. +92
    -0
      src/components/case/index.vue
  20. +266
    -0
      src/components/introduce/index.vue
  21. +140
    -0
      src/components/technology/index.vue
  22. +15
    -0
      src/router/index.js
  23. +11
    -0
      vue.config.js

+ 86
- 88
package-lock.json Visa fil

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


Binär
src/assets/img/case_1.png Visa fil

Före Efter
Bredd: 1280  |  Höjd: 517  |  Storlek: 388 KiB

Binär
src/assets/img/case_2.png Visa fil

Före Efter
Bredd: 1280  |  Höjd: 517  |  Storlek: 471 KiB

Binär
src/assets/img/case_3.png Visa fil

Före Efter
Bredd: 1280  |  Höjd: 517  |  Storlek: 263 KiB

Binär
src/assets/img/introduce_1.png Visa fil

Före Efter
Bredd: 1920  |  Höjd: 1080  |  Storlek: 874 KiB

Binär
src/assets/img/introduce_10.png Visa fil

Före Efter
Bredd: 300  |  Höjd: 300  |  Storlek: 126 KiB

Binär
src/assets/img/introduce_11.png Visa fil

Före Efter
Bredd: 680  |  Höjd: 383  |  Storlek: 243 KiB

Binär
src/assets/img/introduce_2.png Visa fil

Före Efter
Bredd: 300  |  Höjd: 520  |  Storlek: 74 KiB

Binär
src/assets/img/introduce_3.png Visa fil

Före Efter
Bredd: 1920  |  Höjd: 6078  |  Storlek: 239 KiB

Binär
src/assets/img/introduce_4.png Visa fil

Före Efter
Bredd: 1920  |  Höjd: 6078  |  Storlek: 244 KiB

Binär
src/assets/img/introduce_5.png Visa fil

Före Efter
Bredd: 1920  |  Höjd: 6078  |  Storlek: 308 KiB

Binär
src/assets/img/introduce_6.png Visa fil

Före Efter
Bredd: 1920  |  Höjd: 1080  |  Storlek: 177 KiB

Binär
src/assets/img/introduce_7.png Visa fil

Före Efter
Bredd: 300  |  Höjd: 300  |  Storlek: 91 KiB

Binär
src/assets/img/introduce_8.png Visa fil

Före Efter
Bredd: 300  |  Höjd: 300  |  Storlek: 100 KiB

Binär
src/assets/img/introduce_9.png Visa fil

Före Efter
Bredd: 300  |  Höjd: 300  |  Storlek: 127 KiB

Binär
src/assets/img/technology_1.png Visa fil

Före Efter
Bredd: 1920  |  Höjd: 1080  |  Storlek: 704 KiB

Binär
src/assets/img/technology_2.png Visa fil

Före Efter
Bredd: 1920  |  Höjd: 1080  |  Storlek: 660 KiB

Binär
src/assets/img/technology_3.png Visa fil

Före Efter
Bredd: 505  |  Höjd: 505  |  Storlek: 333 KiB

+ 92
- 0
src/components/case/index.vue Visa fil

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

+ 266
- 0
src/components/introduce/index.vue Visa fil

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

+ 140
- 0
src/components/technology/index.vue Visa fil

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

+ 15
- 0
src/router/index.js Visa fil

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


+ 11
- 0
vue.config.js Visa fil

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

Laddar…
Avbryt
Spara