整卷复核

src/features/library/inspect/MarkBoardInspect.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    v-if="store.currentTask"
-    :style="{ display: store.MarkBoardTrackCollapse ? 'none' : 'block' }"
-    class="mark-board-track-container"
-  >
+  <div v-if="store.currentTask" class="mark-board-track-container">
     <div>
       <h1 class="tw-text-3xl tw-text-center">试卷总分：{{ markerScore }}</h1>
     </div>

src/features/student/inspect/MarkBoardInspect.vue

@@ -4,23 +4,31 @@
     class="mark-board-track-container"
     :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
   >
-    <div>
-      <h1 class="tw-text-3xl tw-text-center">试卷总分：{{ markerScore }}</h1>
+    <div class="top-container tw-flex-shrink-0 tw-flex tw-items-center">
+      <div class="tw-flex tw-flex-col tw-flex-1 tw-text-center">
+        <div class="tw-flex tw-justify-center">
+          <img
+            src="../../mark/images/总分.png"
+            style="width: 13px; height: 16px"
+          />
+        </div>
+        <div>试卷总分</div>
+      </div>
+      <div class="tw-flex-1" style="font-size: 40px">{{ markerScore }}</div>
     </div>
 
-    <div v-if="groups">
+    <div class="tw-flex-grow tw-overflow-auto tw-my-5" v-if="groups">
       <template v-for="(groupNumber, index) in groups" :key="index">
-        <div class="tw-mb-4">
+        <div class="tw-mb-4 tw-bg-white tw-p-4">
           <div
             class="
               tw-flex tw-justify-between tw-place-items-center
               hover:tw-bg-gray-200
             "
-            style="border-bottom: 1px solid grey"
             @mouseover="addFocusTrack(groupNumber, undefined, undefined)"
             @mouseleave="removeFocusTrack"
           >
-            分组 {{ groupNumber }}
+            <span class="secondary-text">分组 {{ groupNumber }}</span>
             <input
               class="tw-my-auto"
               title="打回"
@@ -35,7 +43,7 @@
                 v-if="question.groupNumber === groupNumber"
                 class="
                   question
-                  tw-flex tw-place-items-center tw-mb-1 tw-ml-2
+                  tw-flex tw-place-items-center tw-mb-1 tw-font-bold
                   hover:tw-bg-gray-200
                 "
                 @mouseover="
@@ -53,7 +61,7 @@
                   }}
                 </span>
                 <span class="tw-flex-1 tw-text-center">
-                  {{ question.score || 0 }}
+                  {{ question.score === -1 ? "未选做" : question.score || 0 }}
                 </span>
                 <input
                   :disabled="question.score === -1"
@@ -69,9 +77,10 @@
       </template>
     </div>
 
-    <div class="tw-flex tw-justify-center">
+    <div class="tw-flex tw-flex-shrink-0 tw-justify-center">
       <qm-button
         type="primary"
+        class="full-width-btn undo-btn"
         v-if="
           store.currentTask.inspectTime && store.currentTask.inspectTime > 0
         "
@@ -83,10 +92,17 @@
         v-else-if="checkedQuestions.length === 0"
         @click="inspect"
         type="primary"
+        class="full-width-btn"
       >
         复核
       </qm-button>
-      <qm-button v-else @click="reject" type="primary">打回</qm-button>
+      <qm-button
+        v-else
+        @click="reject"
+        type="primary"
+        class="full-width-btn undo-btn"
+        >打回</qm-button
+      >
     </div>
   </div>
 </template>
