<template>
    <div class="powerContainer" v-if="parseInt(curPower) > 0 && parseInt(curHr) > 0">
      <img src="../assets/imgs/power/100p.svg" alt="" v-if="parseInt(curPower) >= 81">
      <img src="../assets/imgs/power/75p.svg" alt="" v-if="parseInt(curPower) >= 41 && parseInt(curPower) < 81">
      <img src="../assets/imgs/power/50p.svg" alt="" v-if="parseInt(curPower) >= 21 && parseInt(curPower) < 41">
      <img src="../assets/imgs/power/25p.svg" alt="" v-if="parseInt(curPower) < 21">
    </div>
    <div class="powerContainer" v-else>
      <img>
    </div>
</template>

<script>
import '../libs/rem';
export default {
  props: ['curPower', 'curHr'],
}
</script>

<style lang="scss" scoped>
.powerContainer {
  float: right !important;
  color: #fff;
  font-size: 0.23rem;
  width: 0.55rem !important;
  overflow: hidden;

  img {
    width: 0.33rem;
    line-height: 0.3rem;
  }

  span {
    display: inline-block;
    line-height: 0.2rem;
  }

  em {
    font-size: 0.15rem;
  }
}
</style>
