/* ============================================================ 产品相关 · 手机端适配（公共样式） ------------------------------------------------------------ 适用：aidianxiao1 / aijz1 / dianxiaojiqiren1 / duanshipin1 / dxk1 / geo1 / gongzuoshouji / hwhkdyy1 等产品子页 用法：每个产品页 内加一行 上传：本文件放到 template/default/index/css/product-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 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 { 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; } 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：保留 pt-25，取消整屏高度，堆叠左右栏，保留右侧主图 ---------- */ .min-h-screen { min-height: auto !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: 1.25rem !important; } .min-h-screen .md\:w-1\/2.relative { display: block !important; } .min-h-screen .md\:w-1\/2.relative img { width: 100% !important; height: auto !important; } .min-h-screen p.transform.translate-y-10 { transform: none !important; margin-bottom: 0.75rem !important; } .min-h-screen .grid.grid-cols-3 { gap: 0.5rem !important; } .min-h-screen .grid.grid-cols-3 .text-2xl { font-size: 1.2rem !important; } .min-h-screen .grid.grid-cols-3 .text-sm { font-size: 0.7rem !important; } /* ---------- 5. 痛点卡：3列紧凑宫格，图标+标题居中 ---------- */ #pain-points .grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.6rem !important; } #pain-points .bg-white.rounded-2xl.shadow-xl { padding: 0.75rem 0.4rem !important; text-align: center !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; } #pain-points .w-16.h-16 { width: 36px !important; height: 36px !important; border-radius: 8px !important; margin: 0 auto 0.35rem !important; } #pain-points .w-16.h-16 i { font-size: 0.85rem !important; } #pain-points h3 { font-size: 0.8rem !important; line-height: 1.35 !important; margin-bottom: 0 !important; text-align: center !important; } #pain-points .bg-white > p { display: none !important; } /* ---------- 6. 价值点（#features 里 md:grid-cols-3）：3列紧凑宫格 ---------- */ #features .grid.grid-cols-1.md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 0.6rem !important; } #features .grid.grid-cols-1.md\:grid-cols-3 .bg-white.rounded-2xl.shadow-xl { padding: 0.75rem 0.4rem !important; text-align: center !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; } #features .grid.grid-cols-1.md\:grid-cols-3 .w-14.h-14 { width: 36px !important; height: 36px !important; margin: 0 auto 0.35rem !important; } #features .grid.grid-cols-1.md\:grid-cols-3 .w-14.h-14 i { font-size: 0.85rem !important; } #features .grid.grid-cols-1.md\:grid-cols-3 h3 { font-size: 0.8rem !important; line-height: 1.35 !important; margin-bottom: 0 !important; text-align: center !important; } #features .grid.grid-cols-1.md\:grid-cols-3 p { display: none !important; } /* ---------- 7. 功能卡（#features 里 md:grid-cols-2）：2×2 产品卡，参考销管“上图+标题遮罩+下图标签”样式 ---------- */ #features .grid.grid-cols-1.md\:grid-cols-2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; align-items: start !important; } #features .grid.grid-cols-1.md\:grid-cols-2 > div { display: flex !important; flex-direction: column !important; position: relative !important; overflow: hidden !important; border-radius: 14px !important; padding-top: 130px !important; /* 上半部分留给图片 */ background: #fff !important; } /* 图片区域占满卡片上半部分 */ #features .grid.grid-cols-1.md\:grid-cols-2 .md\:w-2\/5 { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 130px !important; overflow: hidden !important; } #features .grid.grid-cols-1.md\:grid-cols-2 .md\:w-2\/5 img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* 图片底部黑色渐变遮罩，让白字标题可读 */ #features .grid.grid-cols-1.md\:grid-cols-2 .md\:w-2\/5::after { content: '' !important; position: absolute !important; left: 0; right: 0; bottom: 0; height: 55% !important; background: linear-gradient(to top, rgba(0,0,0,.68), transparent) !important; z-index: 1 !important; pointer-events: none !important; } /* 文字区域（标签）在图片下方白色区域 */ #features .grid.grid-cols-1.md\:grid-cols-2 .md\:w-3\/5 { width: 100% !important; padding: 0.65rem 0.5rem 0.85rem !important; text-align: center !important; } /* 标题 absolute 叠在图片底部 */ #features .grid.grid-cols-1.md\:grid-cols-2 h3 { position: absolute !important; top: 96px !important; /* 130px 图片底部上方一点 */ left: 0.5rem !important; right: 0.5rem !important; color: #fff !important; font-size: 0.8rem !important; font-weight: 700 !important; text-align: left !important; margin: 0 !important; z-index: 3 !important; text-shadow: 0 1px 3px rgba(0,0,0,.6) !important; } #features .grid.grid-cols-1.md\:grid-cols-2 .md\:w-3\/5 > p { display: none !important; } #features .grid.grid-cols-1.md\:grid-cols-2 .flex.flex-wrap { gap: 4px !important; margin-top: 0 !important; justify-content: center !important; } #features .grid.grid-cols-1.md\:grid-cols-2 .bg-gray-100 { padding: 2px 6px !important; font-size: 0.6rem !important; border-radius: 4px !important; white-space: nowrap !important; } /* ---------- 8. 获客场景：动态 flex，1项全宽 / 2项各半 / 3项三列 ---------- */ .scenario-grid { display: flex !important; flex-wrap: wrap !important; gap: 0.75rem !important; max-width: 100% !important; } .scenario-grid > a { flex: 1 1 calc(33.333% - 0.5rem) !important; max-width: 100% !important; padding: 0.75rem 0.4rem !important; font-size: 0.75rem !important; text-align: center !important; border-radius: 12px !important; } .scenario-grid > a .w-12.h-12 { width: 28px !important; height: 28px !important; margin: 0 auto 0.25rem !important; } .scenario-grid > a .w-12.h-12 i { font-size: 14px !important; } .scenario-grid > a h3 { font-size: 0.75rem !important; margin-bottom: 0.15rem !important; } .scenario-grid > a p { font-size: 0.6rem !important; line-height: 1.35 !important; margin: 0 !important; } .scenario-grid > a span { display: none !important; } /* ---------- 9. FAQ（通用） ---------- */ details { padding: 0.875rem !important; margin-bottom: 0.6rem !important; } details p { line-height: 1.5 !important; } /* ---------- 10. 表单（通用） ---------- */ input.w-full, textarea.w-full, select.w-full { width: 100% !important; box-sizing: border-box !important; } .lg\:pl-12 { padding-left: 0 !important; } #contact .bg-white\/5 { padding: 1.25rem !important; } /* ---------- 11. 微信二维码缩小到约 96px（参考安卓APP大小） ---------- */ #contact img.w-40.h-40, #contact .w-40.h-40 { width: 96px !important; height: 96px !important; } /* ---------- 12. 全局 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; } /* ========== 所有产品页通用：隐藏 banner 右侧主图，减少首屏占用 ========== */ section.relative.min-h-screen.flex.items-center .md\:w-1\/2.relative { display: none !important; } section.relative.min-h-screen.flex.items-center .md\:w-1\/2:not(.relative) { width: 100% !important; margin-bottom: 0 !important; padding-right: 0 !important; } }