<!-- 
    filename: StdRate.vue
    author: liubin
    date: 2024-04-29 08:50:43
    description: 标准组件良率
-->

<template>
  <div class="std-rate">
    <div class="span-2">
      <StdRateItem
        :city="cities[5].name"
        :target="cities[5].target"
        :total="cities[5].total"
      />
    </div>
    <div
      v-for="item in cities.filter((val, index) => index != 5)"
      :key="item.name"
    >
      <StdRateItem
        :city="item.name"
        :target="item.target"
        :total="item.total"
      />
    </div>
  </div>
</template>

<script>
import StdRateItem from "./sub/StdRateItem.vue";
export default {
  name: "StdRate",
  components: { StdRateItem },
  props: {},
  data() {
    return {
      cities: [
        { name: "A", target: 100, total: 200 },
        { name: "B", target: 200, total: 300 },
        { name: "C", target: 300, total: 400 },
        { name: "D", target: 400, total: 500 },
        { name: "E", target: 500, total: 600 },
        { name: "F", target: 400, total: 500 },
        { name: "G", target: 500, total: 600 },
      ],
    };
  },
  computed: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.std-rate {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.span-2 {
  grid-column: span 2;
}
</style>
