update: 优化个人训练

src/pages/training/components/TrainingDifficultyBadge.vue

@@ -15,6 +15,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showUnlockProgress: {
+    type: Boolean,
+    default: false,
+  },
   completedProgress: {
     type: Number,
     default: 0,
@@ -106,6 +110,15 @@ const handleClick = () => {
         <view class="difficulty-badge__label">{{ node.label }}</view>
       </view>
     </view>
+    <view
+      v-if="showUnlockProgress"
+      class="difficulty-badge__unlock-progress"
+    >
+      <view
+        class="difficulty-badge__unlock-progress-completed"
+        :style="{ width: `${progressValue}%` }"
+      ></view>
+    </view>
   </view>
 </template>
 
@@ -315,6 +328,25 @@ const handleClick = () => {
   overflow: hidden;
 }
 
+.difficulty-badge__unlock-progress {
+  position: absolute;
+  top: calc(100% + 30rpx);
+  left: 50%;
+  width: 120rpx;
+  height: 10rpx;
+  overflow: hidden;
+  border-radius: 6rpx;
+  background: rgba(0, 0, 0, 0.6);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.difficulty-badge__unlock-progress-completed {
+  height: 100%;
+  border-radius: 6rpx;
+  background: rgba(255, 217, 71, 1);
+}
+
 @keyframes badge-orbit-spin {
   from {
     transform: translate(-50%, -50%) rotate(0deg);