/* ============================================ 企业画册 H5 - brochure.html 专属样式 依赖 css/style.css 的 :root token 与组件类 零改动现有站点，仅画册页引用 ============================================ */ /* --- 整页 scroll-snap 整屏翻页 --- proximity（非 mandatory）：避免小屏内容超高时卡死无法滚全 */ html { scroll-snap-type: none; } /* 关闭 CSS snap，由 JS 接管整页吸附（mandatory 对鼠标滚轮不生效） */ .brochure-page { background: var(--white); overflow-x: hidden; } /* --- 隐藏浏览器滚动条（仅画册页，整屏翻页体验无需滚动条，滚动/翻页功能不受影响） --- */ html { scrollbar-width: none; -ms-overflow-style: none; } /* Firefox / 旧 IE·Edge */ html::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome / Safari / Edge */ /* --- 全屏沉浸浏览：隐藏浮动「导出 PDF」按钮（非全屏时保留以便点击导出） --- 由 brochure.js 检测全屏（Fullscreen API 或 F11 窗口占满可用区）后给 加 .br-fullscreen 触发 --- */ html.br-fullscreen .br-pdf-fab { display: none !important; } /* 客户与案例 标题：横屏单行不换行（字号微缩以适配 760px 标题区；竖屏保持默认可换行） */ @media (orientation: landscape) { .br-cases-title { white-space: nowrap; font-size: clamp(1.5rem, 3vw, 2.2rem); } } /* 应用价值 标题：横屏单行不换行（21 字，字号适配 760px 标题区；竖屏保持默认可换行） */ @media (orientation: landscape) { .br-value-title { white-space: nowrap; font-size: clamp(1.4rem, 2.8vw, 2.1rem); } } /* 画册章节眉标放大（0.75rem → 0.9rem，与大标题更匹配；仅画册页生效，不影响官网其他页） */ .brochure .section-label { font-size: 0.9rem; } .brochure { width: 100%; } /* --- 单屏 --- */ .screen { position: relative; min-height: 100svh; /* svh 规避移动端地址栏跳动 */ display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; scroll-snap-stop: always; /* 逐屏停留：翻页一页一页停，不跳屏 */ padding: var(--s12) var(--s6); overflow: hidden; box-sizing: border-box; } .screen--light { background: var(--white); color: var(--text-1); } .screen--alt { background: var(--bg-alt); color: var(--text-1); } .screen--dark { background: var(--dark-bg); color: var(--white); } .screen--dark h2, .screen--dark h3, .screen--dark .section-title { color: var(--white); } .screen--dark .agent-card h3 { color: var(--white); } .screen--dark .agent-card p { color: rgba(255, 255, 255, 0.7); } .screen--dark .section-desc, .screen--dark p { color: rgba(255, 255, 255, 0.72); } .screen--dark .section-label { color: var(--accent); } /* 屏内通用标题块 */ .br-head { text-align: center; max-width: 760px; margin: 0 auto var(--s8); } .br-head h2 { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; margin: var(--s3) 0 var(--s2); line-height: 1.2; } .br-head .section-desc { font-size: clamp(0.95rem, 2.4vw, 1.1rem); margin-left: auto; margin-right: auto; } /* section-desc 自带 max-width:560px，补 margin auto 才在 .br-head 里居中 */ /* --- 顶部进度条 --- */ .br-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(0, 0, 0, 0.06); z-index: 1100; pointer-events: none; } .br-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.1s linear; } /* --- 右侧圆点导航 --- */ .br-dots { position: fixed; right: var(--s4); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1rem; align-items: flex-end; padding-left: 90px; /* 向左扩展容器：tooltip 文字落在容器内，鼠标移到文字不离开 hover 区，可直接选择/点击 */ z-index: 1100; } .br-dot { position: relative; width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1.5px solid var(--gray-400); background: transparent; cursor: pointer; transition: all 0.2s var(--ease); } /* 章节名标签：默认隐藏；区域 hover 全部浮现。纯文字无底框，靠描边在深/浅背景均可读 */ .br-dot::after { content: attr(aria-label); position: absolute; right: calc(100% + 2px); top: 50%; transform: translateY(-50%); color: #fff; font-size: 0.8rem; font-weight: 400; line-height: 1.2; white-space: nowrap; padding: 0 4px; opacity: 0; pointer-events: none; transition: opacity 0.18s; z-index: 10; } .br-dots[data-tone="light"] .br-dot::after { color: #1f2937; } /* 浅色背景：深字（默认白字应对深底） */ @media (hover: hover) { .br-dots:hover .br-dot::after { opacity: 0.6; pointer-events: auto; } /* 区域 hover：浮现且文字可点 */ } .br-dot:hover::after { opacity: 1; } /* 当前悬停项更亮 */ .br-dot:hover { border-color: var(--primary); } .br-dot.is-active { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); } /* ============ 1. 封面（宣传册封面式） ============ */ .screen--cover { background: linear-gradient(135deg, #122240 0%, #0d47a1 50%, #1565c0 100%); color: var(--white); text-align: center; padding: var(--s10) var(--s6); overflow: hidden; } .screen--cover .hero-bg { position: absolute; inset: 0; z-index: 0; background: transparent; /* hero-bg 仅承载粒子，渐变在 .screen--cover */ } /* 超大英文水印，衬底氛围 */ .br-cover-watermark { position: absolute; left: 50%; bottom: -3vw; transform: translateX(-50%); font-size: 24vw; font-weight: 900; color: rgba(255, 255, 255, 0.035); letter-spacing: 0.04em; white-space: nowrap; font-family: 'Inter', -apple-system, sans-serif; z-index: 0; pointer-events: none; } .br-cover-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: calc(100svh - 2 * var(--s10)); justify-content: space-between; padding: var(--s6) 0; } .br-cover-logo { margin: 0; } .br-cover-logo .logo-cn { color: var(--white); } /* 深色封面：亿聚转白 */ .br-cover-main { text-align: center; } .br-cover-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); margin-bottom: var(--s6); } .br-cover-eyebrow .br-line { display: block; width: 36px; height: 1px; background: rgba(255, 255, 255, 0.3); } .br-cover-title { font-size: min(4rem, 7.2vw); /* 11 字一排：随屏宽收窄，桌面上限 4rem */ font-weight: 900; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: var(--s5); color: var(--white); white-space: nowrap; /* 强制一排 */ } .br-cover-sub { font-size: clamp(1rem, 2.8vw, 1.2rem); color: rgba(255, 255, 255, 0.78); font-weight: 400; letter-spacing: 0.04em; } .br-cover-foot { text-align: center; } .br-cover-co { font-size: clamp(1rem, 2.6vw, 1.15rem); font-weight: 600; color: rgba(255, 255, 255, 0.92); margin-bottom: var(--s2); } .br-cover-since { font-size: 0.76rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.08em; } /* 下滑翻阅提示（底部居中，内嵌于署名区） */ .br-scroll-hint { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s2); background: transparent; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; margin-top: var(--s6); padding: 0; letter-spacing: 0.05em; } .br-scroll-hint svg { animation: br-bounce 1.6s infinite; } @keyframes br-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* 每页 LOGO 页眉（封面除外，JS 注入到每屏左上角） */ .br-page-logo { position: absolute; top: var(--s4); left: var(--s6); z-index: 5; } .screen--dark .br-page-logo .logo-cn, .screen--contact .br-page-logo .logo-cn { color: var(--white); } /* 深色屏：亿聚转白 */ /* ============ 通用两栏栅格 ============ */ .br-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10); align-items: center; max-width: var(--max-w); margin: 0 auto; width: 100%; } .br-text h2 { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; margin: var(--s3) 0 var(--s4); line-height: 1.2; } .br-text p { color: var(--text-2); line-height: 1.75; } /* ============ 2. 关于我们 ============ */ .br-vision { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s6); } .br-vision-item { padding: var(--s4); border-radius: var(--r-md); background: var(--bg-alt); } .br-vision-item strong { display: block; color: var(--primary); font-size: 0.8rem; letter-spacing: 0.05em; margin-bottom: var(--s1); } .br-vision-item span { font-weight: 600; color: var(--text-1); } .br-media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: block; } .br-info-bar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } .br-info-bar span { background: var(--primary-light); color: var(--primary); padding: var(--s1) var(--s3); border-radius: var(--r-full); font-size: 0.82rem; font-weight: 500; } /* --- 数字翻牌行 --- */ .br-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); max-width: var(--max-w); margin: var(--s10) auto 0; } /* 平台屏指标：始终一行 4 列（含移动端），位于标题与三层架构之间 */ #screen-platform .br-stats { grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: var(--s4) auto var(--s8); } #screen-platform .br-stat .stat-number { font-size: clamp(1.4rem, 4.5vw, 2rem); } #screen-platform .br-stat .stat-label { font-size: 0.74rem; } /* 关于页指标：竖屏也一行 4 列 */ #screen-about .br-stats { grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin: var(--s4) auto; } #screen-about .br-stat .stat-number, #screen-about .br-static { font-size: clamp(1.4rem, 4.5vw, 2rem); } #screen-about .br-stat .stat-label { font-size: 0.72rem; } .br-stat { text-align: center; } .br-stat .stat-number { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; } .br-static { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; color: var(--primary); line-height: 1; } /* 7×24 静态展示 */ .br-stat .stat-label { color: var(--text-3); margin-top: var(--s2); font-size: 0.9rem; } .br-stats--dark .stat-number, .br-stats--dark .br-static { color: var(--white); } .br-stats--dark .stat-label { color: rgba(255, 255, 255, 0.65); } /* ============ 3. 平台总览（深色） ============ */ .br-agent-intro { text-align: center; color: rgba(255, 255, 255, 0.78); margin-bottom: var(--s6); } .br-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); max-width: var(--max-w); margin: 0 auto; } .br-agents .agent-card { margin: 0; } .br-agent-role { font-size: 0.78rem; color: var(--accent); margin-bottom: var(--s1); } /* ============ 4. 十大模块 ============ */ .br-modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); max-width: var(--max-w); margin: 0 auto; } .br-module { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); } .br-module:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .br-module-num { color: var(--primary); font-weight: 800; font-size: 1.05rem; flex-shrink: 0; min-width: 2.2em; } .br-module-name { font-weight: 700; color: var(--text-1); } .br-module-desc { color: var(--text-3); font-size: 0.84rem; margin-top: 2px; line-height: 1.5; } /* 端·云·智 三层架构 */ .br-arch { display: flex; flex-direction: column; gap: var(--s2); max-width: 720px; margin: var(--s10) auto 0; } .br-arch-layer { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); border-radius: var(--r-md); background: var(--bg-alt); border-left: 3px solid var(--primary); } .br-arch-layer strong { color: var(--primary); flex-shrink: 0; min-width: 64px; font-size: 0.9rem; } .br-arch-layer span { color: var(--text-2); font-size: 0.92rem; } /* 软件矩阵标签行 */ .br-software-title { text-align: center; color: var(--text-3); font-size: 0.85rem; margin: var(--s10) 0 var(--s3); letter-spacing: 0.05em; } .br-software { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; max-width: var(--max-w); margin: 0 auto; } .br-software span { padding: var(--s2) var(--s4); border: 1px solid var(--border); border-radius: var(--r-full); font-size: 0.88rem; color: var(--text-2); background: var(--white); } /* ============ 5. 智能硬件（深色） ============ */ .br-hardware { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); max-width: var(--max-w); margin: 0 auto; } .br-hw-card { background: var(--bg-dark-surface); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-lg); padding: var(--s6); text-align: center; color: var(--white); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease); } .br-hw-card:hover { transform: translateY(-3px); border-color: var(--accent); } .br-hw-icon { width: 56px; height: 56px; margin: 0 auto var(--s4); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--accent)); } .br-hw-icon svg { width: 28px; height: 28px; color: #fff; } .br-hw-name { font-weight: 700; margin-bottom: var(--s2); } .br-hw-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); line-height: 1.55; } /* 硬件品质标签 */ .br-quality { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: center; margin-top: var(--s10); } .br-quality span { color: rgba(255, 255, 255, 0.72); font-size: 0.88rem; } .br-quality span::before { content: "✓ "; color: var(--green); font-weight: 700; } /* ============ 6. 联系我们（渐变收尾） ============ */ .screen--contact { background: linear-gradient(135deg, #122240 0%, #0d47a1 50%, #1565c0 100%); color: var(--white); text-align: center; } .screen--contact .br-head h2 { color: var(--white); } .screen--contact .br-head .section-desc { color: rgba(255, 255, 255, 0.78); } .br-contact-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s8); max-width: 680px; margin: var(--s8) auto; text-align: left; } .br-contact-item strong { display: block; color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; letter-spacing: 0.05em; margin-bottom: var(--s1); } .br-contact-item span, .br-contact-item a { font-size: clamp(0.95rem, 2.6vw, 1.1rem); color: var(--white); text-decoration: none; word-break: break-all; } .br-cta { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; margin: var(--s6) 0; } /* 联系页 CTA：弱化的小号幽灵按钮，不抢标题视线；悬停微亮 */ .br-contact-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.15rem; font-family: inherit; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--r-full); text-decoration: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .br-contact-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); color: #fff; } .br-share-hint { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-lg); padding: var(--s5) var(--s6); max-width: 480px; margin: var(--s6) auto; color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; line-height: 1.6; } .br-share-hint strong { color: var(--white); } .br-case-bar { display: flex; gap: var(--s8); justify-content: center; flex-wrap: wrap; margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid rgba(255, 255, 255, 0.12); } .br-case-bar div { text-align: center; } .br-case-bar strong { display: block; font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 800; } .br-case-bar span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); } .br-back-top { margin-top: var(--s8); background: rgba(255, 255, 255, 0.12); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.6rem 1.6rem; border-radius: var(--r-full); cursor: pointer; font-size: 0.9rem; transition: background 0.2s var(--ease); } .br-back-top:hover { background: rgba(255, 255, 255, 0.2); } .br-footer { margin-top: var(--s10); font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); line-height: 1.7; } /* 联系页专属布局：容器纵向 flex 撑满整屏；标题区与「回到封面」各一个 margin-top:auto， 平分剩余空间 → 标题/CTA 落上半部，回到封面 + 页脚下沉贴底，中间自然留白 */ .screen--contact { padding-top: clamp(1.25rem, 4vh, 2.5rem); padding-bottom: clamp(1.25rem, 4vh, 2.5rem); } .screen--contact .container { display: flex; flex-direction: column; flex: 1 1 auto; } .screen--contact .br-head { margin-top: auto; margin-bottom: clamp(0.5rem, 1.5vh, 1rem); } .screen--contact .br-cta { margin: auto 0 clamp(0.5rem, 1.5vh, 1rem); gap: var(--s3); } .screen--contact .br-back-top { margin-top: clamp(0.5rem, 1.5vh, 1rem); padding: 0.45rem 1.3rem; } .screen--contact .br-footer { margin-top: clamp(0.5rem, 1.5vh, 1rem); } /* ============ 模块屏（十大业务模块：左说明 + 右看板） ============ */ .screen--module { overflow: visible; /* 看板可能高过一屏，允许自然延伸、不被裁剪 */ padding: var(--s12) var(--s6); align-items: center; } .screen--module h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 800; margin: var(--s3) 0 var(--s4); line-height: 1.25; } .screen--module p { color: var(--text-2); } /* 模块页码 */ .br-pager { text-align: center; margin-top: var(--s10); font-size: 0.9rem; color: var(--text-4); letter-spacing: 0.15em; font-weight: 600; } .br-pager span { opacity: 0.45; } /* 平台屏 → 十大模块 引出语 */ .br-lead-next { text-align: center; color: rgba(255, 255, 255, 0.72); margin-top: var(--s10); font-size: 0.95rem; } .screen--light .br-lead-next { color: var(--text-3); } /* 浅色屏引出语转深色 */ .br-arrow { display: inline-block; color: var(--accent); animation: br-bounce 1.6s infinite; } /* ============ 响应式 ============ */ @media (max-width: 1024px) { .br-agents { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px), print and (orientation: portrait) { .screen { padding: var(--s8) var(--s4); } /* 收紧上下内边距，让内容更易整页 fit */ .screen--module { padding: var(--s8) var(--s4) var(--s6); } /* top 抬高避开 LOGO 页眉 */ /* 移动端隐藏右侧圆点，靠翻页提示与滚动 */ .br-dots { display: none; } .br-split { grid-template-columns: 1fr; gap: var(--s6); } .br-vision { grid-template-columns: 1fr 1fr; gap: var(--s2); } /* 关于屏竖屏紧凑：图限高、文字收紧，让自然高度接近一屏，避免整体缩放导致文字过小 */ #screen-about .br-media img { max-height: 180px; object-fit: cover; } #screen-about .br-vision-item { padding: var(--s2) var(--s3); } #screen-about .br-text h2 { font-size: 1.5rem; margin: var(--s2) 0 var(--s3); } #screen-about .br-text p { font-size: 0.88rem; line-height: 1.6; } #screen-about .br-stats { margin-top: var(--s6); } #screen-about .br-info-bar { margin-top: var(--s2); } .br-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s4); } .br-agents { grid-template-columns: repeat(2, 1fr); } /* 智能体卡 2 列，压低平台屏高度 */ .br-agents .agent-card { padding: var(--s3); } .br-agents .agent-card h3 { font-size: 0.95rem; } .br-agents .agent-card p { font-size: 0.76rem; } .br-agent-intro { font-size: 0.82rem; margin-bottom: var(--s3); } .br-head { margin-bottom: var(--s4); } .br-head h2 { font-size: 1.4rem; margin: var(--s2) 0 var(--s1); } .br-head .section-desc { font-size: 0.85rem; } .br-stats { margin-top: var(--s4); gap: var(--s4); } .br-stat .stat-number { font-size: clamp(1.6rem, 5vw, 2rem); } .br-hardware .br-hw-card { padding: var(--s4); } .br-hw-name { font-size: 0.9rem; } .br-hw-desc { font-size: 0.72rem; } .br-hardware { grid-template-columns: repeat(2, 1fr); } .br-modules { grid-template-columns: 1fr; } .br-contact-info { grid-template-columns: 1fr; gap: var(--s5); text-align: center; } .br-contact-item { text-align: center; } .br-arch-layer { flex-wrap: wrap; } /* 新增 4 页（核心理念/应用价值/价值成效/客户案例）竖屏紧凑 fit：只收紧间距与列数，不缩字号 */ #screen-concept, #screen-value, #screen-outcome, #screen-cases { padding: var(--s6) var(--s4); } #screen-concept .grid.grid-3, #screen-value .grid.grid-3 { gap: var(--s2); } #screen-concept .grid.grid-3 > div, #screen-value .grid.grid-3 > div { padding: var(--s3) !important; } #screen-concept h3, #screen-value h3 { font-size: 1.05rem; } /* 极致收紧搬过来的大间距，让 3 卡 fit 一屏（不缩字号、不减内容） */ #screen-concept [style*="margin-top:var(--space-xl)"] { margin-top: var(--s3) !important; } #screen-concept [style*="margin-bottom:var(--space-lg)"] { margin-bottom: var(--s3) !important; } #screen-concept [style*="margin-bottom:var(--space-md)"] { margin-bottom: var(--s2) !important; } #screen-value [style*="margin-bottom:var(--space-md)"] { margin-bottom: var(--s2) !important; } /* 应用价值：竖屏隐藏每卡的 4 条要点，保留图标+客户类型+标题+一句话 */ #screen-value [style*="flex-direction:column"][style*="gap:var(--space-md)"] { display: none !important; } /* 核心理念：竖屏隐藏每卡的三条特性，保留标题+描述+数字，让 3 卡 fit 一屏 */ #screen-concept [style*="flex-direction:column"][style*="gap:var(--space-sm)"] { display: none !important; } /* 核心理念竖屏进一步精简：隐藏底部闭环条 + 卡内描述，保留流程轴与三卡标题/数字 */ #screen-concept .grid.grid-3 + div { display: none !important; } #screen-concept .grid.grid-3 p { display: none !important; } #screen-outcome .grid.grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--s2); } /* 6 卡改 2 列 3 行 */ #screen-outcome .grid.grid-3 > div { padding: var(--s4) !important; } #screen-cases .grid.grid-4 { grid-template-columns: repeat(4, 1fr) !important; gap: var(--s1); } /* 4 个规模卡竖屏也排一行 */ #screen-cases .grid.grid-4 > div { padding: var(--s3) var(--s1) !important; } #screen-cases .grid.grid-4 > div > div:first-child { font-size: clamp(1rem, 3.2vw, 1.3rem) !important; } #screen-cases .grid.grid-4 > div > div:last-child { font-size: 0.64rem !important; margin-top: 2px !important; line-height: 1.3 !important; } /* 客户与案例：竖屏 3 案例改横向轮播（左右滑动切换），避免整屏超高 */ #screen-cases .grid.grid-3 { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s3); padding-bottom: var(--s4); -webkit-overflow-scrolling: touch; scrollbar-width: none; } #screen-cases .grid.grid-3::-webkit-scrollbar { display: none; } #screen-cases .grid.grid-3 > div { flex: 0 0 88%; scroll-snap-align: start; padding: var(--s4) !important; } /* 端·云·智三层架构：竖屏隐藏每层的详情标签，只留图标+层名 */ #screen-platform [style*="min-width:200px"] { display: none !important; } .br-case-bar { gap: var(--s6); } } @media (max-width: 480px) { .br-hardware { grid-template-columns: repeat(2, 1fr); } .br-quality { gap: var(--s3); } } /* 尊重减少动效偏好 */ /* 模块 10 手机展示区：桌面端整体缩小（移动端由 initDashboardScale 缩放，不动） */ @media (min-width: 769px) { #module-10 [style*="min-height:560px"] { transform: scale(0.82); transform-origin: center; min-height: 460px !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .br-scroll-hint svg { animation: none; } } /* 导出 PDF 浮动按钮（右下角，固定） */ .br-pdf-fab { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 1200; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-full); padding: 0.55rem 1rem; font-size: 0.8rem; font-weight: 400; cursor: pointer; box-shadow: none; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .br-pdf-fab:hover { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.4); } .br-pdf-fab[data-tone="light"] { background: rgba(15, 23, 42, 0.05); color: rgba(15, 23, 42, 0.5); border-color: rgba(15, 23, 42, 0.14); } .br-pdf-fab[data-tone="light"]:hover { background: rgba(15, 23, 42, 0.1); color: #1f2937; border-color: rgba(15, 23, 42, 0.35); } @media (max-width: 768px) { .br-pdf-fab { right: var(--s4); bottom: var(--s4); padding: 0.6rem 1rem; font-size: 0.8rem; } } /* ============ 打印 / PDF：一屏一页 ============ */ @media print { @page { size: A4; margin: 0; } html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; } /* 隐藏导航/进度/翻页/页眉 LOGO/粒子/封面水印/装饰光晕等非打印元素 */ .br-progress, .br-dots, .br-scroll-hint, .br-page-logo, .particles-canvas, .back-to-top, .br-cover-watermark, .br-pdf-fab, .screen [style*="radial-gradient(circle"] { display: none !important; } /* 每个 screen 改 block、按内容自然高度，屏后强制换页（不设 break-inside:avoid， 否则超高屏放不下会被推成空白页；允许超高内容跨页，先保证打印有内容） */ .screen { display: block !important; min-height: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 8mm 10mm !important; page-break-after: always; break-after: page; } .screen:last-child { page-break-after: auto; break-after: auto; } .br-cover-inner { min-height: 0 !important; padding: 0 !important; } /* 打印时强制所有入场动画元素可见（否则未进入视口的 .reveal 仍是 opacity:0 → 整屏空白） */ .reveal { opacity: 1 !important; transform: none !important; } /* 打印背景色（保留深色屏、封面渐变、看板底色） */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } /* 打印横向（A4 横向）：恢复多列横向布局 */ @media print and (orientation: landscape) { .br-split, .grid-2 { grid-template-columns: 1fr 1fr !important; } .grid-3 { grid-template-columns: repeat(3, 1fr) !important; } .grid-4, .br-stats { grid-template-columns: repeat(4, 1fr) !important; } .br-hardware { grid-template-columns: repeat(3, 1fr) !important; } }