UI优化

src/components/BowTarget.vue

@@ -1,6 +1,12 @@
 <script setup>
 import { ref, watch } from "vue";
 import BowPower from "@/components/BowPower.vue";
+import { simulShootAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { device } = storeToRefs(store);
+
 const props = defineProps({
   totalRound: {
     type: Number,
@@ -38,6 +44,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  start: {
+    type: Boolean,
+    default: false,
+  },
   showE: {
     type: Boolean,
     default: true,
@@ -73,6 +83,9 @@ function calcRealY(num) {
   const len = num < 0 ? Math.abs(num) + 20 : 20 - num;
   return `calc(${(len / 40) * 100}% - 10px)`;
 }
+const simulShoot = async () => {
+  if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
+};
 </script>
 
 <template>
@@ -90,8 +103,9 @@ function calcRealY(num) {
       <view
         v-if="scores.length && showRoundTips && showLatestArrow && showE"
         class="e-value fade-in"
-        >经验 +1</view
       >
+        经验 +1
+      </view>
       <view
         v-if="scores.length && showRoundTips && showLatestArrow"
         class="round-tip fade-in"
@@ -133,6 +147,9 @@ function calcRealY(num) {
       <image :src="avatar" mode="widthFix" />
     </view>
     <text v-if="tips">{{ tips }}</text>
+    <view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
+      模拟射箭
+    </view>
   </view>
 </template>
 
@@ -141,9 +158,11 @@ function calcRealY(num) {
   width: calc(100% - 30px);
   padding: 15px;
   /* overflow: hidden; */
+  position: relative;
 }
 .target {
   position: relative;
+  padding: 5px;
 }
 .e-value {
   position: absolute;
@@ -166,7 +185,7 @@ function calcRealY(num) {
   z-index: 2;
 }
 .round-tip > text {
-  font-size: 18px;
+  font-size: 24px;
   margin-left: 5px;
 }
 .target > image:last-child {
@@ -217,4 +236,11 @@ function calcRealY(num) {
   display: block;
   margin-top: 20px;
 }
+.simul {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  color: #fff;
+  margin-left: 20px;
+}
 </style>