代码优化

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); }
+  0% {
-  45% { transform: translate(-50%, -50%) scale(1.4); }
+    transform: translate(-50%, -50%) scale(0.7);
-  70% { transform: translate(-50%, -50%) scale(0.9); }
+  }
-  100% { transform: translate(-50%, -50%) scale(1); }
+  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>

src/pages/device-intro.vue

@@ -2,6 +2,8 @@
 import { ref, onMounted } from "vue";
 import SButton from "@/components/SButton.vue";
 
+import { capsuleHeight } from "@/util";
+
 const images = [
   "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmf6yitekatwe.jpg",
   "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmi475gqdtrvx.jpg",
@@ -14,12 +16,7 @@ const images = [
   "https://static.shelingxingqiu.com/attachment/2025-10-14/ddht51a3hiyw7ueli4.jpg",
 ];
 
-const addBg = ref("");
+const addBg = ref(false);
-const capsuleHeight = ref(0);
-onMounted(async () => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top - 9;
-});
 
 const onScrollView = (e) => {
   addBg.value = e.detail.scrollTop > 100;
@@ -35,8 +32,7 @@ const onScrollView = (e) => {
       }"
     >
       <image
-        v-if="addBg"
+        :style="{ opacity: addBg ? 1 : 0 }"
-        class="bg-image"
         src="../static/app-bg.png"
         mode="widthFix"
       />
@@ -46,12 +42,17 @@ const onScrollView = (e) => {
       <text
         :style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
       >
-        本赛季排行榜
       </text>
     </view>
     <scroll-view scroll-y @scroll="onScrollView" :style="{ height: '100vh' }">
       <view class="images">
-        <image v-for="src in images" :key="src" :src="src" mode="widthFix" show-menu-by-longpress />
+        <image
+          v-for="src in images"
+          :key="src"
+          :src="src"
+          mode="widthFix"
+          show-menu-by-longpress
+        />
       </view>
     </scroll-view>
   </view>
@@ -71,7 +72,6 @@ const onScrollView = (e) => {
   align-items: center;
   position: fixed;
   top: 0;
-  transition: all 0.3s ease;
   z-index: 10;
   overflow: hidden;
 }
@@ -82,12 +82,19 @@ const onScrollView = (e) => {
   margin-top: 5px;
   position: relative;
 }
-.bg-image {
+.header > image:first-child {
   width: 100vw;
   height: 100vh;
   position: absolute;
   top: 0;
   left: 0;
+  transition: all 0.5s ease;
+}
+.header > text {
+  color: #fff;
+  font-weight: bold;
+  transition: all 0.5s ease;
+  position: relative;
 }
 .images {
   display: flex;

src/pages/rank-list.vue

@@ -1,21 +1,19 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import Avatar from "@/components/Avatar.vue";
+import { capsuleHeight } from "@/util";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, rankData } = storeToRefs(store);
 const { getLvlName } = store;
 
-const capsuleHeight = ref(0);
 const selectedIndex = ref(0);
 const currentList = ref([]);
 const myData = ref({});
-const addBg = ref("");
+const addBg = ref(false);
 
 onMounted(async () => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top - 9;
   handleSelect(0);
 });
 
@@ -66,19 +64,14 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
       }"
     >
       <image
-        v-if="addBg"
+        :style="{ opacity: addBg ? 1 : 0 }"
-        class="bg-image"
         src="../static/app-bg.png"
         mode="widthFix"
       />
       <navigator open-type="navigateBack">
         <image class="header-back" src="../static/back.png" mode="widthFix" />
       </navigator>
-      <text
+      <text :style="{ opacity: addBg ? 1 : 0 }">本赛季排行榜</text>
-        :style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
-      >
-        本赛季排行榜
-      </text>
     </view>
     <scroll-view
       scroll-y
@@ -231,13 +224,28 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   align-items: center;
   position: fixed;
   top: 0;
-  transition: all 0.3s ease;
   z-index: 10;
   overflow: hidden;
 }
-.header text {
+.header-back {
-  transition: all 0.3s ease;
+  width: 22px;
-  line-height: 50px;
+  height: 22px;
+  margin: 0px 15px;
+  margin-top: 5px;
+  position: relative;
+}
+.header > image:first-child {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: all 0.5s ease;
+}
+.header > text {
+  color: #fff;
+  font-weight: bold;
+  transition: all 0.5s ease;
   position: relative;
 }
 .rank-tabs {
@@ -384,18 +392,4 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   color: #fff9;
   font-size: 14px;
 }
-.header-back {
-  width: 22px;
-  height: 22px;
-  margin: 0px 15px;
-  margin-top: 5px;
-  position: relative;
-}
-.bg-image {
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
 </style>