BJ_web_developers / lzsandtable

  <template>
      <div class="total-wrap">

          <slot></slot>

          <div class="total-main" >

              <!--<countTo :startVal='0' :endVal='total' :duration='1000'></countTo>-->
              <div  v-for="(item,index) in total" :key="index" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
                 <!--{{item}}  -->
                  <countTo :startVal='0' :endVal='Number(item)' :duration='2000'></countTo>

              </div>
          </div>
      </div>
  </template>
  
  <script>
  import { formaterTotal } from '../../utils/formate'

  import countTo from 'vue-count-to'

  export default {
    name: 'AccountNum',

    components:{
      countTo
    },

    props:['totalnum'],

    data(){
      return {

        //total: formaterTotal(this.totalnum)
      }
    },
    created(){
      //console.log(this.totalnum)
    },
    computed:{
      total(){

        console.log(typeof this.totalnum)
        return  formaterTotal(this.totalnum)

      }
    }
  }
  </script>
  
  <style scoped lang="scss">
      .total-wrap{
          height: 30%;
          display: flex;
          align-items: center;

          >span{

              display: inline-block;
              width: 50px;
              text-align: left;
          }

          .total-main{

              /*margin-left: 10px;*/

              padding: 5px 5px 5px 0;
              background: url("../../images/content/numBorder.svg") no-repeat;
              background-size: 100% 100%;
          }
          .eleNumBg{
              width: 20px;
              height: 30px;
              display: inline-block;
              margin-left: 5px;
              line-height: 30px;
              font-size: 22px;
              font-weight: 600;
              text-align: center;
              background: url("../../images/content/numBg.svg") no-repeat;
              background-size: 100% 100%;
          }

          .noeleNumBg{
              width: 10px;
              height: 30px;
              display: inline-block;
              margin-left: 5px;
              line-height: 30px;
              font-size: 22px;
              font-weight: 600;
              text-align: center;
          }

      }
  </style>