样式

src/main.ts

@@ -12,7 +12,10 @@ import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import { Quasar } from 'quasar'
+// Import icon libraries
 import '@quasar/extras/material-icons/material-icons.css'
+// Import Quasar css
+import 'quasar/src/css/index.sass'
 import '@fortawesome/fontawesome-free/css/all.css'
 import './style/tailwind.css'
 const app = createApp(App)

src/style/index.scss

@@ -128,10 +128,8 @@ body,
 }
 
 
-.quasar-css {
-  @import 'quasar/src/css/index.sass';
-  .q-tree__node--selected,
-  .q-tree__node--selected .q-tree__node-header-content {
-    color: var(--czr-main-color) !important;
-  }
-}
+
+.q-tree__node--selected,
+.q-tree__node--selected .q-tree__node-header-content {
+  color: var(--czr-main-color) !important;
+}

src/views/study/chinese/index.vue

@@ -5,7 +5,7 @@
         class="col-span-1 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
       >
         <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
-          <h2 class="flex items-center text-xl font-bold">
+          <div class="flex items-center text-xl font-bold">
             <i class="fas fa-cubes mr-2"></i>
             学科统计分析
             <div
@@ -15,7 +15,7 @@
               <i class="fas fa-question-circle mr-1"></i>
               <span>学科题目</span>
             </div>
-          </h2>
+          </div>
         </div>
         <!-- 图表容器 -->
         <div class="flex-1 overflow-y-auto p-4">
@@ -68,38 +68,38 @@
             <div
               class="stat-card rounded-lg border-l-4 border-blue-500 bg-gray-50 p-3"
             >
-              <p class="text-xs text-gray-500">总练习数</p>
-              <p class="mt-1 text-2xl font-bold text-gray-800">128</p>
-              <p class="mt-1 text-xs text-green-500">
+              <div class="text-xs text-gray-500">总练习数</div>
+              <div class="mt-1 text-2xl font-bold text-gray-800">128</div>
+              <div class="mt-1 text-xs text-green-500">
                 <i class="fas fa-arrow-up"></i> 12% 较上月
-              </p>
+              </div>
             </div>
             <div
               class="stat-card rounded-lg border-l-4 border-green-500 bg-gray-50 p-3"
             >
-              <p class="text-xs text-gray-500">正确率</p>
-              <p class="mt-1 text-2xl font-bold text-gray-800">85%</p>
-              <p class="mt-1 text-xs text-green-500">
+              <div class="text-xs text-gray-500">正确率</div>
+              <div class="mt-1 text-2xl font-bold text-gray-800">85%</div>
+              <div class="mt-1 text-xs text-green-500">
                 <i class="fas fa-arrow-up"></i> 3% 较上月
-              </p>
+              </div>
             </div>
             <div
               class="stat-card rounded-lg border-l-4 border-yellow-500 bg-gray-50 p-3"
             >
-              <p class="text-xs text-gray-500">知识点掌握</p>
-              <p class="mt-1 text-2xl font-bold text-gray-800">78%</p>
-              <p class="mt-1 text-xs text-red-500">
+              <div class="text-xs text-gray-500">知识点掌握</div>
+              <div class="mt-1 text-2xl font-bold text-gray-800">78%</div>
+              <div class="mt-1 text-xs text-red-500">
                 <i class="fas fa-arrow-down"></i> 2% 较上月
-              </p>
+              </div>
             </div>
             <div
               class="stat-card rounded-lg border-l-4 border-purple-500 bg-gray-50 p-3"
             >
-              <p class="text-xs text-gray-500">平均成绩</p>
-              <p class="mt-1 text-2xl font-bold text-gray-800">86分</p>
-              <p class="mt-1 text-xs text-green-500">
+              <div class="text-xs text-gray-500">平均成绩</div>
+              <div class="mt-1 text-2xl font-bold text-gray-800">86分</div>
+              <div class="mt-1 text-xs text-green-500">
                 <i class="fas fa-arrow-up"></i> 5分 较上月
-              </p>
+              </div>
             </div>
           </div>
 
@@ -107,16 +107,16 @@
           <div
             class="mt-6 rounded-lg border border-yellow-100 bg-yellow-50 p-3"
           >
