From a30e23ab07d60284bd59a067f8f247ecf80f4f73 Mon Sep 17 00:00:00 2001
From: QDKF <QDKF@project.com>
Date: Thu, 4 Sep 2025 17:23:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=AD=A6=E6=83=85?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=92=8C=E5=AD=A6=E7=94=9F=E6=88=90=E7=BB=A9?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91:=E6=96=B0=E5=A2=9ELearning?=
 =?UTF-8?q?Statistics.vue=E5=AD=A6=E6=83=85=E7=BB=9F=E8=AE=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E5=8C=85=E5=90=AB6=E4=B8=AA=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E6=A8=A1=E5=9D=97=E5=92=8CECharts=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9EStudentGrades.vue=E5=AD=A6=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E7=BB=A9=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=88=90=E7=BB=A9=E7=AE=A1=E7=90=86=E3=80=81=E6=9D=83=E9=87=8D?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=92=8C=E6=8F=90=E9=86=92=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../statistics/tab/LearningStatistics.vue     |  672 ++++++++++-
 .../teacher/statistics/tab/StudentGrades.vue  | 1059 ++++++++++++++++-
 2 files changed, 1703 insertions(+), 28 deletions(-)

diff --git a/src/views/teacher/statistics/tab/LearningStatistics.vue b/src/views/teacher/statistics/tab/LearningStatistics.vue
index a8a3268..5f27f29 100644
--- a/src/views/teacher/statistics/tab/LearningStatistics.vue
+++ b/src/views/teacher/statistics/tab/LearningStatistics.vue
@@ -1,34 +1,676 @@
 <template>
   <div class="learning-statistics">
-    <div class="content-placeholder">
-      <h3>学情统计</h3>
-      <p>学情统计功能正在开发中...</p>
+    <!-- 班级选择 -->
+    <div class="class-selector">
+      <div class="selector-container">
+        <select class="class-select" v-model="selectedClass">
+          <option value="">班级名称</option>
+          <option value="class1">计算机科学1班</option>
+          <option value="class2">计算机科学2班</option>
+          <option value="class3">软件工程1班</option>
+        </select>
+        <div class="selector-arrow">
+          <img src="/images/teacher/箭头-黑.png" alt="箭头" />
+        </div>
+      </div>
     </div>
-  </div>
-</template>
+
+    <!-- 统计内容区域 -->
+    <div class="statistics-content">
+      <!-- 章节统计 -->
+      <div class="statistics-card">
+        <h3 class="card-title">
+          <span class="title-main">章节</span>
+          <span class="title-sub">(共4章5小节)</span>
+        </h3>
+        <div class="card-content">
+          <!-- 左侧文本统计 -->
+          <div class="text-stats">
+            <div class="stat-item">
+              <div class="stat-label">章节学习总人次</div>
+              <div class="stat-value">
+          <span class="stat-number">0</span>
+          <span class="stat-unit">人</span>
+        </div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">章节平均学习次数</div>
+              <div class="stat-value">
+          <span class="stat-number">0</span>
+          <span class="stat-unit">次</span>
+        </div>
+            </div>
+          </div>
+
+          <!-- 右侧饼图 -->
+          <div class="chart-section">
+            <h4 class="chart-title">学习次数分布</h4>
+            <div class="chart-container">
+              <v-chart :option="learningDistributionOption" style="height: 100%;" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 作业统计 -->
+      <div class="statistics-card">
+        <h3 class="card-title">
+          <span class="title-main">作业</span>
+          <span class="title-sub">(共5个)</span>
+        </h3>
+        <div class="card-content">
+          <div class="chart-section full-width">
+            <h4 class="chart-title">作业完成率</h4>
+            <div class="chart-container">
+              <v-chart :option="assignmentCompletionOption" style="height: 100%;" />
+            </div>
+          </div>
+        </div>
+              </div>
+      </div>
+
+      <!-- 考试和练习容器 -->
+      <div class="exam-practice-container">
+        <!-- 考试统计卡片 -->
+        <div class="statistics-card">
+          <h3 class="card-title">
+            <span class="title-main">考试</span>
+            <span class="title-sub">(共5场)</span>
+          </h3>
+          <div class="card-content">
+            <!-- 左侧文本统计 -->
+            <div class="text-stats">
+              <div class="stat-item">
+                <div class="stat-label">参与人数</div>
+                <div class="stat-value">
+                  <span class="stat-number">70</span>
+                  <span class="stat-unit">人</span>
+                </div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-label">平均成绩</div>
+                <div class="stat-value">
+                  <span class="stat-number">60</span>
+                  <span class="stat-unit">分</span>
+                </div>
+              </div>
+            </div>
+            <!-- 右侧饼图 -->
+            <div class="chart-section">
+              <h4 class="chart-title">成绩占比</h4>
+              <div class="chart-container">
+                <v-chart :option="examScoreOption" style="height: 100%;" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 练习统计卡片 -->
+        <div class="statistics-card">
+          <h3 class="card-title">
+            <span class="title-main">练习</span>
+            <span class="title-sub">(共5场)</span>
+          </h3>
+          <div class="card-content">
+            <!-- 左侧文本统计 -->
+            <div class="text-stats">
+              <div class="stat-item">
+                <div class="stat-label">参与人数</div>
+                <div class="stat-value">
+                  <span class="stat-number">70</span>
+                  <span class="stat-unit">人</span>
+                </div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-label">平均成绩</div>
+                <div class="stat-value">
+                  <span class="stat-number">60</span>
+                  <span class="stat-unit">分</span>
+                </div>
+              </div>
+            </div>
+            <!-- 右侧饼图 -->
+            <div class="chart-section">
+              <h4 class="chart-title">成绩占比</h4>
+              <div class="chart-container">
+                <v-chart :option="practiceScoreOption" style="height: 100%;" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 证书和讨论容器 -->
+      <div class="exam-practice-container">
+        <!-- 证书统计卡片 -->
+        <div class="statistics-card">
+          <h3 class="card-title">
+            <span class="title-main">证书</span>
+            <span class="title-sub">(共1个)</span>
+          </h3>
+          <div class="card-content">
+            <div class="chart-section full-width">
+              <h4 class="chart-title">证书获取率</h4>
+              <div class="chart-container">
+                <v-chart :option="certificateOption" style="height: 100%;" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 讨论统计卡片 -->
+        <div class="statistics-card">
+          <h3 class="card-title">
+            <span class="title-main">讨论</span>
+            <span class="title-sub">(共5个)</span>
+          </h3>
+          <div class="card-content">
+            <!-- 左侧文本统计 -->
+            <div class="text-stats">
+              <div class="stat-item">
+                <div class="stat-label">讨论话题</div>
+                <div class="stat-value">
+                  <span class="stat-number">7</span>
+                  <span class="stat-unit">个</span>
+                </div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-label">回复数量</div>
+                <div class="stat-value">
+                  <span class="stat-number">60</span>
+                  <span class="stat-unit">条</span>
+                </div>
+              </div>
+            </div>
+            <!-- 右侧饼图 -->
+            <div class="chart-section">
+              <h4 class="chart-title">讨论活跃度</h4>
+              <div class="chart-container">
+                <v-chart :option="discussionOption" style="height: 100%;" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
 
 <script setup lang="ts">
