页面布局优化

src/components/Container.vue

@@ -21,9 +21,9 @@ const props = defineProps({
     type: Function,
     default: null,
   },
-  overflow: {
-    type: String,
-    default: "auto",
+  scroll: {
+    type: Boolean,
+    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
-      class="content"
+    <scroll-view
+      :scroll-y="scroll"
+      :enhanced="true"
+      :bounces="false"
+      :show-scrollbar="false"
       :style="{
-        height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px)`,
-        overflow,
+        height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px - ${
+          $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;