-            <h4 class="flex items-center font-semibold text-gray-800">
+            <div class="flex items-center font-semibold text-gray-800">
               <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
               学习建议
-            </h4>
-            <p class="mt-2 text-sm text-gray-600">
+            </div>
+            <div class="mt-2 text-sm text-gray-600">
               根据你的学习数据，建议重点加强
               <span class="font-medium text-red-500">诗歌鉴赏</span> 和
               <span class="font-medium text-red-500">文言文</span> 部分的练习。
               这两个知识点的掌握程度低于你的平均水平，可通过专项练习提升。
-            </p>
+            </div>
             <button
               class="text-subject-color mt-3 flex items-center text-sm hover:underline"
             >
@@ -131,7 +131,7 @@
           class="flex flex-1 flex-col overflow-hidden rounded-xl bg-white shadow-md"
         >
           <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
-            <h2 class="flex items-center text-xl font-bold">
+            <div class="flex items-center text-xl font-bold">
               <i class="fas fa-calendar-alt mr-2"></i>
               考试情况统计
               <div
@@ -170,7 +170,7 @@
                   </div>
                 </div>
               </div>
-            </h2>
+            </div>
           </div>
           <!-- 时间轴布局的考试记录 -->
 
@@ -179,36 +179,36 @@
             <div class="exam-item mb-3 rounded-lg border border-gray-300 p-3">
               <div class="mb-2 flex items-start justify-between">
                 <div>
-                  <h4 class="flex items-center font-semibold">
+                  <div class="flex items-center font-semibold">
                     <span
                       class="bg-exam-weekly mr-2 h-2 w-2 rounded-full"
                     ></span>
                     周测
-                  </h4>
-                  <p class="mt-0.5 text-sm text-gray-500">12月22日</p>
+                  </div>
+                  <div class="mt-0.5 text-sm text-gray-500">12月22日</div>
                 </div>
                 <span class="text-sm font-medium text-gray-800">88分</span>
               </div>
               <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">用时</p>
-                  <p class="font-medium text-gray-800">45分钟</p>
+                  <div class="text-xs text-gray-500">用时</div>
+                  <div class="font-medium text-gray-800">45分钟</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">题量</p>
-                  <p class="font-medium text-gray-800">20题</p>
+                  <div class="text-xs text-gray-500">题量</div>
+                  <div class="font-medium text-gray-800">20题</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">错题</p>
-                  <p class="font-medium text-red-500">3题</p>
+                  <div class="text-xs text-gray-500">错题</div>
+                  <div class="font-medium text-red-500">3题</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">正确率</p>
-                  <p class="font-medium text-green-500">85%</p>
+                  <div class="text-xs text-gray-500">正确率</div>
+                  <div class="font-medium text-green-500">85%</div>
                 </div>
               </div>
               <div class="mt-3">
-                <p class="mb-1 text-xs text-gray-500">错题类型：</p>
+                <div class="mb-1 text-xs text-gray-500">错题类型：</div>
                 <div class="flex flex-wrap gap-2">
                   <span
                     class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
@@ -232,36 +232,36 @@
             <div class="exam-item mb-3 rounded-lg border border-gray-300 p-3">
               <div class="mb-2 flex items-start justify-between">
                 <div>
-                  <h4 class="flex items-center font-semibold">
+                  <div class="flex items-center font-semibold">
                     <span
                       class="bg-exam-weekly mr-2 h-2 w-2 rounded-full"
                     ></span>
                     期中
-                  </h4>
-                  <p class="mt-0.5 text-sm text-gray-500">12月12日</p>
+                  </div>
+                  <div class="mt-0.5 text-sm text-gray-500">12月12日</div>
                 </div>
                 <span class="text-sm font-medium text-gray-800">88分</span>
               </div>
               <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">用时</p>
-                  <p class="font-medium text-gray-800">45分钟</p>
+                  <div class="text-xs text-gray-500">用时</div>
+                  <div class="font-medium text-gray-800">45分钟</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">题量</p>
-                  <p class="font-medium text-gray-800">20题</p>
+                  <div class="text-xs text-gray-500">题量</div>
+                  <div class="font-medium text-gray-800">20题</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">错题</p>
-                  <p class="font-medium text-red-500">3题</p>
+                  <div class="text-xs text-gray-500">错题</div>
+                  <div class="font-medium text-red-500">3题</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">正确率</p>
-                  <p class="font-medium text-green-500">85%</p>
+                  <div class="text-xs text-gray-500">正确率</div>
+                  <div class="font-medium text-green-500">85%</div>
                 </div>
               </div>
               <div class="mt-3">
