diff --git a/src/App.vue b/src/App.vue index 8efdd62..549c19f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -17,6 +17,14 @@ import cache from "@/plugins/cache"; import { removeUserInfo, removeToken } from "@/utils/auth.js"; const stepNameSelector = ".step-tab .step-copy > strong, .step-tab .step-copy > b, .step-tab .step-copy > .step-name"; +const stepActionSelector = [ + ".student-training-shell .step-actions > button", + ".student-training-shell .step-navigation > button", + ".student-training-shell .footer-actions > button", + ".student-training-shell .training-actions > button", + ".student-training-shell .task-actions > button", + ".student-training-shell .taskfooter > button", +].join(","); let stepNameObserver; let stepTitleRefreshQueued = false; @@ -27,11 +35,24 @@ function addStepNameTitles() { }); } +function normalizeStepActionStyles() { + document.querySelectorAll(stepActionSelector).forEach((button) => { + const label = String(button.textContent || "").replace(/\s+/g, " ").trim(); + const isPrevious = label.includes("上一步"); + const isPrimary = label.includes("保存当前进度") || label.includes("下一步"); + if (!isPrevious && !isPrimary) return; + button.classList.add("student-step-action"); + button.classList.toggle("student-step-action--primary", isPrimary); + button.classList.toggle("student-step-action--secondary", isPrevious); + }); +} + function queueStepNameTitleRefresh() { if (stepTitleRefreshQueued) return; stepTitleRefreshQueued = true; requestAnimationFrame(() => { addStepNameTitles(); + normalizeStepActionStyles(); stepTitleRefreshQueued = false; }); } diff --git a/src/assets/styles/student-training.scss b/src/assets/styles/student-training.scss index 9bb0e53..57ef44f 100644 --- a/src/assets/styles/student-training.scss +++ b/src/assets/styles/student-training.scss @@ -866,3 +866,55 @@ width: 100% !important; } } + +/* + * 页面历史上使用了多套按钮类名。由 App.vue 为步骤操作标记统一语义类, + * 这里作为最终覆盖层,保证所有学生端底部导航的尺寸、圆角和主次层级一致。 + */ +.student-training-shell .step-actions > button.student-step-action, +.student-training-shell .step-navigation > button.student-step-action, +.student-training-shell .footer-actions > button.student-step-action, +.student-training-shell .training-actions > button.student-step-action, +.student-training-shell .task-actions > button.student-step-action, +.student-training-shell .taskfooter > button.student-step-action { + box-sizing: border-box !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-width: 132px !important; + height: 42px !important; + min-height: 42px !important; + margin: 0 !important; + padding: 0 18px !important; + border: 1px solid #2cc9ff !important; + border-radius: 999px !important; + color: #dff8ff !important; + background: rgba(8, 87, 121, 0.55) !important; + box-shadow: none !important; + font-size: 15px !important; + font-weight: 800 !important; + line-height: 1 !important; + letter-spacing: 0 !important; +} + +.student-training-shell .step-actions > button.student-step-action--primary, +.student-training-shell .step-navigation > button.student-step-action--primary, +.student-training-shell .footer-actions > button.student-step-action--primary, +.student-training-shell .training-actions > button.student-step-action--primary, +.student-training-shell .task-actions > button.student-step-action--primary, +.student-training-shell .taskfooter > button.student-step-action--primary { + border-color: #36d9ff !important; + color: #ffffff !important; + background: linear-gradient(110deg, #0eaae4, #0572ac) !important; +} + +.student-training-shell .step-actions > button.student-step-action--secondary, +.student-training-shell .step-navigation > button.student-step-action--secondary, +.student-training-shell .footer-actions > button.student-step-action--secondary, +.student-training-shell .training-actions > button.student-step-action--secondary, +.student-training-shell .task-actions > button.student-step-action--secondary, +.student-training-shell .taskfooter > button.student-step-action--secondary { + border-color: #2cc9ff !important; + color: #dff8ff !important; + background: rgba(8, 87, 121, 0.55) !important; +} diff --git a/src/views/assessment/diagnosis.vue b/src/views/assessment/diagnosis.vue index 6a563fc..40149e4 100644 --- a/src/views/assessment/diagnosis.vue +++ b/src/views/assessment/diagnosis.vue @@ -4,7 +4,7 @@
核心实训 · 产品上线与运营推广

{{ taskTitle }}

-

产品问题诊断与迭代

{{ currentStep === 1 ? '全链路转化漏斗诊断' : currentStep === 2 ? '用户评论根因分析' : 'AB 测试验证方案' }}

+

产品问题诊断与迭代

{{ currentStep === 1 ? '全链路转化漏斗诊断' : currentStep === 2 ? '用户评论根因分析' : 'AB 测试验证方案' }}