header icons

src/components/mark/MarkHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="flex gap-4"
-    style="z-index: 10000; position: relative; background-color: white"
+    class="flex gap-4 justify-between items-center bg-blue-100"
+    style="z-index: 10000; position: relative; font-size: 16px; height: 40px"
   >
     <div>
       <a href="/mark/subject-select">{{ store.setting.subject?.name }}</a>
@@ -12,39 +12,59 @@
         考生编号：{{ store.currentTask?.objectiveScore }}
       </div>
     </div>
-    <div>
-      <ul class="flex gap-1">
-        <li>已评{{ store.status.markedCount }}</li>
-        <li v-if="store.setting.topCount">分配{{ store.setting.topCount }}</li>
-        <li>未评{{ store.status.totalCount - store.status.markedCount }}</li>
-        <li
-          :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
-        >
-          todo
-        </li>
-        <li>进度{{ progress }}%</li>
-      </ul>
-    </div>
-    <div>
-      <ul class="flex gap-1">
-        <li @click="upScale">放大</li>
-        <li @click="downScale">缩小</li>
-        <li @click="normalScale">适应</li>
-      </ul>
+    <ul class="flex gap-2 mb-0">
+      <li>已评{{ store.status.markedCount }}</li>
+      <li v-if="store.setting.topCount">分配{{ store.setting.topCount }}</li>
+      <li>未评{{ store.status.totalCount - store.status.markedCount }}</li>
+      <li
+        :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
+        style="line-height: 20px"
+      >
+        <QuestionCircleOutlined :style="{ 'font-size': '20px' }" />
+      </li>
+      <li>进度{{ progress }}%</li>
+    </ul>
+    <ul class="flex gap-2 mb-0">
+      <li @click="upScale" title="放大" style="line-height: 20px">
+        <PlusCircleOutlined :style="{ 'font-size': '20px' }" />
+      </li>
+      <li @click="downScale" title="缩小" style="line-height: 20px">
+        <MinusCircleOutlined :style="{ 'font-size': '20px' }" />
+      </li>
+      <li @click="normalScale" title="适应" style="line-height: 20px">
+        <FullscreenOutlined :style="{ 'font-size': '20px' }" />
+      </li>
+    </ul>
+    <div @click="toggleHistory" style="line-height: 20px" title="回看">
+      <HistoryOutlined :style="{ 'font-size': '20px' }" />
     </div>
-    <div @click="toggleHistory">回看</div>
     <div
+      class="flex place-items-center"
       :title="
+        '评卷时间段：' +
         $filters.datetimeFilter(store.setting.startTime) +
         ' ~ ' +
         $filters.datetimeFilter(store.setting.startTime)
       "
     >
-      时钟
+      <ClockCircleOutlined
+        :style="{ 'font-size': '20px' }"
+        style="line-height: 20px"
+      />
     </div>
     <div>{{ group?.title }}(切换)</div>
-    <div>{{ store.setting.marker?.name }}</div>
-    <div>退出</div>
+    <div class="flex place-items-center">
+      <UserOutlined
+        :style="{ 'font-size': '18px' }"
+        style="line-height: 18px"
+      />{{ store.setting.marker?.name }}
+    </div>
+    <div class="flex place-items-center">
+      <PoweroffOutlined
+        :style="{ 'font-size': '18px' }"
+        style="line-height: 18px"
+      />退出
+    </div>
   </div>
 </template>
 
@@ -52,9 +72,29 @@
 import { getHistoryTask } from "@/api/markPage";
 import { computed, defineComponent } from "vue";
 import { store } from "./store";
+import {
+  PlusCircleOutlined,
+  MinusCircleOutlined,
+  FullscreenOutlined,
+  HistoryOutlined,
+  UserOutlined,
+  PoweroffOutlined,
+  ClockCircleOutlined,
+  QuestionCircleOutlined,
+} from "@ant-design/icons-vue";
 
 export default defineComponent({
   name: "MarkHeader",
+  components: {
+    PlusCircleOutlined,
+    MinusCircleOutlined,
+    FullscreenOutlined,
+    HistoryOutlined,
+    UserOutlined,
+    PoweroffOutlined,
+    ClockCircleOutlined,
+    QuestionCircleOutlined,
+  },
   setup() {
     const progress = computed(() => {
       const { totalCount, markedCount } = store.status;