<template>
  <div class="rightbl">
    <div class="slider-bg">
      <div :style="'width:'+wid*200+'px;'" class="slider-color" />
    </div>
    <div class="bl">{{ data }}</div>
  </div>
</template>
<script>
export default {
  name: 'Rightbl',
  props: {
    data: {
      type: String,
      default: ''
    }
  },
  computed: {
    wid() {
      return parseFloat(this.data.replace('%', '')) / 100
    }
  }
}
</script>
<style scoped>
.rightbl{
    display: inline-block;
}
.slider-bg{
    width:200px;
    height:10px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    background: #ccc;
    position: relative;
}
.slider-color{
    position: absolute;
    top:0;
    left:0;
    height:10px;
    border-radius: 5px;
    background: #f00;
}
.bl{
    vertical-align: middle;
    display: inline-block
}
</style>
