style refactor to class

src/components/mark/MarkBoardKeyBoard.vue

@@ -1,14 +1,5 @@
 <template>
-  <div
-    v-if="store.currentTask"
-    style="
-      max-width: 250px;
-      min-width: 250px;
-      border: 1px solid grey;
-      padding-left: 6px;
-      padding-right: 6px;
-    "
-  >
+  <div v-if="store.currentTask" class="mark-board-track-container">
     <div>
       <h1 class="tw-text-3xl tw-text-center" @click="toggleKeyMouse">
         键盘给分
@@ -82,13 +73,16 @@ export default defineComponent({
       const steps = [];
       for (
         let i = 0;
-        i <= question.maxScore - question.score;
+        i <= question.maxScore - (question.score || 0);
         i += question.intervalScore
       ) {
         steps.push(i);
       }
-      if ((question.maxScore - question.score) % question.intervalScore !== 0) {
-        steps.push(question.maxScore - question.score);
+      if (
+        (question.maxScore - (question.score || 0)) % question.intervalScore !==
+        0
+      ) {
+        steps.push(question.maxScore - (question.score || 0));
       }
 
       return steps;
@@ -194,6 +188,13 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.mark-board-track-container {
+  max-width: 250px;
+  min-width: 250px;
+  border-left: 1px solid grey;
+  padding-left: 6px;
+  padding-right: 6px;
+}
 .question {
   min-width: 80px;
   border: 1px solid grey;

src/components/mark/MarkBoardMouse.vue

@@ -1,14 +1,5 @@
 <template>
-  <div
-    v-if="store.currentTask"
-    style="
-      max-width: 250px;
-      min-width: 250px;
-      border: 1px solid grey;
-      padding-left: 6px;
-      padding-right: 6px;
-    "
-  >
+  <div v-if="store.currentTask" class="mark-board-track-container">
     <div>
       <h1 class="tw-text-3xl tw-text-center" @click="toggleKeyMouse">
         鼠标给分
@@ -114,6 +105,13 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.mark-board-track-container {
+  max-width: 250px;
+  min-width: 250px;
+  border-left: 1px solid grey;
+  padding-left: 6px;
+  padding-right: 6px;
+}
 .question {
   min-width: 80px;
   border: 1px solid grey;

src/components/mark/MarkBoardTrack.vue

@@ -2,13 +2,7 @@
   <div
     v-if="store.currentTask"
     :style="{ display: store.MarkBoardTrackCollapse ? 'none' : 'block' }"
-    style="
-      max-width: 250px;
-      min-width: 250px;
-      border: 1px solid grey;
-      padding-left: 6px;
-      padding-right: 6px;
-    "
+    class="mark-board-track-container"
   >
     <div>
       <h1 class="tw-text-3xl tw-text-center">
@@ -30,7 +24,6 @@
         <div
           @click="chooseQuestion(question)"
           class="question tw-rounded tw-p-1"
-          style="min-width: 100px"
           :class="isCurrentQuestion(question) && 'current-question'"
         >
           <div>
@@ -78,13 +71,16 @@ export default defineComponent({
       const steps = [];
       for (
         let i = 0;
-        i <= question.maxScore - question.score;
+        i <= question.maxScore - (question.score || 0);
         i += question.intervalScore
       ) {
         steps.push(i);
       }
-      if ((question.maxScore - question.score) % question.intervalScore !== 0) {
-        steps.push(question.maxScore - question.score);
+      if (
+        (question.maxScore - (question.score || 0)) % question.intervalScore !==
+        0
+      ) {
+        steps.push(question.maxScore - (question.score || 0));
       }
 
       return steps;
@@ -176,8 +172,15 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.mark-board-track-container {
+  max-width: 250px;
+  min-width: 250px;
+  border-left: 1px solid grey;
+  padding-left: 6px;
+  padding-right: 6px;
+}
 .question {
-  min-width: 80px;
+  min-width: 100px;
   border: 1px solid grey;
 }
 .current-question {

src/components/mark/MarkBody.vue

@@ -19,9 +19,8 @@
           :dx="item.dx"
           :dy="item.dy"
         />
-        <hr style="border: 2px solid rgba(120, 120, 120, 0.1)" />
+        <hr class="image-seperator" />
       </div>
-      <!-- style="border: 1px solid black; background: black" -->
     </div>
   </div>
 </template>
@@ -391,4 +390,7 @@ export default defineComponent({
 .single-image-container {
   position: relative;
 }
+.image-seperator {
+  border: 2px solid rgba(120, 120, 120, 0.1);
+}
 </style>

src/components/mark/MarkDrawTrack.vue

@@ -47,9 +47,6 @@ export default defineComponent({
         "font-size": store.setting.uiSetting["answer.paper.scale"] * 2.2 + "em",
       };
     };
-    // const
-    // const trackList: Array<Track> = reactive([]);
-    // return { trackList };
 
     return { store, computeTopAndLeft };
   },

src/components/mark/MarkHeader.vue

@@ -1,15 +1,12 @@
 <template>
   <div
-    class="tw-flex tw-gap-4 tw-justify-between tw-items-center header-bg"
-    style="z-index: 10000; position: relative; font-size: 16px; height: 40px"
+    class="tw-flex tw-gap-4 tw-justify-between tw-items-center header-container"
     v-if="store.setting"
   >
     <div>
-      <a
-        style="color: white; text-decoration: underline"
-        href="/mark/subject-select"
-        >{{ store.setting.subject.name }}</a
-      >
+      <a class="tw-text-white tw-underline" href="/mark/subject-select">{{
+        store.setting.subject.name
+      }}</a>
     </div>
     <div v-if="store.setting.statusValue === 'TRIAL'">试评</div>
     <div class="tw-flex tw-gap-1">
@@ -40,40 +37,40 @@
       </li>
       <li
         :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
-        style="line-height: 20px"
+        class="line-height-20"
       >
-        <QuestionCircleOutlined style="font-size: 20px" />
+        <QuestionCircleOutlined class="icon-font-size-20" />
       </li>
       <li>
         进度<span class="highlight-text">{{ progress }}%</span>
       </li>
     </ul>
     <ul class="tw-flex tw-gap-2 tw-mb-0">
-      <li @click="upScale" title="放大" style="line-height: 20px">
+      <li @click="upScale" title="放大" class="line-height-20">
         <PlusCircleOutlined
-          style="font-size: 20px"
+          class="icon-font-size-20"
           :style="{
             color: greaterThanOneScale ? 'red' : 'white',
           }"
         />
       </li>
-      <li @click="downScale" title="缩小" style="line-height: 20px">
+      <li @click="downScale" title="缩小" class="line-height-20">
         <MinusCircleOutlined
-          style="font-size: 20px"
+          class="icon-font-size-20"
           :style="{
             color: lessThanOneScale ? 'red' : 'white',
           }"
         />
       </li>
-      <li @click="normalScale" title="适应" style="line-height: 20px">
-        <FullscreenOutlined style="font-size: 20px" />
+      <li @click="normalScale" title="适应" class="line-height-20">
+        <FullscreenOutlined class="icon-font-size-20" />
       </li>
     </ul>
-    <div @click="toggleSettingMode" style="line-height: 20px">
+    <div @click="toggleSettingMode" class="line-height-20">
       {{ modeName }} {{ store.setting.forceMode ? "" : "(切换)" }}
     </div>
-    <div @click="toggleHistory" style="line-height: 20px" title="回看">
-      <HistoryOutlined style="font-size: 20px" />
+    <div @click="toggleHistory" class="line-height-20" title="回看">
+      <HistoryOutlined class="icon-font-size-20" />
     </div>
     <div
       class="tw-flex tw-place-items-center"
@@ -84,16 +81,14 @@
         $filters.datetimeFilter(store.setting.startTime)
       "
     >
-      <ClockCircleOutlined style="font-size: 20px; line-height: 20px" />
+      <ClockCircleOutlined class="icon-font-size-20 line-height-20" />
     </div>
     <div @click="switchGroupDialog">{{ group?.title }}(切换)</div>
     <div class="tw-flex tw-place-items-center">
-      <UserOutlined style="font-size: 18px; line-height: 18px" />{{
-        store.setting.userName
-      }}
+      <UserOutlined class="icon-with-text" />{{ store.setting.userName }}
     </div>
     <div class="tw-flex tw-place-items-center">
-      <PoweroffOutlined style="font-size: 18px; line-height: 18px" />退出
+      <PoweroffOutlined class="icon-with-text" />退出
     </div>
   </div>
 </template>
@@ -231,11 +226,26 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.header-bg {
+.header-container {
+  z-index: 10000;
+  position: relative;
+  font-size: 16px;
+  height: 40px;
+
   background-color: #5d6d7d;
   color: white;
 }
 .highlight-text {
   color: #ffe400;
 }
+.icon-font-size-20 {
+  font-size: 20px;
+}
+.line-height-20 {
+  line-height: 20px;
+}
+.icon-with-text {
+  font-size: 18px;
+  line-height: 18px;
+}
 </style>

src/components/mark/MarkHistory.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     :style="{ display: store.historyOpen ? 'block' : 'none' }"
-    style="min-width: 250px; border: 1px solid grey"
+    class="history-container"
   >
-    <div>
+    <div class="tw-mt-1 tw-mb-1">
       <input
         v-model="secretNumberInput"
         type="text"
         placeholder="查找试卷"
-        style="border: 1px solid grey; width: 100%"
+        class="tw-w-full tw-rounded tw-h-8 tw-border-solid tw-border-gray-400 tw-border-2"
         @keyup.enter="updateHistoryTask({ secretNumber: secretNumberInput })"
       />
     </div>
@@ -112,3 +112,10 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+.history-container {
+  min-width: 250px;
+  border-right: 1px solid grey;
+}
+</style>