<template>
    <div class="total-base">
      <div class="total-icon" :style="{'background':'url('+ chargeTotalIcon +') no-repeat','background-size':'70% 100%'}"></div>
      <div class="total-content">
        <div class="number" :style="{'color': numberColor}">{{number}}</div>
        <div class="text" :style="{'color': textColor}">{{text}}</div>
      </div>
    </div>
</template>

<script>
    export default {
      title: "TotalItem",
      props:{
        chargeTotalIcon:{
          default: require('src/assets/images/用户1.png')
        },
        numberColor:{
          type:String,
          default: '#00F9FD'
        },
        textColor:{
          type:String,
          default: 'rgba(255, 255, 255, 0.7)'
        },
        number:{
          type:Number,
          default: 1245137
        },
        text:{
          type:String,
          default:'今日售气量'
        }
      },
      data(){
          return {

          }
      }
    }
</script>

<style lang="less" scoped>
  .total-base{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .total-icon{
      height: 100%;
      width: 28%;
      background: #ff8198;
    }
    .total-content{
      height: 100%;
      width: 65%;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      text-align: left;
      .number{
        font-size: 10vw;
        width: 100%;
        height: 65%;
      }
      .text{
        font-size: vw(16);
        width: 100%;
        height: 30%;
      }
    }
  }
</style>
