generated from maochaoying/dreamworks-frontend-template
maochaoying
2 years ago
5 changed files with 176 additions and 4 deletions
-
36src/components/CaseShow.vue
-
39src/components/HeadLine.vue
-
93src/components/Summarize.vue
-
10src/pages/index.vue
-
2vite.config.js
@ -0,0 +1,36 @@ |
|||||
|
<template> |
||||
|
<div class="case_show_container"> |
||||
|
<HeadLine /> |
||||
|
<div class="line_cards"> |
||||
|
<div class="card"></div> |
||||
|
<div class="card"></div> |
||||
|
</div> |
||||
|
<div class="line_cards nomg"> |
||||
|
<div class="card"></div> |
||||
|
<div class="card"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import HeadLine from 'cpns/HeadLine' |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.case_show_container { |
||||
|
.line_cards { |
||||
|
margin-top: 35px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
.card { |
||||
|
flex: 1; |
||||
|
height: 162px; |
||||
|
background: #000; |
||||
|
} |
||||
|
} |
||||
|
.nomg { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,39 @@ |
|||||
|
<template> |
||||
|
<div class="headline_container"> |
||||
|
<h2 class="title_h2">案例展示</h2> |
||||
|
<p class="line1">医疗健康、智能硬件、工业设备、高铁设备、户外设备</p> |
||||
|
<p class="line2">特种设备、智能家居、实验仪器、消费电子</p> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup></script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.headline_container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
.title_h2 { |
||||
|
font-size: 13px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
margin-bottom: 9px; |
||||
|
} |
||||
|
.line1 { |
||||
|
font-size: 7px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 300; |
||||
|
color: #595959; |
||||
|
line-height: 9px; |
||||
|
} |
||||
|
.line2 { |
||||
|
font-size: 7px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 300; |
||||
|
color: #595959; |
||||
|
line-height: 9px; |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,93 @@ |
|||||
|
<template> |
||||
|
<div class="summarize_container"> |
||||
|
<div class="title_wrap"> |
||||
|
<h5 class="small_tag">品质的设计服务于临床</h5> |
||||
|
<h1 class="main_title">医疗产品设计首选服务商</h1> |
||||
|
<p class="desc"> |
||||
|
专注医疗器械一站式高品质的创新设计服务，从概念导入到产品现实加工落地 |
||||
|
为企业精准制定，快速截获市场先机 |
||||
|
</p> |
||||
|
<div class="number_wrap mb"> |
||||
|
<div class="text_wrap"> |
||||
|
<span class="blue">15</span> |
||||
|
<span>年历程</span> |
||||
|
</div> |
||||
|
<div class="text_wrap"> |
||||
|
<span class="blue">300+</span> |
||||
|
<span>客户</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="number_wrap"> |
||||
|
<div class="text_wrap"> |
||||
|
<span class="blue">100W+</span> |
||||
|
<span>量产</span> |
||||
|
</div> |
||||
|
<div class="text_wrap"> |
||||
|
<span class="blue">500+</span> |
||||
|
<span>项目</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup></script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.summarize_container { |
||||
|
padding: 29px 48px 43px 48px; |
||||
|
background: #f1f1f1; |
||||
|
.title_wrap { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
.small_tag { |
||||
|
font-size: 7px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 400; |
||||
|
color: #959595; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
.main_title { |
||||
|
font-size: 17px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 400; |
||||
|
color: #262626; |
||||
|
margin-bottom: 18px; |
||||
|
} |
||||
|
.desc { |
||||
|
font-size: 7px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 400; |
||||
|
color: #959595; |
||||
|
line-height: 16px; |
||||
|
text-align: center; |
||||
|
margin-bottom: 41px; |
||||
|
} |
||||
|
.mb { |
||||
|
margin-bottom: 50px; |
||||
|
} |
||||
|
.number_wrap { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
.text_wrap { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 17px; |
||||
|
font-family: Source Han Sans CN; |
||||
|
font-weight: 400; |
||||
|
color: #000000; |
||||
|
.blue { |
||||
|
font-size: 23px; |
||||
|
font-family: Zona Pro; |
||||
|
font-weight: 900; |
||||
|
color: #283fe7; |
||||
|
margin-right: 9px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,9 +1,13 @@ |
|||||
<template> |
<template> |
||||
<div>index</div> |
|
||||
|
<div> |
||||
|
<Summarize /> |
||||
|
<CaseShow /> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
|
||||
export default {} |
|
||||
|
<script setup> |
||||
|
import Summarize from 'cpns/Summarize' |
||||
|
import CaseShow from 'cpns/CaseShow' |
||||
</script> |
</script> |
||||
|
|
||||
<style></style> |
<style></style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue