把教师批改页面也进行了响应式改造

SLIDER_EVALUATION_FIX.md

@@ -1,360 +0,0 @@
-# Slider 评语显示问题修复
-
-## 问题描述
-
-第一次暂存作文后点击"开始批改",批改完成但不显示评语。第二次、第三次批改就能正常显示评语。
-
-## 问题分析
-
-### 问题流程
-
-```
-用户操作流程:
-1. 第一次写作文 → 点击暂存
-2. 点击"开始批改" → 调用 overAllEvaluation() API
-3. 批改完成 → 调用 getEvaluation() 获取评语
-4. ❌ 评语不显示
-
-第二次操作:
-1. 修改作文 → 点击暂存 → 版本号+1
-2. 点击"开始批改" → 调用 overAllEvaluation() API  
-3. 批改完成 → 调用 getEvaluation() 获取评语
-4. ✅ 评语正常显示
-```
-
-### 根本原因
-
-#### 问题代码 (第145-162行)
-```typescript
-const toEvaluation = () => {
-  apis.overAllEvaluation(assignmentId, studentId)
-    .then(res => {
-      if(res.data.code === 200){
-        getEvaluation()  // ❌ 问题在这里!
-        showCorrectToPageBtn.value = true;
-      }
-    })
-}
-
-const getEvaluation = () => {
-  // 使用 props.engagement.version 获取评语
-  apis.getOverall(assignmentId, studentId, props.engagement.version)
-    .then(res => {
-      data.overallEvaluation = res.data.data
-    })
-}
-```
-
-**问题点**:
-
-1. **版本号不匹配**: 第一次批改时,`props.engagement.version` 可能是 `undefined` 或者是旧版本号
-2. **时序问题**: `overAllEvaluation()` 创建批改是异步的,可能后端还没保存完成就调用 `getEvaluation()`
-3. **缺少重新获取**: 批改完成后没有重新获取最新的版本号
-
-### 为什么第二次能显示?
-
-第二次批改时:
-- `props.engagement` 已经更新,包含正确的版本号
-- 或者用户刷新了页面,重新加载了数据
-- `getEvaluationVersionList()` 返回的是最新版本号
-
-## 解决方案
-
-### 核心思路
-
-1. **获取最新版本号**: 批改完成后,主动调用 `getEvaluationVersionList()` 获取最新版本号
-2. **使用正确版本**: 将获取到的最新版本号传递给 `getEvaluation()`
-3. **添加延迟**: 给后端足够时间保存批改结果
-4. **添加降级方案**: 如果获取版本列表失败,使用 `当前版本+1`
-
-### 修复代码
-
-#### 1. 修改 `getEvaluation()` - 支持传入版本号
-
-```typescript
-const getEvaluation = (version?: number) => {
-  // 如果没有传入version,使用props中的version
-  const versionToUse = version !== undefined ? version : props.engagement.version;
-  
-  apis.getOverall(props.engagement.assignmentId, store.user.id, versionToUse)
-      .then(res => {
-        if (res.data.data) {
-          data.overallEvaluation = res.data.data;
-          console.log('成功获取评语:', data.overallEvaluation);
-        }
-        loading.value = false;
-      })
-      .catch(err => {
-        ElMessage.error("获取智能批改结果异常")
-        console.log(err)
-        loading.value = false;
-      })
-}
-```
-
-**改进点**:
-- ✅ 添加可选参数 `version?`
-- ✅ 优先使用传入的版本号
-- ✅ 添加数据检查和日志
-- ✅ 确保正确更新响应式数据
-
-#### 2. 修改 `toEvaluation()` - 获取最新版本
-
-```typescript
-const toEvaluation = () => {
-  apis.overAllEvaluation(props.engagement.assignmentId, store.user.id)
-      .then(res => {
-        if(res.data.code === 200){
-          console.log('批改请求成功,等待后端处理完成...');
-          
-          // 延迟获取评语,确保后端已经保存
-          setTimeout(() => {
-            // 先获取最新的版本列表
-            apis.getEvaluationVersionList(props.engagement.assignmentId, store.user.id)
-                .then(versionRes => {
-                  if (versionRes.data.data && versionRes.data.data.length > 0) {
-                    // 获取最新版本号(列表第一个就是最新的)
-                    const latestVersion = versionRes.data.data[0].version;
-                    console.log('获取到最新版本号:', latestVersion);
-                    
-                    // 使用最新版本号获取评语
-                    getEvaluation(latestVersion);
-                    
-                    // 允许查看详细报告
-                    showCorrectToPageBtn.value = true;
-                  } else {
-                    // 降级方案: 使用当前版本+1
-                    console.log('未获取到版本列表,使用当前版本+1');
-                    const nextVersion = (props.engagement.version || 0) + 1;
-                    getEvaluation(nextVersion);
-                    showCorrectToPageBtn.value = true;
-                  }
-                })
-                .catch(err => {
-                  console.error('获取版本列表失败:', err);
-                  // 降级方案: 使用当前版本+1
-                  const nextVersion = (props.engagement.version || 0) + 1;
-                  getEvaluation(nextVersion);
-                  showCorrectToPageBtn.value = true;
-                });
-          }, 1500); // 延迟1.5秒
-        }
-      })
-      .catch(err => {
-        ElMessage.error("智能批改请求异常")
-        console.log(err)
-        loading.value = false;
-      })
-}
-```
-
-**改进点**:
-- ✅ 添加 1.5秒延迟,确保后端处理完成
-- ✅ 主动获取最新版本号
-- ✅ 使用最新版本号获取评语
-- ✅ 添加降级方案(当前版本+1)
-- ✅ 完善错误处理和日志
-
-## 修复流程
-
-### 修复后的流程
-
-```
-用户操作:
-1. 第一次写作文 → 点击暂存
-2. 点击"开始批改"
-   ├─ 调用 overAllEvaluation() API
-   ├─ 等待1.5秒 (后端处理)
-   ├─ 调用 getEvaluationVersionList() 获取最新版本
-   ├─ 获取到 latestVersion (如version=1)
-   ├─ 调用 getEvaluation(1) 使用最新版本号
-   └─ ✅ 评语正常显示!
-```
-
-## 技术要点
-
-### 1. 异步时序问题
-
-```typescript
-// 错误: 不等后端处理完成
-apis.create().then(() => {
-  apis.get() // ❌ 可能获取不到
-})
-
-// 正确: 添加延迟
-apis.create().then(() => {
-  setTimeout(() => {
-    apis.get() // ✅ 后端已处理完成
-  }, 1500)
-})
-```
-
-### 2. 版本号管理
-
-```typescript
-// 问题: 依赖props中的版本号
-getEvaluation() {
-  apis.get(props.engagement.version) // ❌ 可能过期
-}
-
-// 解决: 主动获取最新版本号
-getLatestVersion().then(version => {
-  apis.get(version) // ✅ 最新版本
-})
-```
-
-### 3. 降级策略
-
-```typescript
-// 主方案
-getLatestVersion()
-  .then(version => getEvaluation(version))
-  .catch(() => {
-    // 降级方案
-    const fallbackVersion = (currentVersion || 0) + 1;
-    getEvaluation(fallbackVersion);
-  })
-```
-
-### 4. 响应式数据更新
-
-```typescript
-// 确保正确更新
-if (res.data.data) {
-  data.overallEvaluation = res.data.data; // ✅
-}
-
-// 避免赋值 undefined
-data.overallEvaluation = res.data.data || null; // ✅
-```
-
-## 测试建议
-
-### 测试清单
-
-1. **第一次批改测试**
-   - [ ] 写新作文
-   - [ ] 点击暂存
-   - [ ] 点击"开始批改"
-   - [ ] 等待批改完成
-   - [ ] ✅ 评语正常显示
-
-2. **多次批改测试**
-   - [ ] 修改作文
-   - [ ] 点击暂存
-   - [ ] 点击"开始批改"
-   - [ ] ✅ 新评语正常显示
-
-3. **边界测试**
-   - [ ] 网络慢时批改
-   - [ ] 后端处理时间长
-   - [ ] 获取版本列表失败
-   - [ ] ✅ 降级方案生效
-
-4. **控制台日志检查**
-   - [ ] "批改请求成功,等待后端处理完成..."
-   - [ ] "获取到最新版本号: X"
-   - [ ] "成功获取评语: ..."
-
-## 可能的后续优化
-
-### 1. 轮询机制
-
-如果1.5秒延迟不够稳定,可以改用轮询:
-
-```typescript
-const pollForEvaluation = (maxAttempts = 10) => {
-  let attempts = 0;
-  
-  const poll = () => {
-    apis.getEvaluationVersionList(assignmentId, studentId)
-      .then(res => {
-        if (res.data.data.length > 0) {
-          const latestVersion = res.data.data[0].version;
-          getEvaluation(latestVersion);
-        } else if (attempts < maxAttempts) {
-          attempts++;
-          setTimeout(poll, 500); // 每500ms轮询一次
-        }
-      });
-  };
-  
-  poll();
-}
-```
-
-### 2. WebSocket 实时通知
-
-如果项目支持WebSocket,可以改为实时推送:
-
-```typescript
-socket.on('evaluation-completed', (data) => {
-  getEvaluation(data.version);
-  ElMessage.success('批改完成!');
-});
-```
-
-### 3. 后端返回版本号
-
-修改 `overAllEvaluation` API,批改完成后直接返回新版本号:
-
-```typescript
-// 后端返回: { code: 200, data: { version: 1 } }
-apis.overAllEvaluation(assignmentId, studentId)
-  .then(res => {
-    if (res.data.data?.version) {
-      getEvaluation(res.data.data.version); // 直接使用返回的版本号
-    }
-  })
-```
-
-## 注意事项
-
-### 1. 延迟时间调整
-
-```typescript
-setTimeout(() => { ... }, 1500);
-```
-
-- 当前设置为 1.5秒
-- 如果后端处理更快,可以减少到 1000ms
-- 如果后端处理更慢,可以增加到 2000ms
-
-### 2. 版本号类型
-
-确保版本号类型一致:
-```typescript
-// 后端可能返回 string 或 number
-const latestVersion = Number(versionRes.data.data[0].version);
-```
-
-### 3. 错误处理
-
-添加更详细的错误信息:
-```typescript
-.catch(err => {
-  console.error('详细错误:', {
-    message: err.message,
-    response: err.response?.data,
-    assignmentId,
-    studentId
-  });
-})
-```
-
-## 总结
-
-### 问题原因
-- ❌ 版本号不匹配
-- ❌ 时序问题
-- ❌ 缺少重新获取
-
-### 解决方案
-- ✅ 主动获取最新版本号
-- ✅ 添加适当延迟
-- ✅ 使用正确版本号获取评语
-- ✅ 添加降级策略
-- ✅ 完善日志和错误处理
-
-### 效果
-现在第一次批改就能正常显示评语,解决了困扰用户的问题! 🎉