-                <p class="mb-1 text-xs text-gray-500">错题类型：</p>
+                <div class="mb-1 text-xs text-gray-500">错题类型：</div>
                 <div class="flex flex-wrap gap-2">
                   <span
                     class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
@@ -286,36 +286,36 @@
             <div class="exam-item mb-3 rounded-lg border border-gray-300 p-3">
               <div class="mb-2 flex items-start justify-between">
                 <div>
-                  <h4 class="flex items-center font-semibold">
+                  <div class="flex items-center font-semibold">
                     <span
                       class="bg-exam-weekly mr-2 h-2 w-2 rounded-full"
                     ></span>
                     周测
-                  </h4>
-                  <p class="mt-0.5 text-sm text-gray-500">12月22日</p>
+                  </div>
+                  <div class="mt-0.5 text-sm text-gray-500">12月22日</div>
                 </div>
                 <span class="text-sm font-medium text-gray-800">88分</span>
               </div>
               <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">用时</p>
-                  <p class="font-medium text-gray-800">45分钟</p>
+                  <div class="text-xs text-gray-500">用时</div>
+                  <div class="font-medium text-gray-800">45分钟</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">题量</p>
-                  <p class="font-medium text-gray-800">20题</p>
+                  <div class="text-xs text-gray-500">题量</div>
+                  <div class="font-medium text-gray-800">20题</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">错题</p>
-                  <p class="font-medium text-red-500">3题</p>
+                  <div class="text-xs text-gray-500">错题</div>
+                  <div class="font-medium text-red-500">3题</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">正确率</p>
-                  <p class="font-medium text-green-500">85%</p>
+                  <div class="text-xs text-gray-500">正确率</div>
+                  <div class="font-medium text-green-500">85%</div>
                 </div>
               </div>
               <div class="mt-3">
-                <p class="mb-1 text-xs text-gray-500">错题类型：</p>
+                <div class="mb-1 text-xs text-gray-500">错题类型：</div>
                 <div class="flex flex-wrap gap-2">
                   <span
                     class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
@@ -339,36 +339,36 @@
             <div class="exam-item mb-3 rounded-lg border border-gray-300 p-3">
               <div class="mb-2 flex items-start justify-between">
                 <div>
-                  <h4 class="flex items-center font-semibold">
+                  <div class="flex items-center font-semibold">
                     <span
                       class="bg-exam-weekly mr-2 h-2 w-2 rounded-full"
                     ></span>
                     期中
-                  </h4>
-                  <p class="mt-0.5 text-sm text-gray-500">12月12日</p>
+                  </div>
+                  <div class="mt-0.5 text-sm text-gray-500">12月12日</div>
                 </div>
                 <span class="text-sm font-medium text-gray-800">88分</span>
               </div>
               <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">用时</p>
-                  <p class="font-medium text-gray-800">45分钟</p>
+                  <div class="text-xs text-gray-500">用时</div>
+                  <div class="font-medium text-gray-800">45分钟</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">题量</p>
-                  <p class="font-medium text-gray-800">20题</p>
+                  <div class="text-xs text-gray-500">题量</div>
+                  <div class="font-medium text-gray-800">20题</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">错题</p>
-                  <p class="font-medium text-red-500">3题</p>
+                  <div class="text-xs text-gray-500">错题</div>
+                  <div class="font-medium text-red-500">3题</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <p class="text-xs text-gray-500">正确率</p>
-                  <p class="font-medium text-green-500">85%</p>
+                  <div class="text-xs text-gray-500">正确率</div>
+                  <div class="font-medium text-green-500">85%</div>
                 </div>
               </div>
               <div class="mt-3">
-                <p class="mb-1 text-xs text-gray-500">错题类型：</p>
+                <div class="mb-1 text-xs text-gray-500">错题类型：</div>
                 <div class="flex flex-wrap gap-2">
                   <span
                     class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
