细节调整

src/components/BowTarget.vue

@@ -107,7 +107,7 @@ onMounted(() => {
 
 <template>
   <view class="container">
-    <view class="header" v-if="totalRound > 0 || power">
+    <view class="header" v-if="totalRound > 0">
       <text v-if="totalRound > 0" class="round-count">{{
         (currentRound > totalRound ? totalRound : currentRound) +
         "/" +

src/components/BowTargetEdit.vue

@@ -19,10 +19,6 @@ const props = defineProps({
     type: Function,
     default: null,
   },
-  editMode: {
-    type: Boolean,
-    default: true,
-  },
 });
 
 const rect = ref({});
@@ -31,6 +27,7 @@ const isDragging = ref(false);
 const dragStartPos = ref({ x: 0, y: 0 });
 const capsuleHeight = ref(0);
 const scale = ref(1);
+const scrollTop = ref(0);
 let lastMoveTime = 0;
 
 // 点击靶纸创建新的点
@@ -43,7 +40,14 @@ const onClick = async (e) => {
     return;
   }
   if (props.id === 7 || props.id === 9) {
+    // 放大并通过滚动将点击位置置于视窗中心
     scale.value = 1.5;
+    const viewportH = rect.value.width; // 容器高度等于宽度（100vw）
+    const contentH = scale.value * rect.value.width; // 内容高度
+    const clickYInContainer = e.detail.y - rect.value.top;
+    let target = clickYInContainer * scale.value - viewportH / 2;
+    target = Math.max(0, Math.min(contentH - viewportH, target));
+    scrollTop.value = Math.round(target);
   }
   const newArrow = {
     x: (e.detail.x - 6) * scale.value,
@@ -75,12 +79,14 @@ const confirmAdd = () => {
   }
   arrow.value = null;
   scale.value = 1;
+  scrollTop.value = 0;
 };
 
 // 删除箭矢
 const deleteArrow = () => {
   arrow.value = null;
   scale.value = 1;
+  scrollTop.value = 0;
 };
 
 // 开始拖拽 - 同样修复坐标获取
@@ -156,8 +162,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <view
-    :style="{ overflowY: editMode ? 'auto' : 'hidden' }"
+  <scroll-view
+    scroll-y
+    scroll-with-animation
+    :scroll-top="scrollTop"
     class="container"
     @tap="onClick"
     @touchmove="onDrag"
@@ -168,9 +176,7 @@ onMounted(async () => {
       :style="{
         width: scale * 100 + 'vw',
         height: scale * 100 + 'vw',
-        transform: `translate(${(100 - scale * 100) / 2}vw,${
-          (100 - scale * 100) / 2
-        }vw) translateY(${scale > 1 ? 16.7 : 0}%)`,
+        transform: `translateX(${(100 - scale * 100) / 2}vw)`,
       }"
     >
       <image :src="src" mode="widthFix" />
@@ -228,7 +234,7 @@ onMounted(async () => {
         </view>
       </movable-view>
     </movable-area>
-  </view>
+  </scroll-view>
 </template>
 
 <style scoped>