From 305119df24746782e0269db04a79404aa25a8715 Mon Sep 17 00:00:00 2001
From: Yep_Q <xiaoqi6pi@qq.com>
Date: Thu, 9 Oct 2025 12:09:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=A3=9F=E5=93=81?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=8F=AD=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E4=B8=BA=E7=B4=A7=E5=87=91=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

详细说明:
- 减小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
- 影响模块: 食品订单班整体布局和间距系统
---
 .../order-classes/food/css/styles.css         | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web_frontend/web_result/order-classes/food/css/styles.css b/web_frontend/web_result/order-classes/food/css/styles.css
index c6ef0aa7..6e7588fa 100644
--- a/web_frontend/web_result/order-classes/food/css/styles.css
+++ b/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;  /* 移除底部边距 */