MarkHeader样式

src/features/mark/MarkHeader.vue

@@ -78,7 +78,22 @@
         ><span class="highlight-text">{{ progress ?? "-" }}%</span>
       </span>
     </div>
-
+    <div
+      class="tw-flex tw-place-items-center"
+      :title="
+        '评卷时间段：' +
+        (store.setting.startTime > 0
+          ? $filters.datetimeFilter(store.setting.startTime)
+          : '-') +
+        ' ~ ' +
+        (store.setting.endTime > 0
+          ? $filters.datetimeFilter(store.setting.endTime)
+          : '-')
+      "
+    >
+      <!-- <ClockCircleOutlined /> -->
+      <img src="./images/时间.png" style="width: 16px; height: 16px" />
+    </div>
     <div class="tw-flex">
       <a-dropdown class="header-bg-color">
         <template #overlay v-if="!store.setting.forceMode">
@@ -89,8 +104,23 @@
           </a-menu>
         </template>
         <a-button
-          style="font-size: 16px; color: rgba(255, 255, 255, 0.5); border: none"
+          style="
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.5);
+            border: none;
+            display: flex;
+            align-items: center;
+          "
         >
+          <img
+            src="./images/轨迹模式.png"
+            style="
+              width: 11px;
+              height: 12px;
+              display: inline;
+              margin-right: 2px;
+            "
+          />
           {{ modeName }}
           <DownOutlined
             v-if="!store.setting.forceMode"
@@ -99,21 +129,6 @@
         </a-button>
       </a-dropdown>
     </div>
-    <div
-      class="tw-flex tw-place-items-center"
-      :title="
-        '评卷时间段：' +
-        (store.setting.startTime > 0
-          ? $filters.datetimeFilter(store.setting.startTime)
-          : '-') +
-        ' ~ ' +
-        (store.setting.endTime > 0
-          ? $filters.datetimeFilter(store.setting.endTime)
-          : '-')
-      "
-    >
-      <ClockCircleOutlined />
-    </div>
     <a-popover
       v-if="!isScanImage()"
       title="小助手"
@@ -129,19 +144,17 @@
         </table>
       </template>
       <div class="tw-flex">
-        小助手
+        <span style="font-size: 14px">小助手</span>
         <DownOutlined
-          style="font-size: 12px; display: inline-block"
+          style="font-size: 14px; display: inline-block"
           class="tw-self-center tw-ml-1"
         />
       </div>
     </a-popover>
-    <a-popover
-      v-if="isScanImage()"
-      title="小助手"
-      trigger="hover"
-      class="tw-cursor-pointer"
-    >
+    <a-popover v-if="isScanImage()" trigger="hover" class="tw-cursor-pointer">
+      <template #title>
+        <span style="color: #283e76; font-size: 16px">小助手</span>
+      </template>
       <template #content>
         <table class="assistant-table">
           <tr v-if="store.setting.subject.paperUrl">
@@ -210,8 +223,12 @@
           </tr>
         </table>
       </template>
-      <div class="tw-flex">
-        小助手
+      <div class="tw-flex tw-items-center">
+        <img
+          src="./images/小助手.png"
+          style="width: 10px; height: 12px; margin-right: 2px"
+        />
+        <span style="font-size: 14px">小助手</span>
         <DownOutlined
           style="font-size: 12px; display: inline-block"
           class="tw-self-center tw-ml-1"
@@ -220,14 +237,19 @@
     </a-popover>
     <div
       @click="openSwitchGroupModal"
-      class="tw-flex tw-place-content-center tw-cursor-pointer"
+      class="tw-flex tw-place-content-center tw-cursor-pointer tw-items-center"
       style="max-width: 8%"
       :title="store.setting.groupTitle + '-' + store.setting.groupNumber"
     >
+      <img
+        src="./images/分组.png"
+        style="width: 10px; height: 12px; margin-right: 2px"
+      />
       <div
         class="
           tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-mr-1
         "
+        style="font-size: 14px"
       >
         {{ "分组:" + store.setting.groupNumber }}
       </div>
@@ -239,15 +261,18 @@
     </div>
     <div
       class="tw-flex tw-place-items-center tw-cursor-pointer"
+      style="font-size: 14px"
       @click="openProfileModal"
     >
-      <UserOutlined />{{ store.setting.userName }}
+      <!-- <UserOutlined /> -->
+      {{ store.setting.userName }}
     </div>
     <div
       class="tw-flex tw-place-items-center tw-cursor-pointer"
       @click="logout"
+      style="font-size: 14px"
     >
-      <PoweroffOutlined />
+      <!-- <PoweroffOutlined /> -->
       退出
     </div>
     <div