sc

src/pages/stats/student.vue

@@ -736,27 +736,296 @@
     cursor: pointer;
   }
   
-  /* 响应式设计 */
-  @media screen and (min-width: 500px) {
+  /* 平板响应式 */
+  @media screen and (min-width: 768px) {
     .student-stats-container {
       max-width: 900px;
       margin: 0 auto;
+      width: 100%;
+    }
+    
+    .page-header {
+      height: 140rpx;
+      padding: 0 48rpx;
+    }
+    
+    .header-title {
+      font-size: 36rpx;
+    }
+    
+    .back-icon {
+      font-size: 48rpx;
+    }
+    
+    .export-btn {
+      font-size: 32rpx;
+    }
+    
+    .filter-section {
+      margin: 24rpx;
+      padding: 32rpx;
+    }
+    
+    .filter-row {
+      gap: 24rpx;
+    }
+    
+    .filter-label {
+      font-size: 26rpx;
+    }
+    
+    .filter-control {
+      padding: 20rpx;
+    }
+    
+    .picker-text {
+      font-size: 26rpx;
+    }
+    
+    .metrics-section,
+    .chart-section,
+    .distribution-section,
+    .student-section {
+      margin: 0 24rpx 24rpx;
+      padding: 40rpx;
+    }
+    
+    .section-title {
+      font-size: 36rpx;
+      margin-bottom: 32rpx;
     }
     
     .metrics-grid {
       grid-template-columns: repeat(4, 1fr);
+      gap: 24rpx;
+    }
+    
+    .metric-card {
+      padding: 32rpx;
+    }
+    
+    .metric-icon {
+      font-size: 56rpx;
+      margin-right: 32rpx;
+    }
+    
+    .metric-value {
+      font-size: 36rpx;
+    }
+    
+    .metric-label {
+      font-size: 26rpx;
+    }
+    
+    .chart-container {
+      padding: 32rpx;
+    }
+    
+    .chart-title {
+      font-size: 32rpx;
     }
     
     .chart-bars {
       height: 400rpx;
+      gap: 24rpx;
     }
     
     .bar {
       width: 60rpx;
     }
     
+    .bar-label,
+    .bar-value {
+      font-size: 22rpx;
+    }
+    
+    .distribution-grid {
+      gap: 24rpx;
+    }
+    
+    .distribution-card {
+      padding: 32rpx;
+    }
+    
+    .distribution-icon {
+      font-size: 56rpx;
+      margin-bottom: 24rpx;
+    }
+    
+    .distribution-title {
+      font-size: 26rpx;
+      margin-bottom: 24rpx;
+    }
+    
+    .stat-label,
+    .stat-value {
+      font-size: 22rpx;
+    }
+    
     .student-item {
       padding: 32rpx;
     }
+    
+    .student-name {
+      font-size: 32rpx;
+    }
+    
+    .student-meta {
+      gap: 40rpx;
+    }
+    
+    .meta-label,
+    .meta-value {
+      font-size: 22rpx;
+    }
+    
+    .student-arrow {
+      font-size: 36rpx;
+    }
+    
+    .load-more {
+      padding: 32rpx;
+      font-size: 26rpx;
+    }
+  }
+  
+  /* 大屏设备响应式 */
+  @media screen and (min-width: 1024px) {
+    .student-stats-container {
+      max-width: 1000px;
+    }
+    
+    .page-header {
+      height: 160rpx;
+      padding: 0 64rpx;
+    }
+    
+    .header-title {
+      font-size: 40rpx;
+    }
+    
+    .back-icon {
+      font-size: 56rpx;
+    }
+    
+    .export-btn {
+      font-size: 36rpx;
+    }
+    
+    .filter-section {
+      padding: 40rpx;
+    }
+    
+    .filter-label {
+      font-size: 28rpx;
+    }
+    
+    .filter-control {
+      padding: 24rpx;
+    }
+    
+    .picker-text {
+      font-size: 28rpx;
+    }
+    
+    .metrics-section,
+    .chart-section,
+    .distribution-section,
+    .student-section {
+      padding: 48rpx;
+    }
+    
+    .section-title {
+      font-size: 40rpx;
+      margin-bottom: 40rpx;
+    }
+    
+    .metrics-grid {
+      gap: 32rpx;
+    }
+    
+    .metric-card {
+      padding: 40rpx;
+    }
+    
+    .metric-icon {
+      font-size: 64rpx;
+      margin-right: 40rpx;
+    }
+    
+    .metric-value {
+      font-size: 40rpx;
+    }
+    
+    .metric-label {
+      font-size: 28rpx;
+    }
+    
+    .chart-container {
+      padding: 40rpx;
+    }
+    
+    .chart-title {
+      font-size: 36rpx;
+    }
+    
+    .chart-bars {
+      height: 450rpx;
+      gap: 32rpx;
+    }
+    
+    .bar {
+      width: 72rpx;
+    }
+    
+    .bar-label,
+    .bar-value {
+      font-size: 24rpx;
+    }
+    
+    .distribution-card {
+      padding: 40rpx;
+    }
+    
+    .distribution-icon {
+      font-size: 64rpx;
+      margin-bottom: 32rpx;
+    }
+    
+    .distribution-title {
+      font-size: 28rpx;
+      margin-bottom: 32rpx;
+    }
+    
+    .stat-label,
+    .stat-value {
+      font-size: 24rpx;
+    }
+    
+    .student-item {
+      padding: 40rpx;
+    }
+    
+    .student-name {
+      font-size: 36rpx;
+    }
+    
+    .student-meta {
+      gap: 48rpx;
+    }
+    
+    .meta-label,
+    .meta-value {
+      font-size: 24rpx;
+    }
+    
+    .student-arrow {
+      font-size: 40rpx;
+    }
+    
+    .load-more {
+      padding: 40rpx;
+      font-size: 28rpx;
+    }
   }
 </style>