<!-- 出入库记录 -->
<template>
  <div class="box">
    <div class="list" v-for="(item, index) in tableData" :key="index">
      <div :class="'list_left list_left_' + index"></div>
      <div :class="'list_right list_right_' + index">
        <div class="list_card card_top">
          <div class="card_left">{{ item.name }}</div>
          <div class="card_right">{{ item.number }}</div>
        </div>
        <div class="list_card card_line">
          <div class="card_left"></div>
          <div class="card_right"></div>
        </div>
        <div class="list_card card_bottom">
          <div class="card_left">{{ item.data }}</div>
          <div class="card_right">{{ item.state }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({ msg: String });
const tableData = [
  {
    name: "被服",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  },
  {
    name: "床具",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  },
  {
    name: "用具",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  },
  {
    name: "帐篷",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  },
  {
    name: "救生器材",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  },
  {
    name: "抢险物料",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  },
  {
    name: "供水器具",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  },
  {
    name: "排水设备",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  },
  {
    name: "抢险机具",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  },
  {
    name: "防洪铅丝网",
    number: "12个",
    data: "4*5",
    state: "2023-1-8"
  }
];

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

<style scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 22px 20px 45px;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.list{
  width: 100%;
  height: 8.7%;
  box-sizing: border-box;
  margin-top: 12px;
  background: url("@/assets/emergencyImg/crk_bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
}
.list .list_right{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* background: pink; */
  padding: 0 30px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}
.list_card{
  display: flex;
}
.list_card .card_left{
  width: 25%;
}
.list_card .card_right{
  width: 75%;
  text-align: right;
}
.card_top ,.card_bottom{
  height: 49%;
}
.card_line{
  height: 2%;
}
.card_line .card_left{
  background: #b69815;
}
.card_line .card_right{
  background: #044bcc;
}
.card_top .card_left,.card_top .card_right{
  line-height: 200%;
}


.list .list_left{
  width: 18%;
}
.list .list_left_0{
  background: url("@/assets/emergencyImg/crk_bedclothes.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_1{
  background: url("@/assets/emergencyImg/crk_bedding.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_2{
  background: url("@/assets/emergencyImg/crk_appliance.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_3{
  background: url("@/assets/emergencyImg/crk_tents.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_4{
  background: url("@/assets/emergencyImg/crk_lifesaving.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_5{
  background: url("@/assets/emergencyImg/crk_material.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_6{
  background: url("@/assets/emergencyImg/crk_water.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_7{
  background: url("@/assets/emergencyImg/crk_drainage.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_8{
  background: url("@/assets/emergencyImg/crk_rescue.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_9{
  background: url("@/assets/emergencyImg/crk_net.png") no-repeat;
  background-size: 100% 100%;
}
.list_right_0 .card_line .card_left,.list_right_1 .card_line .card_left,.list_right_2 .card_line .card_left,.list_right_3 .card_line .card_left{
  width: 12%;
}
.list_right_0 .card_line .card_right,.list_right_1 .card_line .card_right,.list_right_2 .card_line .card_right,.list_right_3 .card_line .card_right{
  width: 88%;
}
.list_right_4 .card_line .card_left,.list_right_5 .card_line .card_left,.list_right_6 .card_line .card_left,.list_right_7 .card_line .card_left,.list_right_8 .card_line .card_left{
  width: 20%;
}
.list_right_4 .card_line .card_right,.list_right_5 .card_line .card_right,.list_right_6 .card_line .card_right,.list_right_7 .card_line .card_right,.list_right_8 .card_line .card_right{
  width: 80%;
}
.list_right_9 .card_line .card_left{
  width: 26%;
}
.list_right_9 .card_line .card_right{
  width: 74%;
}
</style>
