修改卡片统计标签为横向排列
- 将examStats从垂直排列改为横向排列 - 三个标签(最高分、考试次数、进行中)在同一行显示 - 添加flex-wrap允许在窄屏时换行 - 标签内容居中对齐 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
e057505e8a
commit
9887f99a89
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user