修改卡片统计标签为横向排列

- 将examStats从垂直排列改为横向排列
- 三个标签(最高分、考试次数、进行中)在同一行显示
- 添加flex-wrap允许在窄屏时换行
- 标签内容居中对齐

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
燕陇琪 2025-11-18 23:01:18 +08:00
parent e057505e8a
commit 9887f99a89

View File

@ -185,10 +185,14 @@
// 统计数据样式 // 统计数据样式
.examStats { .examStats {
display: flex; display: flex;
flex-direction: column; flex-direction: row; // 改为横向排列
flex-wrap: wrap; // 允许换行
gap: 12px; gap: 12px;
.statItem { .statItem {
flex: 1; // 让每个项目平均分配空间
min-width: 0; // 允许flex收缩
.valueTag { .valueTag {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
@ -202,6 +206,7 @@
gap: 8px; gap: 8px;
line-height: 1.4; line-height: 1.4;
width: 100%; width: 100%;
justify-content: center; // 内容居中
.anticon { .anticon {
font-size: 14px; font-size: 14px;
@ -224,6 +229,8 @@
gap: 8px; gap: 8px;
line-height: 1.4; line-height: 1.4;
width: 100%; width: 100%;
justify-content: center; // 内容居中
width: 100%;
.anticon { .anticon {
font-size: 14px; font-size: 14px;