@charset "utf-8"; /* ========================================================================== zhongtai/shouye.html (CloudCC 业务中台总览) 移动端适配 —— AI 科技风 2026-09-16 -------------------------------------------------------------------------- 基础: ../css/style.css (全站共享) 依赖: ../css/mobile-hf.css (AI Design Tokens + header/footer 适配) ../js/mobile-nav.js (汉堡抽屉) -------------------------------------------------------------------------- 原桌面形态 → 移动端重排 -------------------------------------------------------------------------- 1) 本页**原本没有 viewport**, 浏览器按 1200px 视口渲染 → 手机上是「整页缩放 的桌面版」。本次接入 viewport。 2) 整页是「一张大图 + 4 个绝对定位信息块」拼出来的图谱: .zt-hero 背景 images/beijing.jpg (2698×1170 极浅蓝白渐变底纹) .zt-stage 固定 1200×580, position:relative .zt-diagram images/zhongtai.png (2226×1587 架构图), 固定 740px 宽 .zt-panel × 4 position:absolute; width:296px; right:234px; top: 24px / 153px / 354px / 457px 每个 panel 内 1~4 行 .zt-links (display:flex) + 若干 .zt-link 链接文字用 且

带 margin-left:12/57/50px 定值 → 移动端把绝对定位**整体拆掉** (position:static + width/height:auto), 4 个 panel 变成纵向卡片流; 每行的链接改成可换行的胶囊网格, 去下划线、

的 margin 定值清零。 面板标题原本是 16px 黑字 → 品牌深蓝 + 左侧渐变竖柱。 3) 架构图 2226px 宽缩到 375px 时字很小, 但它是「4 个 panel 的视觉索引」, 完整显示比裁切更有信息量 → width:100% 完整呈现, 白底圆角 + 柔光投影。 可读信息由下方 4 张卡片的胶囊承担。 4) 为便于本文件用稳定的类选择器 (而不是脆弱的 div[style*="right: 234px"]), HTML 里为这 6 类元素补了 class: zt-hero / zt-stage / zt-diagram / zt-panel / zt-links / zt-link —— 仅加 class, 未改任何内联样式与文案。 5) 背景 beijing.jpg 是柔和渐变底纹, 整片 hero 用 cover 铺底: 卡片浮在其上, 缩放裁切后呈现的仍是浅蓝→白的柔和过渡, 不产生硬边。 6) 页脚 (footer_sub.js) 由 mobile-hf.css 覆盖。 作用域: 全部规则在 @media (max-width: 768px) 内 —— 桌面端零影响。 ========================================================================== */ @media (max-width: 768px) { /* ---------- 0. 页面底色 ---------- */ body { background: var(--ai-bg-page, #f7f8fc) !important; overflow-x: hidden !important; } .wrap { width: auto !important; max-width: 100% !important; } /* ---------- 1. hero: 渐变底纹铺满整个业务图谱区 ---------- */ .zt-hero { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 0 20px !important; /* beijing.jpg 是极浅的蓝白底纹, 单独铺底在手机上几乎看不出层次 → 叠一层 AI 渐变 (左上淡蓝 → 右下淡青), 让白卡真正浮起来 */ background-image: linear-gradient(155deg, rgba(5, 100, 245, 0.11) 0%, rgba(5, 100, 245, 0.02) 42%, rgba(0, 194, 209, 0.11) 100%), url("../images/beijing.jpg") !important; background-repeat: no-repeat, no-repeat !important; background-position: center top, center top !important; background-size: cover, cover !important; box-sizing: border-box !important; } /* 原 1200×580 定值容器 → 自适应单列 */ .zt-stage { position: static !important; display: flex !important; flex-direction: column !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 18px 14px 0 !important; text-align: left !important; box-sizing: border-box !important; } /* ---------- 2. 架构图 ---------- */ .zt-diagram { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 12px !important; background: #ffffff !important; border: 1px solid rgba(5, 100, 245, 0.10) !important; border-radius: var(--ai-radius-card, 16px) !important; box-shadow: var(--ai-shadow-card, 0 6px 24px rgba(5, 100, 245, 0.10)) !important; box-sizing: border-box !important; } /* ---------- 3. 四个信息块 → 纵向卡片 ---------- */ .zt-panel { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 16px !important; background: var(--ai-bg-card, #ffffff) !important; border: 1px solid rgba(5, 100, 245, 0.10) !important; border-radius: var(--ai-radius-card, 16px) !important; box-shadow: var(--ai-shadow-card, 0 6px 24px rgba(5, 100, 245, 0.10)) !important; box-sizing: border-box !important; } /* 面板标题 (原 .p: 16px 黑字 + 内联 margin-left/top:10px) */ .zt-panel > p.p, .zt-panel > p { position: relative !important; margin: 0 0 14px !important; padding: 0 0 0 14px !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--ai-deep, #19355e) !important; } .zt-panel > p.p::before, .zt-panel > p::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 4px !important; height: 18px !important; border-radius: 2px !important; background: var(--ai-grad-soft, linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%)) !important; } /* ---------- 4. 链接行 → 可换行胶囊网格 ---------- */ .zt-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; width: 100% !important; max-width: 100% !important; gap: 8px !important; margin: 0 0 8px !important; box-sizing: border-box !important; } .zt-links:last-child { margin-bottom: 0 !important; } /* 清掉链接内

的 margin-top/margin-left 定值 (7~34px 不等) */ .zt-links p { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .zt-link { display: inline-flex !important; align-items: center !important; padding: 9px 15px !important; background: var(--ai-grad-glass, linear-gradient(155deg, rgba(5, 100, 245, 0.07) 0%, rgba(0, 194, 209, 0.05) 100%)) !important; border: 1px solid rgba(5, 100, 245, 0.14) !important; border-radius: var(--ai-radius-pill, 999px) !important; box-shadow: 0 2px 8px rgba(5, 100, 245, 0.06) !important; text-decoration: none !important; box-sizing: border-box !important; } /* 链接文字 (原 ) */ .zt-link u { color: var(--ai-blue, #0564F5) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.4 !important; text-decoration: none !important; white-space: nowrap !important; } /* 链接图标 (APP/钉钉/华为/企业微信, 原 width:30px / 32px) */ .zt-link img { display: inline-block !important; width: 18px !important; height: auto !important; margin: 0 7px 0 0 !important; vertical-align: middle !important; } } /* end @media (max-width: 768px) */