UI流程完善

src/pages/practise-two.vue

@@ -1,13 +1,42 @@
 <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 ScorePanel from "@/components/ScorePanel.vue";
+import ScoreResult from "@/components/ScoreResult.vue";
+const scores = ref(new Array(32).fill(9));
+const showScore = ref(false);
+
+setTimeout(() => {
+  showScore.value = true;
+}, 2000);
 </script>
 
 <template>
-  <view>
+  <view class="container">
     <AppBackground />
     <Header title="个人耐力挑战" />
+    <ShootProgress tips="请连续射箭36支" total="120" />
+    <BowTarget
+      totalRound="10"
+      currentRound="4"
+      avatar="../static/avatar.png"
+      power="45"
+    />
+    <ScorePanel :scores="scores" :total="36" :rowCount="9" />
+    <ScoreResult
+      :total="36"
+      :rowCount="9"
+      :show="showScore"
+      :onClose="() => (showScore = false)"
+    />
   </view>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  position: relative;
+}
+</style>