more style

src/features/mark/MarkBoardKeyBoard.vue

@@ -30,7 +30,7 @@
         <div class="tw-flex tw-items-center tw-gap-2">
           <img src="./images/总分.png" style="width: 13px; height: 16px" /> 总分
         </div>
-        <div class="total-score tw-ml-5">
+        <div class="total-score tw-ml-5 tw-font-bold">
           {{ store.currentMarkResult?.markerScore }}
         </div>
       </div>

src/features/mark/MarkBoardMouse.vue

@@ -30,7 +30,7 @@
         <div class="tw-flex tw-items-center tw-gap-2">
           <img src="./images/总分.png" style="width: 13px; height: 16px" /> 总分
         </div>
-        <div class="total-score tw-ml-5">
+        <div class="total-score tw-ml-5 tw-font-bold">
           {{ store.currentMarkResult?.markerScore }}
         </div>
       </div>

src/features/mark/MarkBoardTrack.vue

@@ -15,7 +15,7 @@
         <div class="tw-flex tw-items-center tw-gap-2">
           <img src="./images/总分.png" style="width: 13px; height: 16px" /> 总分
         </div>
-        <div class="total-score tw-ml-5">
+        <div class="total-score tw-ml-5 tw-font-bold">
           {{ store.currentMarkResult?.markerScore }}
         </div>
       </div>

src/features/mark/MarkHeader.vue

@@ -16,7 +16,7 @@
       </span>
       <div v-if="store.historyOpen" class="triangle"></div>
     </div>
-    <div style="max-width: 10%">
+    <div style="max-width: 12%; margin-left: -20px">
       <a
         class="
           tw-text-white
@@ -49,35 +49,43 @@
     <div class="tw-flex tw-gap-1">
       <div>
         <span class="header-small-text">编号</span>
-        <span class="highlight-text">{{
-          store.currentTask?.secretNumber ?? "-"
-        }}</span>
+        <span class="highlight-text">
+          {{ store.currentTask?.secretNumber ?? "-" }}
+        </span>
       </div>
       <div
         v-if="store.currentTask && store.currentTask.objectiveScore !== null"
       >
-        <span class="header-small-text">客观分</span
-        ><span class="highlight-text">{{
-          store.currentTask.objectiveScore
-        }}</span>
+        <span class="header-small-text">客观分</span>
+        <span class="highlight-text">
+          {{ store.currentTask.objectiveScore }}
+        </span>
       </div>
     </div>
     <div v-show="store.status.totalCount" class="tw-flex tw-gap-2">
       <span>
-        <span class="header-small-text">已评</span
-        ><span class="highlight-text">{{ personCountAnimated }}</span>
+        <span class="header-small-text">已评</span>
+        <span
+          class="highlight-text"
+          :class="markCountChanged && 'markcount-animation'"
+          >{{ personCountAnimated }}</span
+        >
       </span>
       <span v-if="store.setting.topCount">
-        <span class="header-small-text">分配</span
-        ><span class="highlight-text">{{ store.setting.topCount ?? "-" }}</span>
+        <span class="header-small-text">分配</span>
+        <span class="highlight-text">{{ store.setting.topCount ?? "-" }}</span>
       </span>
       <span>
-        <span class="header-small-text">未评</span
-        ><span class="highlight-text">{{ todoMarkCountAnimated }}</span>
+        <span class="header-small-text">未评</span>
+        <span
+          class="highlight-text"
+          :class="markCountChanged && 'markcount-animation'"
+          >{{ todoMarkCountAnimated }}</span
+        >
       </span>
       <span>
-        <span class="header-small-text">进度</span
-        ><span class="highlight-text">{{ progress ?? "-" }}%</span>
+        <span class="header-small-text">进度</span>
+        <span class="highlight-text">{{ progress ?? "-" }}%</span>
       </span>
     </div>
     <div class="tw-flex tw-place-items-center">
@@ -128,11 +136,7 @@
             "
           />
           {{ modeName }}
-          <img
-            v-if="!store.setting.forceMode"
-            src="./images/下拉.png"
-            style="width: 7px; height: 4px; margin-left: 2px"
-          />
+          <div v-if="!store.setting.forceMode" class="dropdown-triangle"></div>
         </a-button>
       </a-dropdown>
     </div>
@@ -150,12 +154,13 @@
           </tr>
         </table>
       </template>
