<template>
  <div class="dashboardList">
    <ul class="flex-h">
      <li class="flex-item" v-for="(item,index) in data.list" :key="index">
        <div :style="{background:colorList[index%colorList.length]}">
          <div class="centerLabel">
            <span>{{item.name}}</span>
            <span>{{item.value}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['data'],
  data () {
    return {
      colorList: ['#fc6243', '#409EFF', '#4ddea2', '#f6e259', '#5c59f6', '#f66f59'],
    }
  },
  mounted () {
    this.$nextTick(function () {})
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
