fix: align business feasibility toolbar layout

bugfix/ai-assessment-evidence-rescore
陈沅 1 month ago
parent 72cb03e8ba
commit 3bcadca0f5

@ -6,12 +6,15 @@
<h1>{{ taskTitle }}</h1>
</header>
<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="workbench">
<div class="workbench-actions">
<TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
<button class="action-button" type="button" @click="exportOutcome"><el-icon><Download /></el-icon>导出实训成果</button>
<div class="workbench-head">
<div>
<p class="workbench-eyebrow">Demand insight · business case</p>
<h2>{{ trainingSteps[currentStep - 1] || '商业可行性论证' }}</h2>
</div>
<TrainingTaskToolbar class="business-feasibility-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
</div>
<nav class="step-indicator" aria-label="商业可行性论证步骤">
@ -109,7 +112,7 @@ import { checkBusinessFeasibilityStepOne, checkBusinessFeasibilityStepTwo, check
import { getTrainingTaskByKey } from "@/api/trainingTask";
import { parseTrainingArray } from "@/views/training/taskKeyMap";
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";
const TASK_KEY = "business-feasibility";
@ -192,4 +195,9 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ task: taskTit
@media (max-width:1280px) { .feasibility-page { grid-template-columns:1fr; }.step-indicator { overflow-x:auto; }.step-tab { min-width:170px; }.market-table { grid-template-columns:1fr; }.market-table label { border-right:0; }.cost-layout { grid-template-columns:1fr; } }
@media (max-width:720px) { .feasibility-page { padding:10px; }.task-header,.workbench,.step-card { padding:16px; }.task-header h1 { font-size:25px; }.workbench-actions { justify-content:flex-start; flex-wrap:wrap; }.form-table label { grid-template-columns:1fr; }.form-table label > span { justify-content:flex-start; }.step-heading em { display:none; }.step-actions { flex-wrap:wrap; }.decision-grid,.priority-grid { grid-template-columns:1fr; }.decision-section { padding:16px; }.hint { margin-left:0; }.report-upload-panel { padding:22px 14px; }.report-file-card { align-items:flex-start; flex-wrap:wrap; }.report-file-actions { width:100%; justify-content:flex-end; }.report-replace { flex-wrap:wrap; justify-content:center; } }
.table-wrap th { display:table-cell; text-align:center; }
.workbench-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid rgba(0,180,255,.2); }
.workbench-eyebrow { margin:0; color:#59d9ff; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.workbench-head h2 { margin:5px 0 0; color:#fff; font-size:26px; }
.business-feasibility-toolbar { flex:0 0 auto; justify-content:flex-end; max-width:100%; }
@media (max-width:720px) { .workbench-head { align-items:flex-start; flex-direction:column; }.business-feasibility-toolbar { width:100%; justify-content:flex-start; } }
</style>

Loading…
Cancel
Save