UI完善

src/components/BowTarget.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, watch } from "vue";
 import BowPower from "@/components/BowPower.vue";
 const props = defineProps({
   totalRound: {
@@ -31,6 +32,23 @@ const props = defineProps({
   },
 });
 
+const showRoundTips = ref(false);
+
+watch(
+  () => props.scores,
+  (newVal) => {
+    if (newVal.length > 0) {
+      showRoundTips.value = true;
+      setTimeout(() => {
+        showRoundTips.value = false;
+      }, 2000);
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
 function calcRealX(num) {
   const len = 20 + num;
   return `calc(${(len / 40) * 100}% - 10px)`;
@@ -50,9 +68,15 @@ function calcRealY(num) {
         "/" +
         totalRound
       }}</text>
-      <BowPower :power="power" />
+      <BowPower v-if="power > 0" :power="power" />
     </view>
     <view class="target">
+      <view v-if="scores.length && showRoundTips" class="e-value fade-in"
+        >经验 +1</view
+      >
+      <view v-if="scores.length && showRoundTips" class="round-tip fade-in"
+        >{{ scores[scores.length - 1].ring }}<text>环</text></view
+      >
       <image
         v-for="(bow, index) in scores"
         :key="index"
@@ -81,6 +105,28 @@ function calcRealY(num) {
 .target {
   position: relative;
 }
+.e-value {
+  position: absolute;
+  top: 30%;
+  left: 60%;
+  background-color: #0006;
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 7px;
+  border-radius: 5px;
+}
+.round-tip {
+  position: absolute;
+  top: 38%;
+  left: 60%;
+  color: #fff;
+  font-size: 30px;
+  font-weight: bold;
+}
+.round-tip > text {
+  font-size: 18px;
+  margin-left: 5px;
+}
 .target > image:last-child {
   width: 100%;
 }