update：优化精准稳定

src/pages/training/components/ShootProgress.vue

@@ -73,11 +73,7 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-  energyPercent: {
-    type: Number,
-    default: 0,
-  },
-  energyReqPercent: {
+  energyCostPerSec: {
     type: Number,
     default: 0,
   },
@@ -187,17 +183,10 @@ const progressPercent = computed(() => {
   return Math.max(0, Math.min(100, (remain.value / props.total) * 100));
 });
 
-const stabilityEnergyPercent = computed(() =>
-  Math.max(0, Math.min(100, Number(props.energyPercent) || 0))
-);
-const stabilityEnergyReqPercent = computed(() =>
-  Math.max(0, Math.min(100, Number(props.energyReqPercent) || 0))
-);
-const stabilityEnergyReached = computed(
-  () =>
-    stabilityEnergyReqPercent.value > 0 &&
-    stabilityEnergyPercent.value >= stabilityEnergyReqPercent.value
-);
+const stabilityEnergyCostText = computed(() => {
+  const value = Math.max(0, Number(props.energyCostPerSec) || 0);
+  return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(2)));
+});
 
 const rhythmMarkerPercent = computed(() => {
   if (!validRhythmRoundTime.value) return 0;
@@ -568,22 +557,18 @@ onBeforeUnmount(() => {
     "
   >
     <template v-if="isStabilityTraining">
-      <text class="stability-progress__time">{{ remain }}秒</text>
-      <view class="stability-progress__track">
+      <text class="stability-progress__cost">
+        每秒失去{{ stabilityEnergyCostText }}点能量
+      </text>
+      <view v-if="countdownEnabled" class="stability-progress__countdown">
         <view
-          class="stability-progress__fill"
-          :class="{
-            'stability-progress__fill--reached': stabilityEnergyReached,
+          class="stability-progress__countdown-fill"
+          :style="{
+            width: `${progressPercent}%`,
+            transition: transitionStyle,
           }"
-          :style="{ width: `${stabilityEnergyPercent}%` }"
         />
-        <view
-          class="stability-progress__marker"
-          :style="{ left: `${stabilityEnergyReqPercent}%` }"
-        />
-        <text class="stability-progress__value">
-          {{ Math.round(stabilityEnergyPercent) }}%
-        </text>
+        <text class="stability-progress__countdown-text">剩余{{ remain }}秒</text>
       </view>
     </template>
     <template v-else-if="isRhythmTraining">
@@ -811,17 +796,17 @@ onBeforeUnmount(() => {
   margin: 32rpx 84rpx 0;
 }
 
-.stability-progress__time {
+.stability-progress__cost {
   display: block;
   margin-bottom: 20rpx;
   color: #ffffff;
-  font-size: 34rpx;
+  font-size: 32rpx;
   font-weight: 500;
-  line-height: 48rpx;
+  line-height: 44rpx;
   text-align: center;
 }
 
-.stability-progress__track {
+.stability-progress__countdown {
   position: relative;
   width: 100%;
   height: 24rpx;
@@ -830,38 +815,23 @@ onBeforeUnmount(() => {
   background: #444444;
 }
 
-.stability-progress__fill {
+.stability-progress__countdown-fill {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   border-radius: 18rpx;
-  background: linear-gradient(90deg, #87f1df 0%, #5ba8e8 100%);
-  transition: width 240ms linear, background 240ms ease;
+  background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
 }
 
-.stability-progress__fill--reached {
-  background: linear-gradient(90deg, #a5df62 0%, #61c787 100%);
-}
-
-.stability-progress__marker {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 2;
-  width: 4rpx;
-  transform: translateX(-2rpx);
-  background: rgba(26, 24, 22, 0.92);
-}
-
-.stability-progress__value {
+.stability-progress__countdown-text {
   position: absolute;
   inset: 0;
-  z-index: 3;
+  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #eefaff;
+  color: #fff7de;
   font-size: 18rpx;
   line-height: 24rpx;
   text-align: center;