91 lines
1.5 KiB
CSS
91 lines
1.5 KiB
CSS
/**
|
|
* 状态徽章组件样式
|
|
*/
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* 状态颜色 - 从 documents_index.css 同步 */
|
|
.status-pending {
|
|
background-color: #E6F7FF;
|
|
color: #1890FF;
|
|
}
|
|
|
|
.status-processing {
|
|
background-color: #FFF7E6;
|
|
color: #FA8C16;
|
|
}
|
|
|
|
.status-pass {
|
|
background-color: #F6FFED;
|
|
color: #52C41A;
|
|
}
|
|
|
|
.status-warning {
|
|
background-color: #FFFBE6;
|
|
color: #FAAD14;
|
|
}
|
|
|
|
.status-fail {
|
|
background-color: #FFF1F0;
|
|
color: #F5222D;
|
|
}
|
|
|
|
/* 动画效果 - 用于processing状态 */
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.status-processing i {
|
|
animation: spin 1.2s linear infinite;
|
|
}
|
|
|
|
/* 状态徽章尺寸 */
|
|
.status-badge-sm {
|
|
padding: 0px 4px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.status-badge-lg {
|
|
padding: 3px 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 带图标的状态徽章 */
|
|
.status-badge i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* 可点击的状态徽章 */
|
|
.status-badge-clickable {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.status-badge-clickable.status-pending:hover {
|
|
background-color: #BAE7FF;
|
|
}
|
|
|
|
.status-badge-clickable.status-processing:hover {
|
|
background-color: #FFE7BA;
|
|
}
|
|
|
|
.status-badge-clickable.status-pass:hover {
|
|
background-color: #D9F7BE;
|
|
}
|
|
|
|
.status-badge-clickable.status-warning:hover {
|
|
background-color: #FFF1B8;
|
|
}
|
|
|
|
.status-badge-clickable.status-fail:hover {
|
|
background-color: #FFCCC7;
|
|
} |