细节调整

src/components/BowTarget.vue

@@ -100,13 +100,13 @@ watch(
   }
 );
 
-function calcRealX(num) {
+function calcRealX(num, offset = 12) {
   const len = 20.4 + num;
-  return `calc(${(len / 40.8) * 100}% - 6px)`;
+  return `calc(${(len / 40.8) * 100}% - ${offset / 2}px)`;
 }
-function calcRealY(num) {
+function calcRealY(num, offset = 12) {
   const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
-  return `calc(${(len / 40.8) * 100}% - 6px)`;
+  return `calc(${(len / 40.8) * 100}% - ${offset / 2}px)`;
 }
 const simulShoot = async () => {
   if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
@@ -129,18 +129,30 @@ const simulShoot2 = async () => {
     <view class="target">
       <view
         v-if="scores.length && showRoundTips && showLatestArrow && showE"
-        class="e-value fade-in"
+        class="e-value fade-in-out"
+        :style="{
+          left: calcRealX(scores[scores.length - 1].x, 66),
+          top: calcRealY(scores[scores.length - 1].y, 150),
+        }"
       >
         经验 +1
       </view>
       <view
         v-if="scores.length && showRoundTips && showLatestArrow"
-        class="round-tip fade-in"
+        class="round-tip fade-in-out"
+        :style="{
+          left: calcRealX(scores[scores.length - 1].x, 70),
+          top: calcRealY(scores[scores.length - 1].y, 100),
+        }"
         >{{ scores[scores.length - 1].ring }}<text>环</text></view
       >
       <view
         v-if="blueScores.length && showRoundTips && showLatestArrow"
-        class="round-tip fade-in"
+        class="round-tip fade-in-out"
+        :style="{
+          left: calcRealX(scores[scores.length - 1].x, 70),
+          top: calcRealY(scores[scores.length - 1].y, 100),
+        }"
         >{{ blueScores[blueScores.length - 1].ring }}<text>环</text></view
       >
       <block v-for="(bow, index) in scores" :key="index">
@@ -164,38 +176,8 @@ const simulShoot2 = async () => {
           }"
           >{{ bow.ring }}</view
         >
-        <!-- <image
-          v-if="bow.ring > 0"
-          :src="
-            index === scores.length - 1 &&
-            !blueScores.length &&
-            showLatestArrow &&
-            mode !== 'team'
-              ? '../static/hit-icon-green.png'
-              : '../static/hit-icon.png'
-          "
-          :class="`hit ${
-            index === scores.length - 1 && !blueScores.length && showLatestArrow
-              ? 'pump-in'
-              : ''
-          }`"
-          :style="{
-            left: calcRealX(bow.x),
-            top: calcRealY(bow.y),
-          }"
-        /> -->
       </block>
       <block v-for="(bow, index) in blueScores" :key="index">
-        <!-- <image
-          v-if="bow.ring > 0"
-          src="../static/hit-icon-blue.png"
-          class="hit"
-          :class="`hit ${blueScores.length === 1 ? 'pump-in' : ''}`"
-          :style="{
-            left: calcRealX(bow.x),
-            top: calcRealY(bow.y),
-          }"
-        /> -->
         <view
           v-if="bow.ring > 0"
           :class="`hit ${
@@ -239,23 +221,27 @@ const simulShoot2 = async () => {
 }
 .e-value {
   position: absolute;
-  top: 30%;
-  left: 60%;
+  /* top: 30%;
+  left: 60%; */
   background-color: #0006;
   color: #fff;
   font-size: 12px;
   padding: 4px 7px;
   border-radius: 5px;
   z-index: 2;
+  width: 50px;
+  text-align: center;
 }
 .round-tip {
   position: absolute;
-  top: 38%;
-  left: 60%;
+  /* top: 38%; */
+  /* left: 60%; */
   color: #fff;
   font-size: 30px;
   font-weight: bold;
   z-index: 2;
+  width: 70px;
+  text-align: center;
 }
 .round-tip > text {
   font-size: 24px;