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 @@

- + + +
+
@@ -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) {