85 lines
1.6 KiB
Vue
85 lines
1.6 KiB
Vue
<template>
|
|
<!-- 环境监测 -->
|
|
<Card :title="title">
|
|
<div class="airChart">
|
|
<airQulityChart></airQulityChart>
|
|
</div>
|
|
<div class="counts">
|
|
<div class="count">
|
|
<!-- <div class="icon"></div> -->
|
|
<img src="@/assets/images/projectImg/dig_one.png" />
|
|
<div class="info">
|
|
<p class="num">PM2.5</p>
|
|
<p class="label">21μg/m3</p>
|
|
</div>
|
|
</div>
|
|
<div class="count">
|
|
<img src="@/assets/images/projectImg/dig_two.png" />
|
|
<div class="info">
|
|
<p class="num">PM2.5</p>
|
|
<p class="label">21μg/m3</p>
|
|
</div>
|
|
</div>
|
|
<div class="count">
|
|
<img src="@/assets/images/projectImg/dig_three.png" />
|
|
<div class="info">
|
|
<p class="num">噪声</p>
|
|
<p class="label">58dB</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from "../components/Card.vue";
|
|
import airQulityChart from "../../homePage/environmentWatch.vue";
|
|
export default {
|
|
components: { Card, airQulityChart },
|
|
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "default title"
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.airChart {
|
|
width: 60%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
.counts {
|
|
padding-top: 5%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.count {
|
|
display: flex;
|
|
align-items: center;
|
|
img{
|
|
width:40px;
|
|
height:40px;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.info {
|
|
color: #fff;
|
|
margin-bottom: 5px;
|
|
.num {
|
|
font-size: 12px;
|
|
}
|
|
.label {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|