185 lines
3.5 KiB
SCSS
185 lines
3.5 KiB
SCSS
.page {
|
||
min-height: 100vh;
|
||
background: $color-bg;
|
||
}
|
||
|
||
.stateWrap {
|
||
margin-top: 120px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.heartCard {
|
||
margin: 24px;
|
||
padding: 32px;
|
||
background: linear-gradient(135deg, #fff 0%, #fdf7f6 100%);
|
||
border-radius: $radius-lg;
|
||
box-shadow: $shadow-card;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
border: 1px solid rgba(245, 34, 45, 0.06);
|
||
}
|
||
|
||
.heartLeft {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-width: 200px;
|
||
}
|
||
|
||
// 心形图标：浅红圆底衬托，弱化大面积实色
|
||
.heartIconWrap {
|
||
width: 88px;
|
||
height: 88px;
|
||
border-radius: $radius-circle;
|
||
background: $color-danger-light-bg;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.heartIcon {
|
||
font-size: 48px;
|
||
color: $color-danger;
|
||
line-height: 1;
|
||
}
|
||
|
||
.heartValue {
|
||
margin-top: 16px;
|
||
font-size: 96px;
|
||
font-weight: 700;
|
||
color: $color-text;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
// 心率越阈（<60 或 >100 BPM）：大数字转红
|
||
.heartValueDanger { color: $color-danger; }
|
||
|
||
.heartUnit { margin-top: 8px; font-size: 30px; color: $color-text-secondary; }
|
||
|
||
.badge {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 24px;
|
||
border-radius: $radius-pill;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.badgeOn { background: $color-success-light-bg; color: $color-success; }
|
||
.badgeOff { background: $color-bg-disabled; color: $color-text-secondary; }
|
||
|
||
.badgeDot {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: $radius-circle;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.badgeDotOn { background: $color-success; }
|
||
.badgeDotOff { background: $color-text-secondary; }
|
||
|
||
.heartRight { flex: 1; min-width: 0; margin-left: 32px; }
|
||
|
||
.heartHealthLabel {
|
||
font-size: 30px;
|
||
font-weight: 500;
|
||
color: $color-text;
|
||
margin-bottom: 8px;
|
||
display: block;
|
||
}
|
||
|
||
.heartTime {
|
||
font-size: 24px;
|
||
color: $color-text-tertiary;
|
||
}
|
||
|
||
.metricGrid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.metricCard {
|
||
width: 48.5%;
|
||
box-sizing: border-box;
|
||
margin-bottom: 20px;
|
||
padding: 28px 24px;
|
||
background: $color-bg-white;
|
||
border-radius: $radius-md;
|
||
box-shadow: $shadow-card;
|
||
}
|
||
|
||
// 指标名左侧小色条：六卡各自的语义色，替代大数字整体染色
|
||
.metricLabel {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26px;
|
||
color: $color-text-secondary;
|
||
|
||
&::before {
|
||
content: '';
|
||
width: 8px;
|
||
height: 24px;
|
||
border-radius: $radius-pill;
|
||
margin-right: 12px;
|
||
background: $color-text-placeholder;
|
||
}
|
||
}
|
||
|
||
.metricLabelBlue::before { background: $color-info; }
|
||
.metricLabelOrange::before { background: $color-warning; }
|
||
.metricLabelGreen::before { background: $color-success; }
|
||
.metricLabelRed::before { background: $color-danger; }
|
||
|
||
.metricRow {
|
||
margin-top: 14px;
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.metricValue {
|
||
font-size: 44px;
|
||
font-weight: 700;
|
||
color: $color-text;
|
||
}
|
||
|
||
// 状态告警色：warning 橙（注意态）、danger 红（越阈值）
|
||
.metricValueWarning {
|
||
font-size: 44px;
|
||
font-weight: 700;
|
||
color: $color-warning;
|
||
}
|
||
|
||
.metricValueDanger {
|
||
font-size: 44px;
|
||
font-weight: 700;
|
||
color: $color-danger;
|
||
}
|
||
|
||
.metricBlue { color: $color-primary-deep; }
|
||
.metricOrange { color: #fa8c16; }
|
||
.metricGreen { color: $color-success; }
|
||
.metricRed { color: $color-danger; }
|
||
|
||
.metricUnit {
|
||
margin-left: 8px;
|
||
font-size: 24px;
|
||
color: $color-text-tertiary;
|
||
}
|
||
|
||
// 设备信息卡分区标题
|
||
.infoTitle {
|
||
display: block;
|
||
margin: 24px 24px 16px;
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
color: $color-text;
|
||
}
|
||
|
||
.infoCard {
|
||
margin: 4px 24px 24px;
|
||
}
|