<!-- 物资储备详情 -->
<template>
  <div class="box">
    <div class="list" v-for="(item, index) in tableData" :key="index">
      <div :class="'card_img card_img_' + index"></div>
      <div class="card_content">
        <span class="card_name">{{ item.name }}</span>
        <span class="card_value">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({ msg: String });
const tableData = [
  {
    name: "仓库名称",
    value: "陕西省防汛抗旱物资管理中心"
  },
  {
    name: "仓库地址",
    value: "陕西省西安市新城区"
  },
  {
    name: "法人信息",
    value: "李伟"
  },
  {
    name: "联系电话",
    value: "13525277985"
  }
];

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%;
  height: 45%;
  box-sizing: border-box;
  background: url("@/assets/emergencyImg/center_new/bj.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  color: #ffffff;
  display: flex;
  align-items: center;
}
.list .card_img {
  flex: 35%;
  height: 100%;
}
.list .card_content {
  flex: 65%;
  /* background: pink; */
  display: flex;
  align-items: center;
}
.card_content .card_name {
  flex: 30%;
}
.card_content .card_value {
  flex: 60%;
  font-size: 18px;
  font-weight: 700;
  box-sizing: border-box;
  padding-right: 10px;
  background: linear-gradient(to bottom, rgb(202, 226, 254), rgb(242, 248, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.list .card_img_0 {
  background: url("@/assets/emergencyImg/center_new/c.png") no-repeat 50% 50%;
  background-size: auto 75%;
}
.list .card_img_1 {
  background: url("@/assets/emergencyImg/center_new/d.png") no-repeat 50% 50%;
  background-size: auto 75%;
}
.list .card_img_2 {
  background: url("@/assets/emergencyImg/center_new/f.png") no-repeat 50% 50%;
  background-size: auto 75%;
}
.list .card_img_3 {
  background: url("@/assets/emergencyImg/center_new/l.png") no-repeat 50% 50%;
  background-size: auto 75%;
}
</style>
