<template>
    <div class="item-base">
      <div class="item-content">
        <div class="content-left">{{text}}</div>
        <div class="content-right">
          <div class="right-percentage">{{percentage}}</div>
          <div class="right-count">{{count}}</div>
        </div>
      </div>
      <div class="item-bar">
        <div class="bar-percentage" :style="{'background':barColor,'width':percentage}"></div>
      </div>
    </div>
</template>

<script>
    export default {
      title: "ListICountitem",
      props:{
        barColor:{
          type:String,
          default:'#eed2d4'
        },
        percentage:{
          type:String,
          default: '30%'
        },
        text:{
          type:String,
          default: '金额卡表收费'
        },
        count:{
          type:Number,
          default: 12210
        }
      }
    }
</script>

<style lang="less" scoped>
  .item-base{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .item-content{
      width: 100%;
      height: 70%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: vw(16);
      .content-left{
        margin-left: 1%;
        width: 30%;
        height: 90%;
        color: #B2B0CB;
      }
      .content-right{
        margin-right: 1%;
        width: 30%;
        height: 90%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        text-align: right;
        color: #fff;
        .right-count{
          width: 68%;
          height: 100%;
          margin-right: 5%;
        }
        .right-percentage{
          width: 24%;
          height: 100%;
        }
      }
    }
    .item-bar{
      width: 100%;
      height: 22%;
      background: #00307F;
      display: flex;
      align-items: center;
      .bar-percentage{
        height: 100%;
      }
    }
  }
</style>
