<template>
  <div>
    <span v-if="rank <= 20" class="rank-text">
      {{rank < 10 ? '0' : ''}}{{ rank }}
    </span>
    <span v-else-if="rank < 100" class="rank-text">
      {{ Math.floor(rank / 10) * 10 }}+
    </span>
    <span v-else-if="rank < 1000" class="rank-text">
      {{ Math.floor(rank / 100) * 100 }}+
    </span>
    <span v-else class="rank-text">
      999+
    </span>
  </div>
</template>

<script>
export default {
  name: 'RankDisplay',
  props: {
    rank: {
      type: Number,
      required: true,
      validator: function (value) {
        return value >= 1 && value <= 10000;
      }
    }
  }
}
</script>

<style scoped>
/* 样式可以在这里添加 */
.rank-text{
	font-weight: 600;
	font-size: 31rpx;
	color: #5CD1F4;
}
</style>