feat: 评卷界面科目信息样式调整

src/features/arbitrate/MarkHeader.vue

@@ -9,11 +9,13 @@
         <img class="header-icon" src="@/assets/icons/icon-left-menu.svg" />回评
       </div>
       <div class="header-subject" :title="store.setting.subject.name">
-        {{
-          `${store.setting.subject.code ?? ""}-${
-            store.setting.subject.name ?? ""
-          }`
-        }}
+        <div>
+          {{
+            `${store.setting.subject.code ?? ""}-${
+              store.setting.subject.name ?? ""
+            }`
+          }}
+        </div>
       </div>
       <div class="header-secret">
         <div class="header-noun">

src/features/mark/MarkHeader.vue

@@ -12,11 +12,13 @@
         <img class="header-icon" src="@/assets/icons/icon-left-menu.svg" />回评
       </div>
       <div class="header-subject" :title="store.setting.subject.name">
-        {{
-          `${store.setting.subject.code ?? ""}-${
-            store.setting.subject.name ?? ""
-          }`
-        }}
+        <div>
+          {{
+            `${store.setting.subject.code ?? ""}-${
+              store.setting.subject.name ?? ""
+            }`
+          }}
+        </div>
       </div>
       <a-tooltip overlayClassName="mark-tooltip">
         <template #title>

src/styles/page.less

@@ -42,7 +42,6 @@
       align-items: center;
     }
     &:last-child {
-      flex-grow: 0;
       flex-shrink: 0;
 
       display: flex;
@@ -88,20 +87,32 @@
     }
   }
   .header-subject {
-    min-width: 160px;
-    max-width: 300px;
     height: 18px;
     line-height: 18px;
     font-size: 14px;
     color: #fff;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    text-align: right;
 
     &:hover {
       opacity: 0.8;
     }
+    > div {
+      position: relative;
+      max-height: 36px;
+      overflow: hidden;
+      &::after {
+        content: "...";
+        display: block;
+        position: absolute;
+        height: 18px;
+        line-height: 18px;
+        bottom: 18px;
+        padding-left: 3px;
+        right: 0;
+        z-index: auto;
+        background-color: var(--header-bg-color);
+      }
+    }
   }
   .header-programs {
     margin: 0 15px 0 0;
@@ -110,6 +121,7 @@
     width: 30px;
     border-radius: 4px;
     cursor: pointer;
+    flex-shrink: 0;
 
     &:hover {
       background: #3e4057;
@@ -123,9 +135,11 @@
     padding: 0 12px;
     border-left: 1px solid #8c8d9b;
     border-right: 1px solid #8c8d9b;
+    white-space: nowrap;
   }
   .header-total {
     padding: 0 12px;
+    white-space: nowrap;
   }
   .header-noun {
     display: inline-block;
@@ -167,6 +181,32 @@
   }
 }
 
+@media screen and (max-width: 1440px) {
+  .mark-header {
+    .header-menu {
+      min-width: 46px;
+      padding: 18px 10px;
+      &.header-menu-left {
+        min-width: 69px;
+      }
+    }
+    .header-programs {
+      margin-right: 10px;
+    }
+    .header-secret,
+    .header-total,
+    .header-noun,
+    .header-text-btn {
+      padding: 0 8px;
+    }
+    .header-text-btn {
+      .header-icon {
+        margin-right: 4px;
+      }
+    }
+  }
+}
+
 // mark-tool
 .mark-tool {
   .flex-between;