UI 重构：header重新排版

src/features/mark/MarkHeader.vue

@@ -11,11 +11,11 @@
       <a
         class="
           tw-text-white
-          tw-underline
           tw-block
           tw-overflow-ellipsis
           tw-overflow-hidden
           tw-whitespace-nowrap
+          header-big-text
         "
         :title="store.setting.subject.name"
         href="/mark/subject-select"
@@ -29,42 +29,46 @@
     <div v-if="store.setting.statusValue === 'TRIAL'">试评</div>
     <div class="tw-flex tw-gap-1">
       <div>
-        编号<span class="highlight-text">{{
+        <span class="header-small-text">编号</span>
+        <span class="highlight-text">{{
           store.currentTask?.secretNumber
         }}</span>
       </div>
       <div
         v-if="store.currentTask && store.currentTask.objectiveScore !== null"
       >
-        客观分<span class="highlight-text">{{
+        <span class="header-small-text">客观分</span
+        ><span class="highlight-text">{{
           store.currentTask.objectiveScore
         }}</span>
       </div>
     </div>
     <div v-show="store.status.totalCount" class="tw-flex tw-gap-2">
       <span>
-        已评<span class="highlight-text">{{
+        <span class="header-small-text">已评</span
+        ><span class="highlight-text">{{
           store.status.personCount ?? "-"
         }}</span>
       </span>
       <span v-if="store.setting.topCount">
-        分配<span class="highlight-text">{{
-          store.setting.topCount ?? "-"
-        }}</span>
+        <span class="header-small-text">分配</span
+        ><span class="highlight-text">{{ store.setting.topCount ?? "-" }}</span>
       </span>
       <span>
-        未评<span class="highlight-text">{{
+        <span class="header-small-text">未评</span
+        ><span class="highlight-text">{{
           store.status.totalCount - store.status.markedCount ?? "-"
         }}</span>
       </span>
       <span
         :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
-        class="tw-inline-flex"
+        class="tw-inline-flex tw-place-content-center"
       >
-        <QuestionCircleOutlined />
+        <QuestionCircleOutlined style="display: inline-flex" />
       </span>
       <span>
-        进度<span class="highlight-text">{{ progress ?? "-" }}%</span>
+        <span class="header-small-text">进度</span
+        ><span class="highlight-text">{{ progress ?? "-" }}%</span>
       </span>
     </div>
     <ZoomPaper v-if="isScanImage()" :store="store" />
@@ -90,7 +94,7 @@
     </div>
     <div @click="toggleHistory" class="tw-flex" title="回看">
       <SnippetsOutlined
-        class="icon-font-size-20 tw-cursor-pointer"
+        class="tw-cursor-pointer"
         :style="{
           color: store.historyOpen ? 'red' : 'white',
         }"
@@ -109,7 +113,7 @@
           : '-')
       "
     >
-      <ClockCircleOutlined class="icon-font-size-20" />
+      <ClockCircleOutlined />
     </div>
     <a-popover
       v-if="!isScanImage()"
@@ -231,13 +235,13 @@
       class="tw-flex tw-place-items-center tw-cursor-pointer"
       @click="openProfileModal"
     >
-      <UserOutlined class="icon-with-text" />{{ store.setting.userName }}
+      <UserOutlined />{{ store.setting.userName }}
     </div>
     <div
       class="tw-flex tw-place-items-center tw-cursor-pointer"
       @click="logout"
     >
-      <PoweroffOutlined class="icon-with-text" />
+      <PoweroffOutlined />
       退出
     </div>
   </div>
@@ -356,27 +360,30 @@ watchEffect(() => {
 
 <style scoped>
 .header-bg-color {
-  background-color: #5d6d7d;
+  background-color: var(--header-bg-color);
 }
 .header-container {
   position: relative;
   font-size: 16px;
+  height: 56px;
   line-height: 16px;
-  height: 16px;
-  padding: 20px 0;
 
-  background-color: #5d6d7d;
-  color: white;
+  background-color: var(--header-bg-color);
+  color: rgba(255, 255, 255, 0.5);
 }
-.highlight-text {
-  color: #ffe400;
+.header-container span {
+  vertical-align: middle;
 }
-.icon-font-size-20 {
-  /* font-size: 20px; */
+.header-big-text {
+  font-size: 20px;
+  line-height: 30px;
 }
-.icon-with-text {
-  /* font-size: 18px;
-  line-height: 18px; */
+.header-small-text {
+  font-size: 12px;
+  /* line-height: 12px; */
+}
+.highlight-text {
+  color: white;
 }
 .header-bg-color.ant-btn:hover {
   background-color: #5d6d7d !important;

src/styles/global.css

@@ -1,10 +1,14 @@
 @import "./tailwind.css";
 @import "./nprogress.css";
 
+:root {
+  --header-bg-color: #191b37;
+}
+
 body {
   margin: 0;
   font-size: 14px;
-  min-width: 1024px;
+  min-width: 1440px;
   min-height: 600px;
   user-select: none;
 }