<template>
  <div v-show="isShow" class="rank-list relative mt-7 w-full px-4">
    <div>
      
    </div>
    <div class="rank-title absolute left-1/2 -top-4 transform -translate-x-1/2">
      <p class="text-center text-lg leading-10">排行榜</p>
    </div>
    <div class="rank-lines mb-20 pt-10 px-3 flex items-center border-2 border-app-blue-3 border-solid rounded-lg" style="background: rgb(25,2,92)">
      <div v-if="ranklist.length > 0" class="">
        <router-link v-for="item in ranklist" :key="item.id" :to="{ path: '/CommunityVote', query: { id: item.id }}">
          <Cardtwo class="mb-2.5" />
        </router-link>
      </div>
      <div v-else class="w-full h-full flex flex-col items-center justify-center">
        <img class="w-28 h-28" src="@/assets/home/empty.png" alt="empty">
        <p class="text-sm text-center mt-3">暂无报名!</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Cardtwo from '@/components/Card_two.vue'
import Vue from 'vue'
export default Vue.extend({
  components: { Cardtwo },
  name: 'RankList',
  props: {
    ranklist: {
      type: Array
    },
    isShow: {
      type: Boolean,
      default: true
    }
  }
})
</script>

<style scoped>
  .rank-title {
    width: 220px;
    height: 40px;
    /* line-height: 40px; */
    background-image: url(../../assets/home/rank-title.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .rank-lines {
    min-height: 460px;
  }
</style>