fix: align new product survey toolbar layout

bugfix/ai-assessment-evidence-rescore
陈沅 1 month ago
parent fb84e5c7c3
commit 1d38593226

@ -9,17 +9,15 @@
<h1 class="task-title">{{ taskTitle }}</h1>
</section>
<TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
<TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" :show-toolbar="false" />
<section class="task-card">
<div class="workbench-head workbench-head--actions-only">
<div class="workbench-actions">
<TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
<button type="button" class="outline-action" @click="exportOutcome">
<el-icon><Download /></el-icon>
导出实训成果
</button>
<div class="workbench-head">
<div>
<p class="workbench-eyebrow">PRODUCT DEVELOPMENT · NEW PRODUCT SURVEY</p>
<h2>{{ getStepName(currentStep) || taskTitle }}</h2>
</div>
<TrainingTaskToolbar class="new-product-survey-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
</div>
<nav class="step-indicator" aria-label="新产品调查与分析步骤">
@ -262,7 +260,6 @@ import {
ArrowRight,
CircleCheck,
DataAnalysis,
Download,
Operation,
Opportunity,
RefreshLeft,
@ -275,8 +272,8 @@ import useUserStore from "@/store/modules/user";
import { isExternal } from "@/utils/validate";
import { extractTrainingStepNames } from "@/views/training/taskKeyMap";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue";
const TASK_KEY = "new-product-survey";
const { proxy } = getCurrentInstance();
@ -1852,4 +1849,32 @@ function exportOutcome() {
}
}
}
.workbench-eyebrow {
margin: 0 0 6px;
color: #59dcff;
font-size: 12px;
font-weight: 800;
letter-spacing: .1em;
}
.workbench-head h2 {
margin: 0;
color: #fff;
font-size: 25px;
line-height: 1.25;
}
.new-product-survey-toolbar {
flex: 0 0 auto;
justify-content: flex-end;
max-width: 100%;
}
@media (max-width: 900px) {
.new-product-survey-toolbar {
width: 100%;
justify-content: flex-start;
}
}
</style>

Loading…
Cancel
Save