From c4808269f788e035a27feb0cc9da98eb42e84f97 Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Tue, 29 Sep 2026 10:51:31 +0800
Subject: [PATCH] Refactor new product survey layout: Introduced a sticky
 action toolbar below the task header for improved accessibility and user
 experience. Adjusted CSS styles for better alignment and responsiveness
 across different screen sizes.

---
 src/views/foundation/new-product-survey.vue | 52 +++++++++++++++------
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/views/foundation/new-product-survey.vue b/src/views/foundation/new-product-survey.vue
index c2802b9..228bcc5 100644
--- a/src/views/foundation/new-product-survey.vue
+++ b/src/views/foundation/new-product-survey.vue
@@ -19,7 +19,10 @@
             </span>
           </p>
         </div>
-        <TrainingTaskToolbar class="new-product-survey-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
+      </section>
+
+      <section class="task-action-strip">
+        <TrainingTaskToolbar :task-key="TASK_KEY" :on-export="exportOutcome" />
       </section>
 
       <section class="task-card">
@@ -946,14 +949,10 @@ function exportOutcome() {
 }
 
 /* ============================================================
- * 任务头：白卡 + 左侧教育蓝竖条 + 徽章 + 标题 + 简介
+ * 任务头：白卡 + 左侧教育蓝竖条 + 标题 + 简介
  * ============================================================ */
 .task-header {
   position: relative;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
   margin: 0;
   padding: 18px 20px 18px 24px;
   border: 1px solid var(--student-panel-border);
@@ -977,7 +976,6 @@ function exportOutcome() {
   justify-items: start;
   gap: 8px;
   min-width: 0;
-  flex: 1 1 auto;
 }
 
 
@@ -1968,12 +1966,29 @@ function exportOutcome() {
 .field-block.layer-extended { --bar: var(--student-layer-3); }
 
 /* ============================================================
- * 工具栏
+ * 操作工具栏横条：独立白卡 + 吸顶 + 按钮组右对齐
+ * 放在 task-header 下方，不影响标题区的简介展示
  * ============================================================ */
-.new-product-survey-toolbar {
-  flex: 0 0 auto;
-  justify-content: flex-end;
-  max-width: 100%;
+.task-action-strip {
+  position: sticky;
+  top: 12px;
+  z-index: 10;
+  margin: 0;
+  padding: 10px 16px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: var(--student-card-bg);
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
+  transition: box-shadow 0.2s ease;
+
+  // 让 TrainingTaskToolbar 内部按钮在横条内右对齐
+  :deep(.training-task-toolbar) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+  }
 }
 
 /* ============================================================
@@ -1986,8 +2001,9 @@ function exportOutcome() {
 }
 
 @media (max-width: 900px) {
-  .task-header {
-    flex-direction: column;
+  .task-action-strip {
+    position: static; // 窄屏不再吸顶，避免遮挡内容
+    top: auto;
   }
 
   .step-navigation {
@@ -2010,6 +2026,14 @@ function exportOutcome() {
   .classification-table {
     min-width: 720px;
   }
+
+  :deep(.training-task-toolbar) {
+    justify-content: stretch;
+  }
+
+  :deep(.training-task-toolbar > *) {
+    flex: 1 1 auto;
+  }
 }
 
 @media (max-width: 720px) {