<template>
  <div class="dle">
    <div v-for="(item, index) in list" :key="index" class="dle-ve">
      <rate3D :data="item.val" :text="item.text" :title="item.title"></rate3D>
    </div>
  </div>
</template>

<script>
import rate3D from "../../../components/rate3D.vue";
export default {
  components: { rate3D },
  data() {
    return {
      list: [
        {
          title: "交接班记录/日",
          text: "55%",
          val: 55,
        },
        {
          title: "巡查记录/日",
          text: "75%",
          val: 75,
        },
        {
          title: "安全培训/年",
          text: "55%",
          val: 55,
        },
        {
          title: "消防预案",
          text: "87%",
          val: 87,
        },
        {
          title: "演练记录/年",
          text: "55%",
          val: 55,
        },
        {
          title: "评估报告/年",
          text: "100%",
          val: 100,
        },
        {
          title: "维保记录/月",
          text: "15%",
          val: 15,
        },
        {
          title: "安全制度",
          text: "35%",
          val: 35,
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.dle {
  display: flex;
  flex-wrap: wrap;
  //   justify-content: space-between;
  // margin: 20px 0px 20px 20px;
  margin: 0px 40px;
  row-gap: 5px;
  column-gap: 35px;

  .dle-ve {
    // margin-right: 30px;
  }
}
.dle::after {
  content: "";
  flex: auto;
}
</style>
