UI流程完善

src/pages/practise-one.vue

@@ -1,13 +1,34 @@
 <script setup>
+import { ref } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScorePanel2 from "@/components/ScorePanel2.vue";
+const showScore = ref(false);
+
+setTimeout(() => {
+  showScore.value = true;
+}, 2000);
 </script>
 
 <template>
-  <view>
-    <AppBackground />
+  <view class="container">
+    <AppBackground type="1" />
     <Header title="个人单组练习" />
+    <ShootProgress tips="请连续射箭36支" total="120" />
+    <BowTarget
+      totalRound="10"
+      currentRound="4"
+      avatar="../static/avatar.png"
+      power="45"
+    />
+    <ScorePanel2 :scores="[1, 2, 3, 4, 5, 6]" />
   </view>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  position: relative;
+}
+</style>