fix: align after-sales task toolbar layout

bugfix/ai-assessment-evidence-rescore
陈沅 1 month ago
parent 1dc398348e
commit b6b7dbda31

@ -6,18 +6,15 @@
<h1 class="task-title">{{ taskTitle }}</h1> <h1 class="task-title">{{ taskTitle }}</h1>
</section> </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"> <section class="task-card">
<div class="workbench-head"> <div class="workbench-head">
<div> <div>
<p class="section-eyebrow">After-sales diagnostic routing</p> <p class="section-eyebrow">After-sales service design</p>
<h2>售后故障类型分类</h2> <h2>{{ trainingSteps[currentStep - 1] || '售后服务流程设计' }}</h2>
</div>
<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> </div>
<TrainingTaskToolbar class="after-sales-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
</div> </div>
<nav class="step-indicator" aria-label="售后服务流程设计步骤"> <nav class="step-indicator" aria-label="售后服务流程设计步骤">
@ -193,9 +190,9 @@
<script setup> <script setup>
import { computed, defineComponent, getCurrentInstance, h, onMounted, ref } from "vue"; import { computed, defineComponent, getCurrentInstance, h, onMounted, ref } from "vue";
import { ArrowLeft, ArrowRight, Download, RefreshLeft, Service } from "@element-plus/icons-vue"; import { ArrowLeft, ArrowRight, RefreshLeft, Service } from "@element-plus/icons-vue";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.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 TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
import { checkAfterSalesServiceStepOne, checkAfterSalesServiceStepTwo, checkAfterSalesServiceStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer"; import { checkAfterSalesServiceStepOne, checkAfterSalesServiceStepTwo, checkAfterSalesServiceStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
import { getTrainingTaskByKey } from "@/api/trainingTask"; import { getTrainingTaskByKey } from "@/api/trainingTask";
@ -458,4 +455,9 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ currentStep:
.fault-select-label { grid-column: 2; justify-content: flex-start; white-space: nowrap; } .fault-select-label { grid-column: 2; justify-content: flex-start; white-space: nowrap; }
.fault-select-label span { white-space: nowrap; } .fault-select-label span { white-space: nowrap; }
.fault-select-label select { width: 126px; max-width: none; flex: 0 0 126px; } .fault-select-label select { width: 126px; max-width: none; flex: 0 0 126px; }
.after-sales-toolbar { flex: 0 0 auto; justify-content: flex-end; max-width: 100%; }
@media (max-width: 720px) {
.after-sales-toolbar { width: 100%; justify-content: flex-start; }
}
</style> </style>

Loading…
Cancel
Save