/* ============================================================ 销管全流程 · 子页手机端适配（公共样式） ------------------------------------------------------------ 适用：cbyl1 / zdhyx1 / gxyy1 / hwyl1 / hwyy1 / khgj1 / tdxz1 / xszh1 / ywlc1 等所有子页 用法：每个子页 内加一行 上传：本文件放到 template/default/index/css/mobile-sub.css 原则：全部规则包在 @media(max-width:768px) 内并加 !important， 绝不影响电脑端显示。 ============================================================ */ @media (max-width: 768px) { /* ---------- 1. 防溢出 / 盒模型（通用） ---------- */ html, body { min-width: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; } .wrapper, .w1200, .w, .container, #container, .main, .layout, .wrap, .page { min-width: 0 !important; max-width: 100% !important; width: 100% !important; } div, section, header, footer, nav, article, aside, main, figure, figcaption, form, fieldset { max-width: 100% !important; box-sizing: border-box !important; } img, iframe, video, svg, embed, object, canvas, table { max-width: 100% !important; height: auto !important; } table { display: block; width: 100% !important; overflow-x: auto; } body { word-wrap: break-word; overflow-wrap: break-word; } /* ---------- 2. 字号严格五级（通用，按 section 作用） ---------- A 大标题 1.45rem | B 中标题 1.3rem | C 小标题 0.95rem D 正文 0.85rem | E 标签 0.75rem */ section h1, section .text-4xl, section .text-5xl, section .text-6xl { font-size: 1.45rem !important; line-height: 1.25 !important; font-weight: 700 !important; } section h2, section .text-2xl, section .text-3xl, #consultation h2 { font-size: 1.3rem !important; line-height: 1.35 !important; font-weight: 700 !important; } section h3, section h4, section .text-xl, section .text-lg { font-size: 0.95rem !important; line-height: 1.35 !important; font-weight: 600 !important; } section .text-center > p, section .max-w-2xl, section .max-w-3xl, section .max-w-xl, section p.text-gray-600, section p.text-white\/80, section p.text-white\/70 { font-size: 0.85rem !important; line-height: 1.6 !important; } /* 标签 / 辅助文字 */ #pain-points .bg-red-100, #solutions .bg-blue-50, #solutions .absolute.bottom-4.left-4 .bg-accent\/80 { font-size: 0.75rem !important; } /* 标题区下方间距统一，去掉大片空位 */ section .text-center.mb-16, section .text-center.mb-12, section .text-center.mb-10, section .text-center.mb-8 { margin-bottom: 0.75rem !important; } /* ---------- 3. 图片强制显示（通用） ---------- */ img, video, svg, iframe { display: block !important; visibility: visible !important; opacity: 1 !important; } /* ---------- 4. Banner 紧凑化（通用） ---------- */ .min-h-screen { min-height: auto !important; padding-top: 28px !important; padding-bottom: 28px !important; } .min-h-screen.flex.items-center { align-items: flex-start !important; } .min-h-screen .flex.flex-col.md\:flex-row { flex-direction: column !important; } .min-h-screen .md\:w-1\/2 { width: 100% !important; margin-bottom: 0 !important; } .min-h-screen .md\:w-1\/2.relative { display: none !important; } .min-h-screen .md\:w-1\/2:not(.relative) { padding-right: 0 !important; } .min-h-screen p.transform.translate-y-10 { transform: none !important; margin-bottom: 0.75rem !important; } /* ---------- 5. Banner 数据指标：3 列等宽（通用 flex） ---------- */ .flex.flex-wrap.gap-8.mt-11 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0.75rem !important; margin-top: 1.25rem !important; } .flex.flex-wrap.gap-8.mt-11 > div { text-align: center !important; } .flex.flex-wrap.gap-8.mt-11 .text-4xl { font-size: 1.3rem !important; margin-bottom: 0.25rem !important; } .flex.flex-wrap.gap-8.mt-11 .text-white\/70 { font-size: 0.75rem !important; line-height: 1.3 !important; } /* ---------- 6. 痛点卡片：3 列紧凑，只留标题+标签（通用） ---------- */ #pain-points .grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; } #pain-points .bg-white.rounded-2xl.shadow-xl { padding: 0.65rem 0.5rem !important; margin-bottom: 0 !important; text-align: left !important; } #pain-points .w-16.h-16 { width: 28px !important; height: 28px !important; margin: 0 0 0.3rem 0 !important; border-radius: 6px !important; } #pain-points .w-16.h-16 i { font-size: 0.7rem !important; } #pain-points h3 { font-size: 0.85rem !important; line-height: 1.35 !important; margin-bottom: 0.3rem !important; text-align: left !important; white-space: normal !important; overflow: visible !important; } #pain-points .bg-white > p { display: none !important; } #pain-points .bg-red-100 { padding: 1px 4px !important; margin: 0 2px 3px 0 !important; font-size: 0.6rem !important; } /* ---------- 7. 解决方案区域（产品卡 + 落地四步）统一用 flex，规避 grid 误伤 ---------- */ #solutions .grid { display: flex !important; flex-wrap: wrap !important; gap: 0.75rem !important; align-items: stretch !important; } #solutions .grid > a, #solutions .grid > div { width: calc(50% - 0.375rem) !important; flex: 0 0 auto !important; box-sizing: border-box !important; } /* 3 张卡时第 3 张拉宽整行；仅 1 张时也拉宽整行；2 张卡保持并排 */ /* 用 :not(.md\:grid-cols-4) 排除落地四步网格，避免误伤其第 3 个 div */ #solutions .grid:not(.md\:grid-cols-4) > a:nth-child(3), #solutions .grid:not(.md\:grid-cols-4) > div:nth-child(3), #solutions .grid:not(.md\:grid-cols-4) > a:only-child, #solutions .grid:not(.md\:grid-cols-4) > div:only-child { width: 100% !important; } #solutions a.group, #solutions a.group > div { height: auto !important; } #solutions .bg-white.rounded-2xl.shadow-xl.overflow-hidden { padding: 0 !important; margin: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } #solutions .relative.h-48 { height: 120px !important; overflow: hidden !important; position: relative !important; padding: 0 !important; } #solutions .relative.h-48 img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } #solutions .relative.h-48 .absolute.inset-0 { display: none !important; } #solutions .relative.h-48::after { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 70% !important; background: linear-gradient(to top, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0.4) 60%, transparent 100%) !important; z-index: 1 !important; pointer-events: none !important; display: block !important; } #solutions .absolute.bottom-4.left-4 { position: absolute !important; bottom: 0.4rem !important; left: 0.4rem !important; right: 0.4rem !important; text-align: left !important; color: #ffffff !important; padding: 0 !important; z-index: 2 !important; } #solutions .absolute.bottom-4.left-4 .bg-accent\/80 { background: #3b82f6 !important; color: #ffffff !important; padding: 2px 5px !important; margin-bottom: 0.25rem !important; display: inline-block !important; } #solutions .absolute.bottom-4.left-4 h3 { color: #ffffff !important; margin: 0 !important; line-height: 1.3 !important; white-space: normal !important; overflow: visible !important; } #solutions .p-6 { padding: 0.6rem 0.85rem 0.85rem !important; flex: 0 0 auto !important; text-align: left !important; } #solutions .p-6 p { display: none !important; } #solutions .p-6 .flex.flex-wrap { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-top: 0.25rem !important; } #solutions .p-6 .flex.flex-wrap .bg-blue-50, #solutions .bg-blue-50 { padding: 2px 6px !important; margin: 0 !important; border-radius: 4px !important; white-space: nowrap !important; } #solutions .flex.items-center.justify-between { justify-content: space-between !important; align-items: center !important; gap: 0.25rem !important; margin-top: 0.5rem !important; } #solutions .w-10.h-10 { width: 22px !important; height: 22px !important; } #solutions .w-10.h-10 i { font-size: 10px !important; } /* ---------- 8. 落地四步流程：2×2 紧凑（通用 md:grid-cols-4） ---------- */ .grid.grid-cols-1.md\:grid-cols-4.gap-8 { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } .grid.grid-cols-1.md\:grid-cols-4.gap-8 .w-16 { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; font-size: 1.3rem !important; line-height: 1 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .grid.grid-cols-1.md\:grid-cols-4.gap-8 h4 { margin-bottom: 0.25rem !important; } .grid.grid-cols-1.md\:grid-cols-4.gap-8 p { line-height: 1.45 !important; } /* ---------- 9. 行业/案例 4 列网格：2 列紧凑（对应子页若存在） ---------- */ .grid.grid-cols-2.md\:grid-cols-4.gap-6 { grid-template-columns: repeat(4, 1fr) !important; gap: 0.5rem !important; } .grid.grid-cols-2.md\:grid-cols-4.gap-6 .bg-light { padding: 0.5rem 0.2rem !important; border-radius: 0.75rem !important; } .grid.grid-cols-2.md\:grid-cols-4.gap-6 .w-12.h-12 { width: 26px !important; height: 26px !important; font-size: 11px !important; margin-bottom: 0.3rem !important; } .grid.grid-cols-2.md\:grid-cols-4.gap-6 h3 { margin-bottom: 0.15rem !important; } .grid.grid-cols-2.md\:grid-cols-4.gap-6 p { line-height: 1.35 !important; margin: 0 !important; } /* ---------- 10. 效果案例白卡（对应子页若存在） ---------- */ .bg-white.rounded-2xl.shadow-xl.p-8.md\:p-12 { padding: 1rem !important; } .bg-white.rounded-2xl.shadow-xl.p-8.md\:p-12 .grid.md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; } .bg-white.rounded-2xl.shadow-xl.p-8.md\:p-12 .text-4xl { font-size: 1.3rem !important; } .bg-white.rounded-2xl.shadow-xl.p-8.md\:p-12 .text-gray-600 { line-height: 1.35 !important; } /* ---------- 11. FAQ（通用） ---------- */ details { padding: 0.875rem !important; margin-bottom: 0.6rem !important; } details p { line-height: 1.5 !important; } /* ---------- 12. 咨询模块（通用） ---------- */ #consultation { padding: 2rem 0 !important; } #consultation .space-y-6 > div { margin-bottom: 0.75rem !important; } #consultation .w-12.h-12 { width: 36px !important; height: 36px !important; } /* ---------- 13. 表单（通用） ---------- */ input.w-full, textarea.w-full, select.w-full { width: 100% !important; box-sizing: border-box !important; } .lg\:pl-12 { padding-left: 0 !important; } /* ---------- 14. 全局 section 间距压缩（通用） ---------- */ section.py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } section.py-16 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-3, .py-4, .py-6, .py-8, .py-10, .py-12 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } }