修复考试卡片布局:固定每行显示3个

- 将网格布局从自适应改为固定3列
- 确保所有卡片等高(stretch)
- 添加flexbox布局确保卡片内容正确伸展
- 解决有"进行中"标签时高度不一致的问题

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
燕陇琪 2025-11-18 22:57:46 +08:00
parent 9d1946b611
commit e057505e8a

View File

@ -29,9 +29,9 @@
// 试卷网格布局 // 试卷网格布局
.examGrid { .examGrid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-template-columns: repeat(3, 1fr); // 固定显示3列
gap: 24px; gap: 24px;
align-items: start; align-items: stretch; // 确保所有卡片等高
} }
// 试卷卡片样式重构 // 试卷卡片样式重构
@ -42,6 +42,9 @@
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden; overflow: hidden;
background: white; background: white;
height: 100%; // 确保卡片占满网格单元格高度
display: flex;
flex-direction: column;
&:hover { &:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
@ -50,6 +53,9 @@
:global(.ant-card-body) { :global(.ant-card-body) {
padding: 0; padding: 0;
flex: 1; // 让卡片内容自动伸展
display: flex;
flex-direction: column;
} }
} }