feat: 优化食品订单班页面布局为紧凑模式

详细说明:
- 减小section padding从96px到48px,内容更紧凑
- 优化所有间距变量,减小33%-50%:
  * spacing-xs: 12px -> 8px
  * spacing-sm: 20px -> 12px
  * spacing-md: 32px -> 20px
  * spacing-lg: 48px -> 32px
  * spacing-xl: 64px -> 40px
  * spacing-2xl: 96px -> 48px
  * spacing-3xl: 128px -> 64px
- 调整图片容器纵横比从3:2到16:9,减少垂直空间占用
- 修改文件: order-classes/food/css/styles.css
- 影响模块: 食品订单班整体布局和间距系统

web_frontend/web_result/order-classes/food/css/styles.css

@@ -17,14 +17,14 @@
     --hover-bg: rgba(255, 152, 0, 0.15);     /* 悬停背景 */
     --active-bg: rgba(76, 175, 80, 0.2);     /* 激活背景 */
 
-    /* 间距系统 - 针对大屏幕优化 */
-    --spacing-xs: 0.75rem;    /* 12px */
-    --spacing-sm: 1.25rem;    /* 20px */
-    --spacing-md: 2rem;       /* 32px */
-    --spacing-lg: 3rem;       /* 48px */
-    --spacing-xl: 4rem;       /* 64px */
-    --spacing-2xl: 6rem;      /* 96px */
-    --spacing-3xl: 8rem;      /* 128px */
+    /* 间距系统 - 优化为紧凑布局 */
+    --spacing-xs: 0.5rem;     /* 8px - 减小从12px */
+    --spacing-sm: 0.75rem;    /* 12px - 减小从20px */
+    --spacing-md: 1.25rem;    /* 20px - 减小从32px */
+    --spacing-lg: 2rem;       /* 32px - 减小从48px */
+    --spacing-xl: 2.5rem;     /* 40px - 减小从64px */
+    --spacing-2xl: 3rem;      /* 48px - 减小从96px */
+    --spacing-3xl: 4rem;      /* 64px - 减小从128px */
 
     /* 字体系统 */
     --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -615,10 +615,10 @@ body.dark-theme tr:hover {
     flex: 1;
 }
 
-/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
+/* ========== 图片容器 - 紧凑布局 ========== */
 .image-container {
     width: 100%;
-    aspect-ratio: 3/2;  /* 更宽的比例,3:2黄金比例 */
+    aspect-ratio: 16/9;  /* 更紧凑的比例,16:9宽屏比例 */
     overflow: hidden;
     border-radius: 0;  /* 在卡片内时不需要圆角 */
     margin-bottom: 0;  /* 移除底部边距 */