243 lines
3.4 KiB
CSS
243 lines
3.4 KiB
CSS
/* 自定义样式 */
|
|
:root {
|
|
--primary-color: #409EFF;
|
|
--success-color: #67C23A;
|
|
--warning-color: #E6A23C;
|
|
--danger-color: #F56C6C;
|
|
--info-color: #909399;
|
|
|
|
--text-primary: #303133;
|
|
--text-regular: #606266;
|
|
--text-secondary: #909399;
|
|
--text-placeholder: #C0C4CC;
|
|
|
|
--border-base: #DCDFE6;
|
|
--border-light: #E4E7ED;
|
|
--border-lighter: #EBEEF5;
|
|
--border-extra-light: #F2F6FC;
|
|
|
|
--background-base: #F5F7FA;
|
|
--background-light: #FAFAFA;
|
|
}
|
|
|
|
/* 滚动条样式 */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
|
|
/* 工具类 */
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.mb-10 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.mb-20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.mt-10 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.mt-20 {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.p-10 {
|
|
padding: 10px;
|
|
}
|
|
|
|
.p-20 {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 动画效果 */
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease-in;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.slide-up {
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* 响应式断点 */
|
|
@media (max-width: 768px) {
|
|
.mobile-hidden {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.desktop-hidden {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* 状态指示器 */
|
|
.status-online {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.status-offline {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.status-warning {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
/* 卡片阴影效果 */
|
|
.card-shadow {
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.card-shadow:hover {
|
|
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.loading-overlay {
|
|
position: relative;
|
|
}
|
|
|
|
.loading-overlay::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* 表格样式增强 */
|
|
.el-table .el-table__row:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 按钮组样式 */
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.button-group .el-button {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 统计卡片样式 */
|
|
.stat-card {
|
|
text-align: center;
|
|
padding: 10px;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
border-radius: 8px;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* 标签样式 */
|
|
.tag-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 描述列表样式 */
|
|
.description-list {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 10px 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.description-list .label {
|
|
font-weight: 600;
|
|
color: var(--text-regular);
|
|
}
|
|
|
|
.description-list .value {
|
|
color: var(--text-primary);
|
|
} |