.page-camera { display: flex; flex-direction: column; gap: 12px; overflow: hidden; width: 100%; height: 100%; min-height: 0; } .page-camera .page5-top { display: flex; gap: 12px; width: 100%; height: 80px; flex: none; } .page-camera .page5-top .status-bar { flex: 1; min-width: 0; height: 100%; } .page-camera .status-bar { display: flex; align-items: center; padding: 8px 12px; background: linear-gradient(180deg, #0f172a, #0b1220); gap: 12px; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 6px; flex-shrink: 0; } .page-camera .status-item { display: flex; flex-direction: column; gap: 4px; } .page-camera .status-item .label { font-size: 14px; } .page-camera .status-item .value { font-size: 14px; font-family: ui-monospace, Consolas, monospace; } .page-camera .button-item { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-direction: row; } /* 左右拆分的栏 */ .page-camera .panes { display: flex; gap: 12px; flex: 1; min-height: 0; overflow: hidden; } /* 相机拍照预览 */ .page-camera .left-pane { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow: hidden; min-width: 0; } .page-camera .left-pane .card { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .page-camera .camera-card { flex: 1; display: flex; flex-direction: column; min-height: 0; } .page-camera .camera-image-box { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; background: #020617; border: 1px solid #1f2937; border-radius: 6px; margin-bottom: 14px; } .page-camera .camera-image-box img { width: 100%; height: 100%; object-fit: contain; } .page-camera .camera-info-table { width: 100%; height: 70px; border-collapse: collapse; border-spacing: 0; background: #111827; table-layout: fixed; } .page-camera .camera-info-table td { border: 1px solid #374151; padding: 0 10px; white-space: nowrap; color: #e2e8f0; } .page-camera .camera-info-table td:nth-child(1), .page-camera .camera-info-table td:nth-child(3) { width: 110px; color: #94a3b8; } /* 展示服务日志 */ .page-camera .right-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ================= 移动端适配 (≤768px) ================= */ @media (max-width: 768px) { .page-camera .status-bar { flex-wrap: wrap; row-gap: 6px; } .page-camera .page5-top { flex-direction: column; } .page-camera .panes { flex-direction: column; } .page-camera .left-pane, .page-camera .right-pane { width: 100%; } .page-camera .left-pane { flex-direction: column; } }