精简header的HTML&CSS

src/components/ZoomPaper.vue

@@ -1,27 +1,27 @@
 <template>
-  <ul class="tw-flex tw-gap-2 tw-mb-0">
-    <li @click="upScale" title="放大">
-      <ZoomInOutlined
-        class="icon-font icon-font-size-20 tw-cursor-pointer"
-        :style="{
-          color: greaterThanOneScale ? 'red' : 'white',
-        }"
-      />
-    </li>
-    <li @click="downScale" title="缩小">
-      <ZoomOutOutlined
-        class="icon-font icon-font-size-20 tw-cursor-pointer"
-        :style="{
-          color: lessThanOneScale ? 'red' : 'white',
-        }"
-      />
-    </li>
-    <li @click="normalScale" title="适应">
-      <FullscreenOutlined
-        class="icon-font icon-font-size-20 tw-cursor-pointer"
-      />
-    </li>
-  </ul>
+  <div class="tw-flex tw-gap-2 tw-mb-0">
+    <ZoomInOutlined
+      class="icon-font-size-20 tw-cursor-pointer"
+      :style="{
+        color: greaterThanOneScale ? 'red' : 'white',
+      }"
+      @click="upScale"
+      title="放大"
+    />
+    <ZoomOutOutlined
+      class="icon-font-size-20 tw-cursor-pointer"
+      :style="{
+        color: lessThanOneScale ? 'red' : 'white',
+      }"
+      @click="downScale"
+      title="缩小"
+    />
+    <FullscreenOutlined
+      class="icon-font-size-20 tw-cursor-pointer"
+      @click="normalScale"
+      title="适应"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -58,10 +58,7 @@ const lessThanOneScale = computed(() => {
 </script>
 
 <style scoped>
-.icon-font {
-  display: block;
-}
 .icon-font-size-20 {
-  font-size: 20px;
+  /* font-size: 20px; */
 }
 </style>

src/features/mark/MarkHeader.vue

@@ -41,41 +41,38 @@
         }}</span>
       </div>
     </div>
-    <ul v-show="store.status.totalCount" class="tw-flex tw-gap-2 tw-mb-0">
-      <li>
+    <div v-show="store.status.totalCount" class="tw-flex tw-gap-2">
+      <span>
         已评<span class="highlight-text">{{
           store.status.personCount ?? "-"
         }}</span>
-      </li>
-      <li v-if="store.setting.topCount">
+      </span>
+      <span v-if="store.setting.topCount">
         分配<span class="highlight-text">{{
           store.setting.topCount ?? "-"
         }}</span>
-      </li>
-      <li>
+      </span>
+      <span>
         未评<span class="highlight-text">{{
           store.status.totalCount - store.status.markedCount ?? "-"
         }}</span>
-      </li>
-      <li
+      </span>
+      <span
         :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
+        class="tw-inline-flex"
       >
-        <QuestionCircleOutlined class="icon-font icon-font-size-20" />
-      </li>
-      <li>
+        <QuestionCircleOutlined />
+      </span>
+      <span>
         进度<span class="highlight-text">{{ progress ?? "-" }}%</span>
-      </li>
-    </ul>
+      </span>
+    </div>
     <ZoomPaper v-if="isScanImage()" :store="store" />
     <div>
       <a-dropdown class="header-bg-color">
         <template #overlay v-if="!store.setting.forceMode">
           <a-menu>
-            <a-menu-item
-              key="1"
-              @click="toggleSettingMode"
-              style="font-size: 16px"
-            >
+            <a-menu-item key="1" @click="toggleSettingMode">
               {{ exchangeModeName }}
             </a-menu-item>
           </a-menu>
@@ -91,9 +88,9 @@
         </a-button>
       </a-dropdown>
     </div>
-    <div @click="toggleHistory" title="回看">
+    <div @click="toggleHistory" class="tw-flex" title="回看">
       <SnippetsOutlined
-        class="icon-font icon-font-size-20 tw-cursor-pointer"
+        class="icon-font-size-20 tw-cursor-pointer"
         :style="{
           color: store.historyOpen ? 'red' : 'white',
         }"
@@ -112,7 +109,7 @@
           : '-')
       "
     >
-      <ClockCircleOutlined class="icon-font icon-font-size-20" />
+      <ClockCircleOutlined class="icon-font-size-20" />
     </div>
     <a-popover
       v-if="!isScanImage()"
@@ -234,15 +231,13 @@
       class="tw-flex tw-place-items-center tw-cursor-pointer"
       @click="openProfileModal"
     >
-      <UserOutlined class="icon-font icon-with-text" />{{
-        store.setting.userName
-      }}
+      <UserOutlined class="icon-with-text" />{{ store.setting.userName }}
     </div>
     <div
       class="tw-flex tw-place-items-center tw-cursor-pointer"
       @click="logout"
     >
-      <PoweroffOutlined class="icon-font icon-with-text" />
+      <PoweroffOutlined class="icon-with-text" />
       退出
     </div>
   </div>
@@ -366,7 +361,9 @@ watchEffect(() => {
 .header-container {
   position: relative;
   font-size: 16px;
-  height: 40px;
+  line-height: 16px;
+  height: 16px;
+  padding: 20px 0;
 
   background-color: #5d6d7d;
   color: white;
@@ -374,15 +371,12 @@ watchEffect(() => {
 .highlight-text {
   color: #ffe400;
 }
-.icon-font {
-  display: block;
-}
 .icon-font-size-20 {
-  font-size: 20px;
+  /* font-size: 20px; */
 }
 .icon-with-text {
-  font-size: 18px;
-  line-height: 18px;
+  /* font-size: 18px;
+  line-height: 18px; */
 }
 .header-bg-color.ant-btn:hover {
   background-color: #5d6d7d !important;