样式优化

src/components/Container.vue

@@ -68,7 +68,7 @@ const goBack = () => {
     <view
       class="content"
       :style="{
-        height: isHome ? '100vh' : `calc(100vh - ${isIos ? 98 : 95}px)`,
+        height: isHome ? '100vh' : `calc(100vh - ${isIos ? 196 : 170}rpx)`,
         overflow,
       }"
     >

src/components/Header.vue

@@ -25,7 +25,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <view class="container" :style="{ paddingTop: isIos ? '38px' : '25px' }">
+  <view class="container" :style="{ paddingTop: isIos ? '76rpx' : '50rpx' }">
     <view class="back-btn" @click="onClick">
       <image src="../static/back.png" mode="widthFix" />
     </view>
@@ -67,7 +67,7 @@ onMounted(() => {
   justify-content: flex-start;
   align-items: center;
   width: 72vw;
-  height: 60px;
+  height: 120rpx;
   /* margin-top: var(--status-bar-height); */
   padding-left: 15px;
   color: #fff;

src/components/UserHeader.vue

@@ -16,7 +16,9 @@ const props = defineProps({
   },
 });
 const nextLvlPoints = ref("");
-const containerWidth = computed(() => (props.showRank ? "72%" : "100%"));
+const containerWidth = computed(() =>
+  props.showRank ? "72%" : "calc(100% - 15px)"
+);
 const toUserPage = () => {
   // 获取当前页面路径
   const pages = getCurrentPages();

src/pages/be-vip.vue

@@ -60,14 +60,15 @@ const toOrderPage = () => {
 
 <template>
   <Container title="会员说明">
+    <view :style="{ width: '100%', height: '100%' }">
       <view v-if="user.id" class="header">
         <view>
           <Avatar :src="user.avatar" :size="35" />
           <text class="truncate">{{ user.nickName }}</text>
         </view>
-      <text v-if="user.expiredAt"
-        >{{ formatTimestamp(user.expiredAt) }}到期</text
-      >
+        <text v-if="user.expiredAt">
+          {{ formatTimestamp(user.expiredAt) }}到期
+        </text>
       </view>
       <view
         class="container"
@@ -128,6 +129,7 @@ const toOrderPage = () => {
           </view>
         </view>
       </view>
+    </view>
   </Container>
 </template>