代码优化

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 capsuleHeight = ref(0);
-onMounted(async () => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top - 9;
-});
+const addBg = ref(false);
 
 const onScrollView = (e) => {
   addBg.value = e.detail.scrollTop > 100;
@@ -35,8 +32,7 @@ const onScrollView = (e) => {
       }"
     >
       <image
-        v-if="addBg"
-        class="bg-image"
+        :style="{ opacity: addBg ? 1 : 0 }"
         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"
-        class="bg-image"
+        :style="{ opacity: addBg ? 1 : 0 }"
         src="../static/app-bg.png"
         mode="widthFix"
       />
       <navigator open-type="navigateBack">
         <image class="header-back" src="../static/back.png" mode="widthFix" />
       </navigator>
-      <text
-        :style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
-      >
-        本赛季排行榜
-      </text>
+      <text :style="{ opacity: addBg ? 1 : 0 }">本赛季排行榜</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 {
-  transition: all 0.3s ease;
-  line-height: 50px;
+.header-back {
+  width: 22px;
+  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>