chore: imporove unocss class (#246)

components/common/AnimateNumber.vue

@@ -5,13 +5,8 @@ defineProps<{
 </script>
 
 <template>
-  <div overflow-hidden h="1.25rem">
-    <div
-      transition="duration-300 transform"
-      :style="{
-        transform: increased ? 'translateY(-50%)' : 'translateY(0%)',
-      }"
-    >
+  <div of-hidden h="1.25rem">
+    <div flex="~ col" transition-transform duration-300 :class="increased ? 'translate-y--1/2' : 'translate-y-0'">
       <slot />
       <slot name="next" />
     </div>

components/status/StatusActionButton.vue

@@ -55,10 +55,10 @@ useCommand({
       </div>
     </CommonTooltip>
 
-    <CommonAnimateNumber :increased="active">
-      <span display-block text-secondary-light text-sm>{{ text }}</span>
+    <CommonAnimateNumber :increased="active" text-sm>
+      <span text-secondary-light>{{ text }}</span>
       <template #next>
-        <span display-block :class="[color]" text-sm>{{ text }}</span>
+        <span :class="[color]">{{ text }}</span>
       </template>
     </CommonAnimateNumber>
   </component>