<template>
  <div class="slot">
    <!-- 标题区域 -->
    <div class="slot_title">{{ soltObj.title }}</div>
    <!-- 信息区域 -->
    <div class="slot_info">
      <img class="msg_img" src="@/assets/images/87.png" />
      <div class="msg_info">
        <div class="info_title">{{ soltObj.title }}</div>
        <div class="info_num">
          当日：{{ soltObj.currentDay }}人&nbsp;&nbsp;&nbsp;&nbsp;累计：{{
            soltObj.addUp
          }}人
        </div>
      </div>
    </div>
    <!-- 分割线区域 -->
    <div class="slot_line"></div>
    <!-- 表格区域 -->
    <div class="slot_table">
      <el-table :data="soltObj.table" style="width: 100%">
        <el-table-column prop="sm_name" label="姓名" align="center" />
        <el-table-column
          prop="sm_phone"
          label="电话"
          align="center"
          width="150"
        />
        <el-table-column
          prop="sm_time"
          label="时间"
          align="center"
          width="230"
        />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(["soltObj"]);
</script>

<style lang="scss" scoped>
.slot {
  margin-left: 55px;
  width: 484px;
  height: 546px;

  .slot_title {
    display: flex;
    padding-left: 44px;
    width: 484px;
    height: 48px;
    font-size: 28px;
    background-image: url(@/assets/images/scenicDetail-title-img2.png);
    background-size: 100% 100%;
  }

  .slot_info {
    display: flex;
    align-items: center;
    width: 484px;
    height: 135px;

    .msg_img {
      margin-right: 20px;
      width: 106px;
      height: 74px;
      border-radius: 10px;
      object-fit: cover;
      overflow: hidden;
    }

    .msg_info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 74px;

      .info_title {
        font-size: 24px;
        font-weight: bold;
      }

      .info_num {
        font-size: 18px;
      }
    }
  }

  .slot_line {
    width: 484px;
    height: 6px;
    background-image: url(@/assets/images/news-list-bottomLine.png);
    background-size: 100% 100%;
  }

  .slot_table {
    margin-top: 34px;
    width: 484px;
    height: 250px;
    overflow-y: auto;
  }
}

/*最外层透明*/
.slot_table ::v-deep(.el-table),
.slot_table ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.slot_table ::v-deep(.el-table th),
.slot_table ::v-deep(.el-table tr),
.slot_table ::v-deep(.el-table td) {
  background-color: transparent !important;
  color: white;
  font-size: 16px;
  border-color: rgba(255, 255, 255, 0.1);
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(58, 126, 199, 0.5);
}
// 清除表格默认padding
::v-deep(.el-table .el-table__body-wrapper .el-table__cell) {
  padding: 0;
  height: 52px;
}
</style>
