细节调整

src/App.vue

@@ -74,19 +74,25 @@ button::after {
   color: #fed847;
 }
 
-@keyframes fadeIn {
+@keyframes fadeInOut {
-  from {
+  0% {
     transform: translateY(20px);
     opacity: 0;
   }
-  to {
+  30% {
     transform: translateY(0);
     opacity: 1;
   }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
-.fade-in {
+.fade-in-out {
-  animation: fadeIn 0.3s ease forwards;
+  animation: fadeInOut 1s ease forwards;
 }
 
 @keyframes fadeOut {

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%;
+  /* top: 30%;
-  left: 60%;
+  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%;
+  /* top: 38%; */
-  left: 60%;
+  /* left: 60%; */
   color: #fff;
   font-size: 30px;
   font-weight: bold;
   z-index: 2;
+  width: 70px;
+  text-align: center;
 }
 .round-tip > text {
   font-size: 24px;

src/components/ScorePanel.vue

@@ -111,6 +111,7 @@ onUnmounted(() => {
 }
 .score-item > text {
   position: relative;
+  font-weight: bold;
 }
 .complete-light {
   position: absolute;

src/components/ScoreResult.vue

@@ -81,8 +81,9 @@ onMounted(() => {
         </button>
       </view>
       <view :style="{ gridTemplateColumns: `repeat(${rowCount}, 1fr)` }">
-        <view v-for="(score, index) in result.arrows" :key="index">
+        <view v-for="(_, index) in new Array(total).fill(0)" :key="index">
-          {{ score.ring }}<text>环</text>
+          {{ result.arrows[index] ? result.arrows[index].ring : 0
+          }}<text>环</text>
         </view>
       </view>
       <view>
@@ -201,7 +202,8 @@ onMounted(() => {
   row-gap: 10px;
   column-gap: 5px;
   justify-content: flex-start;
-  margin: 10px 0;
+  margin-top: 10px;
+  margin-bottom: 15px;
 }
 .container-content > view:nth-child(2) > view {
   background: linear-gradient(#fbfbfb, #f5f5f5);

src/pages/battle-room.vue

@@ -267,9 +267,11 @@ async function onReceiveMessage(messages = []) {
         }
       }
       if (msg.constructor === MESSAGETYPES.FinalShoot) {
-        isFinalShoot.value = true;
+        if (!isFinalShoot.value) {
-        showRoundTip.value = true;
+          isFinalShoot.value = true;
-        tips.value = "准备开始决金箭";
+          showRoundTip.value = true;
+          tips.value = "准备开始决金箭";
+        }
       }
       if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
         startCount.value = false;

src/pages/melee-match.vue

@@ -148,9 +148,6 @@ const onBack = () => {
     uni.navigateBack();
   }
 };
-const exitRoom = async () => {
-  uni.navigateBack();
-};
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
@@ -224,9 +221,9 @@ onUnmounted(() => {
       </block>
       <SModal :show="showModal" :onClose="() => (showModal = false)">
         <view class="modal">
-          <SButton :onClick="exitRoom" width="200px" :rounded="20">
+          <view class="modal" :style="{ color: '#fff9' }"
-            退出比赛
+            >排位赛进行过程无法退出</view
-          </SButton>
+          >
         </view>
       </SModal>
     </view>

src/pages/practise-two.vue

@@ -84,7 +84,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Container :bgType="1" title="个人单组练习">
+  <Container :bgType="1" title="日常耐力挑战">
     <view>
       <TestDistance v-if="!start && !practiseResult.arrows" />
       <block v-if="start || practiseResult.arrows">

src/pages/rank-list.vue

@@ -62,7 +62,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
     <image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
     <view class="rank-tabs">
       <view
-        v-for="(rankType, index) in ['积分表', 'MVP榜', '十环榜']"
+        v-for="(rankType, index) in ['积分榜', 'MVP榜', '十环榜']"
         :key="index"
         :style="{
           fontSize: index === selectedIndex ? '16px' : '14px',

src/pages/ranking.vue

@@ -221,7 +221,7 @@ const toRankListPage = () => {
         <view>
           <view
             v-for="(rankType, index) in [
-              '积分表',
+              '积分榜',
               'MVP榜',
               '十环榜',
               '最牛省份',

src/pages/team-match.vue

@@ -157,8 +157,11 @@ async function onReceiveMessage(messages = []) {
       if (result.currentRound < 5) showRoundTip.value = true;
     }
     if (msg.constructor === MESSAGETYPES.FinalShoot) {
-      isFinalShoot.value = true;
+      if (!isFinalShoot.value) {
-      showRoundTip.value = true;
+        isFinalShoot.value = true;
+        showRoundTip.value = true;
+        tips.value = "准备开始决金箭";
+      }
     }
     if (msg.constructor === MESSAGETYPES.MatchOver) {
       uni.redirectTo({
@@ -174,9 +177,6 @@ const onBack = () => {
     uni.navigateBack();
   }
 };
-const exitRoom = async () => {
-  uni.navigateBack();
-};
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
@@ -249,11 +249,9 @@ onUnmounted(() => {
         />
       </block>
       <SModal :show="showModal" :onClose="() => (showModal = false)">
-        <view class="modal">
+        <view class="modal" :style="{ color: '#fff9' }"
-          <SButton :onClick="exitRoom" width="200px" :rounded="20">
+          >排位赛进行过程无法退出</view
-            退出比赛
+        >
-          </SButton>
-        </view>
       </SModal>
     </view>
     <view :style="{ marginBottom: '20px' }">