修复考试卡片布局:固定每行显示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:
parent
9d1946b611
commit
e057505e8a
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user