<template>
  <Card title="环境监测">
    <!-- 环境监测 -->
    <div class="contentBox">
      <!-- <div class="left">
        <img src="../assets/images/common/echart_orange.gif" alt />
        <p class="num1">45%</p>
        <div class="text">
          <p>环境巡检率/环境总数</p>
          <p style="color:#d7d9dc;font-size:14px">
            <span style="color:#da580d">45</span>
            /200
          </p>
        </div>
      </div> -->

      <div class="right">
        <div class="air">
          <airQulityChart :show="true"></airQulityChart>
        </div>
        <div class="text">
          <p class="ps">环境巡检率/环境总数</p>
          <p style="color:#d7d9dc;font-size:18px" class="pstest">
            <span style="color:#72bdc9;">36</span>
            /200
          </p>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import airQulityChart from '../components/environmentWatchTwo'

export default {
  components: { Card, airQulityChart }
}
</script>

<style lang="less" scoped>
.contentBox {
  width: 100%;
  height: 100%;
  display: flex;
  .right {
    margin-top: -12px;
    width: 100%;
    height: 100%;
    margin-right: 10%;
    position: relative;
    color: #c5c7cc;
    .air {
      width: 100%;
      height: 80%;
    }   
    .text {
     margin-top: 10px;
      width: 100%;
      height: 20%;
      text-align: center;
      .ps {
        font-size: 12px;
      }
      
    }
  }
}
</style>
