胶囊高度适配

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();
-  isIos.value = deviceInfo.osName === "ios";
+  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
+  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;
 }