xiaoqi/n8n_Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化能源订单班Bento Grid为3列等宽并排布局

Browse Source 
详细说明:
- 将Bento Grid从不规则布局改为3列等宽并排
- 移除bento-large/medium的大小差异，统一为等宽卡片
- 增大卡片间距至spacing-2xl，视觉更舒适
- 优化响应式断点：>1200px三列，768-1200px两列，<768px单列
- 修复用户反馈的卡片布局不美观问题
This commit is contained in:
Yep_Q
2025-10-09 14:55:10 +08:00
parent 061fdfa685
commit 6f1a9a577c
1 changed files with 8 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web_frontend/web_result/order-classes/energy/css/styles.css
View File

@@ -1049,56 +1049,34 @@ body:not(.dark-theme) .visual-divider::before {
} }
} }
/* ========== Bento Grid布局 - 不等大小网格 ========== */ /* ========== Bento Grid布局 - 3列等宽并排布局 ========== */
.bento-grid { .bento-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xl); gap: var(--spacing-2xl);
margin-bottom: var(--spacing-xl); 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-small {
grid-column: span 1;
grid-row: span 1;
}
/* Bento Grid响应式 */
@media (max-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
.bento-large {
grid-column: span 2;
grid-row: span 1;
}
.bento-medium {
grid-column: span 1;
}
}
@media (max-width: 768px) {
.bento-grid {
grid-template-columns: 1fr;
}
.bento-large, .bento-large,
.bento-medium, .bento-medium,
.bento-small { .bento-small {
grid-column: span 1; grid-column: span 1;
grid-row: span 1; grid-row: span 1;
} }
/* Bento Grid响应式 */
@media (max-width: 1200px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
}
}
@media (max-width: 768px) {
.bento-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
} }
/* ========== 卡片 - 图片优先布局 ========== */ /* ========== 卡片 - 图片优先布局 ========== */