轨迹给分板样式

src/features/mark/CommonMarkBody.vue

@@ -39,7 +39,7 @@
       {{ markStatus }}
       <div class="double-triangle"></div>
     </div>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
+    <ZoomPaper v-if="isScanImage() && store.currentTask" :store="store" />
   </div>
   <slot name="slot-cursor" />
 </template>
@@ -554,6 +554,6 @@ const showBigImage = (event: MouseEvent) => {
   clip-path: polygon(0 0, 0 6px, 50% 0, 100% 0, 100% 6px, 50% 0);
 
   position: absolute;
-  bottom: -6px;
+  bottom: -5px;
 }
 </style>

src/features/mark/MarkBoardTrack.vue

@@ -4,42 +4,46 @@
     class="mark-board-track-container"
     :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
   >
-    <div class="tw-flex">
-      <!-- <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
-        <a-switch
-          v-model:checked="store.setting.uiSetting['score.board.collapse']"
-        />
-      </div> -->
-      <h1 class="tw-text-3xl tw-text-center tw-flex-grow">
-        总分：{{ store.currentMarkResult?.markerScore }}
-      </h1>
-    </div>
-    <div class="tw-mb-2 tw-flex tw-place-content-center">
-      <a-popconfirm
-        v-if="store.setting.enableAllZero && !store.setting.forceSpecialTag"
-        title="确定给全零分？"
-        ok-text="确定"
-        cancel-text="取消"
-        @confirm="$emit('allZeroSubmit')"
+    <div
+      class="
+        tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5
+        top-container
+        tw-mb-4
+      "
+    >
+      <div class="tw-flex tw-flex-col">
+        <div>总分</div>
+        <div class="total-score">
+          {{ store.currentMarkResult?.markerScore }}
+        </div>
+      </div>
+
+      <div
+        class="
+          tw-flex tw-flex-col tw-place-content-center tw-items-center tw-gap-1
+        "
       >
-        <a-button
-          type="primary"
-          shape="round"
-          size="large"
-          style="margin-right: 20px !important"
+        <a-popconfirm
+          v-if="store.setting.enableAllZero && !store.setting.forceSpecialTag"
+          title="确定给全零分？"
+          ok-text="确定"
+          cancel-text="取消"
+          @confirm="$emit('allZeroSubmit')"
         >
-          全零分
-        </a-button>
-      </a-popconfirm>
+          <a-button type="primary" shape="round" size="medium">
+            全零分
+          </a-button>
+        </a-popconfirm>
 
-      <qm-button type="primary" shape="round" size="large" @click="submit">
-        提交
-      </qm-button>
+        <qm-button type="primary" shape="round" size="medium" @click="submit">
+          提交
+        </qm-button>
+      </div>
     </div>
 
     <div
       style="
-        height: calc(100vh - 56px - 160px);
+        height: calc(100vh - 56px - 200px);
         overflow: hidden;
         user-select: none;
       "
@@ -63,18 +67,22 @@
         >
           <div
             @click="chooseQuestion(question)"
-            class="question tw-rounded tw-p-1 tw-cursor-pointer"
+            class="question tw-rounded tw-cursor-pointer tw-relative"
             :class="isCurrentQuestion(question) && 'current-question'"
           >
-            <div style="border-bottom: 1px solid grey">
+            <div>
               {{ question.title }} {{ question.mainNumber }}-{{
                 question.subNumber
               }}
             </div>
-            <div class="tw-text-center tw-font-medium tw-text-3xl">
+            <div class="tw-font-medium tw-text-2xl score">
               <!-- 特殊的空格符号 -->
               {{ question.score ?? " " }}
             </div>
+            <div
+              v-if="isCurrentQuestion(question)"
+              class="current-score-indicator"
+            ></div>
           </div>
         </template>
       </div>
@@ -89,31 +97,25 @@
         ref="dragSpliter"
       ></div>
       <div
-        class="
-          tw-flex
-          tw-gap-1
-          tw-flex-wrap
-          tw-mt-5
-          tw-overflow-auto
-          tw-content-start
-        "
-        style="padding-bottom: 40px"
+        class="tw-flex tw-flex-wrap tw-mt-5 tw-overflow-auto tw-content-start"
+        style="padding-bottom: 40px; gap: 8px"
         :style="{ height: `${100 - topPercent}%` }"
       >
         <div
           v-for="(s, i) in questionScoreSteps"
           :key="i"
           @click="chooseScore(s)"
-          class="single-score tw-cursor-pointer"
+          class="single-score tw-cursor-pointer tw-font-bold"
           :class="isCurrentScore(s) && 'current-score'"
         >
           {{ s }}
+          <div v-if="isCurrentScore(s)" class="current-score-indicator"></div>
         </div>
       </div>
     </div>
     <div
       class="tw-flex tw-justify-between tw-mt-4"
-      style="position: relative; bottom: 10px; right: 0px; width: 230px"
+      style="position: relative; bottom: 0px; right: 0px; width: 230px"
     >
       <qm-button
         type="primary"
@@ -350,13 +352,15 @@ function submit() {
 .mark-board-track-container {
   max-width: 290px;
   min-width: 290px;
-  border-left: 1px solid grey;
-  padding-left: 6px;
-  padding-right: 6px;
-  max-height: calc(100vh - 56px);
+  padding: 20px;
+  max-height: calc(100vh - 56px - 0px);
   overflow: auto;
   z-index: 1001;
   transition: margin-right 0.5s;
+  --big-score-color: #283e76;
+  --high-light-score-color: #5d65ff;
+  --the-color: #7584ac;
+  color: var(--the-color);
 }
 .mark-board-track-container.show {
   margin-right: 0;
@@ -374,27 +378,47 @@ function submit() {
   right: 0px;
   display: block;
 } */
+.top-container {
+  background-color: white;
+}
+.total-score {
+  color: var(--big-score-color);
+  font-size: 32px;
+}
 .question {
-  min-width: 100px;
-  max-width: 100px;
-  min-height: 70px;
-  border: 1px solid grey;
+  min-width: 120px;
+  max-width: 120px;
+  min-height: 72px;
+  padding: 10px;
+  /* border: 1px solid grey; */
+  background-color: white;
 }
-.current-question {
-  border: 1px solid yellowgreen;
-  background-color: lightblue;
+.current-question .score {
+  /* border: 1px solid yellowgreen;
+  background-color: lightblue; */
+  color: var(--high-light-score-color);
 }
 .single-score {
-  width: 30px;
-  height: 30px;
+  position: relative;
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
   display: grid;
   place-content: center;
+  background-color: white;
 
-  border: 1px solid black;
-  border-radius: 5px;
+  border-radius: 30px;
 }
 .current-score {
-  border: 1px solid yellowgreen;
-  background-color: lightblue;
+  /* border: 1px solid yellowgreen; */
+  color: #5d65ff;
+}
+.current-score-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 5px;
+  height: 5px;
+  background-color: #5c69f6;
 }
 </style>