<template>
  <div class="poerrViewTop">
    <ul>
      <li>
        <div>
          <p>月度用电量</p>
          <p style="color:#31e9ff">
            <span class="num static">{{ data.monthCount }}</span
            >kWh
          </p>
          <p>
            上月同期 {{ data.lastMonthCount }}
            <span class="text-red" style="margin-left: 5px">
              {{ data.monthRadio + "%" }}
              <img src="../../../../assets/images/arrowUp.png" alt=""
            /></span>
          </p>
        </div>
      </li>
      <li>
        <div>
          <p>年度用电量</p>
          <p style="color:#37a5eb">
            <span class="num static">{{ data.yearCount }}</span
            >kWh
          </p>
          <p>
            去年同期 {{ data.lastYearCount == null ? 0 : data.lastYearCount }}
            <span class="text-red" style="margin-left: 5px"
              >{{ data.yearRadio }}%
              <img src="../../../../assets/images/arrowUp.png" alt=""
            /></span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "statisTop",
  props: {
    dayMonthData: Object,
  },
  components: {},
  data() {
    return {
      data: [],
    };
  },
  mounted() {},
  methods: {},
  watch: {
    dayMonthData() {
      this.data = this.dayMonthData;
    },
  },
};
</script>

<style lang="scss">
.poerrViewTop {
  height: 30%;
  // border: 1px solid red;
}
.poerrViewTop ul {
  display: flex;
  text-align: center;
  height: 100%;

  li:first-child {
    margin-right: 0.07rem;
    .num {
      color: #31e9ff;
    }
  }
  li:last-child {
    margin-left: 0.07rem;
    .num {
      color: #37a5eb;
    }
  }

  li {
    height: 100%;
    flex: 1;

    // padding: 0.125rem 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    
background: rgba(0, 0, 0, 0.4);
    border: 1px solid #0065c7;
    p {
      font-size: 0.2rem;
      img {
        width: 0.15rem;
      }
    }
    .num {
      margin: 0.0625rem;
      display: inline-block;
      font-size: 0.3rem;
    }
  }
}
</style>
