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

