Bläddra i källkod

根据新需求调整样式

Michael Wang 3 år sedan
förälder
incheckning
8baefa1a05

+ 5 - 15
src/features/mark/MarkBoardKeyBoard.vue

@@ -106,10 +106,6 @@
           :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>
@@ -395,20 +391,14 @@ let buttonHeightForSelective = $computed(() =>
   padding: 10px;
   background-color: var(--app-container-bg-color);
 }
-.current-question .score {
-  color: var(--high-light-score-color);
+.current-question {
+  color: white;
+  background-color: var(--app-score-color);
 }
 
 .current-score {
-  color: var(--app-score-color);
-}
-.current-score-indicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 5px;
-  height: 5px;
-  background-color: #5c69f6;
+  background-color: var(--app-score-color);
+  color: white;
 }
 .all-zero-unselective-button {
   height: v-bind(buttonHeightForSelective);

+ 2 - 13
src/features/mark/MarkBoardMouse.vue

@@ -116,10 +116,6 @@
                 :class="isCurrentScore(question, s) && 'current-score'"
               >
                 {{ s }}
-                <div
-                  v-if="isCurrentScore(question, s)"
-                  class="current-score-indicator"
-                ></div>
               </div>
             </div>
           </div>
@@ -244,15 +240,8 @@ let buttonHeightForSelective = $computed(() =>
   border-radius: 30px;
 }
 .current-score {
-  color: var(--app-score-color);
-}
-.current-score-indicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 5px;
-  height: 5px;
-  background-color: #5c69f6;
+  background-color: var(--app-score-color);
+  color: white;
 }
 .all-zero-unselective-button {
   height: v-bind(buttonHeightForSelective);

+ 5 - 16
src/features/mark/MarkBoardTrack.vue

@@ -111,10 +111,6 @@
               <!-- 特殊的空格符号 -->
               {{ store.currentTask.markResult.scoreList[index] ?? " " }}
             </div>
-            <div
-              v-if="isCurrentQuestion(question)"
-              class="current-score-indicator"
-            ></div>
           </div>
         </template>
       </div>
@@ -142,7 +138,6 @@
           :class="isCurrentScore(s) && 'current-score'"
         >
           {{ s }}
-          <div v-if="isCurrentScore(s)" class="current-score-indicator"></div>
         </div>
       </div>
     </div>
@@ -404,8 +399,9 @@ let buttonHeightForSelective = $computed(() =>
   padding: 10px;
   background-color: var(--app-container-bg-color);
 }
-.current-question .score {
-  color: var(--high-light-score-color);
+.current-question {
+  color: white;
+  background-color: var(--app-score-color);
 }
 .single-score {
   position: relative;
@@ -419,15 +415,8 @@ let buttonHeightForSelective = $computed(() =>
   border-radius: 30px;
 }
 .current-score {
-  color: var(--app-score-color);
-}
-.current-score-indicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 5px;
-  height: 5px;
-  background-color: #5c69f6;
+  background-color: var(--app-score-color);
+  color: white;
 }
 .all-zero-unselective-button {
   height: v-bind(buttonHeightForSelective);

+ 39 - 33
src/features/mark/MarkHeader.vue

@@ -3,19 +3,25 @@
     class="tw-flex tw-gap-2 tw-justify-between tw-items-center header-container"
     v-if="store.setting && store.setting.subject.name"
   >
-    <div
-      class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
-      :class="[store.historyOpen && 'menu-toggled']"
-      @click="store.toggleHistory"
-    >
-      <span title="回看" class="tw-inline-flex tw-place-content-center">
-        <img
-          src="./images/left-menu.svg"
-          :class="[store.historyOpen && 'svg-red']"
-        />
-      </span>
-      <div v-if="store.historyOpen" class="triangle"></div>
-    </div>
+    <a-tooltip>
+      <template #title>回评</template>
+      <div
+        class="
+          tw-flex tw-place-content-center tw-cursor-pointer tw-relative
+          menu
+        "
+        :class="[store.historyOpen && 'menu-toggled']"
+        @click="store.toggleHistory"
+      >
+        <span class="tw-inline-flex tw-place-content-center">
+          <img
+            src="./images/left-menu.svg"
+            :class="[store.historyOpen && 'svg-red']"
+          />
+        </span>
+        <div v-if="store.historyOpen" class="triangle"></div>
+      </div>
+    </a-tooltip>
     <div style="max-width: 12%; margin-left: -20px">
       <a
         class="
@@ -295,27 +301,27 @@
         <!-- <PoweroffOutlined /> -->
         退出
       </div>
-      <div
-        class="tw-flex tw-place-content-center tw-cursor-pointer menu"
-        :class="[
-          store.isScoreBoardVisible && store.currentTask && 'menu-toggled',
-        ]"
-        @click="store.toggleScoreBoard"
-      >
-        <span
-          title="给分板"
-          class="tw-inline-flex tw-place-content-center tw-relative"
-        >
-          <img
-            src="./images/right-menu.svg"
-            :class="[store.isScoreBoardVisible && 'svg-red']"
-          />
-        </span>
+      <a-tooltip placement="bottomRight" :overlayStyle="{ width: '58px' }">
+        <template #title>给分板</template>
         <div
-          v-if="store.isScoreBoardVisible && store.currentTask"
-          class="triangle"
-        ></div>
-      </div>
+          class="tw-flex tw-place-content-center tw-cursor-pointer menu"
+          :class="[
+            store.isScoreBoardVisible && store.currentTask && 'menu-toggled',
+          ]"
+          @click="store.toggleScoreBoard"
+        >
+          <span class="tw-inline-flex tw-place-content-center tw-relative">
+            <img
+              src="./images/right-menu.svg"
+              :class="[store.isScoreBoardVisible && 'svg-red']"
+            />
+          </span>
+          <div
+            v-if="store.isScoreBoardVisible && store.currentTask"
+            class="triangle"
+          ></div>
+        </div>
+      </a-tooltip>
     </div>
   </div>
   <MarkChangeProfile ref="changeProfileRef" />

+ 2 - 1
src/features/mark/MarkHistory.vue

@@ -318,7 +318,8 @@ function searchHistoryTask() {
 }
 
 .current-task {
-  background-color: var(--app-container-bg-color);
+  background-color: var(--app-score-color);
+  color: white;
   padding-left: 5px;
   margin-left: -5px;
   padding-right: 5px;