67 lines
1.0 KiB
CSS
67 lines
1.0 KiB
CSS
|
/* 全局样式 */
|
|||
|
|
page {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|||
|
|
font-size: 28px;
|
|||
|
|
color: #333;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 通用重置 */
|
|||
|
|
view,
|
|||
|
|
text,
|
|||
|
|
image,
|
|||
|
|
button,
|
|||
|
|
input {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 灰色卡片容器 */
|
|||
|
|
.card {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 24px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 状态标签 */
|
|||
|
|
.status-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 4px 16px;
|
|||
|
|
border-radius: 100px;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge.online {
|
|||
|
|
background-color: #dcfce7;
|
|||
|
|
color: #16a34a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge.offline {
|
|||
|
|
background-color: #f3f4f6;
|
|||
|
|
color: #6b7280;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge.charging {
|
|||
|
|
background-color: #dcfce7;
|
|||
|
|
color: #16a34a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge.idle {
|
|||
|
|
background-color: #f3f4f6;
|
|||
|
|
color: #6b7280;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge.fault {
|
|||
|
|
background-color: #fee2e2;
|
|||
|
|
color: #dc2626;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 占位图标（用纯CSS画简单的tab图标） */
|
|||
|
|
.tab-icon {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
display: block;
|
|||
|
|
}
|