/* ============================================================ 大连无界品牌样式表 brand.css 提炼自对标官网 huanyuanshui.cn 的视觉风格 用法：放在 Flask 项目的 static/ 文件夹里，每个页面 引用： ============================================================ */ /* ---------- 设计变量（要换配色只改这里） ---------- */ :root { --brand-blue: #0b3da0; /* 品牌深蓝：logo、重点标题 */ --brand-teal: #1f9cc2; /* 强调青蓝：按钮、导航激活、下划线 */ --teal-dark: #1888aa; /* 按钮 hover */ --ink: #333333; /* 主文字 */ --ink-soft: #666666; /* 次要文字 */ --ink-faint: #999999; /* 英文副标题、说明 */ --line: #e6e6e6; /* 分隔线 */ --bg: #ffffff; /* 白底 */ --bg-gray: #f0f0f0; /* 浅灰分区底 */ --footer-bg: #2b2b2b; /* 页脚深炭灰 */ --footer-text: #bfbfbf; /* 页脚文字 */ --radius: 6px; --maxw: 1200px; /* 内容最大宽度 */ } /* ---------- 全局基础 ---------- */ * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink); line-height: 1.7; background: var(--bg); } a { color: var(--brand-teal); text-decoration: none; } /* 首页整体衬一层浅蓝，白色卡片更突出 */ body.home-page { background: #eaf3fc; } /* ===== 留言后台表格 ===== */ .msg-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);} .msg-table th,.msg-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top;} .msg-table th{background:var(--brand-blue);color:#fff;font-weight:600;font-size:13px;} .msg-table tr:last-child td{border-bottom:none;} .msg-table tr:nth-child(even) td{background:#f7faff;} .msg-table .nowrap{white-space:nowrap;color:#666;} a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* 居中容器：给内容限定最大宽度并左右留白 */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ---------- 顶部导航 ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: var(--brand-blue); } .logo-img { height: 40px; width: auto; flex: none; } .site-footer .logo-img { height: 44px; } .nav a { color: var(--ink); margin-left: 28px; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; } .nav a:hover { text-decoration: none; color: var(--brand-teal); } .nav a.active { /* 当前页：加粗 + 青蓝下划线 */ font-weight: 700; border-bottom-color: var(--brand-teal); } /* ---------- 通栏大图 Hero ---------- */ .hero { min-height: 420px; background-size: cover; background-position: center; display: flex; align-items: center; color: #fff; } .hero .container { width: 100%; } .hero-title { font-size: 44px; font-weight: 300; /* 细字重，高级感 */ margin: 0 0 12px; letter-spacing: 2px; } .hero-sub { font-size: 18px; opacity: .9; font-weight: 300; } /* 浅色背景图上的文字改成深色：给 .hero 加 class="hero light" */ .hero.light { color: var(--ink); } /* ---------- 内容分区 ---------- */ .section { padding: 64px 0; } .section.gray { background: var(--bg-gray); } /* 居中的大标题 + 英文副标题 + 细分隔线（官网常见样式） */ .section-heading { text-align: center; margin-bottom: 40px; } .section-heading h2 { font-size: 32px; font-weight: 300; color: var(--ink); margin: 0 0 6px; letter-spacing: 1px; } .section-heading .en { color: var(--ink-faint); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; } .section-heading::after { /* 标题下的短分隔线 */ content: ""; display: block; width: 60px; height: 2px; margin: 18px auto 0; background: var(--brand-teal); } /* ---------- 筛选按钮（青蓝胶囊，官网导航筛选用） ---------- */ .filter-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; } .tab { padding: 10px 26px; border-radius: var(--radius); background: var(--brand-teal); color: #fff; font-size: 15px; border: none; cursor: pointer; } .tab:hover { background: var(--teal-dark); text-decoration: none; color:#fff; } /* ---------- 卡片网格 ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } .card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: transform .15s, box-shadow .15s; } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.12); } .card img { width: 100%; height: 180px; object-fit: cover; } .card-body { padding: 16px; } .card-body h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); } .card-body p { margin: 0; color: var(--ink-soft); font-size: 14px; } /* ---------- 按钮 ---------- */ .btn { display: inline-block; padding: 12px 30px; border-radius: var(--radius); background: var(--brand-teal); color: #fff; font-size: 15px; } .btn:hover { background: var(--teal-dark); text-decoration: none; color: #fff; } .btn-outline { background: transparent; border: 1px solid var(--ink-soft); color: var(--ink); } .btn-outline:hover { border-color: var(--brand-teal); color: var(--brand-teal); } /* ---------- 深色页脚（五栏） ---------- */ .site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 56px 0 28px; } .footer-grid { display: flex; flex-wrap: wrap; gap: 56px; } .footer-grid > .footer-col:first-child { margin-right: auto; } /* logo 靠左，其余成组靠右 */ .footer-col h4 { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #444; } .footer-col a, .footer-col p { color: var(--footer-text); font-size: 14px; margin: 6px 0; } .footer-col a:hover { color: #fff; } .footer-phone { color: #fff; font-size: 26px; font-weight: 700; margin-top: 10px; letter-spacing: 1px; } .footer-slogan { font-size: 14px; color: var(--footer-text); margin-top: 8px; } .footer-bottom { text-align: center; color: #888; font-size: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid #444; } /* ============================================================ 动效（参考苹果/哈佛官网：克制、高级、不浮夸） 配合 brand.js 使用；纯 CSS + 原生 JS，不依赖任何库 ============================================================ */ /* 全站平滑滚动 */ html { scroll-behavior: smooth; } /* 1) 滚动揭示：元素初始隐藏并下移，进入视口后淡入归位 用法：给元素加 class="reveal"，brand.js 会在它进入屏幕时加上 .in */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } /* 同一组卡片依次错开出现，更有节奏感 */ .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } /* 2) 顶栏随滚动变化：往下滚一点就加阴影（苹果式悬浮感） */ .site-header { transition: box-shadow .3s ease; } .site-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.08); } /* 3) Hero 文字入场动画 */ .hero-title, .hero-sub { animation: heroUp .9s ease both; } .hero-sub { animation-delay: .15s; } @keyframes heroUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* 4) 卡片图片 hover 缓慢放大（图被卡片的 overflow:hidden 裁切，很有质感） */ .card img, .card > div[style*="background"] { transition: transform .6s cubic-bezier(.2,.8,.2,1); } .card:hover img, .card:hover > div[style*="background"] { transform: scale(1.06); } /* 尊重用户的"减少动态效果"系统设置（无障碍） */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-title, .hero-sub { animation: none; } html { scroll-behavior: auto; } } /* ---------- 手机端自适应 ---------- */ @media (max-width: 768px) { .site-header .container { height: auto; flex-direction: column; gap: 8px; padding: 12px 20px; } .nav a { margin: 0 10px; } .hero-title { font-size: 30px; } /* 页脚：手机上竖向堆叠、左对齐、间距收紧 */ .site-footer { padding: 36px 0 22px; } .footer-grid { flex-direction: column; gap: 24px; } .footer-grid > .footer-col:first-child { margin-right: 0; } .footer-col h4 { margin-bottom: 12px; padding-bottom: 8px; } } /* ============================================================ 入口登录页 / 欢迎页 专用 ============================================================ */ .landing{max-width:1200px;margin:36px auto 0;padding:0 20px;} .hero-box{border-radius:24px;padding:120px 64px;color:#fff; /* 极光流动多色层次：蓝为主，右侧透青/紫/粉，左侧偏深保证白字可读 */ background: radial-gradient(55% 70% at 80% 22%, rgba(168,210,255,.90), rgba(168,210,255,0) 60%), radial-gradient(60% 70% at 92% 68%, rgba(206,170,255,.80), rgba(206,170,255,0) 62%), radial-gradient(50% 60% at 70% 96%, rgba(255,176,206,.60), rgba(255,176,206,0) 60%), radial-gradient(55% 65% at 30% 28%, rgba(31,156,194,.55), rgba(31,156,194,0) 62%), linear-gradient(120deg,#0b3da0 0%,#1666b0 58%,#1f9cc2 100%); position:relative;overflow:hidden;} /* ===== 登录页专属页脚：白底蓝字（仅 .login-page 生效，其它页面用最初深色三栏） ===== */ .login-page .site-footer{background:#fff;color:var(--brand-blue);border-top:1px solid var(--line);} .login-page .site-footer .logo{color:var(--brand-blue)!important;} .login-page .site-footer .footer-col h4{color:var(--brand-blue);border-bottom:1px solid var(--line);} .login-page .site-footer .footer-col a,.login-page .site-footer .footer-col p{color:var(--brand-blue);} .login-page .site-footer .footer-col a:hover{color:var(--brand-teal);} .login-page .site-footer .footer-phone{color:var(--brand-blue);} .login-page .site-footer .footer-slogan{color:var(--brand-blue);} .login-page .site-footer .footer-bottom{color:var(--ink-faint);border-top:1px solid var(--line);} .login-page .site-footer{padding:20px 0 16px;} .login-page .site-footer .footer-col h4{margin:0 0 6px;padding-bottom:6px;font-size:14px;} .login-page .site-footer .footer-col a,.login-page .site-footer .footer-col p{margin:3px 0;font-size:13px;} .login-page .site-footer .footer-slogan{margin-top:4px;} .login-page .site-footer .footer-bottom{margin-top:14px;padding-top:10px;} .login-page .site-footer .footer-col .logo{display:none;} .login-page .site-footer .footer-slogan{font-size:40px;font-weight:700;color:var(--brand-blue);margin:0;letter-spacing:1px;line-height:1.3;} .login-page .site-footer .footer-grid .footer-col:nth-child(2){display:none;} /* ===== 50 YEARS GROWTH 横幅式页脚（仅登录页） ===== */ .stats-footer{display:flex;align-items:center;justify-content:flex-end;gap:34px;flex-wrap:wrap;color:var(--brand-blue);} .stats-50{display:flex;align-items:center;gap:8px;} .stats-rule{display:inline-block;width:46px;height:2px;background:var(--brand-blue);margin-right:6px;} .stats-50 .num{font-size:40px;font-weight:800;line-height:.9;letter-spacing:-1px;} .stats-50 .yr{font-size:12px;font-weight:700;line-height:1.05;letter-spacing:1px;} .stats-list{display:flex;gap:26px;font-size:13px;font-weight:700;flex-wrap:wrap;} .stats-list span{display:inline-flex;align-items:center;gap:5px;} .stats-list span svg{width:14px;height:14px;flex:none;} .login-page .site-footer .footer-bottom{text-align:right;} @media(max-width:768px){.stats-footer{gap:18px;justify-content:center;}.stats-50 .num{font-size:30px;}.stats-list{gap:14px;font-size:12px;}.login-page .site-footer .footer-bottom{text-align:center;}} .hero-box h1{font-size:46px;font-weight:300;letter-spacing:2px;margin:0 0 10px;line-height:1.25;} .hero-box .lead{font-size:18px;font-weight:300;opacity:.92;margin-bottom:36px;} .login-card{background:#fff;border-radius:16px;padding:26px 28px;max-width:560px; box-shadow:0 12px 40px rgba(0,0,0,.18);} .login-card .lab{color:#333;font-size:15px;margin-bottom:12px;font-weight:600;} .login-row{display:flex;gap:12px;} .login-row input{flex:1;border:1px solid #dcdcdc;border-radius:10px;padding:14px 16px;font-size:16px;outline:none;} .login-row input:focus{border-color:#1f9cc2;} .login-row button{background:#0b3da0;color:#fff;border:none;border-radius:10px;padding:0 28px;font-size:16px;cursor:pointer;white-space:nowrap;} /* 仅手机：按钮放到输入框下面、整行宽 */ @media(max-width:768px){.login-row{flex-direction:column;}.login-row button{padding:14px 28px;}} /* 仅手机生效的换行 / 仅电脑显示的元素 */ .m-br{display:none;} @media(max-width:768px){.m-br{display:inline;}.pc-only{display:none;}} .login-row button:hover{background:#1f9cc2;} .login-hint{color:#999;font-size:13px;margin-top:12px;} .login-error{color:#d9342b;font-size:14px;margin-top:12px;} /* 欢迎页问候 */ .greet{padding:64px 0 8px;text-align:center;} .greet h1{font-size:34px;font-weight:300;color:var(--ink);} .greet .accent{color:var(--brand-blue);font-weight:600;} .greet p{color:var(--ink-soft);margin-top:8px;} /* ===== 资料库搜索 + 筛选 ===== */ .search-form{display:flex;justify-content:center;gap:10px;max-width:560px;margin:0 auto 26px;} .search-form input{flex:1;border:1px solid #dcdcdc;border-radius:10px;padding:12px 16px;font-size:15px;outline:none;} .search-form input:focus{border-color:var(--brand-teal);} .search-form button{background:var(--brand-blue);color:#fff;border:none;border-radius:10px;padding:0 24px;font-size:15px;cursor:pointer;} .search-form button:hover{background:var(--brand-teal);} .tab.active{background:var(--brand-blue);} .empty-state{text-align:center;color:var(--ink-faint);padding:50px 0;font-size:16px;} /* ===== 教程视频 ===== */ .video-wrap{position:relative;width:100%;height:360px;border-radius:10px 10px 0 0;overflow:hidden;background:#000;} .video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;} .video-wrap video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:#000;} /* 竖版：居中窄框、白底、无黑边 */ .video-wrap.portrait{height:480px;background:#fff;display:flex;align-items:center;justify-content:center;} .video-wrap.portrait video{position:static;width:auto;max-width:100%;height:100%;object-fit:contain;background:#fff;} .plat-tag{display:inline-block;font-size:12px;color:#fff;background:var(--brand-teal);border-radius:4px;padding:2px 8px;margin-bottom:8px;} .jump-cover{height:180px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;background:linear-gradient(120deg,#0b3da0,#1f9cc2);} /* ===== 关于我们 · 城市合作伙伴 ===== */ .store-note{color:#666;font-size:14px;margin:-6px 0 22px;line-height:1.8;} .store-card{overflow:hidden;color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s;} .store-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(11,61,160,.14);} .store-link{display:inline-block;margin-top:10px;color:var(--brand-teal);font-size:14px;font-weight:600;} .store-media{position:relative;height:160px;display:flex;align-items:flex-end;background:linear-gradient(120deg,#0b3da0,#1f9cc2);overflow:hidden;} .store-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .store-city{position:relative;z-index:1;color:#fff;font-size:20px;font-weight:700;letter-spacing:2px;padding:12px 16px;text-shadow:0 1px 6px rgba(0,0,0,.45);} .store-card .card-body h3{font-size:16px;margin:0 0 8px;} .store-contact{color:#777;font-size:13px;margin:0;line-height:1.9;} @media(max-width:768px){.store-grid{grid-template-columns:repeat(2,1fr)!important;}} /* ===== 行业应用详情页 · 图片画廊 ===== */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .gallery-item{display:block;border-radius:10px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);background:#fff;} .gallery-item img{width:100%;height:230px;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1);} .gallery-item:hover img{transform:scale(1.05);} @media(max-width:768px){.gallery-grid{grid-template-columns:repeat(2,1fr);}.gallery-item img{height:160px;}} /* ===== 专属客服页 ===== */ .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:50px;} .contact-card{background:#fff;border-radius:12px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.06);text-align:center;} .contact-card h3{color:var(--brand-blue);font-size:18px;margin-bottom:14px;} .contact-card p{color:var(--ink-soft);font-size:15px;margin:6px 0;} .contact-card .big{font-size:22px;color:var(--ink);font-weight:700;letter-spacing:1px;} .advisor{display:flex;align-items:center;gap:40px;background:#fff;border-radius:14px;padding:36px;box-shadow:0 2px 12px rgba(0,0,0,.06);margin-bottom:50px;flex-wrap:wrap;} .qr-box{width:160px;height:160px;border-radius:12px;background:linear-gradient(120deg,#0b3da0,#1f9cc2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex:none;} .msg-form{max-width:640px;margin:0 auto;background:#fff;border-radius:14px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.06);} .msg-form input,.msg-form textarea{width:100%;border:1px solid #dcdcdc;border-radius:10px;padding:13px 15px;font-size:15px;outline:none;margin-bottom:14px;font-family:inherit;} .msg-form input:focus,.msg-form textarea:focus{border-color:var(--brand-teal);} .msg-form textarea{min-height:120px;resize:vertical;} .msg-ok{text-align:center;color:#1a8a4a;background:#e8f7ee;border-radius:10px;padding:12px;margin-bottom:18px;} @media(max-width:768px){.contact-grid{grid-template-columns:1fr;}} /* ===== 顶部轮播 ===== */ .carousel{position:relative;width:100%;height:440px;overflow:hidden;} .carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease; background-size:cover;background-position:center;} .carousel-slide.active{opacity:1;} .carousel-overlay{position:absolute;inset:0;color:#fff;display:flex;align-items:center;z-index:2; background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.4));} .carousel-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3;} .carousel-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;border:none;padding:0;transition:background .2s;} .carousel-dot.active{background:#fff;width:24px;border-radius:5px;} .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,.2); color:#fff;border:none;width:42px;height:42px;border-radius:50%;font-size:22px;cursor:pointer;} .carousel-arrow:hover{background:rgba(255,255,255,.4);} .carousel-prev{left:18px;} .carousel-next{right:18px;} @media(max-width:768px){.carousel{height:280px;}.carousel-overlay{display:none;}} /* 文章详情正文下方的额外说明图（横版） */ .article-extra{width:100%;border-radius:10px;margin:40px 0;display:block;} /* 产品卡片：价格 + 指标图 */ .card-body .price{color:var(--brand-blue);font-weight:700;font-size:18px;margin-top:10px;} .card .spec-img{width:100%;height:auto;object-fit:contain;display:block;border-top:1px solid var(--line);} .card:hover .spec-img{transform:none;} /* 机型详情弹窗 */ .pm-card{cursor:pointer;} .pm-hint{color:var(--brand-teal)!important;font-size:13px;margin-top:8px!important;} .pm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:flex-start;justify-content:center;z-index:1000;padding:30px 16px;overflow:auto;} .pm-overlay.open{display:flex;} .pm-content{background:#fff;border-radius:12px;max-width:1000px;width:100%;position:relative;} .pm-close{position:absolute;top:8px;right:16px;font-size:32px;line-height:1;color:#888;background:none;border:none;cursor:pointer;z-index:2;} .pm-head{padding:26px 28px 0;} .pm-head h3{font-size:22px;color:var(--brand-blue);margin:0;} .pm-price{font-size:26px;color:var(--brand-blue);font-weight:700;margin:10px 0 0;} .pm-content .pm-img{width:100%;height:auto;display:block;margin-top:18px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;cursor:zoom-in;} .pm-noimg{padding:22px 28px 28px;color:var(--ink-soft);} /* 页内子导航（产品页等） */ .subnav{position:sticky;top:72px;z-index:50;background:#fff;border-bottom:1px solid var(--line);} .subnav .container{display:flex;gap:14px;justify-content:center;align-items:center;height:60px;flex-wrap:wrap;} .subnav a{display:inline-flex;align-items:center;gap:7px;color:var(--brand-blue);font-size:15px;font-weight:600;padding:8px 18px;border:1px solid #cfe0f5;border-radius:999px;background:#fff;transition:all .15s;} .subnav a svg{width:16px;height:16px;flex:none;} .subnav a:hover{color:#fff;background:var(--brand-teal);border-color:var(--brand-teal);text-decoration:none;} section[id]{scroll-margin-top:130px;} /* 锚点跳转时给吸顶导航留位置 */ @media(max-width:768px){.subnav{position:static;top:auto;} .subnav .container{gap:16px;height:auto;padding:10px 20px;}} /* ===== 登录页（单屏、不滚动） ===== */ .login-stage{min-height:100vh;display:flex;flex-direction:column;color:#fff; background:linear-gradient(120deg,#0b3da0 0%,#1f9cc2 55%,#7fd3e8 100%);} .login-topbar{padding:22px 28px;} .login-topbar .logo{font-size:20px;color:#fff;} .login-center{flex:1;display:flex;flex-direction:column;justify-content:center; max-width:1200px;width:100%;margin:0 auto;padding:0 28px;} .login-center h1{font-size:44px;font-weight:300;letter-spacing:2px;line-height:1.25;margin:0 0 12px;} .login-center .lead{font-size:18px;font-weight:300;opacity:.92;margin-bottom:34px;} .login-slogan{text-align:center;padding:22px;font-size:16px;letter-spacing:3px;opacity:.92;} @media(max-width:768px){.login-center h1{font-size:30px;}} /* ===== 手机/平板适配（统一收窄列数 + 细节微调）===== */ @media (max-width: 768px){ /* 所有写死 3/4 列的卡片，手机上统一收成 2 列 */ .card-grid{grid-template-columns:repeat(2,1fr) !important;} /* 顶部导航换行居中、缩小 */ .nav{display:flex;flex-wrap:wrap;justify-content:center;} .nav a{margin:4px 8px;font-size:14px;} /* 登录页大标题与留白收一收 */ .hero-box{padding:56px 22px;} .hero-box h1{font-size:28px;letter-spacing:1px;} .hero-box .lead{font-size:15px;margin-bottom:24px;} /* 欢迎语、区块间距 */ .greet h1{font-size:24px;} .section{padding:44px 0;} /* 视频播放框降低高度，省屏幕 */ .video-wrap{height:230px;} .video-wrap.portrait{height:360px;} /* 产品机型大图小一点 */ .pm-card img{height:170px !important;} } @media (max-width: 480px){ /* 很窄的手机：卡片改单列，图片画廊保持 2 列 */ .card-grid{grid-template-columns:1fr !important;} .gallery-grid{grid-template-columns:repeat(2,1fr);} .hero-title{font-size:24px;} }