maochaoying
2 years ago
4 changed files with 212 additions and 152 deletions
-
79src/components/Card.vue
-
79src/components/CaseShow.vue
-
79src/components/Hardware.vue
-
127src/mock/index.js
@ -0,0 +1,79 @@ |
|||||
|
<template> |
||||
|
<div class="line_cards"> |
||||
|
<div class="card" v-for="item in caseList" :key="item.id"> |
||||
|
<p class="title">{{ item.title }}</p> |
||||
|
<div class="img_box"> |
||||
|
<img :src="item.pic" class="img" /> |
||||
|
<div class="bottom_text"> |
||||
|
<p>工业设计</p> |
||||
|
<p>软硬件研发</p> |
||||
|
<p>样机制作</p> |
||||
|
<p>量产</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
const props = defineProps({ |
||||
|
caseList: { |
||||
|
type: Array, |
||||
|
}, |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.line_cards { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
grid-template-rows: repeat(5, 1fr); |
||||
|
column-gap: 7px; |
||||
|
padding: 0 7px; |
||||
|
box-sizing: border-box; |
||||
|
row-gap: 7px; |
||||
|
.card { |
||||
|
background: #ffffff; |
||||
|
border-radius: 3px; |
||||
|
flex: 1; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 11px 7px 7px 7px; |
||||
|
.title { |
||||
|
font-size: 8px; |
||||
|
font-family: Source Han Sans CN; |
||||
|
font-weight: 400; |
||||
|
color: #2f2f2f; |
||||
|
padding-left: 2px; |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
.img_box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
.img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.bottom_text { |
||||
|
position: absolute; |
||||
|
left: -50%; |
||||
|
bottom: -7px; |
||||
|
background: #000; |
||||
|
display: flex; |
||||
|
padding: 5px 0; |
||||
|
align-items: center; |
||||
|
justify-content: space-evenly; |
||||
|
font-size: 16px; |
||||
|
font-family: Source Han Sans CN; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
width: 200%; |
||||
|
transform: scale(0.5); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,127 @@ |
|||||
|
import L1 from '@/static/img/case/li1.png' |
||||
|
import L2 from '@/static/img/case/li2.png' |
||||
|
import L3 from '@/static/img/case/li3.png' |
||||
|
import L4 from '@/static/img/case/li4.png' |
||||
|
import L5 from '@/static/img/case/li5.png' |
||||
|
import L6 from '@/static/img/case/li6.png' |
||||
|
import L7 from '@/static/img/case/li7.png' |
||||
|
import L8 from '@/static/img/case/li8.png' |
||||
|
import L9 from '@/static/img/case/li9.png' |
||||
|
import L10 from '@/static/img/case/li10.png' |
||||
|
|
||||
|
export const caseList = [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: '国网照明巡检摄像头', |
||||
|
pic: L1, |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: '娱乐打禅休闲一体化座舱', |
||||
|
pic: L2, |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
title: '超声肿瘤治疗系统', |
||||
|
pic: L3, |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
title: '微型光度计', |
||||
|
pic: L4, |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
title: '动车底部巡检', |
||||
|
pic: L5, |
||||
|
}, |
||||
|
{ |
||||
|
id: 6, |
||||
|
title: '智能灯杆', |
||||
|
pic: L6, |
||||
|
}, |
||||
|
{ |
||||
|
id: 7, |
||||
|
title: '智慧医美视频拍照系统', |
||||
|
pic: L7, |
||||
|
}, |
||||
|
{ |
||||
|
id: 8, |
||||
|
title: '智能多通道全自动免疫荧光分析仪', |
||||
|
pic: L8, |
||||
|
}, |
||||
|
{ |
||||
|
id: 9, |
||||
|
title: '线性相机实验平台', |
||||
|
pic: L9, |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
title: '水处理设备', |
||||
|
pic: L10, |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
import Y1 from '@/static/img/hardware/hardware1.png' |
||||
|
import Y2 from '@/static/img/hardware/hardware2.png' |
||||
|
import Y3 from '@/static/img/hardware/hardware3.png' |
||||
|
import Y4 from '@/static/img/hardware/hardware4.png' |
||||
|
import Y5 from '@/static/img/hardware/hardware5.png' |
||||
|
import Y6 from '@/static/img/hardware/hardware6.png' |
||||
|
import Y7 from '@/static/img/hardware/hardware7.png' |
||||
|
import Y8 from '@/static/img/hardware/hardware8.png' |
||||
|
import Y9 from '@/static/img/hardware/hardware9.png' |
||||
|
import Y10 from '@/static/img/hardware/hardware10.png' |
||||
|
|
||||
|
export const hardList = [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: '国网照明巡检摄像头', |
||||
|
pic: Y1, |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: '娱乐打禅休闲一体化座舱', |
||||
|
pic: Y2, |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
title: '暖手宝', |
||||
|
pic: Y3, |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
title: '微型光度计', |
||||
|
pic: Y4, |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
title: '动车底部巡检', |
||||
|
pic: Y5, |
||||
|
}, |
||||
|
{ |
||||
|
id: 6, |
||||
|
title: '全自动AI缠绕打包机器人', |
||||
|
pic: Y6, |
||||
|
}, |
||||
|
{ |
||||
|
id: 7, |
||||
|
title: '智慧医美视频拍照系统', |
||||
|
pic: Y7, |
||||
|
}, |
||||
|
{ |
||||
|
id: 8, |
||||
|
title: '智能多通道全自动免疫荧光分析仪', |
||||
|
pic: Y8, |
||||
|
}, |
||||
|
{ |
||||
|
id: 9, |
||||
|
title: '室内空调调节机', |
||||
|
pic: Y9, |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
title: '水处理设备', |
||||
|
pic: Y10, |
||||
|
}, |
||||
|
] |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue