评卷质量 轨迹等样式优化

src/features/library/libraryTrack/MarkHeader.vue

@@ -1,34 +1,57 @@
 <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
+      class="
+        tw-text-white
+        tw-block
+        tw-overflow-ellipsis
+        tw-overflow-hidden
+        tw-whitespace-nowrap
+        header-big-text
+        tw-pl-5
+      "
+    >
+      {{
+        `${store.setting.subject.code ?? ""}-${
+          store.setting.subject.name ?? ""
+        }`
+      }}
+    </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?.examNumber }}
+        </span>
       </div>
     </div>
+    <div class="tw-flex tw-gap-2 tw-items-center tw-flex-1"></div>
     <ZoomPaper v-if="isScanImage()" :store="store" />
-    <div
-      class="tw-flex tw-place-content-center tw-cursor-pointer"
-      style="max-width: 8%"
-    >
+    <div class="tw-flex tw-cursor-pointer tw-items-center tw-flex-1">
       <div
         class="
-          tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-mr-1
+          tw-overflow-ellipsis
+          tw-overflow-hidden
+          tw-whitespace-nowrap
+          tw-mr-1
+          tw-items-center
         "
       >
-        {{ "分组:" + store.setting.groupNumber }}
+        <span class="header-small-text">分组</span>
+        <span class="highlight-text">
+          {{ store.setting.groupNumber }}
+        </span>
       </div>
     </div>
+    <div class="tw-flex tw-place-items-center">
+      <UserOutlined class="icon-font icon-with-text" />
+      {{ store.setting.userName }}
+    </div>
     <div
-      class="tw-flex tw-place-items-center tw-cursor-pointer"
+      class="tw-flex tw-place-items-center tw-cursor-pointer tw-pr-5"
       @click="closeWindow"
     >
       <PoweroffOutlined class="icon-font icon-with-text" />关闭
@@ -38,7 +61,7 @@
 
 <script setup lang="ts">
 import { store, isScanImage } from "@/features/mark/store";
-import { PoweroffOutlined } from "@ant-design/icons-vue";
+import { UserOutlined, PoweroffOutlined } from "@ant-design/icons-vue";
 import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const closeWindow = async () => {
@@ -47,22 +70,84 @@ const closeWindow = async () => {
 </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);
+}
+.header-bg-color.ant-btn:hover {
+  background-color: var(--app-ant-select-bg-override-color) !important;
+}
+
+.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;
 }
