From 1f0df40f51c47529cee9d79e3d682b400b5b2478 Mon Sep 17 00:00:00 2001
From: sladro <sladro@163.com>
Date: Mon, 15 Sep 2025 11:24:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96:=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E8=AF=84=E4=BB=B7=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复页面布局，适配主布局侧边栏
- 优化顶部header：添加粘性定位和毛玻璃效果
- 美化表格样式：渐变表头、hover效果、圆角边框
- 改进按钮交互：统一尺寸、hover动画、视觉反馈
- 完善响应式设计：平板和手机端优化
- 添加页面加载动画效果
- 提升整体视觉一致性和专业感

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/views/Evaluate.vue | 129 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 120 insertions(+), 9 deletions(-)

diff --git a/src/views/Evaluate.vue b/src/views/Evaluate.vue
index f6fb781..ead4cf3 100644
--- a/src/views/Evaluate.vue
+++ b/src/views/Evaluate.vue
@@ -498,18 +498,27 @@ export default {
 
 <style scoped>
 .evaluate-page {
-  padding: var(--spacing-lg);
-  min-height: 100vh;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
   background: var(--bg-secondary);
 }
 
 .page-header {
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  padding: var(--spacing-lg) calc(var(--spacing-xxl) * 1.2);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--spacing-xl);
-  padding-bottom: var(--spacing-lg);
-  border-bottom: 1px solid var(--border-light);
+  box-shadow: var(--shadow-sm);
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  animation: slideInDown 0.5s ease-out;
+  min-height: 64px;
 }
 
 .page-title {
@@ -529,7 +538,8 @@ export default {
 }
 
 .filter-section {
-  margin-bottom: var(--spacing-lg);
+  margin: var(--spacing-lg) calc(var(--spacing-xxl) * 1.2) var(--spacing-lg);
+  animation: slideInUp 0.6s ease-out 0.1s backwards;
 }
 
 .filter-row {
@@ -558,7 +568,9 @@ export default {
 }
 
 .student-list-section {
+  margin: 0 calc(var(--spacing-xxl) * 1.2) calc(var(--spacing-xxl) * 1.5);
   min-height: 400px;
+  animation: slideInUp 0.6s ease-out 0.2s backwards;
 }
 
 .section-header {
@@ -599,29 +611,93 @@ export default {
   display: flex;
   gap: var(--spacing-xs);
   flex-wrap: wrap;
+  align-items: center;
 }
 
 :deep(.el-table) {
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   overflow: hidden;
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
 }
 
 :deep(.el-table th) {
-  background: var(--bg-secondary);
+  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(248, 250, 252, 0.8) 100%);
   color: var(--text-primary);
   font-weight: 600;
+  font-size: var(--font-size-sm);
+  border-bottom: 2px solid var(--border);
+  padding: var(--spacing-md) var(--spacing-sm);
+}
+
+:deep(.el-table td) {
+  padding: var(--spacing-md) var(--spacing-sm);
+  border-bottom: 1px solid var(--border-light);
+  transition: var(--transition);
+}
+
+:deep(.el-table tr:hover) {
+  background: rgba(59, 130, 246, 0.02);
 }
 
 :deep(.el-button--small) {
-  padding: 4px 8px;
+  padding: 6px 12px;
   font-size: var(--font-size-xs);
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  transition: var(--transition);
+  min-width: auto;
+}
+
+:deep(.el-button--small:hover) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
 }
 
 :deep(.el-select) {
   width: 100%;
 }
 
+:deep(.el-select .el-input__wrapper) {
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  transition: var(--transition);
+}
+
+:deep(.el-select .el-input__wrapper:hover) {
+  border-color: var(--primary-light);
+}
+
+:deep(.el-tag) {
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  padding: 4px 8px;
+  font-size: var(--font-size-xs);
+}
+
+/* 动画效果 */
+@keyframes slideInDown {
+  from { opacity: 0; transform: translateY(-30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideInUp {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 @media (max-width: 1024px) {
+  .page-header {
+    padding: var(--spacing-md) var(--spacing-lg);
+    min-height: 56px;
+  }
+
+  .filter-section,
+  .student-list-section {
+    margin-left: var(--spacing-lg);
+    margin-right: var(--spacing-lg);
+  }
+
   .filter-row {
     flex-direction: column;
     align-items: stretch;
@@ -633,6 +709,41 @@ export default {
 
   .table-actions {
     justify-content: flex-start;
+    gap: 4px;
+  }
+
+  :deep(.el-button--small) {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+
+  :deep(.el-table) {
+    font-size: var(--font-size-xs);
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: flex-start;
+  }
+
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+
+  .table-actions {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  :deep(.el-button--small) {
+    width: 100%;
+    justify-content: center;
   }
 }
 </style>
\ No newline at end of file