仲裁样式

src/features/arbitrate/ArbitrateMarkList.vue

@@ -1,33 +1,36 @@
 <template>
   <div class="container tw-mt-2 tw-ml-1">
     <div v-for="(markDetail, index) of list" :key="index">
-      <table class="tw-mb-4">
-        <tr style="border-bottom: 1px dotted grey">
-          <td>评卷员</td>
-          <td>{{ markDetail.markerName }}</td>
-        </tr>
-        <tr>
-          <td>时间</td>
-          <td>
+      <div
+        class="tw-mb-4 tw-py-2"
+        style="background-color: white; border-radius: 5px"
+      >
+        <div class="tw-flex" style="color: var(--app-small-header-text-color)">
+          <div class="col-1">评卷员</div>
+          <div class="col-2">{{ markDetail.markerName }}</div>
+        </div>
+        <div class="tw-flex" style="color: var(--app-bold-text-color)">
+          <div class="col-1 tw-font-bold">时间</div>
+          <div class="col-2">
             {{
               markDetail.markTime &&
               $filters.datetimeFilter(markDetail.markTime)
             }}
-          </td>
-        </tr>
-        <tr>
-          <td>总分</td>
-          <td>
+          </div>
+        </div>
+        <div class="tw-flex" style="color: var(--app-bold-text-color)">
+          <div class="col-1 tw-font-bold">总分</div>
+          <div class="col-2">
             {{
               markDetail.totalScore === -1 ? "未选做" : markDetail.totalScore
             }}
