优化AI生成课图片配音进度条样式

src/components/study/SelfDirectedLearning.vue

@@ -111,18 +111,19 @@
                 <div class="progress-step" v-for="(step, index) in visibleProgressSteps" :key="index" :style="{ animationDelay: `${index * 0.2}s` }">
                   <div class="step-header">
                     <span class="step-text">{{ step.text }}</span>
+                    <!-- 进度条显示在文字和状态图标之间 -->
+                    <div class="step-progress" v-if="(index === 2 || index === 3) && step.visible">
+                      <div class="progress-bar">
+                        <div class="progress-fill" :style="{ width: `${step.progress}%` }"></div>
+                      </div>
+                      <span class="progress-text">{{ step.progress }}%</span>
+                    </div>
                     <span class="step-status" :class="{ 'completed': step.completed, 'active': step.active }">
                       <span v-if="step.completed" class="checkmark">✓</span>
                       <span v-else-if="step.active" class="loading-dot"></span>
                       <span v-else class="step-placeholder"></span>
                     </span>
                   </div>
-                  <div class="step-progress" v-if="(index === 2 || index === 3) && step.visible">
-                    <div class="progress-bar">
-                      <div class="progress-fill" :style="{ width: `${step.progress}%` }"></div>
-                    </div>
-                    <span class="progress-text">{{ step.progress }}%</span>
-                  </div>
                 </div>
               </div>
             </div>
@@ -2241,10 +2242,13 @@ onUnmounted(() => {
   padding: rpx(1) 0;
   transition: all 0.3s ease;
   margin-bottom: rpx(2);
+  gap: rpx(8);
 }
 
 .step-text {
-  flex: 1;
+  flex: 0 0 auto;
+  min-width: rpx(80);
+  max-width: rpx(150);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2252,13 +2256,14 @@ onUnmounted(() => {
 }
 
 .step-status {
+  flex: 0 0 auto;
   width: rpx(8);
   height: rpx(8);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  margin-left: rpx(10);
+  margin-left: auto;
   transition: all 0.3s ease;
 }
 
@@ -2297,12 +2302,14 @@ onUnmounted(() => {
 }
 
 .step-progress {
-  margin-top: rpx(2);
-  margin-left: rpx(20);
+  display: flex;
+  align-items: center;
+  gap: rpx(5);
+  flex: 1;
 }
 
 .progress-bar {
-  width: 100%;
+  flex: 1;
   height: rpx(3);
   background-color: rgba(167, 164, 237, 0.2);
   border-radius: rpx(2);
@@ -2317,10 +2324,10 @@ onUnmounted(() => {
 }
 
 .progress-text {
-  display: block;
+  flex: 0 0 auto;
   font-size: rpx(6);
   color: #666;
+  min-width: rpx(30);
   text-align: right;
-  margin-top: rpx(1);
 }
 </style>