样式优化

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,71 +60,73 @@ const toOrderPage = () => {
 
 <template>
   <Container title="会员说明">
-    <view v-if="user.id" class="header">
+    <view :style="{ width: '100%', height: '100%' }">
-      <view>
+      <view v-if="user.id" class="header">
-        <Avatar :src="user.avatar" :size="35" />
-        <text class="truncate">{{ user.nickName }}</text>
-      </view>
-      <text v-if="user.expiredAt"
-        >{{ formatTimestamp(user.expiredAt) }}到期</text
-      >
-    </view>
-    <view
-      class="container"
-      :style="{ height: !user.id ? '100%' : 'calc(100% - 62px)' }"
-    >
-      <view class="content vip-content">
-        <view class="title-bar">
-          <view />
-          <text>VIP 介绍</text>
-        </view>
         <view>
-          <text
+          <Avatar :src="user.avatar" :size="35" />
-            >射灵的的VIP服务是为了正式对战打造的专属特权，让您在激烈的射击运动中充分享受与同级别想着对战的乐趣；</text
+          <text class="truncate">{{ user.nickName }}</text>
-          >
-          <text
-            >VIP的收取形式灵活多样，充分考虑到了不同用户的需求。我们提供按月收取的方式，每月仅需10元，即可轻松成为VIP会员，享受一个月的尊贵特权。这种方式适合那些希望先体验VIP服务，再决定是否长期投入的用户。您可以先购买一个月的VIP，亲身感受VIP带来的种种好处，如果觉得满意，再继续选择适合自己的购买方案。而对于那些已经确定会长期参与对战，希望持续享受VIP特权的用户，我们则推出了更为优惠的一年VIP套餐。一次性购买一年的VIP，仅需100元，平均每月不到9元，您就能全年畅享VIP的所有权益。这不仅为您节省了时间和精力，还为您带来了实实在在的经济优惠。
-            一年的时间，足够您在对战的世界中尽情驰骋，不断挑战自我，创造属于自己的辉煌战绩。</text
-          >
-          <text
-            >VIP会员还将获得专属的客服支持。当您在游戏中遇到任何问题，无论是技术故障、规则疑问还是其他需要帮助的情况，都可以随时联系我们的VIP专属客服团队。他们将为您提供24小时不间断的优质服务，以最快的速度为您解决问题，确保您的对战体验不受任何影响。</text
-          >
-          <text
-            >除了这些直接与对战相关的特权，VIP会员还将享受到一系列的福利。我们不定期为VIP会员举办专属的活动，如邀请知名对战选手进行线上交流、举办VIP会员专属的锦标赛等。在这些活动中，您不仅有机会与偶像近距离接触，还能与其他VIP会员交流心得，共同进步。同时，VIP会员在购买游戏内的道具、装备时，还将享受专属的折扣优惠。这些道具和装备能够帮助您在对战中更好地发挥自己的实力，提升您的对战体验。。</text
-          >
         </view>
+        <text v-if="user.expiredAt">
+          {{ formatTimestamp(user.expiredAt) }}到期
+        </text>
       </view>
-      <view class="content">
+      <view
-        <view class="title-bar">
+        class="container"
-          <view />
+        :style="{ height: !user.id ? '100%' : 'calc(100% - 62px)' }"
-          <text>成为射灵会员</text>
+      >
-        </view>
+        <view class="content vip-content">
-        <view class="vip-items">
+          <view class="title-bar">
-          <view
+            <view />
-            v-for="(item, index) in config.vipMenus || []"
+            <text>VIP 介绍</text>
-            :key="index"
+          </view>
-            :style="{
+          <view>
-              color: selectedVIP === index ? '#fff' : '#333333',
+            <text
-              borderColor: selectedVIP === index ? '#FF7D57' : '#eee',
+              >射灵的的VIP服务是为了正式对战打造的专属特权，让您在激烈的射击运动中充分享受与同级别想着对战的乐趣；</text
-              background:
+            >
-                selectedVIP === index
+            <text
-                  ? '#FF7D57'
+              >VIP的收取形式灵活多样，充分考虑到了不同用户的需求。我们提供按月收取的方式，每月仅需10元，即可轻松成为VIP会员，享受一个月的尊贵特权。这种方式适合那些希望先体验VIP服务，再决定是否长期投入的用户。您可以先购买一个月的VIP，亲身感受VIP带来的种种好处，如果觉得满意，再继续选择适合自己的购买方案。而对于那些已经确定会长期参与对战，希望持续享受VIP特权的用户，我们则推出了更为优惠的一年VIP套餐。一次性购买一年的VIP，仅需100元，平均每月不到9元，您就能全年畅享VIP的所有权益。这不仅为您节省了时间和精力，还为您带来了实实在在的经济优惠。
-                  : 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
+              一年的时间，足够您在对战的世界中尽情驰骋，不断挑战自我，创造属于自己的辉煌战绩。</text
-            }"
+            >
-            @click="() => (selectedVIP = index)"
+            <text
-          >
+              >VIP会员还将获得专属的客服支持。当您在游戏中遇到任何问题，无论是技术故障、规则疑问还是其他需要帮助的情况，都可以随时联系我们的VIP专属客服团队。他们将为您提供24小时不间断的优质服务，以最快的速度为您解决问题，确保您的对战体验不受任何影响。</text
-            {{ item.name }}
+            >
+            <text
+              >除了这些直接与对战相关的特权，VIP会员还将享受到一系列的福利。我们不定期为VIP会员举办专属的活动，如邀请知名对战选手进行线上交流、举办VIP会员专属的锦标赛等。在这些活动中，您不仅有机会与偶像近距离接触，还能与其他VIP会员交流心得，共同进步。同时，VIP会员在购买游戏内的道具、装备时，还将享受专属的折扣优惠。这些道具和装备能够帮助您在对战中更好地发挥自己的实力，提升您的对战体验。。</text
+            >
           </view>
         </view>
-      </view>
+        <view class="content">
-      <SButton :onClick="onPay">支付</SButton>
+          <view class="title-bar">
-      <SModal :show="showModal" :onClose="() => (showModal = false)">
+            <view />
-        <Signin :onClose="() => (showModal = false)" />
+            <text>成为射灵会员</text>
-      </SModal>
+          </view>
-      <view class="my-orders" v-if="user.id">
+          <view class="vip-items">
-        <view @click="toOrderPage">
+            <view
-          <text>我的订单</text>
+              v-for="(item, index) in config.vipMenus || []"
-          <image src="../static/enter-arrow-blue.png" mode="widthFix" />
+              :key="index"
+              :style="{
+                color: selectedVIP === index ? '#fff' : '#333333',
+                borderColor: selectedVIP === index ? '#FF7D57' : '#eee',
+                background:
+                  selectedVIP === index
+                    ? '#FF7D57'
+                    : 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
+              }"
+              @click="() => (selectedVIP = index)"
+            >
+              {{ item.name }}
+            </view>
+          </view>
+        </view>
+        <SButton :onClick="onPay">支付</SButton>
+        <SModal :show="showModal" :onClose="() => (showModal = false)">
+          <Signin :onClose="() => (showModal = false)" />
+        </SModal>
+        <view class="my-orders" v-if="user.id">
+          <view @click="toOrderPage">
+            <text>我的订单</text>
+            <image src="../static/enter-arrow-blue.png" mode="widthFix" />
+          </view>
         </view>
       </view>
     </view>