<template>
  <ul class="statics-rwzx">
    <li class="item item_box" v-for="item in list" :key="item">
      <div class="title">{{ item.title }}</div>
      <div class="number numb">{{ item.count }}</div>
    </li>
  </ul>
</template>

<script setup>
import { reactive, ref, onMounted, defineProps } from "vue";
const props = defineProps({
  list: Array,
});
</script>

<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";
.statics-rwzx {
    display: flex;
    flex-wrap: wrap;
    margin: 2vw 3vw 1vw 3vw;
  .item {
    width: 31.3%;
    border-radius: 2vw;
    overflow: hidden;
    margin-bottom: 4vw;
    .title {
      height: 7vw;
      text-align: center;
      line-height: 7vw;
      @include font_size($font_medium_s);
      background: #3e6ee8;
      color: #fff;
    }
    .number {
      height: 10vw;
      text-align: center;
      line-height: 10vw;
    }
  }
  li:nth-child(3n + 2) {
    margin-left: 3%;
    margin-right: 3%;
  }
}
</style>