-.icon-font {
-  display: block;
+.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/library/quality/MarkHeader.vue

@@ -1,13 +1,19 @@
 <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
+      class="
+        tw-text-white
+        tw-block
+        tw-overflow-ellipsis
+        tw-overflow-hidden
+        tw-whitespace-nowrap
+        header-big-text
+        tw-pl-5
+      "
+    >
       {{
         `${store.setting.subject.code ?? ""}-${
           store.setting.subject.name ?? ""
@@ -16,17 +22,19 @@
     </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?.examNumber }}
+        </span>
       </div>
     </div>
+    <div class="tw-flex tw-gap-2 tw-items-center tw-flex-1"></div>
     <ZoomPaper v-if="isScanImage()" :store="store" />
     <a-popover
       v-if="isScanImage()"
       title="小助手"
       trigger="hover"
-      class="tw-cursor-pointer"
+      class="tw-cursor-pointer tw-flex tw-gap-2 tw-items-center tw-flex-1"
     >
       <template #content>
         <table class="assistant-table">
@@ -65,12 +73,11 @@
       </div>
     </a-popover>
     <div class="tw-flex tw-place-items-center">
-      <UserOutlined class="icon-font icon-with-text" />{{
-        store.setting.userName
-      }}
+      <UserOutlined class="icon-font icon-with-text" />
+      {{ store.setting.userName }}
     </div>
     <div
-      class="tw-flex tw-place-items-center tw-cursor-pointer"
+      class="tw-flex tw-place-items-center tw-cursor-pointer tw-pr-5"
       @click="closeWindow"
     >
       <PoweroffOutlined class="icon-font icon-with-text" />关闭
@@ -93,23 +100,84 @@ const closeWindow = async () => {
 </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-with-text {
-  font-size: 18px;
-  line-height: 18px;
+.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;
+}
+@keyframes change-color {
+  0% {
+    color: red;
+  }
+  100% {
+    color: white;
+  }
 }
 </style>

src/features/library/quality/MarkHistory.vue

@@ -1,43 +1,71 @@
 <template>
   <div class="history-container tw-px-1">
-    <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
-      <div class="tw-text-xl">给分记录</div>
+    <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>
     </div>
-    <div class="tw-mt-1 tw-mb-1 tw-flex"></div>
-    <div class="tw-flex tw-justify-between">
-      <div>编号</div>
-      <div>时间</div>
-      <div>分数</div>
+    <div class="tw-flex tw-justify-between tw-mt-5">
+      <div class="tw-cursor-pointer tw-flex">编号</div>
+      <div class="tw-cursor-pointer tw-flex tw-items-center">时间</div>
+      <div class="tw-cursor-pointer tw-flex tw-items-center">分数</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" :title="task.secretNumber">
-            {{ 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" :title="task.secretNumber">
+              {{ task.secretNumber }}
+            </div>
+            <div>
+              {{ task.markTime && $filters.datetimeFilter(task.markTime) }}
+            </div>
+            <div style="width: 30px; text-align: right">
+              {{ task.markerScore === -1 ? "未选做" : 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>
@@ -119,10 +147,48 @@ function nextPage() {
 
 <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/MarkHistory.vue

@@ -27,14 +27,16 @@
             "
             :class="store.currentTask === task && 'current-task'"
           >
-            <div class="tw-break-words tw-w-1/3">{{ task.secretNumber }}</div>
+            <div class="tw-break-words tw-w-1/3" :title="task.secretNumber">
+              {{ task.secretNumber }}
+            </div>
             <div>
               {{
                 task.inspectTime && $filters.datetimeFilter(task.inspectTime)
               }}
             </div>
             <div style="width: 30px; text-align: right">
-              {{ task.markerScore }}
+              {{ task.markerScore === -1 ? "未选做" : task.markerScore }}
             </div>
           </div>
         </div>

src/features/student/studentTrack/MarkHeader.vue

@@ -1,22 +1,40 @@
 <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
+      class="
+        tw-text-white
+        tw-block
+        tw-overflow-ellipsis
+        tw-overflow-hidden
+        tw-whitespace-nowrap
+        header-big-text
+        tw-pl-5
+      "
+    >
+      {{
+        `${store.setting.subject.code ?? ""}-${
+          store.setting.subject.name ?? ""
+        }`
+      }}
+    </div>
     <div class="tw-flex tw-gap-1">
       <div>
-        编号<span class="highlight-text">{{
-          store.currentTask?.examNumber
-        }}</span>
+        <span class="header-small-text">编号</span>
+        <span class="highlight-text">
+          {{ store.currentTask?.examNumber }}
+        </span>
       </div>
     </div>
+    <div class="tw-flex tw-gap-2 tw-items-center tw-flex-1"></div>
     <ZoomPaper v-if="isScanImage()" :store="store" />
+    <div class="tw-flex tw-place-items-center tw-justify-end">
+      {{ store.setting.userName }}
+    </div>
     <div
-      class="tw-flex tw-place-items-center tw-cursor-pointer"
+      class="tw-flex tw-place-items-center tw-cursor-pointer tw-pr-5"
       @click="closeWindow"
     >
       <PoweroffOutlined class="icon-font icon-with-text" />关闭
@@ -35,23 +53,84 @@ const closeWindow = async () => {
 </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-with-text {
-  font-size: 18px;
-  line-height: 18px;
+.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;
+}
+@keyframes change-color {
+  0% {
+    color: red;
+  }
+  100% {
+    color: white;
+  }
 }
 </style>