fix: align consumer scenario toolbar layout

bugfix/ai-assessment-evidence-rescore
陈沅 1 month ago
parent 522625b45a
commit 324f9cf959

@ -11,17 +11,16 @@
: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="section-eyebrow">Consumer scenario analysis</p>
<h3>{{ activeStepName || taskTitle }}</h3>
</div>
<TrainingTaskToolbar class="consumer-scenario-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
</div>
<nav v-if="trainingSteps.length" class="step-indicator" aria-label="消费场景解构步骤">
@ -258,7 +257,7 @@
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import { ArrowLeft, ArrowRight, CircleCheck, Download, UploadFilled } from "@element-plus/icons-vue";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue";
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
import { getTrainingTaskByKey } from "@/api/trainingTask";
import { parseTrainingArray } from "@/views/training/taskKeyMap";
@ -2264,5 +2263,14 @@ function exportOutcome() {
padding-bottom: 0;
border-bottom: 0;
}
</style>
.consumer-scenario-toolbar {
flex: 0 0 auto;
justify-content: flex-end;
max-width: 100%;
}
@media (max-width: 900px) {
.consumer-scenario-toolbar { width: 100%; justify-content: flex-start; }
}
</style>

Loading…
Cancel
Save