完成单组练习接口调试

src/components/BowTarget.vue

@@ -1,6 +1,6 @@
 <script setup>
 import BowPower from "@/components/BowPower.vue";
-defineProps({
+const props = defineProps({
   totalRound: {
     type: Number,
     default: 0,
@@ -25,7 +25,20 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
 });
+
+function calcRealX(num) {
+  const len = 20 + num;
+  return `calc(${(len / 40) * 100}% - 10px)`;
+}
+function calcRealY(num) {
+  const len = num < 0 ? Math.abs(num) + 20 : 20 - num;
+  return `calc(${(len / 40) * 100}% - 10px)`;
+}
 </script>
 
 <template>
@@ -37,7 +50,19 @@ defineProps({
       }}</text>
       <BowPower v-if="power > 0" :power="power" />
     </view>
-    <image src="../static/bow-target.png" mode="widthFix" />
+    <view class="target">
+      <image
+        v-for="(bow, index) in scores"
+        :key="index"
+        src="../static/hit-icon.png"
+        :class="`hit ${index + 1 === scores.length ? 'pump-in' : ''}`"
+        :style="{
+          left: calcRealX(bow.x),
+          top: calcRealY(bow.y),
+        }"
+      />
+      <image src="../static/bow-target.png" mode="widthFix" />
+    </view>
     <view v-if="avatar" class="footer">
       <image :src="avatar" mode="widthFix" />
     </view>
@@ -50,9 +75,29 @@ defineProps({
   width: calc(100% - 30px);
   margin: 15px;
 }
-.container > image {
+.target {
+  position: relative;
+}
+.target > image:last-child {
   width: 100%;
 }
+@keyframes pumpIn {
+  from {
+    transform: scale(2);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+.pump-in {
+  animation: pumpIn 0.3s ease-out forwards;
+  transform-origin: center center;
+}
+.hit {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
 .header {
   width: 100%;
   display: flex;