键盘给分

src/features/mark/MarkBoardKeyBoard.vue

@@ -1,18 +1,4 @@
 <template>
-  <!-- <div
-    v-if="store.setting.uiSetting['score.board.collapse']"
-    @mouseover="handleMouseOverWithBoard"
-    style="border-left: 1px solid grey"
-  >
-    <div
-      class="tw-self-start tw-cursor-pointer tw-pb-10"
-      @mouseover.stop="() => true"
-    >
-      <a-switch
-        v-model:checked="store.setting.uiSetting['score.board.collapse']"
-      />
-    </div>
-  </div> -->
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
@@ -33,22 +19,41 @@
         </a-button>
       </a-dropdown>
     </div>
-    <div>
-      <h1 class="tw-text-3xl tw-text-center">
-        总分：{{ store.currentMarkResult?.markerScore }}
-      </h1>
-    </div>
+    <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-mb-2 tw-flex tw-place-content-center">
-      <a-popconfirm
-        v-if="store.setting.enableAllZero"
-        title="确定给全零分？"
-        ok-text="确定"
-        cancel-text="取消"
-        @confirm="$emit('allZeroSubmit')"
+      <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"> 全零分 </a-button>
-      </a-popconfirm>
+        <a-popconfirm
+          v-if="store.setting.enableAllZero"
+          title="确定给全零分？"
+          ok-text="确定"
+          cancel-text="取消"
+          @confirm="$emit('allZeroSubmit')"
+        >
+          <a-button type="primary" shape="round" size="medium">
+            全零分
+          </a-button>
+        </a-popconfirm>
+
+        <qm-button type="primary" shape="round" size="medium" @click="submit">
+          提交
+        </qm-button>
+      </div>
     </div>
 
     <div v-if="store.currentTask && store.currentTask.questionList">
@@ -63,10 +68,17 @@
               scrollToQuestion(question);
             }
           "
-          class="question tw-rounded tw-p-1 tw-mb-2 tw-cursor-pointer"
+          class="
+            question
+            tw-rounded tw-p-1 tw-mb-2 tw-cursor-pointer tw-relative
+          "
           :class="isCurrentQuestion(question) && 'current-question'"
           :id="'bq-' + question.mainNumber + '-' + question.subNumber"
         >
+          <div
+            v-if="isCurrentQuestion(question)"
+            class="current-score-indicator"
+          ></div>
           <div class="tw-flex tw-justify-between">
             <div>
               <div>
@@ -74,7 +86,10 @@
                   question.subNumber
                 }}
               </div>
-              <div class="tw-text-center tw-text-3xl">
+              <div
+                class="tw-text-center tw-text-3xl"
+                :class="isCurrentQuestion(question) && 'current-score'"
+              >
                 {{ isCurrentQuestion(question) ? scoreStr : question.score }}
               </div>
             </div>
@@ -323,13 +338,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;
@@ -337,34 +354,32 @@ function submit() {
 .mark-board-track-container.hide {
   margin-right: -290px;
 }
-/* .hide-board {
-  display: none;
-}
-.show-board {
-  position: absolute;
+
+.top-container {
   background-color: white;
-  right: 0px;
-  display: block;
-} */
+}
+.total-score {
+  color: var(--big-score-color);
+  font-size: 32px;
+}
 .question {
   min-width: 80px;
-  border: 1px solid grey;
+  padding: 10px;
+  background-color: white;
 }
-.current-question {
-  border: 1px solid yellowgreen;
-  background-color: lightblue;
+.current-question .score {
+  color: var(--high-light-score-color);
 }
-.single-score {
-  width: 30px;
-  height: 30px;
-  display: grid;
-  place-content: center;
 
-  border: 1px solid black;
-  border-radius: 5px;
-}
 .current-score {
-  border: 1px solid yellowgreen;
-  background-color: lightblue;
+  color: #5d65ff;
+}
+.current-score-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 5px;
+  height: 5px;
+  background-color: #5c69f6;
 }
 </style>

src/features/mark/MarkBoardTrack.vue

@@ -122,6 +122,7 @@
         type="primary"
         shape="round"
         size="large"
+        style="background-color: #4ed885; border-color: #4ed885"
         :clickTimeout="300"
         @click="clearLatestMarkOfCurrentQuetion"
       >
@@ -370,15 +371,6 @@ function submit() {
   margin-right: -290px;
 }
 
-/* .hide-board {
-  display: none;
-} */
-/* .show-board {
-  position: absolute;
-  background-color: white;
-  right: 0px;
-  display: block;
-} */
 .top-container {
   background-color: white;
 }
@@ -395,8 +387,6 @@ function submit() {
   background-color: white;
 }
 .current-question .score {
-  /* border: 1px solid yellowgreen;
-  background-color: lightblue; */
   color: var(--high-light-score-color);
 }
 .single-score {
@@ -411,7 +401,6 @@ function submit() {
   border-radius: 30px;
 }
 .current-score {
-  /* border: 1px solid yellowgreen; */
   color: #5d65ff;
 }
 .current-score-indicator {