header style

src/components/inspect/MarkHeader.vue

@@ -19,39 +19,36 @@
       </li>
     </ul>
     <ul class="tw-flex tw-gap-2 tw-mb-0">
-      <li @click="upScale" title="放大" class="line-height-20">
+      <li @click="upScale" title="放大">
         <PlusCircleOutlined
-          class="icon-font-size-20"
+          class="icon-font icon-font-size-20"
           :style="{
             color: greaterThanOneScale ? 'red' : 'white',
           }"
         />
       </li>
-      <li @click="downScale" title="缩小" class="line-height-20">
+      <li @click="downScale" title="缩小">
         <MinusCircleOutlined
-          class="icon-font-size-20"
+          class="icon-font icon-font-size-20"
           :style="{
             color: lessThanOneScale ? 'red' : 'white',
           }"
         />
       </li>
-      <li @click="normalScale" title="适应" class="line-height-20">
-        <FullscreenOutlined class="icon-font-size-20" />
+      <li @click="normalScale" title="适应">
+        <FullscreenOutlined class="icon-font icon-font-size-20" />
       </li>
     </ul>
-    <div
-      @click="toggleHistory"
-      v-if="!isSingleStudent"
-      class="line-height-20"
-      title="回看"
-    >
-      <HistoryOutlined class="icon-font-size-20" />
+    <div @click="toggleHistory" v-if="!isSingleStudent" title="回看">
+      <HistoryOutlined class="icon-font icon-font-size-20" />
     </div>
     <div class="tw-flex tw-place-items-center">
-      <UserOutlined class="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">
-      <PoweroffOutlined class="icon-with-text" />关闭
+      <PoweroffOutlined class="icon-font icon-with-text" />关闭
     </div>
   </div>
 </template>
@@ -176,12 +173,12 @@ export default defineComponent({
 .highlight-text {
   color: #ffe400;
 }
+.icon-font {
+  display: block;
+}
 .icon-font-size-20 {
   font-size: 20px;
 }
-.line-height-20 {
-  line-height: 20px;
-}
 .icon-with-text {
   font-size: 18px;
   line-height: 18px;

src/components/mark/MarkHeader.vue

@@ -40,40 +40,39 @@
       </li>
       <li
         :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
-        class="line-height-20"
       >
-        <QuestionCircleOutlined class="icon-font-size-20" />
+        <QuestionCircleOutlined class="icon-font 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="放大" class="line-height-20">
+      <li @click="upScale" title="放大">
         <PlusCircleOutlined
-          class="icon-font-size-20"
+          class="icon-font icon-font-size-20"
           :style="{
             color: greaterThanOneScale ? 'red' : 'white',
           }"
         />
       </li>
-      <li @click="downScale" title="缩小" class="line-height-20">
+      <li @click="downScale" title="缩小">
         <MinusCircleOutlined
-          class="icon-font-size-20"
+          class="icon-font icon-font-size-20"
           :style="{
             color: lessThanOneScale ? 'red' : 'white',
           }"
         />
       </li>
-      <li @click="normalScale" title="适应" class="line-height-20">
-        <FullscreenOutlined class="icon-font-size-20" />
+      <li @click="normalScale" title="适应">
+        <FullscreenOutlined class="icon-font icon-font-size-20" />
       </li>
     </ul>
-    <div @click="toggleSettingMode" class="line-height-20">
+    <div @click="toggleSettingMode">
       {{ modeName }} {{ store.setting.forceMode ? "" : "(切换)" }}
     </div>
-    <div @click="toggleHistory" class="line-height-20" title="回看">
-      <HistoryOutlined class="icon-font-size-20" />
+    <div @click="toggleHistory" title="回看">
+      <HistoryOutlined class="icon-font icon-font-size-20" />
     </div>
     <div
       class="tw-flex tw-place-items-center"
@@ -84,7 +83,7 @@
         $filters.datetimeFilter(store.setting.startTime)
       "
     >
-      <ClockCircleOutlined class="icon-font-size-20 line-height-20" />
+      <ClockCircleOutlined class="icon-font icon-font-size-20" />
     </div>
     <div
       @click="switchGroupDialog"
@@ -94,10 +93,12 @@
       {{ group?.title }}(切换)
     </div>
     <div class="tw-flex tw-place-items-center">
-      <UserOutlined class="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">
-      <PoweroffOutlined class="icon-with-text" />退出
+      <PoweroffOutlined class="icon-font icon-with-text" />退出
     </div>
   </div>
 </template>
@@ -247,6 +248,9 @@ export default defineComponent({
 .highlight-text {
   color: #ffe400;
 }
+.icon-font {
+  display: block;
+}
 .icon-font-size-20 {
   font-size: 20px;
 }