添加全局容器组件

src/components/Container.vue

@@ -0,0 +1,32 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+import Header from "@/components/Header.vue";
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  bgType: {
+    type: String,
+    default: 0,
+  },
+});
+</script>
+
+<template>
+  <view>
+    <AppBackground :bgType="bgType" />
+    <Header :title="title" />
+    <view class="content">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.content {
+  width: 100%;
+  height: calc(100vh - 96px);
+  overflow: auto;
+}
+</style>

src/pages/equipment-debug.vue

@@ -1,15 +1,12 @@
 <script setup>
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import Button from "@/components/SButton.vue";
+import Container from "@/components/Container.vue";
 </script>
 
 <template>
-  <view class="container">
+  <Container bgType="1" title="弓箭调试">
-    <AppBackground type="1" />
-    <Header title="弓箭调试" />
     <Guide>
       <view class="guide-tips">
         <text>请预先射几箭测试</text>
@@ -24,20 +21,7 @@ import Button from "@/components/SButton.vue";
     <view>
       <Button>准备好了直接开始</Button>
     </view>
-  </view>
+  </Container>
 </template>
 
-<style scoped>
+<style scoped></style>
-.container {
-  position: relative;
-  height: 100vh;
-}
-.container > view:last-child {
-  position: absolute;
-  width: 100%;
-  bottom: 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-</style>

src/pages/first-try.vue

@@ -1,7 +1,5 @@
 <script setup>
 import { ref } from "vue";
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import Swiper from "@/components/Swiper.vue";
@@ -9,6 +7,7 @@ import BowTarget from "@/components/BowTarget.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import ScoreResult from "@/components/ScoreResult.vue";
 import ScorePanel from "@/components/ScorePanel.vue";
+import Container from "@/components/Container.vue";
 const scores = ref(new Array(10).fill(9));
 const step = ref(0);
 const stepButtonTexts = [
@@ -47,9 +46,7 @@ const onClose = () => {
 </script>
 
 <template>
-  <view>
+  <Container bgType="1" title="新手试炼场">
-    <AppBackground type="1" />
-    <Header title="新手试炼场" />
     <Guide v-if="step !== 4" :tall="step === 2 || step === 5">
       <text v-if="step === 0">
         hi，<text :style="{ color: '#fed847' }">Rocker</text>
@@ -131,7 +128,7 @@ const onClose = () => {
     <SButton v-if="step !== 4" :onClick="nextStep">{{
       stepButtonTexts[step]
     }}</SButton>
-  </view>
+  </Container>
 </template>
 
 <style scoped>

src/pages/ranking.vue

@@ -1,6 +1,5 @@
 <script setup>
-import AppBackground from "@/components/AppBackground.vue";
+import Container from "@/components/Container.vue";
-import Header from "@/components/Header.vue";
 import { ref } from "vue";
 
 const selectedIndex = ref(0);
@@ -17,10 +16,8 @@ const toMatchPage = () => {
 </script>
 
 <template>
-  <view class="container">
+  <Container title="排行赛"
-    <AppBackground />
+    ><view class="ranking-my-data">
-    <Header title="排行赛" />
-    <view class="ranking-my-data">
       <view>
         <view class="user-info">
           <view class="avatar" @click="toUserPage">
@@ -120,13 +117,10 @@ const toMatchPage = () => {
         <text>8850<text>分</text></text>
       </view>
     </view>
-  </view>
+  </Container>
 </template>
 
 <style scoped>
-.container {
-  padding-bottom: 15px;
-}
 .ranking-my-data,
 .ranking-data {
   display: flex;