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

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

View File

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

View File

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