.permission-requests { display: flex; flex-direction: column; gap: 1rem; } .permission-card { transition: all 0.2s ease; border-radius: 8px; background-color: #343a40; } .permission-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .custom-badge { padding: 0.35em 0.65em; font-size: 0.85em; } .badge.bg-info { background-color: #0dcaf0 !important; } .badge.bg-success { background-color: #198754 !important; } .badge.bg-danger { background-color: #dc3545 !important; } .badge.bg-secondary { background-color: #6c757d !important; } /* 表格行鼠标样式 */ .cursor-pointer { cursor: pointer; } /* 滑动面板样式 */ .slide-over-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .slide-over-backdrop.show { opacity: 1; visibility: visible; } .slide-over { position: fixed; top: 0; right: -450px; width: 450px; height: 100%; background-color: #fff; z-index: 1050; transition: right 0.3s ease; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); } .slide-over.show { right: 0; } .slide-over-content { display: flex; flex-direction: column; height: 100%; } .slide-over-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #e9ecef; } .slide-over-body { flex: 1; padding: 1rem; overflow-y: auto; } .slide-over-footer { padding: 1rem; border-top: 1px solid #e9ecef; display: flex; justify-content: flex-end; gap: 0.5rem; } /* 头像占位符 */ .avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; background-color: #6c757d; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; } /* 新增样式 - 白色基调 */ .badge-count { background-color: #ff4d4f; color: white; border-radius: 20px; padding: 4px 12px; font-size: 14px; } .pending-requests-list { display: flex; flex-direction: column; gap: 12px; } .pending-request-item { position: relative; background-color: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s ease; } .pending-request-item:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .request-header { display: flex; justify-content: space-between; margin-bottom: 12px; } .user-info h6 { font-weight: 600; } .department { color: #666; font-size: 14px; margin: 0; } .request-date { color: #999; font-size: 14px; } .request-content { color: #333; } .permission-badges { display: flex; flex-wrap: wrap; gap: 8px; } .permission-badge { padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; } .permission-badge.read { background-color: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; } .permission-badge.edit { background-color: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; } .permission-badge.delete { background-color: #fff2f0; color: #ff4d4f; border: 1px solid #ffccc7; } .request-actions { position: absolute; right: 1rem; bottom: 1rem; display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } /* 分页控件样式 */ .pagination-container { display: flex; justify-content: center; align-items: center; margin-top: 20px; padding: 10px 0; } .pagination-button { background-color: #fff; border: 1px solid #d9d9d9; color: #333; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.2s; } .pagination-button:hover:not(:disabled) { border-color: #1890ff; color: #1890ff; } .pagination-button:disabled { color: #d9d9d9; cursor: not-allowed; } .pagination-info { margin: 0 15px; color: #666; font-size: 14px; }