<!-- 物资储备详情 -->
<template>
  <div class="box">
    <div class="list" v-for="(item, index) in tableData" :key="index">
      <div :class="'list_left list_left_' + index">
        <div class="icon"></div>
      </div>
      <div class="list_right">
        <div class="card_top">
          {{item.name}}
        </div>
        <div class="card_bottom">
          {{item.number}}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref } from "vue";

const props = defineProps({ msg: String });
const tableData = [
  {
    name: "被服（万元）",
    number: "8,888",
  },
  {
    name: "床具（万元）",
    number: "8,888",
  },
  {
    name: "抢险物料（万元）",
    number: "8,888",
  },
  {
    name: "救生器材（万元）",
    number: "8,888",
  },
];

onMounted(() => {});
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 0 10px 32px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.list{
  width: 49.4%;
  height: 46%;
  box-sizing: border-box;
  /* margin-bottom: 12px; */
  background: url("@/assets/emergencyImg/center_list_bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
}
.list_left, .list_right{
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}
.list_right{
  padding: 50px 50px 50px 0;
  justify-content: space-between;
  text-align: center;
}
.list_right .card_top{
  font-size: 14px;
}
.list_right .card_bottom{
  font-size: 36px;
  font-weight: 700;
}
.list_left{
  background: url("@/assets/emergencyImg/center_list_title.png") no-repeat;
  background-size: 124px 133px;
  background-position: 36px 18px;
}
.list_left .icon{
  width: 100%;
  height: 100%;
}
.list_left_0 .icon{
  background: url("@/assets/emergencyImg/center_1.png") no-repeat;
  background-size: 67px 69px;
  background-position: 64px 60px;
}
.list_left_1 .icon{
  background: url("@/assets/emergencyImg/center_2.png") no-repeat;
  background-size: 67px 58px;
  background-position: 66px 65px;
}
.list_left_2 .icon{
  background: url("@/assets/emergencyImg/center_3.png") no-repeat;
  background-size: 68px 68px;
  background-position: 64px 60px;
}
.list_left_3 .icon{
  background: url("@/assets/emergencyImg/center_4.png") no-repeat;
  background-size: 65px 65px;
  background-position: 65px 62px;
}
</style>