@@ -395,10 +395,10 @@
           class="flex flex-col overflow-hidden rounded-xl bg-white shadow-md"
         >
           <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
-            <h2 class="flex items-center text-xl font-bold">
+            <div class="flex items-center text-xl font-bold">
               <i class="fas fa-clock mr-2"></i>
               近期考试提醒
-            </h2>
+            </div>
           </div>
           <div class="p-4">
             <div
@@ -409,16 +409,16 @@
               </div>
               <div class="flex-1">
                 <div class="flex items-start justify-between">
-                  <h4 class="font-semibold text-gray-800">语文周测</h4>
+                  <div class="font-semibold text-gray-800">语文周测</div>
                   <span
                     class="rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                     >3天后</span
                   >
                 </div>
-                <p class="mt-1 text-sm text-gray-600">
+                <div class="mt-1 text-sm text-gray-600">
                   本周五 14:00-15:00 | 时长60分钟
-                </p>
-                <p class="text-sm text-gray-600">范围：第5单元文言文阅读</p>
+                </div>
+                <div class="text-sm text-gray-600">范围：第5单元文言文阅读</div>
                 <div class="mt-3 flex items-center justify-between">
                   <div class="flex items-center">
                     <i class="fas fa-book-open mr-1 text-gray-400"></i>

src/views/study/components/study-layout.vue

@@ -5,7 +5,7 @@
       class="flex w-full items-center bg-[var(--czr-main-color)] px-4 text-white shadow-md"
     >
       <div class="flex items-center">
-        <h1 class="text-xl font-bold">学习系统</h1>
+        <div class="text-xl font-bold">学习系统</div>
       </div>
       <div class="ml-auto flex h-16 items-center">
         <template v-for="item in menusCpt">

src/views/study/home/index.vue

@@ -5,88 +5,96 @@
         class="col-span-1 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
       >
         <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
-          <h2 class="flex items-center text-xl font-bold">
+          <div class="flex items-center text-xl font-bold">
             <i class="fas fa-calendar-alt mr-2"></i>
             本周学习计划
-          </h2>
+          </div>
         </div>
         <div class="flex-1 overflow-y-auto p-4">
           <div class="space-y-4">
             <div class="rounded-lg border-l-4 border-orange-500 bg-gray-50 p-3">
               <div class="mb-1 flex items-center justify-between">
-                <h3 class="font-semibold">周一</h3>
+                <div class="text-base font-semibold">周一</div>
                 <span
                   class="rounded-full bg-orange-500/10 px-2 py-0.5 text-xs text-orange-500"
                   >语文</span
                 >
               </div>
-              <p class="text-sm text-gray-600">
+              <div class="text-sm text-gray-600">
                 完成《古诗三首》背诵和理解，完成练习册P12-15页
-              </p>
+              </div>
             </div>
             <div class="rounded-lg border-l-4 border-blue-500 bg-gray-50 p-3">
               <div class="mb-1 flex items-center justify-between">
-                <h3 class="font-semibold">周二</h3>
+                <div class="text-base font-semibold">周二</div>
                 <span
                   class="rounded-full bg-blue-500/10 px-2 py-0.5 text-xs text-blue-500"
                   >数学</span
                 >
               </div>
-              <p class="text-sm text-gray-600">
+              <div class="text-sm text-gray-600">
                 完成一元一次方程习题，练习册P20-25页
-              </p>
+              </div>
             </div>
             <div class="rounded-lg border-l-4 border-green-500 bg-gray-50 p-3">
               <div class="mb-1 flex items-center justify-between">
-                <h3 class="font-semibold">周三</h3>
+                <div class="text-base font-semibold">周三</div>
                 <span
                   class="rounded-full bg-green-500/10 px-2 py-0.5 text-xs text-green-500"
                   >英语</span
                 >
               </div>
-              <p class="text-sm text-gray-600">
+              <div class="text-sm text-gray-600">
                 背诵Unit 3单词，完成阅读理解练习2篇
-              </p>
+              </div>
             </div>
             <div class="rounded-lg border-l-4 border-purple-500 bg-gray-50 p-3">
               <div class="mb-1 flex items-center justify-between">
