add rank medal

zzzi-ori · Mar 16, 2024 · 2a24ee9 · 2a24ee9
1 parent b681f0c
commit 2a24ee9
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/src/assets/medal1.svg b/src/assets/medal1.svg
diff --git a/src/assets/medal2.svg b/src/assets/medal2.svg
diff --git a/src/assets/medal3.svg b/src/assets/medal3.svg
diff --git a/src/pages/rank/_components/Rank.vue b/src/pages/rank/_components/Rank.vue
@@ -1,6 +1,11 @@
 <template>
   <div :class="style({type})">
-    <span class="min-w-14">{{ item?.rank }}</span>
+    <div class="min-w-14">
+      <span v-if="item?.rank && item?.rank > 3 ">{{ item?.rank }}</span>
+      <img v-else-if="item?.rank===1" :src="medal1" alt="1st"/>
+      <img v-else-if="item?.rank===2" :src="medal2" alt="1st"/>
+      <img v-else-if="item?.rank===3" :src="medal3" alt="1st"/>
+    </div>
     <span class="flex-1 text-caption-b">{{ item?.nickName }}</span>
     <div class="flex text-body-b">
       <span class="pr-1">{{ item?.score }}</span>
@@ -11,7 +16,10 @@
 <script setup lang="ts">
 import {computed, PropType} from 'vue'
 import {RankItem} from '../../../requests/fetch/getRank.ts'
-import coinSm from '@/assets/coin-sm.svg'
+import medal1 from '../../../assets/medal1.svg'
+import medal2 from '../../../assets/medal2.svg'
+import medal3 from '../../../assets/medal3.svg'
+import coinSm from '../../../assets/coin-sm.svg'
 import {cva} from 'class-variance-authority'
 
 const props = defineProps({