页面布局优化

src/components/AppFooter.vue

@@ -43,13 +43,13 @@ function handleTabClick(index) {
 
 <style scoped>
 .footer {
-  height: 117px;
+  height: 120px;
   width: 100vw;
   position: relative;
   display: flex;
   justify-content: space-around;
   align-items: center;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 .footer-bg {
   width: 100%;

src/components/Container.vue

@@ -21,9 +21,9 @@ const props = defineProps({
     type: Function,
     default: null,
   },
-  overflow: {
+  scroll: {
-    type: String,
+    type: Boolean,
-    default: "auto",
+    default: true,
   },
   isHome: {
     type: Boolean,
@@ -42,6 +42,7 @@ const props = defineProps({
     default: true,
   },
 });
+const isIOS = uni.getDeviceInfo().osName === "ios";
 const showHint = ref(false);
 const hintType = ref(0);
 const capsuleHeight = ref(0);
@@ -150,14 +151,25 @@ const goCalibration = async () => {
       :whiteBackArrow="whiteBackArrow"
     />
     <BackToGame v-if="showBackToGame" />
-    <view
+    <scroll-view
-      class="content"
+      :scroll-y="scroll"
+      :enhanced="true"
+      :bounces="false"
+      :show-scrollbar="false"
       :style="{
-        height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px)`,
+        height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px - ${
-        overflow,
+          $slots.bottom ? (isIOS ? '85px' : '65px') : '0px'
+        })`,
       }"
     >
       <slot></slot>
+    </scroll-view>
+    <view
+      class="bottom-part"
+      v-if="$slots.bottom"
+      :style="{ height: isIOS ? '75px' : '55px', paddingTop: '10px' }"
+    >
+      <slot name="bottom"></slot>
     </view>
     <ScreenHint :show="showHint">
       <view v-if="hintType === 1" class="tip-content">
@@ -223,15 +235,6 @@ const goCalibration = async () => {
 </template>
 
 <style scoped>
-.content {
-  width: 100vw;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  overflow-x: hidden;
-}
 .tip-content {
   flex-direction: column;
   display: flex;

src/pages/about-us.vue

@@ -1,24 +1,7 @@
 <script setup>
-import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user } = storeToRefs(store);
 
-const isIos = ref(false);
+const isIOS = uni.getDeviceInfo().osName === "ios";
-
-const openLink = () => {
-  // uni.navigateTo({
-  //   url:
-  //     "/pages/webview?url=" +
-  //     encodeURIComponent("https://beian.miit.gov.cn/"),
-  // });
-};
-onMounted(() => {
-  const deviceInfo = uni.getDeviceInfo();
-  isIos.value = deviceInfo.osName === "ios";
-});
 </script>
 
 <template>
@@ -34,8 +17,7 @@ onMounted(() => {
 
       <view
         class="copyright"
-        :style="{ paddingBottom: isIos ? '30rpx' : '20rpx' }"
+        :style="{ paddingBottom: isIOS ? '40rpx' : '20rpx' }"
-        @click="openLink"
       >
         <text>粤ICP备2025421150号-2X</text>
       </view>
@@ -46,7 +28,7 @@ onMounted(() => {
 <style scoped>
 .container {
   width: calc(100% - 50rpx);
-  height: 100%;
+  height: calc(100% - 50rpx);
   padding: 25rpx;
   background-color: #ffffff;
   position: relative;

src/pages/be-vip.vue

@@ -79,7 +79,6 @@ onBeforeUnmount(() => {
 
 <template>
   <Container title="会员说明">
-    <view :style="{ width: '100%', height: '100%' }">
     <view v-if="user.id" class="header">
       <view>
         <Avatar :src="user.avatar" :size="35" />
@@ -105,7 +104,7 @@ onBeforeUnmount(() => {
     </view>
     <view
       class="container"
-        :style="{ height: !user.id ? '100%' : 'calc(100% - 62px)' }"
+      :style="{ height: !user.id ? 'calc(100% - 10px)' : 'calc(100% - 62px)' }"
     >
       <view class="content vip-content">
         <view class="title-bar">
@@ -114,16 +113,6 @@ onBeforeUnmount(() => {
         </view>
         <view :style="{ marginTop: '10rpx' }">
           <rich-text :nodes="richContent" />
-            <!-- <text
-              >射灵星球VIP服务，为全球弓箭手提供约战、段位评级、实时排位赛、智能教练点评等专属特权。会员可在酷帅的真实射箭运动中，同步享受在线竞技的乐趣，还能找到志同道合的伙伴，并获得新鲜的功能体验和持续升级的系统。
-            </text>
-            <text
-              >所有新注册用户，我们都会默认赠送6个月超长会员。到期之后可续费，单月10元，年度VIP100元。我们鼓励每一位弓箭手长期坚持练习这项运动，在对战的世界中尽情驰骋，不断挑战自我，创造属于自己的辉煌战绩。
-            </text>
-            <text
-              >VIP会员还将获得专属客服支持。当您在游戏中遇到任何问题，无论是技术故障、规则疑问还是其他需要帮助的情况，都可联系我们的VIP专属客服团队。他们将提供全年不间断的优质服务，确保您的对战体验不受影响。
-            </text>
-            <text>期待您的加入！</text> -->
         </view>
       </view>
       <view class="content">
@@ -158,7 +147,6 @@ onBeforeUnmount(() => {
       </view>
       <Signin :show="showModal" :onClose="() => (showModal = false)" />
     </view>
-    </view>
   </Container>
 </template>
 

src/pages/first-try.vue

@@ -260,7 +260,7 @@ const onClose = () => {
       />
       <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
     </view>
-    <view :style="{ marginBottom: '20px' }">
+    <template #bottom>
       <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">
         <BubbleTip v-if="showGuide" :type="step === 1 ? 'long' : 'short'">
           <text :style="{ transform: 'translateY(-18rpx)' }">{{
@@ -269,7 +269,7 @@ const onClose = () => {
         </BubbleTip>
         {{ stepButtonTexts[step] }}
       </SButton>
-    </view>
+    </template>
   </Container>
 </template>
 

src/pages/friend-battle.vue

@@ -82,7 +82,7 @@ onLoad(async (options) => {
 
 <template>
   <Container title="好友约战" :showBackToGame="true">
-    <view :style="{ width: '100%' }">
+    <view :style="{ width: '100%', height: '100%' }">
       <Guide>
         <view class="guide-tips">
           <text>约上朋友开几局，欢乐多，不寂寞</text>

src/pages/grade-intro.vue

@@ -28,7 +28,7 @@ const { user } = storeToRefs(store);
       </view>
 
       <!-- 说明文本 -->
-      <view class="content">
+      <view class="body">
         <view class="intro-text">
           在射灵世界中，等级是衡量您射箭技能的重要指标，而经验则是您提升等级的关键。具体的要求如下：
         </view>
@@ -68,8 +68,8 @@ const { user } = storeToRefs(store);
   height: 32rpx;
   display: flex;
   justify-content: center;
-  margin-top: 10px;
+  padding-top: 20rpx;
-  margin-bottom: 20px;
+  padding-bottom: 40rpx;
 }
 
 .progress-dot {
@@ -89,8 +89,8 @@ const { user } = storeToRefs(store);
   background-color: #fff9;
 }
 
-.content {
+.body {
-  height: calc(100% - 148rpx);
+  height: calc(100% - 146rpx);
   background-color: #ffffff;
   padding: 30rpx;
 }

src/pages/index.vue

@@ -252,6 +252,7 @@ onShareTimeline(() => {
 <style scoped>
 .container {
   width: 100%;
+  height: calc(100% - 120px);
 }
 
 .feature-grid {

src/pages/my-growth.vue

@@ -55,7 +55,7 @@ const onPractiseLoading = async (page) => {
 </script>
 
 <template>
-  <Container title="我的成长脚印" overflow="hidden">
+  <Container title="我的成长脚印" :scroll="false">
     <view class="tabs">
       <view
         v-for="(rankType, index) in ['排位赛', '好友约战', '个人练习']"

src/pages/point-book-create.vue

@@ -85,27 +85,6 @@ onMounted(async () => {
     title="选择参数"
   >
     <view class="container">
-      <!-- <view class="header">
-        <image
-          src="https://static.shelingxingqiu.com/attachment/2025-08-06/dbv8w5ak76hozbfpy2.png"
-          mode="widthFix"
-        />
-        <view>
-          <view>
-            <text>{{ days }}</text>
-            <text>天</text>
-          </view>
-          <text>训练天数</text>
-        </view>
-        <view>
-          <view>
-            <text>{{ arrows }}</text>
-            <text>箭</text>
-          </view>
-          <text>训练箭数</text>
-        </view>
-      </view> -->
-      <view>
       <EditOption
         :itemIndex="0"
         :expand="expandIndex === 0"
@@ -134,10 +113,9 @@ onMounted(async () => {
         :onSelect="onSelect"
       />
     </view>
-    </view>
+    <template #bottom>
-    <view :style="{ marginBottom: '20px' }">
       <SButton :rounded="50" :onClick="toEditPage">下一步</SButton>
-    </view>
+    </template>
   </Container>
 </template>
 

src/pages/point-book-edit.vue

@@ -197,11 +197,11 @@ onLoad((options) => {
         </view>
       </ScreenHint2>
     </view>
-    <view :style="{ marginBottom: '20px' }">
+    <template #bottom>
       <SButton :rounded="50" :onClick="onSubmit">
         {{ currentGroup === groups ? "保存并查看分析" : "下一组" }}
       </SButton>
-    </view>
+    </template>
   </Container>
 </template>
 

src/pages/point-book-rank.vue

@@ -78,7 +78,7 @@ const shareImage = async () => {
       <text>本周箭数</text>
       <text>消耗</text>
     </view>
-    <view class="data-list" :style="{ marginBottom: '20rpx' }" v-if="user.id">
+    <view class="data-list" :style="{ marginBottom: '20rpx' }" v-if="user.id && mine">
       <PointRankItem :data="mine" :borderWidth="0" />
     </view>
     <view

src/pages/point-book.vue

@@ -26,10 +26,7 @@ const store = useStore();
 const { updateUser } = store;
 const { user } = storeToRefs(store);
 
-const isIOS = computed(() => {
+const isIOS = uni.getDeviceInfo().osName === "ios";
-  const systemInfo = uni.getDeviceInfo();
-  return systemInfo.osName === "ios";
-});
 
 const loadImage = ref(false);
 const showModal = ref(false);
@@ -97,11 +94,6 @@ const closeHint = () => {
 };
 
 const loadData = async () => {
-  const result = await getPointBookRankListAPI(1);
-  list.value = result.list.slice(0, 3);
-  if (list.value.every((item) => item.id !== user.value.id)) {
-    list.value = [result.my, ...result.list.slice(0, 3)];
-  }
   const result2 = await getPointBookStatisticsAPI();
   data.value = result2;
   strength.value = Math.min(10, (5 / 60) * result2.todayTotalArrow);
@@ -173,6 +165,11 @@ watch(
 onShow(async () => {
   uni.removeStorageSync("point-book");
   if (user.value.id) loadData();
+  const result = await getPointBookRankListAPI(1);
+  list.value = result.list.slice(0, 3);
+  if (user.value.id && list.value.every((item) => item.id !== user.value.id)) {
+    list.value = [result.my, ...result.list.slice(0, 3)];
+  }
 });
 
 onMounted(async () => {

src/pages/practise-one.vue

@@ -105,10 +105,6 @@ onBeforeUnmount(() => {
   uni.$off("socket-inbox", onReceiveMessage);
   uni.$off("share-image", onClickShare);
   audioManager.stopAll();
-  if (timer.value) {
-    clearTimeout(timer.value);
-    timer.value = null;
-  }
 });
 </script>
 
@@ -159,9 +155,9 @@ onBeforeUnmount(() => {
         <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
       </block>
     </view>
-    <view :style="{ marginBottom: '20px' }">
+    <template #bottom>
       <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
-    </view>
+    </template>
   </Container>
 </template>
 

src/pages/practise-two.vue

@@ -150,9 +150,9 @@ onBeforeUnmount(() => {
         <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
       </block>
     </view>
-    <view :style="{ marginBottom: '20px' }">
+    <template #bottom>
       <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
-    </view>
+    </template>
   </Container>
 </template>
 

src/pages/practise.vue

@@ -29,7 +29,7 @@ onShow(async () => {
 
 <template>
   <Container title="个人练习">
-    <view :style="{ width: '100%' }">
+    <view :style="{ width: '100%', height: '100%' }">
       <Guide>
         <view class="guide-tips">
           <text>师傅领进门，修行靠自身，赶紧练起来吧。</text>