more style

src/features/mark/MarkHistory.vue

@@ -18,7 +18,11 @@
       <div>分数</div>
     </div>
     <div v-for="(task, index) of store.historyTasks" :key="index">
-      <div @click="replaceCurrentTask(task)" class="tw-flex tw-justify-between">
+      <div
+        @click="replaceCurrentTask(task)"
+        class="tw-flex tw-justify-between"
+        :class="store.currentTask === task && 'current-task'"
+      >
         <div>{{ task.secretNumber }}</div>
         <div>
           {{ $filters.datetimeFilter(task.markTime) }}
@@ -28,10 +32,10 @@
         </div>
       </div>
     </div>
-    <div class="tw-flex tw-justify-between">
-      <div @click="previousPage">上一页</div>
-      <div>第{{ currentPage }}页</div>
-      <div @click="nextPage">下一页</div>
+    <div class="tw-flex tw-justify-between tw-place-content-center">
+      <a-button @click="previousPage">上一页</a-button>
+      <div style="line-height: 30px">第{{ currentPage }}页</div>
+      <a-button @click="nextPage">下一页</a-button>
     </div>
   </div>
 </template>
@@ -39,7 +43,7 @@
 <script lang="ts">
 import { getHistoryTask } from "@/api/markPage";
 import { Task } from "@/types";
-import { defineComponent, reactive, ref, watchEffect } from "vue";
+import { defineComponent, ref, watchEffect } from "vue";
 import { store } from "./store";
 
 export default defineComponent({
@@ -120,4 +124,7 @@ export default defineComponent({
   min-width: 250px;
   border-right: 1px solid grey;
 }
+.current-task {
+  background-color: aqua;
+}
 </style>