@@ -219,11 +235,12 @@ function inspect() {
 
 <style scoped>
 .mark-board-track-container {
+  display: flex;
+  flex-direction: column;
   max-width: 290px;
   min-width: 290px;
+  max-height: calc(100vh - 56px);
   padding: 20px;
-  max-height: calc(100vh - 56px - 0px);
-  overflow: auto;
   z-index: 1001;
   transition: margin-right 0.5s;
   color: var(--app-small-header-text-color);
@@ -237,6 +254,11 @@ function inspect() {
 
 .top-container {
   background-color: var(--app-container-bg-color);
+  height: 86px;
+  border-radius: 5px;
+
+  color: white;
+  background-color: var(--app-primary-button-bg-color);
 }
 .total-score {
   color: var(--app-main-text-color);
@@ -244,7 +266,6 @@ function inspect() {
 }
 .question {
   min-width: 80px;
-  padding: 10px;
   background-color: var(--app-container-bg-color);
 }
 .current-question .score {
@@ -269,4 +290,12 @@ function inspect() {
   background-color: #4db9ff;
   border: none;
 }
+.full-width-btn {
+  width: 100%;
+  border-radius: 20px;
+}
+.undo-btn {
+  background-color: var(--app-undo-button-bg-color);
+  border-color: var(--app-undo-button-bg-color);
+}
 </style>

src/features/student/inspect/MarkHistory.vue

@@ -1,51 +1,72 @@
 <template>
   <div
-    :style="{ display: store.historyOpen ? 'block' : 'none' }"
     class="history-container tw-px-1"
+    :class="[store.historyOpen ? 'show' : 'hide']"
   >
-    <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
-      <div class="tw-text-xl">回评</div>
-      <a-button
-        class="tw-content-end"
-        shape="circle"
-        @click="store.historyOpen = false"
-      >
-        <template #icon><CloseOutlined /></template>
-      </a-button>
+    <div class="tw-mt-1 tw-mb-1 tw-flex tw-place-items-center">
+      <div class="tw-text-lg main-text-color tw-mr-4 tw-font-bold">回评</div>
     </div>
-    <div class="tw-mt-1 tw-mb-1 tw-flex"></div>
-    <div class="tw-flex tw-justify-between">
-      <div>编号</div>
-      <div>时间</div>
-      <div>分数</div>
+    <div class="tw-flex tw-justify-between tw-mt-5">
+      <div class="tw-cursor-pointer tw-flex">编号</div>
+      <div class="tw-cursor-pointer tw-flex tw-items-center">时间</div>
+      <div class="tw-cursor-pointer tw-flex tw-items-center">分数</div>
     </div>
-    <a-spin :spinning="loading" size="large" tip="Loading...">
-      <div v-for="(task, index) of store.historyTasks" :key="index">
-        <div
-          @click="replaceCurrentTask(task)"
-          class="
-            tw-flex
-            tw-justify-between
-            tw-place-items-center
-            tw-rounded
-            tw-cursor-pointer
-          "
-          :class="store.currentTask === task && 'current-task'"
-        >
-          <div class="tw-break-words tw-w-1/3">{{ task.secretNumber }}</div>
-          <div>
-            {{ task.inspectTime && $filters.datetimeFilter(task.inspectTime) }}
-          </div>
-          <div style="width: 30px; text-align: center">
-            {{ task.markerScore }}
+    <a-spin :spinning="loading" size="large" tip="Loading..." :delay="500">
+      <div style="margin-bottom: -40px; padding-bottom: 40px">
+        <div v-for="(task, index) of store.historyTasks" :key="index">
+          <div
+            @click="replaceCurrentTask(task)"
+            class="
+              tw-flex
+              tw-justify-between
+              tw-place-items-center
+              tw-rounded
+              tw-cursor-pointer
+              tw-font-bold
+              tw-py-2
+            "
+            :class="store.currentTask === task && 'current-task'"
+          >
+            <div class="tw-break-words tw-w-1/3">{{ task.secretNumber }}</div>
+            <div>
+              {{
+                task.inspectTime && $filters.datetimeFilter(task.inspectTime)
+              }}
+            </div>
+            <div style="width: 30px; text-align: right">
+              {{ task.markerScore }}
+            </div>
           </div>
         </div>
       </div>
     </a-spin>
-    <div class="tw-flex tw-justify-between tw-place-content-center tw-mt-2">
-      <a-button @click="previousPage">上一页</a-button>
-      <div style="line-height: 30px">第{{ currentPage }}页</div>
-      <a-button @click="nextPage">下一页</a-button>
+    <div
+      class="
+        tw-flex tw-justify-between tw-place-content-center tw-mt-2
+        pager-container
+      "
+    >
+      <div class="tw-font-bold" style="line-height: 30px">
+        第{{ currentPage }}页
+      </div>
+      <div class="tw-flex tw-gap-2">
+        <a-button
+          shape="circle"
+          @click="previousPage"
+          type="primary"
+          title="上一页"
+        >
+          <div class="left-triangle"></div>
+        </a-button>
+        <a-button
+          shape="circle"
+          @click="nextPage"
+          type="primary"
+          title="下一页"
+        >
+          <div class="right-triangle"></div>
+        </a-button>
+      </div>
     </div>
   </div>
 </template>
@@ -56,7 +77,6 @@ import type { Task } from "@/types";
 import { ref, watch, watchEffect } from "vue";
 import { useRoute } from "vue-router";
 import { store } from "@/features/mark/store";
-import { CloseOutlined } from "@ant-design/icons-vue";
 import { cloneDeep } from "lodash";
 
 const props = defineProps<{ shouldReload: number }>();
@@ -137,10 +157,48 @@ function nextPage() {
 
 <style scoped>
 .history-container {
-  min-width: 250px;
-  border-right: 1px solid grey;
+  min-width: 290px;
+  padding: 20px;
+  font-size: var(--app-secondary-font-size);
+  overflow-y: auto;
+  height: calc(100vh - 56px);
+  transition: margin-left 0.5s;
+}
+.history-container.show {
+  margin-left: 0;
 }
+.history-container.hide {
+  margin-left: -290px;
+}
+
 .current-task {
-  background-color: aqua;
+  background-color: var(--app-container-bg-color);
+  padding-left: 5px;
+  margin-left: -5px;
+  padding-right: 5px;
+  margin-right: -5px;
+}
+
+.left-triangle {
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+  transform: translateX(60%);
+}
+
+.right-triangle {
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  clip-path: polygon(100% 50%, 0 100%, 0 0);
+  transform: translateX(90%);
+}
+.pager-container {
+  position: absolute;
+  bottom: 0px;
+  padding-bottom: 20px;
+  width: 250px;
+  background-color: var(--app-main-bg-color);
 }
 </style>

src/styles/global.css

@@ -31,6 +31,11 @@ body {
   color: var(--app-main-text-color);
 }
 
+.secondary-text {
+  color: var(--app-small-header-text-color);
+  font-size: var(--app-secondary-font-size);
+}
+
 .ant-message {
   z-index: 6001 !important;
   font-size: 16px !important;