refactor: 目标卡片改为垂直三层布局
- 卡片宽度从 280px 调整为 270px,确保 StatusBar 30 个色块完整显示 - 布局从水平两行改为垂直三层:标题行、StatusBar、Sparkline 各占一行 - Sparkline 从固定 80x32px 改为占满宽度(约 238px x 40px) - 三层之间使用 12px gap 间距 - 类名重构:card-row-1 -> card-header,拆分 card-row-2 为 card-status-bar 和 card-sparkline
This commit is contained in:
@@ -133,7 +133,7 @@ body {
|
||||
}
|
||||
|
||||
.target-card {
|
||||
width: 280px;
|
||||
width: 270px;
|
||||
flex-shrink: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(49, 83, 126, 0.12);
|
||||
@@ -144,6 +144,9 @@ body {
|
||||
transition:
|
||||
box-shadow 0.3s ease,
|
||||
transform 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.target-card:hover {
|
||||
@@ -151,11 +154,10 @@ body {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-row-1 {
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
@@ -178,10 +180,15 @@ body {
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.card-row-2 {
|
||||
.card-status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-sparkline {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
@@ -206,6 +213,7 @@ body {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-bar-block {
|
||||
|
||||
Reference in New Issue
Block a user