ngfrontend/src/views/bonus/historical-cumulative-bonus.vue

<template>
  <div v-loading="loading" class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="8" :span="6" v-for="(item,index) in tableData" :key="index">
        <el-card shadow="hover" style="margin: 10px auto;" >
          <el-result :title="$t(`bonus.${item.name}`)" :sub-title="item.bonus | toThousandFilter">
            <template slot="icon">
              <i class="el-icon-money" />
            </template>
          </el-result>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { fetchHistoricalCumulativeBonus } from '@/api/bonus'

export default {
  name: 'HistoricalCumulativeBonus',
  data() {
    return {
      tableData: [],
      total: 0,
      loading: true,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      fetchHistoricalCumulativeBonus().then(response => {
        const { tableData, bonusSwitch } = response.data
        this.tableData = tableData
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.app-container{
	i{
		display: block;
		font-size: 60px;
		/* margin-bottom: 15px; */
		transition: color .15s linear;
		// color: #13ce66;
	}

}
::v-deep .el-result__subtitle{
		font-weight: bold;
		p{
			font-size: 1.5em!important;
			color: #000;
		}
	}
</style>