-          </td>
-        </tr>
-        <tr>
-          <td>详情</td>
-          <td>{{ markDetail.scoreList }}</td>
-        </tr>
-      </table>
+          </div>
+        </div>
+        <div class="tw-flex" style="color: var(--app-bold-text-color)">
+          <div class="col-1 tw-font-bold">详情</div>
+          <div class="col-2">{{ markDetail.scoreList }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -66,11 +69,12 @@ watch(
 .container {
   min-width: 200px;
 }
-.container table tr :first-child {
-  width: 60px;
-  font-weight: bold;
+.container .col-1 {
+  width: 50px;
+  text-align: right;
+  margin-right: 8px;
 }
-.container table tr td {
+.container .col-2 {
   max-width: 140px;
   word-wrap: break-word;
 }

src/features/arbitrate/MarkHeader.vue

@@ -1,13 +1,32 @@
 <template>
   <div
-    class="
-      tw-flex tw-gap-4 tw-justify-between tw-items-center
-      header-container
-      tw-px-1
-    "
+    class="tw-flex tw-gap-4 tw-justify-start tw-items-center header-container"
     v-if="store.setting"
   >
-    <div>
+    <div
+      v-if="!isSingleStudent"
+      class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
+      :class="[store.historyOpen && 'menu-toggled']"
+      @click="toggleHistory"
+    >
+      <span title="回看" class="tw-inline-flex tw-place-content-center">
+        <img
+          src="../mark/images/left-menu.svg"
+          :class="[store.historyOpen && 'svg-red']"
+        />
+      </span>
+      <div v-if="store.historyOpen" class="triangle"></div>
+    </div>
+    <div
+      class="
+        tw-text-white
+        tw-block
+        tw-overflow-ellipsis
+        tw-overflow-hidden
+        tw-whitespace-nowrap
+        header-big-text
+      "
+    >
       {{
         `${store.setting.subject.code ?? ""}-${
           store.setting.subject.name ?? ""
@@ -16,32 +35,28 @@
     </div>
     <div class="tw-flex tw-gap-1">
       <div>
-        编号<span class="highlight-text">{{
-          store.currentTask?.secretNumber
-        }}</span>
+        <span class="header-small-text">编号</span>
+        <span class="highlight-text">
+          {{ store.currentTask?.secretNumber ?? "-" }}
+        </span>
       </div>
     </div>
-    <ul v-if="!isSingleStudent" class="tw-flex tw-gap-2 tw-mb-0">
-      <li>
-        待处理<span class="highlight-text">{{
-          store.status.totalCount ?? "-"
-        }}</span>
-      </li>
-      <li>
-        已处理<span class="highlight-text">{{
+    <div
+      v-if="!isSingleStudent"
+      class="tw-flex tw-gap-2 tw-items-center tw-flex-1"
+    >
+      <span>
+        <span class="header-small-text">待处理</span>
+        <span class="highlight-text">{{ store.status.totalCount ?? "-" }}</span>
+      </span>
+      <span>
+        <span class="header-small-text">已处理</span>
+        <span class="highlight-text">{{
           store.status.markedCount ?? "-"
         }}</span>
-      </li>
-    </ul>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
-    <div @click="toggleHistory" v-if="!isSingleStudent" title="回看">
-      <SnippetsOutlined
-        class="icon-font icon-font-size-20 tw-cursor-pointer"
-        :style="{
-          color: store.historyOpen ? 'red' : 'white',
-        }"
-      />
+      </span>
     </div>
+    <ZoomPaper v-if="isScanImage()" :store="store" />
     <a-popover
       v-if="isScanImage()"
       title="小助手"
@@ -95,6 +110,36 @@
     >
       <PoweroffOutlined class="icon-font icon-with-text" />关闭
     </div>
+    <div
+      class="
+        tw-flex tw-place-content-center tw-cursor-pointer tw-justify-self-end
+        menu
+      "
+      :class="[
+        !store.setting.uiSetting['score.board.collapse'] &&
+          store.currentTask &&
+          'menu-toggled',
+      ]"
+      @click="toggleScoreBoard"
+    >
+      <span
+        title="给分板"
+        class="tw-inline-flex tw-place-content-center tw-relative"
+      >
+        <img
+          src="../mark/images/right-menu.svg"
+          :class="[
+            !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
+          ]"
+        />
+      </span>
+      <div
+        v-if="
+          !store.setting.uiSetting['score.board.collapse'] && store.currentTask
+        "
+        class="triangle"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -141,28 +186,92 @@ onMounted(() => {
     updateClearTask();
   });
 });
+
+const toggleScoreBoard = () => {
+  store.setting.uiSetting["score.board.collapse"] =
+    !store.setting.uiSetting["score.board.collapse"];
+};
 </script>
 
 <style scoped>
+.header-bg-color {
+  background-color: var(--header-bg-color);
+}
 .header-container {
   position: relative;
-  font-size: 16px;
-  height: 40px;
+  height: 56px;
+  line-height: 16px;
 
   background-color: var(--header-bg-color);
   color: rgba(255, 255, 255, 0.5);
 }
+.menu {
+  width: 56px;
+  height: 56px;
+  padding: 20px;
+}
+.menu:hover,
+.menu-toggled {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.header-container span {
+  vertical-align: middle;
+}
+.header-big-text {
+  font-size: 20px;
+  line-height: 30px;
+}
+.header-small-text {
+  font-size: var(--app-secondary-font-size);
+}
 .highlight-text {
   color: white;
+  font-size: var(--app-title-font-size);
 }
-.icon-font {
-  display: block;
+.header-bg-color.ant-btn:hover {
+  background-color: var(--app-ant-select-bg-override-color) !important;
 }
-.icon-font-size-20 {
-  font-size: 20px;
+
+.assistant-table {
+  z-index: 5500;
+  border-collapse: separate;
+  border-spacing: 0 1em;
+  color: var(--app-bold-text-color);
+  width: 240px;
+}
+.assistant-table tr td:nth-child(2) {
+  text-align: right;
+}
+.svg-red {
+  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
+    brightness(104%) contrast(97%);
+}
+.triangle {
+  background-color: white;
+  width: 10px;
+  height: 10px;
+  clip-path: polygon(0 100%, 100% 100%, 50% 0);
+
+  position: absolute;
+  bottom: -2px;
+}
+.dropdown-triangle {
+  background-color: #8c8d9b;
+  width: 7px;
+  height: 5px;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  margin-left: 4px;
+}
+.markcount-animation {
+  animation: change-color 3s ease-in-out;
 }
-.icon-with-text {
-  font-size: 18px;
-  line-height: 18px;
+@keyframes change-color {
+  0% {
+    color: red;
+  }
+  100% {
+    color: white;
+  }
 }
 </style>

src/features/arbitrate/MarkHistory.vue

@@ -1,99 +1,97 @@
 <template>
   <div
-    :style="{ display: store.historyOpen ? 'block' : 'none' }"
     class="history-container tw-px-1"
+    :class="[store.historyOpen ? 'show' : 'hide']"
   >
-    <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
-      <div class="tw-text-xl">回评</div>
-      <a-button
-        class="tw-content-end"
-        shape="circle"
-        @click="store.historyOpen = false"
-      >
-        <template #icon><CloseOutlined /></template>
-      </a-button>
-    </div>
-    <div class="tw-mt-1 tw-mb-1 tw-flex">
+    <div class="tw-mt-1 tw-mb-1 tw-flex tw-place-items-center">
+      <div class="tw-text-lg main-text-color tw-mr-4 tw-font-bold">回评</div>
       <input
         v-model="secretNumberInput"
         @keydown.stop="() => {}"
+        @keypress.stop="() => {}"
         type="text"
         placeholder="查找试卷"
-        class="
-          tw-w-full
-          tw-rounded
-          tw-h-8
-          tw-border-solid
-          tw-border-gray-400
-          tw-border-2
-          tw-pl-1
-          tw-pr-8
-        "
+        class="tw-flex-1 tw-rounded tw-h-8 tw-pl-1 tw-pr-8"
         @keyup.enter="searchHistoryTask"
       />
       <SearchOutlined
-        style="margin-left: -30px; font-size: 24px; padding: 3px"
+        style="margin-left: -24px; font-size: 18px; padding: 3px"
         @click="searchHistoryTask"
       />
     </div>
-    <div class="tw-flex tw-justify-between">
+    <div class="tw-flex tw-justify-between tw-mt-5">
       <div class="tw-cursor-pointer tw-flex">编号</div>
       <div
         @click="toggleOrderBy('markerTime')"
-        class="tw-cursor-pointer tw-flex"
+        class="tw-cursor-pointer tw-flex tw-items-center"
       >
         时间
-        <CaretUpOutlined
-          style="font-size: 20px"
-          v-if="order === 'markerTime' && sort === 'ASC'"
-        />
-        <CaretDownOutlined
-          style="font-size: 20px"
-          v-if="order === 'markerTime' && sort === 'DESC'"
-        />
+        <CaretUpOutlined v-if="order === 'markerTime' && sort === 'ASC'" />
+        <CaretDownOutlined v-if="order === 'markerTime' && sort === 'DESC'" />
       </div>
       <div
         @click="toggleOrderBy('markerScore')"
-        class="tw-cursor-pointer tw-flex"
+        class="tw-cursor-pointer tw-flex tw-items-center"
       >
         分数
-        <CaretUpOutlined
-          style="font-size: 20px"
-          v-if="order === 'markerScore' && sort === 'ASC'"
-        />
-        <CaretDownOutlined
-          style="font-size: 20px"
-          v-if="order === 'markerScore' && sort === 'DESC'"
-        />
+        <CaretUpOutlined v-if="order === 'markerScore' && sort === 'ASC'" />
+        <CaretDownOutlined v-if="order === 'markerScore' && sort === 'DESC'" />
       </div>
     </div>
-    <a-spin :spinning="loading" size="large" tip="Loading...">
-      <div v-for="(task, index) of store.historyTasks" :key="index">
-        <div
-          @click="replaceCurrentTask(task)"
-          class="
-            tw-flex
-            tw-justify-between
-            tw-place-items-center
-            tw-rounded
-            tw-cursor-pointer
-          "
-          :class="store.currentTask === task && 'current-task'"
-        >
-          <div class="tw-break-words tw-w-1/3">{{ task.secretNumber }}</div>
-          <div>
-            {{ task.markTime && $filters.datetimeFilter(task.markTime) }}
-          </div>
-          <div style="width: 30px; text-align: center">
-            {{ task.markerScore }}
+    <a-spin :spinning="loading" size="large" tip="Loading..." :delay="500">
+      <div style="margin-bottom: -40px; padding-bottom: 40px">
+        <div v-for="(task, index) of store.historyTasks" :key="index">
+          <div
+            @click="replaceCurrentTask(task)"
+            class="
+              tw-flex
+              tw-justify-between
+              tw-place-items-center
+              tw-rounded
+              tw-cursor-pointer
+              tw-font-bold
+              tw-py-2
+            "
+            :class="store.currentTask === task && 'current-task'"
+          >
+            <div class="tw-break-words tw-w-1/3">{{ task.secretNumber }}</div>
+            <div>
+              {{ task.markTime && $filters.datetimeFilter(task.markTime) }}
+            </div>
+            <div style="width: 30px; text-align: right">
+              {{ task.markerScore }}
+            </div>
           </div>
         </div>
       </div>
     </a-spin>
-    <div class="tw-flex tw-justify-between tw-place-content-center tw-mt-2">
-      <a-button @click="previousPage">上一页</a-button>
-      <div style="line-height: 30px">第{{ currentPage }}页</div>
-      <a-button @click="nextPage">下一页</a-button>
+    <div
+      class="
+        tw-flex tw-justify-between tw-place-content-center tw-mt-2
+        pager-container
+      "
+    >
+      <div class="tw-font-bold" style="line-height: 30px">
+        第{{ currentPage }}页
+      </div>
+      <div class="tw-flex tw-gap-2">
+        <a-button
+          shape="circle"
+          @click="previousPage"
+          type="primary"
+          title="上一页"
+        >
+          <div class="left-triangle"></div>
+        </a-button>
+        <a-button
+          shape="circle"
+          @click="nextPage"
+          type="primary"
+          title="下一页"
+        >
+          <div class="right-triangle"></div>
+        </a-button>
+      </div>
     </div>
   </div>
 </template>
@@ -258,10 +256,48 @@ function searchHistoryTask() {
 
 <style scoped>
 .history-container {
-  min-width: 250px;
-  border-right: 1px solid grey;
+  min-width: 290px;
+  padding: 20px;
+  font-size: var(--app-secondary-font-size);
+  overflow-y: auto;
+  height: calc(100vh - 56px);
+  transition: margin-left 0.5s;
 }
+.history-container.show {
+  margin-left: 0;
+}
+.history-container.hide {
+  margin-left: -290px;
+}
+
 .current-task {
-  background-color: aqua;
+  background-color: var(--app-container-bg-color);
+  padding-left: 5px;
+  margin-left: -5px;
+  padding-right: 5px;
+  margin-right: -5px;
+}
+
+.left-triangle {
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+  transform: translateX(60%);
+}
+
+.right-triangle {
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  clip-path: polygon(100% 50%, 0 100%, 0 0);
+  transform: translateX(90%);
+}
+.pager-container {
+  position: absolute;
+  bottom: 0px;
+  padding-bottom: 20px;
+  width: 250px;
+  background-color: var(--app-main-bg-color);
 }
 </style>

src/features/student/inspect/MarkHeader.vue

@@ -46,10 +46,8 @@
       class="tw-flex tw-gap-2 tw-items-center tw-flex-1"
     >
       <span>
-        <span class="header-small-text">待复核</span
-        ><span class="highlight-text">{{
-          store.status.totalCount ?? "-"
-        }}</span>
+        <span class="header-small-text">待复核</span>
+        <span class="highlight-text">{{ store.status.totalCount ?? "-" }}</span>
       </span>
     </div>
     <ZoomPaper v-if="isScanImage()" :store="store" />