/* =========================================================== 移动端适配样式 - mobile.css 适配目标：手机（<= 768px）和平板（<= 1024px） 加载方式：在 中通过 外链方式引入 =========================================================== */ /* ---------- 1. 通用（平板及以下） ---------- */ @media (max-width: 1024px) { /* === 关键：body 自身下移 50px 避开 fixed 导航栏，清理所有默认外边距 === */ body { margin: 0 !important; padding-top: 50px !important; box-sizing: border-box; } /* 解除 fullpage 对 html/body 的高度与 overflow 限制，但保留 body 的 padding-top: 50px */ html.fp-enabled, .fp-enabled body { height: auto !important; min-height: 100% !important; overflow: auto !important; -webkit-overflow-scrolling: touch; } /* 显式为首页保留 body 的 50px 偏移（不要被 fullpage 清掉） */ .fp-enabled body { padding-top: 50px !important; margin: 0 !important; box-sizing: border-box; } /* 关闭 fullpage 给 section 设置的固定高度，让内容自然撑开 */ #fullpage, #fullpage .section, #fullpage .fp-section, .fp-section, .fp-slide, .fp-slidesContainer, .fp-tableCell { height: auto !important; min-height: 0 !important; } /* 取消 fullpage 容器自身的位移（autoScrolling:false 时其 top 会被 JS 设置） */ #fullpage { position: static !important; top: 0 !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } /* === 关键：首页所有 section 恢复为静态块级流式布局，互相不重叠 === */ #fullpage > .section, #fullpage .section { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; display: block !important; z-index: auto !important; } /* introduction 在 products 之后，必须正常堆叠 */ #fullpage .introduction, #fullpage .pro-box, #fullpage .about, #fullpage .cooperation, #fullpage .news, #fullpage .footer { position: relative !important; top: auto !important; left: auto !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; margin: 0 !important; } /* 取消"垂直居中"绝对定位，改为普通流 */ .center-hight { position: static !important; top: auto !important; transform: none !important; -webkit-transform: none !important; -ms-transform: none !important; -moz-transform: none !important; -o-transform: none !important; } /* 隐藏 fullpage 自带的左右侧导航点 */ #fp-nav, .fp-slidesNav { display: none !important; } /* 容器宽度自适应 + 内边距 */ .center-box { width: 100% !important; max-width: 100% !important; padding: 0 16px !important; box-sizing: border-box !important; } /* header 改为静态，避免与悬浮导航冲突 */ .header.fixed, .header { position: fixed !important; top: 0; left: 0; width: 100%; height: 50px !important; line-height: 50px !important; background: rgba(0, 0, 0, 0.85) !important; z-index: 1000; } .header .center-box { display: flex !important; align-items: center !important; justify-content: space-between; height: 50px !important; padding: 0 12px !important; box-sizing: border-box; } .header .logo { height: 30px !important; width: auto !important; margin: 0; } /* 主导航默认隐藏，激活时由 JS 打开 */ .header > .center-box > ul { display: none; } /* 触发 .nav-open（由 JS 切换）后显示下拉菜单 */ .header.nav-open { background: rgba(0, 0, 0, 0.92) !important; height: 50px !important; /* 顶部 logo 区高度保持 50px */ line-height: 50px !important; } /* 下拉菜单区域：从导航栏正下方开始 */ .header.nav-open .center-box { display: flex !important; /* 让 logo / 汉堡按钮保持 flex 布局 */ align-items: center !important; /* logo 垂直居中 */ height: 50px !important; padding: 0 12px !important; } .header.nav-open .logo { position: relative; z-index: 2; margin: 0; /* 由父级 flex 居中负责 */ } .header.nav-open > .center-box > ul { display: block; position: absolute; top: 50px; /* 紧贴 logo 区下方 */ left: 0; right: 0; width: 100%; float: none; background: rgba(0, 0, 0, 0.92); max-height: calc(100vh - 50px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .header.nav-open ul li { float: none; width: 100%; margin: 0; padding: 0; line-height: 44px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: left; box-sizing: border-box; } .header.nav-open ul li a { display: block; padding: 0 16px; font-size: 15px !important; color: #ddd !important; } /* 子菜单默认收起：高度 0 + 溢出隐藏 */ .header.nav-open ul li > dl { position: static !important; height: auto !important; max-height: 0; opacity: 0; overflow: hidden; background: rgba(0, 0, 0, 0.6) !important; padding: 0 !important; transition: max-height 0.3s ease, opacity 0.3s ease; } .header.nav-open ul li.expanded > dl { max-height: 800px; opacity: 1; } .header.nav-open ul li > dl dd { float: none !important; display: block; line-height: 38px; padding: 0 !important; text-align: left; border-top: 1px solid rgba(255,255,255,0.05); } .header.nav-open ul li > dl dd a { padding: 0 30px; font-size: 14px !important; color: #bbb !important; } .header.nav-open ul li > dl dd a img { display: none; } .header.nav-open ul li > dl dd a span { display: inline; } /* 父项加一点视觉强调，给右侧 + 号按钮预留空间 */ .header.nav-open ul li.has-sub > a { background: rgba(255, 255, 255, 0.04); font-weight: 600; padding-right: 50px !important; } /* 独立的 + / − 按钮（由 mobile.js 插入 .nav-expand），点击才展开子菜单 */ .header.nav-open ul li.has-sub { position: relative; } .header.nav-open ul li.has-sub .nav-expand { position: absolute; right: 0; top: 0; width: 50px; height: 100%; /* 行高=高度让 + 和 − 在同一像素位置严格垂直居中，避免字符基线偏差 */ line-height: 44px; text-align: center; font-size: 24px; color: #ddd; cursor: pointer; user-select: none; /* + / − 两种字符宽度不同，给按钮固定 padding 防止视觉跳动 */ font-family: Arial, Helvetica, sans-serif; } /* 汉堡按钮（由 mobile.js 注入） */ .nav-toggle { display: none; } .header.nav-open ~ .nav-toggle, .header .nav-toggle { display: block; position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; cursor: pointer; z-index: 1001; background: transparent; border: 0; padding: 0; } .header .nav-toggle span, .header .nav-toggle span::before, .header .nav-toggle span::after { content: ''; display: block; width: 22px; height: 2px; background: #fff; position: absolute; left: 3px; transition: all 0.3s; } .header .nav-toggle span { top: 13px; } .header .nav-toggle span::before { top: -7px; } .header .nav-toggle span::after { top: 7px; } .header.nav-open .nav-toggle span { background: transparent; } .header.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); } .header.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); } /* 给主区域留出 header 高度的间距，避免被 fixed 头部遮住 */ body.has-fixed-header { padding-top: 50px; } /* 标题区 */ .title h1 { font-size: 26px !important; } .title span { font-size: 12px !important; letter-spacing: 6px !important; } /* footer */ .foot-box { padding: 24px 16px !important; } .foot-box > ul { float: none !important; width: 100%; } /* 页脚每个栏目作为可折叠行 */ .foot-box > ul > li { position: relative; float: none !important; width: 100% !important; margin: 0 0 8px 0 !important; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* 标题行 */ .foot-box > ul > li > a, .foot-box > ul > li > span { display: block; padding: 12px 50px 12px 0 !important; position: relative; font-size: 14px !important; color: #fff !important; } /* + / − 按钮（由 mobile.js 插入） */ .foot-box > ul > li .foot-expand { position: absolute; right: 0; top: 0; width: 50px; height: 44px; line-height: 44px; text-align: center; font-size: 22px; color: #ddd; cursor: pointer; user-select: none; font-family: Arial, Helvetica, sans-serif; } /* 子项 dl 默认收起 */ .foot-box > ul > li > dl { max-height: 0; opacity: 0; overflow: hidden; margin: 0 !important; padding: 0 0 0 12px !important; transition: max-height 0.3s ease, opacity 0.3s ease; } .foot-box > ul > li.expanded > dl { max-height: 600px; opacity: 1; padding: 8px 0 12px 12px !important; } /* 保留 foot-info（公司简介块）始终展开 */ .foot-box > ul > li.foot-info { padding-bottom: 12px; } .foot-box > ul > li.foot-info > dl { max-height: none !important; opacity: 1 !important; overflow: visible !important; padding: 12px 0 0 0 !important; } .foot-box > ul > li.foot-info .foot-expand { display: none; } /* 二维码区域始终显示 */ .foot-icon { float: none !important; margin-top: 16px; text-align: center; } .foot-icon dl { display: flex; justify-content: center; gap: 12px; margin: 0 !important; } .foot-icon dd { width: 100px !important; margin-right: 0 !important; } .foot-bottom { padding: 14px 12px !important; } .foot-bottom p, .foot-bottom a, .foot-bottom span { font-size: 12px !important; } /* 通用：浮动元素在小屏全部堆叠 */ .pull-left, .pull-right { float: none !important; display: block; } /* 关闭右侧第三方悬浮工具条 */ #newBridge, #btn, .apply { display: none !important; } } /* ---------- 2. 内页主体（内页容器预留 header 空间） ---------- */ @media (max-width: 1024px) { /* common.css 在 1440px 媒体查询里给 .container_r 设了 padding-top:60px， 移动端必须去掉，否则 header 后面会有这条空白 */ .container_r { padding-top: 0 !important; margin-top: 0 !important; } /* .main 自身不设 padding / margin */ .main { padding: 0 !important; margin: 0 !important; font-size: 14px; } /* banner 图片紧贴顶部、水平铺满、垂直同比缩放 */ .main > img.img-responsive:first-child { display: block !important; width: 100% !important; height: auto !important; max-width: 100%; vertical-align: top; margin: 0 !important; padding: 0 !important; } /* 其余图片也防止 inline 基线留白 */ .main img.img-responsive { display: block !important; width: 100%; height: auto; } /* 面包屑 + 子导航栏 */ .subnav, .subnavbox { height: auto !important; line-height: normal !important; padding: 10px 12px !important; overflow: visible !important; } .subnav .center-box, .subnavbox .center-box { display: block; padding: 0 !important; } .subnav .current { margin-bottom: 6px; font-size: 12px; } .subnav .current p, .subnav .current a { font-size: 12px !important; } .sub-nav, .menu { font-size: 13px !important; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; display: block; } .sub-nav li, .menu li { display: inline-block !important; float: none !important; margin: 0 4px 4px 0 !important; padding: 4px 10px !important; } .sub-nav .subnavdlbox { display: none !important; } } /* ---------- 3. 首页 index.html section 适配 ---------- */ @media (max-width: 1024px) { /* === 顶部 banner：CSS keyframes 轮播 === */ /* body 已 padding-top:50px，这里不要再加 */ #fullpage { padding-top: 0 !important; margin-top: 0 !important; position: static !important; } /* 首个 section（banner 区）作为相对定位容器 */ #fullpage > .section:first-child { position: relative !important; height: auto !important; overflow: hidden !important; width: 100% !important; } /* 屏蔽 fullpage 给轮播容器设置的横向布局，让它们都重叠在同一位置 */ .fp-slides, .fp-slidesContainer { position: relative !important; width: 100% !important; height: auto !important; float: none !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; left: 0 !important; top: 0 !important; transform: none !important; } /* 强制让轮播容器不再被 fullpage 的 left/transform 影响 */ .fp-slidesContainer { overflow: hidden !important; left: 0 !important; top: 0 !important; transform: none !important; } /* 第一张 slide 用相对定位撑出容器高度（作为高度参照） */ .fp-slide:nth-of-type(1) { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; z-index: 1; animation: banner-show-1 9s infinite; } /* 其余 slide 绝对定位重叠在第一张之上 */ .fp-slide:nth-of-type(2) { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; z-index: 2; animation: banner-show-2 9s infinite; } .fp-slide:nth-of-type(3) { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; z-index: 3; animation: banner-show-3 9s infinite; } /* === CSS 动画：3 张图依次显示 3s，循环切换 === */ @keyframes banner-show-1 { 0% { opacity: 1; } 30% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 0; } } @keyframes banner-show-2 { 0% { opacity: 0; } 30% { opacity: 0; } 33% { opacity: 1; } 63% { opacity: 1; } 66% { opacity: 0; } 100% { opacity: 0; } } @keyframes banner-show-3 { 0% { opacity: 0; } 63% { opacity: 0; } 66% { opacity: 1; } 97% { opacity: 1; } 100% { opacity: 0; } } /* 轮播图：水平铺满全屏，同比例缩放 */ .slide { display: block; width: 100%; text-align: center; } .slide img { display: block; width: 100% !important; height: auto !important; max-height: 60vh; object-fit: cover; } /* fullpage 的 slidesNav 隐藏 */ .fp-slidesNav { display: none !important; } /* 产品 section：上下堆叠 */ .pro-box { padding: 24px 0 40px; /* 底部预留足够空间，让 pro-icon 选择器不被下一个区块遮住 */ position: relative !important; z-index: 2; } .products { height: auto !important; position: static !important; /* 防止内部 floating 子元素越出边界 */ overflow: hidden; } .pro-nav { width: 100% !important; height: auto !important; padding: 16px !important; background: linear-gradient(to bottom, rgba(255,255,255,0.9), transparent) !important; } .pro-navtop { padding: 0 0 10px 0 !important; } .pro-navtop h1 { font-size: 22px !important; margin-top: 4px !important; } .pro-navtop span { font-size: 12px !important; letter-spacing: 6px !important; } .pro-nav hr { position: static !important; width: 100%; margin: 8px 0; } .pro-nav ul { padding: 8px 0 0 0 !important; display: flex; flex-wrap: wrap; gap: 6px 16px; } .pro-nav ul li { font-size: 14px !important; line-height: 28px !important; } .pro-nav ul li:hover::after, .pro-nav ul li:hover::before, .pro-nav ul li.active-icon::after, .pro-nav ul li.active-icon::before { display: none !important; } .pro-main { position: static !important; width: 100% !important; padding: 0 16px; } .pro-main .more { display: none; } .pro-main ul { margin-top: 12px !important; } .pro-icon { margin-top: 8px !important; } .pro-icon dd { width: 23% !important; } /* 介绍背景 section：与上方 products 区块拉开明显间距 */ .introduction { padding: 60px 16px 40px; margin-top: 32px !important; text-align: center; } .int-box { text-align: center !important; padding-top: 0 !important; } .int-box:after { display: none; } .int-box h2 { font-size: 18px !important; } .int-box h1 { font-size: 22px !important; } /* 关于我们：左右布局改为上下 */ .about { padding: 30px 0; } .ab-box { padding: 0 16px; } .ab-text { width: 100% !important; float: none !important; } .ab-text p { font-size: 14px !important; margin-bottom: 12px !important; } .ab-text .more { margin: 0 !important; } .ab-box img, .ab-box video { width: 100% !important; float: none !important; margin-top: 16px !important; } /* 招商加盟 */ .cooperation { padding: 30px 16px; } .coo-box ul { margin: 16px 0 !important; } .coo-box ul li { width: 100% !important; height: 44px !important; line-height: 44px !important; margin-top: 8px !important; } .coo-img { height: auto !important; } .coo-img img { width: 100% !important; height: auto !important; } /* 案例 */ .news { padding: 30px 0; } .new-box .title { margin-bottom: 20px !important; padding: 0 16px; } .new-main { flex-wrap: wrap; margin-top: 12px !important; padding: 0 16px; } .new-main li { width: 48% !important; margin-bottom: 10px !important; } .new-main p { font-size: 14px !important; line-height: 22px !important; } .see { margin-top: 20px !important; } /* 首页底部：被 fullpage 包裹时也要堆叠 */ .section.footer { padding: 0 !important; } } /* ---------- 4. 内页（synopsis / product / join）通用 ---------- */ @media (max-width: 1024px) { .column { padding: 24px 0 !important; } .column .center-box, .column.center-box { padding: 0 16px !important; } /* 通用 con-1 左右布局：上下堆叠 */ .con-1 { display: block; } .con-1 img { width: 100% !important; float: none !important; margin: 0 0 16px 0 !important; box-shadow: none !important; } .con-right { width: 100% !important; float: none !important; } .con-right p { font-size: 14px !important; line-height: 26px !important; } .con-5 img { width: 100% !important; border-width: 6px !important; } .con-6 dl dd { width: 100% !important; float: none !important; margin-bottom: 24px !important; } /* pages/about/*、pages/list/*、pages/content/* 下的页面：让 .column 区域图片按原始尺寸显示，保持原比例 */ body.page-about .column, body.page-about .main .column, body.page-list .column, body.page-list .main .column, body.page-content .column, body.page-content .main .column, body.page-list .pro-box, body.page-content .pro-box { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } body.page-about .column img, body.page-about .main .column img, body.page-list .column img, body.page-list .main .column img, body.page-content .column img, body.page-content .main .column img, body.page-list .pro-box img, body.page-content .pro-box img { width: auto !important; max-width: 100% !important; height: auto !important; display: inline-block !important; vertical-align: top; } /* banner 图（main 第一个 img）仍然铺满 */ body.page-list .main > img.img-responsive:first-child, body.page-content .main > img.img-responsive:first-child { display: block !important; width: 100% !important; } /* 轮播容器 */ #honor { height: auto !important; min-height: 200px; } .con-4 { width: 100% !important; padding: 0 16px; } .owl-prev, .owl-next, .honorPrev, .honorNext { display: none !important; } .mhn-text { height: auto !important; padding: 12px 0 !important; } /* 产品列表（product.css .column 卡片） */ .main .column li { width: 48% !important; margin-bottom: 20px !important; } .main .column li:not(:nth-of-type(3n+1)) { margin-left: 0 !important; } .main .column li:nth-of-type(even) { margin-left: 4% !important; } .main .column li img { height: 160px !important; } .main .column li p { font-size: 14px !important; } .main .tab { padding-bottom: 24px !important; } .main .tab dd { width: 32px !important; height: 32px !important; line-height: 32px !important; font-size: 13px !important; } /* 产品详情 pro-text */ .pro-text { width: 100% !important; float: none !important; margin-top: 16px !important; } .pro-text h2 { font-size: 18px !important; padding-bottom: 10px !important; margin-bottom: 16px !important; } .pro-text span, .pro-text p { font-size: 13px !important; line-height: 22px !important; } .pro-img { width: 100% !important; float: none !important; } } /* ---------- 5. 加盟页（join.css） ---------- */ @media (max-width: 1024px) { .ad .ad-title { width: 100% !important; padding: 0 16px; } .ad-title h1 { font-size: 22px !important; } .ad-title span { font-size: 12px !important; } .ad-title p { font-size: 12px !important; line-height: 20px !important; } .ad dl { flex-wrap: wrap; } .ad .ab-text1, .ad .ab-text2 { margin: 16px 0 !important; } .ad .ab-text1 dd, .ad .ab-text2 dd { width: 100% !important; margin: 0 0 24px 0 !important; padding: 16px !important; } .ad .ab-text2 dd img { position: static !important; width: 40% !important; /* 三大统一图标尺寸小一点点 */ max-width: 160px !important; /* 限制最大宽度防止过大 */ margin: 12px auto 0; display: block; } /* advantage 模块圆形数字序号图标（01/02/03）缩小到 48×48 */ .ad .ab-text1 dd span, .main .ad .ab-text1 dd span { width: 48px !important; height: 48px !important; line-height: 42px !important; font-size: 14px !important; margin-top: -24px !important; margin-left: -24px !important; border-width: 2px !important; } .support { padding: 40px 16px !important; margin-top: 40px !important; } /* 十大支持位图在小屏无法保持绝对定位：缩放为块状列表 */ .su-main { width: 100% !important; margin-top: 20px !important; position: relative !important; } .su-main > img { display: none; } .su-main dl { position: static !important; width: 100%; } .su-main dl dd { position: static !important; width: 100% !important; background: rgba(255, 255, 255, 0.08); margin: 0 0 8px 0 !important; padding: 10px 12px; font-size: 14px !important; border-radius: 4px; color: #fff; box-sizing: border-box; } .service { padding: 40px 0 !important; } .service h2 { font-size: 18px !important; padding: 0 16px; } .service dl { margin-top: 16px !important; } .service dl dd { width: 100% !important; margin: 0 0 16px 0 !important; height: auto !important; /* padding-left 60px 给左侧小图标让出空间，图标保持合适大小不喧宾夺主 */ padding: 16px 16px 16px 60px !important; } .service dl dd > div { margin-top: 0 !important; transform: none !important; } /* 移动端 service 图标：固定 64×64，向左偏移 20 使用更高特异性的选择器（带 .main 前缀），确保压过通用 img.img-responsive */ .main .service dl dd > img, .main .service dl dd img, .main .service dl dd > img.img-responsive, .main .service dl dd img.img-responsive { width: 64px !important; max-width: 64px !important; min-width: 64px !important; height: 64px !important; left: 0 !important; /* -4px + 4px = 0，整体向右移 4 */ top: 50% !important; transform: translateY(-50%) !important; position: absolute !important; float: none !important; margin: 0 !important; padding: 0 !important; display: block !important; } .condition { padding: 40px 0 !important; } .condition dl dd, .process dl dd { width: 100% !important; margin: 0 0 12px 0 !important; } .process { padding: 40px 0 !important; } /* 21.html condition 模块：图标缩小并居中，下方文字水平居中 */ .condition dl dd, .main .condition dl dd { width: 100% !important; margin: 0 0 16px 0 !important; padding: 12px 8px !important; text-align: center !important; } .condition dl dd img, .main .condition dl dd img { width: 80px !important; max-width: 80px !important; height: auto !important; display: block !important; margin: 0 auto 8px !important; float: none !important; } .condition dl dd p, .main .condition dl dd p { text-align: center !important; margin: 8px 0 0 !important; font-size: 13px !important; line-height: 22px !important; float: none !important; width: 100% !important; } /* 申请加盟表单 */ .ask { padding: 40px 0 !important; } .ask .center-box { padding: 0 16px !important; } .ask form { width: 100% !important; float: none !important; } .ask form label { font-size: 18px !important; } .ask form input, .ask form textarea, .ask form select, .ask form button { width: 100% !important; margin: 8px 0 !important; font-size: 14px !important; } .ask form select { width: 48% !important; } .ask .ask-text { width: 100% !important; float: none !important; padding-top: 24px !important; } .ask-icon { display: none !important; } .ask-top p { font-size: 16px !important; } .ask-text h1 { font-size: 22px !important; padding: 10px !important; } .ask-call div span { font-size: 14px !important; } .ask-call div h2 { font-size: 24px !important; line-height: 30px !important; } .ask-call img { max-width: 60px !important; } } /* ---------- 6. 小屏微调 (<= 480px) ---------- */ @media (max-width: 480px) { .title h1 { font-size: 22px !important; } .pro-icon dd { width: 22% !important; } .new-main li { width: 100% !important; } .main .column li { width: 100% !important; } .main .column li:nth-of-type(even) { margin-left: 0 !important; } .service dl dd { padding-left: 70px !important; } }