<!-- 物资储备情况 -->

<template>
  <div class="box">
    <div class="title">{{ props.msg }}</div>
    <div class="table">
      <el-table highlight-current-row="false" class="eltable" stripe :header-cell-style="{ background: 'transparent' }"
        :data="tableData" style="width: 100%; height: 100%; border: none; background: transparent">
        <el-table-column header-align="center" align="center" style="background: transparent; border: none" fixed
          prop="name" label="物资名称" />
        <el-table-column header-align="center" align="center" style="background: transparent; border: none" prop="data"
          label="规格" />
        <el-table-column header-align="center" align="center" style="background: transparent; border: none"
          prop="number" label="数量+单位" />
        <el-table-column header-align="center" align="center" style="background: transparent; border: none" prop="state"
          label="价值" />
      </el-table>
    </div>
  </div>
</template>

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

const props = defineProps({ msg: String });
const tableData = [
  {
    name: "单帐篷",
    data: "1.2*2.1",
    number: "500项",
    state: "1万"
  },
  {
    name: "单帐篷",
    data: "1.2*2.1",
    number: "500项",
    state: "1万"
  },
  {
    name: "单帐篷",
    data: "1.2*2.1",
    number: "500项",
    state: "1万"
  },
  {
    name: "单帐篷",
    data: "1.2*2.1",
    number: "500项",
    state: "1万"
  }
];

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

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.box .table {
  position: absolute;
  bottom: -5%;
  left: 8%;
  width: 80%;
  /* height: 67%; */
  /* background: pink; */

  z-index: 22;
  background-color: transparent;
}

.title {
  font-size: 18px;
  color: #ffffff;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  padding-left: 30px;
  /* background: aqua; */
  left: 8%;
  top: 6%;
  font-weight: 500;
  height: 50px;
  line-height: 40px;
  background: url("@/assets/emergencyImg/left_title_bg.png") no-repeat;
  /* background: linear-gradient(to bottom, #ffffff, rgb(29, 233, 234));
  -webkit-background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
}

.el-table {
  background: transparent;
}

:deep(.el-table) {
  background: transparent;
}

/*最外层透明*/
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.8;
  font-size: 12px;
}

/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: rgb(255, 255, 255);
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  /* background: red; */
  backdrop-filter: blur(10px);
  background: transparent;
}

:deep(.el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf) {
  border: none !important;
}

:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  border: none !important;
}

.el-table tbody tr:hover>td {
  background-color: transparent !important;
}

.el-table__body tr.hover-row.current-row>td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell,
.el-table__body tr.hover-row>td.el-table__cell {
  background-color: transparent !important;
}

:deep(.el-table tbody tr:hover > td) {
  background-color: transparent !important;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

:deep(.el-table_row > td) {
  border: non;
}

:deep(.el-table) {
  --el-table-border-color: transparent;
}

:deep(.el-table .el-table__header tr) {
  /* background: aqua !important; */
  background: url("@/assets/emergencyImg/left_table_title.png") no-repeat !important;
  background-size: 100% 100%;
}

:deep(.el-table .el-table__header tr .cell) {
  color: #709dcd;
  font-size: 14px;
}

:deep(.el-table .el-table__body tr) {
  /* background: pink !important; */
  background: url("@/assets/emergencyImg/left_list_bg.png") no-repeat !important;
  background-size: 100% auto !important;
  background-position: 0 84% !important;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell) {
  background-color: transparent !important;
}

:deep(.el-table__body tr.current-row > td.el-table__cell) {
  background-color: transparent !important;
}
</style>
