40 lines
763 B
Vue
40 lines
763 B
Vue
<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> |