Fix styling

This commit is contained in:
2025-12-12 22:41:21 +00:00
parent a5b522c996
commit a5d69ccb86
29 changed files with 610 additions and 542 deletions
+9 -5
View File
@@ -8,17 +8,20 @@ const props = defineProps({
const sizeClasses = {
sm: 'w-6 h-6 text-xs',
md: 'w-8 h-8 text-sm'
md: 'w-8 h-8 text-sm',
lg: 'w-10 h-10 text-base'
}
const rankClass = computed(() => {
if (props.rank === 1) return 'rank-1'
if (props.rank === 2) return 'rank-2'
if (props.rank === 3) return 'rank-3'
if (props.rank === 1) return 'bg-gradient-to-r from-yellow-400 to-amber-500'
if (props.rank === 2) return 'bg-gradient-to-r from-slate-400 to-slate-500'
if (props.rank === 3) return 'bg-gradient-to-r from-amber-600 to-amber-700'
return 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300'
})
const classes = computed(() => sizeClasses[props.size] || sizeClasses.md)
const isTopThree = computed(() => props.rank >= 1 && props.rank <= 3)
</script>
<template>
@@ -26,6 +29,7 @@ const classes = computed(() => sizeClasses[props.size] || sizeClasses.md)
:class="[classes, rankClass, { 'text-white': rank <= 3 }]"
class="inline-flex items-center justify-center rounded-full font-bold"
>
{{ rank }}
<i v-if="isTopThree" class="fas fa-trophy"></i>
<template v-else>{{ rank }}</template>
</span>
</template>