代码优化

src/components/AppBackground.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { capsuleHeight } from "@/util";
+
 const props = defineProps({
   type: {
     type: Number,
@@ -10,11 +11,6 @@ const props = defineProps({
     default: "#050b19",
   },
 });
-const capsuleHeight = ref(0);
-onMounted(() => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top + 50 - 9;
-});
 </script>
 
 <template>
@@ -35,7 +31,7 @@ onMounted(() => {
       class="bg-image"
       v-if="type === 2"
       src="../static/app-bg3.png"
-      :style="{ height: capsuleHeight + 'px' }"
+      :style="{ height: capsuleHeight + 50 + 'px' }"
     />
     <image
       class="bg-image"

src/components/BowTargetEdit.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
-import { getElementRect, calcRing } from "@/util";
+import { getElementRect, calcRing, capsuleHeight } from "@/util";
 
 const props = defineProps({
   id: {
@@ -25,7 +25,6 @@ const rect = ref({});
 const arrow = ref(null);
 const isDragging = ref(false);
 const dragStartPos = ref({ x: 0, y: 0 });
-const capsuleHeight = ref(0);
 const scale = ref(1);
 const scrollTop = ref(0);
 const selected = ref(null);
@@ -59,7 +58,7 @@ const onClick = async (e) => {
   }
   const newArrow = {
     x: (e.detail.x - 6) * scale.value,
-    y: (e.detail.y - rect.value.top - capsuleHeight.value - 6) * scale.value,
+    y: (e.detail.y - rect.value.top - capsuleHeight - 6) * scale.value,
   };
 
   const side = rect.value.width;
@@ -188,8 +187,6 @@ const setEditArrow = (data) => {
 };
 
 onMounted(async () => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top - 9;
   const result = await getElementRect(".container");
   rect.value = result;
   uni.$on("set-edit-arrow", setEditArrow);
@@ -423,9 +420,17 @@ onBeforeUnmount(() => {
   animation: duang 0.35s ease-out;
 }
 @keyframes duang {
-  0% { transform: translate(-50%, -50%) scale(0.7); }
-  45% { transform: translate(-50%, -50%) scale(1.4); }
-  70% { transform: translate(-50%, -50%) scale(0.9); }
-  100% { transform: translate(-50%, -50%) scale(1); }
+  0% {
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+  45% {
+    transform: translate(-50%, -50%) scale(1.4);
+  }
+  70% {
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
 }
 </style>

src/components/Container.vue

@@ -6,7 +6,7 @@ import Header from "@/components/Header.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import BackToGame from "@/components/BackToGame.vue";
 import { getCurrentGameAPI, laserAimAPI } from "@/apis";
-import { debounce } from "@/util";
+import { capsuleHeight, debounce } from "@/util";
 import AudioManager from "@/audioManager";
 const props = defineProps({
   title: {
@@ -49,7 +49,6 @@ const props = defineProps({
 const isIOS = uni.getDeviceInfo().osName === "ios";
 const showHint = ref(false);
 const hintType = ref(0);
-const capsuleHeight = ref(0);
 const isLoading = ref(false);
 const audioInitProgress = ref(1);
 const audioProgress = ref(0);
@@ -96,11 +95,6 @@ const audioFinalProgress = computed(() => {
   return Math.max(0, (audioProgress.value - audioInitProgress.value) / left);
 });
 
-onMounted(() => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top - 9;
-});
-
 onBeforeUnmount(() => {
   if (audioTimer.value) clearInterval(audioTimer.value);
 });
@@ -162,7 +156,7 @@ const goCalibration = async () => {
       :show-scrollbar="false"
       :style="{
         height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px - ${
-          $slots.bottom && showBottom ? (isIOS ? '85px' : '65px') : '0px'
+          $slots.bottom && showBottom ? (isIOS ? '75px' : '65px') : '0px'
         })`,
       }"
     >
@@ -171,7 +165,7 @@ const goCalibration = async () => {
     <view
       class="bottom-part"
       v-if="$slots.bottom && showBottom"
-      :style="{ height: isIOS ? '75px' : '55px', paddingTop: '10px' }"
+      :style="{ height: isIOS ? '65px' : '55px', paddingTop: '10px' }"
     >
       <slot name="bottom"></slot>
     </view>