-                <h3 class="font-semibold">周四</h3>
+                <div class="text-base font-semibold">周四</div>
                 <span
                   class="rounded-full bg-purple-500/10 px-2 py-0.5 text-xs text-purple-500"
                   >综合</span
                 >
               </div>
-              <p class="text-sm text-gray-600">复习本周所学内容，整理错题本</p>
+              <div class="text-sm text-gray-600">
+                复习本周所学内容，整理错题本
+              </div>
             </div>
             <div class="rounded-lg border-l-4 border-yellow-500 bg-gray-50 p-3">
               <div class="mb-1 flex items-center justify-between">
-                <h3 class="font-semibold">周五</h3>
+                <div class="text-base font-semibold">周五</div>
                 <span
                   class="rounded-full bg-yellow-500/10 px-2 py-0.5 text-xs text-yellow-500"
                   >测试</span
                 >
               </div>
-              <p class="text-sm text-gray-600">完成本周小测试，检查学习效果</p>
+              <div class="text-sm text-gray-600">
+                完成本周小测试，检查学习效果
+              </div>
             </div>
             <div class="rounded-lg border-l-4 border-red-500 bg-gray-50 p-3">
               <div class="mb-1 flex items-center justify-between">
-                <h3 class="font-semibold">周六</h3>
+                <div class="text-base font-semibold">周六</div>
                 <span
                   class="rounded-full bg-red-500/10 px-2 py-0.5 text-xs text-red-500"
                   >测试</span
                 >
               </div>
-              <p class="text-sm text-gray-600">完成本周小测试，检查学习效果</p>
+              <div class="text-sm text-gray-600">
+                完成本周小测试，检查学习效果
+              </div>
             </div>
             <div class="rounded-lg border-l-4 border-cyan-500 bg-gray-50 p-3">
               <div class="mb-1 flex items-center justify-between">
-                <h3 class="font-semibold">周日</h3>
+                <div class="text-base font-semibold">周日</div>
                 <span
                   class="rounded-full bg-cyan-500/10 px-2 py-0.5 text-xs text-cyan-500"
                   >测试</span
                 >
               </div>
-              <p class="text-sm text-gray-600">完成本周小测试，检查学习效果</p>
+              <div class="text-sm text-gray-600">
+                完成本周小测试，检查学习效果
+              </div>
             </div>
           </div>
         </div>
@@ -99,7 +107,7 @@
             class="col-span-1 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
           >
             <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
-              <h2 class="flex items-center text-xl font-bold">
+              <div class="flex items-center text-xl font-bold">
                 <i class="fas fa-trophy mr-2"></i>
                 学生TOP排名
                 <div
@@ -114,11 +122,11 @@
                     <option value="english">英语</option>
                   </select>
                 </div>
-              </h2>
+              </div>
             </div>
-            <div class="h-full overflow-y-auto p-4">
-              <ul class="space-y-2">
-                <li
+            <div class="flex-1 overflow-y-auto p-4">
+              <div class="space-y-2">
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -136,16 +144,16 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">张明</p>
-                    <p class="text-xs text-gray-500">初一(1)班</p>
+                    <div class="truncate font-medium text-gray-800">张明</div>
+                    <div class="text-xs text-gray-500">初一(1)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       98分
-                    </p>
+                    </div>
                   </div>
-                </li>
-                <li
+                </div>
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -163,16 +171,16 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">李华</p>
-                    <p class="text-xs text-gray-500">初一(2)班</p>
+                    <div class="truncate font-medium text-gray-800">李华</div>
+                    <div class="text-xs text-gray-500">初一(2)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       96分
-                    </p>
+                    </div>
                   </div>
-                </li>
-                <li
+                </div>
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -190,16 +198,16 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">王芳</p>
-                    <p class="text-xs text-gray-500">初一(1)班</p>
+                    <div class="truncate font-medium text-gray-800">王芳</div>
+                    <div class="text-xs text-gray-500">初一(1)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       94分
-                    </p>
+                    </div>
                   </div>
-                </li>
-                <li
+                </div>
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -217,16 +225,16 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">赵伟</p>
-                    <p class="text-xs text-gray-500">初一(3)班</p>
+                    <div class="truncate font-medium text-gray-800">赵伟</div>
+                    <div class="text-xs text-gray-500">初一(3)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       92分
-                    </p>
+                    </div>
                   </div>
