鼠标模式：样式

src/features/mark/MarkBoardMouse.vue

@@ -1,31 +1,10 @@
 <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"
     :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
   >
     <div class="tw-my-2 tw-flex">
-      <!-- <div
-        class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200 tw-mr-20"
-      >
-        <a-switch
-          v-model:checked="store.setting.uiSetting['score.board.collapse']"
-        />
-      </div> -->
       <a-dropdown class="tw-self-end">
         <template #overlay>
           <a-menu>
@@ -40,32 +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-place-content-center tw-mb-2">
-      <a-popconfirm
-        v-if="store.setting.enableAllZero"
-        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"
+          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 v-if="store.currentTask && store.currentTask.questionList">
@@ -80,7 +68,7 @@
                 question.subNumber
               }}
             </div>
-            <div class="tw-flex tw-flex-wrap tw-gap-1">
+            <div class="tw-flex tw-flex-wrap tw-gap-2">
               <div
                 v-for="(s, i) in questionScoreSteps(question)"
                 :key="i"
@@ -89,6 +77,10 @@
                 :class="isCurrentScore(question, s) && 'current-score'"
               >
                 {{ s }}
+                <div
+                  v-if="isCurrentScore(question, s)"
+                  class="current-score-indicator"
+                ></div>
               </div>
             </div>
           </div>
@@ -185,13 +177,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;
@@ -199,30 +193,37 @@ 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;
 }
 .single-score {
-  width: 29px;
-  height: 29px;
+  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;
+  color: #5d65ff;
+}
+.current-score-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 5px;
+  height: 5px;
+  background-color: #5c69f6;
 }
 </style>