|
|
|
|
@ -6,18 +6,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">
|
|
|
|
|
<div>
|
|
|
|
|
<p class="section-eyebrow">智能硬件架构训练</p>
|
|
|
|
|
<h3>从底层到顶层完成模块化分层</h3>
|
|
|
|
|
</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>
|
|
|
|
|
<p class="section-eyebrow">Smart hardware architecture</p>
|
|
|
|
|
<h3>{{ trainingSteps[currentStep - 1] || '产品架构设计' }}</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<TrainingTaskToolbar class="architecture-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<nav class="step-indicator" aria-label="产品架构设计步骤">
|
|
|
|
|
@ -158,7 +155,7 @@ import { checkProductArchitectureDesignStepOne, checkProductArchitectureDesignSt
|
|
|
|
|
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";
|
|
|
|
|
import { SCENARIO_FIELDS, getCompletedScenarioCount, getRowsForScenarioValidation, getScenarioValidationMessage } from "./productArchitectureScenarioValidation.mjs";
|
|
|
|
|
|
|
|
|
|
@ -390,4 +387,9 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildAnswer(),
|
|
|
|
|
.flow-workspace{max-width:1000px;margin:0 auto}.flow-caption{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:#71dfff;font-size:12px;font-weight:800}.flow-caption i{flex:1;height:1px;background:linear-gradient(90deg,#167da9,#71dfff)}.flow-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.flow-card{display:grid;grid-template-columns:32px 22px minmax(0,1fr) auto;gap:14px;align-items:center;padding:17px 18px;border:1px solid rgba(102,194,232,.42);border-radius:14px;background:linear-gradient(100deg,rgba(21,91,125,.5),rgba(12,39,58,.8));cursor:grab;transition:.2s}.flow-card:hover,.flow-card.dragging{border-color:#6de5ff;box-shadow:0 10px 22px rgba(0,0,0,.22);transform:translateY(-2px)}@media (max-width:720px){.flow-list{grid-template-columns:1fr}.flow-card{grid-template-columns:30px 17px minmax(0,1fr)}.flow-card .move-actions{grid-column:3;grid-template-columns:repeat(2,32px)}}
|
|
|
|
|
.scene-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;color:#d9efff;font-weight:800}.scene-toolbar em{color:#71dfff;font-style:normal;font-size:12px}.scene-toolbar__actions{display:flex;gap:8px}.scenario-table-wrap{overflow:auto;border:1px solid rgba(102,194,232,.42);border-radius:14px;background:rgba(3,22,36,.6)}.scenario-table{width:100%;min-width:1400px;border-collapse:collapse;table-layout:fixed}.scenario-table th{padding:13px 8px;border-right:1px solid rgba(102,194,232,.42);border-bottom:1px solid rgba(102,194,232,.42);color:#dff7ff;background:rgba(14,126,177,.48);font-size:14px;line-height:1.45}.scenario-table th small{color:#9edff5;font-size:12px}.scenario-table td{padding:9px;border-right:1px solid rgba(102,194,232,.28);border-bottom:1px solid rgba(102,194,232,.28);vertical-align:middle}.scenario-table th:first-child,.scenario-table td:first-child{width:52px}.scenario-table th:nth-child(2),.scenario-table td:nth-child(2){width:170px}.scenario-index{color:#71dfff;font-weight:900;text-align:center}.scenario-table :deep(.el-textarea__inner){min-height:82px!important;border:0;border-radius:8px;color:#edfaff;background:rgba(9,51,75,.52);box-shadow:none;line-height:1.55}.scenario-table :deep(.el-textarea__inner::placeholder){color:#91b7c9}.scenario-table tr:last-child td{border-bottom:0}.scenario-table th:last-child,.scenario-table td:last-child{border-right:0}@media (max-width:720px){.scene-toolbar{align-items:flex-start;flex-direction:column}.scene-toolbar__actions{width:100%}.scene-toolbar__actions .btn-nav{flex:1}}
|
|
|
|
|
.architecture-image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.architecture-image-card{min-width:0;padding:16px;border:1px solid rgba(102,194,232,.42);border-radius:16px;background:linear-gradient(145deg,rgba(13,71,98,.55),rgba(3,23,38,.82))}.architecture-image-card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px;color:#fff;font-weight:900}.architecture-image-card__head small{color:#7ce4ff;font-size:12px}.architecture-image-trigger{display:grid;place-items:center;align-content:center;gap:7px;min-height:154px;border:1px dashed rgba(105,221,255,.65);border-radius:12px;color:#e8fbff;background:rgba(5,73,104,.22);cursor:pointer;text-align:center;transition:.2s}.architecture-image-trigger:hover{border-color:#77edff;background:rgba(8,122,169,.28)}.architecture-image-trigger input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.architecture-image-trigger .el-icon{font-size:24px;color:#76e5ff}.architecture-image-trigger span{color:#a3d9e9;font-size:12px}.architecture-image-preview{margin:13px 0 0}.architecture-image-preview :deep(.el-image){display:block;width:100%;height:170px;overflow:hidden;border:1px solid rgba(109,229,255,.5);border-radius:10px;background:#fff;cursor:zoom-in}.architecture-image-preview figcaption{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:9px;color:#add8e8;font-size:12px}.architecture-image-preview figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.architecture-image-preview button,.architecture-guide button{border:0;border-radius:7px;padding:5px 9px;color:#fff;background:#0d91c7;font:inherit;cursor:pointer}.architecture-guide{margin-top:24px;padding:18px 22px;border-left:3px solid #27c8ff;border-radius:0 14px 14px 0;color:#c9e8f5;background:rgba(11,79,109,.22);line-height:1.75}.architecture-guide h4{margin:0 0 8px;color:#fff}.architecture-guide ol{margin:0 0 10px;padding-left:20px}.architecture-guide li{margin:5px 0}@media (max-width:1000px){.architecture-image-grid{grid-template-columns:1fr}}
|
|
|
|
|
.architecture-toolbar { flex: 0 0 auto; justify-content: flex-end; max-width: 100%; }
|
|
|
|
|
|
|
|
|
|
@media (max-width: 720px) {
|
|
|
|
|
.architecture-toolbar { width: 100%; justify-content: flex-start; }
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|