添加全局容器组件

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>
-    <AppBackground type="1" />
-    <Header title="新手试炼场" />
+  <Container bgType="1" 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>