:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 100%); } /* 驾驶舱 WebView：整页白底，与外壳卡片同色，避免灰底衬出「外框」 */ html.cockpit-page { min-height: 100%; background: #fff; } body.cockpit-body { min-height: 100%; background: #fff; } /* 登录页整页白底（html/body/main 多层兜底，部分 WebView 会剥掉 ） */ html.login-page { height: 100%; background: #fff; } html.login-page body { min-height: 100%; background: #fff; } body.login-body { min-height: 100vh; background: #fff; } /* main 自行铺色，避免 body 渐变从边缘透出 */ #login-root.page--login { width: 100%; min-height: 100vh; background: #fff; } .page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; } .page.page--login { padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); } .page--cockpit { align-items: flex-start; /* 上下留白一致（含安全区），避免顶大底小 */ padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box; background: #fff; } .card { width: min(420px, 100%); background: #fff; border-radius: 16px; padding: 24px 18px; box-shadow: 0 10px 24px rgba(43, 68, 122, 0.12); position: relative; } .card--login { box-shadow: none !important; border-radius: 0; background: transparent; border: none; /* 窄屏占满可用宽度，宽屏限制合理上限，避免表单过宽 */ width: 100%; max-width: min(360px, 100%); min-width: 0; flex-shrink: 1; padding: clamp(16px, 3.5vw, 24px) clamp(12px, 3vw, 18px); } .card--wide { width: min(1100px, 100%); } .card--cockpit-shell { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 24px); padding: 12px 14px 12px; background: #fff; border-radius: 20px; /* 与白底 WebView 融为一体：无描边、无投影 */ box-shadow: none; border: none; } /* 嵌入工控机应用时：只保留顶栏 + 嵌入区，概览与列表收起 */ .card--cockpit-shell--embed-open #summary-grid, .card--cockpit-shell--embed-open #ipc-card-list { display: none; } /* 嵌入模式：取消卡片视口高度上限，避免 iframe 被 flex 压扁；整页可滚动 */ .card--cockpit-shell--embed-open { max-height: none; } .card--cockpit-shell--embed-open .cockpit-embed { flex: 0 0 auto; min-height: auto; } /* 嵌入模式：去掉 iframe 外框，高度按视口留白，由内部文档滚动长内容 */ .card--cockpit-shell--embed-open #cockpit-app-iframe { flex: none; display: block; width: 100%; max-width: 100%; height: calc(100dvh - 132px); min-height: 320px; border: none; border-radius: 0; box-shadow: none; background: #fff; } .cockpit-embed { display: none; flex: 1 1 auto; flex-direction: column; min-height: 0; margin-top: 16px; gap: 8px; } .cockpit-embed.is-visible { display: flex; } .cockpit-embed-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; } .cockpit-embed-back { display: flex; flex-shrink: 0; align-items: center; justify-content: center; padding: 12px; margin: 0; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: #475569; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .cockpit-embed-back:hover { background: #f8fafc; } .cockpit-embed-back:focus-visible { outline: 2px solid #3578ff; outline-offset: 2px; } .cockpit-embed-back-icon { display: block; } .cockpit-embed-label { font-size: 14px; color: #3f4b67; font-weight: 600; min-width: 0; } #cockpit-app-iframe { flex: 1 1 auto; min-height: min(420px, 55vh); width: 100%; border: 1px solid #e2e8f5; border-radius: 12px; background: #fff; } h1 { margin: 0 0 32px 0; font-size: 26px; color: #20253a; } #login-root h1 { text-align: center; } /* 登录表单控件在窄屏与 WebView 内不撑破布局 */ #login-root.page--login .form, #login-root.page--login .field { min-width: 0; } #login-root.page--login input, #login-root.page--login button { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } @media (max-width: 380px) { .page.page--login { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); } #login-root h1 { font-size: 22px; margin-bottom: 24px; } #login-root.page--login input { padding: 10px 12px; font-size: 16px; /* 避免 iOS 自动放大输入框 */ } } .cockpit-topbar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eceff4; } .cockpit-topbar .cockpit-icon-btn { margin-top: 0; } .cockpit-icon-btn { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 12px; background: #f0f2f7; color: #3d4f6f; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .cockpit-icon-btn--muted { background: transparent; box-shadow: none; color: #64748b; } .cockpit-icon-btn:active:not(:disabled) { opacity: 0.82; transform: scale(0.97); } .cockpit-icon-btn.is-loading .cockpit-icon { animation: cockpit-spin 0.75s linear infinite; } @keyframes cockpit-spin { to { transform: rotate(360deg); } } .cockpit-icon { width: 22px; height: 22px; display: block; } .cockpit-user-block { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .cockpit-user-icon { display: flex; color: #5a6a90; flex-shrink: 0; } .cockpit-user-name { font-size: 15px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* —— 驾驶舱：概览卡片 + 环形图 —— */ .cockpit-summary { margin-bottom: 4px; } .cockpit-overview-card { background: linear-gradient(165deg, #f8fafc 0%, #fff 55%); border-radius: 16px; padding: 14px 14px 12px; border: 1px solid #e8ecf1; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); } .cockpit-overview-head { display: flex; align-items: center; margin-bottom: 12px; } .cockpit-overview-title { font-size: 15px; font-weight: 700; color: #1e293b; } .cockpit-overview-body { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; } /* 两列包在一起，列间距收紧；整体再与饼图并排 */ .cockpit-overview-columns-wrap { display: grid; grid-template-columns: auto auto; column-gap: 20px; align-items: start; flex: 0 1 auto; min-width: 0; max-width: 100%; } .cockpit-overview-donut { flex-shrink: 0; align-self: center; margin-left: auto; } .cockpit-donut-wrap { position: relative; width: 76px; height: 76px; } .cockpit-donut-ring { width: 100%; height: 100%; border-radius: 50%; } .cockpit-donut-hole { position: absolute; inset: 12px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); } .cockpit-donut-num { font-size: 16px; font-weight: 800; color: #1e293b; line-height: 1.1; font-variant-numeric: tabular-nums; } .cockpit-donut-unit { font-size: 9px; color: #94a3b8; font-weight: 600; } @media (max-width: 340px) { .cockpit-overview-body { flex-direction: column; align-items: stretch; } .cockpit-overview-columns-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; } .cockpit-overview-donut { align-self: center; margin-left: 0; padding-top: 8px; } } .cockpit-overview-col--left { min-width: 0; } .cockpit-overview-col--right { min-width: 0; display: flex; flex-direction: column; gap: 8px; } /* 第二列第三行：单圆点 + 工控机 / 项目 并排 */ .cockpit-col2-row3 { display: flex; align-items: center; gap: 8px; font-size: 12px; } .cockpit-col2-metric-pair { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: nowrap; white-space: nowrap; min-width: 0; flex: 1; } .cockpit-status-dot--combined { width: 8px; height: 8px; flex-shrink: 0; background: #5c6bc0; box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.22); } .cockpit-status-list { display: flex; flex-direction: column; gap: 8px; } .cockpit-status-row { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: nowrap; } .cockpit-status-pair { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; white-space: nowrap; flex: 1; min-width: 0; } .cockpit-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .cockpit-status-dot--l0 { background: #43a047; box-shadow: 0 0 0 2px rgba(67, 160, 71, 0.25); } .cockpit-status-dot--l1 { background: #fbc02d; box-shadow: 0 0 0 2px rgba(251, 192, 45, 0.3); } .cockpit-status-dot--l2 { background: #fb8c00; box-shadow: 0 0 0 2px rgba(251, 140, 0, 0.28); } .cockpit-status-dot--l3 { background: #e53935; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.25); } .cockpit-status-dot--nd { background: #90a4ae; box-shadow: 0 0 0 2px rgba(144, 164, 174, 0.25); } .cockpit-status-label { color: #64748b; flex-shrink: 0; } .cockpit-status-value { font-weight: 700; color: #1e293b; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* —— 工控机卡片列表 —— */ .ipc-card-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .cockpit-ipc-card { background: #fff; border-radius: 16px; padding: 14px 14px 12px; border: 1px solid #e8ecf1; box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05); cursor: pointer; transition: box-shadow 0.15s ease, transform 0.12s ease; -webkit-tap-highlight-color: transparent; } .cockpit-ipc-card:active { transform: scale(0.99); } .cockpit-ipc-card:focus-visible { outline: 2px solid #3578ff; outline-offset: 2px; } .cockpit-ipc-card.is-selected { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(53, 120, 255, 0.15); } .cockpit-ipc-card--err { cursor: default; border-color: #fecaca; background: #fffafa; } .cockpit-ipc-card--err:active { transform: none; } .ipc-card__head { margin-bottom: 10px; } .ipc-card__path { font-size: 14px; font-weight: 700; color: #1e293b; line-height: 1.4; word-break: break-word; } .ipc-card__path--crumbs { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; font-weight: 400; } .ipc-path__crumb { font-weight: 600; color: #475569; } .ipc-path__crumb--last { font-weight: 700; color: #0f172a; } .ipc-path__sep { color: #64748b; font-weight: 400; font-size: 13px; line-height: 1; user-select: none; flex-shrink: 0; margin: 0 1px; transform: translateY(-0.05em); } .ipc-card__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #e2e8f0; margin-bottom: 10px; } /* 全零条颜色由 cockpit.js 内联为 CK_ALARM_HEX.no_data */ .ipc-card__bar--empty { /* fallback if inline missing */ background: #90a4ae; } .ipc-card__bar-seg { display: block; height: 100%; min-width: 2px; } .ipc-card__pills { display: flex; flex-wrap: wrap; gap: 6px; } .status-pill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; } .status-pill--l3 { color: #b71c1c; background: rgba(229, 57, 53, 0.12); } .status-pill--l2 { color: #e65100; background: rgba(251, 140, 0, 0.15); } .status-pill--l1 { color: #f57f17; background: rgba(251, 192, 45, 0.2); } .status-pill--l0 { color: #2e7d32; background: rgba(67, 160, 71, 0.14); } .status-pill--nd { color: #546e7a; background: rgba(144, 164, 174, 0.2); } .ipc-card__err { margin: 0; font-size: 13px; color: #c62828; line-height: 1.4; } #cockpit-message.message--cockpit:empty { display: none; margin: 0; min-height: 0; } #cockpit-message.message--cockpit:not(:empty) { margin: 10px 0 0; min-height: auto; } .desc { margin: 8px 0 20px; color: #667089; font-size: 14px; } .form { display: flex; flex-direction: column; gap: 12px; } .field { display: flex; flex-direction: column; gap: 6px; } .field span { font-size: 13px; color: #3f4b67; } input { width: 100%; border: 1px solid #c9d2e5; border-radius: 10px; padding: 12px; font-size: 15px; outline: none; } input:focus { border-color: #3578ff; box-shadow: 0 0 0 3px rgba(53, 120, 255, 0.15); } button { margin-top: 6px; border: none; border-radius: 10px; padding: 12px 16px; font-size: 16px; font-weight: 600; color: #fff; background: #3578ff; cursor: pointer; } button:disabled { opacity: 0.65; cursor: not-allowed; } .message { min-height: 22px; margin: 14px 0 0; font-size: 14px; } .message.success { color: #0d8d43; } .message.error { color: #d13131; } .status-ok { color: #0d8d43; } .status-err { color: #d13131; }