/* ============================================================ RPA 中控平台 - 管理后台样式基于 Bootstrap 5 扩展 ============================================================ */ /* ---------- 全局 ---------- */ body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f4f6f9; min-height: 100vh; } /* ---------- 侧边栏 ---------- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: #1a2035; color: #a9b2c9; z-index: 1000; transition: transform 0.3s ease; display: flex; flex-direction: column; } .sidebar-brand { padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0.5px; } .sidebar-brand span { color: #667eea; } .sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; } .sidebar-nav .nav-item { margin-bottom: 2px; } .sidebar-nav .nav-link { color: #a9b2c9; border-radius: 8px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; transition: all 0.2s; cursor: pointer; text-decoration: none; } .sidebar-nav .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; } .sidebar-nav .nav-link.active { background: rgba(102, 126, 234, 0.2); color: #fff; } .sidebar-nav .nav-link .icon { font-size: 18px; width: 24px; text-align: center; } .sidebar-nav .nav-link .badge { margin-left: auto; background: #667eea; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 12px; } .sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 13px; } .sidebar-footer .user-info { color: #a9b2c9; } .sidebar-footer .user-info strong { color: #fff; } .sidebar-footer .btn-logout { color: #a9b2c9; background: none; border: none; padding: 4px 0; font-size: 13px; cursor: pointer; } .sidebar-footer .btn-logout:hover { color: #ef5350; } /* ---------- 主内容 ---------- */ .main-content { margin-left: 240px; padding: 24px 32px; min-height: 100vh; } /* ---------- 顶部导航 ---------- */ .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid #e9ecef; } .topbar h1 { font-size: 24px; font-weight: 600; color: #1a2035; margin: 0; } .topbar .breadcrumb { font-size: 14px; color: #888; margin: 4px 0 0; } .topbar .topbar-actions { display: flex; align-items: center; gap: 16px; } .topbar .topbar-actions .time { font-size: 14px; color: #888; } /* ---------- 统计卡片 ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: #fff; border-radius: 12px; padding: 20px 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.2s; } .stat-card:hover { transform: translateY(-2px); } .stat-card .number { font-size: 28px; font-weight: 700; color: #1a2035; } .stat-card .label { font-size: 14px; color: #888; margin-top: 2px; } .stat-card .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .stat-card .status-dot.green { background: #4caf50; } .stat-card .status-dot.red { background: #ef5350; } .stat-card .status-dot.yellow { background: #ffc107; } .stat-card .status-dot.gray { background: #bbb; } /* ---------- 页面容器 ---------- */ .page-content { display: none; } .page-content.active { display: block; } /* ---------- 嵌入模式（新 portal 用 iframe 承载本页，隐藏自带侧边栏/顶栏/页脚） ---------- 触发条件：，由 index.html 依据 URL ?embed=1 或 window.self !== window.top 设置 */ body.embed { background: #f2f3f5; } body.embed .sidebar { display: none; } body.embed .main-content { margin-left: 0; padding: 16px 20px; min-height: auto; } body.embed .main-content .topbar { display: none; } body.embed .app-footer { display: none; } /* 嵌入后弹窗默认在 iframe 内居中，避免过长页面把弹窗顶到视口外 */ body.embed .modal { position: fixed; } /* ---------- 设备列表 ---------- */ .table-devices { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .table-devices thead { background: #f8f9fa; } .table-devices th { font-weight: 600; font-size: 13px; color: #666; border-bottom: 1px solid #e9ecef; } .table-devices td { vertical-align: middle; font-size: 14px; } .table-devices .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; } .status-badge.online { background: #e8f5e9; color: #2e7d32; } .status-badge.offline { background: #fce4ec; color: #c62828; } .status-badge.degraded { background: #fff3e0; color: #e65100; } .status-badge.critical { background: #ffebee; color: #b71c1c; } /* ---------- 详情弹窗 ---------- */ .device-detail-modal .modal-content, .task-detail-modal .modal-content, .audit-detail-modal .modal-content, .wipe-proof-modal .modal-content { border-radius: 16px; border: none; } .device-detail-modal .modal-header, .task-detail-modal .modal-header, .audit-detail-modal .modal-header, .wipe-proof-modal .modal-header { border-bottom: none; padding-bottom: 0; } .device-detail-modal .modal-footer, .task-detail-modal .modal-footer, .audit-detail-modal .modal-footer, .wipe-proof-modal .modal-footer { border-top: none; } /* ---------- 工具类 ---------- */ .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- 响应式 ---------- */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; padding: 16px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .topbar { flex-wrap: wrap; } }