湖里大屏(数字工地):组件封装

This commit is contained in:
Jack 2022-08-04 16:54:43 +08:00
parent b422afc48e
commit e392b186f1
3 changed files with 36 additions and 84 deletions

View File

@ -1,42 +1,26 @@
<template> <template>
<!-- 年龄结构 --> <Card :title="title">
<div class="container"> <DeviceCard :leftCount="{ value: 22, label: '在线设备' }" :rightCount="{ value: 65, label: '离线设备' }">
<div class="titleTxt">{{ title }}</div> hello
</DeviceCard>
</div> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue'
import DeviceCard from './components/DeviceCard.vue'
export default { export default {
components: { Card, DeviceCard },
props: { props: {
title: { title: {
type: String, type: String,
default: "default title" default: ''
} }
}, },
data() { data() {
return { return {}
}
};
},
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped></style>
.container {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
}
</style>

View File

@ -1,42 +1,26 @@
<template> <template>
<!-- 证书统计 --> <Card :title="title">
<div class="container"> <DeviceCard :leftCount="{ value: 22, label: '在线设备' }" :rightCount="{ value: 65, label: '离线设备' }">
<div class="titleTxt">{{ title }}</div> hello
</DeviceCard>
</div> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue'
import DeviceCard from './components/DeviceCard.vue'
export default { export default {
components: { Card, DeviceCard },
props: { props: {
title: { title: {
type: String, type: String,
default: "default title" default: ''
} }
}, },
data() { data() {
return { return {}
}
};
},
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped></style>
.container {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
}
</style>

View File

@ -1,42 +1,26 @@
<template> <template>
<!-- 人员类型 --> <Card :title="title">
<div class="container"> <DeviceCard :leftCount="{ value: 22, label: '升降机设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
<div class="titleTxt">{{ title }}</div> hello
</DeviceCard>
</div> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue'
import DeviceCard from './components/DeviceCard.vue'
export default { export default {
components: { Card, DeviceCard },
props: { props: {
title: { title: {
type: String, type: String,
default: "default title" default: ''
} }
}, },
data() { data() {
return { return {}
}
};
},
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped></style>
.container {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
}
</style>