From 1bee8f0d325083d61080bead596b885aa3fa82df Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Fri, 9 Oct 2026 09:56:45 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=A4=8D=E5=88=BB=E6=89=81=E5=B9=B3?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E5=B9=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8F=8D=E6=80=9D=E9=A2=98=E5=BA=8F=E5=8F=B7=E5=BE=BD=E7=AB=A0?=
 =?UTF-8?q?=20-=20=E5=A4=8D=E5=88=BB=20new-product-survey.vue=20=E7=9A=84?=
 =?UTF-8?q?=E6=89=81=E5=B9=B3=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E4=BB=BB=E5=8A=A1=E6=A0=8F=E7=99=BD=E5=8D=A1?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=20-=20=E4=B8=BA=E4=BA=A7=E5=93=81=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E6=B5=81=E7=A8=8B=E7=AC=AC4=E6=AD=A5=E5=8F=8D?=
 =?UTF-8?q?=E6=80=9D=E9=A2=98=E6=B7=BB=E5=8A=A0=E5=B8=A6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=9A=84=E5=BA=8F=E5=8F=B7=E5=BE=BD=E7=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../product-development-process.vue           | 24 ++++++++++++++++---
 src/views/training/GenericTrainingPage.vue    | 15 ++++++------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/views/foundation/product-development-process.vue b/src/views/foundation/product-development-process.vue
index 0403336..1a0e308 100644
--- a/src/views/foundation/product-development-process.vue
+++ b/src/views/foundation/product-development-process.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
     <div class="product-process student-training-shell">
         <main class="process-core">
             <section class="task-header">
@@ -173,12 +173,12 @@
                         <p v-if="!stepThreePassed" class="step-warning">请先上传并保存第 3 步甘特图，再完成本步复盘。</p>
                         <section class="process-reflection" :class="{ disabled: !stepThreePassed }">
                             <label class="reflection-field">
-                                <span>（1）观察甘特图，思考电商运营在产品开发过程中，可以提前介入同步完成哪些工作，以缩短运营周期、提高效率。（如“预热蓄水”“内容种草”等）</span>
+                                <span><b class="reflection-no">01</b>观察甘特图，思考电商运营在产品开发过程中，可以提前介入同步完成哪些工作，以缩短运营周期、提高效率。（如“预热蓄水”“内容种草”等）</span>
                                 <textarea v-model.trim="stepFourForm.parallelWorkAnalysis"
                                     :disabled="!stepThreePassed || checking"
                                     placeholder="请结合甘特图说明可同步推进的电商运营工作、介入节点及预期效率提升"></textarea>
                             </label>
-                            <div class="reflection-question">（2）在互联网产品开发管理中，你认为哪些环节可以借助AI工具提升效率？请列举至少2个具体应用场景。</div>
+                            <div class="reflection-question"><b class="reflection-no">02</b>在互联网产品开发管理中，你认为哪些环节可以借助AI工具提升效率？请列举至少2个具体应用场景。</div>
                             <div class="scenario-grid">
                                 <label class="reflection-field"><span>场景1：</span><textarea
                                         v-model.trim="stepFourForm.aiScenarioOne"
@@ -1505,6 +1505,24 @@ tr.is-incorrect .classification-feedback {
     line-height: 1.6;
 }
 
+/* 第 4 步序号徽章：复刻参考稿——实底蓝正方形 + 白字前导零 */
+.reflection-no {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    margin-right: 10px;
+    border-radius: 6px;
+    color: #ffffff;
+    background: #3b82f6;
+    font-family: var(--student-font-data);
+    font-size: var(--student-fs-caption);
+    font-weight: 600;
+    line-height: 1;
+    vertical-align: middle;
+}
+
 /* 两个场景并排 */
 .scenario-grid {
     display: grid;
diff --git a/src/views/training/GenericTrainingPage.vue b/src/views/training/GenericTrainingPage.vue
index 6daa4f7..de8b41a 100644
--- a/src/views/training/GenericTrainingPage.vue
+++ b/src/views/training/GenericTrainingPage.vue
@@ -1888,19 +1888,18 @@ function exportOutcome() {
 
 /* ============================================================
  * 工具栏操作按钮区：task-action-strip
+ * 复刻 new-product-survey.vue 扁平样式（无白卡背景），按钮直接落在画布上
  * ============================================================ */
 .task-action-strip {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 12px;
   margin: 0;
-  padding: 12px 20px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
+  padding: 10px 16px;
 
   .comprehensive-training-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
     flex: 0 0 auto;
     max-width: 100%;
   }