From 3ea98be5a5d093f64dda8609165fcf640287c2bd Mon Sep 17 00:00:00 2001 From: qinzhenpen Date: Sun, 27 Sep 2026 23:58:00 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E7=BB=9F=E4=B8=80=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E4=B8=BA=E6=95=99=E8=82=B2=E8=93=9D=E5=B9=B6?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将原墨黑主题的界面统一更换为教育蓝主题，包括调整颜色变量、按钮样式、表格表头样式、图表颜色等；同时优化了组件的高度、边框、圆角等样式细节，移除了冗余的任务徽章和状态标签，使界面风格更统一简洁。 --- src/assets/styles/student-training.scss | 485 +++++++++++++----- src/views/analysis-of-students/analysis.vue | 14 +- src/views/analysis-of-students/dialogue.vue | 46 +- src/views/assessment/diagnosis.vue | 49 +- src/views/assessment/index.vue | 24 +- src/views/assessment/optimization.vue | 47 +- src/views/channel/index.vue | 54 +- src/views/channel/purchase.vue | 76 +-- src/views/channel/supplier.vue | 72 +-- src/views/components/TrainingAiSidebar.vue | 16 +- src/views/components/TrainingIntro.vue | 148 ++++-- .../components/TrainingMaterialButton.vue | 18 +- src/views/components/TrainingTaskBrief.vue | 13 +- src/views/components/TrainingTaskToolbar.vue | 8 +- src/views/demand/business-feasibility.vue | 27 +- .../competitive-environment-analysis.vue | 43 +- src/views/demand/consumer-behavior.vue | 54 +- src/views/demand/consumer-scenario.vue | 45 +- src/views/demand/environment.vue | 35 +- src/views/demand/feature-conversion.vue | 49 +- src/views/demand/index.vue | 35 +- src/views/demand/industry-demand-analysis.vue | 19 +- src/views/demand/people.vue | 57 +- .../components/bigData.vue | 24 +- .../components/clusterAnalysis.vue | 62 +-- .../components/descriptiveStatistics.vue | 48 +- src/views/exam/index.vue | 2 +- src/views/exam/result.vue | 2 +- src/views/exam/take.vue | 2 +- src/views/foundation/new-product-survey.vue | 56 -- .../product-development-factors.vue | 73 +-- .../product-development-process.vue | 81 +-- .../portraitModel/components/abcAnalysis.vue | 94 ++-- .../components/basketAnalysis.vue | 114 ++-- .../components/funnelAnalysis.vue | 14 +- src/views/product/after-sales-service.vue | 64 +-- .../ProductStandardTrainingPage.vue | 65 +-- src/views/product/differentiation.vue | 77 +-- src/views/product/hardware-cost.vue | 70 +-- src/views/product/index.vue | 92 +--- .../product/market-opportunity-selection.vue | 64 +-- src/views/product/price.vue | 81 +-- src/views/product/requirements-doc.vue | 64 +-- src/views/product/structure.vue | 57 +- src/views/student/index.vue | 14 +- src/views/test-report/index.vue | 4 +- src/views/test/index.vue | 98 ++-- src/views/test/marketing.vue | 6 +- src/views/test/promotion.vue | 45 +- src/views/training/GenericTrainingPage.vue | 139 +++-- src/views/visual-analysis/index.vue | 6 +- 51 files changed, 1229 insertions(+), 1723 deletions(-) diff --git a/src/assets/styles/student-training.scss b/src/assets/styles/student-training.scss index 55287f8..55267e9 100644 --- a/src/assets/styles/student-training.scss +++ b/src/assets/styles/student-training.scss @@ -21,19 +21,23 @@ .student-training-shell { --student-step-height: 40px; --student-step-font: 13px; - --student-action-height: 38px; - --student-action-font: 15px; + --student-action-height: 34px; + --student-action-font: 13px; --student-upload-height: 36px; --student-upload-font: 13px; --student-aux-height: 38px; --student-aux-font: 13px; --student-radius-sm: 6px; --student-radius-pill: 999px; - /* 墨黑极简主题令牌 */ - --student-accent: #1f2937; - --student-accent-deep: #111827; - --student-accent-light: #4b5563; - --student-accent-soft: #f3f4f6; + /* 教育蓝主题令牌（复刻 foundation/new-product-survey.vue） */ + --student-accent: #2563eb; + --student-accent-deep: #1d4ed8; + --student-accent-light: #3b82f6; + --student-accent-soft: #eff6ff; + /* 语义色 */ + --student-danger: #ef4444; + --student-success: #2ba471; + /* 结构色 */ --student-panel-border: #e5e7eb; --student-card-bg: #ffffff; --student-panel-bg: #fafbfc; @@ -55,9 +59,9 @@ --el-input-bg-color: #ffffff; --el-input-text-color: #1f2937; --el-input-border-color: #e5e7eb; - --el-input-hover-border-color: #1f2937; - --el-input-focus-border-color: #1f2937; - --el-input-focus-ring-color: rgba(31, 41, 55, 0.15); + --el-input-hover-border-color: #3b82f6; + --el-input-focus-border-color: #2563eb; + --el-input-focus-ring-color: rgba(59, 130, 246, 0.15); --el-input-disabled-bg-color: #f3f4f6; --el-input-disabled-text-color: #9ca3af; --el-input-disabled-border-color: #e5e7eb; @@ -65,20 +69,52 @@ --el-textarea-bg-color: #ffffff; --el-textarea-text-color: #1f2937; --el-textarea-border-color: #e5e7eb; - --el-textarea-hover-border-color: #1f2937; - --el-textarea-focus-border-color: #1f2937; - --el-textarea-focus-ring-color: rgba(31, 41, 55, 0.15); + --el-textarea-hover-border-color: #3b82f6; + --el-textarea-focus-border-color: #2563eb; + --el-textarea-focus-ring-color: rgba(59, 130, 246, 0.15); --el-select-bg-color: #ffffff; --el-select-text-color: #1f2937; - --el-select-border-color-hover: #1f2937; + --el-select-border-color-hover: #3b82f6; + + /* Element Plus 主色：教育蓝（复刻源页，保证 checkbox/radio/switch/分页等激活色全站一致） */ + --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-fill-color-blank: #ffffff; --el-border-color: #e5e7eb; - --el-border-color-hover: #1f2937; + --el-border-color-hover: #3b82f6; --el-border-radius-base: 6px; } +/* + * 考试考核 / 实训报告 / BI 可视化页不在 .student-training-shell 内， + * 单独接管 Element Plus 主色，保证勾选框、单选、分页等激活色同为教育蓝。 + */ +.student-exams, +.take-page, +.result-page, +.test-report, +.visual-analysis { + --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; +} + /* * 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 @@ -86,13 +122,18 @@ */ #app .studentLayout .app-main:has(.student-training-shell), #app .teacherLayout .app-main:has(.student-training-shell), -#app .studentLayout .app-main:has(.student-home) { - background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important; +#app .studentLayout .app-main:has(.student-home), +#app .studentLayout .app-main:has(.student-exams), +#app .studentLayout .app-main:has(.take-page), +#app .studentLayout .app-main:has(.result-page), +#app .studentLayout .app-main:has(.test-report), +#app .studentLayout .app-main:has(.visual-analysis) { + background: #ffffff !important; } -/* 教师端亮色主题：实训页背景改为浅色，与学生端统一浅色风格 */ +/* 教师端亮色主题：实训页背景改为纯白，与学生端统一 */ #app .teacherLayout .app-main:has(.student-training-shell) { - background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important; + background: #ffffff !important; } #app .studentLayout .app-main:has(.student-training-shell) .student-training-shell, @@ -108,8 +149,7 @@ min-height: calc(100vh - 90px) !important; margin: 0 !important; /* padding 由架构标签 .app-main 提供（sidebar.scss 中 28px 32px 40px 24px），子页面根标签不再叠加 */ - // padding: 10px 10px 16px !important; - // padding: 10px 10px 16px !important; + padding: 0 !important; background: #ffffff !important; /* 应用实训页专用字体栈 + 数字等宽对齐 */ font-family: var(--student-font-base) !important; @@ -135,26 +175,39 @@ */ .student-training-shell > main { min-width: 0 !important; + /* 复刻 new-product-survey：core 为透明网格层，无独立卡片盒模型 */ padding: 14px !important; + border: 0 !important; border-radius: 20px !important; + background: transparent !important; + box-shadow: none !important; } .student-training-shell > main > .task-card, .student-training-shell > main > .process-workbench, .student-training-shell > main > .factors-workbench, .student-training-shell > main > .workbench { + /* 复刻 new-product-survey .task-card：透明工作区，仅内容内缩，不画卡片 */ + margin: 0 !important; padding: 10px 12px !important; + border: 0 !important; border-radius: 16px !important; + background: transparent !important; + box-shadow: none !important; } #app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .process-workbench { + margin: 0 !important; padding: 10px 12px !important; + border: 0 !important; border-radius: 16px !important; + background: transparent !important; + box-shadow: none !important; } #app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .process-step-card { padding: 12px !important; - border-radius: 16px !important; + border-radius: 12px !important; } #app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .task-header { @@ -178,15 +231,45 @@ .student-training-shell .step-card, .student-training-shell .process-step-card, .student-training-shell .factor-step-card { + /* 复刻 new-product-survey .step-card：白卡 12px 内边距、12px 圆角 */ + margin: 0 !important; padding: 12px !important; - border-radius: 16px !important; - padding: 12px !important; - border-radius: 16px !important; + border: 1px solid var(--student-panel-border) !important; + border-radius: 12px !important; + background: var(--student-card-bg) !important; + box-shadow: none !important; } +/* ============================================================ + * task-header 统一（复刻 new-product-survey： + * padding 18px 20px 18px 24px、12px 圆角、白卡、左侧 4px 教育蓝竖条） + * ============================================================ */ .student-training-shell .task-header { - margin-bottom: 12px !important; - margin-bottom: 12px !important; + position: relative !important; + margin: 0 0 12px !important; + padding: 18px 20px 18px 24px !important; + border: 1px solid var(--student-panel-border) !important; + border-radius: 12px !important; + background: var(--student-card-bg) !important; + box-shadow: none !important; + overflow: hidden !important; + + &::before { + content: "" !important; + position: absolute !important; + top: 0 !important; + bottom: 0 !important; + left: 0 !important; + width: 4px !important; + background: var(--student-accent) !important; + } +} + +/* 步骤眉标统一教育蓝（部分页面遗留灰色） */ +.student-training-shell .section-eyebrow { + color: var(--student-accent) !important; + font-size: var(--student-fs-caption) !important; + font-weight: 700 !important; } .student-training-shell .task-header .task-title { @@ -242,8 +325,8 @@ display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; - justify-content: flex-start !important; - gap: 10px !important; + justify-content: center !important; + gap: 0 !important; width: 100% !important; max-width: 100% !important; margin: 4px 0 20px !important; @@ -262,22 +345,28 @@ display: none !important; } +/* 胶囊分段不需要连接线 */ +.student-training-shell .step-indicator .step-connector, +.student-training-shell .comprehensive-step-strip .step-connector { + display: none !important; +} + .student-training-shell .flow-pill, .student-training-shell .step-tab { - flex: 0 0 auto !important; - min-width: auto !important; - max-width: none !important; + flex: 1 1 0 !important; + max-width: 240px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: auto !important; - min-height: 42px !important; + min-height: 40px !important; margin: 0 !important; padding: 8px 14px !important; border: 1px solid #e5e7eb !important; - border-radius: 8px !important; + border-right: none !important; + border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; color: #6b7280 !important; @@ -285,11 +374,19 @@ font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; - white-space: nowrap !important; + white-space: normal !important; text-align: center !important; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .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-bar { display: none !important; } .step-no, @@ -318,32 +415,33 @@ .student-training-shell .flow-pill:hover:not(.active):not(.complete), .student-training-shell .step-tab:hover:not(.active):not(.complete) { - border-color: #1f2937 !important; - background: #f9fafb !important; - color: #1f2937 !important; + border-color: #2563eb !important; + background: #eff6ff !important; + color: #2563eb !important; + z-index: 1 !important; .step-no, &:has(.step-no) .step-no { - background: #1f2937 !important; + background: #2563eb !important; color: #ffffff !important; } } .student-training-shell .flow-pill.complete:not(.active), .student-training-shell .step-tab.complete:not(.active) { - border-color: #dce9e2 !important; + border-color: #e5e7eb !important; color: #374151 !important; .step-no, &:has(.step-no) .step-no { - background: rgba(74,157,110,.12) !important; - color: #3f8a5f !important; + background: rgba(43, 164, 113, 0.12) !important; + color: #16915f !important; } &:hover { - border-color: #4a9d6e !important; - background: #f9fafb !important; - color: #374151 !important; + border-color: #2ba471 !important; + background: #f0fdf6 !important; + z-index: 1 !important; .step-no, &:has(.step-no) .step-no { - background: #4a9d6e !important; + background: #2ba471 !important; color: #ffffff !important; } } @@ -351,22 +449,29 @@ .student-training-shell .flow-pill.active, .student-training-shell .step-tab.active { - border-color: #1f2937 !important; - background: #1f2937 !important; + border-color: #2563eb !important; + background: #2563eb !important; color: #ffffff !important; font-weight: 700 !important; - box-shadow: 0 2px 6px rgba(31,41,55,.16) !important; + box-shadow: none !important; + z-index: 2 !important; .step-no, &:has(.step-no) .step-no { background: #ffffff !important; - color: #1f2937 !important; + color: #2563eb !important; } &:hover { - background: #111827 !important; - border-color: #111827 !important; + background: #1d4ed8 !important; + border-color: #1d4ed8 !important; } } +/* 综合实训导航（GenericTrainingPage）：步骤多、可拖动，tab 固定宽，视觉沿用胶囊 */ +.student-training-shell .comprehensive-step-strip .step-tab { + flex: 0 0 190px !important; + max-width: 190px !important; +} + /* 窄屏步骤导航横向滑动 */ @media (max-width: 900px) { .student-training-shell .step-indicator { @@ -376,8 +481,9 @@ } .student-training-shell .step-tab, .student-training-shell .flow-pill { - flex: 0 0 auto !important; - min-width: 140px !important; + flex: 0 0 140px !important; + min-width: 0 !important; + max-width: none !important; } } @@ -526,10 +632,10 @@ height: 40px !important; min-height: 40px !important; padding: 0 18px !important; - border: 1px solid #1f2937 !important; + border: 1px solid var(--student-accent, #1f2937) !important; border-radius: 10px !important; color: #ffffff !important; - background: #1f2937 !important; + background: var(--student-accent, #1f2937) !important; box-shadow: 0 2px 6px rgba(31,41,55,.16) !important; font-size: var(--student-fs-body) !important; font-weight: 700 !important; @@ -538,8 +644,8 @@ } .training-step-area .el-button:hover { - background: #111827 !important; - border-color: #111827 !important; + background: var(--student-accent-deep, #111827) !important; + border-color: var(--student-accent-deep, #111827) !important; } .training-step-area .el-button span { @@ -565,16 +671,16 @@ justify-content: center !important; min-width: 112px !important; width: auto !important; - height: 40px !important; - min-height: 40px !important; - padding: 0 18px !important; - border: 1px solid #e5e7eb !important; - border-radius: 10px !important; - color: #1f2937 !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; box-shadow: none !important; font-size: var(--student-fs-body) !important; - font-weight: 700 !important; + font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; cursor: pointer; @@ -589,26 +695,26 @@ .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: #1f2937 !important; - color: #1f2937 !important; - background: #f9fafb !important; + border-color: #2563eb !important; + color: #2563eb !important; + background: #eff6ff !important; transform: translateY(-1px) !important; - box-shadow: 0 3px 10px rgba(31,41,55,.14) !important; + box-shadow: 0 2px 6px rgba(37, 99, 235, .12) !important; } .student-training-shell .training-actions .el-button.training-action.primary, .student-training-shell .training-actions button.training-action.primary { - border: 1px solid #1f2937 !important; + border: 1px solid #2563eb !important; color: #ffffff !important; - background: #1f2937 !important; - box-shadow: 0 2px 6px rgba(31,41,55,.16) !important; + background: #2563eb !important; + box-shadow: 0 2px 6px rgba(37, 99, 235, .2) !important; } .student-training-shell .training-actions .el-button.training-action.primary:hover:not(.is-disabled), .student-training-shell .training-actions button.training-action.primary:hover:not(:disabled) { - background: #111827 !important; - border-color: #111827 !important; - box-shadow: 0 4px 12px rgba(31,41,55,.24) !important; + background: #1d4ed8 !important; + border-color: #1d4ed8 !important; + box-shadow: 0 4px 12px rgba(29, 78, 216, .24) !important; } .student-training-shell .training-actions .el-button.training-action.is-disabled, @@ -638,7 +744,7 @@ min-height: var(--student-action-height) !important; padding: 0 16px !important; font-size: var(--student-action-font) !important; - font-weight: 800 !important; + font-weight: 600 !important; line-height: 1 !important; } @@ -658,7 +764,7 @@ min-height: var(--student-action-height) !important; padding: 0 16px !important; font-size: var(--student-action-font) !important; - font-weight: 800 !important; + font-weight: 600 !important; line-height: 1 !important; } @@ -674,42 +780,42 @@ .student-training-shell .training-actions button.training-action, .student-training-shell .task-actions > button, .student-training-shell .taskfooter .el-button { - border: 1px solid rgba(31, 41, 55, 0.4) !important; - border-radius: 10px !important; - color: var(--student-text, #1f2937) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; + border-radius: 8px !important; + color: #2563eb !important; background: #ffffff !important; - font-weight: 700 !important; + font-weight: 600 !important; } .student-training-shell .training-actions .training-action--submit, .student-training-shell .task-actions > .btn-submit, .student-training-shell .task-actions > .btn-primary, .student-training-shell .taskfooter .el-button:first-child { - border-color: var(--student-accent, #1f2937) !important; + border-color: #2563eb !important; color: #ffffff !important; - background: var(--student-accent, #1f2937) !important; - box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28) !important; + background: #2563eb !important; + box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28) !important; } .student-training-shell .training-actions button.training-action:hover:not(:disabled), .student-training-shell .task-actions > button:hover:not(:disabled), .student-training-shell .taskfooter .el-button:hover:not(.is-disabled) { - border-color: var(--student-accent, #1f2937) !important; - background: var(--student-accent-soft, #f3f4f6) !important; - color: var(--student-accent, #1f2937) !important; + border-color: #2563eb !important; + background: #eff6ff !important; + color: #2563eb !important; transform: translateY(-1px) !important; - box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important; + box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important; } .student-training-shell .training-actions .training-action--submit:hover:not(:disabled), .student-training-shell .task-actions > .btn-primary:hover:not(:disabled), .student-training-shell .task-actions > .btn-submit:hover:not(:disabled), .student-training-shell .taskfooter .el-button:first-child:hover:not(.is-disabled) { - border-color: var(--student-accent-deep, #111827) !important; - background: var(--student-accent-deep, #111827) !important; + border-color: #1d4ed8 !important; + background: #1d4ed8 !important; color: #ffffff !important; transform: translateY(-1px) !important; - box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32) !important; + box-shadow: 0 5px 14px rgba(29, 78, 216, 0.32) !important; } .student-training-shell .task-actions > button .el-icon { @@ -728,16 +834,16 @@ gap: 8px !important; min-width: 0 !important; width: auto !important; - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(31, 41, 55, 0.4) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; - color: var(--student-accent, #1f2937) !important; + color: #2563eb !important; background: #ffffff !important; box-shadow: none !important; font-size: 13px !important; - font-weight: 700 !important; + font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important; @@ -750,10 +856,10 @@ .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: var(--student-accent, #1f2937) !important; - color: var(--student-accent, #1f2937) !important; - background: var(--student-accent-soft, #f3f4f6) !important; - box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important; + border-color: #2563eb !important; + color: #2563eb !important; + background: #eff6ff !important; + box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important; } /* @@ -790,27 +896,27 @@ flex: 0 0 auto !important; min-width: 0 !important; width: auto !important; - height: 36px !important; - min-height: 36px !important; - max-height: 36px !important; + height: 34px !important; + min-height: 34px !important; + max-height: 34px !important; margin: 0 !important; padding: 0 14px !important; - border: 1px solid #e5e7eb !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; - color: #1f2937 !important; + color: #2563eb !important; background: #ffffff !important; font-size: 13px !important; - font-weight: 700 !important; + font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important; &:hover { - border-color: #1f2937 !important; - background: #f9fafb !important; - color: #1f2937 !important; + border-color: #2563eb !important; + background: #eff6ff !important; + color: #2563eb !important; transform: translateY(-1px) !important; - box-shadow: 0 3px 10px rgba(31,41,55,.14) !important; + box-shadow: 0 2px 6px rgba(37, 99, 235, .12) !important; } } @@ -825,22 +931,22 @@ gap: 8px !important; min-width: 0 !important; width: auto !important; - height: 40px !important; - min-height: 40px !important; - padding: 0 18px !important; - border: 1px solid #1f2937 !important; - border-radius: 10px !important; + height: 34px !important; + min-height: 34px !important; + padding: 0 14px !important; + border: 1px solid #2563eb !important; + border-radius: 8px !important; color: #ffffff !important; - background: #1f2937 !important; - box-shadow: 0 2px 6px rgba(31,41,55,.16) !important; + background: #2563eb !important; + box-shadow: 0 2px 6px rgba(37, 99, 235, .2) !important; font-size: var(--student-upload-font) !important; - font-weight: 700 !important; + font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; &:hover { - background: #111827 !important; - border-color: #111827 !important; + background: #1d4ed8 !important; + border-color: #1d4ed8 !important; } } @@ -909,9 +1015,9 @@ .legacy-training-page .top_item .el-button.active, .legacy-training-page .top_item .active { transform: none !important; - border-color: #1f2937 !important; + border-color: var(--student-accent, #1f2937) !important; color: #ffffff !important; - background: #1f2937 !important; + background: var(--student-accent, #1f2937) !important; } // Keep long step names inside the navigation rail. Their complete name remains @@ -1242,3 +1348,138 @@ body.student-light-mode { &:hover, &.is-focus { border-color: #1f2937 !important; box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.1) !important; } } } + +/* ============================================================ + * Legacy 实训页 · 教育蓝主题 + * 适用：根元素带 .legacy-training-page 的旧版式学生实训页 + * （demand/user、test/channel、test/marketing、assessment/index） + * 令牌复刻 foundation/new-product-survey.vue 的教育蓝主题。 + * 页面内写死墨黑的全局规则（training-step-area 按钮、top_item active、 + * training-actions 提交按钮等）均已变量化，读取此处令牌自动转蓝。 + * ============================================================ */ +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page { + /* 主色：教育蓝 */ + --student-accent: #2563eb; + --student-accent-deep: #1d4ed8; + --student-accent-light: #3b82f6; + --student-accent-soft: #eff6ff; + --student-accent-border: #bfdbfe; + --student-shadow-color: rgba(15, 23, 42, 0.08); + /* 语义色 */ + --student-danger: #ef4444; + --student-success: #2ba471; + /* 三层次标识色 */ + --student-layer-1: #1d4ed8; + --student-layer-2: #3b82f6; + --student-layer-3: #93c5fd; + /* Element Plus 主色：教育蓝 */ + --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; + /* 紧凑字号梯度：与 new-product-survey 一致（11→17px） */ + --student-fs-display: 17px; + --student-fs-h1: 15px; + --student-fs-h2: 14px; + --student-fs-h3: 13px; + --student-fs-body: 13px; + --student-fs-body-sm: 12px; + --student-fs-caption: 11px; + --student-fs-button: 13px; + --student-fs-button-lg: 13px; + --student-fs-data: 14px; +} + +/* legacy 页顶部工具栏按钮（TrainingTaskToolbar）：教育蓝统一， + 覆盖组件 scoped 的暗色默认样式 */ +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button.el-button, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button.el-button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 6px !important; + min-height: 34px !important; + height: 34px !important; + padding: 0 12px !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; + border-radius: 8px !important; + color: #2563eb !important; + background: #ffffff !important; + box-shadow: none !important; + text-shadow: none !important; + font-size: 13px !important; + font-weight: 600 !important; + transition: all 0.16s ease !important; +} + +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button.el-button .el-icon, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button.el-button .el-icon { + font-size: 14px !important; + color: inherit !important; +} + +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button.el-button:hover, +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button.el-button:focus, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button.el-button:hover, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button.el-button:focus { + border-color: #2563eb !important; + color: #2563eb !important; + background: #eff6ff !important; + transform: translateY(-1px) !important; + box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important; +} + +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button--submit.el-button, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button--submit.el-button { + border-color: #2563eb !important; + color: #ffffff !important; + background: #2563eb !important; + box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2), 0 2px 8px rgba(37, 99, 235, 0.15) !important; +} + +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button--submit.el-button:hover, +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button--submit.el-button:focus, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button--submit.el-button:hover, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page .task-toolbar-button--submit.el-button:focus { + border-color: #1d4ed8 !important; + color: #ffffff !important; + background: #1d4ed8 !important; + box-shadow: 0 2px 6px rgba(29, 78, 216, 0.3), 0 4px 12px rgba(29, 78, 216, 0.22) !important; +} + +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page .training-task-toolbar .material-button.el-button, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page .training-task-toolbar .material-button.el-button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 6px !important; + min-height: 34px !important; + height: 34px !important; + padding: 0 12px !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; + border-radius: 8px !important; + color: #2563eb !important; + background: #ffffff !important; + box-shadow: none !important; + font-size: 13px !important; + font-weight: 600 !important; + transition: all 0.16s ease !important; +} + +#app .studentLayout .app-main:has(.legacy-training-page) .legacy-training-page .training-task-toolbar .material-button.el-button:hover, +#app .teacherLayout .app-main:has(.legacy-training-page) .legacy-training-page .training-task-toolbar .material-button.el-button:hover { + border-color: #2563eb !important; + color: #2563eb !important; + background: #eff6ff !important; + transform: translateY(-1px) !important; + box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important; +} diff --git a/src/views/analysis-of-students/analysis.vue b/src/views/analysis-of-students/analysis.vue index 1648d96..847a866 100644 --- a/src/views/analysis-of-students/analysis.vue +++ b/src/views/analysis-of-students/analysis.vue @@ -198,7 +198,7 @@ onMounted(() => { });

AI 实训教案

${marked.parse(item.content, { gfm: true, breaks: true })}`; const blob = new Blob(["\ufeff", documentHtml], { type: "application/msword;charset=utf-8" }); @@ -268,7 +268,7 @@ const exportData = () => { }; diff --git a/src/views/components/TrainingMaterialButton.vue b/src/views/components/TrainingMaterialButton.vue index 5ecb1c3..80833f6 100644 --- a/src/views/components/TrainingMaterialButton.vue +++ b/src/views/components/TrainingMaterialButton.vue @@ -123,25 +123,25 @@ async function downloadMaterial(material, label) { align-items: center; justify-content: center; gap: 6px; - min-height: 40px; + min-height: 34px; padding: 0 14px; - border: 1px solid rgba(31, 41, 55, 0.4); - border-radius: 10px; - color: #1f2937; + border: 1px solid rgba(37, 99, 235, 0.35); + border-radius: 8px; + color: #2563eb; background: #ffffff; font-family: inherit; font-size: 13px; - font-weight: 700; + font-weight: 600; cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .material-button:hover { - color: #1f2937; - border-color: #1f2937; - background: #f3f4f6; + color: #2563eb; + border-color: #2563eb; + background: #eff6ff; transform: translateY(-1px); - box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12); + box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12); } .image-preview { diff --git a/src/views/components/TrainingTaskBrief.vue b/src/views/components/TrainingTaskBrief.vue index c9fead8..ac3a72f 100644 --- a/src/views/components/TrainingTaskBrief.vue +++ b/src/views/components/TrainingTaskBrief.vue @@ -130,12 +130,13 @@ function normalizeGoals(value) { diff --git a/src/views/demand/business-feasibility.vue b/src/views/demand/business-feasibility.vue index 52bbe23..8bcc7f0 100644 --- a/src/views/demand/business-feasibility.vue +++ b/src/views/demand/business-feasibility.vue @@ -3,7 +3,6 @@
- DEMAND INSIGHT · BUSINESS CASE

{{ taskTitle }}

{{ taskBackground }} @@ -547,18 +546,6 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ task: taskTit min-width: 0; } -.task-badge { - display: inline-flex; - align-items: center; - padding: 4px 12px; - border: 1px solid var(--student-panel-border); - border-radius: 999px; - color: var(--student-accent-deep); - background: var(--student-accent-soft); - font-size: 12px; - font-weight: 700; - letter-spacing: 0; -} .task-title { margin: 0; @@ -643,7 +630,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ task: taskTit gap: 6px; min-height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-accent); background: #ffffff; @@ -1556,9 +1543,9 @@ td:last-child { * 顶部工具栏：TrainingMaterialButton 资料按钮 → 教育蓝 * ============================================================ */ .feasibility-page .workbench-actions .material-button.el-button { - height: 36px !important; - min-height: 36px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + 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; @@ -1593,10 +1580,10 @@ td:last-child { align-items: center !important; justify-content: center !important; gap: 6px !important; - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; diff --git a/src/views/demand/competitive-environment-analysis.vue b/src/views/demand/competitive-environment-analysis.vue index 2773b54..cd1b1b7 100644 --- a/src/views/demand/competitive-environment-analysis.vue +++ b/src/views/demand/competitive-environment-analysis.vue @@ -3,7 +3,6 @@

- 核心实训 · 市场洞察与需求分析

{{ taskTitle }}

{{ taskBackground }} @@ -226,20 +225,6 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n text-transform: uppercase; } -.task-badge { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 4px 12px; - border: 1px solid var(--student-panel-border); - border-radius: 999px; - color: var(--student-accent-deep); - background: var(--student-accent-soft); - font-size: 12px; - font-weight: 700; - text-transform: none; - letter-spacing: 0; -} .task-header h1 { margin: 0; @@ -601,7 +586,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n min-height: 36px; height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-text); background: #ffffff; @@ -650,7 +635,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n min-height: 36px; height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-accent); background: #ffffff; @@ -831,7 +816,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n min-height: 34px !important; height: 34px !important; padding: 0 12px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -863,9 +848,9 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n * 顶部工具栏：TrainingMaterialButton 资料按钮 → 教育蓝 * ============================================================ */ .competitive-analysis-page .analysis-toolbar .material-button.el-button { - height: 36px !important; - min-height: 36px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + 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; @@ -900,10 +885,10 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n align-items: center !important; justify-content: center !important; gap: 6px !important; - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -934,11 +919,11 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n align-items: center !important; justify-content: center !important; gap: 8px !important; - height: 40px !important; - min-height: 40px !important; - padding: 0 18px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; - border-radius: 10px !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: 13px !important; diff --git a/src/views/demand/consumer-behavior.vue b/src/views/demand/consumer-behavior.vue index 1261567..8045509 100644 --- a/src/views/demand/consumer-behavior.vue +++ b/src/views/demand/consumer-behavior.vue @@ -3,7 +3,6 @@

- 市场洞察与需求分析

{{ taskTitle }}

{{ taskBackground }} @@ -1032,17 +1031,6 @@ function downloadSurveyReportTemplate() { min-width: 0; } -.task-badge { - display: inline-flex; - align-items: center; - padding: 4px 12px; - border: 1px solid var(--student-panel-border); - border-radius: 999px; - color: var(--student-accent-deep); - background: var(--student-accent-soft); - font-size: 12px; - font-weight: 700; -} .task-title { margin: 0; @@ -1134,7 +1122,7 @@ function downloadSurveyReportTemplate() { min-height: 36px; height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-accent); background: #ffffff; @@ -1207,7 +1195,7 @@ function downloadSurveyReportTemplate() { justify-self: end; min-width: 124px; height: 36px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 10px; color: var(--student-accent); background: #ffffff; @@ -1234,7 +1222,7 @@ function downloadSurveyReportTemplate() { min-width: 120px; height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 10px; color: var(--student-accent); background: #ffffff; @@ -1423,7 +1411,7 @@ function downloadSurveyReportTemplate() { min-width: 140px; height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 10px; color: var(--student-accent); background: #ffffff; @@ -1555,7 +1543,7 @@ function downloadSurveyReportTemplate() { } .questionnaire-editor-add { - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 10px; color: var(--student-accent); background: #ffffff; @@ -1945,10 +1933,10 @@ function downloadSurveyReportTemplate() { #app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions .el-button.training-action, #app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions button.training-action { min-width: 140px !important; - min-height: 36px !important; - height: 36px !important; + min-height: 34px !important; + height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: var(--student-accent) !important; background: #ffffff !important; @@ -1987,10 +1975,10 @@ function downloadSurveyReportTemplate() { /* === nav-action (step-actions) === */ #app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action { - min-height: 36px !important; - height: 36px !important; + min-height: 34px !important; + height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: var(--student-accent) !important; background: #ffffff !important; @@ -2047,9 +2035,9 @@ function downloadSurveyReportTemplate() { * 顶部工具栏：TrainingMaterialButton 资料按钮 → 教育蓝 * ============================================================ */ .consumer-behavior-page .workbench-actions .material-button.el-button { - height: 36px !important; - min-height: 36px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + 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; @@ -2084,10 +2072,10 @@ function downloadSurveyReportTemplate() { align-items: center !important; justify-content: center !important; gap: 6px !important; - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -2110,7 +2098,7 @@ function downloadSurveyReportTemplate() { * ============================================================ */ #app .studentLayout section.app-main:has(.consumer-behavior-page) .el-button.hypothesis-action, #app .studentLayout section.app-main:has(.consumer-behavior-page) .el-button.training-eight-action { - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; color: #2563eb !important; background: #ffffff !important; box-shadow: none !important; @@ -2129,7 +2117,7 @@ function downloadSurveyReportTemplate() { background: #ffffff !important; &:hover:not(.is-disabled) { - border-color: rgba(37, 99, 235, 0.45) !important; + border-color: rgba(37, 99, 235, 0.35) !important; color: #2563eb !important; background: #eff6ff !important; } @@ -2142,7 +2130,7 @@ function downloadSurveyReportTemplate() { #app .studentLayout section.app-main:has(.consumer-behavior-page) .el-button.questionnaire-editor-launcher__action, #app .studentLayout section.app-main:has(.consumer-behavior-page) .el-button.questionnaire-template-action, #app .studentLayout section.app-main:has(.consumer-behavior-page) .el-button.survey-report-template-action { - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; color: #2563eb !important; background: #ffffff !important; box-shadow: none !important; @@ -2161,7 +2149,7 @@ function downloadSurveyReportTemplate() { * ============================================================ */ body.student-light-mode .el-button:not(.is-text):not(.is-link):not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not(.el-button--warning):not(.task-toolbar-button):not(.material-button).questionnaire-editor-add { min-height: 36px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 10px !important; color: #2563eb !important; background: #ffffff !important; diff --git a/src/views/demand/consumer-scenario.vue b/src/views/demand/consumer-scenario.vue index 8954147..c8224ca 100644 --- a/src/views/demand/consumer-scenario.vue +++ b/src/views/demand/consumer-scenario.vue @@ -3,7 +3,6 @@

-
市场洞察与需求分析

{{ taskTitle }}

{{ taskBackground }} @@ -1013,18 +1012,6 @@ function exportOutcome() { flex: 1 1 auto; } -.task-badge { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 4px 12px; - border: 1px solid var(--student-panel-border); - border-radius: 999px; - color: var(--student-accent-deep); - background: var(--student-accent-soft); - font-size: 12px; - font-weight: 700; -} .task-title { margin: 0; @@ -1603,7 +1590,7 @@ function exportOutcome() { min-width: 112px; min-height: 36px; padding: 0 18px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 10px; color: var(--student-text); background: #ffffff; @@ -1843,9 +1830,9 @@ function exportOutcome() { * 顶部工具栏：TrainingMaterialButton 资料按钮 → 教育蓝 * ============================================================ */ .consumer-scenario-page .workbench-actions .material-button.el-button { - height: 36px !important; - min-height: 36px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + 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; @@ -1880,10 +1867,10 @@ function exportOutcome() { align-items: center !important; justify-content: center !important; gap: 6px !important; - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -1906,12 +1893,12 @@ function exportOutcome() { * 底部提交/清空按钮：training-actions * ============================================================ */ #app .studentLayout section.app-main:has(.consumer-scenario-page) .training-actions .el-button.training-action { - min-width: 140px !important; - min-height: 36px !important; - height: 36px !important; - padding: 0 20px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; - border-radius: 10px !important; + min-width: 112px !important; + min-height: 34px !important; + 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: 13px !important; @@ -1962,10 +1949,10 @@ function exportOutcome() { * ============================================================ */ #app .studentLayout section.app-main:has(.consumer-scenario-page) .journey-map-actions .el-button, #app .studentLayout section.app-main:has(.consumer-scenario-page) .journey-map-helper .el-button { - min-height: 36px !important; - height: 36px !important; + min-height: 34px !important; + height: 34px !important; padding: 0 16px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; diff --git a/src/views/demand/environment.vue b/src/views/demand/environment.vue index 7f26dde..55f1f56 100644 --- a/src/views/demand/environment.vue +++ b/src/views/demand/environment.vue @@ -2,7 +2,6 @@

-
市场洞察与需求分析

{{ taskTitle }}

@@ -483,18 +482,6 @@ function exportOutcome() { } } -.task-badge { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 4px 12px; - border: 1px solid var(--student-panel-border); - border-radius: 999px; - color: var(--student-accent-deep); - background: var(--student-accent-soft); - font-size: 12px; - font-weight: 700; -} .task-title { margin: 0; @@ -1293,9 +1280,9 @@ function exportOutcome() { * 共用组件换肤：TrainingMaterialButton + outline-action → 教育蓝 * ============================================================ */ .competitive-page .workbench-actions .material-button.el-button { - height: 36px !important; - min-height: 36px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + 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; @@ -1327,10 +1314,10 @@ function exportOutcome() { align-items: center !important; justify-content: center !important; gap: 6px !important; - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -1354,15 +1341,15 @@ function exportOutcome() { * ============================================================ */ #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: 40px !important; - min-height: 40px !important; - border-radius: 10px !important; + height: 34px !important; + min-height: 34px !important; + border-radius: 8px !important; font-weight: 700 !important; font-size: 13px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; background: #ffffff !important; color: #2563eb !important; - padding: 0 18px !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; } diff --git a/src/views/demand/feature-conversion.vue b/src/views/demand/feature-conversion.vue index 2027c5d..0aed0ea 100644 --- a/src/views/demand/feature-conversion.vue +++ b/src/views/demand/feature-conversion.vue @@ -3,7 +3,6 @@
-
市场洞察与需求分析

{{ taskTitle }}

{{ taskBackground }} @@ -799,20 +798,6 @@ function exportOutcome() { flex: 1 1 auto; } -.task-badge { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 4px 12px; - border: 1px solid var(--student-panel-border); - border-radius: 999px; - color: var(--student-accent-deep); - background: var(--student-accent-soft); - font-size: 12px; - font-weight: 700; - text-transform: none; - letter-spacing: 0; -} .task-title { margin: 0; @@ -904,7 +889,7 @@ function exportOutcome() { min-height: 36px; height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-accent); background: #ffffff; @@ -1315,7 +1300,7 @@ function exportOutcome() { min-height: 36px; height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-text); background: #ffffff; @@ -1560,9 +1545,9 @@ function exportOutcome() { * 共用组件换肤：TrainingMaterialButton 资料按钮 → 教育蓝 * ============================================================ */ .feature-conversion-page .workbench-actions .material-button.el-button { - height: 36px !important; - min-height: 36px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + 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; @@ -1597,10 +1582,10 @@ function exportOutcome() { align-items: center !important; justify-content: center !important; gap: 6px !important; - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -1631,11 +1616,11 @@ function exportOutcome() { align-items: center !important; justify-content: center !important; gap: 8px !important; - height: 40px !important; - min-height: 40px !important; - padding: 0 18px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; - border-radius: 10px !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: 13px !important; @@ -1677,7 +1662,7 @@ function exportOutcome() { min-height: 34px !important; height: 34px !important; padding: 0 12px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -1715,10 +1700,10 @@ function exportOutcome() { #app .studentLayout section.app-main:has(.feature-conversion-page) .training-actions .el-button.training-action { min-width: 140px !important; - min-height: 36px !important; - height: 36px !important; + min-height: 34px !important; + height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; diff --git a/src/views/demand/index.vue b/src/views/demand/index.vue index b451786..a7146a4 100644 --- a/src/views/demand/index.vue +++ b/src/views/demand/index.vue @@ -2,7 +2,6 @@

-
市场洞察与需求分析

{{ taskTitle }}

@@ -487,18 +486,6 @@ function exportOutcome() { } } -.task-badge { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 4px 12px; - border: 1px solid var(--student-panel-border); - border-radius: 999px; - color: var(--student-accent-deep); - background: var(--student-accent-soft); - font-size: 12px; - font-weight: 700; -} .task-title { margin: 0; @@ -1296,9 +1283,9 @@ function exportOutcome() { * 共用组件换肤：TrainingMaterialButton + outline-action → 教育蓝 * ============================================================ */ .industry-demand-page .workbench-actions .material-button.el-button { - height: 36px !important; - min-height: 36px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + 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; @@ -1330,10 +1317,10 @@ function exportOutcome() { align-items: center !important; justify-content: center !important; gap: 6px !important; - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -1356,15 +1343,15 @@ function exportOutcome() { * ============================================================ */ #app .studentLayout section.app-main:has(.industry-demand-page) .step-actions .el-button, #app .studentLayout section.app-main:has(.industry-demand-page) .training-actions .el-button { - height: 40px !important; - min-height: 40px !important; - border-radius: 10px !important; + height: 34px !important; + min-height: 34px !important; + border-radius: 8px !important; font-weight: 700 !important; font-size: 13px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; background: #ffffff !important; color: #2563eb !important; - padding: 0 18px !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; } diff --git a/src/views/demand/industry-demand-analysis.vue b/src/views/demand/industry-demand-analysis.vue index 4e74656..4fd5784 100644 --- a/src/views/demand/industry-demand-analysis.vue +++ b/src/views/demand/industry-demand-analysis.vue @@ -3,7 +3,6 @@
- 核心实训 · 市场洞察与需求分析

{{ taskTitle }}

{{ taskBackground }} @@ -305,20 +304,6 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n text-transform: uppercase; } -.task-badge { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 4px 12px; - border: 1px solid var(--student-panel-border); - border-radius: 999px; - color: var(--student-accent-deep); - background: var(--student-accent-soft); - font-size: 12px; - font-weight: 700; - text-transform: none; - letter-spacing: 0; -} .task-title { margin: 0; @@ -624,7 +609,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n min-height: 36px; height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-text); background: #ffffff; @@ -831,7 +816,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n min-height: 34px !important; height: 34px !important; padding: 0 12px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; diff --git a/src/views/demand/people.vue b/src/views/demand/people.vue index 93e7d72..a7e8ee4 100644 --- a/src/views/demand/people.vue +++ b/src/views/demand/people.vue @@ -3,7 +3,6 @@

- 市场洞察与需求分析

{{ taskTitle }}

{{ taskBackground }} @@ -959,18 +958,6 @@ function exportOutcome() { min-width: 0; } -.task-badge { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 4px 12px; - border: 1px solid var(--student-panel-border); - border-radius: 999px; - color: var(--student-accent-deep); - background: var(--student-accent-soft); - font-size: 12px; - font-weight: 700; -} .task-title { margin: 0; @@ -1082,7 +1069,7 @@ function exportOutcome() { min-height: 36px; height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-accent); background: #ffffff; @@ -1211,7 +1198,7 @@ function exportOutcome() { .preview-action { min-height: 40px; padding: 0 18px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 10px; color: var(--student-accent); background: #ffffff; @@ -1543,7 +1530,7 @@ function exportOutcome() { .interview-tab { min-height: 36px; padding: 0 16px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 10px; color: var(--student-accent); background: #ffffff; @@ -1758,7 +1745,7 @@ function exportOutcome() { .market-segment-toolbar__actions :deep(.segment-action) { min-height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-accent); background: #ffffff; @@ -1776,7 +1763,7 @@ function exportOutcome() { &:hover:not(.is-disabled) { color: var(--student-accent); - border-color: rgba(37, 99, 235, 0.45); + border-color: rgba(37, 99, 235, 0.35); } } } @@ -1962,7 +1949,7 @@ function exportOutcome() { .step-actions :deep(.step-action) { min-height: 40px; padding: 0 18px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 10px; color: var(--student-accent); background: #ffffff; @@ -2014,7 +2001,7 @@ function exportOutcome() { height: 36px; min-height: 36px; padding: 0 14px; - border: 1px solid rgba(37, 99, 235, 0.45); + border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 8px; color: var(--student-accent); background: #ffffff; @@ -2265,9 +2252,9 @@ function exportOutcome() { * 顶部工具栏：TrainingMaterialButton 资料按钮 → 教育蓝 * ============================================================ */ .target-profile-page .workbench-actions .material-button.el-button { - height: 36px !important; - min-height: 36px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + 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; @@ -2302,10 +2289,10 @@ function exportOutcome() { align-items: center !important; justify-content: center !important; gap: 6px !important; - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -2340,7 +2327,7 @@ function exportOutcome() { } #app .studentLayout section.app-main:has(.target-profile-page) .el-button.preview-action { - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; color: #2563eb !important; background: #ffffff !important; box-shadow: none !important; @@ -2357,7 +2344,7 @@ function exportOutcome() { * 细分市场行操作按钮（segment-action） * ============================================================ */ #app .studentLayout section.app-main:has(.target-profile-page) .market-segment-toolbar__actions .el-button.segment-action { - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; color: #2563eb !important; background: #ffffff !important; box-shadow: none !important; @@ -2374,7 +2361,7 @@ function exportOutcome() { background: #ffffff !important; &:hover:not(.is-disabled) { - border-color: rgba(37, 99, 235, 0.45) !important; + border-color: rgba(37, 99, 235, 0.35) !important; color: #2563eb !important; background: #eff6ff !important; } @@ -2385,10 +2372,10 @@ function exportOutcome() { * 底部步骤按钮：step-action * ============================================================ */ #app .studentLayout section.app-main:has(.target-profile-page) .step-actions .el-button.step-action { - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; @@ -2433,10 +2420,10 @@ function exportOutcome() { * 底部提交/清空：training-actions * ============================================================ */ #app .studentLayout section.app-main:has(.target-profile-page) .training-actions .el-button.training-action { - height: 36px !important; - min-height: 36px !important; + height: 34px !important; + min-height: 34px !important; padding: 0 14px !important; - border: 1px solid rgba(37, 99, 235, 0.45) !important; + border: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 8px !important; color: #2563eb !important; background: #ffffff !important; diff --git a/src/views/digitalMarketingAlgorithms/components/bigData.vue b/src/views/digitalMarketingAlgorithms/components/bigData.vue index cbf05ee..2ed08c6 100644 --- a/src/views/digitalMarketingAlgorithms/components/bigData.vue +++ b/src/views/digitalMarketingAlgorithms/components/bigData.vue @@ -250,13 +250,13 @@ onMounted(() => { background: #f9fafb; span { - color: #1f2937; + color: #2563eb; } } } .is-active { - background: #1f2937; + background: #2563eb; span { color: #ffffff; @@ -264,7 +264,7 @@ onMounted(() => { } &:hover { - background: #111827; + background: #1d4ed8; span { color: #ffffff; @@ -284,10 +284,10 @@ onMounted(() => { :deep(.el-button) { width: 100%; height: 38px; - border: 1px solid #1f2937; + border: 1px solid #2563eb; border-radius: 10px; color: #ffffff; - background: #1f2937; + background: #2563eb; box-shadow: none; font-size: 13px; font-weight: 700; @@ -295,8 +295,8 @@ onMounted(() => { :deep(.el-button:hover), :deep(.el-button:focus) { - border-color: #111827; - background: #111827; + border-color: #1d4ed8; + background: #1d4ed8; color: #ffffff; } } @@ -362,7 +362,7 @@ onMounted(() => { .bi-data-page :deep(.el-pagination) { --el-pagination-bg-color: transparent; --el-pagination-button-bg-color: #ffffff; - --el-pagination-hover-color: #1f2937; + --el-pagination-hover-color: #2563eb; color: #4b5563; font-size: 13px; @@ -384,14 +384,14 @@ onMounted(() => { button:hover, .el-pager li:hover { - border-color: #1f2937; - color: #1f2937; + border-color: #2563eb; + color: #2563eb; background: #f9fafb; } .el-pager li.is-active { - border-color: #1f2937; - background: #1f2937; + border-color: #2563eb; + background: #2563eb; color: #ffffff; } diff --git a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue index 6b06e87..34f14a1 100644 --- a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue +++ b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue @@ -1,8 +1,8 @@