zhgdyun/src/views/projectAdmin/zjsj/carbon/leftTop.vue

<template>
  <Card title="环境监测">
    <!-- 环境监测 -->
    <div class="contentBox">
      <div class="left">
        <img src="../assets/images/common/echart_orange.png" 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">
        <img src="../assets/images/common/echart_blue.png" alt />
        <p class="num1">36%</p>
        <div class="text">
          <p>环境巡检率/环境总数</p>
          <p style="color:#d7d9dc;font-size:14px">
            <span style="color:#72bdc9;">36</span>
            /200
          </p>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "../components/Card.vue";
export default {
  components: { Card }
};
</script>

<style lang="less" scoped>
.contentBox {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 5%;
  margin-left: 10%;
  .left,
  .right {
    height: 65%;
    margin-right: 10%;
    position: relative;
    color: #c5c7cc;
    .num1 {
      position: absolute;
      top: 45%;
      left: 43%;
    }
    .text {
      margin-top: 5%;
      font-size: 14px;
      width: 100%;
      text-align: center;
    }
  }
}
</style>