-console.log('LearningStatistics component loaded')
+import { ref, computed } from 'vue'
+import type { EChartsOption } from 'echarts'
+
+// 选中的班级
+const selectedClass = ref('')
+
+// 学习次数分布饼图配置
+const learningDistributionOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    right: 8,
+    top: 'center',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 25,
+    textStyle: {
+      fontSize: 11,
+      color: '#666'
+    },
+    icon: 'circle',
+    formatter: function(name: string) {
+      return name.replace(' ', '      ');
+    }
+  },
+  series: [
+    {
+      name: '学习次数分布',
+      type: 'pie',
+      radius: ['70%', '85%'],
+      center: ['28%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: '14',
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+             data: [
+         { value: 60, name: '学习一次 60次', itemStyle: { color: '#FF9F7F' } },
+         { value: 20, name: '学习二次 20次', itemStyle: { color: '#3A8BFF' } },
+         { value: 20, name: '学习三次 20次', itemStyle: { color: '#9FE6B8' } }
+       ]
+    }
+  ]
+}))
+
+// 作业完成率饼图配置
+const assignmentCompletionOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: '53%',
+    top: 'center',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 35,
+    textStyle: {
+      fontSize: 11,
+      color: '#666'
+    },
+    icon: 'circle',
+    formatter: function(name: string) {
+      return name.replace(' ', '    ');
+    }
+  },
+  series: [
+    {
+      name: '作业完成率',
+      type: 'pie',
+      radius: ['70%', '85%'],
+      center: ['38%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: '14',
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+             data: [
+         { value: 60, name: '已完成 60%', itemStyle: { color: '#0C99DA' } },
+         { value: 40, name: '未完成 40%', itemStyle: { color: '#9FE6B8' } }
+       ]
+    }
+  ]
+}))
+
+// 考试成绩占比饼图配置
+const examScoreOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    right: 8,
+    top: 'center',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 25,
+    textStyle: {
+      fontSize: 11,
+      color: '#666'
+    },
+    icon: 'circle',
+    formatter: function(name: string) {
+      return name.replace(' ', '      ');
+    }
+  },
+  series: [
+    {
+      name: '成绩占比',
+      type: 'pie',
+      radius: ['70%', '85%'],
+      center: ['28%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: '14',
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 60, name: '60分以下 60人', itemStyle: { color: '#3A8BFF' } },
+        { value: 20, name: '60-79分 20人', itemStyle: { color: '#FF9F7F' } },
+        { value: 20, name: '80分以上 20人', itemStyle: { color: '#9FE6B8' } }
+      ]
+    }
+  ]
+}))
+
+// 练习成绩占比饼图配置
+const practiceScoreOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    right: 8,
+    top: 'center',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 25,
+    textStyle: {
+      fontSize: 11,
+      color: '#666'
+    },
+    icon: 'circle',
+    formatter: function(name: string) {
+      return name.replace(' ', '      ');
+    }
+  },
+  series: [
+    {
+      name: '成绩占比',
+      type: 'pie',
+      radius: ['70%', '85%'],
+      center: ['28%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: '14',
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 60, name: '60分以下 60人', itemStyle: { color: '#3A8BFF' } },
+        { value: 20, name: '60-79分 20人', itemStyle: { color: '#FF9F7F' } },
+        { value: 20, name: '80分以上 20人', itemStyle: { color: '#9FE6B8' } }
+      ]
+    }
+  ]
+}))
+
+// 证书获取率饼图配置
+const certificateOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: '53%',
+    top: 'center',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 35,
+    textStyle: {
+      fontSize: 11,
+      color: '#666'
+    },
+    icon: 'circle',
+    formatter: function(name: string) {
+      return name.replace(' ', '      ');
+    }
+  },
+  series: [
+    {
+      name: '证书获取率',
+      type: 'pie',
+      radius: ['70%', '85%'],
+      center: ['38%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: '14',
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 60, name: '已获得 60%', itemStyle: { color: '#0C99DA' } },
+        { value: 40, name: '未获得 40%', itemStyle: { color: '#9FE6B8' } }
+      ]
+    }
+  ]
+}))
+
+// 讨论活跃度饼图配置
+const discussionOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    right: 8,
+    top: 'center',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 25,
+    textStyle: {
+      fontSize: 11,
+      color: '#666'
+    },
+    icon: 'circle',
+    formatter: function(name: string) {
+      return name.replace(' ', '      ');
+    }
+  },
+  series: [
+    {
+      name: '讨论活跃度',
+      type: 'pie',
+      radius: ['70%', '85%'],
+      center: ['28%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: '14',
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 40, name: '活跃 40%', itemStyle: { color: '#3A8BFF' } },
+        { value: 60, name: '一般 60%', itemStyle: { color: '#FF9F7F' } }
+      ]
+    }
+  ]
+}))
+
 </script>
 
 <style scoped>
 .learning-statistics {
+  padding: 0 24px 24px;
+  background: #fff;
+  min-height: 100vh;
+}
+
+/* 班级选择器 */
+.class-selector {
+  margin-bottom: 24px;
+}
+
+.selector-container {
+  position: relative;
+  display: inline-block;
+}
+
+.class-select {
+  width: 200px;
+  height: 36px;
+  padding: 8px 12px;
+  border: 1px solid #F1F3F4;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 14px;
+  color: #062333;
+  appearance: none;
+  cursor: pointer;
+}
+
+.selector-arrow {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.selector-arrow img {
+  width: 14px;
+  height: 8px;
+}
+
+/* 统计内容区域 */
+.statistics-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+
+/* 考试和练习卡片容器 */
+.exam-practice-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+
+/* 统计卡片 */
+.statistics-card {}
+
+.card-title {
+  color: #333;
+  margin: 0 0 16px 0;
+  font-weight: normal;
+}
+
+.title-main {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.title-sub {
+  font-size: 14px;
+}
+
+.card-content {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  border: 1.5px solid #E6E6E6;
+  border-radius: 2px;
   padding: 20px;
 }
 
-.content-placeholder {
-  text-align: center;
-  padding: 40px 20px;
+/* 文本统计 */
+.text-stats {
+  width: 42%;
+  padding-right: 30px;
+  border-right: 1.5px solid #E6E6E6;
 }
 
-.content-placeholder h3 {
+  .stat-item {
+    margin-bottom: 8px;
+    background-color: #F5F8FB;
+    border-radius: 4px;
+    padding: 12px 16px;
+  }
+
+.stat-item:last-child {
+  margin-bottom: 0;
+}
+
+  .stat-label {
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 4px;
+  }
+
+.stat-value {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.stat-number {
   font-size: 18px;
+  font-weight: normal;
   color: #333;
-  margin-bottom: 16px;
 }
 
-.content-placeholder p {
-  font-size: 14px;
-  color: #666;
+.stat-unit {
+  font-size: 12px;
+  font-weight: normal;
+  color: #333;
 }
-</style>
\ No newline at end of file
+
+/* 图表区域 */
+.chart-section {
+  margin-left: 10px;
+  width: 50%;
+}
+
+.chart-section.full-width {
+  width: 100%;
+}
+
+.chart-title {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 5px;
+  font-weight: 500;
+  text-align: left;
+}
+
+.chart-container {
+  height: 140px;
+  width: 100%;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .statistics-content {
+    grid-template-columns: 1fr;
+  }
+
+  .card-content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .chart-container {
+    height: 120px;
+  }
+}
+</style>
diff --git a/src/views/teacher/statistics/tab/StudentGrades.vue b/src/views/teacher/statistics/tab/StudentGrades.vue
index 65a96ca..3eb1ab8 100644
--- a/src/views/teacher/statistics/tab/StudentGrades.vue
+++ b/src/views/teacher/statistics/tab/StudentGrades.vue
@@ -1,34 +1,1067 @@
 <template>
   <div class="student-grades">
-    <div class="content-placeholder">
-      <h3>学生成绩</h3>
-      <p>学生成绩功能正在开发中...</p>
+    <!-- 顶部操作栏 -->
+    <div class="header-section">
+      <div class="header-left">
+        <div class="class-selector">
+          <div class="selector-container">
+            <select v-model="selectedClass" class="class-select">
+              <option value="">班级名称</option>
+              <option value="cs1">计算机科学1班</option>
+              <option value="cs2">计算机科学2班</option>
+              <option value="se1">软件工程1班</option>
+              <option value="se2">软件工程2班</option>
+            </select>
+            <div class="selector-arrow">
+              <img src="/images/teacher/箭头-黑.png" alt="箭头">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="header-right">
+        <n-button 
+          @click="openWeightSettings"
+          style="--n-border: 1.5px solid #0288D1; --n-color: transparent; --n-text-color: #0288D1; --n-font-size: 14px; --n-height: 32px;"
+        >
+          <template #icon>
+            <n-icon>
+              <img src="/images/teacher/weight.png" alt="权重" style="width: 15px; height: 15px;" />
+            </n-icon>
+          </template>
+          权重设置
+        </n-button>
+
+        <n-input v-model:value="searchKeyword" placeholder="请输入姓名或学号" style="width: 200px;" />
+        <n-button type="primary" @click="handleSearch">搜索</n-button>
+      </div>
     </div>
+
+    <!-- Tab导航 -->
+    <div class="tab-section">
+      <div class="tab-container">
+        <div class="tab-item" :class="{ active: activeTab === 'grades' }" @click="switchTab('grades')">
+          <span>学生成绩</span>
+        </div>
+        <div class="tab-item" :class="{ active: activeTab === 'progress' }" @click="switchTab('progress')">
+          <span>学生学习进度</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 学生成绩表格 -->
+    <div v-if="activeTab === 'grades'" class="table-section">
+      <n-data-table :columns="gradeColumns" :data="studentGrades" :row-key="rowKey" :checked-row-keys="selectedStudents"
+        @update:checked-row-keys="handleStudentSelection" :bordered="false" :single-line="false" size="small"
+        class="grade-data-table" />
+    </div>
+
+    <!-- 学生学习进度表格 -->
+    <div v-if="activeTab === 'progress'" class="table-section">
+      <n-data-table :columns="progressColumns" :data="studentProgress" :row-key="rowKey"
+        :checked-row-keys="selectedStudents" @update:checked-row-keys="handleStudentSelection" :bordered="false"
+        :single-line="false" size="small" class="progress-data-table" />
+    </div>
+
+    <!-- 权重设置模态框 -->
+    <n-modal v-model:show="showWeightModal" preset="card" title="权重设置" style="width: 1000px">
+      <template #header>
+        <div style="font-size: 18px; font-weight: 500;">权重设置</div>
+      </template>
+      <div class="weight-settings">
+        <!-- 总权重状态显示 -->
+        <div class="weight-status">
+          <div class="status-box" :class="{ 'status-error': totalWeight > 100 }">
+            总权重<span style="color: #50CF5A;">100</span>%, 当前总和<span
+              :style="{ color: totalWeight > 100 ? '#FF4D4F' : '#50CF5A' }">{{ totalWeight }}</span>%
+          </div>
+        </div>
+
+        <!-- 权重配置项 -->
+        <div class="weight-item">
+          <div class="weight-label">章节课件</div>
+          <div class="weight-input-group">
+            <n-input-number v-model:value="weightSettings.chapterLearning" :min="0" :max="100" :precision="0"
+              size="small" style="width: 95px;" :show-button="false" class="weight-input" />
+            <span class="weight-unit">%</span>
+          </div>
+          <div class="weight-description">按完成课件视频的任务点个数计分,全部完成得满分</div>
+        </div>
+
+        <div class="weight-item">
+          <div class="weight-label">章节练习</div>
+          <div class="weight-input-group">
+            <n-input-number v-model:value="weightSettings.chapterPractice" :min="0" :max="100" :precision="0"
+              size="small" style="width: 95px;" :show-button="false" class="weight-input" />
+            <span class="weight-unit">%</span>
+          </div>
+          <div class="weight-description">按所有章节练习任务点的平均分计分</div>
+        </div>
+
+        <div class="weight-item">
+          <div class="weight-label">章节作业</div>
+          <div class="weight-input-group">
+            <n-input-number v-model:value="weightSettings.assignments" :min="0" :max="100" :precision="0" size="small"
+              style="width: 95px;" :show-button="false" class="weight-input" />
+            <span class="weight-unit">%</span>
+          </div>
+          <div class="weight-description">按在线作业的平均分计分</div>
+        </div>
+
+        <div class="weight-item">
+          <div class="weight-label">章节考试</div>
+          <div class="weight-input-group">
+            <n-input-number v-model:value="weightSettings.exams" :min="0" :max="100" :precision="0" size="small"
+              style="width: 95px;" :show-button="false" class="weight-input" />
+            <span class="weight-unit">%</span>
+          </div>
+          <div class="weight-description">按在线考试的平均分计分</div>
+        </div>
+
+        <!-- 应用到其他班级开关 -->
+        <div class="apply-other-classes">
+          <div class="apply-label">对其他班级生效</div>
+          <div class="apply-toggle">
+            <n-switch v-model:value="applyToOtherClasses" />
+          </div>
+        </div>
+
+        <div class="apply-description">
+          修改权重后,学生综合成绩按照权重重新计算
+        </div>
+      </div>
+      <template #footer>
+        <div class="modal-footer">
+          <n-button @click="showWeightModal = false"
+            style="--n-border: 1px solid #0288D1; --n-color: #E2F5FF; --n-text-color: #0288D1; --n-font-size: 16px; --n-height: 32px;">
+            取消
+          </n-button>
+          <n-button type="primary" @click="saveWeightSettings" style="--n-font-size: 16px; --n-height: 32px;">
+            确定
+          </n-button>
+        </div>
+      </template>
+    </n-modal>
+
+    <!-- 确认对话框 -->
+    <n-modal v-model:show="showConfirmModal" preset="card" style="width: 440px;" :closable="false">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <img src="/images/teacher/hint.png" alt="提示" style="width: 30px; height: 30px;">
+          <span style="font-size: 20px; font-weight: 500; color: #062333;">操作确定</span>
+        </div>
+      </template>
+      <div style="padding: 0 20px; line-height: 1.6; font-size: 16px;">
+        修改权重后,已学习的学生个人成绩将发生变化,
+        确认修改?
+      </div>
+      <template #footer>
+        <div class="modal-footer">
+          <n-button @click="showConfirmModal = false"
+            style="--n-border: 1px solid #E0E0E0; --n-text-color: #333; --n-color: #fff; --n-font-size: 16px; --n-height: 32px;">
+            取消
+          </n-button>
+          <n-button type="primary" @click="confirmSaveWeightSettings" style="--n-font-size: 16px; --n-height: 32px;">
+            确定
+          </n-button>
+        </div>
+      </template>
+    </n-modal>
+
+    <!-- 提醒模板模态框 -->
+    <n-modal v-model:show="showReminderModal" preset="card" style="width: 1000px;" :closable="false">
+      <template #header>
+        <div style="font-size: 18px; font-weight: 500; border-bottom: 1px solid #E6E6E6; padding-bottom: 10px;">提醒模板
+        </div>
+      </template>
+      <div class="reminder-template">
+        <div style="line-height: 1.8; font-size: 14px; color: #333; padding: 0; margin: 0;">
+          <p style="font-size: 16px; color: #333; margin: 0 0 10px 0;">【平台名称】友好学习提醒 - 《[课程名称]》</p>
+          <p style="font-size: 14px; color: #333;">尊敬的[学生姓名]同学:</p>
+          <p>监测到您在《[课程名称]》 【第X周】的学习进度稍有滞后。</p>
+          <p><strong>具体情况:</strong>您尚有【3】 个任务点未完成,课程总体进度为 【20%】 (班级平均进度为65%)。特别是核心视频《[视频名称]》还未观看。</p>
+          <p><strong>作业情况:</strong>您有【1】 次作业《[作业名称]》尚未提交(截止日期: 2023-11-10)。</p>
+          <p><strong>建议您:</strong></p>
+          <ul style="margin: 10px 0;">
+            <li>点击链接立即学习:<a href="#" style="color: #1890ff;">[第三章学习页面链接]</a></li>
+            <li>优先观看视频《[视频名称]》并完成作业。</li>
+          </ul>
+          <p>知识是一个积累的过程,现在跟上还完全来得及!如果您在学习中遇到任何困难,可以在讨论区提问或直接回复此消息与我沟通。</p>
+          <p>祝学习顺利!</p>
+          <p>[您的姓名]老师</p>
+        </div>
+      </div>
+      <template #footer>
+        <div class="modal-footer">
+          <n-button @click="showReminderModal = false"
+            style="--n-border: 1px solid #0288D1; --n-color: #E2F5FF; --n-text-color: #0288D1; --n-font-size: 16px; --n-height: 32px;">
+            取消
+          </n-button>
+          <n-button type="primary" @click="sendReminder" style="--n-font-size: 16px; --n-height: 32px;">
+            发送
+          </n-button>
+        </div>
+      </template>
+    </n-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-console.log('StudentGrades component loaded')
+import { ref, h, computed } from 'vue'
+import { NButton, NDataTable, NInput, NInputNumber, NModal, NSwitch, NIcon, useMessage } from 'naive-ui'
+import type { DataTableColumns } from 'naive-ui'
+
+const message = useMessage()
+
+// 响应式数据
+const selectedClass = ref<string>('')
+const searchKeyword = ref<string>('')
+const activeTab = ref<string>('grades')
+const selectedStudents = ref<number[]>([])
+const showWeightModal = ref<boolean>(false)
+const showConfirmModal = ref<boolean>(false)
+const showReminderModal = ref<boolean>(false)
+const applyToOtherClasses = ref<boolean>(false)
+
+// 排序状态
+const sortOrder = ref<'asc' | 'desc' | null>(null)
+
+// 权重设置数据
+const weightSettings = ref({
+  chapterLearning: 40,
+  chapterPractice: 20,
+  assignments: 15,
+  exams: 15
+})
+
+// 计算总权重
+const totalWeight = computed(() => {
+  return weightSettings.value.chapterLearning +
+    weightSettings.value.chapterPractice +
+    weightSettings.value.assignments +
+    weightSettings.value.exams
+})
+
+
+
+// 班级选项
+const classOptions = [
+  { label: '计算机科学1班', value: 'cs1' },
+  { label: '计算机科学2班', value: 'cs2' },
+  { label: '软件工程1班', value: 'se1' },
+  { label: '软件工程2班', value: 'se2' }
+]
+
+// 学生成绩数据
+const studentGrades = ref([
+  {
+    id: 1,
+    serialNumber: 1,
+    name: '陈诚',
+    studentId: '556654774552',
+    chapterLearning: '20%',
+    chapterPractice: '5%',
+    assignments: '5%',
+    exams: '5%',
+    overallGrade: 35
+  },
+  {
+    id: 2,
+    serialNumber: 2,
+    name: '李小明',
+    studentId: '556654774553',
+    chapterLearning: '25%',
+    chapterPractice: '8%',
+    assignments: '7%',
+    exams: '8%',
+    overallGrade: 48
+  },
+  {
+    id: 3,
+    serialNumber: 3,
+    name: '王小红',
+    studentId: '556654774554',
+    chapterLearning: '30%',
+    chapterPractice: '10%',
+    assignments: '10%',
+    exams: '10%',
+    overallGrade: 60
+  },
+  {
+    id: 4,
+    serialNumber: 4,
+    name: '张伟',
+    studentId: '556654774555',
+    chapterLearning: '35%',
+    chapterPractice: '12%',
+    assignments: '12%',
+    exams: '12%',
+    overallGrade: 71
+  },
+  {
+    id: 5,
+    serialNumber: 5,
+    name: '刘芳',
+    studentId: '556654774556',
+    chapterLearning: '40%',
+    chapterPractice: '15%',
+    assignments: '15%',
+    exams: '15%',
+    overallGrade: 85
+  },
+  {
+    id: 6,
+    serialNumber: 6,
+    name: '赵敏',
+    studentId: '556654774557',
+    chapterLearning: '38%',
+    chapterPractice: '14%',
+    assignments: '14%',
+    exams: '14%',
+    overallGrade: 80
+  },
+  {
+    id: 7,
+    serialNumber: 7,
+    name: '孙强',
+    studentId: '556654774558',
+    chapterLearning: '32%',
+    chapterPractice: '11%',
+    assignments: '11%',
+    exams: '11%',
+    overallGrade: 65
+  },
+  {
+    id: 8,
+    serialNumber: 8,
+    name: '周丽',
+    studentId: '556654774559',
+    chapterLearning: '28%',
+    chapterPractice: '9%',
+    assignments: '9%',
+    exams: '9%',
+    overallGrade: 55
+  },
+  {
+    id: 9,
+    serialNumber: 9,
+    name: '吴刚',
+    studentId: '556654774560',
+    chapterLearning: '22%',
+    chapterPractice: '6%',
+    assignments: '6%',
+    exams: '6%',
+    overallGrade: 40
+  },
+  {
+    id: 10,
+    serialNumber: 10,
+    name: '郑华',
+    studentId: '556654774561',
+    chapterLearning: '45%',
+    chapterPractice: '18%',
+    assignments: '18%',
+    exams: '18%',
+    overallGrade: 99
+  }
+])
+
+// 学生学习进度数据
+const studentProgress = ref([
+  {
+    id: 1,
+    serialNumber: 1,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  },
+  {
+    id: 2,
+    serialNumber: 2,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  },
+  {
+    id: 3,
+    serialNumber: 3,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  },
+  {
+    id: 4,
+    serialNumber: 4,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  },
+  {
+    id: 5,
+    serialNumber: 5,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  },
+  {
+    id: 6,
+    serialNumber: 6,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  },
+  {
+    id: 7,
+    serialNumber: 7,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  },
+  {
+    id: 8,
+    serialNumber: 8,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  },
+  {
+    id: 9,
+    serialNumber: 9,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  },
+  {
+    id: 10,
+    serialNumber: 10,
+    name: '陈诚',
+    studentId: '556654774552',
+    videoWatchTime: '1小时20分钟/4小时',
+    practice: '1个/3个',
+    assignment: '1个/1个',
+    exam: '0场/1场'
+  }
+])
+
+// 成绩表格列配置
+const gradeColumns: DataTableColumns = [
+  {
+    type: 'selection',
+    width: 50
+  },
+  {
+    title: '序号',
+    key: 'serialNumber',
+    width: 80,
+    align: 'center'
+  },
+  {
+    title: '姓名',
+    key: 'name',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '学号',
+    key: 'studentId',
+    width: 150,
+    align: 'center'
+  },
+  {
+    title: '章节学习(40%)',
+    key: 'chapterLearning',
+    width: 140,
+    align: 'center'
+  },
+  {
+    title: '章节练习(10%)',
+    key: 'chapterPractice',
+    width: 140,
+    align: 'center'
+  },
+  {
+    title: '作业(10%)',
+    key: 'assignments',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '考试(20%)',
+    key: 'exams',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: () => h('div', { 
+      style: 'display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;', 
+      onClick: handleSort 
+    }, [
+      h('span', '综合成绩'),
+      h('img', { 
+        src: '/images/teacher/sort2.png', 
+        style: 'width: 10px; height: 12px;' 
+      })
+    ]),
+    key: 'overallGrade',
+    width: 120,
+    align: 'center'
+  }
+]
+
+// 进度表格列配置
+const progressColumns: DataTableColumns = [
+  {
+    type: 'selection',
+    width: 50
+  },
+  {
+    title: '序号',
+    key: 'serialNumber',
+    width: 80,
+    align: 'center'
+  },
+  {
+    title: '姓名',
+    key: 'name',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '学号',
+    key: 'studentId',
+    width: 150,
+    align: 'center'
+  },
+  {
+    title: '视频观看时长',
+    key: 'videoWatchTime',
+    width: 160,
+    align: 'center'
+  },
+  {
+    title: '练习',
+    key: 'practice',
+    width: 100,
+    align: 'center'
+  },
+  {
+    title: '作业',
+    key: 'assignment',
+    width: 100,
+    align: 'center'
+  },
+  {
+    title: '考试',
+    key: 'exam',
+    width: 100,
+    align: 'center'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 100,
+    align: 'center',
+    render: () => {
+      return h(NButton, {
+        size: 'small',
+        bordered: true,
+        onClick: () => {
+          showReminderModal.value = true
+        },
+        style: {
+          '--n-border': '1px solid #0288D1',
+          '--n-text-color': '#0288D1',
+          '--n-color': 'transparent',
+          '--n-border-hover': '1px solid #0277BD',
+          '--n-text-color-hover': '#0277BD'
+        }
+      }, {
+        default: () => '提醒'
+      })
+    }
+  }
+]
+
+
+
+// 方法
+const rowKey = (row: { id: number }) => row.id
+
+const switchTab = (tab: string) => {
+  activeTab.value = tab
+}
+
+const handleStudentSelection = (keys: number[]) => {
+  selectedStudents.value = keys
+}
+
+const openWeightSettings = () => {
+  showWeightModal.value = true
+}
+
+const saveWeightSettings = () => {
+  // if (totalWeight.value < 100) {
+  //   message.warning('权重总和不能小于100%')
+  //   return
+  // }
+  // if (totalWeight.value > 100) {
+  //   message.error('权重总和不能超过100%')
+  //   return
+  // }
+  showConfirmModal.value = true
+}
+
+const confirmSaveWeightSettings = () => {
+  message.success('权重设置已保存')
+  showConfirmModal.value = false
+  showWeightModal.value = false
+}
+
+// 发送提醒
+const sendReminder = () => {
+  message.success('提醒已发送')
+  showReminderModal.value = false
+}
+
+const handleSearch = () => {
+  message.info('搜索: ' + searchKeyword.value)
+}
+
+// 排序方法
+const handleSort = () => {
+  if (sortOrder.value === null) {
+    sortOrder.value = 'asc'
+  } else if (sortOrder.value === 'asc') {
+    sortOrder.value = 'desc'
+  } else {
+    sortOrder.value = null
+  }
+  
+  // 根据排序状态对数据进行排序
+  if (sortOrder.value === 'asc') {
+    studentGrades.value.sort((a: any, b: any) => a.overallGrade - b.overallGrade)
+  } else if (sortOrder.value === 'desc') {
+    studentGrades.value.sort((a: any, b: any) => b.overallGrade - a.overallGrade)
+  } else {
+    // 恢复原始顺序（按序号排序）
+    studentGrades.value.sort((a: any, b: any) => a.serialNumber - b.serialNumber)
+  }
+}
 </script>
 
 <style scoped>
 .student-grades {
-  padding: 20px;
+  padding: 0 20px 20px 20px;
+  background: #fff;
+  min-height: 100vh;
 }
 
-.content-placeholder {
-  text-align: center;
-  padding: 40px 20px;
+/* 顶部操作栏 */
+.header-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #E6E6E6;
 }
 
-.content-placeholder h3 {
-  font-size: 18px;
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.class-selector {
+  display: flex;
+  align-items: center;
+}
+
+/* 下拉框样式 */
+.selector-container {
+  position: relative;
+  display: inline-block;
+  min-width: 150px;
+}
+
+.class-select {
+  width: 100%;
+  height: 32px;
+  padding: 0 30px 0 12px;
+  border: 1px solid #E0E0E0;
+  border-radius: 3px;
+  background: #fff;
+  font-size: 14px;
   color: #333;
-  margin-bottom: 16px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+  outline: none;
 }
 
-.content-placeholder p {
+.class-select:hover {
+  border-color: #0277BD;
+}
+
+.class-select:focus {
+  border-color: #0277BD;
+  box-shadow: 0 0 0 2px rgba(2, 136, 209, 0.2);
+}
+
+.selector-arrow {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.selector-arrow img {
+  width: 12px;
+  height: 7px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* Tab导航 */
+.tab-section {
+  margin-bottom: 14px;
+}
+
+.tab-container {
+  display: flex;
+}
+
+.tab-item {
+  padding: 12px 24px 12px 0;
+  cursor: pointer;
+  font-size: 16px;
+  color: #333333;
+  border-bottom: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.tab-item:hover {
+  color: #333;
+}
+
+.tab-item.active {
+  color: #0C99DA;
+}
+
+/* 表格区域 */
+.table-section {
+  background: #fff;
+}
+
+/* Naive UI 表格样式定制 */
+:deep(.grade-data-table),
+:deep(.progress-data-table) {
+  background: #fff;
+  border: 1px solid #E6E6E6;
+}
+
+/* 表格头部样式 */
+:deep(.grade-data-table .n-data-table-thead),
+:deep(.progress-data-table .n-data-table-thead) {
+  background: #FCFCFC;
+}
+
+:deep(.grade-data-table .n-data-table-th),
+:deep(.progress-data-table .n-data-table-th) {
+  background: #FCFCFC;
+  font-weight: 500;
+  color: #062333;
+  font-size: 14px;
+  border-bottom: 1px solid #E6E6E6;
+  padding: 3px 6px;
+  text-align: center;
+}
+
+/* 表格行样式 */
+:deep(.grade-data-table .n-data-table-td),
+:deep(.progress-data-table .n-data-table-td) {
+  font-size: 12px;
+  color: #062333;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 8px 6px;
+  vertical-align: middle;
+  text-align: center;
+}
+
+:deep(.grade-data-table .n-data-table-tr:hover),
+:deep(.progress-data-table .n-data-table-tr:hover) {
+  background: #fafafa;
+}
+
+/* 复选框样式 */
+:deep(.grade-data-table .n-checkbox),
+:deep(.progress-data-table .n-checkbox) {
+  --n-size: 16px;
+}
+
+
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .header-section {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .header-right {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 768px) {
+  .student-grades {
+    padding: 16px;
+  }
+
+  .header-right {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .tab-item {
+    padding: 8px 16px;
+    font-size: 13px;
+  }
+
+  :deep(.grade-data-table .n-data-table-td),
+  :deep(.progress-data-table .n-data-table-td) {
+    padding: 8px 4px;
+    font-size: 12px;
+  }
+
+  :deep(.grade-data-table .n-data-table-th),
+  :deep(.progress-data-table .n-data-table-th) {
+    padding: 8px 4px;
+    font-size: 12px;
+  }
+}
+
+/* 权重设置模态框样式 */
+.weight-settings {
+  border-top: 1.5px solid #E6E6E6;
+  padding: 20px 0 20px;
+}
+
+.weight-status {
+  margin-bottom: 20px;
+}
+
+.status-box {
+  width: fit-content;
+  padding: 8px 15px;
+  background: #FCFCFC;
+  border: 1px solid #E6E6E6;
+  font-size: 16px;
+  color: #333333;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 5px;
+  transition: all 0.3s ease;
+}
+
+.status-box.status-error {
+  background: #fff;
+  border-color: #E6E6E6;
+  color: #333333;
+}
+
+.weight-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.weight-label {
+  width: 78px;
+  font-size: 16px;
+  color: #333;
+  font-weight: 500;
+  text-align: left;
+}
+
+.weight-input-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: 25px;
+}
+
+.weight-unit {
+  font-size: 16px;
+  color: #333;
+}
+
+.weight-description {
+  flex: 1;
   font-size: 14px;
   color: #666;
+  line-height: 1.4;
 }
-</style>
\ No newline at end of file
+
+.apply-other-classes {
+  display: flex;
+  align-items: center;
+  margin: 10px 0 0 0;
+  padding: 12px 0;
+  border-top: 1.5px solid #E6E6E6;
+}
+
+.apply-label {
+  font-size: 16px;
+  color: #333;
+  font-weight: 500;
+}
+
+.apply-toggle {
+  margin-left: 16px;
+}
+
+.apply-description {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+  margin-bottom: 20px;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+ /* 权重输入框样式 */
+ :deep(.weight-input .n-input) {
+   border: 1px solid #E6E6E6 !important;
+   background-color: #FCFCFC !important;
+   border-radius: 0 !important;
+   padding: 7px 0;
+ }
+
+ :deep(.weight-input .n-input__input-el) {
+   background-color: #FCFCFC !important;
+   text-align: center !important;
+   font-size: 16px !important;
+   color: #666666 !important;
+ }
+
+ /* 学生成绩表格样式 */
+ :deep(.grade-data-table .n-data-table-td) {
+   padding: 12px 8px;
+   font-size: 12px;
+   color: #062333;
+ }
+
+ :deep(.grade-data-table .n-data-table-th) {
+   padding: 4px 8px;
+   font-size: 14px;
+   color: #062333;
+ }
+
+ /* 学习进度表格样式 */
+ :deep(.progress-data-table .n-data-table-td) {
+   padding: 12px 8px;
+   font-size: 12px;
+   color: #062333;
+ }
+
+ :deep(.progress-data-table .n-data-table-th) {
+   padding: 4px 8px;
+   font-size: 14px;
+   color: #062333;
+ }
+
+ /* 表格边框和高度 */
+ :deep(.grade-data-table),
+ :deep(.progress-data-table) {
+   border: 1px solid #E6E6E6;
+   border-radius: 4px;
+ }
+
+ :deep(.grade-data-table .n-data-table-table),
+ :deep(.progress-data-table .n-data-table-table) {
+   border-collapse: collapse;
+ }
+
+ :deep(.grade-data-table .n-data-table-thead),
+ :deep(.progress-data-table .n-data-table-thead) {
+   background-color: #F1F3F4;
+ }
+
+ :deep(.grade-data-table .n-data-table-tbody tr:hover),
+ :deep(.progress-data-table .n-data-table-tbody tr:hover) {
+   background-color: #F8F9FA;
+ }
+
+/* 提醒模板模态框样式 */
+.reminder-template {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.reminder-template p {
+  margin: 8px 0;
+}
+
+.reminder-template ul {
+  margin: 10px 0;
+  list-style: none;
+}
+
+.reminder-template li {
+  margin: 5px 0;
+}
+
+.reminder-template a {
+  color: #1890ff;
+  text-decoration: none;
+}
+
+.reminder-template a:hover {
+  text-decoration: underline;
+}
+
+:deep(.n-modal .n-card .n-card-header) {
+  border-bottom: 1px solid #E6E6E6 !important;
+  padding-bottom: 10px !important;
+}
+</style>