src/views/AIEvaluationPage/AIEvaluationPage.vue

@@ -14,7 +14,7 @@
         </div>
         <!-- 作文内容展示区域 -->
         <div class="essay-content-wrapper">
-          <el-scrollbar height="760px" class="essay-scrollbar">
+          <el-scrollbar class="essay-scrollbar">
           <span class="essay-content">
             <template v-if="data.sentenceEvaluationList?.length != 0">
               <span v-for="sentenceEvaluation in data.sentenceEvaluationList"
@@ -353,6 +353,7 @@ export default {
   position: relative;
   display: block;
   padding-right: 15px; /* 确保内容不被滚动条遮挡 */
+  padding-bottom: 20px; /* 确保最后一行不被截断 */
 }
 
 /* AI评价区域 */

src/views/CorrectPage/index.scss

@@ -17,6 +17,21 @@
   justify-content: center;
   position: relative; // 为绝对定位的错误提示提供相对定位容器
   
+  @media (max-width: 1439px) {
+    width: 280px;
+    height: 110px;
+  }
+  
+  @media (max-width: 1023px) {
+    width: 100%;
+    max-width: 400px;
+    height: 100px;
+  }
+  
+  @media (max-width: 767px) {
+    height: 90px;
+  }
+  
   .rating-component {
     display: flex;
     align-items: center;
@@ -27,6 +42,18 @@
       display: flex;
       align-items: center;
       gap: 5px;
+      
+      // 为评分标签添加响应式样式
+      span {
+        @media (max-width: 1023px) {
+          font-size: 20px !important;
+        }
+        
+        @media (max-width: 767px) {
+          font-size: 18px !important;
+          margin-left: -10px !important;
+        }
+      }
 
       .score-counter {
         display: flex;
@@ -69,6 +96,12 @@
           &.increase-btn {
             border-left: 2px solid #7EB5E1;
           }
+          
+          @media (max-width: 767px) {
+            width: 36px;
+            height: 36px;
+            font-size: 18px;
+          }
         }
 
         .score-input {
@@ -82,6 +115,12 @@
           text-align: center;
           padding: 0;
           outline: none;
+          
+          @media (max-width: 767px) {
+            width: 70px;
+            height: 36px;
+            font-size: 16px;
+          }
 
           &::placeholder {
             color: #6c757d;
@@ -139,6 +178,21 @@
   display: flex;
   flex-direction: column;
   
+  @media (max-width: 1439px) {
+    width: 280px;
+    height: 420px;
+  }
+  
+  @media (max-width: 1023px) {
+    width: 100%;
+    max-width: 400px;
+    height: 350px;
+  }
+  
+  @media (max-width: 767px) {
+    height: 300px;
+  }
+  
   .textarea-container {
     flex: 1;
     
@@ -155,6 +209,23 @@
       font-family: inherit;
       background-color: #FFF;
       
+      @media (max-width: 1439px) {
+        width: 250px;
+        height: 395px;
+      }
+      
+      @media (max-width: 1023px) {
+        width: 100%;
+        height: 325px;
+        font-size: 15px;
+      }
+      
+      @media (max-width: 767px) {
+        height: 275px;
+        font-size: 14px;
+        padding: 12px;
+      }
+      
       &:focus {
         border-color: #7EB5E1;
         box-shadow: 0 0 0 0.2rem rgba(8, 109, 192, 0.15);
@@ -185,11 +256,31 @@
   flex-direction: column;
   gap: 10px;
   
+  @media (max-width: 1439px) {
+    width: 280px;
+    height: 130px;
+  }
+  
+  @media (max-width: 1023px) {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    padding: 12px 10px;
+  }
+  
+  @media (max-width: 767px) {
+    padding: 10px 8px;
+  }
+  
   .button-row {
     display: flex;
     gap: 5px;
     justify-content: space-between;
     
+    @media (max-width: 767px) {
+      gap: 3px;
+    }
+    
     .action-btn {
       flex: 1;
       height: 30px;
@@ -200,6 +291,17 @@
       cursor: pointer;
       transition: all 0.3s ease;
       
+      @media (max-width: 1023px) {
+        font-size: 15px;
+        height: 32px;
+      }
+      
+      @media (max-width: 767px) {
+        font-size: 14px;
+        height: 30px;
+        border-radius: 6px;
+      }
+      
       &.submit-btn {
         opacity: 0.8;
         background: #5397F8;
@@ -263,6 +365,14 @@
   .progress-section {
     margin: 0px 0 0px 40px;
     
+    @media (max-width: 1023px) {
+      margin: 0px 0 0px 20px;
+    }
+    
+    @media (max-width: 767px) {
+      margin: 0px 0 0px 10px;
+    }
+    
     .progress-bar {
       :deep(.el-progress-bar__outer) {
         border-radius: 10px;
@@ -281,6 +391,14 @@
     font-weight: 600;
     color: #333;
     margin-top: -10px;
+    
+    @media (max-width: 1023px) {
+      font-size: 15px;
+    }
+    
+    @media (max-width: 767px) {
+      font-size: 14px;
+    }
   }
 }
 
@@ -291,6 +409,23 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
+  flex-shrink: 0;
+  
+  @media (max-width: 1439px) {
+    margin-left: 15px;
+    gap: 15px;
+  }
+  
+  @media (max-width: 1023px) {
+    width: 100%;
+    margin: 15px;
+    order: 3; // 在平板和手机上放在最后
+  }
+  
+  @media (max-width: 767px) {
+    margin: 10px;
+    gap: 10px;
+  }
   
   .student-score-display {
     width: 330px;
@@ -302,11 +437,34 @@
     justify-content: center;
     gap: 5px;
     
+    @media (max-width: 1439px) {
+      width: 280px;
+      height: 110px;
+    }
+    
+    @media (max-width: 1023px) {
+      width: 100%;
+      max-width: 400px;
+      height: 100px;
+    }
+    
+    @media (max-width: 767px) {
+      height: 90px;
+    }
+    
     .score-label {
       font-size: 20px;
       font-weight: 500;
       color: #333;
       margin-right: 10px;
+      
+      @media (max-width: 1023px) {
+        font-size: 18px;
+      }
+      
+      @media (max-width: 767px) {
+        font-size: 16px;
+      }
     }
     
     .score-container {
@@ -320,11 +478,20 @@
       justify-content: center;
       box-shadow: 0 2px 6px rgba(126, 181, 225, 0.15);
       
+      @media (max-width: 767px) {
+        width: 150px;
+        height: 36px;
+      }
+      
       .score-value {
         font-size: 18px;
         font-weight: 400;
         color: #333;
         text-align: center;
+        
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
       }
     }
   }
@@ -337,6 +504,24 @@
     padding: 20px;
     box-sizing: border-box;
     
+    @media (max-width: 1439px) {
+      width: 280px;
+      height: 520px;
+    }
+    
+    @media (max-width: 1023px) {
+      width: 100%;
+      max-width: 400px;
+      height: auto;
+      min-height: 400px;
+      flex: 1;
+    }
+    
+    @media (max-width: 767px) {
+      min-height: 300px;
+      padding: 15px;
+    }
+    
     .remark-content {
       width: 100%;
       height: 100%;
@@ -354,6 +539,16 @@
       padding: 0;
       margin: 0;
       
+      @media (max-width: 1023px) {
+        font-size: 15px;
+        min-height: 200px;
+      }
+      
+      @media (max-width: 767px) {
+        font-size: 14px;
+        min-height: 150px;
+      }
+      
       // 当没有评语时的样式
       &:empty::before {
         content: "老师暂未给出评语";
@@ -369,6 +564,15 @@
     justify-content: center;
     margin-top: 0px;
     
+    @media (max-width: 1439px) {
+      width: 280px;
+    }
+    
+    @media (max-width: 1023px) {
+      width: 100%;
+      max-width: 400px;
+    }
+    
     .student-back-btn {
       width: 330px;
       height: 50px;
@@ -381,6 +585,23 @@
       cursor: pointer;
       transition: all 0.3s ease;
       
+      @media (max-width: 1439px) {
+        width: 280px;
+        height: 45px;
+        font-size: 17px;
+      }
+      
+      @media (max-width: 1023px) {
+        width: 100%;
+        height: 44px;
+        font-size: 16px;
+      }
+      
+      @media (max-width: 767px) {
+        height: 40px;
+        font-size: 15px;
+      }
+      
       &:hover {
         background: linear-gradient(135deg, #4585C6, #365F91);
         transform: translateY(-2px);
@@ -399,6 +620,20 @@
   :deep(.el-dialog__body) {
     padding: 20px 0;
   }
+  
+  @media (max-width: 1023px) {
+    :deep(.el-dialog) {
+      width: 80% !important;
+      max-width: 600px;
+    }
+  }
+  
+  @media (max-width: 767px) {
+    :deep(.el-dialog) {
+      width: 90% !important;
+      max-width: none;
+    }
+  }
 }
 
 .template-list {
@@ -407,6 +642,11 @@
   gap: 15px;
   padding: 0 24px;
 
+  @media (max-width: 767px) {
+    gap: 10px;
+    padding: 0 15px;
+  }
+
   .template-item {
     box-sizing: border-box;
     padding: 0 16px;
@@ -421,6 +661,12 @@
     margin: 0 auto;
     width: 100%;
 
+    @media (max-width: 767px) {
+      height: auto;
+      min-height: 44px;
+      padding: 8px 12px;
+    }
+
     &:hover {
       background-color: #f5f7fa;
       border-color: #597D3B;
@@ -435,6 +681,11 @@
       font-size: 14px;
       line-height: 1.5;
       display: block;
+      
+      @media (max-width: 767px) {
+        white-space: normal;
+        font-size: 13px;
+      }
     }
   }
 }
@@ -442,14 +693,34 @@
 
 .correct-page {
   width: 100%;
-  height: 95vh;
+  min-height: 95vh;
   background-color: #f5f5f5;
   font-family: "Microsoft YaHei", sans-serif;
   display: flex;
+  flex-wrap: wrap; // 允许在小屏幕下换行
+  
+  // 响应式断点定义
+  // Large Desktop: > 1920px
+  // Desktop: 1440px - 1920px
+  // Laptop: 1024px - 1439px
+  // Tablet: 768px - 1023px
+  // Mobile: < 768px
+  
+  @media (max-width: 1023px) {
+    flex-direction: column;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  
+  @media (max-width: 767px) {
+    padding: 5px;
+    min-height: auto;
+  }
 
   // AI对话面板样式
   .ai-chat-panel {
     width: 380px;
+    max-width: 100%; // 防止在小屏幕溢出
     background: #FFF;
     border-right: 1px solid #e9ecef;
     display: flex;
@@ -458,6 +729,31 @@
     margin-left: 25px;
     border-radius: 15px;
     height: 90vh;
+    flex-shrink: 0; // 防止被压缩
+    
+    // 响应式调整
+    @media (max-width: 1439px) {
+      width: 320px;
+      margin-left: 15px;
+      margin-right: 15px;
+    }
+    
+    @media (max-width: 1023px) {
+      width: 100%;
+      max-width: 500px;
+      margin-left: 15px;
+      margin-right: 15px;
+      height: auto;
+      min-height: 400px;
+      max-height: 60vh;
+    }
+    
+    @media (max-width: 767px) {
+      width: calc(100% - 20px);
+      margin: 10px;
+      min-height: 300px;
+      max-height: 50vh;
+    }
 
         .chat-header {
         padding: 20px 16px 16px;
@@ -472,6 +768,14 @@
         font-weight: 600;
         color: #2c3e50;
         margin: 0;
+        
+        @media (max-width: 1023px) {
+          font-size: 16px;
+        }
+        
+        @media (max-width: 767px) {
+          font-size: 14px;
+        }
       }
 
  
@@ -566,6 +870,17 @@
             font-size: 14px;
             line-height: 1.4;
             word-wrap: break-word;
+            
+            @media (max-width: 1023px) {
+              max-width: 200px;
+              font-size: 13px;
+              padding: 10px 14px;
+            }
+            
+            @media (max-width: 767px) {
+              max-width: calc(100vw - 140px);
+              font-size: 13px;
+            }
           }
 
           .user-bubble {
@@ -629,6 +944,17 @@
             font-size: 14px;
             line-height: 1.4;
             word-wrap: break-word;
+            
+            @media (max-width: 1023px) {
+              max-width: 200px;
+              font-size: 13px;
+              padding: 10px 14px;
+            }
+            
+            @media (max-width: 767px) {
+              max-width: calc(100vw - 140px);
+              font-size: 13px;
+            }
           }
 
           .ai-bubble {
@@ -857,15 +1183,36 @@
     margin-left: 30px;
     margin-top: 25px;
     gap: 20px;
+    flex: 1;
+    min-width: 0; // 允许flex item收缩
+    
+    @media (max-width: 1439px) {
+      margin-left: 15px;
+      gap: 15px;
+    }
+    
+    @media (max-width: 1023px) {
+      width: 100%;
+      margin-left: 15px;
+      margin-right: 15px;
+      margin-top: 15px;
+      order: 2; // 在平板和手机上放在中间
+    }
+    
+    @media (max-width: 767px) {
+      margin: 10px;
+      gap: 10px;
+    }
   }
 
   // 教师功能区域
   .teacher-function-area {
-    margin-left: 20px;
+    margin-right: 15px;
     margin-top: 25px;
     display: flex;
     flex-direction: column;
     gap: 15px;
+    flex-shrink: 0;
 
     // 查看行为记录按钮
     .behavior-record-btn {
@@ -887,12 +1234,47 @@
         background: #6BA3D0;
         border-color: #6BA3D0;
       }
+      
+      @media (max-width: 1439px) {
+        width: 280px;
+        font-size: 15px;
+        padding: 8px 16px;
+      }
+      
+      @media (max-width: 1023px) {
+        width: 100%;
+        max-width: 400px;
+        margin-left: 0;
+      }
+      
+      @media (max-width: 767px) {
+        font-size: 14px;
+        height: 36px;
+        line-height: 36px;
+      }
+    }
+    
+    @media (max-width: 1439px) {
+      margin-left: 15px;
+      gap: 12px;
+    }
+    
+    @media (max-width: 1023px) {
+      width: 100%;
+      margin: 15px;
+      order: 3; // 在平板和手机上放在最后
+    }
+    
+    @media (max-width: 767px) {
+      margin: 10px;
+      gap: 10px;
     }
   }
 
   // 作业描述面板样式
   .content-panel {
     width: 900px;
+    max-width: 100%;
     height: 240px;
     background: #FFF;
     border-radius: 15px;
@@ -900,6 +1282,24 @@
     display: flex;
     flex-direction: column;
     overflow: auto;
+    
+    @media (max-width: 1439px) {
+      width: 100%;
+      min-width: 600px;
+    }
+    
+    @media (max-width: 1023px) {
+      min-width: 0;
+      height: auto;
+      min-height: 200px;
+      max-height: 300px;
+    }
+    
+    @media (max-width: 767px) {
+      height: auto;
+      min-height: 180px;
+      max-height: 250px;
+    }
 
     .assignment-section {
       flex: 1;
@@ -917,6 +1317,14 @@
           font-size: 20px;
           font-weight: 600;
           color: #000000;
+          
+          @media (max-width: 1023px) {
+            font-size: 18px;
+          }
+          
+          @media (max-width: 767px) {
+            font-size: 16px;
+          }
         }
       }
 
@@ -925,6 +1333,10 @@
         padding: 16px 20px;
         overflow-y: auto;
         background: #fff;
+        
+        @media (max-width: 767px) {
+          padding: 12px 15px;
+        }
       }
     }
   }
@@ -932,6 +1344,7 @@
   // 学生信息和回答区域样式
   .student-info-section {
     width: 900px;
+    max-width: 100%;
     height: 550px;
     background: #FFF;
     border-radius: 15px;
@@ -939,6 +1352,23 @@
     display: flex;
     flex-direction: column;
     overflow: auto;
+    
+    @media (max-width: 1439px) {
+      width: 100%;
+      min-width: 600px;
+      height: 500px;
+    }
+    
+    @media (max-width: 1023px) {
+      min-width: 0;
+      height: auto;
+      min-height: 400px;
+      flex: 1;
+    }
+    
+    @media (max-width: 767px) {
+      min-height: 300px;
+    }
 
     .student-header {
       padding: 16px 20px;
@@ -947,20 +1377,38 @@
       display: flex;
       align-items: center;
       gap: 20px;
+      flex-wrap: wrap; // 允许在小屏幕换行
 
       .student-label, .class-label {
         font-weight: 600;
         color: #333;
         font-size: 14px;
+        
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
       }
 
       .student-name, .class-name {
         color: #333;
         font-size: 14px;
+        
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
       }
 
       .student-name {
         margin-right: 30px;
+        
+        @media (max-width: 767px) {
+          margin-right: 10px;
+        }
+      }
+      
+      @media (max-width: 767px) {
+        padding: 12px 15px;
+        gap: 10px;
       }
       
       // 补交标识样式
@@ -989,6 +1437,11 @@
       color: #333;
       white-space: pre-wrap;
       word-wrap: break-word;
+      
+      @media (max-width: 767px) {
+        padding: 12px;
+        font-size: 13px;
+      }
     }
   }
 }