靶点优化

src/components/BowTarget.vue

@@ -102,11 +102,11 @@ watch(
 
 function calcRealX(num) {
   const len = 20.4 + num;
-  return `calc(${(len / 40.8) * 100}% - 8px)`;
+  return `calc(${(len / 40.8) * 100}% - 6px)`;
 }
 function calcRealY(num) {
   const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
-  return `calc(${(len / 40.8) * 100}% - 8px)`;
+  return `calc(${(len / 40.8) * 100}% - 6px)`;
 }
 const simulShoot = async () => {
   if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
@@ -144,7 +144,27 @@ const simulShoot2 = async () => {
         >{{ blueScores[blueScores.length - 1].ring }}<text>环</text></view
       >
       <block v-for="(bow, index) in scores" :key="index">
-        <image
+        <view
+          v-if="bow.ring > 0"
+          :class="`hit ${
+            index === scores.length - 1 && !blueScores.length && showLatestArrow
+              ? 'pump-in'
+              : ''
+          }`"
+          :style="{
+            left: calcRealX(bow.x),
+            top: calcRealY(bow.y),
+            backgroundColor:
+              index === scores.length - 1 &&
+              !blueScores.length &&
+              showLatestArrow &&
+              mode !== 'team'
+                ? 'green'
+                : 'red',
+          }"
+          >{{ bow.ring }}</view
+        >
+        <!-- <image
           v-if="bow.ring > 0"
           :src="
             index === scores.length - 1 &&
@@ -163,10 +183,10 @@ const simulShoot2 = async () => {
             left: calcRealX(bow.x),
             top: calcRealY(bow.y),
           }"
-        />
+        /> -->
       </block>
       <block v-for="(bow, index) in blueScores" :key="index">
-        <image
+        <!-- <image
           v-if="bow.ring > 0"
           src="../static/hit-icon-blue.png"
           class="hit"
@@ -175,7 +195,21 @@ const simulShoot2 = async () => {
             left: calcRealX(bow.x),
             top: calcRealY(bow.y),
           }"
-        />
+        /> -->
+        <view
+          v-if="bow.ring > 0"
+          :class="`hit ${
+            index === scores.length - 1 && !blueScores.length && showLatestArrow
+              ? 'pump-in'
+              : ''
+          }`"
+          :style="{
+            left: calcRealX(bow.x),
+            top: calcRealY(bow.y),
+            backgroundColor: 'blue',
+          }"
+          >{{ bow.ring }}</view
+        >
       </block>
       <image src="../static/bow-target.png" mode="widthFix" />
     </view>
@@ -198,7 +232,7 @@ const simulShoot2 = async () => {
 }
 .target {
   position: relative;
-  padding: 10px;
+  margin: 10px;
 }
 .e-value {
   position: absolute;
@@ -229,9 +263,17 @@ const simulShoot2 = async () => {
 }
 .hit {
   position: absolute;
-  width: 16px;
-  height: 16px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 1px solid #fff;
   z-index: 1;
+  color: #fff;
+  font-size: 8px;
+  text-align: center;
+  line-height: 12px;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
 }
 .header {
   width: 100%;