<template>
  <div class="el-overlay">
    <div class="box">
      <div class="box-header">
        <div class="box-title">库存消息</div>
        <div class="box-btn" @click="close"></div>
      </div>
      <div class="box-content">
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="batchNum" label="批次号" width="180" />
          <el-table-column prop="itemDesc" label="品牌" width="180" />
          <el-table-column prop="inTime" label="入库时间" />
          <el-table-column prop="weight" label="重量(kg)" />
          <el-table-column prop="boxCount" label="箱数" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import getPath from "@/utils/getPath";
const emit = defineEmits(["close"]);
const list = ref([
  {
    batchNum: "YXZZP2303001",
    itemDesc: "利群(新版)烟丝",
    inTime: "2023-04-08",
    weight: "2767.52",
    boxCount: "66",
  },
]);
function close() {
  emit("close", false);
}
onMounted(() => {
 
});
</script>
<style scoped lang="scss">
.box {
  width: vw(1088);
  height: vh(636);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  background-image: url("@/assets/images/dialog-bg.png");
  background-size: 100% 100%;
  &-header {
    width: 100%;
    height: vh(60);
    font-family: "pangmen";
    display: flex;
    font-size: 1.875rem;
    justify-content: center;
  }
  &-title {
    line-height: vh(60);
  }
  &-content {
    padding: vh(20) vw(20);
    height: vh(636 - 60);
    box-sizing: border-box;
  }
  &-btn {
    background-image: url("@/assets/images/close.png");
    width: vw(34);
    height: vh(34);
    position: absolute;
    right: vw(20);
    top: vh(12);
    cursor: pointer;
  }
}
:deep(.el-table__row--striped) {
  background-image: none !important;
}

// :deep(tr.el-table__row td.el-table__cell) {
//   background-color: rgba(174, 211, 255, 0.20) !important;

// }

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
:deep(.el-table .el-table__cell) {
  padding: 0;
}
:deep(.el-table .cell) {
  height: 100%;
  line-height: vh(48);
}
:deep(.el-table tr),
:deep(.el-table),
:deep(.el-table th),
:deep(.el-table td) {
  background-color: transparent;
}
:deep(.el-table__row) {
  height: vh(48);
}
:deep(.el-table) {
  color: rgba(233, 244, 255, 1);
  font-size: 0.8rem;
  height: 100%;
  --el-table-row-hover-bg-color: rgba(174, 211, 255, 0.2) !important;
}
:deep(.el-table thead) {
  color: rgba(255, 255, 255, 1);
  font-size: 0.8rem;
  background-image: url("@/assets/images/dialog/table-thead.png");
  line-height: vh(48);
  font-weight: normal;
}
:deep(.el-table th.el-table__cell.is-leaf),
:deep(.el-table td.el-table__cell) {
  border-color: transparent;
}
</style>