fix bug

src/components/BowTargetEdit.vue

@@ -151,16 +151,17 @@ onMounted(async () => {
       <view class="point"> </view>
       <!-- 编辑按钮组（只在编辑状态下显示） -->
       <view class="edit-buttons" @click.stop>
+        <view class="edit-btn-text">
+          <text>{{ arrow.ring === 0 ? "未上靶" : arrow.ring }}</text>
           <text
-          >{{ arrow.ring === 0 ? "未上靶" : arrow.ring
+            v-if="arrow.ring > 0"
-          }}<text
             :style="{
               fontSize: '20px',
               marginLeft: arrow.ring > 0 ? '5px' : 0,
             }"
-            >{{ arrow.ring > 0 ? "环" : "" }}</text
+            >环</text
-          ></text
           >
+        </view>
         <view class="edit-btn confirm-btn" @click.stop="confirmAdd(index)">
           <image src="../static/arrow-edit-save.png" mode="widthFix" />
         </view>
@@ -220,9 +221,8 @@ onMounted(async () => {
 
 .edit-buttons {
   position: absolute;
-  top: 50%;
+  top: calc(50% - 44px);
-  left: 50%;
+  left: calc(50% - 44px);
-  transform: translateX(-50%) translateY(-50%);
   background: #18ff6899;
   width: 88px;
   height: 88px;
@@ -230,18 +230,20 @@ onMounted(async () => {
   align-items: flex-end;
 }
 
-.edit-buttons > text {
+.edit-btn-text {
   width: 100%;
-  display: block;
+  display: flex;
+  justify-content: center;
+}
+
+.edit-btn-text > text {
   line-height: 50px;
-  text-align: center;
   font-size: 24px;
   font-weight: bold;
   color: #fff;
 }
 
 .edit-btn {
-  transform: translateX(-50%) translateY(-50%);
   width: 24px;
   height: 24px;
   display: flex;
@@ -256,17 +258,17 @@ onMounted(async () => {
 }
 
 .confirm-btn {
-  left: 50%;
+  left: calc(50% - 12px);
-  bottom: -24px;
+  bottom: -12px;
 }
 
 .delete-btn {
-  left: 50%;
+  left: calc(50% - 12px);
-  top: 0;
+  top: -12px;
 }
 
 .drag-btn {
-  right: -24px;
+  right: -12px;
-  bottom: -24px;
+  bottom: -12px;
 }
 </style>