feat(teacher-end): 实现教师端亮色主题适配

1.  新增教师端亮色主题全局样式，替换原有暗色侧边栏与背景
2.  调整顶部导航栏样式，区分教师端与管理员端配色
3.  优化实训页、折线图饼图配色适配亮色主题
4.  修复弹窗下拉框样式不匹配问题，添加全局主题类标识
5.  移除教师端默认暗色模式配置，统一使用亮色风格

src/assets/styles/index.scss

@@ -761,3 +761,6 @@ aside {
 .el-table .el-table__cell {
     border-radius: 0 !important;
 }
+
+/* 教师端亮色主题适配（最后导入，确保覆盖各业务页暗色 scoped 样式与全局暗色规则） */
+@import "./teacher-light.scss";

src/assets/styles/sidebar.scss

@@ -586,3 +586,141 @@
     }
   }
 }
+
+/*
+ * 教师端亮色主题覆盖
+ * 取代 #app .studentLayout, #app .teacherLayout 共享的暗色背景
+ * 仅作用于 .teacherLayout，保留学生端原有暗黑风格
+ */
+#app .teacherLayout {
+  // 整体浅色背景 + 蓝色点缀，营造明亮的科技感
+  background:
+    radial-gradient(circle at 10% 20%, rgba(30, 136, 229, 0.07), transparent 34%),
+    radial-gradient(circle at 88% 8%, rgba(66, 165, 245, 0.05), transparent 28%),
+    linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
+
+  .main-container {
+    background:
+      radial-gradient(circle at 10% 20%, rgba(30, 136, 229, 0.06), transparent 34%),
+      radial-gradient(circle at 88% 8%, rgba(66, 165, 245, 0.04), transparent 28%),
+      linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
+  }
+
+  .app-main,
+  .teacher-main {
+    background:
+      radial-gradient(circle at 12% 18%, rgba(30, 136, 229, 0.05), transparent 34%),
+      radial-gradient(circle at 78% 6%, rgba(66, 165, 245, 0.04), transparent 28%),
+      linear-gradient(135deg, #f7fafd 0%, #eef4fb 48%, #f5f8fc 100%) !important;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rgba(30, 60, 100, 0.06);
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(30, 136, 229, 0.35);
+      border-radius: 10px;
+
+      &:hover {
+        background: rgba(30, 136, 229, 0.55);
+      }
+    }
+  }
+
+  // 侧边栏整体：浅色玻璃质感 + 蓝色描边
+  .sidebar-container {
+    border-right: 1px solid rgba(30, 136, 229, 0.18) !important;
+    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%) !important;
+    box-shadow: 4px 0 18px rgba(30, 60, 100, 0.06) !important;
+
+    &::after {
+      background: linear-gradient(180deg, rgba(30, 136, 229, 0.35), rgba(30, 136, 229, 0.15) 45%, rgba(30, 136, 229, 0.25)) !important;
+    }
+
+    // 教师端导航容器：浅色玻璃 + 蓝色描边
+    .student-course-nav {
+      background:
+        radial-gradient(circle at 18% 10%, rgba(30, 136, 229, 0.08), transparent 34%),
+        rgba(255, 255, 255, 0.7) !important;
+      box-shadow: inset -1px 0 0 rgba(30, 136, 229, 0.08), 8px 0 24px rgba(30, 60, 100, 0.06) !important;
+      backdrop-filter: blur(10px);
+    }
+
+    // 区块标题：深蓝色字
+    .student-course-heading {
+      color: #5a7896 !important;
+
+      &:hover,
+      &.active {
+        color: #1e88e5 !important;
+      }
+    }
+
+    // 菜单项：浅色背景 + 深色文字 + 蓝色 hover
+    .student-course-link {
+      color: #2c4a6a !important;
+      background: rgba(30, 136, 229, 0.04) !important;
+      border: 1px solid rgba(30, 136, 229, 0.1) !important;
+
+      &:hover,
+      &.active {
+        color: #1e88e5 !important;
+        border-color: rgba(30, 136, 229, 0.4) !important;
+        background: linear-gradient(95deg, rgba(30, 136, 229, 0.14), rgba(66, 165, 245, 0.06)) !important;
+        box-shadow: 0 4px 14px rgba(30, 136, 229, 0.16) !important;
+      }
+
+      &.active {
+        border-left: 3px solid #1e88e5 !important;
+      }
+    }
+
+    // 图标容器：浅色玻璃 + 蓝色边框
+    .student-course-icon {
+      color: #1e88e5 !important;
+      border-color: rgba(30, 136, 229, 0.22) !important;
+      background:
+        linear-gradient(135deg, rgba(30, 136, 229, 0.16), rgba(66, 165, 245, 0.06)),
+        rgba(255, 255, 255, 0.6) !important;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 8px rgba(30, 136, 229, 0.1) !important;
+
+      &--heading {
+        color: #1e88e5 !important;
+        background: rgba(30, 136, 229, 0.12) !important;
+      }
+    }
+
+    // 报告按钮（如有）：浅色玻璃 + 蓝色高亮
+    .student-report-button {
+      color: #1e88e5 !important;
+      background: rgba(30, 136, 229, 0.1) !important;
+      border-color: rgba(30, 136, 229, 0.5) !important;
+
+      &:hover,
+      &.active {
+        color: #ffffff !important;
+        background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
+        box-shadow: 0 4px 14px rgba(30, 136, 229, 0.3) !important;
+      }
+    }
+  }
+}
+
+/*
+ * 教师端实训页背景覆盖
+ * student-training.scss 中 #app .teacherLayout .app-main:has(.student-training-shell) 使用了暗色背景
+ * 此处覆盖为亮色，确保实训页与教师端整体亮色主题一致
+ */
+#app .teacherLayout .app-main:has(.student-training-shell) {
+  background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
+}
+
+#app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
+  background: transparent !important;
+}

