/* ================================================ 产品列表页（products.html）移动端响应式样式 - 适配内容：顶部 Banner、系列 Tabs（横向滚动）、 系列描述条、产品卡片网格（3 列改 1 列）、分页（预留样式） - 顶部导航 header 与页脚 footer 为公共模块， 已由 css/responsive/common-responsive.css 处理，本文件不重复编写 断点：仅 @media only screen and (max-width: 767px)，全站唯一 引入位置：由主任务在 products.html 中引入 ================================================ */ @media only screen and (max-width: 767px) { /* ---------- 顶部导航汉堡按钮对齐修复 ---------- 公共 header.html 的 DOM 顺序为 logo → nav → 汉堡 → 搜索表单， flex space-between 下汉堡不会自动靠右，而是悬在中间偏左； 首页（index.css）给汉堡设置了 margin-left:auto 使其靠右。 此处复刻首页写法：margin-left:auto 把汉堡推到最右， 右侧间距与首页完全一致。 */ header .nav-toggle, .header .nav-toggle { margin-left: auto !important; } /* 强制导航容器 flex 两端对齐（覆盖各内页自身 header 布局差异） */ header, .header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0 16px !important; box-sizing: border-box; } /* 清除 Logo 区多余左内边距，保证左右视觉对齐 */ header .logo-area, .header .logo-area { padding-left: 0 !important; } /* ---------- 顶部 Banner：内联 vw 定宽/定高改 100%+auto，防止横向溢出 ---------- */ .page-products .top-banner-wrapper { width: 100% !important; } .page-products .top-banner-wrapper img { width: 100% !important; height: auto !important; display: block !important; } /* ---------- 内容区：左右留白由 8.3vw 改为固定 16px，上下间距缩小 ---------- */ .page-products .products-area { padding: 28px 16px 32px !important; } /* ---------- 系列 Tabs：改为横向滚动容器（保持可滑动），触控高度 ≥44px ---------- */ .page-products .series-tabs { justify-content: flex-start; gap: 12px; margin-bottom: 12px; padding-bottom: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; /* Firefox 隐藏滚动条 */ } .page-products .series-tabs::-webkit-scrollbar { display: none; /* Webkit 隐藏滚动条 */ } .page-products .series-tab-item { width: auto !important; height: auto !important; min-height: 44px; line-height: 44px; font-size: 15px; padding: 0 14px; flex-shrink: 0; white-space: nowrap; text-align: center; } .page-products .series-tab-item.active::after { bottom: 4px; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; } /* ---------- 系列描述条：定高改自适应，字号改固定 px ---------- */ .page-products .series-desc { height: auto !important; min-height: 40px; padding: 8px 12px; font-size: 13px; line-height: 1.6; } /* ---------- 滑动面板：宽度适配视口，防止 flex 压缩影响 JS 位移计算 ---------- */ .page-products .slide-panel { width: 100%; flex-shrink: 0; padding: 16px 0 10px; } /* ---------- 产品网格：3 列改单列，间距缩小 ---------- */ .page-products .new-product-grid { grid-template-columns: 1fr !important; gap: 16px; } /* ---------- 产品卡片：圆角缩小，高度自适应 ---------- */ .product-card-old { min-height: 0; border-radius: 18px; } .product-img-old { height: auto !important; max-width: 100% !important; border-radius: 18px 18px 0 0; } .product-title-old { padding: 12px 14px 14px !important; font-size: 16px; } .hover-content { padding: 16px; font-size: 13px; } /* 悬浮详情按钮：触控目标 ≥44px */ .hover-btn { min-height: 44px; padding: 10px 24px; font-size: 14px; } /* ---------- 分页（预留样式）：触控目标 ≥44px，允许换行防溢出 ---------- */ .pagination-container { margin-top: 24px; gap: 8px; font-size: 15px; flex-wrap: wrap; padding: 0 12px; } .page-box, .page-select-box, .page-input-box, .page-confirm-box { height: 44px; } .page-box { width: 44px; font-size: 16px; } .page-select-box { padding: 0 14px; font-size: 15px; } .page-input-box { width: 52px; font-size: 16px; } .page-confirm-box { padding: 0 16px; font-size: 15px; } .page-label, .pagination-info { font-size: 14px; } } /* ================================================ 产品中心移动端二轮适配（追加层，置于文件末尾保证覆盖优先级） - 顶部系列 Tab：横向可滚动标签栏 + 品牌青绿选中高亮（文字+短下划线） - 彻底移除 series-desc 空白占位条 - 产品网格：统一 2 列等宽，卡片等高规整，左右 16px 安全边距 - 产品图片原始比例自适应（aspect-ratio 正方形容器 + contain，不裁切） - 产品名称底部完整居中展示，不省略不裁切 - 移除 hover 悬浮详情层，卡片底部常驻「查看详情」按钮（由 js/responsive/products.js 动态注入 .mobile-detail-btn） - 页面背景图 cover 防拉伸；无横向溢出、无错位 ================================================ */ @media only screen and (max-width: 767px) { /* ---------- 1. 顶部系列 Tab：横向可滚动标签栏 ---------- */ .page-products .series-tabs { justify-content: flex-start !important; gap: 8px; margin-bottom: 14px; padding: 0 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; } .page-products .series-tabs::-webkit-scrollbar { display: none; } .page-products .series-tab-item { flex: 0 0 auto; min-height: 48px; line-height: 48px; padding: 0 14px 12px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #333; text-align: center; } /* 选中项：品牌青绿色文字 + 底部短下划线高亮 */ .page-products .series-tab-item.active { color: #00A9A5 !important; } .page-products .series-tab-item.active::after { bottom: 6px; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 2px; background-color: #00A9A5 !important; } /* ---------- 2. 彻底隐藏 series-desc 空白占位条/分隔框 ---------- */ .page-products .series-desc { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* ---------- 3. 产品网格：统一 2 列等宽，间距均匀，16px 安全边距 ---------- */ .page-products .new-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; align-items: stretch; } /* ---------- 4. 产品卡片：等高、圆角收敛 ---------- */ .product-card-old { min-height: 0 !important; height: auto !important; border-radius: 14px; overflow: hidden; } /* ---------- 5. 产品图片：正方形容器内原始比例自适应，不变形不裁切 ---------- */ .product-img-old { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: contain !important; border-radius: 14px 14px 0 0; background: #F5F7F6; } /* ---------- 6. 产品名称：卡片底部完整居中展示，不省略不裁切 ---------- */ .product-title-old { display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; text-align: center !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600; line-height: 1.4; color: #2C2C2C; padding: 10px 8px 6px !important; background: #FFFFFF; flex-grow: 0; } /* ---------- 7. 彻底移除 PC 端 hover 悬浮详情层（触控无残留） ---------- */ .hover-overlay { display: none !important; } /* ---------- 8. 卡片底部常驻「查看详情」按钮（JS 注入，触控 ≥44px） ---------- */ .product-card-old .mobile-detail-btn { order: 3; display: block; width: calc(100% - 20px); min-height: 44px; margin: 4px 10px 12px; padding: 0 10px; border: none; border-radius: 24px; background: #00A9A5; color: #FFFFFF; font-size: 14px; font-weight: 600; font-family: inherit; letter-spacing: 2px; line-height: 44px; text-align: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 169, 165, 0.28); -webkit-tap-highlight-color: rgba(0, 169, 165, 0.15); } .product-card-old .mobile-detail-btn:active { background: #007F7A; } /* ---------- 9. 背景图 cover 防拉伸变形 ---------- */ .page-products .content-wrapper { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* ---------- 10. 全局防横向溢出兜底 ---------- */ .page-products, .page-products .main-container, .page-products .content-wrapper, .page-products .products-area, .page-products #series-view, .page-products .slider-viewport, .page-products .grid-viewport { max-width: 100% !important; overflow-x: hidden; } /* ---------- 11. 说明书入口（移动端）：回归面板顶部居中，轻量图标+文字样式 ---------- */ /* 撤销 PC 端「viewport 负margin上移 + track 等量padding补偿」，避免影响移动端滑动布局 */ .page-products .slider-viewport { margin-top: 0 !important; } .page-products .slider-track { padding-top: 0 !important; } .page-products .slide-panel .manual-entry { position: static; transform: none; z-index: auto; display: flex; justify-content: center; margin: 0 0 14px; } .page-products .slide-panel .manual-btn { min-height: 44px; padding: 0 18px; border-radius: 22px; font-size: 15px; background: rgba(255, 255, 255, 0.92); } .page-products .slide-panel .manual-btn-icon { width: 17px; height: 17px; } /* ---------- 12. Tab 内边距缩小（相对PC端 26px），横向滚动更紧凑 ---------- 说明书入口已在上方回归面板顶部居中（position:static + flex 居中）， 触控高度 ≥44px、hover 填充主题色沿用 PC 端样式，两端一致。 */ .page-products .series-tab-item { padding: 0 10px 12px; } }