BJ_web_developers / lzsandtable

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

          <slot></slot>

          <div class="total-main" >

              <div  v-for="(item,index) in total" :key="index+Math.random()" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >

                  {{item}}
              </div>
          </div>
      </div>
  </template>
  
  <script>
  import { formaterTotal } from '../../utils/formate'
  export default {
    name: 'AccountNum',

    props:['totalnum'],

    data(){
      return {

        total: 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>