细节调整

2025-07-10 19:55:30 +08:00
parent 7972dae398
commit e764160633
10 changed files with 63 additions and 71 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -74,19 +74,25 @@ button::after {
  color: #fed847;
 }

-@keyframes fadeIn {
-  from {
+@keyframes fadeInOut {
+  0% {
    transform: translateY(20px);
    opacity: 0;
  }
-  to {
+  30% {
    transform: translateY(0);
    opacity: 1;
  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }

-.fade-in {
-  animation: fadeIn 0.3s ease forwards;
+.fade-in-out {
+  animation: fadeInOut 1s ease forwards;
 }

@keyframes fadeOut {
--- a/src/components/BowTarget.vue
+++ b/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;
--- a/src/components/ScorePanel.vue
+++ b/src/components/ScorePanel.vue
@@ -111,6 +111,7 @@ onUnmounted(() => {
 }
 .score-item > text {
  position: relative;
+  font-weight: bold;
 }
 .complete-light {
  position: absolute;
--- a/src/components/ScoreResult.vue
+++ b/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">
-          {{ score.ring }}<text>环</text>
+        <view v-for="(_, index) in new Array(total).fill(0)" :key="index">
+          {{ 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);
--- a/src/pages/battle-room.vue
+++ b/src/pages/battle-room.vue
@@ -267,10 +267,12 @@ async function onReceiveMessage(messages = []) {
        }
      }
      if (msg.constructor === MESSAGETYPES.FinalShoot) {
+        if (!isFinalShoot.value) {
          isFinalShoot.value = true;
          showRoundTip.value = true;
          tips.value = "准备开始决金箭";
        }
+      }
      if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
        startCount.value = false;
        halfTimeTip.value = true;
--- a/src/pages/melee-match.vue
+++ b/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">
-            退出比赛
-          </SButton>
+          <view class="modal" :style="{ color: '#fff9' }"
+            >排位赛进行过程无法退出</view
+          >
        </view>
      </SModal>
    </view>
--- a/src/pages/practise-two.vue
+++ b/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">
--- a/src/pages/rank-list.vue
+++ b/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',
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -221,7 +221,7 @@ const toRankListPage = () => {
        <view>
          <view
            v-for="(rankType, index) in [
-              '积分表',
+              '积分榜',
              'MVP榜',
              '十环榜',
              '最牛省份',
--- a/src/pages/team-match.vue
+++ b/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) {
+      if (!isFinalShoot.value) {
        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">
-          <SButton :onClick="exitRoom" width="200px" :rounded="20">
-            退出比赛
-          </SButton>
-        </view>
+        <view class="modal" :style="{ color: '#fff9' }"
+          >排位赛进行过程无法退出</view
+        >
      </SModal>
    </view>
    <view :style="{ marginBottom: '20px' }">