shoot-miniprograms/src/pages/practise-two.vue

<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 class="container">
    <AppBackground type="1" />
    <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>
.container {
  position: relative;
}
</style>