-                </li>
-                <li
+                </div>
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -244,23 +252,23 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">陈静</p>
-                    <p class="text-xs text-gray-500">初一(2)班</p>
+                    <div class="truncate font-medium text-gray-800">陈静</div>
+                    <div class="text-xs text-gray-500">初一(2)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       90分
-                    </p>
+                    </div>
                   </div>
-                </li>
-              </ul>
+                </div>
+              </div>
             </div>
           </div>
           <div
             class="col-span-1 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
           >
             <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
-              <h2 class="flex items-center text-xl font-bold">
+              <div class="flex items-center text-xl font-bold">
                 <i class="fas fa-trophy mr-2"></i>
                 学生TOP排名
                 <div
@@ -275,11 +283,11 @@
                     <option value="english">英语</option>
                   </select>
                 </div>
-              </h2>
+              </div>
             </div>
-            <div class="h-full overflow-y-auto p-4">
-              <ul class="space-y-2">
-                <li
+            <div class="flex-1 overflow-y-auto p-4">
+              <div class="space-y-2">
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -297,16 +305,16 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">张明</p>
-                    <p class="text-xs text-gray-500">初一(1)班</p>
+                    <div class="truncate font-medium text-gray-800">张明</div>
+                    <div class="text-xs text-gray-500">初一(1)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       98分
-                    </p>
+                    </div>
                   </div>
-                </li>
-                <li
+                </div>
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -324,16 +332,16 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">李华</p>
-                    <p class="text-xs text-gray-500">初一(2)班</p>
+                    <div class="truncate font-medium text-gray-800">李华</div>
+                    <div class="text-xs text-gray-500">初一(2)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       96分
-                    </p>
+                    </div>
                   </div>
-                </li>
-                <li
+                </div>
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -351,16 +359,16 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">王芳</p>
-                    <p class="text-xs text-gray-500">初一(1)班</p>
+                    <div class="truncate font-medium text-gray-800">王芳</div>
+                    <div class="text-xs text-gray-500">初一(1)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       94分
-                    </p>
+                    </div>
                   </div>
-                </li>
-                <li
+                </div>
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -378,16 +386,16 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">赵伟</p>
-                    <p class="text-xs text-gray-500">初一(3)班</p>
+                    <div class="truncate font-medium text-gray-800">赵伟</div>
+                    <div class="text-xs text-gray-500">初一(3)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       92分
-                    </p>
+                    </div>
                   </div>
-                </li>
-                <li
+                </div>
+                <div
                   class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
                 >
                   <div
@@ -405,16 +413,16 @@
                     />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="truncate font-medium text-gray-800">陈静</p>
-                    <p class="text-xs text-gray-500">初一(2)班</p>
+                    <div class="truncate font-medium text-gray-800">陈静</div>
+                    <div class="text-xs text-gray-500">初一(2)班</div>
                   </div>
                   <div class="min-w-[50px] text-right">
-                    <p class="text-sm font-bold text-[var(--czr-main-color)]">
+                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
                       90分
-                    </p>
+                    </div>
                   </div>
-                </li>
-              </ul>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -422,12 +430,12 @@
           class="mx-0.5 flex flex-1 flex-col overflow-hidden rounded-xl bg-white shadow-md"
         >
           <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
-            <h2 class="flex items-center text-xl font-bold">
+            <div class="flex items-center text-xl font-bold">
               <i class="fas fa-chalkboard-teacher mr-2"></i>
               教师简介
-            </h2>
+            </div>
           </div>
-          <div class="relative h-full p-4">
+          <div class="relative flex-1 p-4">
             <div class="teacher-carousel h-full" id="teacherCarousel">
               <div
                 class="teacher-slide active flex items-center justify-center p-6"
@@ -448,16 +456,16 @@
                       </div>
                     </div>
                     <div class="teacher-info">
-                      <h3 class="mb-2 text-2xl font-bold text-gray-800">
+                      <div class="mb-2 text-2xl font-bold text-gray-800">
                         王老师
