/* ========================================================================== DeploymentSpec —— 部署规范区块 来源：config/deployment-spec.js ｜ 渲染：scripts/deployment-spec.js 独立文件的原因：styles/experience.css 体积大且易与其它会话的改动冲突， 本区块的样式自包含在这里，只消费 styles/tokens.css 的语义变量。 加载顺序必须排在 site.css / experience.css 之后（见各页 ）。 ========================================================================== */ /* ========================================================================== 拓扑编辑弹窗（TopologyDialog） 渲染：scripts/topology.js ｜ 逻辑说明见该文件头部 为什么是弹窗而不是内联展开：内联展开会撑高所属层级、拉伸同层卡片、 扯动层间连线（实测画布 +179px）。弹窗让画布几何在任何编辑操作下保持不变。 ========================================================================== */ .topology-dialog { width: min(560px, calc(100vw - 40px)); max-height: min(84vh, 720px); padding: 0; border: 1px solid var(--color-border-muted); border-radius: var(--radius-media); background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 24px 64px var(--palette-shadow-dark); overflow: hidden; } .topology-dialog::backdrop { background: var(--color-dialog-backdrop); backdrop-filter: blur(2px); } .topology-dialog__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 22px; border-bottom: 1px solid var(--color-border-light); } .topology-dialog__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.02em; overflow-wrap: anywhere; } .topology-dialog__close { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--radius-control); background: none; color: var(--color-secondary); cursor: pointer; transition: background 160ms ease, color 160ms ease; } .topology-dialog__close:hover { background: var(--color-section); color: var(--color-text); } .topology-dialog__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .topology-dialog__body { max-height: calc(min(84vh, 720px) - 75px); overflow-y: auto; padding: 18px 22px 22px; } /* 弹窗里的编辑块不再需要内联时的卡片外观与上边距 */ .topology-dialog__body .topology-editor { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: none; } /* 弹窗内行标签按内容定宽，保证「中控运行宿主（可多选）」这类长标签不折行 */ .topology-dialog__body .topology-editor__row { grid-template-columns: max-content minmax(0, 1fr); } .topology-dialog__body .topology-editor__label { font-size: 13px; line-height: 1.5; white-space: nowrap; } .topology-dialog__body .topology-editor__input { height: 44px; } .topology-dialog__body .topology-check { min-height: 44px; } .topology-dialog__body .topology-host-list { gap: 4px; } .topology-dialog__body .topology-btn { min-height: 44px; } @media (max-width: 767px) { .topology-dialog { width: calc(100vw - 24px); max-height: 88vh; border-radius: var(--radius-card); } .topology-dialog__body { max-height: calc(88vh - 75px); padding: 16px; } .topology-dialog__body .topology-editor__row { grid-template-columns: 1fr; gap: 6px; } } /* ---------- 六项部署参数：三行两列（2026-09-30） ---------- */ .dspec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 8px; border-top: 1px solid var(--color-border-light); } .dspec-param { display: grid; align-content: start; gap: 10px; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--color-border-light); } /* 偶数列加左分隔线，形成两栏编辑式分栏 */ .dspec-param:not(:nth-child(2n + 1)) { padding-left: 0; border-left: 0; } .dspec-param:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--color-border-light); } .dspec-param__head { display: grid; gap: 4px; } .dspec-param__label { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .dspec-param__basis { color: var(--color-accent-text); font-size: 12px; font-weight: 600; line-height: 1.45; } .dspec-param__body { margin: 0; } /* ---------- 小标题 ---------- */ .dspec-subhead { margin: 0 0 14px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; } /* ---------- 交付内容 ---------- */ .dspec-deliverables { margin-top: 40px; } .dspec-deliverables__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dspec-deliverable { display: grid; align-content: start; gap: 8px; padding: 20px 22px; border: 1px solid var(--color-border-light); border-left: 3px solid var(--color-brand-accent); border-radius: var(--radius-card); background: var(--color-surface-soft); } .dspec-deliverable__title { margin: 0; } .dspec-deliverable__body { margin: 0; } /* ---------- 现场实施计划 ---------- */ /* 2026-09-29：三个阶段改用共用的编号行列表（`scripts/row-list.js`）， 原先的 `.dspec-phases` / `.dspec-phase*` 规则随之删除 —— 同一个"编号 + 标题 + 说明 + 右端副文本"，全站只留一种形状（首页三步、此处、关于页事实表共用）。 */ .dspec-plan { margin-top: 40px; } /* ---------- 接口与对接对象（chip 云） ---------- */ /* 紧跟六项参数：它就是「系统接口」那一项的展开。 chip **非交互**：没有 hover、没有 cursor:pointer —— 本页没有按接口筛选的能力， 做成本可点就是在承诺一个不存在的东西（同行业卡能力标签的理由）。 */ .dspec-integrations { margin-top: 32px; } .chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; } .chip-group__label { min-width: 76px; color: var(--color-secondary); font-size: 13px; font-weight: 600; } .chip-group__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .chip { padding: 6px 13px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text); font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } .dspec-integrations__note { margin: 14px 0 0; } /* ---------- 需要现场提供的信息 ---------- */ .dspec-inputs { margin-top: 32px; } .dspec-inputs__title { margin: 0 0 12px; } .dspec-inputs__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .dspec-inputs__item { padding: 6px 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-secondary); font-size: 13px; } /* ---------- 边界说明 ---------- */ .dspec-boundary { display: flex; align-items: flex-start; gap: 8px; margin: 32px 0 0; padding: 14px 16px; border: 1px dashed var(--color-border); border-radius: var(--radius-card); color: var(--color-secondary); font-size: 13px; line-height: 1.7; } .dspec-boundary svg { flex: 0 0 auto; margin-top: 3px; } .dspec-note { margin: 18px 0 0; color: var(--color-secondary); font-size: 13px; line-height: 1.7; } /* ---------- 首页 compact 变体 ---------- */ .dspec--compact .dspec-grid { margin-top: 0; } /* 交付页页首与产品/场景页同节奏：标题不要贴死顶栏。 */ .section.dspec:not(.dspec--compact) { padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); } @media (max-width: 767px) { .section.dspec:not(.dspec--compact) { padding-block: 24px 22px; } /* 标题字号与首页对齐（见 experience.css「全站标题与首页对齐」） */ } /* 周期说明挂在周期条下（2026-09-29）。 */ .delivery-period-note { margin-top: 8px; margin-bottom: 16px; } .delivery-period-note .dspec-note { margin: 0; color: var(--color-secondary); font-size: 13px; line-height: 1.65; } .dspec--compact .dspec-param { padding-block: 18px; } .dspec--compact .dspec-boundary { margin-top: 24px; } /* ---------- 响应式 ---------- */ @media (max-width: 959px) { .dspec-param { padding: 18px 20px 18px 0; } .dspec-param:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--color-border-light); } .dspec-deliverables__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } } @media (max-width: 767px) { /* 手机也保持两列三行（2026-09-30），与桌面一致，避免单列拉长 */ .dspec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dspec-param { padding: 14px 12px 14px 0; gap: 6px; } .dspec-param:nth-child(2n) { padding-left: 12px; border-left: 1px solid var(--color-border-light); } .dspec-param:nth-child(2n + 1) { padding-left: 0; border-left: 0; } .dspec-param__label { font-size: 13px; } .dspec-param__basis { font-size: 11px; } .dspec-deliverables__grid { gap: 8px; } .dspec-deliverable { padding: 12px; } /* 手机：chip 组的标签独占一行，chips 左对齐换行（原本标签与 chips 同行会挤） */ .chip-group { gap: 8px; } .chip-group__label { min-width: 0; } }