<template>
  <div class="rank">
    <!-- 标题区域 -->
    <div class="rank_title">
      <div class="title_text">订单量排行</div>
      <img src="@/assets/images/33.png" />
    </div>

    <!-- 表格区域 -->
    <div class="rank_table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          type="index"
          label="排行"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="名宿名称"
          prop="name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="订单量"
          prop="num"
          width="150"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

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

// 表格数据
const tableData = [
  {
    name: "靖安园中源大酒店",
    num: 62,
  },
  {
    name: "靖安宝峰酒店",
    num: 53,
  },
  {
    name: "靖安桂庐山居",
    num: 41,
  },
  {
    name: "靖安国平酒店",
    num: 22,
  },
  {
    name: "588酒店",
    num: 20,
  },
];
</script>

<style lang="scss" scoped>
.rank {
  width: 100%;
  height: 100%;

  .rank_title {
    position: relative;
    width: 548px;
    height: 41px;
    line-height: 41px;

    .title_text {
      position: absolute;
      left: 15px;
      z-index: 1;
      font-size: 23.5px;
      font-weight: bold;
      color: #e0efff;
    }

    img {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 548px;
      height: 16px;
    }
  }

  .rank_table {
    margin-top: 34px;
    width: 548px;
    height: 288px;
    overflow-y: auto;
  }
}

/*最外层透明*/
.rank_table ::v-deep(.el-table),
.rank_table ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.rank_table ::v-deep(.el-table th),
.rank_table ::v-deep(.el-table tr),
.rank_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(38, 119, 224, 0.1);
}

// 修改表头字体颜色
::v-deep(.el-table__header th) {
  color: #6c9bff !important;
}

// 清除表格默认padding
::v-deep(.el-table .el-table__body-wrapper .el-table__cell) {
  height: 50px;
}

// 隔行换色
::v-deep(
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
      td
  ) {
  background-color: rgba(38, 119, 224, 0.1) !important;
}
</style>
