222

pages/my/VIP/benefits.vue

@@ -1,7 +1,7 @@
 <template>
-  <view class="benefits-page">
+  <view class="benefits-page" :style="{ paddingTop: (12 + statusBarHeight + 44) + 'px' }">
     <!-- 顶部导航栏 -->
-    <view class="nav-bar">
+    <view class="nav-bar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
       <view class="nav-content">
         <view class="nav-left" @click="goBack">
           <u-icon name="arrow-leftward" color="rgba(255, 255, 255, 1)" size="42"></u-icon>
@@ -209,6 +209,7 @@
 export default {
   data() {
     return {
+      statusBarHeight: 0, // 状态栏高度
       // 当前会员信息
       currentPlan: 'regular',
       remainingDays: 5,
@@ -229,6 +230,11 @@ export default {
       }
     }
   },
+  onLoad() {
+    // 获取状态栏高度
+    let systemInfo = uni.getSystemInfoSync();
+    this.statusBarHeight = systemInfo.statusBarHeight || 0;
+  },
   methods: {
     // 返回上一页
     goBack() {
@@ -276,7 +282,6 @@ export default {
   background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 80%));
   background-size: 100% 40%;
   background-repeat: no-repeat;
-  padding-top: 148rpx;
 }
 
 // 顶部导航栏
@@ -293,7 +298,6 @@ export default {
     justify-content: space-between;
     height: 88rpx;
     padding: 0 32rpx;
-    margin-top: 44rpx; // 状态栏高度
     
     .nav-left, .nav-right {
       width: 60rpx;