rtu_linux_services/web-ui.service/web/static/css/page5.css

.page-camera {
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  width:100%;
  height:100%;
  min-height:0;
}

.page5-top {
  display:flex;
  gap:12px;
  width:100%;
  height:80px;
  flex:none;
}

.page5-top .status-bar {
  flex:1;
  min-width:0;
  height: 100%;
}

.status-bar {
    display:flex;
    align-items:center;
    padding:8px 12px;
    background:linear-gradient(180deg, #0f172a, #0b1220);
    gap:16px;
    border:1px solid rgba(148,163,184,0.15);
    border-radius:4px;
    flex-shrink:0;
}

.status-item {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.status-item .label {
    font-size:14px;
}

.status-item .value {
    font-size:14px;
    font-family:ui-monospace, Consolas, monospace;
}

.button-item {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left:auto;
    flex-direction:row;
}

/* 左右拆分的栏 */
.panes {
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 相机拍照预览 */
.left-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    min-width: 0;
}

.left-pane .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.camera-card {
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
}

.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:4px;
    margin-bottom:14px;
}

.camera-image-box img {
    width:100%;
    height:100%;
    object-fit:contain;
}

.camera-info-table {
    width:100%;
    height:70px;
    border-collapse:collapse;
    border-spacing:0;
    background:#111827;
    table-layout:fixed;
}

.camera-info-table td {
    border:1px solid #374151;
    padding:0 10px;
    white-space:nowrap;
    color:#e2e8f0;
}

.camera-info-table td:nth-child(1),
.camera-info-table td:nth-child(3) {
    width:110px;
    color:#94a3b8;
}

/* 展示服务日志 */
.right-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}