hyyfScreen/src/views/Production/board/ImportantItems.vue

<!--
 * @Author: your name
 * @Date: 2021-10-26 17:34:46
 * @LastEditTime: 2021-11-30 08:57:24
 * @LastEditors: Please set LastEditors
 * @Description: 重要指标
 * @FilePath: \hyyfScreen\src\views\Production\board\ImportantItems.vue
-->
<template>
  <div class="important-items">
    <div class="item" v-for="item in data" :key="item.id">
      <div class="name">{{ item.name }}</div>
      <div class="num">{{ item.num }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style scoped>
.important-items {
  margin: 0 auto;
  width: 95%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: 30%;
  background: url("../../../assets/BioSafety/base.jpg") no-repeat;
  height: 70px;
  background-size: 100% 100%;
  margin-top: 30px;
  color: #fff;
}
.name {
  margin: 10px 0 0 10px;
  font-size: 15px;
}
.num {
  font-size: 20px;
  text-align: center;
}
</style>