*,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --primary:#00e5ff;--primary-glow:#00b8d4;--accent:#5c6bc0; --bg-main:linear-gradient(135deg,#1a1f2e 0%,#252d3d 50%,#1e2433 100%); --bg-card:rgba(255,255,255,0.06);--bg-glass:rgba(255,255,255,0.08); --text:#f5f7fa;--text-muted:#a0aec0;--text-light:#cbd5e0; --border:rgba(255,255,255,0.12);--shadow:0 8px 32px rgba(0,0,0,0.3) } html{scroll-behavior:smooth} /* 中文正文基准字号。全站 363 处字号声明都是 rem，所以改这一个值即可整体等比放大。 16px 时最小的标签只有 11.5px，中文读起来偏"细小、说明书感"； 提到 17px 后最小字号约 13.6px、正文约 15.3px，更接近中文网页的舒适区间。 */ html{font-size:17px} body{font-family:'Inter','PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg-main);color:var(--text);overflow-x:hidden;line-height:1.6} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} button{border:none;cursor:pointer;font-family:inherit} /* ===== 导航 ===== */ nav{position:fixed;top:0;width:100%;padding:1.1rem 5%;display:flex;justify-content:space-between;align-items:center;z-index:1000; background:rgba(26,31,46,0.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:all .3s} nav.scrolled{padding:.75rem 5%;background:rgba(26,31,46,0.95);box-shadow:var(--shadow)} .logo{font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-0.5px} .logo span{color:var(--primary)} .nav-links{display:flex;gap:2.2rem;list-style:none} .nav-links a{color:var(--text-muted);font-size:.88rem;font-weight:500;transition:color .3s;position:relative} .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary);transition:width .3s} .nav-links a:hover{color:#fff} .nav-links a:hover::after{width:100%} .nav-cta{background:linear-gradient(135deg,var(--primary),var(--primary-glow));color:#1a1f2e!important;padding:.55rem 1.4rem;border-radius:8px;font-weight:700;transition:all .3s} .nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.4)} .nav-cta::after{display:none} .mobile-menu{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer} .nav-links.mobile-open{display:flex !important;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(26,31,46,0.98);padding:1rem 5%;border-bottom:1px solid var(--border);gap:1rem} /* ===== Hero ===== */ /* 注意：100dvh 让移动端浏览器地址栏伸缩时不会跳动；老浏览器回退 100vh。 顶部 padding 预留固定导航高度，避免标题被导航遮住。 */ #hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:7rem 5% 4rem;position:relative;overflow:hidden} /* 光晕改为静态、更收敛：原来会在 4 秒内持续脉冲缩放，视觉上一直在动、 抢正文注意力；现在只做一层柔和的静态打光，留白与层次靠间距而不是靠"动"。 */ .hero-glow{position:absolute;width:1100px;height:1100px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,255,.07) 0%,rgba(92,107,192,.05) 42%,transparent 70%); top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(60px);pointer-events:none} .hero-content{position:relative;z-index:1;width:100%;max-width:1320px} /* 首屏改为"左文右图"两栏：图片给页面压场，文字左对齐更好读（原来居中没有重心）。 1fr 1.13fr：图片栏比原来的 1.02fr 明显更宽（配图渲染更大）， 同时把文字栏收窄，让两侧高度接近。 align-items:stretch（原来是 center）是关键：两栏共享同一行高， 右侧图片据此撑高，图片底边因此能与左侧主按钮底边自动对齐， 而不是依赖某个"魔法裁切比例"（那种做法只在单一视口宽度成立）。 */ .hero-grid{display:grid;grid-template-columns:1fr 1.13fr;gap:4rem;align-items:stretch} /* 关键修正：标题行用了 white-space:nowrap，而 grid 子项默认 min-width:auto 会按 min-content 撑开文字栏、反过来挤小图片栏（实测把图挤到 505px）。 置 0 后栏宽完全由 1fr/1.13fr 决定，图片尺寸不再被标题反噬。 */ .hero-grid>.hero-text,.hero-grid>.hero-figure{min-width:0} .hero-text{text-align:left} .hero-badge{display:inline-block;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.22);padding:.5rem 1.3rem;border-radius:50px;font-size:.82rem;color:var(--primary);margin-bottom:.95rem;font-weight:600;animation:fadeInUp .8s ease} /* 标题不再做青色发光。发光的文字在深底上会"糊"，反而降低清晰度与分量感； 大字号 + 纯白 + 充足行距本身就有气场。 字号：宽屏不再无限放大——原来 3.4vw 会让字号随视口变大，但 .hero-content 封顶 1320px 不再变宽，结果屏幕越宽越容易折行（逻辑正好相反）。 clamp 上限 2.35rem(≈40px) 是实测值：中文第一行（1280 栏宽 508.9px） 在 42.1px 才会折行，2.35rem 留出安全余量。 */ .hero-title{font-size:clamp(2.1rem,2.55vw,2.35rem);font-weight:700;line-height:1.24;letter-spacing:-0.015em;margin-bottom:.85rem; color:#fff;animation:fadeInUp .8s ease .1s both} /* 每行独立成块并锁死不折行：从结构上杜绝"整套/方案"被切开这类断字。 注意：nowrap 会让该行的 min-content = 整行宽，必须配合上面的 min-width:0， 否则会把文字栏撑宽、把图片栏挤小。字号按栏宽实测标定（见上方注释）。 */ .hero-title .hl{display:block;white-space:nowrap} /* 分隔点两侧收紧：文案里是「 · 」前后各一个空格，一行白占约 35px。 收窄后同样文案能容纳更大字号，且视觉更紧凑。 */ .hero-title .hl{word-spacing:-0.18em} /* 英文标题字宽约为中文两倍，单独收小，否则必定折行。 上限 1.5rem(25.5px) 是实测极限：英文第一行在 1440 栏宽 576.5px 下 1.5rem 用 558.5px、1280 栏宽 508.9px 下用 500.4px，都留有余量； 而 1.6rem 在 1440 会超到 595.8px 折行。 */ html[lang="en"] .hero-title{font-size:clamp(1.25rem,1.75vw,1.5rem);letter-spacing:-0.01em} /* 窄屏（单栏堆叠）允许行内折行，否则会横向溢出 */ @media (max-width:1100px){ .hero-title .hl{display:inline;white-space:normal} } /* 标题里的数字：等宽数字，避免字宽跳动、与中文挤在一起 */ .hero-title .num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:0} /* 副标题放宽行距，中文小段落更透气得体；左对齐不设 max-width 居中。 下边距收窄（2.4rem→1.05rem）是为了把文字栏总高度压到与右侧 3:2 配图接近。 */ .hero-subtitle{font-size:1.05rem;color:var(--text-light);margin-bottom:1.05rem;max-width:620px;line-height:1.85;letter-spacing:.01em;animation:fadeInUp .8s ease .2s both} .hero-stats{display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:1.15rem;animation:fadeInUp .8s ease .3s both} .stat-item{text-align:left} .stat-number{font-size:2.3rem;font-weight:700;color:var(--primary);display:inline-block;line-height:1;font-variant-numeric:tabular-nums} .stat-suffix{font-size:1.5rem;font-weight:700;color:var(--primary);margin-left:2px} .stat-label{font-size:.82rem;color:var(--text-muted);margin-top:.3rem;display:block} .hero-buttons{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeInUp .8s ease .4s both} /* 首屏配图：真实前台与品牌形象墙，细边框 + 柔和投影，不用发光。 高度：figure 拉满整行（height:100%），picture 用 flex:1 吃掉除图注外的空间， img 再用 height:100% + object-fit:cover 填满，从而让图片底边与左侧 主按钮底边对齐。cover 会有克制的裁切（源图 2832×1852，比例 1.529:1， 与渲染框比例接近，实测裁切量很小），但不会拉伸变形。 */ .hero-figure{margin:0;position:relative;height:100%;animation:fadeInUp .9s ease .3s both} .hero-figure picture{display:block;height:100%;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.5)} .hero-figure img{width:100%;height:100%;display:block;object-fit:cover;object-position:center} /* 图注：桌面端（两栏）隐藏。 原因：图注如果占据文档流高度，图片底边就会比左侧主按钮底边高出一个图注的高度； 要让"图片底边 == 主按钮底边"精确成立，两栏布局下图注必须让位。 图注在 ≤1100px 的堆叠布局里恢复显示（那时高度对齐不再适用）。 */ .hero-figure figcaption{display:none} @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} /* ===== 首屏按钮：三枚平分一行 ===== 实测三枚按钮原本合计 657px（中文）/ 794px（英文），而文字栏只有 588px，排不下一行。 改为 flex 平分：flex:1 1 0 + min-width:0，按钮不再按内容撑宽，而是摊满整栏； 文字在按钮内部自然折行（.btn 原本 flex + align-items:center，折行后仍居中）。 字号与内边距同步收紧，才能三枚并排且不显臃肿。 */ .hero-buttons .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center; padding:.9rem .8rem;font-size:.9rem;gap:.45rem} /* 英文按钮文案更长，实测 0.9rem 会各折 2 行；实测 0.85rem 可保持单行 */ html[lang="en"] .hero-buttons .btn{font-size:.85rem} /* ===== 观看宣传片按钮 + 播放三角 ===== */ .btn-video{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.22);color:var(--text-light)} .btn-video:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff} .btn-play{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--primary);display:inline-block;flex:0 0 auto} .btn-video:hover .btn-play{border-left-color:#fff} /* ===== 宣传片弹窗 ===== */ .vmodal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:4vmin} .vmodal[hidden]{display:none} .vmodal-backdrop{position:absolute;inset:0;background:rgba(8,11,18,.9);backdrop-filter:blur(6px)} .vmodal-box{position:relative;width:min(1200px,94vw);max-height:92vh;background:#0d1117; border:1px solid rgba(255,255,255,.16);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7)} .vmodal-video{display:block;width:100%;height:auto;max-height:92vh;background:#000} .vmodal-close{position:absolute;top:.55rem;right:.55rem;z-index:2;width:38px;height:38px; border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.1rem; cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s} .vmodal-close:hover{background:rgba(255,255,255,.3)} @media (max-width:480px){ .vmodal{padding:0} .vmodal-box{width:100vw;max-height:100vh;border-radius:0;border:none} .vmodal-video{max-height:100vh} } /* ===== 按钮 ===== */ /* 按钮不再外发光：改用中性投影表达层次。青色发光是"科技 Demo"的典型信号， 收敛后更接近成熟品牌的克制感，同时保证对比度不受影响。 */ .btn{display:inline-flex;align-items:center;gap:.5rem;padding:1.05rem 2.3rem;border-radius:10px;font-weight:600;text-decoration:none;transition:all .3s;font-size:.95rem} .btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-glow));color:#1a1f2e;box-shadow:0 4px 14px rgba(0,0,0,.35);font-weight:700} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.45)} .btn-outline{background:rgba(255,255,255,.05);border:2px solid var(--border);color:var(--text-light)} .btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff} /* ===== 分类导航 ===== */ #categories{padding:6rem 5%} .cat-header{text-align:center;margin-bottom:3.5rem} .cat-label{color:var(--primary);font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:.8rem} .cat-title{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;margin-bottom:.8rem} .cat-desc{color:var(--text-muted);max-width:600px;margin:0 auto} .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1100px;margin:0 auto} .cat-card{background:var(--bg-glass);border:1px solid var(--border);border-radius:16px;padding:2.5rem 2rem;text-align:center; transition:all .4s;backdrop-filter:blur(8px);cursor:pointer} /* 悬停态收敛：原来每张卡片都会亮起青色描边并上浮 8px（"发光+弹跳"）。 现在改成更克制的白描边 + 轻微上浮，靠层次与留白而不是靠发光来体现精致度。 */ .cat-card:hover{border-color:rgba(255,255,255,.26);transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.32)} .cat-icon{font-size:3rem;margin-bottom:1.2rem;display:block} .cat-name{font-size:1.2rem;font-weight:600;margin-bottom:.6rem;color:#fff} .cat-desc-text{color:var(--text-muted);font-size:.88rem} .cat-count{color:var(--primary);font-size:.82rem;margin-top:.8rem;display:block;font-weight:600} /* ===== 产品展示 ===== */ #products{padding:6rem 5%;background:linear-gradient(180deg,rgba(37,45,61,.3) 0%,rgba(26,31,46,.5) 50%,rgba(37,45,61,.3) 100%)} .prod-header{text-align:center;margin-bottom:3.5rem} .prod-label{color:var(--primary);font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:.8rem} .prod-title{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;margin-bottom:.8rem} .prod-desc{color:var(--text-muted);max-width:600px;margin:0 auto} .prod-tabs{display:flex;justify-content:center;gap:.8rem;margin-bottom:3rem;flex-wrap:wrap} .prod-tab{padding:.6rem 1.5rem;border-radius:8px;font-size:.88rem;font-weight:500;background:var(--bg-glass);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:all .3s} .prod-tab.active,.prod-tab:hover{background:rgba(0,229,255,.15);border-color:var(--primary);color:var(--primary)} /* 网格放宽：340px → 400px，1400px 容器下一行 3 列（原 4 列）。图片更大、更少"货架感"。 */ .prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2.2rem;max-width:1400px;margin:0 auto} .prod-card{background:var(--bg-glass);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .4s;backdrop-filter:blur(8px)} .prod-card:hover{border-color:rgba(255,255,255,.26);transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.3)} .prod-img{aspect-ratio:1/1;background:linear-gradient(135deg,#2a3347 0%,#1e2636 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} /* 关键： 才是 .prod-img 的 flex 子项（img 不是）。 默认没有样式，会按图片"固有尺寸"收缩，且 flex-grow:0 永不放大—— 于是 .prod-img img{width:100%} 里的 100% 失去参照，图片退化成原始像素尺寸： 容器比图大时图变小、四周留白；容器比图小时靠 flex-shrink 撑满（碰巧看着正常）。 把 picture 拉满容器，img 的 100% 才有意义。 */ .prod-img>picture{display:block;width:100%;height:100%} .prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))} .prod-card:hover .prod-img img{transform:scale(1.08)} .prod-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(transparent,rgba(30,36,51,.95))} /* 产品详情页「相关产品推荐」复用同一套容器。 原来那里用行内样式（width:100%+aspect-ratio:1/1 写在 上）， 但卡片本身没有高度约束，而 带 width/height="800" 属性会让浏览器 预留 800px 高 → 图片被拉成 221×800 的细长条（实测比例 0.276，原图 1.0）。 换成 .prod-img 后由容器定死 1:1，图片不再变形。 */ .prod-img--related{margin-bottom:1rem} .prod-info{padding:1.5rem} .prod-name{font-size:1.15rem;font-weight:600;margin-bottom:.5rem;color:#fff} .prod-desc{color:var(--text-muted);font-size:.88rem;margin-bottom:1rem;line-height:1.5} .prod-tags{display:flex;flex-wrap:wrap;gap:.4rem} .prod-tag{background:rgba(0,229,255,.1);color:var(--primary);padding:.3rem .8rem;border-radius:5px;font-size:.8rem;font-weight:600} .prod-link{display:inline-block;margin-top:1rem;color:var(--primary);font-size:.85rem;font-weight:600;transition:all .3s} .prod-link:hover{color:#fff;transform:translateX(4px)} /* ===== 公司优势 ===== */ #advantages{padding:6rem 5%} .adv-header{text-align:center;margin-bottom:3.5rem} .adv-label{color:var(--primary);font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:.8rem} .adv-title{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;margin-bottom:.8rem} .adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:1200px;margin:0 auto} .adv-card{padding:2.2rem;background:var(--bg-glass);border:1px solid var(--border);border-radius:12px;transition:all .3s;backdrop-filter:blur(8px)} .adv-card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.25)} .adv-icon{width:50px;height:50px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.3rem;box-shadow:0 3px 10px rgba(0,0,0,.3)} .adv-title-text{font-size:1.1rem;font-weight:600;margin-bottom:.6rem;color:#fff} .adv-text{color:var(--text-muted);font-size:.88rem} /* ===== 联系 ===== */ #contact{padding:6rem 5%} .contact-container{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;max-width:1100px;margin:0 auto;align-items:start} .contact-info h3{font-size:1.8rem;font-weight:700;margin-bottom:1rem;color:#fff} .contact-info p{color:var(--text-muted);margin-bottom:2rem} .contact-items{display:flex;flex-direction:column;gap:1rem} .contact-item{display:flex;align-items:flex-start;gap:1rem;color:var(--text-muted);font-size:.95rem} .contact-item-icon{width:40px;height:40px;background:rgba(0,229,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;font-size:1rem} .contact-form{background:var(--bg-glass);border:1px solid var(--border);border-radius:16px;padding:2.5rem;backdrop-filter:blur(12px);box-shadow:var(--shadow)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-group{margin-bottom:1.3rem} .form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.5rem;color:var(--text-muted)} .form-group input,.form-group select,.form-group textarea{width:100%;padding:.9rem 1rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.95rem;transition:all .3s;font-family:inherit} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,229,255,.1)} .form-group select{background:#1a1f2e;color:#fff;cursor:pointer} .form-group select option{background:#1a1f2e;color:#fff;padding:.5rem} .form-group select option:hover,.form-group select option:focus{background:var(--primary);color:#1a1f2e} .form-group input::placeholder,.form-group textarea::placeholder{color:#8b9bb0} /* ===== 页脚 ===== */ footer{padding:2.5rem 5%;border-top:1px solid var(--border);text-align:center;background:rgba(26,31,46,.6)} footer p{color:var(--text-muted);font-size:.85rem} footer a{color:var(--text-muted);transition:color .3s} footer a:hover{color:var(--primary)} /* ===== 滚动动画 ===== */ .reveal{opacity:0;transform:translateY(30px);transition:all .6s ease} .reveal.active{opacity:1;transform:translateY(0)} /* ===== 响应式 ===== */ /* ===== Responsive (Desktop / Tablet / Mobile) ===== */ /* 首屏两栏在 1100px 以下就改为上下堆叠：再窄下去文字栏会挤成窄条， 图片也被压小，堆叠后图片在上、文字在下更好读。 */ @media (max-width: 1100px) { .hero-grid { grid-template-columns: 1fr; gap: 2.6rem; } /* 移动端把图片提到文字前面：先看到画面，再读文案 */ .hero-figure { order: -1; } /* 单栏堆叠后不再有"两栏等高"的需求：图片回到自适应高度， 图注也恢复显示（桌面端为了精确对齐按钮底边而隐藏）。 */ .hero-figure { height: auto; } .hero-figure picture { height: auto; } .hero-figure img { height: auto; } .hero-figure figcaption { display: block; margin-top: .6rem; font-size: .78rem; color: var(--text-muted); } .hero-text { text-align: center; } .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-stats { justify-content: center; } .stat-item { text-align: center; } .hero-buttons { justify-content: center; } .hero-figure figcaption { text-align: center; } } @media (max-width: 1024px) { nav { padding: .9rem 3%; } /* 导航 8 项在中等屏会挤，收紧间距避免换行 */ .nav-links { gap: 1.2rem; } .nav-links a { font-size: .82rem; } /* 注意：此宽度下首屏已是单栏（见 1100px 断点），字号必须比桌面小， 否则会横向溢出。这里给 2.25rem。 英文第2行较长，单独压到 1.45rem，实测 900~1024px 才不折行。 */ .hero-title { font-size: 2.25rem; } html[lang="en"] .hero-title { font-size: 1.45rem; } .hero-subtitle { font-size: 1rem; } .cat-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .hero-stats { gap: 1.8rem 2.4rem; } } @media (max-width: 768px) { .nav-links { display: none !important; } .mobile-menu { display: block !important; } .hero-title { font-size: 1.85rem; color: #fff !important; } html[lang="en"] .hero-title { font-size: 1.5rem; } /* 手机上标题允许自然折行，避免不可折行的行超出屏幕宽度 */ .hero-title .hl { display: inline; white-space: normal; } /* 转成行内后需要手动补一个换行，否则两行会连成一句 */ .hero-title .hl + .hl::before { content: "\A"; white-space: pre; } .hero-subtitle { text-align: center; font-size: 1rem; } /* .hero-stats 是 flex 容器（不是 grid），这里只调 flex 属性 */ .hero-stats { display: flex; flex-direction: row; justify-content: center; gap: 1.2rem 2rem; flex-wrap: wrap; } .stat-item { text-align: center; min-width: 5.5rem; } .stat-number { font-size: 2.2rem; } .stat-suffix { font-size: 1.4rem; } .stat-number, .stat-label { text-align: center; } .hero-buttons { justify-content: center; flex-wrap: wrap; } /* 移动端按钮更容易点：占满一行、加大触控高度。 注意：桌面端的 .hero-buttons .btn{flex:1 1 0} 会让 flex-basis 压过 width， 必须一起改回 flex:0 0 auto，否则三个按钮会被挤在同一行、每个仅约 103px。 */ .hero-buttons .btn { flex: 0 0 auto; width: 100%; justify-content: center; padding: .95rem 1.5rem; font-size: .95rem; } .cat-grid { grid-template-columns: 1fr; } .prod-grid { grid-template-columns: 1fr; } .contact-container { grid-template-columns: 1fr !important; } .form-row { grid-template-columns: 1fr !important; } .section-title { font-size: 1.7rem; } /* 产品卡片内边距收紧，让图片更大 */ .prod-card .prod-info { padding: 1.15rem; } #categories, #products, #advantages, #contact, #articles { padding: 4rem 5%; } nav { background: rgba(26,31,46,0.95) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } @media (max-width: 480px) { nav { padding: .75rem 4%; } .logo { font-size: 1.2rem; } #hero { padding: 5.5rem 5% 2.5rem; } /* 1.5rem（25.5px）是实测下限：360~480px 时单栏宽 324~432px， 中文首行「液晶屏 · 显示模组 · 整套方案」在 1.65rem 会超出栏宽被裁切， 1.5rem 时只占 343.8px，安全。 */ .hero-title { font-size: 1.5rem; } html[lang="en"] .hero-title { font-size: 1.45rem; } .hero-subtitle { font-size: .9rem; margin-bottom: 2rem; } .hero-figure figcaption { font-size: .75rem; text-align: center; } /* flex 容器用 gap 控制间距；上一版误写成 grid-template-columns（对 flex 无效） */ .hero-stats { gap: .8rem 1.6rem; margin-bottom: 2rem; } .stat-number { font-size: 1.9rem; } .cat-card { padding: 1.2rem; } .prod-card .prod-info { padding: 1rem; } .contact-form { padding: 1.5rem; } .contact-qr-box { padding: 2rem 1.25rem; min-height: 0; } /* 选择器写错了（页脚是