-      <div class="tw-flex">
-        <span style="font-size: 14px">小助手</span>
-        <DownOutlined
-          style="font-size: 14px; display: inline-block"
-          class="tw-self-center tw-ml-1"
+      <div class="tw-flex tw-items-center">
+        <img
+          src="./images/小助手.png"
+          style="width: 10px; height: 12px; margin-right: 2px"
         />
+        <span style="font-size: 14px">小助手</span>
+        <div class="dropdown-triangle"></div>
       </div>
     </a-popover>
     <a-popover v-if="isScanImage()" trigger="hover" class="tw-cursor-pointer">
@@ -213,8 +218,9 @@
                 type="text"
                 style="color: #5d65ff; margin-right: -15px; height: 25px"
                 @click="openProblemModal"
-                >选择问题类型</a-button
               >
+                选择问题类型
+              </a-button>
             </td>
           </tr>
           <tr v-if="isScanImage()">
@@ -237,10 +243,7 @@
           style="width: 10px; height: 12px; margin-right: 2px"
         />
         <span style="font-size: 14px">小助手</span>
-        <img
-          src="./images/下拉.png"
-          style="width: 7px; height: 4px; margin-left: 2px"
-        />
+        <div class="dropdown-triangle"></div>
       </div>
     </a-popover>
     <div
@@ -254,18 +257,12 @@
         style="width: 10px; height: 12px; margin-right: 2px"
       />
       <div
-        class="
-          tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-mr-1
-        "
+        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap"
         style="font-size: 14px"
       >
         {{ "分组:" + store.setting.groupNumber }}
       </div>
-      <img
-        v-if="store.groups.length > 1"
-        src="./images/下拉.png"
-        style="width: 7px; height: 4px; margin-left: 2px"
-      />
+      <div v-if="store.groups.length > 1" class="dropdown-triangle"></div>
     </div>
     <div class="tw-flex tw-gap-4">
       <div
@@ -438,6 +435,7 @@ const todoMarkCountAnimated = computed(() => {
   if (store.status.totalCount === undefined) return "-";
   return Number(store.status.todoMarkCountTweenedNumber).toFixed(0);
 });
+let markCountChanged = ref(false);
 watch(
   () => [
     store.status.personCount,
@@ -449,6 +447,8 @@ watch(
       store.status.personCountTweenedNumber = 0;
       store.status.todoMarkCountTweenedNumber = 0;
     }
+    markCountChanged.value = true;
+    setTimeout(() => (markCountChanged.value = false), 3000);
     gsap.to(store.status, {
       duration: 1.5,
       personCountTweenedNumber: personCount,
@@ -522,4 +522,22 @@ watch(
   position: absolute;
   bottom: -2px;
 }
+.dropdown-triangle {
+  background-color: #8c8d9b;
+  width: 7px;
+  height: 5px;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  margin-left: 4px;
+}
+.markcount-animation {
+  animation: change-color 3s ease-in-out;
+}
+@keyframes change-color {
+  0% {
+    color: red;
+  }
+  100% {
+    color: white;
+  }
+}
 </style>

src/features/mark/MarkSwitchGroupDialog.vue

@@ -45,8 +45,10 @@ export default defineComponent({
     const visible = ref<boolean>(false);
 
     onUpdated(async () => {
-      const groups = await getGroups();
-      store.groups = groups.data;
+      if (visible.value) {
+        const groups = await getGroups();
+        store.groups = groups.data;
+      }
     });
 
     const showModal = () => {

src/features/student/inspect/MarkBody.vue

@@ -156,9 +156,14 @@ const answerPaperScale = computed(() => {
 .mark-body-container {
   height: calc(100vh - 56px);
   overflow: auto;
-  background-size: 8px 8px;
-  background-image: linear-gradient(to right, #e7e7e7 4px, transparent 4px),
-    linear-gradient(to bottom, transparent 4px, #e7e7e7 4px);
+  background-color: white;
+  background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  transform: inherit;
 
   cursor: grab;
   user-select: none;

src/features/student/inspect/MarkHeader.vue

@@ -36,9 +36,7 @@
       />
     </div>
     <div class="tw-flex tw-place-items-center">
-      <UserOutlined class="icon-font icon-with-text" />{{
-        store.setting.userName
-      }}
+      {{ store.setting.userName }}
     </div>
     <div
       class="tw-flex tw-place-items-center tw-cursor-pointer"