/* 全局样式 */ body { font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; } /* 侧边栏样式 */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; padding: 48px 0 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } .sidebar .nav-link { font-weight: 500; color: #333; padding: 0.5rem 1rem; border-radius: 0.25rem; margin: 0.2rem 0; } .sidebar .nav-link:hover { background-color: #e9ecef; } .sidebar .nav-link.active { color: #007bff; background-color: #e8f0fe; } /* 主内容区样式 */ main { padding-top: 1.5rem; } /* 表格样式 */ .table th { background-color: #f8f9fa; font-weight: 600; } .table-hover tbody tr:hover { background-color: #f1f8ff; } /* 缩略图样式 */ .resource-thumbnail { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; } .resource-thumbnail-placeholder { width: 40px; height: 40px; background-color: #e9ecef; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #6c757d; } /* 详情预览样式 */ #detail-preview { max-height: 300px; overflow: auto; border: 1px solid #dee2e6; border-radius: 4px; padding: 10px; } #detail-preview img { max-width: 100%; max-height: 280px; object-fit: contain; } /* 限制详情预览中的缩略图尺寸 */ #detail-preview .preview-thumbnail { max-width: 200px; max-height: 200px; object-fit: contain; margin: 0 auto; display: block; } /* 分页样式 */ .pagination { margin-bottom: 0; } /* 表单样式 */ .form-control:focus, .form-select:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* 按钮样式 */ .btn-action { padding: 0.25rem 0.5rem; font-size: 0.875rem; margin-right: 0.25rem; } /* 响应式调整 */ @media (max-width: 767.98px) { .sidebar { position: static; height: auto; padding-top: 0; } main { margin-left: 0 !important; } } /* 树形结构样式 */ .category-tree { list-style: none; padding-left: 0; } .category-tree ul { list-style: none; padding-left: 20px; } .category-tree-item { padding: 5px 0; } .category-tree-toggle { cursor: pointer; margin-right: 5px; } /* 加载中样式 */ .loading { display: flex; justify-content: center; align-items: center; height: 100px; } .loading::after { content: ""; width: 30px; height: 30px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Toast提示框样式 */ .toast-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; } .toast { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }