feat: 图片缩放工具定位位置优化

src/components/CommonMarkHeader.vue

@@ -48,7 +48,6 @@
     </div>
 
     <div class="tw-flex-1"></div>
-    <ZoomPaper v-if="store.isScanImage" />
     <a-popover
       v-if="store.isScanImage"
       title="小助手"

src/components/ZoomPaper.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="tw-flex tw-flex-col tw-gap-2 zoom-container tw-place-content-center"
+    :class="{ 'tw-fixed': props.fixed }"
   >
     <RotateRightOutlined
       v-if="props.showRotate"
@@ -44,7 +45,7 @@ import {
 import { computed, onMounted, onUnmounted } from "vue";
 import { store } from "@/store/store";
 
-const props = defineProps<{ showRotate?: boolean }>();
+const props = defineProps<{ showRotate?: boolean; fixed?: boolean }>();
 defineEmits(["rotateRight"]);
 
 const upScale = () => {
@@ -85,15 +86,20 @@ onUnmounted(() => {
 <style scoped>
 .zoom-container {
   z-index: 1001;
-  position: fixed;
+  position: sticky;
   background-color: rgba(0, 0, 0, 0.9);
   bottom: 10px;
-  right: 320px;
+  left: calc(100% - 30px);
   width: 40px;
   /* height: 100px; */
   padding: 10px 0;
   border-radius: 10px;
 }
+.zoom-container.tw-fixed {
+  position: fixed;
+  right: 30px;
+  left: unset;
+}
 .icon-font-size-20 {
   font-size: 24px;
 }

src/features/admin/confirmPaper/ConfirmPaper.vue

@@ -157,10 +157,9 @@
             @contextmenu="showBigImage"
           />
         </div>
+        <ZoomPaper v-if="student" fixed showRotate @rotateRight="rotateRight" />
       </div>
     </div>
-
-    <ZoomPaper v-if="student" showRotate @rotateRight="rotateRight" />
   </div>
 </template>
 

src/features/mark/CommonMarkBody.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="dragContainer"
-    class="mark-body-container tw-flex-auto tw-p-2 tw-relative"
+    class="mark-body-container tw-flex-auto tw-p-2 tw-pt-0 tw-relative"
   >
     <div
       v-if="!store.currentTask"
@@ -13,7 +13,7 @@
     <div
       v-else-if="store.isScanImage"
       :style="{ width: answerPaperScale }"
-      :class="[`rotate-board-${rotateBoard}`]"
+      :class="['tw-pt-2', `rotate-board-${rotateBoard}`]"
     >
       <div
         v-for="(item, index) in sliceImagesWithTrackList"
@@ -45,7 +45,7 @@
       {{ markStatus }}
       <div class="double-triangle"></div>
     </div>
-    <ZoomPaper v-if="store.isScanImage && store.currentTask" />
+    <ZoomPaper v-if="store.isScanImage && store.currentTask && sliceImagesWithTrackList.length" />
 
     <!-- 非启用功能 -->
     <div class="kb-circle tw-hidden">
@@ -752,9 +752,11 @@ function scrollToFirstScore() {
   border: 2px solid transparent;
 }
 .status-container {
-  position: fixed;
-  top: 56px;
-  right: 340px;
+  position: sticky;
+  /* top: 56px; */
+  bottom: calc(100% - 50px);
+  /* right: 340px; */
+  left: calc(100% - 20px);
   color: white;
   pointer-events: none;
   font-size: var(--app-title-font-size);

src/features/student/studentInspect/MarkBody.vue

@@ -1,9 +1,9 @@
 <template>
-  <div ref="dragContainer" class="mark-body-container tw-flex-auto tw-p-2">
+  <div ref="dragContainer" class="mark-body-container tw-flex-auto tw-p-2 tw-pt-0">
     <div v-if="!store.currentTask" class="tw-text-center">
       {{ store.message }}
     </div>
-    <div v-else :style="{ width: answerPaperScale }">
+    <div v-else :style="{ width: answerPaperScale }" class="tw-pt-2">
       <div
         v-for="(item, index) in sliceImagesWithTrackList"
         :key="index"
@@ -24,17 +24,19 @@
         <hr class="image-seperator" />
       </div>
     </div>
+    <ZoomPaper v-if="store.isScanImage && sliceImagesWithTrackList.length" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch } from "vue";
 import { store } from "@/store/store";
-import MarkDrawTrack from "@/features/mark/MarkDrawTrack.vue"
+import MarkDrawTrack from "@/features/mark/MarkDrawTrack.vue";
 import type { SpecialTag, Track } from "@/types";
 import { useTimers } from "@/setups/useTimers";
 import { loadImage } from "@/utils/utils";
 import { dragImage } from "@/features/mark/use/draggable";
+import ZoomPaper from "@/components/ZoomPaper.vue";
 
 interface SliceImage {
   url: string;