/* Theme Name: 雨泽能源官网 Theme URI: https://nmyzny.com/ Author: 内蒙古雨泽能源科技有限公司 Author URI: https://nmyzny.com/ Description: 雨泽能源官方网站自研轻量主题。设计定稿基准：效果演示\官网原型-单文件版.html（md5 ad78dd4f11ed106ea9e45740e673e672）。 Version: 0.1.0 Requires at least: 6.4 Tested up to: 7.1 Requires PHP: 8.0 License: 公司自用（未授权） Text Domain: nmyzny */ /* * 说明：主题的**全部视觉样式**在 assets/css/main.css（照搬设计定稿，写死，不给后台开关）。 * 本文件只放"WordPress 层面"的极少量适配。 */ /* WordPress 会在上挂一堆 class，个别会影响盒模型，这里兜一下 */ body { overflow-x: hidden; } /* * 兜底（重要）：浮现动画 .rv * 原型的写法是「.rv 默认透明，JS 观察进入视口后才浮现」。 * 但这样只要 JS 没跑成 / 观察器没生效，整段内容就等于消失（页面空白）。 * 正确做法是反过来：**默认可见**，只有 JS 确认能跑（html.anim）才启用"先隐藏再浮现"。 */ .rv { opacity: 1 !important; transform: none !important; } html.anim .rv:not(.in) { opacity: 0 !important; transform: translateY(14px) !important; transition: opacity .7s ease, transform .7s ease; } html.anim .rv.in { opacity: 1 !important; transform: none !important; } /* ============================================================================ ⚠️ 必留的一条（踩过大坑）：class 撞名原型里 `.page` 表示"单页原型里的假页面容器"，CSS 里是 `.page{display:none}`。而 WordPress 会给「页面」这种内容的挂上 class="page" —— 正好撞名，结果**整个网页被 display:none 隐藏**（首页/栏目页正常，只有"页面"空白）。这里把 body 那种情况排除掉。 ============================================================================ */ body.page { display: block !important; } .admin-bar .sitehead.stuck { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .sitehead.stuck { top: 46px; } } /* 编辑链接（登录后才有）——低调一点，别破坏版面 */ .entry .post-edit-link { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--muted); text-decoration: none; } .entry .post-edit-link:hover { color: var(--brand); } /* 内容区排版（后台编辑器里写的东西，前台要像回事） */ .entry { max-width: 900px; } .entry h2 { font-size: 22px; margin: 30px 0 12px; } .entry h3 { font-size: 18px; margin: 24px 0 10px; } .entry p { line-height: 1.9; margin: 0 0 14px; color: var(--ink2); } .entry img { max-width: 100%; height: auto; border-radius: 10px; } .entry ul, .entry ol { padding-left: 22px; line-height: 1.9; color: var(--ink2); } .entry blockquote { margin: 18px 0; padding: 12px 18px; background: var(--soft); border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; } .entry table { width: 100%; border-collapse: collapse; font-size: 14px; } .entry th, .entry td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; } .entry th { background: var(--soft); } /* 内页头图的大标题（原型用的是 h2，我们语义上用 h1，样式对齐它） */ .phero h1 { font-size: clamp(24px, 2.7vw, 34px); letter-spacing: 1.6px; margin: 0 0 10px; } .phero p { margin: 0; opacity: .88; } /* 业务卡片的「筹备中」标记（已开展的不显示；筹备中的不给详情按钮） */ .card { position: relative; } .card .badge { position: absolute; top: 14px; right: 14px; background: #eef1f6; color: #7b8798; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 20px; letter-spacing: .5px; } .card.soon { opacity: .88; } .card.soon .ic { background: #f1f3f7; color: #93a0b3; } .card.soon h4 { color: var(--ink2); } .card.soon ul li { color: var(--muted); } /* 首页新闻列表（原型用 JS 切页签，这里改成真链接 + 一条最新列表，永远显示最新内容） */ .nlist { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; } .nlist li { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px dashed var(--line); } .nlist li:first-child { border-top: 1px dashed var(--line); } .nlist .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; } .nlist .tt { flex: 1 1 auto; min-width: 0; font-size: 15.5px; color: var(--ink); } .nlist .tt a { color: var(--ink); text-decoration: none; } .nlist .tt a:hover { color: var(--brand); } .nlist .dt { flex: 0 0 auto; color: var(--muted); font-size: 13.5px; } @media (max-width: 640px) { .nlist li { align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; } .nlist .tt { flex: 1 1 100%; order: 2; line-height: 1.6; } .nlist .dt { order: 3; } } /* 在线留言表单 */ .msgform { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 30px; } .msgform .row { margin-bottom: 16px; } .msgform label { display: block; font-size: 14.5px; color: var(--ink2); margin-bottom: 7px; } .msgform label i { color: #b32d2e; font-style: normal; } .msgform input[type=text], .msgform textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; font-size: 15px; font-family: inherit; color: var(--ink); } .msgform input[type=text]:focus, .msgform textarea:focus { outline: none; border-color: var(--brand); } .msgform button { border: 0; cursor: pointer; } .msgform .tip { color: var(--muted); font-size: 12.5px; margin: 12px 0 0; } /* 蜜罐字段：真人看不见，机器人会填（填了就说明是机器人） */ .msgform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .msg-ok { max-width: 620px; margin: 0 auto 18px; padding: 13px 18px; border-radius: 10px; background: #eaf7ee; color: #1a7f3c; font-size: 15px; } .msg-err { max-width: 620px; margin: 0 auto 18px; padding: 13px 18px; border-radius: 10px; background: #fdeceb; color: #b32d2e; font-size: 15px; } /* ============================================================ 内页：组织架构 / 董事长致辞 / 资质证照 / 联系方式 ============================================================ */ /* 组织架构（2026-09-22 用户选「方案A」：总公司 + 部门卡片，卡内竖列下属部室）数据全在后台「组织架构」条目里：父级=层级 / 排序=顺序 / 负责人 / 说明 ⚠️ 层级再深也不会断线：卡片内部不画小框、连线只在"顶框→母线→卡片"这一层 */ .org { max-width: 1200px; margin: 0 auto; text-align: center; } /* 顶框（总公司） */ .org-top { display: inline-block; background: var(--brand); color: #fff; border-radius: 10px; padding: 13px 26px; line-height: 1.5; position: relative; text-align: center; } .org-top b { font-size: 17px; } .org-top .h, .org-top em { display: block; font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .82); margin-top: 2px; } .org-top::before { /* 顶框底边的连接点 */ content: ''; position: absolute; left: 50%; bottom: -6px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(24, 72, 144, .10); } .org-top::after { /* 顶框 → 母线的竖线 */ content: ''; position: absolute; left: 50%; bottom: -30px; width: 3px; height: 24px; background: var(--brand); transform: translateX(-1.5px); } /* 部门卡片一栏 */ .org-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 30px; position: relative; } .org-row::before { /* 横向母线（连接 5 张卡片） */ content: ''; position: absolute; left: 10%; right: 10%; top: -15px; height: 3px; background: var(--brand); } .org-col { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px 15px 10px; } .org-col::before { /* 卡片上方那条竖线（接到母线，不进卡） */ content: ''; position: absolute; left: 50%; top: -15px; width: 3px; height: 15px; background: var(--brand); transform: translateX(-1.5px); } .org-head { text-align: center; padding-bottom: 10px; } .org-head b { display: block; font-size: 16px; color: var(--ink); } .org-head .h { display: block; font-size: 12.5px; color: var(--brand); margin-top: 3px; } .org-head em { display: block; font-size: 12.5px; color: var(--muted); font-style: normal; margin-top: 3px; } /* 卡片里的下属部室（文字行，不画框） */ .org-kids { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .org-kids li { padding: 9px 2px; border-top: 1px dashed var(--line); font-size: 13.5px; line-height: 1.55; } .org-kids li:first-child { border-top: 0; padding-top: 11px; } .org-kids b { display: block; font-size: 14px; font-weight: 600; color: var(--brand); } .org-kids span { display: block; font-size: 13px; color: var(--ink); } .org-kids em { display: block; font-size: 12.5px; color: var(--muted); font-style: normal; } .org-kids .org-sub { padding-left: 14px; } /* —— 手机/平板（≤900px）：卡片竖排 + 左侧竖线；小横线到卡外就停，绝不压框（用户点名的毛病） */ @media (max-width: 900px) { .org { text-align: left; } .org-top { text-align: left; } .org-top::after { bottom: -24px; height: 24px; } .org-row { display: block; margin: 24px 0 0 22px; padding-left: 22px; position: relative; } .org-row::before { content: ''; position: absolute; left: 0; top: -24px; bottom: 16px; width: 3px; background: var(--brand); } .org-col { margin-bottom: 14px; } .org-col::before { left: -22px; top: 30px; width: 16px; height: 3px; transform: none; } .org-head { text-align: left; } .org-head .h, .org-head em { display: inline; margin: 0 0 0 6px; } } /* 董事长致辞 */ .speech { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px 34px; } .speech .who { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .speech .ava { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-l); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex: 0 0 auto; } .speech .who b { display: block; font-size: 17px; color: var(--ink); } .speech .who span { color: var(--muted); font-size: 13.5px; } .speech blockquote { margin: 0; padding: 0; border: 0; color: var(--ink2); line-height: 2; font-size: 15.5px; } .speech blockquote p { margin: 0 0 12px; } /* ========================================================================== 「关于我们」页内标签条（2026-09-21 用户定方案A）客户一眼看到这一页里有几块，点一下滚过去；滚到哪一块，哪个标签亮。纯 CSS + 十几行原生 JS，不依赖任何库。标题和条目都由页面里现有的板块决定。 ========================================================================== */ .anchor-dot { display: block; position: relative; top: -96px; visibility: hidden; height: 0; } .about-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 26px; padding: 10px 12px; background: #f4f7fc; border: 1px solid #e2eaf6; border-radius: 12px; } .about-tabs a { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 14px; color: #184890; text-decoration: none; background: #fff; border: 1px solid #dde7f5; transition: background .16s, color .16s, border-color .16s; } .about-tabs a:hover { background: #e9f1fd; border-color: #c2d6ef; } .about-tabs a.on { background: #184890; border-color: #184890; color: #fff; font-weight: 600; } @media (max-width: 860px) { /* ⚠️ 之前写成 nowrap + 横滑，结果第 4 个「资质证照」被挤出屏幕（看着像被截） → 改成"允许换行"，4 个标签排两行，一眼看全，不做横滑 */ .about-tabs { flex-wrap: wrap; gap: 7px; padding: 9px 10px; } .about-tabs a { flex: 0 0 auto; padding: 7px 13px; font-size: 13px; } .anchor-dot { top: -84px; } } @media (max-width: 400px) { .about-tabs { gap: 6px; padding: 8px; } .about-tabs a { padding: 6px 11px; font-size: 12.5px; } } /* ========================================================================== 公告栏 / 公告弹窗遮罩 —— 调淡（2026-09-21 用户：颜色太重，把首页压住了）原来：公告条是深藏蓝渐变（很重）、弹窗遮罩 62% 深色 + 模糊（整页压暗）。现在：公告条改浅底深字（轻、不抢视线）；遮罩减到 42% 并去掉模糊。仍只覆盖，不动 notice.css 原文件。 ========================================================================== */ /* ① 首页顶部公告条 → 浅底 + 深蓝字 */ .nbar { background: linear-gradient(90deg, #eef4fc 0%, #f6f9fe 50%, #eaf2fd 100%) !important; border-bottom: 1px solid #dbe6f5 !important; padding: 7px 0 !important; /* 上下留气，不再紧贴页头 */ } .nbar .tag { background: #20a838 !important; color: #fff !important; } .nbar-it, .nbar-it b { color: #184890 !important; font-size: 13.5px !important; } .nbar-it .go { color: #2b6cb0 !important; } .nbar-it:hover .go { color: #184890 !important; } .nbar-prev, .nbar-next { background: #e3ecf9 !important; color: #184890 !important; } .nbar-prev:hover, .nbar-next:hover { background: #d2e0f4 !important; } /* ⚠️ 2026-09-21 说明：试过"公告条内容居中 + 箭头钉右边"，结果 .nbar-box 宽度塌成 0，公告文字消失（notice.css 里 .nbar-it 是绝对定位，容器宽度全靠 flex 撑）。这里回退：保持原来的 flex 布局（标签+文字在左、箭头在右），只保留"浅色 + 上下留气"。想真正居中，需要改写 notice.css 的结构（待办）。 */ /* ② 公告弹窗遮罩 → 减淡、去模糊 */ .npop-mask { background: rgba(11, 28, 51, .42) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ========================================================================== 首页公告条 —— 搬到"横幅下面、数据条上面"（2026-09-21 方案C）横幅是深蓝大图，公告条紧接着它，所以：浅底 + 上下细线，像横幅下面的一条提示带。 ========================================================================== */ .nbar-wrap { background: #f6f9fe !important; border-top: 1px solid #e2ecf9 !important; border-bottom: 1px solid #e2ecf9 !important; } .nbar-wrap .nbar { border-bottom: 0 !important; padding: 9px 0 !important; } .nbar-wrap .nbar-it, .nbar-wrap .nbar-it b { font-size: 13.5px !important; } /* ========================================================================== 页脚 logo —— 去掉白色圆角"托板"（2026-09-21 用户要求） main.css 给 .flogo img 加了 background:#fff / padding / border-radius，看起来像一块圆角矩形白板。这里覆盖成"只有 logo 本身"。 ========================================================================== */ footer.site .flogo img { background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: 46px !important; width: auto !important; } /* ========================================================================== 页脚「公司信息」里的微信公众号二维码（2026-09-21） ========================================================================== */ footer.site .fqr { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px dashed rgba(255,255,255,.2); /* 和三列链接的虚线统一：都是 1px / 20% */ } footer.site .fqr img { width: 104px; height: 104px; flex: 0 0 104px; border-radius: 7px; background: #fff; padding: 4px; box-sizing: border-box; display: block; } footer.site .fqr span { font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.88); } footer.site .fqr span em { font-style: normal; font-size: 11.5px; color: #8aa2c0; } @media (max-width: 860px) { footer.site .fqr { gap: 10px; margin-top: 12px; padding-top: 11px; } footer.site .fqr img { width: 84px; height: 84px; flex: 0 0 84px; } footer.site .fqr span { font-size: 11.5px; } } /* ========================================================================== 联系页「导航到这里 / 复制地址 / 打电话」按钮 —— 缩小（2026-09-21 用户：太大了）不改 main.css（设计定稿），只在这里覆盖；三个按钮更紧凑，一排摆得下。 ========================================================================== */ .navbtns { display: flex; flex-wrap: wrap; gap: 6px !important; align-items: center; } .navbtns .btn { padding: 5px 10px !important; font-size: 12px !important; line-height: 1.45 !important; border-radius: 6px !important; letter-spacing: 0 !important; min-height: 0 !important; height: auto !important; } .navbtns .btn.nav-go { font-weight: 600 !important; } /* ⭐ 2026-09-21 三个按钮统一收小 —— 不再分总公司(g2)/分公司(g3)，一律同样大小，避免"一处改了、另一处看着没改"的错觉。选择器写得很具体，防止被 main.css 压回去。 */ .navbtns .btn, .navbtns a.btn, .navbtns button.btn, .card .navbtns .btn, .g .navbtns .btn { padding: 4px 9px !important; font-size: 11.5px !important; line-height: 1.4 !important; min-height: 0 !important; height: auto !important; border-radius: 5px !important; letter-spacing: 0 !important; } .navbtns { gap: 6px !important; } /* 🚨 2026-09-21 关键修复：分公司卡片（.g.g3）里的按钮被拉伸成整行宽（撑满卡片），原因是 main.css 给卡片内的 .btn 设了 width/flex 撑满。这里强制"按内容宽度"。 */ .navbtns .btn, .navbtns a.btn, .navbtns button.btn { flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; } .navbtns { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; } .navbtns .navtip { font-size: 11px !important; line-height: 1.5 !important; } .navbtns .navtip { margin-top: 6px !important; font-size: 11.5px !important; line-height: 1.55 !important; } @media (max-width: 860px) { .navbtns { gap: 5px !important; } .navbtns .btn { padding: 4px 8px !important; font-size: 11.5px !important; border-radius: 5px !important; } .navbtns .navtip { font-size: 11px !important; } } /* ========================================================================== 首页「新闻资讯」· 左图右文（2026-09-20 用户定） —— 首页这块是"一眼扫过"，所以用横条：左边小缩略图，右边标题+摘要+日期。 —— 图片用【特色图片】（后台可换 ✅）；没设则显示藏蓝底 + 标题小字。 ========================================================================== */ .nlist { list-style: none; margin: 0; padding: 0; max-width: 1000px; margin-left: auto; margin-right: auto; } .nlist li { display: flex; align-items: center; gap: 18px; padding: 14px 16px; margin-bottom: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); transition: box-shadow .18s, border-color .18s, transform .18s; } .nlist li:hover { box-shadow: 0 8px 26px rgba(11,28,51,.1); border-color: #c7d5e8; transform: translateY(-2px); } .nlist li .dot { display: none; } /* 原来的小圆点不要了 */ .nlist li .th { display: block; flex: 0 0 176px; width: 176px; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; position: relative; background: linear-gradient(135deg, #184890 0%, #0f3a75 60%, #12335f 100%); } .nlist li .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .nlist li:hover .th img { transform: scale(1.06); } .nlist li .th-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px; text-align: center; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 10px, transparent 10px 20px); } .nlist li .th-ph b { font-size: 13px; font-weight: 700; line-height: 1.5; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.28); } .nlist li .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .nlist li .tt { font-size: 16.5px; font-weight: 700; line-height: 1.55; } .nlist li .tt a { color: var(--ink); } .nlist li .tt a:hover { color: var(--green); } .nlist li .ex { font-size: 13.5px; line-height: 1.7; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nlist li .dt { font-size: 12.5px; color: var(--muted); } @media (max-width: 860px) { /* ⭐ 手机上仍然保持"左图右文"（千万不要改成图在上：那样每条会变很高，首页被拉得老长） */ .nlist { max-width: 100%; } .nlist li { flex-direction: row; align-items: flex-start; gap: 11px; padding: 10px 11px; margin-bottom: 10px; border-radius: 10px; max-width: 100%; box-sizing: border-box; } .nlist li .th { flex: 0 0 106px; width: 106px; aspect-ratio: 4 / 3; border-radius: 8px; } .nlist li .th-ph { padding: 0 6px; } .nlist li .th-ph b { font-size: 10.5px; line-height: 1.4; } .nlist li .tx { gap: 4px; min-width: 0; } .nlist li .tt { font-size: 14.5px; line-height: 1.5; } .nlist li .ex { font-size: 12px; line-height: 1.6; -webkit-line-clamp: 2; } .nlist li .dt { font-size: 11px; } } /* ========================================================================== 新闻列表 · 图文卡片（2026-09-20，与首页业务卡片同一套观感） —— 图在上、标题+摘要在下；图片用【特色图片】，后台随时可换（铁律）。 —— 没配图时显示统一占位（藏蓝底 + 标题大字），卡片高度一致。 ========================================================================== */ .grid .card { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; } .grid .card .thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #184890 0%, #0f3a75 60%, #12335f 100%); } .grid .card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .grid .card:hover .thumb img { transform: scale(1.06); } .grid .card .thumb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 22px; text-align: center; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 10px, transparent 10px 20px); } .grid .card .thumb-ph b { font-size: 20px; font-weight: 800; line-height: 1.55; letter-spacing: .5px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.3); } .grid .card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; } .grid .card .body h3 { font-size: 16.5px; line-height: 1.55; margin: 0 0 8px; font-weight: 700; } .grid .card .body h3 a { color: inherit; } .grid .card .body h3 a:hover { color: var(--green); } .grid .card .body p { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0 0 8px; } .grid .card .body .more { margin-top: auto; padding-top: 4px; } /* 标题最多两行，避免高矮不齐 */ .grid .card .body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 860px) { .grid .card .thumb-ph b { font-size: 17px; } .grid .card .body { padding: 13px 14px 15px; } .grid .card .body h3 { font-size: 15.5px; } .grid .card .body p { font-size: 13px; } } /* ========================================================================== 业务卡片 · 图文版（2026-09-20 用户要的效果） —— 图在上、标题在下；图片用【特色图片】，后台随时可换（铁律）。 —— 没配图时显示统一占位（藏蓝渐变 + 图标），不难看。 —— 首页为了不让卡片太高：隐藏原来那 3 条要点，想看细的进内页。 ========================================================================== */ .g3 .card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .g3 .card .thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #184890 0%, #0f3a75 60%, #12335f 100%); } .g3 .card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .g3 .card:hover .thumb img { transform: scale(1.06); } /* 占位：藏蓝底 + 中间一个图标（没配图时用） */ .g3 .card .thumb-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } /* ⭐ 占位里显示业务名称大字 —— 用"一定存在"的内容（标题），不依赖可能为空的"图标"字段（原来 6 个里只有 1 个填了图标，其余看着像缺图） */ .g3 .card .thumb-ph b { position: relative; z-index: 2; font-size: 22px; font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.3); } .g3 .card .thumb-ph b::after { content: ''; display: block; width: 34px; height: 3px; background: #20a838; border-radius: 2px; margin: 12px auto 0; } .g3 .card .thumb-ph i { font-style: normal; font-size: 46px; line-height: 1; color: rgba(255,255,255,.9); opacity: .92; text-shadow: 0 4px 18px rgba(0,0,0,.25); } /* ⚠️ 「筹备中」徽标：加图之后被图片盖住了 → 提到图片右上角浮着 */ .g3 .card { position: relative; } .g3 .card .badge { position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; z-index: 5 !important; box-shadow: 0 3px 12px rgba(0,0,0,.22); } /* 占位时叠一层细斜纹，显得是"有意设计"而不是"缺图" */ .g3 .card .thumb-ph::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 10px, transparent 10px 20px); } /* 卡片下半部分的内容区 */ .g3 .card > h4, .g3 .card > p, .g3 .card > ul, .g3 .card > .more { margin-left: 20px; margin-right: 20px; } .g3 .card > h4 { margin-top: 18px; margin-bottom: 8px; font-size: 17px; } .g3 .card > p { margin-top: 0; margin-bottom: 10px; font-size: 13.5px; line-height: 1.75; color: var(--muted); } .g3 .card > .more { margin-top: auto; margin-bottom: 20px; padding-top: 6px; } /* 首页：隐藏那 3 条要点（加了图之后，再留着会又长又挤） */ .home .g3 .card > ul { display: none; } /* 手机：一排 2 个，卡片小一点 */ @media (max-width: 860px) { .g3 .card .thumb-ph i { font-size: 34px; } .g3 .card > h4, .g3 .card > p, .g3 .card > ul, .g3 .card > .more { margin-left: 14px; margin-right: 14px; } .g3 .card > h4 { font-size: 15.5px; margin-top: 13px; } .g3 .card > p { font-size: 13px; } } /* ========================================================================== 页脚手机排版：从"一列竖排"改成"两列"（2026-09-20 用户反馈）原来手机上 footer.site .cols 是 grid-template-columns:1fr → 全竖排一条，页面又长又难看。现在：两列；第一列（logo + 地址/电话/邮箱）单独占满一行。 ========================================================================== */ @media (max-width: 860px) { /* 🚨 2026-09-21 彻底修"手机端横向溢出"（右侧被切 → 卡片被截断 → 按钮看着像撑满）之前那招不够狠，这次直接锁 viewport + 把可能超宽的东西全部按回屏幕内。 */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } .wrap, .section, .cts, .navbtns, .nlist, .grid, footer.site, header.site, .hero, .phero { max-width: 100% !important; box-sizing: border-box !important; } .cts { grid-template-columns: 1fr !important; gap: 16px !important; } /* 联系信息手机端改单列，最稳 */ .navtip { white-space: normal !important; overflow-wrap: anywhere; } .navbtns .btn { white-space: nowrap; } img, video, iframe, table { max-width: 100% !important; } .ntabs { flex-wrap: wrap !important; justify-content: center !important; } /* ⚠️ 2026-09-20 发现：手机宽度下页面被"撑宽"了（页签/长内容横向溢出，右侧被切）。先做兜底：所有可能超宽的东西都允许换行 + 容器不许超出屏幕。 */ .ntabs { flex-wrap: wrap !important; justify-content: center !important; } .ntabs .ntab { flex: 0 0 auto; } body, .wrap, .section, footer.site, header.site { max-width: 100%; } img, video, iframe, table { max-width: 100%; } .nlist li .tt, .grid .card .body h3 { word-break: break-word; overflow-wrap: anywhere; } footer.site { padding: 34px 0 16px; } /* ⭐ 2026-09-20 用户定：手机上一排三列（业务范围 / 新闻资讯 / 关于我们），这样底部一屏就看完，不会又长又难看。第一块（logo+联系方式）仍占整行。 */ footer.site .cols { grid-template-columns: 1fr 1fr 1fr !important; gap: 18px 10px !important; } footer.site .cols > div:first-child { grid-column: 1 / -1; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.08); } /* 顺序：业务范围(第2块) → 新闻资讯(第3块) → 关于我们(第1块) */ footer.site .cols > div:nth-child(2) { order: 3; } footer.site .cols > div:nth-child(3) { order: 1; } footer.site .cols > div:nth-child(4) { order: 2; } footer.site h5 { font-size: 13.5px; margin: 0 0 8px; letter-spacing: 0; } /* ⭐ 2026-09-20 用户看过居中版后定案：**居左更好看**（三列左边缘齐，好扫） */ footer.site .cols > div { text-align: left; } footer.site .cols > div li a { text-align: left; } /* ⭐ 2026-09-20 用户提出"手机端点不准" → 不画按钮，改成"一行一行的可点项"： · 每一行加淡分隔线 → 一眼看出"这里一行行都能点"（像 App 的设置列表） · a 变成 display:block + 上下留白 → 手指点哪一行都算，不用精准戳那几个字 · 文字提亮 → 深色底上看得更清楚一行高度 ≈ 41px（接近苹果/谷歌建议的 44px 触控高度）*/ footer.site li { margin: 0; border-bottom: 1px dashed rgba(255,255,255,.2); } footer.site li:last-child { border-bottom: 0; } /* 最后一行不画线，收边干净 */ footer.site li a { display: block; padding: 12px 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.9); transition: color .15s, background .15s; } footer.site li a:hover, footer.site li a:active { color: #fff; background: rgba(255,255,255,.06); } footer.site .cols > div:first-child a, footer.site .cols > div:first-child p, footer.site .cols > div:first-child li { border-bottom: 0; } footer.site a, footer.site li, footer.site p { font-size: 12.5px; line-height: 1.7; } footer.site .flogo { margin-bottom: 8px; } footer.site .flogo img { height: 36px !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; } footer.site .flogo b { font-size: 14.5px; } .cr { margin-top: 18px; padding-top: 12px; font-size: 11.5px; line-height: 1.9; } .cr > * { display: block; margin-bottom: 3px; } } /* 更小的屏（≤420px）也保持三列，只把字再收一点 */ @media (max-width: 420px) { footer.site .cols { grid-template-columns: 1fr 1fr 1fr !important; gap: 16px 8px !important; } footer.site h5 { font-size: 12.5px; } footer.site a, footer.site li, footer.site p { font-size: 11.5px; } } /* 资质证照 */ .certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .certs .c { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-align: center; } .certs .c img { width: 100%; height: 210px; object-fit: contain; background: #f7f9fc; display: block; } .certs .c .t { padding: 11px 14px; font-size: 14px; } .certs .c .t b { display: block; color: var(--ink); margin-bottom: 4px; } .certs .c .t span { display: block; color: var(--muted); font-size: 13px; line-height: 1.7; } @media (max-width: 900px) { .certs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .certs { grid-template-columns: 1fr; } } /* 联系方式信息块 */ .cblk { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px; } .cblk h4 { margin: 0 0 14px; font-size: 17px; color: var(--ink); } .cblk .addr { margin: 0 0 16px; color: var(--ink2); line-height: 1.9; } .cblk .gbox { border-top: 1px dashed var(--line); } .cblk .gl { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; } .cblk .gl span { color: var(--muted); flex: 0 0 84px; } .cblk .gl b { color: var(--ink); font-weight: 600; word-break: break-all; } /* ============================================================ 列表网格 / 页签 / 分页（原型是"单页假页面"，没有真正的列表页，所以这几条是主题补的） ============================================================ */ /* 卡片网格：桌面 3 列 → 平板 2 列 → 手机 1 列 */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* ========================================================================== 首页「行动号召」那段文字 —— 手机端别只剩一个孤字（2026-09-21 用户反馈） "留下您的联系方式，我们的业务经理会尽快与您联系" 手机上会断成 "……与您联" + "系" ← 孤字最难堪。解法：① text-wrap: balance（浏览器自动均衡两行） ② 手机端收窄最大宽度，让它在逗号附近自然断开 ========================================================================== */ .section.cta p, .section.cta .sub, .section.cta .txt, .section.cta h3 + p { text-wrap: balance; } @media (max-width: 860px) { .section.cta p, .section.cta .sub, .section.cta .txt { max-width: 17em !important; margin-left: auto !important; margin-right: auto !important; line-height: 1.8 !important; text-wrap: balance; } } @media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 18px; } } .grid .card { padding: 30px; } .grid .card .thumb { display: block; margin: -30px -30px 18px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; } .grid .card .thumb img { width: 100%; height: 190px; object-fit: cover; display: block; } .grid .card h3 { font-size: 17px; margin: 0 0 8px; line-height: 1.5; } .grid .card h3 a { color: var(--ink); text-decoration: none; } .grid .card h3 a:hover { color: var(--brand); } .grid .card p { font-size: 14px; color: var(--ink2); line-height: 1.85; margin: 0 0 12px; } .grid .card .more { color: var(--brand); font-size: 14px; text-decoration: none; } /* 新闻页签的"当前"状态（原型靠 JS 切换，这里靠链接自带） */ .ntabs .ntab.on { background: var(--brand); border-color: var(--brand); color: #fff; } /* 分页 */ .pager { text-align: center; margin-top: 38px; } .pager .page-numbers { display: inline-block; padding: 8px 15px; margin: 0 3px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink2); text-decoration: none; font-size: 14px; } .pager .page-numbers:hover { border-color: var(--brand); color: var(--brand); } .pager .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; } /* 窄屏：卡片里的负边距跟着卡片内边距走 */ @media (max-width: 640px) { .grid .card { padding: 22px; } .grid .card .thumb { margin: -22px -22px 16px; } } /* ========================================================================== 一键导航按钮（总公司 / 分公司） ========================================================================== */ .navbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .navbtns .btn { padding: 11px 20px; font-size: 14.5px; } .nav-go { box-shadow: 0 8px 20px var(--brand-glow); } .navtip { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin: 8px 0 0; } @media (max-width: 640px) { .navbtns { gap: 8px; } .navbtns .btn { flex: 1 1 auto; justify-content: center; padding: 12px 14px; } .nav-go { flex-basis: 100%; } /* 手机上"导航"占满一行，好点 */ } /* ========================================================================== 404 页面 —— 目标不是"解释错误"，而是**尽快把客户送到对的地方** ========================================================================== */ .nf { padding: 52px 0 78px; background: linear-gradient(180deg, var(--soft) 0%, #fff 64%); } .nf .wrap { max-width: 720px; margin: 0 auto; text-align: center; padding: 0 20px; } /* 公司 logo：先让客户确认"我没走错站" */ .nf-logo { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); overflow: hidden; } .nf-logo img { width: 100%; height: 100%; display: block; } /* 大号 404（品牌渐变字） */ .nf-code { font-size: clamp(74px, 15vw, 122px); line-height: 1; font-weight: 800; letter-spacing: 5px; background: linear-gradient(135deg, #184890 0%, #2a6fc9 60%, #20a838 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 2px 0 10px; } .nf-title { font-size: clamp(21px, 3.4vw, 28px); margin: 0 0 14px; color: var(--ink); } .nf-sub { color: var(--ink2); font-size: 15px; line-height: 2; margin: 0 0 26px; } .nf-sub b { color: var(--brand); } /* 站内搜索：客户多半是在找某个具体东西，直接让他搜 */ .nf-search { display: flex; align-items: center; gap: 0; max-width: 520px; margin: 0 auto 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 14px; box-shadow: 0 8px 24px rgba(15,45,90,.06); text-align: left; } .nf-search .ic { color: var(--muted); font-size: 15px; flex: 0 0 auto; } .nf-search input[type=search] { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; padding: 10px; font-family: inherit; color: var(--ink); } .nf-search button { flex: 0 0 auto; border: 0; border-radius: 9px; background: var(--brand); color: #fff; font-size: 15px; padding: 11px 22px; cursor: pointer; font-family: inherit; transition: background .18s ease; } .nf-search button:hover { background: var(--brand-d); } .nf-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* 常用入口 */ .nf-quick { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); } .nf-quick .h { color: var(--muted); font-size: 13.5px; margin: 0 0 8px; } .nf-quick .links { margin: 0; } .nf-quick .links a { display: inline-block; margin: 0 4px 8px; padding: 5px 12px; color: var(--brand); text-decoration: none; font-size: 15px; border-radius: 8px; transition: background .18s ease; } .nf-quick .links a:hover { background: var(--brand-l); } /* 急着用的人：直接给电话 */ .nf-tel { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 20px; } .nf-tel span { color: var(--muted); font-size: 13.5px; } .nf-tel b { color: var(--brand); font-size: 19px; letter-spacing: .5px; } @media (max-width: 640px) { .nf { padding: 32px 0 58px; } .nf-logo { width: 62px; height: 62px; } .nf-code { letter-spacing: 3px; } .nf-search { padding: 5px 5px 5px 12px; } .nf-search button { padding: 10px 16px; font-size: 14.5px; } .nf-quick .links a { margin: 0 2px 6px; font-size: 14.5px; } .nf-tel { flex-direction: column; gap: 3px; padding: 11px 18px; } } /* ========================================================================== 成功案例（2026-09-22 新增）卡片＝业务卡片 + 一条"关键数据"（后台填几条显示几条，不填就不占地方） ========================================================================== */ .card.case .thumb { position: relative; } .card.case .case-kind { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(24, 72, 144, .92); color: #fff; font-size: 12.5px; letter-spacing: .5px; padding: 5px 13px; border-radius: 999px; } .card.case .case-meta { color: var(--muted); font-size: 13px; margin: 7px 0 8px; } .card.case .case-stats { list-style: none; margin: 12px 0 14px; padding: 13px 0 0; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 12px 18px; } .card.case .case-stats li { flex: 1 1 30%; min-width: 88px; } .card.case .case-stats i { display: block; font-style: normal; font-size: 12px; color: var(--muted); } .card.case .case-stats b { display: block; font-size: 17px; color: var(--brand); line-height: 1.35; } /* 案例详情页顶部的事实条 */ .case-facts { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; background: #f4f7fb; border: 1px solid var(--line); border-radius: 12px; padding: 16px 22px; margin: 0 0 30px; } .case-facts .tag { background: var(--brand); color: #fff; font-size: 12.5px; padding: 6px 15px; border-radius: 999px; } .case-facts > span { display: flex; flex-direction: column; gap: 2px; } .case-facts i { font-style: normal; font-size: 12px; color: var(--muted); } .case-facts b { font-size: 16px; color: var(--ink); } .case-pic { margin: 0 0 30px; border-radius: 12px; overflow: hidden; } .case-pic img { width: 100%; height: auto; display: block; } /* 案例正文里的实拍图集（画册原图，2 列） */ .case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 0; } .case-gallery figure { margin: 0; border-radius: 10px; overflow: hidden; background: #eef2f7; } .case-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== 光储充「小图墙」（2026-09-22） 16 个站点，一屏 4 个。照片来自画册实拍（978x545），**分辨率有限所以只摆小格子、不做点击放大**（小格子最清楚、最整齐）；鼠标移上去轻微浮起。 ========================================================================== */ .sitewall-head { text-align: center; margin: 56px 0 22px; } .sitewall-head h2 { font-size: 22px; margin: 0 0 8px; } .sitewall-head p { color: var(--muted); font-size: 14px; margin: 0; } .sitewall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .sw-i { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; } /* ⚠️ height:auto 不能少：图片被压窄时高度要跟着缩，否则会拉变形（实测 294x428 竖着变形） */ .sw-i img, .sw-i .thumb-ph { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .sw-i figcaption { padding: 9px 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink); text-align: center; border-top: 1px solid var(--line); } .sw-i:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11, 28, 51, .10); border-color: #c9d8ea; } @media (max-width: 900px) { .sitewall { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (max-width: 640px) { .sitewall { grid-template-columns: repeat(2, 1fr); gap: 10px; } .sw-i figcaption { font-size: 12px; padding: 7px 8px; } .sitewall-head { margin-top: 40px; } } @media (max-width: 640px) { .card.case .case-stats { gap: 10px 14px; } .card.case .case-stats b { font-size: 16px; } .case-facts { padding: 14px 16px; gap: 11px 18px; } .case-facts b { font-size: 15px; } }