-                      </h3>
-                      <p class="mb-4 text-lg text-[var(--czr-main-color)]">
+                      </div>
+                      <div class="mb-4 text-lg text-[var(--czr-main-color)]">
                         语文教师 | 10年教龄
-                      </p>
-                      <p class="leading-relaxed text-gray-600">
+                      </div>
+                      <div class="leading-relaxed text-gray-600">
                         毕业于北京师范大学中文系，曾获市级优秀教师称号，擅长文言文教学和写作指导。教学风格生动有趣，注重培养学生的文学素养和审美能力。<br /><br />
                         在过去的教学实践中，王老师开发了"情境式文言文教学法"，通过历史场景还原和角色扮演，帮助学生深入理解古文内涵。所带班级语文平均分连续五年位列年级第一，指导的学生多次在全国作文比赛中获奖。
-                      </p>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -480,16 +488,16 @@
                       </div>
                     </div>
                     <div class="teacher-info">
-                      <h3 class="mb-2 text-2xl font-bold text-gray-800">
+                      <div class="mb-2 text-2xl font-bold text-gray-800">
                         李老师
-                      </h3>
-                      <p class="mb-4 text-lg text-[var(--czr-main-color)]">
+                      </div>
+                      <div class="mb-4 text-lg text-[var(--czr-main-color)]">
                         数学教师 | 8年教龄
-                      </p>
-                      <p class="leading-relaxed text-gray-600">
+                      </div>
+                      <div class="leading-relaxed text-gray-600">
                         毕业于复旦大学数学系，教学风格生动有趣，注重培养学生的逻辑思维能力。曾多次指导学生参加数学竞赛并获得省级奖项，深受学生喜爱。<br /><br />
                         李老师独创"生活化数学"教学模式，将抽象的数学概念与日常生活现象相结合，让学生在实践中理解数学原理。开发了多款数学学习小游戏，使枯燥的数学练习变得趣味盎然，有效提升了学生的学习兴趣和成绩。
-                      </p>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -512,16 +520,16 @@
                       </div>
                     </div>
                     <div class="teacher-info">
-                      <h3 class="mb-2 text-2xl font-bold text-gray-800">
+                      <div class="mb-2 text-2xl font-bold text-gray-800">
                         张老师
-                      </h3>
-                      <p class="mb-4 text-lg text-[var(--czr-main-color)]">
+                      </div>
+                      <div class="mb-4 text-lg text-[var(--czr-main-color)]">
                         英语教师 | 12年教龄
-                      </p>
-                      <p class="leading-relaxed text-gray-600">
+                      </div>
+                      <div class="leading-relaxed text-gray-600">
                         毕业于上海外国语大学，曾留学英国，擅长口语教学和应试技巧指导。教学方法新颖独特，注重培养学生的实际应用能力和跨文化交际能力。<br /><br />
                         张老师引入"沉浸式英语教学法"，课堂上全程使用英语授课，创造母语学习环境。编写了《中学生日常英语会话手册》，收录了1000+实用对话场景，帮助学生快速提升口语能力。所教学生英语口语平均分高于年级平均水平20%。
-                      </p>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -544,16 +552,16 @@
                       </div>
                     </div>
                     <div class="teacher-info">
-                      <h3 class="mb-2 text-2xl font-bold text-gray-800">
+                      <div class="mb-2 text-2xl font-bold text-gray-800">
                         刘老师
-                      </h3>
-                      <p class="mb-4 text-lg text-[var(--czr-main-color)]">
+                      </div>
+                      <div class="mb-4 text-lg text-[var(--czr-main-color)]">
                         物理教师 | 15年教龄
-                      </p>
-                      <p class="leading-relaxed text-gray-600">
+                      </div>
+                      <div class="leading-relaxed text-gray-600">
                         毕业于清华大学物理系，教学经验丰富，多次指导学生在物理竞赛中获奖。注重理论与实践相结合，善于激发学生对科学的兴趣和探索精神。<br /><br />
                         刘老师创建了"趣味物理实验室"，设计了50+个家庭可做的物理实验，让学生通过动手操作理解物理原理。带领学生参加全国青少年科技创新大赛，获得多项奖项。主编的《生活中的物理学》成为学校推荐阅读书目。
-                      </p>
+                      </div>
                     </div>
                   </div>
                 </div>