<style scoped>
    .imgs{position: relative;border: 1px solid #1d1e1e;border-radius: 2px;}
  .imgs .bg{position: absolute;height:100%;left: 0;top: 0px; background: #1eff00}
  .imgs .quantity-top{ position: absolute;right: 0px; background: #1d1e1e;}
</style>
<template>
  <Tooltip :content="'当前电量:' + value + '%'">
  <div class="imgs" :style="'width:' + width + 'px;height:' + getHegiht(width) + 'px;' ">
      <div class="bg" :style="'width:' + value + '%;' "></div>
      <div style="width: 100%;height: 100%" class="fx-h fx-bc fx-ac">
        <div class="quantity-top" :style="'height:' + parseInt(0.13 * width) + 'px;width:' + parseInt(0.04 * width) + 'px;right:-' + (parseInt(0.04 * width) + 1) + 'px;'  "></div>
      </div>
  </div>
  </Tooltip>
</template>


<script>
    export default {
        name: "ui-quantity",
        computed: {},
        data() {
            return {}
        },
        props: {
          width: {
              type: Number,
              default: 30
          },
          value : {
              type : Number,
              default : 0
          }

        },
        created() {

        },
        methods: {


            getHegiht:function (value) {
                return parseInt(0.45 * value);
            }
        }
    }
</script>
