/* ============================================================
mockup-ui.css — 系统展示 · 后台演示 mockup 独立样式
作用域：.home-tech .cases .cap-ui（首页"系统展示"区块）
设计原则：三栏采用弹性列宽，任何桌面内容区均不横向溢出
采用局部响应（字号 + 间距）替代 zoom；保持结构稳定，不整体拉伸
后期切换图片：删除本文件引用 + 将 HTML 中 .cap-ui 结构
替换为 ![]()
即可
============================================================ */
/* ===== 容器 ===== */
.home-tech .cases .feat-shot {
align-items: center;
width: 100%;
height: auto !important;
max-height: none;
overflow: hidden;
order: 2 !important;
display: flex !important;
min-height: 0px !important;
padding: 0 !important;
box-sizing: border-box;
background: transparent !important;
border: 0 !important;
}
/* 清除旧版 feat-append 在开发版页面里给 .cases 通用写死高度的影响。 */
.home-tech .cases .feat-row .feat-shot,
.home-tech .cases .feat-row .feat-browser,
.home-tech .cases .feat-row .feat-bbody,
.home-tech .cases .feat-row .feat-text {
height: auto !important;
min-height: 0px !important;
}
.home-tech .cases .feat-row .feat-shot,
.home-tech .cases .feat-row .feat-browser,
.home-tech .cases .feat-row .feat-bbody {
width: 100% !important;
max-height: none !important;
overflow: hidden;
}
/* 仅对系统展示三块做二次隔离，避免受其他模块规则干扰。*/
.home-tech #capability-content .cap-ui,
.home-tech #capability-visibility .cap-ui,
.home-tech #capability-diagnosis .cap-ui {
isolation: isolate;
min-height: 0 !important;
width: 100% !important;
min-width: 0 !important;
}
.home-tech #capability-content .feat-shot,
.home-tech #capability-visibility .feat-shot,
.home-tech #capability-diagnosis .feat-shot {
min-width: 0 !important;
width: 100% !important;
align-items: stretch !important;
justify-content: stretch !important;
gap: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
}
.home-tech #capability-content .cap-ui-body,
.home-tech #capability-visibility .cap-ui-body,
.home-tech #capability-diagnosis .cap-ui-body {
grid-template-columns: clamp(110px, 16%, 150px) minmax(0px, 1fr) clamp(200px, 24%, 252px) !important;
align-items: stretch !important;
min-height: 0 !important;
}
/* 这两个区块优先避开旧版 feat-append 里的固定高度策略，避免“看起来没变化/发生重叠”。 */
.home-tech #capability-content,
.home-tech #capability-visibility,
.home-tech #capability-diagnosis {
align-items: stretch !important;
align-self: stretch !important;
}
.home-tech #capability-content .feat-row,
.home-tech #capability-content .cap-ui,
.home-tech #capability-visibility .feat-row,
.home-tech #capability-visibility .cap-ui,
.home-tech #capability-diagnosis .feat-row,
.home-tech #capability-diagnosis .cap-ui {
height: auto !important;
align-items: stretch !important;
}
.home-tech #capability-content .feat-row,
.home-tech #capability-visibility .feat-row,
.home-tech #capability-diagnosis .feat-row {
grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr) !important;
align-items: stretch !important;
row-gap: 0 !important;
}
.home-tech #capability-content .feat-row .feat-shot,
.home-tech #capability-visibility .feat-row .feat-shot,
.home-tech #capability-diagnosis .feat-row .feat-shot {
align-self: stretch !important;
}
/* ===== 窗口外壳 ===== */
.home-tech .cases .cap-ui {
position: relative;
width: 100%;
min-width: 0;
max-width: 100%;
height: auto;
padding-top: 42px;
overflow: hidden;
color: rgb(23, 32, 51);
background: rgb(255, 255, 255);
border: 1px solid rgb(220, 226, 235);
border-radius: 14px;
box-shadow: rgba(28, 42, 61, 0.08) 0px 18px 46px;
font-family: var(--tech-font-sans);
font-size: 12px;
line-height: 1.55;
}
/* 所有文字不换行 — 后台演示数据应保持单行 */
.home-tech .cases .cap-ui-head b,
.home-tech .cases .cap-ui-head span,
.home-tech .cases .cap-ui-head em,
.home-tech .cases .cap-ui-nav span,
.home-tech .cases .cap-ui-nav strong,
.home-tech .cases .cap-ui-metrics b,
.home-tech .cases .cap-ui-metrics span,
.home-tech .cases .cap-ui-panel > header b,
.home-tech .cases .cap-ui-panel > header span,
.home-tech .cases .cap-ui-steps b,
.home-tech .cases .cap-ui-steps span,
.home-tech .cases .cap-ui-bars span,
.home-tech .cases .cap-ui-bars b,
.home-tech .cases .cap-ui-table span,
.home-tech .cases .cap-ui-table b,
.home-tech .cases .cap-ui-table em,
.home-tech .cases .cap-ui-side strong,
.home-tech .cases .cap-ui-side b,
.home-tech .cases .cap-ui-side span,
.home-tech .cases .cap-ui-side a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* macOS 风格窗口栏 */
.home-tech .cases .cap-ui::before {
content: attr(data-window-label);
position: absolute;
inset: 0px 0px auto;
height: 42px;
padding-left: 78px;
display: flex;
align-items: center;
color: rgb(121, 136, 158);
font-size: 11px;
letter-spacing: 0.025em;
border-bottom: 1px solid rgb(226, 231, 239);
background: rgb(248, 250, 252);
}
.home-tech .cases .cap-ui::after {
content: "";
position: absolute;
top: 16px;
left: 22px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(238, 103, 94);
box-shadow: rgb(239, 182, 74) 18px 0px, rgb(89, 189, 104) 36px 0px;
}
/* ===== 顶部标题栏 ===== */
.home-tech .cases .cap-ui-head {
min-height: 62px;
padding: 0px 24px;
display: grid;
grid-template-columns: clamp(110px, 16%, 150px) minmax(0, 1fr) auto;
align-items: center;
gap: clamp(10px, 1.8vw, 20px);
border-bottom: 1px solid rgb(225, 230, 238);
background: rgb(252, 253, 254);
}
.home-tech .cases .cap-ui-head span { color: rgb(158, 111, 7); font-size: 11px; font-weight: 750; letter-spacing: 0.04em; }
.home-tech .cases .cap-ui-head b { min-width: 0; overflow: hidden; color: rgb(24, 35, 57); font-size: 14px; font-weight: 680; letter-spacing: -0.01em; text-overflow: ellipsis; }
.home-tech .cases .cap-ui-head em { color: rgb(112, 125, 147); font-size: 11px; font-style: normal; }
/* ===== 三栏主体（随容器收缩，避免右栏挤出页面） ===== */
.home-tech .cases .cap-ui-body {
min-height: 438px;
display: grid;
grid-template-columns: clamp(110px, 16%, 150px) minmax(0px, 1fr) clamp(160px, 23%, 220px);
}
/* ===== 左侧导航 ===== */
.home-tech .cases .cap-ui-nav {
padding: 26px 14px;
display: flex;
flex-direction: column;
gap: 7px;
border-right: 1px solid rgb(229, 233, 240);
background: rgb(253, 254, 255);
}
.home-tech .cases .cap-ui-nav strong { padding: 0px 12px 14px; color: rgb(32, 43, 64); font-size: 12px; font-weight: 700; }
.home-tech .cases .cap-ui-nav span { padding: 10px 12px; color: rgb(105, 119, 141); border-left: 2px solid transparent; transition: color 0.2s ease, background-color 0.2s ease; }
.home-tech .cases .cap-ui-nav .is-current { color: rgb(137, 96, 4); font-weight: 700; border-left-color: rgb(214, 163, 35); background: rgb(252, 248, 238); }
/* ===== 中间主内容 ===== */
.home-tech .cases .cap-ui-main { min-width: 0px; padding: 24px clamp(14px, 2.2vw, 26px) 26px; }
/* 指标卡 */
.home-tech .cases .cap-ui-metrics { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); overflow: hidden; border: 1px solid rgb(225, 230, 238); border-radius: 7px; background: rgb(251, 252, 254); }
.home-tech .cases .cap-ui-metrics div { min-width: 0; padding: 16px clamp(10px, 1.5vw, 18px) 15px; }
.home-tech .cases .cap-ui-metrics div + div { border-left: 1px solid rgb(229, 233, 240); }
.home-tech .cases .cap-ui-metrics b { display: block; color: rgb(24, 37, 63); font-size: 22px; font-weight: 680; line-height: 1.15; letter-spacing: -0.025em; }
.home-tech .cases .cap-ui-metrics span { display: block; margin-top: 6px; color: rgb(119, 132, 153); font-size: 10.5px; }
/* 面板容器 */
.home-tech .cases .cap-ui-panel { margin-top: 18px; overflow: hidden; border: 1px solid rgb(225, 230, 238); border-radius: 7px; background: rgb(255, 255, 255); }
.home-tech .cases .cap-ui-panel > header { min-height: 50px; padding: 0px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgb(229, 233, 240); background: rgb(252, 253, 254); }
.home-tech .cases .cap-ui-panel > header b { font-size: 14px; }
.home-tech .cases .cap-ui-panel > header span { color: rgb(111, 122, 144); }
/* 步骤列表 */
.home-tech .cases .cap-ui-steps { margin: 0px; padding: 2px 18px; list-style: none; }
.home-tech .cases .cap-ui-steps li { padding: 13px 0px; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
.home-tech .cases .cap-ui-steps li + li { border-top: 1px solid rgb(230, 234, 240); }
.home-tech .cases .cap-ui-steps i { color: rgb(183, 126, 0); font-style: normal; font-weight: 800; }
.home-tech .cases .cap-ui-steps b, .home-tech .cases .cap-ui-steps span { display: block; }
.home-tech .cases .cap-ui-steps span { margin-top: 2px; color: rgb(109, 120, 142); }
/* 柱状图 */
.home-tech .cases .cap-ui-bars { padding: 14px 16px 18px; }
.home-tech .cases .cap-ui-bars div { display: grid; grid-template-columns: minmax(88px, 150px) minmax(0, 1fr) 30px; align-items: center; gap: clamp(7px, 1.2vw, 12px); padding: 10px 0px; }
.home-tech .cases .cap-ui-bars i { height: 7px; position: relative; overflow: hidden; background: rgb(237, 240, 245); }
.home-tech .cases .cap-ui-bars i::after { content: ""; position: absolute; inset: 0px auto 0px 0px; width: var(--bar); background: linear-gradient(90deg, rgb(213, 154, 0), rgb(241, 196, 73)); }
.home-tech .cases .cap-ui-bars .cap-bar--76 { --bar: 76%; }
.home-tech .cases .cap-ui-bars .cap-bar--64 { --bar: 64%; }
.home-tech .cases .cap-ui-bars .cap-bar--58 { --bar: 58%; }
.home-tech .cases .cap-ui-bars .cap-bar--47 { --bar: 47%; }
.home-tech .cases .cap-ui-bars b { color: rgb(155, 107, 0); }
/* 表格 */
.home-tech .cases .cap-ui-table > div { min-height: 43px; padding: 0px 16px; display: grid; grid-template-columns: 1fr 64px 64px; align-items: center; gap: 12px; }
.home-tech .cases .cap-ui-table > div + div { border-top: 1px solid rgb(230, 234, 240); }
.home-tech .cases .cap-ui-table .is-head { color: rgb(112, 123, 144); background: rgb(248, 250, 252); }
.home-tech .cases .cap-ui-table b { color: rgb(183, 126, 0); }
.home-tech .cases .cap-ui-table em { color: rgb(89, 101, 122); font-style: normal; }
/* ===== 右侧边栏 ===== */
.home-tech .cases .cap-ui-side { min-width: 0; padding: 26px clamp(14px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 12px; border-left: 1px solid rgb(229, 233, 240); background: rgb(249, 251, 253); }
.home-tech .cases .cap-ui-side > strong { color: rgb(31, 43, 64); font-size: 13px; font-weight: 700; }
.home-tech .cases .cap-ui-side > div { padding: 15px 16px; border: 1px solid rgb(226, 231, 239); border-radius: 6px; background: rgba(255, 255, 255, 0.9); }
.home-tech .cases .cap-ui-side b, .home-tech .cases .cap-ui-side span { display: block; }
.home-tech .cases .cap-ui-side span { margin-top: 6px; color: rgb(104, 116, 138); }
.home-tech .cases .cap-ui-side > div > span:last-child:not(:first-child) { line-height: 1.65; }
.home-tech .cases .cap-ui-side a { margin-top: auto; padding: 13px 14px; color: rgb(30, 35, 45); font-size: 11px; font-weight: 750; text-align: center; letter-spacing: 0.02em; border: 1px solid rgb(219, 169, 38); border-radius: 5px; background: rgb(235, 187, 55); transition: background-color 0.2s ease, border-color 0.2s ease; }
/* 右栏内容较长时允许自然换行；此前的强制单行会把整张示意图撑出容器。 */
.home-tech .cases .cap-ui-side span,
.home-tech .cases .cap-ui-side a { white-space: nowrap; overflow-wrap: normal; }
/* ===== GEO 工作台视觉层 =====
三张示意图共用后台骨架；通过更高对比度与数据分层呈现“可操作的系统”，而非装饰性图片。 */
.home-tech .cases .cap-ui { color: #c8d4e6; background: #071426; border-color: rgba(115, 147, 187, 0.35); border-radius: 12px; box-shadow: 0 26px 58px rgba(3, 10, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.home-tech .cases .cap-ui::before { color: #91a4be; background: #0a182b; border-bottom-color: rgba(126, 151, 185, 0.24); }
.home-tech .cases .cap-ui::after { opacity: 0.92; }
.home-tech .cases .cap-ui-head { background: linear-gradient(90deg, #0b1a30, #0a1729); border-bottom-color: rgba(126, 151, 185, 0.24); }
.home-tech .cases .cap-ui-head span { color: #efbc35; }
.home-tech .cases .cap-ui-head b { color: #f3f7ff; }
.home-tech .cases .cap-ui-head em { color: #91a4be; }
.home-tech .cases .cap-ui-body { background: #09182b; }
.home-tech .cases .cap-ui-nav { border-right-color: rgba(126, 151, 185, 0.22); background: #091629; }
.home-tech .cases .cap-ui-nav strong { color: #edf4ff; }
.home-tech .cases .cap-ui-nav span { color: #91a4be; }
.home-tech .cases .cap-ui-nav .is-current { color: #f4c94f; border-left-color: #e3b52e; background: linear-gradient(90deg, rgba(227, 181, 46, 0.18), transparent); }
.home-tech .cases .cap-ui-main { background: radial-gradient(circle at 48% 0, rgba(47, 105, 166, 0.13), transparent 42%), #0b1a2e; }
.home-tech .cases .cap-ui-metrics { border-color: rgba(126, 151, 185, 0.28); background: rgba(12, 31, 53, 0.92); }
.home-tech .cases .cap-ui-metrics div + div { border-left-color: rgba(126, 151, 185, 0.2); }
.home-tech .cases .cap-ui-metrics b { color: #f3f7ff; }
.home-tech .cases .cap-ui-metrics span { color: #93a7c4; }
.home-tech .cases .cap-ui-panel { border-color: rgba(126, 151, 185, 0.28); background: rgba(8, 23, 42, 0.74); }
.home-tech .cases .cap-ui-panel > header { background: rgba(15, 36, 62, 0.84); border-bottom-color: rgba(126, 151, 185, 0.22); }
.home-tech .cases .cap-ui-panel > header b { color: #f1f6ff; }
.home-tech .cases .cap-ui-panel > header span { color: #a5b5cd; }
.home-tech .cases .cap-ui-steps li + li, .home-tech .cases .cap-ui-table > div + div { border-top-color: rgba(126, 151, 185, 0.2); }
.home-tech .cases .cap-ui-steps i, .home-tech .cases .cap-ui-bars b, .home-tech .cases .cap-ui-table b { color: #f2c44a; }
.home-tech .cases .cap-ui-steps b, .home-tech .cases .cap-ui-table > div { color: #e9f0fb; }
.home-tech .cases .cap-ui-steps span, .home-tech .cases .cap-ui-table em { color: #9cb0cb; }
.home-tech .cases .cap-ui-bars span { color: #c7d4e6; }
.home-tech .cases .cap-ui-bars i { background: #1c2c42; }
.home-tech .cases .cap-ui-bars i::after { background: linear-gradient(90deg, #d89e08, #f4cc58); box-shadow: 0 0 12px rgba(227, 181, 46, 0.24); }
.home-tech .cases .cap-ui-table .is-head { color: #91a4be; background: rgba(17, 38, 65, 0.78); }
.home-tech .cases .cap-ui-side { border-left-color: rgba(126, 151, 185, 0.22); background: #091629; }
.home-tech .cases .cap-ui-side > strong { color: #edf4ff; }
.home-tech .cases .cap-ui-side > div { border-color: rgba(126, 151, 185, 0.25); background: rgba(16, 37, 63, 0.72); }
.home-tech .cases .cap-ui-side b { color: #eaf1fc; }
.home-tech .cases .cap-ui-side span { color: #9db0ca; }
.home-tech .cases .cap-ui-side a { color: #161303; border-color: #e3b52e; background: linear-gradient(135deg, #f0c543, #d99f12); }
/* 每个模块的强调色略有区分，用户扫读时更容易识别三种能力。 */
.home-tech #capability-visibility .cap-ui { --mock-accent: #5cc8ff; }
.home-tech #capability-diagnosis .cap-ui { --mock-accent: #61d3b1; }
.home-tech #capability-visibility .cap-ui-head span, .home-tech #capability-visibility .cap-ui-nav .is-current, .home-tech #capability-visibility .cap-ui-steps i, .home-tech #capability-visibility .cap-ui-bars b { color: var(--mock-accent); }
.home-tech #capability-visibility .cap-ui-nav .is-current { border-left-color: var(--mock-accent); background: linear-gradient(90deg, rgba(92, 200, 255, 0.16), transparent); }
.home-tech #capability-visibility .cap-ui-bars i::after { background: linear-gradient(90deg, #44bff7, #7c8dff); box-shadow: 0 0 12px rgba(92, 200, 255, 0.24); }
.home-tech #capability-diagnosis .cap-ui-head span, .home-tech #capability-diagnosis .cap-ui-nav .is-current, .home-tech #capability-diagnosis .cap-ui-steps i, .home-tech #capability-diagnosis .cap-ui-table b { color: var(--mock-accent); }
.home-tech #capability-diagnosis .cap-ui-nav .is-current { border-left-color: var(--mock-accent); background: linear-gradient(90deg, rgba(97, 211, 177, 0.16), transparent); }
/* ===== 平板端：保留完整三栏，通过字号和间距温和收缩 ===== */
@media (max-width: 920px) {
.home-tech .cases .cap-ui { font-size: 11px; }
.home-tech .cases .cap-ui-head { min-height: 60px; padding: 0 20px; }
.home-tech .cases .cap-ui-body { grid-template-columns: 120px minmax(0px, 1fr) 210px; }
}
/* ===== 手机端精简视图 =====
后台演示不做整体缩放，改为按阅读顺序纵向重排，保证文字与数据可读。 */
@media (max-width: 720px) {
.home-tech .cases .cap-ui {
font-size: 12px;
}
.home-tech .cases .cap-ui-head {
min-height: 58px;
padding: 0 16px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
}
.home-tech .cases .cap-ui-head span {
display: none;
}
.home-tech .cases .cap-ui-head b {
font-size: 14px;
}
.home-tech .cases .cap-ui-head em {
font-size: 11px;
}
.home-tech .cases .cap-ui-body,
.home-tech #capability-visibility .cap-ui-body,
.home-tech #capability-diagnosis .cap-ui-body {
min-height: 0 !important;
display: flex;
flex-direction: column;
}
.home-tech .cases .cap-ui-nav {
order: 1;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-right: 0;
border-bottom: 1px solid rgba(126, 151, 185, 0.22);
}
.home-tech .cases .cap-ui-nav strong,
.home-tech .cases .cap-ui-nav span:nth-of-type(n + 4) {
display: none;
}
.home-tech .cases .cap-ui-nav span {
min-width: 0;
padding: 13px 8px;
text-align: center;
border-left: 0;
border-bottom: 2px solid transparent;
}
.home-tech .cases .cap-ui-nav .is-current,
.home-tech #capability-visibility .cap-ui-nav .is-current,
.home-tech #capability-diagnosis .cap-ui-nav .is-current {
border-left: 0;
border-bottom-color: currentColor;
background: rgba(255, 255, 255, 0.035);
}
.home-tech .cases .cap-ui-main {
order: 2;
padding: 18px 16px 20px;
}
.home-tech .cases .cap-ui-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-tech .cases .cap-ui-metrics div,
.home-tech .cases .cap-ui-metrics div + div {
padding: 14px 16px;
border-left: 0;
}
.home-tech .cases .cap-ui-metrics div:nth-child(even) {
border-left: 1px solid rgba(126, 151, 185, 0.2);
}
.home-tech .cases .cap-ui-metrics div:nth-child(n + 3) {
border-top: 1px solid rgba(126, 151, 185, 0.2);
}
.home-tech .cases .cap-ui-metrics b {
font-size: 20px;
}
.home-tech .cases .cap-ui-metrics span {
font-size: 11px;
}
.home-tech .cases .cap-ui-panel {
margin-top: 14px;
}
.home-tech .cases .cap-ui-panel > header {
min-height: 46px;
padding: 0 14px;
gap: 10px;
}
.home-tech .cases .cap-ui-panel > header b {
font-size: 13px;
}
.home-tech .cases .cap-ui-steps {
padding: 2px 14px;
}
.home-tech .cases .cap-ui-steps li {
padding: 11px 0;
grid-template-columns: 30px minmax(0, 1fr);
gap: 9px;
}
.home-tech .cases .cap-ui-steps li:nth-child(n + 4),
.home-tech .cases .cap-ui-bars > div:nth-child(n + 4),
.home-tech .cases .cap-ui-table > div:nth-child(n + 5) {
display: none;
}
.home-tech .cases .cap-ui-bars {
padding: 10px 14px 14px;
}
.home-tech .cases .cap-ui-bars div {
grid-template-columns: minmax(110px, 0.9fr) minmax(70px, 1fr) 28px;
gap: 8px;
padding: 9px 0;
}
.home-tech .cases .cap-ui-table > div {
min-height: 42px;
padding: 0 14px;
grid-template-columns: minmax(0, 1fr) 54px 42px;
gap: 8px;
}
.home-tech .cases .cap-ui-side {
order: 3;
padding: 18px 16px 20px;
gap: 10px;
border-left: 0;
border-top: 1px solid rgba(126, 151, 185, 0.22);
}
.home-tech .cases .cap-ui-side > div {
padding: 13px 14px;
}
.home-tech .cases .cap-ui-steps span,
.home-tech .cases .cap-ui-side span {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
}
/* ============================================================
后期切换为图片时使用：
1. 删除上方所有 .cap-ui 样式
2. HTML 中将 ...
替换为：
3. 使用下方样式即可
.home-tech .cases .cap-ui-img {
width: 100%;
height: auto;
border: 1px solid rgb(220, 226, 235);
border-radius: 14px;
box-shadow: rgba(28, 42, 61, 0.08) 0px 18px 46px;
}
============================================================ */