From 6f1a9a577c71a2dfc629010b6e023b54b5cdf2a7 Mon Sep 17 00:00:00 2001
From: Yep_Q <xiaoqi6pi@qq.com>
Date: Thu, 9 Oct 2025 14:55:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E8=83=BD=E6=BA=90?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=8F=ADBento=20Grid=E4=B8=BA3=E5=88=97?=
 =?UTF-8?q?=E7=AD=89=E5=AE=BD=E5=B9=B6=E6=8E=92=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

详细说明:
- 将Bento Grid从不规则布局改为3列等宽并排
- 移除bento-large/medium的大小差异，统一为等宽卡片
- 增大卡片间距至spacing-2xl，视觉更舒适
- 优化响应式断点：>1200px三列，768-1200px两列，<768px单列
- 修复用户反馈的卡片布局不美观问题
---
 .../order-classes/energy/css/styles.css       | 38 ++++---------------
 1 file changed, 8 insertions(+), 30 deletions(-)

diff --git a/web_frontend/web_result/order-classes/energy/css/styles.css b/web_frontend/web_result/order-classes/energy/css/styles.css
index 6ab5049c..2c8eeb54 100644
--- a/web_frontend/web_result/order-classes/energy/css/styles.css
+++ b/web_frontend/web_result/order-classes/energy/css/styles.css
@@ -1049,55 +1049,33 @@ body:not(.dark-theme) .visual-divider::before {
     }
 }
 
-/* ========== Bento Grid布局 - 不等大小网格 ========== */
+/* ========== Bento Grid布局 - 3列等宽并排布局 ========== */
 .bento-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--spacing-xl);
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-2xl);
     margin-bottom: var(--spacing-xl);
 }
 
-.bento-large {
-    grid-column: span 2;
-    grid-row: span 2;
-}
-
-.bento-medium {
-    grid-column: span 2;
-    grid-row: span 1;
-}
-
+.bento-large,
+.bento-medium,
 .bento-small {
     grid-column: span 1;
     grid-row: span 1;
 }
 
 /* Bento Grid响应式 */
-@media (max-width: 1024px) {
+@media (max-width: 1200px) {
     .bento-grid {
         grid-template-columns: repeat(2, 1fr);
-    }
-
-    .bento-large {
-        grid-column: span 2;
-        grid-row: span 1;
-    }
-
-    .bento-medium {
-        grid-column: span 1;
+        gap: var(--spacing-xl);
     }
 }
 
 @media (max-width: 768px) {
     .bento-grid {
         grid-template-columns: 1fr;
-    }
-
-    .bento-large,
-    .bento-medium,
-    .bento-small {
-        grid-column: span 1;
-        grid-row: span 1;
+        gap: var(--spacing-lg);
     }
 }