rankTable.vue

<template>
  <div class="ul-wrapper height100">
    <div class="panel-table">
      <ul class="title-wrapper">
        <li v-for="(item, index) in tList" :key="index">
          {{ item }}
        </li>
      </ul>
      <ul class="panel-table-content">
        <li v-for="(item, index) in data.slice(0, 5)" :key="index">
          <span>
            <img :src="getImg(index + 1)" alt="" v-if="index < 3" />
            <p v-else>{{ index + 1 }}</p>
          </span>
          <span>{{ item.playDate || item.organName }}</span>
          <span>{{ item.playNumber || item.frequencyCnt || 0}}</span>
        </li>
      </ul>
    </div>
    <div class="panel-table">
      <ul class="title-wrapper">
        <li v-for="(item, index) in tList" :key="index">
          {{ item }}
        </li>
      </ul>
      <ul class="panel-table-content">
        <li v-for="(item, index) in data.slice(5, 10)" :key="index">
          <span>
            {{ 6 + index }}
          </span>
          <span>{{ item.playDate  || item.organName }}</span>
          <span>{{ item.playNumber  || item.frequencyCnt}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    tList: {
      type: Array,
      default: [],
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    getImg(s) {
      return require("@/assets/overview/rank0" + s + ".png");
    },
  },
};
</script>
<style lang="less" scoped>
.ul-wrapper {
  display: flex;
  padding: 15px 20px 40px;
  .panel-table {
    width: 50%;
    &:first-child {
      padding-right: 10px;
    }
    &:last-child {
      padding-left: 10px;
    }
    .title-wrapper {
      display: flex;
      height: 48px;
      line-height: 48px;
      li {
        text-align: center;
        width: 40%;
        &:first-child {
          width: 20%;
        }
      }
    }
    .panel-table-content {
      height: calc(100% - 56px);
      li {
        width: 100%;
        height: 20%;
        line-height: 1;
        max-height: 48px;
        background-color: @party-bg-gray;
        margin-bottom: 4px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        span {
          text-align: center;
          width: 40%;
          display: inline-block;
          &:first-child {
            width: 20%;
          }
        }
        img {
          width: 18px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>