dianshang-qianduan/src/assets/styles/student-training.scss

.student-training-shell {
  --student-step-height: 46px;
  --student-step-font: 14px;
  --student-action-height: 52px;
  --student-action-font: 20px;
  --student-upload-height: 40px;
  --student-upload-font: 14px;
  --student-aux-height: 42px;
  --student-aux-font: 14px;
  --student-radius-sm: 6px;
  --student-radius-pill: 999px;
  --student-accent: #20a4d9;
  --student-accent-deep: #0a5c86;
  --student-panel-border: rgba(0, 180, 255, 0.3);
}

/*
 * The app-main padding around a student training page is part of the page
 * canvas.  It must blend into the training canvas instead of exposing the
 * layout's older black gradient as a vertical block beside the sidebar.
 */
#app .studentLayout .app-main:has(.student-training-shell),
#app .teacherLayout .app-main:has(.student-training-shell) {
  background: #06111d !important;
}

#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell,
#app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(720px, 1fr) 340px !important;
  align-items: start !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 90px) !important;
  margin: 0 !important;
  padding: 24px 24px 32px !important;
  background: #06111d !important;
}

.student-training-shell .task-header .task-title {
  font-size: 30px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

.student-training-shell .workbench-head h3 {
  font-size: 26px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

.student-training-shell .panel-title h4,
.student-training-shell .step-title-row h3 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

.student-training-shell .task-desc,
.student-training-shell .step-desc,
.student-training-shell .goal-bg,
.student-training-shell .background-block,
.student-training-shell .example-block,
.student-training-shell .source-title {
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.student-training-shell .flow-steps,
.student-training-shell .step-indicator {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 0 32px !important;
  padding: 6px !important;
  border: 1px solid var(--student-panel-border) !important;
  border-radius: var(--student-radius-pill) !important;
  background: rgba(0, 20, 35, 0.65) !important;
}

.student-training-shell .flow-arrow {
  display: none !important;
}

.student-training-shell .flow-pill,
.student-training-shell .step-tab {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: var(--student-step-height) !important;
  height: var(--student-step-height) !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: var(--student-radius-pill) !important;
  color: #bed5e4 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--student-step-font) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.student-training-shell .flow-pill.active,
.student-training-shell .step-tab.active {
  border-color: rgba(92, 224, 255, 0.7) !important;
  color: #ffffff !important;
  background: linear-gradient(95deg, #0a6b9e, var(--student-accent-deep)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.student-training-shell .flow-rail {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 6px !important;
  border: 1px solid var(--student-panel-border) !important;
  border-radius: 60px !important;
  background: rgba(0, 35, 58, 0.66) !important;
}

.student-training-shell .flow-step {
  display: flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: var(--student-step-height) !important;
  height: var(--student-step-height) !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: var(--student-radius-pill) !important;
  color: #bed5e4 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.student-training-shell .flow-step span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  background: linear-gradient(95deg, #0a6b9e, var(--student-accent-deep)) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.student-training-shell .flow-step strong {
  min-width: 0 !important;
  color: #e9f8ff !important;
  font-size: var(--student-step-font) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.training-step-area {
  width: 100% !important;
  margin: 18px 0 24px !important;
  padding: 18px !important;
  border: 1px solid rgba(0, 180, 255, 0.3) !important;
  border-radius: 22px !important;
  background: rgba(0, 35, 58, 0.66) !important;
  box-shadow: inset 0 1px 0 rgba(95, 232, 255, 0.12) !important;
}

.training-step-area::before {
  content: "任务实训" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  min-width: 92px !important;
  margin: 0 0 14px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(0, 170, 255, 0.55) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(95deg, #0a6b9e, #0a5c86) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.training-step-area .caseBacktitle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  margin: 10px 0 8px !important;
  color: #eaf7ff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.training-step-area .caseBacktitle img {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  object-fit: contain !important;
}

.training-step-area .caseBacktitle span {
  margin-left: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}

.training-step-area p,
.training-step-area li,
.training-step-area .online,
.training-step-area .online span {
  color: #d7ecff !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
}

.training-step-area .el-table {
  margin-top: 12px !important;
  margin-bottom: 18px !important;
  font-size: 14px !important;
}

.training-step-area .el-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 132px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid #2c83aa !important;
  border-radius: 6px !important;
  color: #e9fbff !important;
  background: linear-gradient(180deg, #22aad6, #1687ba) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.training-step-area .el-button span {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.student-training-shell .training-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 52px !important;
  margin-top: 36px !important;
  padding: 0 !important;
}

.student-training-shell .training-actions .el-button.training-action,
.student-training-shell .training-actions button.training-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 144px !important;
  width: auto !important;
  height: var(--student-action-height) !important;
  min-height: var(--student-action-height) !important;
  padding: 0 20px !important;
  border: 1px solid #2c83aa !important;
  border-radius: var(--student-radius-sm) !important;
  color: #dff7ff !important;
  background: rgba(13, 64, 88, 0.62) !important;
  box-shadow: none !important;
  font-size: var(--student-action-font) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.student-training-shell .training-actions .el-button.training-action span,
.student-training-shell .training-actions button.training-action span {
  font-size: inherit !important;
  line-height: 1 !important;
}

.student-training-shell .training-actions .el-button.training-action:hover:not(.is-disabled),
.student-training-shell .training-actions button.training-action:hover:not(:disabled) {
  border-color: #46b5e7 !important;
  color: #ffffff !important;
  background: rgba(18, 85, 116, 0.98) !important;
}

.student-training-shell .el-button.ghost-action,
.student-training-shell .el-button.outline-action,
.student-training-shell .workbench-actions .el-button.material-download,
.student-training-shell button.ghost-action,
.student-training-shell button.outline-action,
.student-training-shell .workbench-actions button.material-download {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(99, 217, 255, 0.55) !important;
  border-radius: var(--student-radius-pill) !important;
  color: #e9fbff !important;
  background: rgba(17, 126, 178, 0.36) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.student-training-shell .el-button.ghost-action:hover:not(.is-disabled),
.student-training-shell .el-button.outline-action:hover:not(.is-disabled),
.student-training-shell .workbench-actions .el-button.material-download:hover:not(.is-disabled),
.student-training-shell button.ghost-action:hover:not(:disabled),
.student-training-shell button.outline-action:hover:not(:disabled),
.student-training-shell .workbench-actions button.material-download:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(116, 235, 255, 0.85) !important;
  color: #e9fbff !important;
  background: rgba(18, 146, 204, 0.5) !important;
}

/*
 * Workbench header actions are a single cross-page component contract.
 * Keep this after the generic button rules so legacy, scoped page styles
 * cannot turn the material/export actions into a different size or move
 * their action group away from the upper-right corner of the workbench.
 */
.student-training-shell .workbench-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.student-training-shell .workbench-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: flex-start !important;
  gap: 10px !important;
  min-width: max-content !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}

.student-training-shell .workbench-actions > .el-button,
.student-training-shell .workbench-actions > button,
.student-training-shell .workbench-actions > .material-download,
.student-training-shell .workbench-actions > .outline-action {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid rgba(99, 217, 255, 0.55) !important;
  border-radius: var(--student-radius-pill) !important;
  color: #e9fbff !important;
  background: rgba(17, 126, 178, 0.36) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.student-training-shell .el-button.upload-action,
.student-training-shell .el-button.mini-upload,
.student-training-shell button.upload-action,
.student-training-shell button.mini-upload,
.student-training-shell button.upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: auto !important;
  height: var(--student-upload-height) !important;
  min-height: var(--student-upload-height) !important;
  padding: 0 18px !important;
  border: 1px solid rgba(92, 224, 255, 0.7) !important;
  border-radius: var(--student-radius-pill) !important;
  color: #ffffff !important;
  background: linear-gradient(95deg, #0b84bd, #096491) !important;
  box-shadow: none !important;
  font-size: var(--student-upload-font) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.student-training-shell textarea,
.student-training-shell .large-textarea,
.student-training-shell .input-field,
.student-training-shell .table-textarea {
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.student-training-shell .field-block > span,
.student-training-shell .large-field > span,
.student-training-shell .product-field > span {
  font-size: 16px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.legacy-training-page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
}

.legacy-training-page > :not(.training-ai-sidebar) {
  grid-column: 1 !important;
  min-width: 0 !important;
}

.legacy-training-page > .training-ai-sidebar {
  grid-column: 2 !important;
  grid-row: 1 / span 20 !important;
  position: sticky !important;
  top: 18px !important;
}

.legacy-training-page > .training-intro,
.legacy-training-page > .training-step-area,
.legacy-training-page > .training-legacy-actions,
.legacy-training-page > .centent {
  width: 100% !important;
}

.legacy-training-page .top_item {
  margin-bottom: 18px !important;
}

.legacy-training-page .top_item .el-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 150px !important;
  height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid #2c83aa !important;
  border-radius: 6px !important;
  color: #e9fbff !important;
  background: rgba(13, 64, 88, 0.62) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.legacy-training-page .top_item .el-button.active,
.legacy-training-page .top_item .active {
  transform: none !important;
  border-color: rgba(0, 170, 255, 0.65) !important;
  color: #ffffff !important;
  background: linear-gradient(95deg, #0a6b9e, #0a5c86) !important;
}

@media (max-width: 1100px) {
  #app .studentLayout .app-main:has(.student-training-shell) .student-training-shell,
  #app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
    grid-template-columns: 1fr !important;
  }

  .student-training-shell .workbench-actions {
    min-width: 0 !important;
  }

  .student-training-shell .training-actions {
    gap: 14px !important;
  }

  .student-training-shell .flow-steps,
  .student-training-shell .step-indicator,
  .student-training-shell .flow-rail {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .student-training-shell .flow-pill,
  .student-training-shell .step-tab,
  .student-training-shell .flow-step,
  .student-training-shell .training-actions .el-button.training-action,
  .student-training-shell .training-actions button.training-action {
    width: 100% !important;
  }

  .legacy-training-page {
    grid-template-columns: 1fr !important;
  }

  .legacy-training-page > .training-ai-sidebar {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
  }
}

@media (max-width: 900px) {
  #app .studentLayout .app-main:has(.student-training-shell) .student-training-shell,
  #app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
    padding: 14px 14px 18px !important;
  }

  .student-training-shell .workbench-head {
    flex-direction: column !important;
  }

  .student-training-shell .workbench-actions {
    align-self: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}