OhPlay/components/battery/battery.vue

<template>
  <view class="battery">
    <view v-if="isCharging" class="bgc charg" ></view>
    <view v-if="!isCharging" class="bgc" :style="{height: height,background:color}" ></view>
    <image :src="icon" class="img"></image>
  </view>
</template>

<script>

export default {
  props: {
    battery:{
      type:Number,
      default:100
    }

  },
  data: () => ({
    // height:'30%',
	  // color:'#85D1A9'
  }),
  computed: {
    isCharging(){
      return (this.battery > 100)
    },

    height(){
      if(this.battery > 100 || this.battery<0){
        return '0%'
      }
      return (this.battery*0.7)+'%'
    },
    color(){
      if(this.battery > 20){
        return '#85D1A9'
      }else{
        return '#C00000'
      }
    },
    icon(){
      if(this.battery > 100){
        return '../../static/common/battery_charg.svg'
      }else{
        return '../../static/common/battery.svg'
      }
    }
  },
  methods: {},
  watch: {},
  
  // 组件周期函数--监听组件挂载完毕
  mounted() {
  },
  
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style>
.battery{
  width: 13rpx;
  height: 45rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  
  
}

.img{
  /* transform: translateY(-100%); */
  width: 13rpx;
  height: 45rpx;
  position:absolute;
  top: 0;

  
}

.bgc{
  width: 4rpx;
  /* height: 70%; */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7rpx;
  
	background: #85D1A9;
}

.charg{
  animation: charging 1500ms linear infinite;
}

@keyframes charging
{
	0%   {height: 0%;}
	25%   {height: 17%;}
	50%   {height: 35%;}
	75%   {height: 53%;}
	100%  {height: 70%;}
}

</style>