/* 仪表板样式 */ body { background-color: #f8f9fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* 导航栏样式 */ .navbar-brand { font-weight: bold; font-size: 1.2rem; } .nav-link.active { font-weight: bold; background-color: rgba(255, 255, 255, 0.1); border-radius: 0.25rem; } /* 卡片样式 */ .card { border: none; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); transition: box-shadow 0.15s ease-in-out; } .card:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } .card-header { background-color: #fff; border-bottom: 1px solid #dee2e6; font-weight: 600; } /* 状态卡片动画 */ .card-body h3 { transition: transform 0.3s ease; } .card:hover h3 { transform: scale(1.05); } /* 按钮样式 */ .btn { border-radius: 0.375rem; font-weight: 500; transition: all 0.15s ease-in-out; } .btn:hover { transform: translateY(-1px); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); } .btn:active { transform: translateY(0); } /* 表格样式 */ .table { font-size: 0.875rem; } .table th { border-top: none; font-weight: 600; color: #495057; background-color: #f8f9fa; } .table td { vertical-align: middle; } /* 状态徽章 */ .status-badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 1rem; font-weight: 500; } .status-success { background-color: #d1e7dd; color: #0f5132; } .status-warning { background-color: #fff3cd; color: #664d03; } .status-danger { background-color: #f8d7da; color: #842029; } .status-info { background-color: #cff4fc; color: #055160; } /* 加载动画 */ .spinner-border-sm { width: 1rem; height: 1rem; } /* 提示消息样式 */ .alert { border: none; border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* 图表容器 */ .chart-container { position: relative; height: 300px; } /* 时间显示 */ #currentTime { font-family: 'Courier New', monospace; font-size: 0.9rem; } /* 系统信息卡片 */ .system-info-item { padding: 0.5rem 0; border-bottom: 1px solid #dee2e6; } .system-info-item:last-child { border-bottom: none; } .system-info-label { color: #6c757d; font-size: 0.875rem; font-weight: 500; } .system-info-value { color: #212529; font-weight: 600; } /* 响应式设计 */ @media (max-width: 768px) { .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; } .card-body { padding: 1rem; } .btn { font-size: 0.875rem; padding: 0.5rem 1rem; } .table { font-size: 0.8rem; } h3 { font-size: 1.5rem !important; } } /* 历史记录表格 */ .history-table { font-size: 0.8rem; } .history-table .task-name { font-weight: 500; color: #495057; } .history-table .status-badge { min-width: 60px; text-align: center; } .history-table .duration { font-family: 'Courier New', monospace; color: #6c757d; } /* 快速操作面板 */ .quick-actions .btn { margin-bottom: 0.5rem; } .quick-actions .btn i { margin-right: 0.5rem; } /* 下次执行时间 */ .next-run-time { font-size: 0.8rem; color: #6c757d; font-family: 'Courier New', monospace; } /* 系统状态指示器 */ .status-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; } .status-indicator.online { background-color: #198754; animation: pulse 2s infinite; } .status-indicator.offline { background-color: #dc3545; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } } /* 内存使用条 */ .memory-bar { height: 4px; background-color: #e9ecef; border-radius: 2px; overflow: hidden; margin-top: 0.25rem; } .memory-bar-fill { height: 100%; background-color: #198754; transition: width 0.3s ease; } /* 工具提示样式 */ .tooltip-inner { font-size: 0.875rem; border-radius: 0.375rem; } /* 页面加载动画 */ .page-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; z-index: 9999; } .page-loading .spinner-border { width: 3rem; height: 3rem; } /* 数据表格空状态 */ .empty-state { text-align: center; padding: 2rem; color: #6c757d; } .empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; } .empty-state h6 { margin-bottom: 0.5rem; color: #495057; } /* 悬浮操作按钮 */ .fab { position: fixed; bottom: 2rem; right: 2rem; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); z-index: 1000; transition: all 0.3s ease; } .fab:hover { transform: scale(1.1); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } /* 深色模式支持 */ @media (prefers-color-scheme: dark) { body { background-color: #212529; color: #fff; } .card { background-color: #343a40; color: #fff; } .card-header { background-color: #495057; border-bottom-color: #6c757d; } .table { color: #fff; } .table th { background-color: #495057; border-color: #6c757d; } .navbar-dark .navbar-text { color: rgba(255, 255, 255, 0.75); } }