/* 全局样式 */ :root { --primary-color: #0d6efd; --secondary-color: #6c757d; --success-color: #198754; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #0dcaf0; --sidebar-width: 250px; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; } /* 导航栏样式 */ .navbar-brand { font-weight: 600; font-size: 1.25rem; } .navbar-nav .nav-link { font-weight: 500; padding: 0.5rem 1rem; border-radius: 0.375rem; margin: 0 0.25rem; transition: all 0.3s ease; } .navbar-nav .nav-link:hover { background-color: rgba(255, 255, 255, 0.1); } .navbar-nav .nav-link.active { background-color: rgba(255, 255, 255, 0.2); font-weight: 600; } /* 主要内容区域 */ .main-content { margin-top: 76px; /* 导航栏高度 */ min-height: calc(100vh - 76px); padding-bottom: 2rem; } .full-page { min-height: 100vh; } /* 卡片样式 */ .card { border: none; border-radius: 0.75rem; 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; border-radius: 0.75rem 0.75rem 0 0 !important; } /* 按钮样式 */ .btn { border-radius: 0.5rem; font-weight: 500; padding: 0.5rem 1rem; transition: all 0.3s ease; } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1.125rem; } /* 表格样式 */ .table { border-radius: 0.5rem; overflow: hidden; } .table th { background-color: #f8f9fa; border-bottom: 2px solid #dee2e6; font-weight: 600; padding: 1rem 0.75rem; } .table td { padding: 0.75rem; vertical-align: middle; } .table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.025); } /* 分页样式 */ .pagination { border-radius: 0.5rem; } .page-link { border-radius: 0.375rem; margin: 0 0.125rem; border: 1px solid #dee2e6; color: var(--primary-color); } .page-link:hover { background-color: #e9ecef; border-color: #adb5bd; } .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); } /* 表单样式 */ .form-control { border-radius: 0.5rem; border: 1px solid #ced4da; padding: 0.75rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-select { border-radius: 0.5rem; padding: 0.75rem; } /* 徽章样式 */ .badge { font-weight: 500; padding: 0.375rem 0.75rem; border-radius: 0.375rem; } /* 状态颜色 */ .status-normal { color: var(--success-color); } .status-late { color: var(--warning-color); } .status-absent { color: var(--danger-color); } .status-leave { color: var(--info-color); } /* 统计卡片 */ .stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1rem; } .stat-card .stat-number { font-size: 2.5rem; font-weight: 700; line-height: 1; } .stat-card .stat-label { font-size: 0.875rem; opacity: 0.9; margin-top: 0.5rem; } /* 登录页面样式 */ .min-vh-100 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .login-card { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); } /* 响应式设计 */ @media (max-width: 768px) { .main-content { margin-top: 66px; padding: 1rem; } .card { margin-bottom: 1rem; } .table-responsive { border-radius: 0.5rem; } .btn-group-vertical { width: 100%; } .btn-group-vertical .btn { margin-bottom: 0.5rem; } } /* 加载动画 */ .spinner-border-sm { width: 1rem; height: 1rem; } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* 打印样式 */ @media print { .navbar, .btn, .pagination { display: none !important; } .main-content { margin-top: 0; } .card { box-shadow: none; border: 1px solid #000; } }