feat: 中期拍摄部分完成

src/components/ProgressBar/ProgressBar.vue

@@ -23,8 +23,11 @@
           class="step-item"
           :class="getStepStatus(index)"
         >
-          <span class="step-text">{{ step.name }}</span>
-          <div class="step-dots">•••••</div>
+          <span class="step-text">
+            <img :src="step.name" alt="" />
+            <img :src="step.icon" alt="" />
+            <img class="step-ellipsis" src="@/assets/images/midterm/进度装饰（未完成.png" alt="" />
+          </span>
         </div>
       </div>
       <div class="absolute top-0 left-40" v-else>
@@ -89,10 +92,18 @@ const handleComplete = () => {
 
 // 步骤配置
 const steps = [
-  { name: '前期准备', icon: '📋' },
-  { name: '中期拍摄', icon: '📹' },
-  { name: '后期剪辑', icon: '🎬' },
-  { name: '即可开启实战', icon: '⚡' }
+  {
+    name: '/src/assets/images/midterm/前期准备.png',
+    icon: '/src/assets/images/midterm/准备图标.png'
+  },
+  {
+    name: '/src/assets/images/midterm/中期拍摄.png',
+    icon: '/src/assets/images/midterm/拍摄图标.png'
+  },
+  {
+    name: '/src/assets/images/midterm/后期剪辑.png',
+    icon: '/src/assets/images/midterm/剪辑图标.png'
+  }
 ]
 
 // 获取步骤状态
@@ -142,6 +153,7 @@ const getStepStatus = (stepIndex: number) => {
 }
 
 .step-item {
+  padding-left: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -150,12 +162,19 @@ const getStepStatus = (stepIndex: number) => {
 }
 
 .step-text {
-  font-size: 26px;
+  /* font-size: 40px; */
   color: white;
   font-weight: bold;
   text-align: center;
   white-space: nowrap;
   text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.step-ellipsis {
+  padding-left: 17px;
 }
 
 .step-dots {