动画显示问题试卷数量的变化

src/features/mark/MarkHeader.vue

@@ -40,7 +40,11 @@
           <br />
           待仲裁{{ store.status.arbitrateCount }}
         </template>
-        <img src="./images/problems.svg" />
+        <img
+          src="./images/problems.svg"
+          :class="questionMarkShouldChange && 'question-mark-animation'"
+          @mouseover="questionMarkShouldChange = false"
+        />
       </a-tooltip>
     </div>
     <div v-if="store.setting.statusValue === 'TRIAL'">试评</div>
@@ -346,7 +350,7 @@
 
 <script setup lang="ts">
 import { doLogout, updateUISetting } from "@/api/markPage";
-import { watchEffect } from "vue";
+import { watch, watchEffect } from "vue";
 import { store } from "@/store/store";
 import { ModeEnum } from "@/types";
 import MarkChangeProfile from "./MarkChangeProfile.vue";
@@ -439,6 +443,18 @@ let todoCount = $computed(() =>
     ? store.status.totalCount - store.status.markedCount
     : "-"
 );
+
+let questionMarkShouldChange = $ref(false);
+watch(
+  () => [store.status.problemCount, store.status.arbitrateCount],
+  () => {
+    if (!store.status.problemCount && !store.status.arbitrateCount) return;
+    questionMarkShouldChange = true;
+    setTimeout(() => {
+      questionMarkShouldChange = false;
+    }, 11 * 1000);
+  }
+);
 </script>
 
 <style scoped>
@@ -525,4 +541,17 @@ let todoCount = $computed(() =>
   opacity: 0;
   transform: translateY(18px);
 }
+
+.question-mark-animation {
+  animation: pluse 2s ease-in-out infinite alternate;
+}
+
+@keyframes pluse {
+  0% {
+    scale: 0.7;
+  }
+  100% {
+    scale: 1.3;
+  }
+}
 </style>