放大缩小 & 评卷状态样式

src/components/ZoomPaper.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="tw-flex tw-gap-2 tw-mb-0">
+  <div
+    class="tw-flex tw-flex-col tw-gap-2 zoom-container tw-place-content-center"
+  >
     <ZoomInOutlined
       class="icon-font-size-20 tw-cursor-pointer"
       :style="{
@@ -58,7 +60,18 @@ const lessThanOneScale = computed(() => {
 </script>
 
 <style scoped>
+.zoom-container {
+  z-index: 1000;
+  position: sticky;
+  background-color: rgba(0, 0, 0, 0.9);
+  bottom: 0px;
+  margin-top: -100px;
+  left: calc(100% - 50px);
+  width: 40px;
+  height: 100px;
+  border-radius: 10px;
+}
 .icon-font-size-20 {
-  /* font-size: 20px; */
+  font-size: 24px;
 }
 </style>

src/features/mark/CommonMarkBody.vue

@@ -10,19 +10,6 @@
       v-else-if="store.setting.examType === 'SCAN_IMAGE'"
       :style="{ width: answerPaperScale }"
     >
-      <div
-        style="
-          top: 0px;
-          right: 0;
-          position: absolute;
-          color: red;
-          pointer-events: none;
-          font-size: 30px;
-          z-index: 1000;
-        "
-      >
-        {{ markStatus }}
-      </div>
       <div
         v-for="(item, index) in sliceImagesWithTrackList"
         :key="index"
@@ -48,6 +35,11 @@
       <MultiMediaMarkBody />
     </div>
     <div v-else>impossible</div>
+    <div v-if="markStatus" class="status-container">
+      {{ markStatus }}
+      <div class="double-triangle"></div>
+    </div>
+    <ZoomPaper v-if="isScanImage()" :store="store" />
   </div>
   <slot name="slot-cursor" />
 </template>
@@ -81,6 +73,7 @@ import { dragImage } from "./use/draggable";
 import MultiMediaMarkBody from "./MultiMediaMarkBody.vue";
 import "viewerjs/dist/viewer.css";
 import Viewer from "viewerjs";
+import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const props = defineProps<{
   useMarkResult?: boolean;
@@ -516,6 +509,7 @@ const showBigImage = (event: MouseEvent) => {
 
 <style scoped>
 .mark-body-container {
+  min-height: calc(100vh - 56px);
   height: calc(100vh - 56px);
   overflow: auto;
   /* background-size: 8px 8px;
@@ -538,4 +532,28 @@ const showBigImage = (event: MouseEvent) => {
 .image-seperator {
   border: 2px solid transparent;
 }
+.status-container {
+  position: sticky;
+  bottom: calc(100% - 40px);
+  left: calc(100% - 40px);
+  margin-top: -40px;
+  color: white;
+  pointer-events: none;
+  font-size: 16px;
+  background-color: #ef7c78;
+
+  width: 30px;
+  height: 50px;
+  text-align: center;
+  z-index: 1000;
+}
+.double-triangle {
+  background-color: #ef7c78;
+  width: 30px;
+  height: 6px;
+  clip-path: polygon(0 0, 0 6px, 50% 0, 100% 0, 100% 6px, 50% 0);
+
+  position: absolute;
+  bottom: -6px;
+}
 </style>

src/features/mark/MarkHeader.vue

@@ -82,7 +82,7 @@
         ><span class="highlight-text">{{ progress ?? "-" }}%</span>
       </span>
     </div>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
+
     <div class="tw-flex">
       <a-dropdown class="header-bg-color">
         <template #overlay v-if="!store.setting.forceMode">
@@ -296,7 +296,6 @@ import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";
 import MarkProblemDialog from "./MarkProblemDialog.vue";
 import { isNumber } from "lodash";
 import { Modal } from "ant-design-vue";
-import ZoomPaper from "@/components/ZoomPaper.vue";
 
 defineEmits(["should-reload-history"]);