diff --git a/src/oj/achievement/index.vue b/src/oj/achievement/index.vue
index 14ab72c..ba2b8bf 100644
--- a/src/oj/achievement/index.vue
+++ b/src/oj/achievement/index.vue
@@ -9,6 +9,7 @@ import type {
   AchievementSummary,
 } from "utils/types"
 import AchievementCard from "./components/AchievementCard.vue"
+import { NH2, NH4 } from "naive-ui"
 
 interface UserBadge {
   id: number
@@ -80,7 +81,6 @@ watch(name, load)
 <template>
   <div class="hall">
     <n-card v-if="summary">
-      <!-- 窄屏也不折行：圆环缩小，间距收窄，抬头始终一行 -->
       <n-flex align="center" :wrap="false" :size="isDesktop ? 32 : 16">
         <n-flex vertical align="center" :size="6">
           <n-progress
@@ -88,7 +88,9 @@ watch(name, load)
             :percentage="summary.percent"
             :stroke-width="8"
           >
-            {{ summary.percent }}%
+            <component :is="isDesktop ? NH2 : NH4">
+              {{ summary.percent }}%
+            </component>
           </n-progress>
           <n-text depth="3" class="nowrap">
             已获得 {{ summary.unlocked }} / {{ summary.total }}
@@ -124,7 +126,7 @@ watch(name, load)
       </n-flex>
     </n-card>
 
-    <n-tabs v-model:value="tab" type="line" class="tabs">
+    <n-tabs v-model:value="tab" animated type="line" class="tabs">
       <n-tab name="all">全部</n-tab>
       <n-tab name="unlocked">已获得</n-tab>
       <n-tab name="locked">未获得</n-tab>
@@ -181,7 +183,6 @@ watch(name, load)
   margin: 0 auto;
   padding: 16px;
 }
-/* 卡片有 1100px 宽，不封顶的话 6px 高的细条会被拉到近 900px，读起来很空 */
 .rarity {
   flex: 1;
   max-width: 420px;