<template>
    <div class="item-box">
        <!-- <div class="item-label">
            <span >{{label}}</span>
        </div>
        <div class="item-value-unit">
            <div class="round"></div>
            <span>{{value}}  {{unit}}</span>
        </div> -->
        <div class="item-box-left">
            <p class="descript">{{label}}</p>
            <p class="num">{{value}} {{unit}}</p>
        </div>
        <div class="item-box-right"></div>
    </div>
</template>

<script>
export default {
  name: 'statisticItem',
  data () {
    return {
    }
  },
  props: ['label', 'value', 'unit']
}
</script>

<style scoped>
    .round{
        display: inline-block;
        width:10px;
        height:10px;
        border:4px solid rgb(144,159,193);
        border-radius: 20px;
        margin: 20px;
    }
    .item-box{
        width: 49%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 0.9rem;
    }
    .item-box .item-box-left{
        width: 92%;
        border-bottom: 1px solid #1d2738;
        display: flex;
        justify-content: space-between;
        border-radius: 0 0 0 2rem;
    }
    .item-box-left .descript{
        width: 55%;
        text-align: left;
        font-size: 0.9rem;
        color: #6e7987;
        font-weight: 600;
        text-indent: 1em;
        
    }
    .item-box-left p{
        padding: 0;
        margin: 0;
        line-height: 46px;
    }
    .item-box-left .num{
        width: 40%;
        text-align: right;
        color: #ecf6f7;
        font-weight: 600;
    }
    .item-box .item-box-right{
        width: 5%;
        border-bottom: #36486d solid 2px;
    }
    .item-label{
        /* flex:1; */
        color:rgb(144,159,193);
        font-size: 16px;
        margin: 10px;
    }
    .item-value-unit{
        flex:1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color:rgb(144,159,193);
        font-size: 20px;
    }
</style>
