Browse Source

case card

master
maochaoying 2 years ago
parent
commit
0f94e83e68
  1. 79
      src/components/Card.vue
  2. 79
      src/components/CaseShow.vue
  3. 79
      src/components/Hardware.vue
  4. 127
      src/mock/index.js

79
src/components/Card.vue

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

79
src/components/CaseShow.vue

@ -6,91 +6,18 @@
line1="医疗健康、智能硬件、工业设备、高铁设备、户外设备"
line2="特种设备、智能家居、实验仪器、消费电子"
/>
<div class="line_cards">
<div class="card">
<p class="title">国网照明巡检摄像头</p>
<div class="img_box">
<div class="img"></div>
<div class="bottom_text">
<p>工业设计</p>
<p>软硬件研发</p>
<p>样机制作</p>
<p>量产</p>
</div>
</div>
</div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<Card :caseList="caseList" />
</div>
</template>
<script setup>
import HeadLine from 'cpns/HeadLine'
import { caseList } from '@/mock'
import Card from 'cpns/Card.vue'
</script>
<style lang="scss" scoped>
.case_show_container {
margin-top: 330px;
.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 {
height: 132px;
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: 11px;
}
.img_box {
width: 100%;
flex: 1;
position: relative;
.img {
width: 100%;
height: 100%;
background: red;
}
.bottom_text {
position: absolute;
left: -50%;
bottom: -10%;
height: 34px;
background: rgba(0, 0, 0, 0.2);
display: flex;
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>

79
src/components/Hardware.vue

@ -6,90 +6,17 @@
line1="医疗健康、智能硬件、工业设备、高铁设备、户外设备"
line2="特种设备、智能家居、实验仪器、消费电子"
/>
<div class="line_cards">
<div class="card">
<p class="title">国网照明巡检摄像头</p>
<div class="img_box">
<div class="img"></div>
<div class="bottom_text">
<p>工业设计</p>
<p>软硬件研发</p>
<p>样机制作</p>
<p>量产</p>
</div>
</div>
</div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<Card :caseList="hardList" />
</div>
</template>
<script setup>
import HeadLine from 'cpns/HeadLine'
import { hardList } from '@/mock'
import Card from 'cpns/Card.vue'
</script>
<style lang="scss" scoped>
.hardware_container {
.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 {
height: 132px;
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: 11px;
}
.img_box {
width: 100%;
flex: 1;
position: relative;
.img {
width: 100%;
height: 100%;
background: red;
}
.bottom_text {
position: absolute;
left: -50%;
bottom: -10%;
height: 34px;
background: rgba(0, 0, 0, 0.2);
display: flex;
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>

127
src/mock/index.js

@ -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,
},
]
Loading…
Cancel
Save