<!--
 * @Author: your name
 * @Date: 2021-10-26 14:18:22
 * @LastEditTime: 2021-12-06 16:14:13
 * @LastEditors: Please set LastEditors
 * @Description: 应收排名
 * @FilePath: \hyyfScreen\src\views\Production\board\YingShou.vue
-->
<template>
  <div class="ying-shou">
    <div class="content">
      <div class="title">
        <div class="item">排名</div>
        <div class="item">供应商</div>
        <div class="item">金额</div>
      </div>
      <div v-for="item in data" :key="item.rank" class="data">
        <div class="item">{{ item.rank }}</div>
        <div class="item grey">{{ item.suppier }}</div>
        <div class="item grey">{{ item.money }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style scoped>
.ying-shou {
  color: #fff;
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.title {
  margin-top: 20px;
  height: 20%;
  display: flex;
  font-size: 15px;
}
.item {
  width: 33%;
  text-align: center;
}

.data {
  height: 15%;
  display: flex;
  font-size: 13px;
}
.grey {
  color: #bbb;
}
</style>
