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