<template>
  <div v-loading="loading">
    <div class="bonus-list">
      <div class="bonus-item" v-for="(item,key) in newData" :key="key">
        <el-tooltip effect="dark" :content="item.name" placement="top-end">
          <div>{{item.value}}</div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
  import network from '@/utils/network'
  import tool from '@/utils/tool'

  export default {
    name: 'bonus_new',
    components: {},
    mounted() {
      this.getData()
    },
    data() {
      return {
        loading:false,
        newData:null
      }
    },
    methods: {
      getData() {
        let vueObj = this
        vueObj.loading = true
        network.getData('bonus/new').then(response => {
          //console.log(response);
          vueObj.newData = response
          vueObj.loading = false
        }).catch(response => {
          vueObj.loading = false
        })
      },
    }
  }

</script>
<style>
  .bonus-list:after{content: '';clear: both;display: table;}
  .bonus-list .bonus-item{float: left;width: 33.333%;text-align: center;background: #fff;height:36px;line-height:36px;border: 1px solid #ddd;margin: -1px 0 0 -1px;box-sizing: border-box;}
  .bonus-list .bonus-item:hover{background: #f5f5f5;cursor: pointer;}
</style>
