关闭回看 & 样式调整

src/features/inspect/MarkBoardInspect.vue

@@ -227,6 +227,7 @@ export default defineComponent({
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
+  max-height: calc(100vh - 41px);
 }
 .question {
   min-width: 100px;

src/features/inspect/MarkBody.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mark-body-container tw-flex-auto"
+    class="mark-body-container tw-flex-auto tw-p-2"
     :class="isGrabbing && 'grabbing'"
     ref="container"
     @mousedown="mouseDownHandler"

src/features/inspect/MarkHistory.vue

@@ -1,15 +1,23 @@
 <template>
   <div
     :style="{ display: store.historyOpen ? 'block' : 'none' }"
-    class="history-container"
+    class="history-container tw-px-1"
   >
+    <div class="tw-p-1" style="text-align: end">
+      <a-button shape="circle" @click="store.historyOpen = false">
+        <template #icon><CloseOutlined /></template>
+      </a-button>
+    </div>
     <div class="tw-flex tw-justify-between tw-mt-1 tw-mb-1">
       <div>编号</div>
       <div>时间</div>
       <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 tw-h-6 tw-place-items-center tw-rounded"
+      >
         <div>{{ task.secretNumber }}</div>
         <div>
           {{ task.inspectTime && $filters.datetimeFilter(task.inspectTime) }}
@@ -33,9 +41,11 @@ import { Task } from "@/types";
 import { defineComponent, reactive, ref, watchEffect } from "vue";
 import { useRoute } from "vue-router";
 import { store } from "./store";
+import { CloseOutlined } from "@ant-design/icons-vue";
 
 export default defineComponent({
   name: "MarkHistory",
+  components: { CloseOutlined },
   emits: ["reload"],
   setup(props, { emit }) {
     const route = useRoute();

src/features/mark/MarkBoardKeyBoard.vue

@@ -268,6 +268,7 @@ export default defineComponent({
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
+  max-height: calc(100vh - 41px);
 }
 .question {
   min-width: 80px;

src/features/mark/MarkBoardMouse.vue

@@ -119,6 +119,7 @@ export default defineComponent({
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
+  max-height: calc(100vh - 41px);
 }
 .question {
   min-width: 80px;

src/features/mark/MarkBoardTrack.vue

@@ -262,6 +262,7 @@ export default defineComponent({
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
+  max-height: calc(100vh - 41px);
 }
 .question {
   min-width: 100px;

src/features/mark/MarkHistory.vue

@@ -1,8 +1,13 @@
 <template>
   <div
     :style="{ display: store.historyOpen ? 'block' : 'none' }"
-    class="history-container"
+    class="history-container tw-px-1"
   >
+    <div class="tw-p-1" style="text-align: end">
+      <a-button shape="circle" @click="store.historyOpen = false">
+        <template #icon><CloseOutlined /></template>
+      </a-button>
+    </div>
     <div class="tw-mt-1 tw-mb-1">
       <input
         v-model="secretNumberInput"
@@ -20,7 +25,7 @@
     <div v-for="(task, index) of store.historyTasks" :key="index">
       <div
         @click="replaceCurrentTask(task)"
-        class="tw-flex tw-justify-between"
+        class="tw-flex tw-justify-between tw-h-6 tw-place-items-center tw-rounded"
         :class="store.currentTask === task && 'current-task'"
       >
         <div>{{ task.secretNumber }}</div>
@@ -45,9 +50,11 @@ import { getHistoryTask } from "@/api/markPage";
 import { Task } from "@/types";
 import { defineComponent, ref, watchEffect } from "vue";
 import { store } from "./store";
+import { CloseOutlined } from "@ant-design/icons-vue";
 
 export default defineComponent({
   name: "MarkHistory",
+  components: { CloseOutlined },
   setup() {
     watchEffect(async () => {
       if (store.historyOpen) {

src/styles/global.css

@@ -11,3 +11,7 @@ body {
 .ant-message-custom-content span[role="img"] {
   top: -2px;
 }
+
+button.ant-btn span[role="img"] {
+  display: inline-flex !important;
+}