103 lines
2.4 KiB
SCSS
103 lines
2.4 KiB
SCSS
// ED719 跌倒检测状态卡：状态色随语义变化（normal 绿 / warning 橙 / danger 红 / success 绿 / offline 灰）
|
||
// variables 由构建配置全局注入（config/index.ts sass.resource）
|
||
|
||
.fallCard {
|
||
margin: 24px;
|
||
padding: 32px;
|
||
border-radius: $radius-lg;
|
||
background: $color-bg-white;
|
||
box-shadow: $shadow-card;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.fallCardDanger { background: linear-gradient(160deg, #fff5f4 0%, #ffffff 60%); }
|
||
.fallCardWarning { background: linear-gradient(160deg, #fffaf0 0%, #ffffff 60%); }
|
||
.fallCardSuccess { background: linear-gradient(160deg, #f4fff0 0%, #ffffff 60%); }
|
||
|
||
.fallHead {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.fallTitle {
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
color: $color-text;
|
||
}
|
||
|
||
.fallBadge {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.fallBadgeDot {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: $radius-circle;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.fallBadgeDotOn { background: $color-success; }
|
||
.fallBadgeDotOff { background: $color-text-secondary; }
|
||
|
||
.fallBadgeTextOn { font-size: 24px; color: $color-success; }
|
||
.fallBadgeTextOff { font-size: 24px; color: $color-text-secondary; }
|
||
|
||
// 图标圆底：色随状态
|
||
.fallIconWrap {
|
||
width: 160px;
|
||
height: 160px;
|
||
margin-top: 40px;
|
||
border-radius: $radius-circle;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: $color-primary-light-bg;
|
||
}
|
||
|
||
.fallIconWrapNormal { background: $color-primary-light-bg; }
|
||
.fallIconWrapOffline { background: $color-bg-disabled; }
|
||
.fallIconWrapDanger { background: $color-danger-light-bg; }
|
||
.fallIconWrapWarning { background: #fff7e8; }
|
||
.fallIconWrapSuccess { background: $color-success-light-bg; }
|
||
|
||
.fallIcon {
|
||
font-size: 72px;
|
||
line-height: 1;
|
||
color: $color-primary;
|
||
}
|
||
|
||
.fallIconImg {
|
||
width: 110px;
|
||
height: 110px;
|
||
}
|
||
|
||
.fallStatusText {
|
||
margin-top: 32px;
|
||
font-size: 44px;
|
||
font-weight: 700;
|
||
color: $color-text;
|
||
}
|
||
|
||
.fallStatusTextNormal { color: $color-primary-deep; }
|
||
.fallStatusTextOffline { color: $color-text-secondary; }
|
||
.fallStatusTextDanger { color: $color-danger; }
|
||
.fallStatusTextWarning { color: $color-warning; }
|
||
.fallStatusTextSuccess { color: $color-success; }
|
||
|
||
.fallTime {
|
||
margin-top: 16px;
|
||
font-size: 24px;
|
||
color: $color-text-tertiary;
|
||
}
|
||
|
||
.fallVersion {
|
||
margin-top: 8px;
|
||
font-size: 24px;
|
||
color: $color-text-tertiary;
|
||
}
|