<template>
  <div class="power-layout">
    <div class="p-num" :style="{color:data.color}">{{data.num}}</div>
    <ul>
      <li v-for="(item,i) in sum" :style="{top:10*i+'px',background:i>(sum-data.content)?data.color:'rgba(0, 0, 0, 0.06)'}" :key='i'></li>
    </ul>
    <div class="b-num" >{{data.bottomname}}</div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data () {
    return {
      sum: 25
    }
  }
}
</script>

<style scoped>
  .p-num{
    text-align: center;
    margin-bottom: 10px;
  }
  .b-num{
    text-align: center;
    margin-top: 265px;
  }
  ul{
    font-size: 0;
    position: relative;
  }
  ul li{
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    height: 4px;
    line-height: 4px;
    background: rgba(255, 255, 255, 0.01);
    position: absolute;
    top: 10px;
    border-radius: 2px;
  }
</style>
