<template>
<div class="segmentProgressBody">
  <div class="topType">
    <div class="left">未冻结：{{segmentProgressData.left}}%</div>
    <div class="middle">已冻结：{{segmentProgressData.middle}}%</div>
    <div class="right">已结算：{{segmentProgressData.right}}%</div>
  </div>
  <div class="bottomProgress">
    <div class="left" :style="{width:segmentProgressData.left+'%'}"></div>
    <div class="middle" :style="{width:segmentProgressData.middle+'%'}"></div>
    <div class="right" :style="{width:segmentProgressData.right+'%'}"></div>
  </div>
</div>
</template>

<script>
export default {
  name:'SegmentProgress',
  props:{
    segmentProgressData:{
      type:Object,
      default:function(){
        return {
          left:33,
          middle:33,
          right:33
        }
      }
    }
  }
}
</script>

<style scoped lang='less'>
.segmentProgressBody{
  .topType{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    .left,.middle,.right{
      font-size:12px;
      font-family:Microsoft YaHei;
    }
    .left{
      color: #FF9902;
    }
    .middle{
      color: #4C79E1;
    }
    .right{
      color: #56BA3E;
    }
  }
  .bottomProgress{
    display: flex;
    .left,.middle,.right{
      height:4px;
    }
    .left{
      background-color: #FF9902;
      border-radius: 2px 0 0 2px;
    }
    .middle{
      background-color: #4C79E1;
      margin: 0 2px;
    }
    .right{
      background-color: #56BA3E;
      border-radius:0 2px 2px 0;
    }
  }
}
</style>