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