AccountNum.vue 1.43 KB
<template>
    <div class="total-wrap">
        <span>总计</span>
        <div class="total-main" >
            <div  v-for="item in total" :key="item" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
                {{item}}
            </div>
        </div>
    </div>
</template>

<script>
import { formaterTotal } from '../../utils/formate'
export default {
  name: 'AccountNum',
  data(){
    return {
      total: formaterTotal(219706)
    }
  }
}
</script>

<style scoped lang="scss">
    .total-wrap{
        height: 30%;
        display: flex;
        align-items: center;
        .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>