取不到任务的样式

src/App.vue

@@ -71,6 +71,7 @@ export default defineComponent({
   top: 0;
   left: 0;
   height: 100vh;
+  width: 100vw;
   /* 不知道为啥在窗口宽度小于#app min-width 的时候，遮罩层覆盖不全。要控制body的overflow。 */
   min-width: var(--app-min-width);
   overflow: hidden;

src/features/mark/CommonMarkBody.vue

@@ -3,7 +3,15 @@
     class="mark-body-container tw-flex-auto tw-p-2 tw-relative"
     ref="dragContainer"
   >
-    <div v-if="!store.currentTask" class="tw-text-center">
+    <div
+      v-if="!store.currentTask"
+      class="
+        tw-text-center
+        empty-task
+        tw-flex tw-flex-col tw-place-items-center tw-justify-center
+      "
+    >
+      <img src="./images/空白.png" />
       {{ store.message }}
     </div>
     <div
@@ -528,6 +536,19 @@ const showBigImage = (event: MouseEvent) => {
 .mark-body-container img {
   width: 100%;
 }
+.empty-task {
+  width: calc(100%);
+  height: calc(100%);
+  font-size: 20px;
+  overflow: hidden;
+  background-color: white;
+}
+.empty-task img {
+  display: block;
+  width: 288px;
+  height: 225px;
+  clip-path: polygon(0 0, 0 80%, 100% 80%, 100% 0);
+}
 .single-image-container {
   position: relative;
 }

src/features/mark/MarkHeader.vue

@@ -253,7 +253,9 @@
     <div
       class="tw-flex tw-place-content-center tw-cursor-pointer menu"
       :class="[
-        !store.setting.uiSetting['score.board.collapse'] && 'menu-toggled',
+        !store.setting.uiSetting['score.board.collapse'] &&
+          store.currentTask &&
+          'menu-toggled',
       ]"
       @click="toggleScoreBoard"
     >
@@ -269,7 +271,9 @@
         />
       </span>
       <div
-        v-if="!store.setting.uiSetting['score.board.collapse']"
+        v-if="
+          !store.setting.uiSetting['score.board.collapse'] && store.currentTask
+        "
         class="triangle"
       ></div>
     </div>