admin/src/components/dashboardList/index.vue

<template>
  <div class="dashboardList">
    <ul class="flex-h">
      <li class="flex-item">
        <div :style="{background:colorList[index%colorList.length]}">
          <div class="centerLabel">
            <span>{{data.title}}</span>
            <span>{{data.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 () {
      console.log(JSON.stringify(this.data))
    })
  },
  methods: {
  }
}
</script>

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