|
|
<template>
|
|
|
<div class="competitive-page student-training-shell">
|
|
|
<TrainingTaskToolbar />
|
|
|
<main class="training-core">
|
|
|
<section class="task-header">
|
|
|
<h1 class="task-title">{{ taskTitle }}</h1>
|
|
|
</section>
|
|
|
|
|
|
<TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement"
|
|
|
:show-material="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" :training-data-name="taskConfig?.trainingDataName"
|
|
|
:training-data-url="taskConfig?.trainingDataUrl"
|
|
|
:guide-manual-name="taskConfig?.guideManualName"
|
|
|
:guide-manual-url="taskConfig?.guideManualUrl" :ai-manual-name="taskConfig?.aiManualName"
|
|
|
:ai-manual-url="taskConfig?.aiManualUrl" />
|
|
|
<button type="button" class="outline-action" @click="exportOutcome">
|
|
|
<el-icon>
|
|
|
<Download />
|
|
|
</el-icon>
|
|
|
导出实训成果
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<nav v-if="trainingSteps.length" class="step-indicator" aria-label="竞争环境分析步骤">
|
|
|
<template v-for="(step, index) in trainingSteps" :key="`${index}-${step}`">
|
|
|
<button type="button"
|
|
|
:class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]"
|
|
|
:aria-label="`切换至第 ${index + 1} 步：${step}`"
|
|
|
:aria-current="currentStep === index + 1 ? 'step' : undefined"
|
|
|
@click="changeStep(index + 1)">
|
|
|
<span class="step-marker" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</span>
|
|
|
<span class="step-copy">
|
|
|
<strong class="step-name" :title="step">{{ step }}</strong>
|
|
|
<span class="step-action">{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} <span
|
|
|
aria-hidden="true">→</span></span>
|
|
|
</span>
|
|
|
</button>
|
|
|
<span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true"></span>
|
|
|
</template>
|
|
|
</nav>
|
|
|
|
|
|
<section class="step-card competitive-step-card">
|
|
|
<div v-if="activeStepName" class="step-title-row">
|
|
|
<div>
|
|
|
<p class="section-eyebrow">Step {{ String(currentStep).padStart(2, "0") }}</p>
|
|
|
<h3>{{ activeStepName }}</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="background-block">
|
|
|
<h4>小家电品类背景信息</h4>
|
|
|
<ol>
|
|
|
<li v-for="item in backgroundItems" :key="item">{{ item }}</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
|
|
|
<p class="task-desc">请对上述信息进行SWOT分析归类。</p>
|
|
|
<TrainingStepOneChoiceQuestions v-if="currentStep === 1" :questions="taskConfig?.stepOneQuestions"
|
|
|
v-model="form.choiceAnswers" />
|
|
|
|
|
|
<div class="swot-grid">
|
|
|
<article v-for="item in swotItems" :key="item.key" class="swot-card">
|
|
|
<div class="swot-card__title">{{ item.label }}</div>
|
|
|
<textarea v-model="form.swot[item.key]" class="swot-input"
|
|
|
:placeholder="item.placeholder" />
|
|
|
</article>
|
|
|
</div>
|
|
|
|
|
|
<label class="field-block">
|
|
|
<span>请对小家电品类进行SWOT分析，假如你想要进入小家电市场，该如何切入？</span>
|
|
|
<textarea v-model="form.entryStrategy" class="long-textarea"
|
|
|
placeholder="填写市场切入策略、定位选择、差异化打法和风险规避措施" />
|
|
|
</label>
|
|
|
|
|
|
<div class="competitor-block">
|
|
|
<p class="competitor-title">
|
|
|
下是2025年市场热度TOP3智能小家电的竞品对比分析（基于最新销售数据及消费者调研），三种品牌扫地机器人多维度对比分析：
|
|
|
</p>
|
|
|
<div class="competitor-table">
|
|
|
<div class="competitor-row competitor-head">
|
|
|
<div>维度</div>
|
|
|
<div>科沃斯X2 OMNI</div>
|
|
|
<div>石头G20</div>
|
|
|
<div>追觅X30 PRO</div>
|
|
|
</div>
|
|
|
<div v-for="row in competitorRows" :key="row.dimension" class="competitor-row">
|
|
|
<div class="dimension-cell">{{ row.dimension }}</div>
|
|
|
<div>{{ row.ecovacs }}</div>
|
|
|
<div>{{ row.roborock }}</div>
|
|
|
<div>{{ row.dreame }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<label class="field-block">
|
|
|
<span>请根据上述对比情况，分析扫地机器人竞争环境，根据自身实际情况判断是否进入该市场。</span>
|
|
|
<textarea v-model="form.competitionConclusion" class="long-textarea"
|
|
|
placeholder="填写竞品格局判断、进入可行性、切入机会和不进入理由" />
|
|
|
</label>
|
|
|
|
|
|
<div v-if="trainingSteps.length" class="step-actions">
|
|
|
<el-button class="step-action-btn step-action-btn--previous" :disabled="currentStep === 1"
|
|
|
@click="previousStep">
|
|
|
<el-icon>
|
|
|
<ArrowLeft />
|
|
|
</el-icon>
|
|
|
上一步
|
|
|
</el-button>
|
|
|
<el-button class="step-action-btn step-action-btn--save" :loading="saving"
|
|
|
@click="saveCurrentProgress">
|
|
|
<el-icon>
|
|
|
<CircleCheck />
|
|
|
</el-icon>
|
|
|
保存当前进度
|
|
|
</el-button>
|
|
|
<el-button class="step-action-btn step-action-btn--next"
|
|
|
:disabled="currentStep === trainingSteps.length" @click="nextStep">
|
|
|
下一步
|
|
|
<el-icon>
|
|
|
<ArrowRight />
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
|
|
|
<div class="training-actions">
|
|
|
<el-button class="training-action training-action--submit" :loading="saving"
|
|
|
@click="submitTask">提交任务</el-button>
|
|
|
<el-button class="training-action training-action--reset"
|
|
|
@click="resetTraining">重新实训</el-button>
|
|
|
</div>
|
|
|
</section>
|
|
|
</section>
|
|
|
</main>
|
|
|
|
|
|
<TrainingAiSidebar study-tip="当前任务建议：先把背景信息拆成优势、劣势、机会、威胁，再结合竞品对比判断是否进入市场。" :progress-items="progressItems" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue"
|
|
|
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue"
|
|
|
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue"
|
|
|
import TrainingStepOneChoiceQuestions from "@/views/components/TrainingStepOneChoiceQuestions.vue"
|
|
|
import { getTrainingTaskByKey } from "@/api/trainingTask"
|
|
|
import { parseTrainingArray } from "@/views/training/taskKeyMap"
|
|
|
import { getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer"
|
|
|
import { ArrowLeft, ArrowRight, CircleCheck, Download } from "@element-plus/icons-vue"
|
|
|
import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue"
|
|
|
|
|
|
const TASK_KEY = "competitive-environment-analysis"
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
|
|
const taskConfig = ref(null)
|
|
|
const saving = ref(false)
|
|
|
const currentStep = ref(1)
|
|
|
|
|
|
const defaultRequirement = "SWOT分析用于从内部优势、内部劣势、外部机会、外部威胁四个角度判断竞争环境与市场进入策略。"
|
|
|
const defaultBackground = "以国内小家电品类和智能扫地机器人竞品为例，完成竞争环境归类、市场切入策略和进入可行性判断。"
|
|
|
const defaultGoals = [
|
|
|
"掌握SWOT模型在竞争环境分析中的使用方法",
|
|
|
"能够根据行业背景信息完成优势、劣势、机会、威胁归类",
|
|
|
"能够结合竞品对比判断市场进入策略",
|
|
|
]
|
|
|
|
|
|
const backgroundItems = [
|
|
|
"健康/智能化产品溢价能力提升，如低糖电饭煲、母婴消毒柜等高端品类溢价率达35%。",
|
|
|
"年轻群体对高颜值、个性化设计支付意愿强烈（90后溢价接受度22%）。",
|
|
|
"珠三角产业集群实现“14天快速打样”，新品上市周期缩短60%。",
|
|
|
"跨境电商矩阵成熟（如德尔玛亚马逊渠道增长300%）。",
|
|
|
"国家以旧换新政策推动2024年换新销量超6200万台，节能属性成必备要素。",
|
|
|
"中小企业研发投入占比仅5%，同质化严重导致退货率高。",
|
|
|
"45%产品因清洗麻烦/功能单一被闲置（如烤箱、空气炸锅闲置率高）。",
|
|
|
"下沉市场产品破损率达一线城市2倍，方言语音等区域适配功能缺失。",
|
|
|
"中国户均小家电9.5件，仅为欧美1/3，预计2025年市场规模6500亿元。",
|
|
|
"智能家居年复合增长率15.7%（超行业3倍）。",
|
|
|
"东南亚工厂规避关税（如美的泰国生产线）。",
|
|
|
"关税壁垒升级，厨房小家电出口占国内营收30%（2024年出口额199亿美元）。",
|
|
|
"IC芯片依赖台积电代工，蓝牙模组成本波动影响智能品类毛利率。",
|
|
|
"《家电安全使用年限》强制标准淘汰30%在售产品。",
|
|
|
]
|
|
|
|
|
|
const swotItems = [
|
|
|
{ key: "strengths", label: "优势（Strengths）", placeholder: "归类溢价能力、设计、产业集群、渠道等优势" },
|
|
|
{ key: "weaknesses", label: "劣势（Weaknesses）", placeholder: "归类研发投入、同质化、闲置率、区域适配等劣势" },
|
|
|
{ key: "opportunities", label: "机会（Opportunities）", placeholder: "归类市场空间、政策、智能家居增长、海外产能等机会" },
|
|
|
{ key: "threats", label: "威胁（Threats）", placeholder: "归类关税、核心部件依赖、标准淘汰、成本波动等威胁" },
|
|
|
]
|
|
|
|
|
|
const competitorRows = [
|
|
|
{
|
|
|
dimension: "核心卖点",
|
|
|
ecovacs: "双机械臂边刷+方形机身贴边",
|
|
|
roborock: "动态热风烘干+AI宠物粪便识别",
|
|
|
dreame: "7000Pa吸力+60℃热水洗拖布",
|
|
|
},
|
|
|
{
|
|
|
dimension: "智能功能",
|
|
|
ecovacs: "3D结构光建模（精度±1cm）",
|
|
|
roborock: "自动升降滚刷（地毯识别率99%）",
|
|
|
dreame: "自动集尘+UV杀菌（除菌率99.9%）",
|
|
|
},
|
|
|
{
|
|
|
dimension: "用户体验",
|
|
|
ecovacs: "复杂户型覆盖率↑37%",
|
|
|
roborock: "噪音低至54dB（睡眠模式）",
|
|
|
dreame: "地毯增压响应0.3秒",
|
|
|
},
|
|
|
{
|
|
|
dimension: "定价策略",
|
|
|
ecovacs: "¥6499（商用级溢价）",
|
|
|
roborock: "¥4599（宠物家庭专供）",
|
|
|
dreame: "¥5599（清洁性能标杆）",
|
|
|
},
|
|
|
{
|
|
|
dimension: "商业模式",
|
|
|
ecovacs: "线下6000家体验店",
|
|
|
roborock: "与宠物医院联合会员",
|
|
|
dreame: "订阅耗材服务（年费¥299）",
|
|
|
},
|
|
|
]
|
|
|
|
|
|
function createForm() {
|
|
|
return {
|
|
|
swot: {
|
|
|
strengths: "",
|
|
|
weaknesses: "",
|
|
|
opportunities: "",
|
|
|
threats: "",
|
|
|
},
|
|
|
entryStrategy: "",
|
|
|
competitionConclusion: "",
|
|
|
choiceAnswers: {},
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const form = ref(createForm())
|
|
|
|
|
|
const taskTitle = computed(() => taskConfig.value?.taskName || "竞争环境分析")
|
|
|
const taskBackground = computed(() => taskConfig.value?.background || defaultBackground)
|
|
|
const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultGoals))
|
|
|
const taskRequirement = computed(() => taskConfig.value?.requirements || defaultRequirement)
|
|
|
const trainingSteps = computed(() => parseTrainingArray(taskConfig.value?.steps, []))
|
|
|
const activeStepName = computed(() => trainingSteps.value[currentStep.value - 1] || trainingSteps.value[0] || "")
|
|
|
|
|
|
watch(trainingSteps, (steps) => {
|
|
|
if (steps.length && currentStep.value > steps.length) {
|
|
|
currentStep.value = steps.length
|
|
|
}
|
|
|
})
|
|
|
|
|
|
const progressItems = computed(() => [
|
|
|
{ text: "进行中：SWOT四象限归类", status: "doing" },
|
|
|
{ text: form.value.entryStrategy ? "已填写：市场切入策略" : "待完成：市场切入策略", status: form.value.entryStrategy ? "done" : "" },
|
|
|
{ text: form.value.competitionConclusion ? "已填写：竞品判断" : "待完成：竞品判断", status: form.value.competitionConclusion ? "done" : "" },
|
|
|
])
|
|
|
|
|
|
onMounted(async () => {
|
|
|
await loadTaskConfig()
|
|
|
await loadSavedAnswer()
|
|
|
})
|
|
|
|
|
|
async function loadTaskConfig() {
|
|
|
try {
|
|
|
const res = await getTrainingTaskByKey(TASK_KEY)
|
|
|
taskConfig.value = res?.data || null
|
|
|
} catch (error) {
|
|
|
taskConfig.value = null
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadSavedAnswer() {
|
|
|
try {
|
|
|
const res = await getStudentTrainingAnswer(TASK_KEY)
|
|
|
const answer = res?.data
|
|
|
if (answer?.currentStep && Number(answer.currentStep) > 0) {
|
|
|
currentStep.value = Number(answer.currentStep)
|
|
|
}
|
|
|
if (answer?.step1Answer) {
|
|
|
applySavedAnswer(answer.step1Answer)
|
|
|
}
|
|
|
} catch (error) {
|
|
|
// Keep the page usable even when the answer endpoint is unavailable.
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function parseArray(value, fallback) {
|
|
|
if (Array.isArray(value)) {
|
|
|
return value.length ? value : fallback
|
|
|
}
|
|
|
if (!value) {
|
|
|
return fallback
|
|
|
}
|
|
|
try {
|
|
|
const parsed = JSON.parse(value)
|
|
|
return Array.isArray(parsed) && parsed.length ? parsed : fallback
|
|
|
} catch (error) {
|
|
|
const list = String(value)
|
|
|
.split(/[，,|]/)
|
|
|
.map((item) => item.trim())
|
|
|
.filter(Boolean)
|
|
|
return list.length ? list : fallback
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function applySavedAnswer(value) {
|
|
|
try {
|
|
|
const parsed = JSON.parse(value)
|
|
|
if (!parsed || typeof parsed !== "object") return
|
|
|
form.value = {
|
|
|
swot: {
|
|
|
...createForm().swot,
|
|
|
...(parsed.swot || {}),
|
|
|
},
|
|
|
entryStrategy: parsed.entryStrategy || "",
|
|
|
competitionConclusion: parsed.competitionConclusion || "",
|
|
|
choiceAnswers: parsed.choiceAnswers && typeof parsed.choiceAnswers === "object" ? parsed.choiceAnswers : {},
|
|
|
}
|
|
|
} catch (error) {
|
|
|
// Ignore malformed historical answers.
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function buildOutcome() {
|
|
|
return {
|
|
|
title: taskTitle.value,
|
|
|
swot: form.value.swot,
|
|
|
entryStrategy: form.value.entryStrategy,
|
|
|
competitors: competitorRows,
|
|
|
competitionConclusion: form.value.competitionConclusion,
|
|
|
choiceAnswers: form.value.choiceAnswers,
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function buildAnswerPayload(saveAction = "SAVE") {
|
|
|
return {
|
|
|
step1Answer: JSON.stringify(buildOutcome()),
|
|
|
currentStep: currentStep.value,
|
|
|
submitted: saveAction === "SUBMIT",
|
|
|
saveAction,
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function saveAnswer(saveAction = "SAVE", silent = false) {
|
|
|
if (saving.value) return
|
|
|
saving.value = true
|
|
|
try {
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(saveAction))
|
|
|
if (!silent) {
|
|
|
proxy?.$modal?.msgSuccess(saveAction === "SUBMIT" ? "提交成功" : "已保存")
|
|
|
}
|
|
|
} catch (error) {
|
|
|
if (!silent) {
|
|
|
proxy?.$modal?.msgError?.(saveAction === "SUBMIT" ? "提交失败" : "保存失败")
|
|
|
}
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function saveCurrentProgress() {
|
|
|
return saveAnswer("SAVE")
|
|
|
}
|
|
|
|
|
|
function changeStep(targetStep) {
|
|
|
const maxStep = trainingSteps.value.length
|
|
|
if (!maxStep) return
|
|
|
const next = Math.min(Math.max(Number(targetStep) || 1, 1), maxStep)
|
|
|
if (next === currentStep.value) return
|
|
|
currentStep.value = next
|
|
|
void saveAnswer("SAVE", true)
|
|
|
}
|
|
|
|
|
|
function previousStep() {
|
|
|
changeStep(currentStep.value - 1)
|
|
|
}
|
|
|
|
|
|
function nextStep() {
|
|
|
changeStep(currentStep.value + 1)
|
|
|
}
|
|
|
|
|
|
function submitTask() {
|
|
|
return saveAnswer("SUBMIT")
|
|
|
}
|
|
|
|
|
|
async function resetTraining() {
|
|
|
form.value = createForm()
|
|
|
await saveAnswer("RESET")
|
|
|
}
|
|
|
|
|
|
function exportOutcome() {
|
|
|
const blob = new Blob([JSON.stringify(buildOutcome(), null, 2)], { type: "application/json;charset=utf-8" })
|
|
|
const url = URL.createObjectURL(blob)
|
|
|
const link = document.createElement("a")
|
|
|
link.href = url
|
|
|
link.download = `${taskTitle.value}-实训成果.json`
|
|
|
document.body.appendChild(link)
|
|
|
link.click()
|
|
|
document.body.removeChild(link)
|
|
|
URL.revokeObjectURL(url)
|
|
|
proxy?.$modal?.msgSuccess("导出成功")
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.competitive-page {
|
|
|
--student-accent: #2563eb;
|
|
|
--student-accent-deep: #1d4ed8;
|
|
|
--student-accent-light: #3b82f6;
|
|
|
--student-accent-soft: #eff6ff;
|
|
|
--student-danger: #ef4444;
|
|
|
--student-success: #2ba471;
|
|
|
--student-layer-1: #1d4ed8;
|
|
|
--student-layer-2: #3b82f6;
|
|
|
--student-layer-3: #93c5fd;
|
|
|
--student-panel-border: #e5e7eb;
|
|
|
--student-card-bg: #ffffff;
|
|
|
--student-panel-bg: #fafbfc;
|
|
|
--student-text: #1f2937;
|
|
|
--student-text-secondary: #6b7280;
|
|
|
--el-color-primary: #2563eb;
|
|
|
--el-color-primary-light-3: #60a5fa;
|
|
|
--el-color-primary-light-5: #93c5fd;
|
|
|
--el-color-primary-light-7: #bfdbfe;
|
|
|
--el-color-primary-light-8: #dbeafe;
|
|
|
--el-color-primary-light-9: #eff6ff;
|
|
|
--el-color-primary-dark-2: #1d4ed8;
|
|
|
--el-input-hover-border-color: #3b82f6;
|
|
|
--el-input-focus-border-color: #2563eb;
|
|
|
--el-input-focus-ring-color: rgba(59, 130, 246, 0.15);
|
|
|
--el-textarea-hover-border-color: #3b82f6;
|
|
|
--el-textarea-focus-border-color: #2563eb;
|
|
|
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
display: grid;
|
|
|
grid-template-columns: minmax(720px, 1fr) 340px;
|
|
|
gap: 24px;
|
|
|
width: 100%;
|
|
|
max-width: 100%;
|
|
|
min-height: calc(100vh - 106px);
|
|
|
margin: 0;
|
|
|
padding: 24px 24px 32px;
|
|
|
color: var(--student-text);
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.training-core {
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background: transparent;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
/* ===== 任务头：独立白卡 + 左侧教育蓝竖条 ===== */
|
|
|
.task-header {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
gap: 16px;
|
|
|
margin-bottom: 10px;
|
|
|
padding: 18px 20px 18px 24px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 12px;
|
|
|
background: var(--student-card-bg);
|
|
|
overflow: hidden;
|
|
|
|
|
|
&::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 4px;
|
|
|
background: var(--student-accent);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
.task-title {
|
|
|
margin: 0;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-display);
|
|
|
font-weight: 700;
|
|
|
line-height: 1.35;
|
|
|
}
|
|
|
|
|
|
.goal-bg,
|
|
|
.task-card,
|
|
|
.step-card {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background: transparent;
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.goal-bg {
|
|
|
|
|
|
p,
|
|
|
li {
|
|
|
color: #374151;
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
p,
|
|
|
ol {
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
ol {
|
|
|
padding-left: 18px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.subtitle-icon {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
margin-bottom: 8px;
|
|
|
color: var(--student-text);
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
|
|
|
.subtitle-icon--spaced {
|
|
|
margin-top: 12px;
|
|
|
}
|
|
|
|
|
|
.workbench-head {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
gap: 18px;
|
|
|
margin-bottom: 22px;
|
|
|
padding-bottom: 18px;
|
|
|
border-bottom: 1px solid var(--student-panel-border);
|
|
|
|
|
|
h3 {
|
|
|
margin: 4px 0 8px;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-h1);
|
|
|
font-weight: 800;
|
|
|
line-height: 1.3;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.workbench-actions {
|
|
|
display: flex;
|
|
|
flex: 0 0 auto;
|
|
|
flex-wrap: wrap;
|
|
|
margin-left: auto;
|
|
|
justify-content: flex-end;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.section-eyebrow {
|
|
|
margin: 0;
|
|
|
color: #2563eb;
|
|
|
font-size: var(--student-fs-caption);
|
|
|
font-weight: 800;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
.workbench-description {
|
|
|
margin: 0;
|
|
|
color: #374151;
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 400;
|
|
|
line-height: 1.8;
|
|
|
}
|
|
|
|
|
|
.outline-action {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid #bfdbfe;
|
|
|
border-radius: 8px;
|
|
|
color: var(--student-text);
|
|
|
background: #eff6ff;
|
|
|
font-size: var(--student-fs-button);
|
|
|
font-weight: 800;
|
|
|
|
|
|
&:hover:not(.is-disabled) {
|
|
|
transform: translateY(-1px);
|
|
|
border-color: #2563eb;
|
|
|
background: #dbeafe;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.step-indicator {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 0;
|
|
|
width: calc(100% + 24px);
|
|
|
margin: 0 -12px 32px;
|
|
|
padding: 18px 22px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 18px;
|
|
|
background:
|
|
|
linear-gradient(90deg, #eef5fc, #eef5fc),
|
|
|
#f0f6fd;
|
|
|
box-shadow: inset 0 1px 0 rgba(37, 99, 235, 0.08);
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
|
|
|
.step-tab {
|
|
|
display: flex;
|
|
|
flex: 1 0 145px;
|
|
|
align-items: center;
|
|
|
min-width: 0;
|
|
|
min-height: 66px;
|
|
|
padding: 8px 10px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 8px;
|
|
|
color: #6b7280;
|
|
|
background: #f0f6fd;
|
|
|
box-shadow: inset 0 1px 0 rgba(37, 99, 235, 0.04);
|
|
|
font-family: inherit;
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 800;
|
|
|
cursor: pointer;
|
|
|
text-align: left;
|
|
|
transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #2563eb;
|
|
|
color: var(--student-text);
|
|
|
background: #eff6ff;
|
|
|
box-shadow: 0 7px 18px rgba(30, 60, 100, 0.10), inset 0 1px 0 rgba(37, 99, 235, 0.16);
|
|
|
transform: translateY(-2px);
|
|
|
|
|
|
.step-action {
|
|
|
color: #1d4ed8;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&:focus-visible {
|
|
|
outline: 2px solid #2563eb;
|
|
|
outline-offset: 4px;
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
border-color: #2563eb;
|
|
|
color: var(--student-text);
|
|
|
background: linear-gradient(115deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.08));
|
|
|
box-shadow: 0 0 18px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(37, 99, 235, 0.2);
|
|
|
|
|
|
.step-marker {
|
|
|
border-color: #2563eb;
|
|
|
color: #ffffff;
|
|
|
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
|
|
box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.14), 0 0 18px rgba(37, 99, 235, 0.4);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.complete {
|
|
|
color: #374151;
|
|
|
|
|
|
.step-marker {
|
|
|
border-color: #2563eb;
|
|
|
color: #ffffff;
|
|
|
background: #2563eb;
|
|
|
box-shadow: 0 0 12px #2563eb;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.step-marker {
|
|
|
display: inline-flex;
|
|
|
flex: 0 0 38px;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 38px;
|
|
|
height: 38px;
|
|
|
border: 1px solid #bfdbfe;
|
|
|
border-radius: 50%;
|
|
|
color: #6b7280;
|
|
|
background: #f0f6fd;
|
|
|
box-shadow: inset 0 0 12px rgba(37, 99, 235, 0.08);
|
|
|
font-size: var(--student-fs-caption);
|
|
|
font-weight: 900;
|
|
|
letter-spacing: 0.04em;
|
|
|
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
|
|
|
}
|
|
|
|
|
|
.step-copy {
|
|
|
display: grid;
|
|
|
gap: 4px;
|
|
|
min-width: 0;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
.step-name {
|
|
|
display: -webkit-box;
|
|
|
overflow: hidden;
|
|
|
color: inherit;
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 800;
|
|
|
line-height: 1.25;
|
|
|
text-overflow: ellipsis;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 2;
|
|
|
}
|
|
|
|
|
|
.step-action {
|
|
|
color: #1d4ed8;
|
|
|
font-size: var(--student-fs-caption);
|
|
|
font-weight: 800;
|
|
|
letter-spacing: 0.06em;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.step-connector {
|
|
|
position: relative;
|
|
|
flex: 0 1 40px;
|
|
|
min-width: 18px;
|
|
|
height: 2px;
|
|
|
margin: 0 8px;
|
|
|
overflow: visible;
|
|
|
background: var(--student-panel-border);
|
|
|
}
|
|
|
|
|
|
.step-connector::after {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
right: -1px;
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
border-top: 1px solid #2563eb;
|
|
|
border-right: 1px solid #2563eb;
|
|
|
content: "";
|
|
|
transform: translateY(-50%) rotate(45deg);
|
|
|
}
|
|
|
|
|
|
.step-tab.complete+.step-connector {
|
|
|
background: #2563eb;
|
|
|
box-shadow: 0 0 9px rgba(37, 99, 235, 0.3);
|
|
|
|
|
|
&::after {
|
|
|
border-color: #2563eb;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.step-card {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.step-title-row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
gap: 18px;
|
|
|
margin-bottom: 14px;
|
|
|
|
|
|
h3 {
|
|
|
margin: 4px 0 0;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-h2);
|
|
|
font-weight: 900;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.background-block {
|
|
|
padding: 16px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 22px;
|
|
|
background: #ffffff;
|
|
|
|
|
|
h4 {
|
|
|
margin: 0 0 12px;
|
|
|
color: #374151;
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
|
|
|
ol {
|
|
|
margin: 0;
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
|
|
|
li {
|
|
|
margin-bottom: 8px;
|
|
|
color: #374151;
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.72;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.task-desc {
|
|
|
margin: 22px 0 18px;
|
|
|
color: #374151;
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.8;
|
|
|
}
|
|
|
|
|
|
.swot-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
gap: 16px;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
|
|
|
.swot-card {
|
|
|
min-height: 196px;
|
|
|
padding: 16px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 20px;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.swot-card__title {
|
|
|
min-height: 22px;
|
|
|
margin-bottom: 12px;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
|
|
|
.swot-input,
|
|
|
.long-textarea {
|
|
|
width: 100%;
|
|
|
border: 1px solid #c9d8e8;
|
|
|
outline: none;
|
|
|
resize: vertical;
|
|
|
color: #374151;
|
|
|
background: #ffffff;
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.65;
|
|
|
transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
|
|
|
|
|
|
&::placeholder {
|
|
|
color: #6b7280;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
|
|
|
&:focus {
|
|
|
border-color: #2563eb;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.swot-input {
|
|
|
min-height: 128px;
|
|
|
padding: 12px 14px;
|
|
|
border-radius: 14px;
|
|
|
}
|
|
|
|
|
|
.field-block {
|
|
|
display: block;
|
|
|
margin-top: 22px;
|
|
|
|
|
|
span {
|
|
|
display: block;
|
|
|
margin-bottom: 10px;
|
|
|
color: #374151;
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.8;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.long-textarea {
|
|
|
min-height: 170px;
|
|
|
padding: 14px 16px;
|
|
|
border-radius: 14px;
|
|
|
}
|
|
|
|
|
|
.competitor-block {
|
|
|
margin-top: 28px;
|
|
|
}
|
|
|
|
|
|
.competitor-title {
|
|
|
margin: 0 0 12px;
|
|
|
color: #374151;
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.8;
|
|
|
}
|
|
|
|
|
|
.competitor-table {
|
|
|
overflow-x: auto;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 22px;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.competitor-row {
|
|
|
display: grid;
|
|
|
grid-template-columns: 150px repeat(3, minmax(0, 1fr));
|
|
|
border-top: 1px solid var(--student-panel-border);
|
|
|
|
|
|
>div {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
min-height: 58px;
|
|
|
padding: 12px;
|
|
|
border-right: 1px solid var(--student-panel-border);
|
|
|
color: #374151;
|
|
|
line-height: 1.65;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
> :last-child {
|
|
|
border-right: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.competitor-head {
|
|
|
border-top: 0;
|
|
|
background: #dbeafe;
|
|
|
|
|
|
div {
|
|
|
color: var(--student-text);
|
|
|
font-weight: 900;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.dimension-cell {
|
|
|
color: var(--student-text) !important;
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
|
|
|
.training-actions {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
gap: 52px;
|
|
|
margin-top: 36px;
|
|
|
}
|
|
|
|
|
|
.training-actions :deep(.training-action) {
|
|
|
min-width: 172px;
|
|
|
height: 36px;
|
|
|
min-height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid #2563eb;
|
|
|
border-radius: 8px;
|
|
|
color: #374151;
|
|
|
background: #eff6ff;
|
|
|
box-shadow: none;
|
|
|
font-size: var(--student-fs-h1);
|
|
|
font-weight: 900;
|
|
|
line-height: 1;
|
|
|
letter-spacing: 0;
|
|
|
text-shadow: none;
|
|
|
}
|
|
|
|
|
|
.training-actions :deep(.training-action span) {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
color: inherit;
|
|
|
font-size: inherit;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.training-actions :deep(.training-action--submit),
|
|
|
.training-actions :deep(.training-action--reset),
|
|
|
.training-actions :deep(.training-action--export) {
|
|
|
border-color: #2563eb;
|
|
|
color: #374151;
|
|
|
background: #eff6ff;
|
|
|
}
|
|
|
|
|
|
.training-actions :deep(.training-action:hover:not(.is-disabled)) {
|
|
|
border-color: #1d4ed8;
|
|
|
color: var(--student-text);
|
|
|
background: #dbeafe;
|
|
|
}
|
|
|
|
|
|
.step-actions {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
gap: 14px;
|
|
|
margin-top: 22px;
|
|
|
}
|
|
|
|
|
|
.step-actions :deep(.step-action-btn) {
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border-radius: 8px;
|
|
|
font-size: var(--student-fs-button);
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
|
|
|
.step-actions :deep(.step-action-btn--previous) {
|
|
|
border-color: #bfdbfe;
|
|
|
color: var(--student-text);
|
|
|
background: #eff6ff;
|
|
|
}
|
|
|
|
|
|
.step-actions :deep(.step-action-btn--save),
|
|
|
.step-actions :deep(.step-action-btn--next) {
|
|
|
border-color: #2563eb;
|
|
|
color: #ffffff;
|
|
|
background: linear-gradient(95deg, #2563eb, #1d4ed8);
|
|
|
}
|
|
|
|
|
|
.step-actions :deep(.step-action-btn:hover:not(.is-disabled)) {
|
|
|
transform: translateY(-1px);
|
|
|
}
|
|
|
|
|
|
.step-actions :deep(.step-action-btn.is-disabled) {
|
|
|
opacity: 0.45;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1100px) {
|
|
|
.competitive-page {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 900px) {
|
|
|
.swot-grid {
|
|
|
grid-template-columns: 1fr;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
|
|
|
.competitive-page {
|
|
|
padding: 14px 14px 18px;
|
|
|
}
|
|
|
|
|
|
.training-core {
|
|
|
padding: 18px;
|
|
|
border-radius: 24px;
|
|
|
}
|
|
|
|
|
|
.workbench-head,
|
|
|
.workbench-actions,
|
|
|
.step-title-row,
|
|
|
.step-actions,
|
|
|
.training-actions {
|
|
|
flex-direction: column;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
.workbench-actions :deep(.material-download),
|
|
|
.workbench-actions .outline-action {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.step-indicator {
|
|
|
width: 100%;
|
|
|
margin: 0 0 32px;
|
|
|
padding: 16px;
|
|
|
overflow: visible;
|
|
|
flex-direction: column;
|
|
|
align-items: stretch;
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
|
|
|
.step-tab {
|
|
|
flex: 0 0 auto;
|
|
|
width: 100%;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
.step-connector {
|
|
|
flex: 0 0 20px;
|
|
|
align-self: flex-start;
|
|
|
width: 2px;
|
|
|
min-width: 0;
|
|
|
height: 20px;
|
|
|
margin: 4px 0 4px 18px;
|
|
|
}
|
|
|
|
|
|
.step-connector::after {
|
|
|
top: auto;
|
|
|
right: auto;
|
|
|
bottom: -1px;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%) rotate(135deg);
|
|
|
}
|
|
|
|
|
|
.step-actions,
|
|
|
.training-actions {
|
|
|
gap: 14px;
|
|
|
}
|
|
|
|
|
|
.step-actions :deep(.step-action-btn),
|
|
|
.training-actions :deep(.training-action) {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 760px) {
|
|
|
|
|
|
.competitor-row {
|
|
|
grid-template-columns: 110px repeat(3, minmax(160px, 1fr));
|
|
|
min-width: 760px;
|
|
|
}
|
|
|
|
|
|
.competitor-table {
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.workbench-head--actions-only {
|
|
|
justify-content: flex-end;
|
|
|
margin-bottom: 18px;
|
|
|
padding-bottom: 0;
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
|
|
|
/* 清理：原 scoped 中 step-indicator/step-tab/step-marker/step-connector 的旧浅蓝复杂样式
|
|
|
已被上方 replace_all 替换颜色值，但结构仍偏旧浅蓝风——让下面非 scoped 块 !important 覆盖 */
|
|
|
|
|
|
/* ============================================================
|
|
|
* 共享组件 TrainingStepOneChoiceQuestions 浅色化
|
|
|
* 组件本体为深色且禁止修改，此处用拍平的 :deep() 选择器覆盖
|
|
|
* 选择器必须保留完整类链，确保特异性压过组件 scoped 规则
|
|
|
* ============================================================ */
|
|
|
.competitive-page :deep(.training-step-one-questions) {
|
|
|
margin: 16px 0;
|
|
|
padding: 16px 18px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 12px;
|
|
|
background: var(--student-card-bg);
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions header) {
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
padding-bottom: 12px;
|
|
|
border-bottom: 1px solid #f0f1f3;
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions header span) {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
padding: 3px 10px;
|
|
|
border-radius: 6px;
|
|
|
background: var(--student-accent-soft);
|
|
|
color: var(--student-accent);
|
|
|
font-size: 13px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0.05em;
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions header p) {
|
|
|
margin: 0;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-question) {
|
|
|
padding: 14px 0 2px;
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-question + .training-step-one-question) {
|
|
|
border-top: 1px dashed #e5e7eb;
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-question h4) {
|
|
|
margin: 0 0 10px;
|
|
|
color: var(--student-text);
|
|
|
font-size: 15px;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-question h4 b) {
|
|
|
color: var(--student-accent);
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions .training-step-one-question .el-radio-group) {
|
|
|
display: grid;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions .training-step-one-question .el-radio.is-bordered) {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
min-height: 38px;
|
|
|
margin: 0;
|
|
|
padding: 9px 12px;
|
|
|
color: var(--student-text);
|
|
|
line-height: 1.5;
|
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 8px;
|
|
|
background: #ffffff;
|
|
|
transition: border-color 0.15s ease, background-color 0.15s ease;
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions .training-step-one-question .el-radio.is-bordered:hover) {
|
|
|
border-color: var(--student-accent-light);
|
|
|
background: var(--student-accent-soft);
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions .training-step-one-question .el-radio.is-bordered.is-checked) {
|
|
|
border-color: var(--student-accent);
|
|
|
background: var(--student-accent-soft);
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions .training-step-one-question .el-radio__label) {
|
|
|
color: var(--student-text);
|
|
|
white-space: normal;
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions .training-step-one-question .el-radio__input.is-checked + .el-radio__label) {
|
|
|
color: var(--student-text);
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions .training-step-one-question .el-radio__input.is-checked .el-radio__inner) {
|
|
|
border-color: var(--student-accent);
|
|
|
background: var(--student-accent);
|
|
|
}
|
|
|
|
|
|
.competitive-page :deep(.training-step-one-questions .training-step-one-question strong) {
|
|
|
color: var(--student-accent);
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
/* ============================================================
|
|
|
* 画布背景
|
|
|
* ============================================================ */
|
|
|
#app .studentLayout .app-main:has(.competitive-page) {
|
|
|
background: #ffffff !important;
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 步骤导航：分段连接胶囊
|
|
|
* ============================================================ */
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-indicator {
|
|
|
display: flex !important;
|
|
|
flex-wrap: nowrap !important;
|
|
|
align-items: stretch !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 0 !important;
|
|
|
width: 100% !important;
|
|
|
margin: 0 0 20px !important;
|
|
|
padding: 0 !important;
|
|
|
border: none !important;
|
|
|
border-radius: 0 !important;
|
|
|
background: transparent !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
.step-connector {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
.step-tab {
|
|
|
|
|
|
|
|
|
display: flex !important;
|
|
|
flex-direction: row !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 8px !important;
|
|
|
min-width: 0 !important;
|
|
|
height: auto !important;
|
|
|
min-height: 40px !important;
|
|
|
margin: 0 !important;
|
|
|
padding: 8px 14px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-right: none !important;
|
|
|
border-radius: 0 !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
color: #6b7280 !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
line-height: 1.3 !important;
|
|
|
white-space: nowrap !important;
|
|
|
text-align: center !important;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.16s ease !important;
|
|
|
|
|
|
&:first-child {
|
|
|
border-radius: 8px 0 0 8px !important;
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
border-radius: 0 8px 8px 0 !important;
|
|
|
border-right: 1px solid #e5e7eb !important;
|
|
|
}
|
|
|
|
|
|
.step-marker {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
min-width: 22px !important;
|
|
|
height: 22px !important;
|
|
|
padding: 0 5px !important;
|
|
|
border-radius: 6px !important;
|
|
|
border: none !important;
|
|
|
background: #f3f4f6 !important;
|
|
|
color: #6b7280 !important;
|
|
|
box-shadow: none !important;
|
|
|
font-family: var(--student-font-data), ui-monospace, "SF Mono", Consolas, monospace !important;
|
|
|
font-size: var(--student-fs-body-sm) !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
transition: all 0.16s ease !important;
|
|
|
}
|
|
|
|
|
|
.step-copy {
|
|
|
display: flex !important;
|
|
|
flex-direction: column !important;
|
|
|
gap: 0 !important;
|
|
|
min-width: 0 !important;
|
|
|
margin-left: 0 !important;
|
|
|
}
|
|
|
|
|
|
.step-name {
|
|
|
overflow: hidden !important;
|
|
|
text-overflow: ellipsis !important;
|
|
|
white-space: nowrap !important;
|
|
|
line-height: 1.3 !important;
|
|
|
color: inherit !important;
|
|
|
}
|
|
|
|
|
|
.step-action {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
&:hover:not(.active):not(.complete) {
|
|
|
border-color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
color: #2563eb !important;
|
|
|
z-index: 1 !important;
|
|
|
|
|
|
.step-marker {
|
|
|
background: #2563eb !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.complete:not(.active) {
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #374151 !important;
|
|
|
|
|
|
.step-marker {
|
|
|
background: rgba(43, 164, 113, 0.12) !important;
|
|
|
color: #16915f !important;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #2ba471 !important;
|
|
|
background: #f0fdf6 !important;
|
|
|
z-index: 1 !important;
|
|
|
|
|
|
.step-marker {
|
|
|
background: #2ba471 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
border-color: #2563eb !important;
|
|
|
background: #2563eb !important;
|
|
|
color: #ffffff !important;
|
|
|
font-weight: 700 !important;
|
|
|
z-index: 2 !important;
|
|
|
|
|
|
.step-marker {
|
|
|
background: #ffffff !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
background: #1d4ed8 !important;
|
|
|
border-color: #1d4ed8 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 窄屏：横向滑动 */
|
|
|
@media (max-width: 900px) {
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-indicator {
|
|
|
justify-content: flex-start !important;
|
|
|
overflow-x: auto !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-indicator .step-tab {
|
|
|
flex: 0 0 140px !important;
|
|
|
max-width: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 共用组件换肤：TrainingMaterialButton + outline-action → 教育蓝
|
|
|
* ============================================================ */
|
|
|
.competitive-page .workbench-actions .material-button.el-button {
|
|
|
height: 34px !important;
|
|
|
min-height: 34px !important;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
|
|
border-radius: 8px !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #ffffff !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #2563eb !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
&.is-plain {
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #9ca3af !important;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #9ca3af !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .workbench-actions>button.outline-action {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 6px !important;
|
|
|
height: 34px !important;
|
|
|
min-height: 34px !important;
|
|
|
padding: 0 14px !important;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
|
|
border-radius: 8px !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #ffffff !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
line-height: 1 !important;
|
|
|
transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .workbench-actions>button.outline-action:hover {
|
|
|
border-color: #2563eb !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* step-actions + training-actions（本页用 el-button :deep 覆盖）
|
|
|
* scoped 中已有替换颜色值，此处补充全局 !important 兜底
|
|
|
* ============================================================ */
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-actions .el-button,
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .training-actions .el-button {
|
|
|
height: 34px !important;
|
|
|
min-height: 34px !important;
|
|
|
border-radius: 8px !important;
|
|
|
font-weight: 700 !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
|
|
background: #ffffff !important;
|
|
|
color: #2563eb !important;
|
|
|
padding: 0 14px !important;
|
|
|
transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-actions .el-button:hover:not(.is-disabled),
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .training-actions .el-button:hover:not(.is-disabled) {
|
|
|
transform: translateY(-1px) !important;
|
|
|
border-color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
color: #2563eb !important;
|
|
|
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-actions .step-action-btn--save.el-button,
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-actions .step-action-btn--next.el-button,
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .training-actions .training-action--submit.el-button {
|
|
|
border-color: #2563eb !important;
|
|
|
background: #2563eb !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28) !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-actions .step-action-btn--save.el-button:hover:not(.is-disabled),
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-actions .step-action-btn--next.el-button:hover:not(.is-disabled),
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .training-actions .training-action--submit.el-button:hover:not(.is-disabled) {
|
|
|
border-color: #1d4ed8 !important;
|
|
|
background: #1d4ed8 !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 5px 14px rgba(29, 78, 216, 0.32) !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .training-actions .training-action--reset.el-button {
|
|
|
border-color: #e5e7eb !important;
|
|
|
background: #f3f4f6 !important;
|
|
|
color: #374151 !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .training-actions .training-action--reset.el-button:hover:not(.is-disabled) {
|
|
|
border-color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
color: #2563eb !important;
|
|
|
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .step-actions .el-button.is-disabled,
|
|
|
#app .studentLayout section.app-main:has(.competitive-page) .training-actions .el-button.is-disabled {
|
|
|
opacity: 0.5 !important;
|
|
|
cursor: not-allowed !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
</style>
|