胶囊高度适配

src/components/Container.vue

@@ -7,7 +7,7 @@ import ScreenHint from "@/components/ScreenHint.vue";
 import BackToGame from "@/components/BackToGame.vue";
 import { getCurrentGameAPI } from "@/apis";
 import { debounce } from "@/util";
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: "",
@@ -41,9 +41,9 @@ defineProps({
     default: true,
   },
 });
-const isIos = ref(true);
 const showHint = ref(false);
 const hintType = ref(0);
+const capsuleHeight = ref(0);
 const showGlobalHint = (type) => {
   hintType.value = type;
   showHint.value = true;
@@ -52,8 +52,8 @@ const hideGlobalHint = () => {
   showHint.value = false;
 };
 onMounted(() => {
-  const deviceInfo = uni.getDeviceInfo();
+  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  isIos.value = deviceInfo.osName === "ios";
+  capsuleHeight.value = menuBtnInfo.top - 9;
 });
 onUnmounted(() => {
   // const pages = getCurrentPages();
@@ -74,7 +74,7 @@ const goBack = () => {
 </script>
 
 <template>
-  <view>
+  <view :style="{ paddingTop: capsuleHeight + 'px' }">
     <AppBackground :type="bgType" :bgColor="bgColor" />
     <Header
       v-if="!isHome"
@@ -86,7 +86,7 @@ const goBack = () => {
     <view
       class="content"
       :style="{
-        height: isHome ? '100vh' : `calc(100vh - ${isIos ? 190 : 160}rpx)`,
+        height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px)`,
         overflow,
       }"
     >

src/components/Header.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
-const isIos = ref(true);
 
 const props = defineProps({
   title: {
@@ -30,8 +29,6 @@ const updateLoading = (value) => {
 };
 
 onMounted(() => {
-  const deviceInfo = uni.getDeviceInfo();
-  isIos.value = deviceInfo.osName === "ios";
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
   if (currentPage.route === "pages/point-book-edit") {
@@ -52,7 +49,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <view class="container" :style="{ paddingTop: isIos ? '90rpx' : '60rpx' }">
+  <view class="container">
     <view class="back-btn" @click="onClick">
       <image v-if="whiteBackArrow" src="../static/back.png" mode="widthFix" />
       <image
@@ -107,7 +104,9 @@ onUnmounted(() => {
           )
         }}
         {{
-          pointBook.bowtargetType.name.substring(pointBook.bowtargetType.name.length - 3)
+          pointBook.bowtargetType.name.substring(
+            pointBook.bowtargetType.name.length - 3
+          )
         }}</text
       >
     </view>
@@ -120,7 +119,7 @@ onUnmounted(() => {
   justify-content: flex-start;
   align-items: center;
   width: 72vw;
-  height: 100rpx;
+  height: 50px;
   /* margin-top: var(--status-bar-height); */
   padding-left: 15px;
 }

src/components/UserHeader.vue

@@ -130,6 +130,7 @@ watch(
   display: flex;
   align-items: center;
   width: 72vw;
+  height: 50px;
   padding-left: 15px;
   color: #fff;
 }

src/pages/index.vue

@@ -23,7 +23,6 @@ const { updateConfig, updateUser, updateDevice, updateRank, getLvlName } =
 // 使用storeToRefs，用于UI里显示，保持响应性
 const { user, device, rankData } = storeToRefs(store);
 const showModal = ref(false);
-const isIos = ref(true);
 const showGuide = ref(false);
 
 const toPage = (path) => {
@@ -88,8 +87,6 @@ onShow(async () => {
 
 onMounted(async () => {
   uni.removeStorageSync("point-book-config");
-  const deviceInfo = uni.getDeviceInfo();
-  isIos.value = deviceInfo.osName === "ios";
   const config = await getAppConfig();
   updateConfig(config);
   console.log("全局配置：", config);
@@ -105,7 +102,7 @@ const comingSoon = () => {
 
 <template>
   <Container :isHome="true" :showBackToGame="true">
-    <view class="container" :style="{ paddingTop: isIos ? '100rpx' : '70rpx' }">
+    <view class="container">
       <UserHeader showRank :onSignin="() => (showModal = true)" />
       <view :style="{ padding: '12px 10px' }">
         <view class="feature-grid">

src/pages/rank-list.vue

@@ -7,15 +7,15 @@ const store = useStore();
 const { user, rankData } = storeToRefs(store);
 const { getLvlName } = store;
 
-const isIos = ref(true);
+const capsuleHeight = ref(0);
 const selectedIndex = ref(0);
 const currentList = ref([]);
 const myData = ref({});
 const addBg = ref("");
 
 onMounted(async () => {
-  const deviceInfo = uni.getDeviceInfo();
+  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  isIos.value = deviceInfo.osName === "ios";
+  capsuleHeight.value = menuBtnInfo.top - 9;
   currentList.value = rankData.value.rank;
   if (rankData.value.myRankPos) myData.value = rankData.value.myRankPos;
 });
@@ -47,7 +47,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
     <view
       class="header"
       :style="{
-        paddingTop: isIos ? '38px' : '25px',
+        paddingTop: capsuleHeight + 'px',
       }"
     >
       <image
@@ -59,7 +59,9 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
       <navigator open-type="navigateBack">
         <image class="header-back" src="../static/back.png" mode="widthFix" />
       </navigator>
-      <text :style="{ opacity: addBg ? 1 : 0, color: '#fff' }">
+      <text
+        :style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
+      >
         本赛季排行榜
       </text>
     </view>
@@ -152,7 +154,10 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
       </view>
     </view>
     <view class="my-rank-data" v-if="myData.userId">
-      <image src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png" mode="widthFix" />
+      <image
+        src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
+        mode="widthFix"
+      />
       <text>{{ myData.rank }}</text>
       <Avatar :src="user.avatar" />
       <view class="rank-item-content">
@@ -186,9 +191,9 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
 }
 .header {
   width: 100%;
-  height: 60px;
+  height: 50px;
   display: flex;
-  align-items: flex-center;
+  align-items: center;
   position: fixed;
   top: 0;
   transition: all 0.3s ease;
@@ -197,7 +202,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
 }
 .header text {
   transition: all 0.3s ease;
-  line-height: 60px;
+  line-height: 50px;
   position: relative;
 }
 .rank-tabs {
@@ -346,7 +351,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
 .header-back {
   width: 22px;
   height: 22px;
-  margin: 20px 15px;
+  margin: 0px 15px;
   position: relative;
 }
 .bg-image {