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