UI细节调整

src/components/BowTarget.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch } from "vue";
 import BowPower from "@/components/BowPower.vue";
+import StartCountdown from "@/components/StartCountdown.vue";
 import { simulShootAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -28,10 +29,6 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  debug: {
-    type: Boolean,
-    default: false,
-  },
   scores: {
     type: Array,
     default: () => [],
@@ -52,12 +49,29 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  start: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const showRoundTips = ref(false);
+const startCount = ref(false);
 const prevLength = ref(0);
 const timer = ref(null);
 
+watch(
+  () => props.start,
+  (newVal) => {
+    if (newVal) {
+      startCount.value = true;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
 watch(
   () => props.scores,
   (newVal) => {
@@ -90,8 +104,7 @@ const simulShoot = async () => {
 
 <template>
   <view class="container">
-    <view class="header" v-if="debug || totalRound > 0 || power">
-      <text v-if="debug" class="header-tips">大人，请射箭</text>
+    <view class="header" v-if="totalRound > 0 || power">
       <text v-if="totalRound > 0" class="round-count">{{
         (currentRound > totalRound ? totalRound : currentRound) +
         "/" +
@@ -150,6 +163,7 @@ const simulShoot = async () => {
     <view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
       模拟射箭
     </view>
+    <StartCountdown :start="startCount" />
   </view>
 </template>
 
@@ -162,7 +176,7 @@ const simulShoot = async () => {
 }
 .target {
   position: relative;
-  padding: 5px;
+  padding: 10px;
 }
 .e-value {
   position: absolute;
@@ -212,10 +226,6 @@ const simulShoot = async () => {
   color: #fed847;
   top: 75px;
 }
-.header-tips {
-  font-size: 20px;
-  color: #fed847;
-}
 .footer {
   width: calc(100% - 20px);
   padding: 0 10px;