src/assets/styles/student-training.scss

@@ -44,6 +44,11 @@
   background: #06111d !important;
 }
 
+/* 教师端亮色主题：实训页背景改为浅色，与学生端暗黑风格区分 */
+#app .teacherLayout .app-main:has(.student-training-shell) {
+  background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
+}
+
 #app .studentLayout .app-main:has(.student-training-shell) .student-training-shell,
 #app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
   box-sizing: border-box !important;
@@ -66,6 +71,11 @@
   font-variant-numeric: tabular-nums !important;
 }
 
+/* 教师端实训页容器背景改为透明，融入亮色主题 */
+#app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
+  background: transparent !important;
+}
+
 /*
  * Student pages use different local names for their main and workbench cards.
  * Keep the layout density here so a page-specific card cannot reclaim the

src/layout/components/Navbar.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['navbar', { 'teacher-navbar': role === 3 }]">
     <!-- 背景装饰 -->
-    <svg class="nav-bg-decoration" viewBox="0 0 1920 60" preserveAspectRatio="xMidYMid slice">
+    <svg v-if="role !== 3" class="nav-bg-decoration" viewBox="0 0 1920 60" preserveAspectRatio="xMidYMid slice">
       <defs>
         <linearGradient id="navGrad" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" style="stop-color:#001529;stop-opacity:0.95" />
@@ -25,6 +25,23 @@
       <circle cx="1500" cy="20" r="1.5" fill="#00ff9d" opacity="0.25" />
       <circle cx="1800" cy="40" r="2" fill="#00aaff" opacity="0.3" />
     </svg>
+    <!-- 教师端亮色装饰：浅色底纹 + 蓝色点缀，保持科技感 -->
+    <svg v-else class="nav-bg-decoration" viewBox="0 0 1920 60" preserveAspectRatio="xMidYMid slice">
+      <defs>
+        <linearGradient id="teacherGlowLine" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" style="stop-color:#1e88e5;stop-opacity:0" />
+          <stop offset="50%" style="stop-color:#1e88e5;stop-opacity:0.45" />
+          <stop offset="100%" style="stop-color:#1e88e5;stop-opacity:0" />
+        </linearGradient>
+      </defs>
+      <line x1="0" y1="59" x2="1920" y2="59" stroke="url(#teacherGlowLine)" stroke-width="1" />
+      <circle cx="180" cy="22" r="2" fill="#1e88e5" opacity="0.25" />
+      <circle cx="460" cy="36" r="1.5" fill="#42a5f5" opacity="0.3" />
+      <circle cx="820" cy="18" r="2" fill="#1e88e5" opacity="0.2" />
+      <circle cx="1180" cy="32" r="1.5" fill="#42a5f5" opacity="0.28" />
+      <circle cx="1540" cy="24" r="2" fill="#1e88e5" opacity="0.22" />
+      <circle cx="1780" cy="38" r="1.5" fill="#42a5f5" opacity="0.26" />
+    </svg>
 
     <div :class="[role !== 3 ? 'navTitle' : 'TnavTitle']">
       <div class="logo-area">
@@ -55,7 +72,7 @@
       </div>
       <div class="divider"></div>
       <div class="avatar-container">
-        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click" :popper-class="role === 3 ? 'teacher-dropdown-popper' : ''">
           <div class="avatar-wrapper">
             <div class="avatar-ring">
               <img src="../../assets/images/头像.webp" class="user-avatar" />
@@ -297,7 +314,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     padding: 0 20px;
-    background: linear-gradient(90deg, rgba(0, 60, 120, 0.5), rgba(0, 30, 60, 0.3) 60%, transparent);
+    background: linear-gradient(90deg, rgba(30, 136, 229, 0.08), rgba(66, 165, 245, 0.04) 60%, transparent);
     backdrop-filter: blur(10px);
 
     .logo-area {
@@ -306,16 +323,16 @@ onMounted(() => {
       gap: 12px;
 
       .logo-icon {
-        filter: drop-shadow(0 0 8px rgba(0, 170, 255, 0.5));
+        filter: drop-shadow(0 0 6px rgba(30, 136, 229, 0.35));
       }
 
       span {
         font-size: 15px;
         font-family: var(--student-font-base);
-        font-weight: 600;
+        font-weight: 700;
-        color: #fff;
+        color: #1e3a5f;
         letter-spacing: 1px;
-        text-shadow: 0 0 12px rgba(80, 200, 255, 0.4);
+        text-shadow: none;
       }
     }
   }
@@ -537,28 +554,179 @@ onMounted(() => {
 }
 
 .teacher-navbar {
-  background: linear-gradient(135deg, rgba(5, 20, 40, 0.98), rgba(10, 35, 60, 0.95)) !important;
+  // 教师端亮色主题：浅色玻璃质感 + 蓝色点缀，保持科技感
-  border-bottom: 1px solid rgba(60, 192, 255, 0.2);
+  background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 50%, #eaf2fb 100%) !important;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(30, 136, 229, 0.18);
+  box-shadow: 0 6px 24px rgba(30, 60, 100, 0.08);
   backdrop-filter: blur(20px);
 
+  // 菜单项：浅色文字 + 轻量描边
+  .el-ment {
+    color: #3a5a7a;
+
+    .el-ment-item {
+      color: #3a5a7a;
+      background: rgba(30, 136, 229, 0.06);
+      border: 1px solid rgba(30, 136, 229, 0.12);
+
+      .menu-indicator {
+        background: linear-gradient(90deg, transparent, #1e88e5, transparent);
+      }
+
+      &:hover {
+        color: #1e88e5;
+        background: rgba(30, 136, 229, 0.12);
+        border-color: rgba(30, 136, 229, 0.28);
+
+        .menu-indicator {
+          background: linear-gradient(90deg, transparent, #1e88e5, transparent);
+        }
+      }
+    }
+
+    .el-ment-item-active {
+      color: #1e88e5;
+      background: linear-gradient(135deg, rgba(30, 136, 229, 0.18), rgba(66, 165, 245, 0.08));
+      border-color: rgba(30, 136, 229, 0.4);
+      box-shadow: 0 4px 14px rgba(30, 136, 229, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+
+      .menu-indicator {
+        background: linear-gradient(90deg, transparent, #1e88e5, transparent);
+      }
+
+      &::before {
+        background: linear-gradient(90deg, transparent, rgba(30, 136, 229, 0.7), transparent);
+      }
+    }
+
+    &.teacher-nav {
+      .el-ment-item {
+        color: #3a5a7a;
+        background: rgba(30, 136, 229, 0.05);
+        border: 1px solid rgba(30, 136, 229, 0.1);
+
+        &:hover {
+          color: #1e88e5;
+          background: rgba(30, 136, 229, 0.12);
+          border-color: rgba(30, 136, 229, 0.28);
+        }
+      }
+
+      .el-ment-item-active {
+        color: #1e88e5;
+        background: linear-gradient(135deg, rgba(30, 136, 229, 0.2), rgba(66, 165, 245, 0.1));
+        border-color: rgba(30, 136, 229, 0.45);
+        box-shadow: 0 4px 16px rgba(30, 136, 229, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+
+        .menu-indicator {
+          background: linear-gradient(90deg, transparent, #1e88e5, transparent);
+        }
+      }
+    }
+  }
+
+  // 右侧区域：浅色背景渐变
   .right-menu {
-    background: linear-gradient(90deg, transparent, rgba(0, 40, 80, 0.4));
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
   }
 
   .search-box {
-    background: rgba(60, 180, 255, 0.08) !important;
+    background: rgba(30, 136, 229, 0.08) !important;
-    border-color: rgba(60, 180, 255, 0.15) !important;
+    border-color: rgba(30, 136, 229, 0.18) !important;
+    color: rgba(30, 90, 140, 0.7) !important;
+
+    &:hover {
+      background: rgba(30, 136, 229, 0.14) !important;
+      border-color: rgba(30, 136, 229, 0.32) !important;
+      color: #1e88e5 !important;
+    }
   }
 
-  .avatar-wrapper {
+  .divider {
-    background: rgba(60, 180, 255, 0.08) !important;
+    background: linear-gradient(180deg, transparent, rgba(30, 136, 229, 0.35), transparent);
-    border-color: rgba(60, 180, 255, 0.15) !important;
   }
 
-  .avatar-ring {
+  .avatar-container .avatar-wrapper {
-    background: linear-gradient(135deg, #00aaff, #00ff9d) !important;
+    background: rgba(30, 136, 229, 0.08) !important;
-    box-shadow: 0 0 12px rgba(0, 170, 255, 0.5) !important;
+    border-color: rgba(30, 136, 229, 0.18) !important;
+
+    &:hover {
+      background: rgba(30, 136, 229, 0.16) !important;
+      border-color: rgba(30, 136, 229, 0.32) !important;
+    }
+
+    .avatar-ring {
+      background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
+      box-shadow: 0 0 10px rgba(30, 136, 229, 0.35) !important;
+    }
+
+    .dropdown-icon {
+      color: rgba(30, 90, 140, 0.7);
+    }
+  }
+}
+
+// 教师端下拉面板：亮色玻璃质感（dropdown teleport 到 body，需使用 popper-class 选择器）
+.teacher-dropdown-popper {
+  .dropdown-panel {
+    background: linear-gradient(160deg, #ffffff 0%, #f3f8ff 50%, #eaf2fb 100%);
+    border: 1px solid rgba(30, 136, 229, 0.25);
+    box-shadow: 0 15px 40px rgba(30, 60, 100, 0.18), 0 0 20px rgba(30, 136, 229, 0.08);
+
+    .dropdown-header {
+      background: linear-gradient(135deg, rgba(30, 136, 229, 0.1), rgba(66, 165, 245, 0.05));
+      border-bottom: 1px solid rgba(30, 136, 229, 0.15);
+
+      .user-info {
+        .user-name {
+          color: #1e3a5f;
+        }
+
+        .user-role {
+          color: #1e88e5;
+        }
+      }
+    }
+
+    .dropdown-divider {
+      background: linear-gradient(90deg, transparent, rgba(30, 136, 229, 0.25), transparent);
+    }
+
+    .dropdown-menu-custom {
+      .dropdown-item {
+        color: #3a5a7a !important;
+
+        svg {
+          color: rgba(30, 136, 229, 0.8);
+        }
+
+        &:hover {
+          background: linear-gradient(135deg, rgba(30, 136, 229, 0.14), rgba(66, 165, 245, 0.06)) !important;
+          color: #1e88e5 !important;
+
+          svg {
+            color: #1e88e5;
+          }
+        }
+
+        &.logout {
+          color: rgba(200, 80, 80, 0.85) !important;
+
+          svg {
+            color: rgba(220, 100, 100, 0.8);
+          }
+
+          &:hover {
+            background: linear-gradient(135deg, rgba(220, 80, 80, 0.14), rgba(200, 60, 60, 0.06)) !important;
+            color: #d63030 !important;
+
+            svg {
+              color: #d63030;
+            }
+          }
+        }
+      }
+    }
   }
 }
 

src/layout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <div class="title" style="height: 50px; background-color: #072048 !important; z-index: 900 !important; position: relative">
+    <div class="title" :style="{ height: '50px', zIndex: 900, position: 'relative', backgroundColor: titleBgColor }">
       <Navbar />
     </div>
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
@@ -32,6 +32,9 @@ const needTagsView = computed(() => settingsStore.tagsView);
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 const useTopNavbarOnly = computed(() => role.value === 1 || role.value === 2);
 
+// 教师端改用亮色主题：顶部标题栏使用浅色背景，与平台/学校管理员端做区分
+const titleBgColor = computed(() => (role.value === 3 ? "#f5f8fc" : "#072048"));
+
 const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
   openSidebar: sidebar.value.opened,
@@ -39,8 +42,6 @@ const classObj = computed(() => ({
   mobile: device.value === "mobile",
   teacherLayout: role.value === 3,
   studentLayout: role.value !== 1 && role.value !== 2 && role.value !== 3,
-  // 教师端启用 Element Plus 暗色模式，让所有组件弹层（date-picker、select 等）自动变暗
-  dark: role.value === 3,
 }));
 
 const { width, height } = useWindowSize();
@@ -66,6 +67,19 @@ const settingRef = ref(null);
 function setLayout() {
   settingRef.value.openSetting();
 }
+
+// 教师端亮色模式标识：挂在 body 上，使 teleport 到 body 的弹层（下拉、日期选择器、弹窗等）也能命中亮色样式
+const TEACHER_LIGHT_CLASS = "teacher-light-mode";
+watchEffect(() => {
+  if (role.value === 3) {
+    document.body.classList.add(TEACHER_LIGHT_CLASS);
+  } else {
+    document.body.classList.remove(TEACHER_LIGHT_CLASS);
+  }
+});
+onBeforeUnmount(() => {
+  document.body.classList.remove(TEACHER_LIGHT_CLASS);
+});
 </script>
 
 <style lang="scss" scoped>

src/views/schoolAdmin/trainingTask/index.vue

@@ -51,10 +51,10 @@
               <circle cx="11" cy="11" r="8"/>
               <path d="M21 21l-4.35-4.35"/>
             </svg>
-            <input 
+            <input
-              v-model.trim="keyword" 
+              v-model.trim="keyword"
-              type="text" 
+              type="text"
-              placeholder="输入实训任务名称搜索..." 
+              placeholder="输入实训任务名称搜索..."
               class="search-input"
               @keyup.enter="queryTasks"
             />
@@ -151,9 +151,9 @@
             <path d="M22 16v6h-6" stroke="#00ff9d" stroke-width="2" fill="none" opacity="0.4"/>
           </svg>
         </div>
-        
+
         <div class="card-index">{{ String(index + 1).padStart(2, "0") }}</div>
-        
+
         <div class="card-content">
           <div class="card-header">
             <span class="task-project">
@@ -166,9 +166,9 @@
               {{ task.enabled ? '启用' : '停用' }}
             </span>
           </div>
-          
+
           <h3 class="task-name">{{ task.title }}</h3>
-          
+
           <div class="task-meta">
             <span class="meta-item">
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -186,7 +186,7 @@
             </span>
           </div>
         </div>
-        
+
         <div class="card-actions" @click.stop>
           <el-button type="primary" class="edit-btn" @click="editTask(task)">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -196,11 +196,11 @@
             编辑任务
           </el-button>
         </div>
-        
+
         <div class="card-glow"></div>
         <div class="scanline"></div>
       </article>
-      
+
       <el-empty v-if="!filteredTasks.length && !loading" class="task-empty" description="暂无匹配的实训任务">
         <template #image>
           <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#00aaff" stroke-width="1" opacity="0.3">
@@ -1222,14 +1222,14 @@ function buildPayload() {
 .training-task-drawer {
   // 覆盖 Element Plus 默认白色样式
   --el-drawer-bg-color: #081827 !important;
-  
+
   .el-drawer__body {
     height: 100%;
     padding: 0;
     overflow: hidden;
     background: linear-gradient(160deg, #081827 0%, #06111d 58%, #071b2a 100%) !important;
   }
-  
+
   // 移除白色边框
   &.el-drawer {
     border: none !important;
@@ -1241,7 +1241,7 @@ function buildPayload() {
 // 抽屉遮罩层
 .el-overlay {
   background: rgba(0, 0, 0, 0.7) !important;
-  
+
   .training-task-drawer {
     background: linear-gradient(160deg, #081827 0%, #06111d 58%, #071b2a 100%) !important;
   }
@@ -1498,13 +1498,13 @@ function buildPayload() {
     color: rgba(200, 230, 255, 0.7);
     font-size: 13px;
   }
-  
+
   // Switch 组件暗色化
   .el-switch {
     --el-switch-off-color: rgba(255, 107, 107, 0.4);
     --el-switch-on-color: rgba(0, 255, 157, 0.5);
     --el-switch-border-color: rgba(0, 170, 255, 0.3);
-    
+
     &.is-checked {
       --el-switch-border-color: rgba(0, 255, 157, 0.6);
     }
@@ -1652,7 +1652,7 @@ function buildPayload() {
   background: linear-gradient(135deg, rgba(0, 170, 255, 0.2), rgba(0, 100, 180, 0.15)) !important;
   border: 1px solid rgba(0, 170, 255, 0.4) !important;
   color: #00aaff !important;
-  
+
   &:hover {
     background: linear-gradient(135deg, rgba(0, 170, 255, 0.3), rgba(0, 100, 180, 0.25)) !important;
     border-color: rgba(0, 170, 255, 0.6) !important;
@@ -1741,7 +1741,7 @@ function buildPayload() {
   background: rgba(0, 170, 255, 0.1) !important;
   border: 1px solid rgba(0, 170, 255, 0.25) !important;
   border-radius: 10px;
-  
+
   &:hover {
     color: #ffffff !important;
     background: rgba(0, 170, 255, 0.2) !important;
@@ -1774,7 +1774,7 @@ function buildPayload() {
 
   .page-header {
     padding: 20px;
-    
+
     .header-content {
       flex-direction: column;
       align-items: flex-start;
@@ -1831,7 +1831,7 @@ function buildPayload() {
 .el-drawer.training-task-drawer {
   background: linear-gradient(160deg, #081827 0%, #06111d 58%, #071b2a 100%) !important;
   border: none !important;
-  
+
   .el-drawer__body {
     background: linear-gradient(160deg, #081827 0%, #06111d 58%, #071b2a 100%) !important;
   }

src/views/teacherEnd/index.vue

@@ -204,15 +204,15 @@ const getIndicatorArrow = (name) => {
   return map[name] || "●";
 };
 
-// 折线图配色方案
+// 折线图配色方案（亮色背景：科技蓝系分类色）
 const getLineColor = (index) => {
   const colors = [
-    { main: "#00d4ff", light: "#7fefff" },
+    { main: "#1e88e5", light: "#9cc8ef" },
-    { main: "#00ff9d", light: "#7fffcc" },
+    { main: "#2ba471", light: "#9fd8bd" },
-    { main: "#ff6b9d", light: "#ffb3c9" },
+    { main: "#ec6b8f", light: "#f5b8cb" },
-    { main: "#ffd93d", light: "#ffea80" },
+    { main: "#f0a830", light: "#f8d59a" },
-    { main: "#a78bfa", light: "#d4bfff" },
+    { main: "#7e57c2", light: "#c4b0e4" },
-    { main: "#22d3ee", light: "#80efff" },
+    { main: "#26a69a", light: "#9fd8d1" },
   ];
   return colors[index % colors.length].main;
 };
@@ -236,11 +236,11 @@ const getTrendData = async () => {
       axisPointer: {
         type: "cross",
         lineStyle: {
-          color: "rgba(0, 212, 255, 0.3)",
+          color: "rgba(30, 136, 229, 0.35)",
           type: "dashed",
         },
         crossStyle: {
-          color: "rgba(0, 212, 255, 0.5)",
+          color: "rgba(30, 136, 229, 0.5)",
         },
       },
       formatter: function(params) {
@@ -271,11 +271,11 @@ const getTrendData = async () => {
       data: classTime.value,
       axisLine: {
         lineStyle: {
-          color: "rgba(0, 212, 255, 0.3)",
+          color: "rgba(30, 136, 229, 0.25)",
         },
       },
       axisLabel: {
-        color: "rgba(120, 180, 220, 0.9)",
+        color: "#6b85a3",
         fontSize: 11,
         margin: 12,
       },
@@ -289,7 +289,7 @@ const getTrendData = async () => {
       max: 100,
       splitLine: {
         lineStyle: {
-          color: "rgba(0, 212, 255, 0.1)",
+          color: "rgba(30, 136, 229, 0.12)",
           type: "dashed",
         },
       },
@@ -297,19 +297,19 @@ const getTrendData = async () => {
         show: false,
       },
       axisLabel: {
-        color: "rgba(120, 180, 220, 0.9)",
+        color: "#6b85a3",
         fontSize: 11,
         formatter: "{value}",
       },
     },
     series: classList.value.map((item, index) => {
       const colorSet = [
-        { main: "#00d4ff", light: "rgba(0, 212, 255, 0.3)" },
+        { main: "#1e88e5", light: "rgba(30, 136, 229, 0.22)" },
-        { main: "#00ff9d", light: "rgba(0, 255, 157, 0.3)" },
+        { main: "#2ba471", light: "rgba(43, 164, 113, 0.2)" },
-        { main: "#ff6b9d", light: "rgba(255, 107, 157, 0.3)" },
+        { main: "#ec6b8f", light: "rgba(236, 107, 143, 0.2)" },
-        { main: "#ffd93d", light: "rgba(255, 217, 61, 0.3)" },
+        { main: "#f0a830", light: "rgba(240, 168, 48, 0.2)" },
-        { main: "#a78bfa", light: "rgba(167, 139, 250, 0.3)" },
+        { main: "#7e57c2", light: "rgba(126, 87, 194, 0.2)" },
-        { main: "#22d3ee", light: "rgba(34, 211, 238, 0.3)" },
+        { main: "#26a69a", light: "rgba(38, 166, 154, 0.2)" },
       ][index % 6];
       return {
         ...item,
@@ -347,13 +347,13 @@ const getTrendData = async () => {
   });
 };
 
-// 饼图配色方案
+// 饼图配色方案（亮色背景：科技蓝系分类色）
 const getPieColor = (index) => {
   const colors = [
-    { main: "#ff9f43", light: "rgba(255, 159, 67, 0.2)" },
+    { main: "#1e88e5", light: "rgba(30, 136, 229, 0.2)" },
-    { main: "#26de81", light: "rgba(38, 222, 129, 0.2)" },
+    { main: "#26a69a", light: "rgba(38, 166, 154, 0.2)" },
-    { main: "#4bcffa", light: "rgba(75, 207, 250, 0.2)" },
+    { main: "#7e57c2", light: "rgba(126, 87, 194, 0.2)" },
-    { main: "#fc5c65", light: "rgba(252, 92, 101, 0.2)" },
+    { main: "#ec6b8f", light: "rgba(236, 107, 143, 0.2)" },
   ];
   return colors[index % colors.length].main;
 };
@@ -384,7 +384,7 @@ const getStatisticsData = async () => {
       itemHeight: 12,
       itemGap: 16,
       textStyle: {
-        color: "rgba(150, 200, 230, 0.95)",
+        color: "#5a7896",
         fontSize: 13,
       },
       formatter: (name) => {
@@ -394,8 +394,8 @@ const getStatisticsData = async () => {
       },
       textStyle: {
         rich: {
-          name: { color: "rgba(150, 200, 230, 0.95)", fontSize: 13 },
+          name: { color: "#5a7896", fontSize: 13 },
-          num: { color: "#00d4ff", fontSize: 13, fontWeight: 600 },
+          num: { color: "#1e88e5", fontSize: 13, fontWeight: 600 },
         },
       },
     },
@@ -407,7 +407,7 @@ const getStatisticsData = async () => {
         avoidLabelOverlap: true,
         itemStyle: {
           borderRadius: 8,
-          borderColor: "rgba(15, 25, 45, 0.95)",
+          borderColor: "#ffffff",
           borderWidth: 3,
         },
         label: {
@@ -417,8 +417,8 @@ const getStatisticsData = async () => {
           scale: true,
           scaleSize: 12,
           itemStyle: {
-            shadowBlur: 20,
+            shadowBlur: 16,
-            shadowColor: "rgba(0, 212, 255, 0.5)",
+            shadowColor: "rgba(30, 136, 229, 0.35)",
           },
         },
         data: circularData.value.map((item, index) => ({
@@ -527,7 +527,6 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 // 页面主容器
 .grade-center {
-  padding: 20px 24px;
   min-height: calc(100vh - 96px);
   display: flex;
   flex-direction: column;
@@ -1131,7 +1130,6 @@ onBeforeUnmount(() => {
 
 @media (max-width: 768px) {
   .grade-center {
-    padding: 12px;
   }
 
   .page-header {