- 父元素（非法 HTML）
【本节职责】
1. 定义 .stats--mini：列表页专用的「浅色卡片式」统计条
2. 定义 .topapps： 列表页专用的「主要适配车型」标签云容器
（不再复用 .catnav，.catnav 保持只做吸顶类目切换）
3. 补齐 .toolbar__n / .toolbar__r 与状态类，并给全站一致的断点
【断点约定】沿用 theme.css 既有的两档栅格断点，不另立标准：
900px → 4 列降 2 列 ； 560px → 降 1 列
（style.css 的 880px / 640px 与 style-pages.css 的 860px / 600px
是更早的遗留档位，本节不改动它们，只保证本组件内部自洽。）
【回滚】删除本节即可，其余文件零改动。
============================================================ */
/* ------------------------------------------------------------
12.1 .stats--mini —— 列表页浅色卡片式统计条
------------------------------------------------------------
与首页 / about 的深蓝通栏 .stats 刻意区分：
· 首页 .stats 是「通栏深色带」，用于首页数据展示
· 类目页统计条嵌在正文流里，若沿用深蓝通栏会与产品网格抢视觉
所以这里做成 4 张白卡 + 品牌色数字 + 细分隔线的浅色形态，
既统一了视觉语言（同一套面板语言），又保持层级区分。
------------------------------------------------------------ */
/* 外层：去掉深蓝底与阴影，改为透明容器 */
.stats--mini{
background:none;
box-shadow:none;
color:var(--ink);
}
/* 栅格容器：与首页 .stats__in 同名同结构，保证 4 列同行 */
.stats--mini .stats__in{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:clamp(10px,1.1vw,14px);
}
/* 单项：白卡。与深蓝版靠「底色 + 圆角 + 阴影」区分，
并显式重置深蓝版的 border-left / padding，
否则会继承 rgba(255,255,255,.14) 的白色左边框（浅底上几乎不可见，
视觉上就像「卡片没有边框」）。 */
.stats--mini .stats__i{
background:var(--surface);
border:1px solid var(--line);
border-left:1px solid var(--line);
border-radius:var(--r-md);
box-shadow:var(--sh-1);
padding:clamp(14px,1.5vw,18px) clamp(14px,1.7vw,20px);
transition:box-shadow .24s var(--ease),transform .24s var(--ease),
border-color .24s var(--ease);
}
.stats--mini .stats__i:hover{
border-color:var(--brand-3);
box-shadow:var(--sh-2);
transform:translateY(-2px);
}
/* 深蓝版用 :first-child 去掉左边框并让内边距归零，
浅色卡每张都有独立边框，必须全部还原 */
.stats--mini .stats__i:first-child{
border-left:1px solid var(--line);
padding-left:clamp(14px,1.7vw,20px);
}
/* 数字：品牌深蓝，浅底上对比度足够；沿用等宽数字防跳动 */
.stats--mini .stats__i b{
color:var(--brand);
font-size:clamp(21px,2.1vw,27px);
font-weight:800;
letter-spacing:-.025em;
line-height:1.05;
margin-bottom:6px;
font-variant-numeric:tabular-nums;
}
/* 标签：深蓝版的 rgba(255,255,255,.66) 在白底上不可读，改为墨色 */
.stats--mini .stats__i span{
display:block;
color:var(--ink-3);
font-size:12px;
line-height:1.4;
letter-spacing:.01em;
}
/* ------------------------------------------------------------
12.2 .topapps —— 列表页「主要适配车型」标签云
------------------------------------------------------------
为什么不复用 .catnav：
.catnav 是 position:sticky;top:65px 的吸顶类目切换条
（含 .catnav__in / .catnav__item），语义与交互完全不同；
而且它需要一整套 JS 维护选中态。塞进标签云会让整条吸顶，
在类目页里表现为「一进页面就被吸在头部下面」，非常突兀。
这里新建 .topapps，语义收敛为「一组标签云」。
------------------------------------------------------------ */
.topapps{
display:flex;
align-items:baseline;
gap:12px 18px;
flex-wrap:wrap;
margin:20px 0 0;
padding:14px 18px;
background:var(--surface);
border:1px solid var(--line);
border-left:3px solid var(--brand-lt);
border-radius:var(--r-md);
box-shadow:var(--sh-1);
}
/* 标签云标题：单行不折，与标签行基线对齐 */
.topapps__lb{
flex:0 0 auto;
margin:0;
font-family:inherit;
font-size:12px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--brand-2);
line-height:1.7;
white-space:nowrap;
}
/* 标签列表：语义容器为
- ，
.chips 本身已是 flex+wrap，这里只补自适应占位与重置 */
.topapps .chips{
flex:1 1 320px;
min-width:0;
margin:0;
padding:0;
}
/* 中文下标题不需要字距和全大写变形 */
html[lang="zh-CN"] .topapps__lb{
text-transform:none;
letter-spacing:.04em;
font-size:12px;
}
/* ------------------------------------------------------------
12.3 列表页筛选工具条
------------------------------------------------------------
prerender 类目页用的是 .toolbar__n / .toolbar__r，
而 style-pages.css 里这两个类从未被定义过 —— 原先完全裸奔。
这里补齐，并让「计数在左、输入框在右」的布局在窄屏自然换行。
------------------------------------------------------------ */
.toolbar__n{
margin:0;
font-size:13.5px;
color:var(--ink-2);
}
.toolbar__n b{
color:var(--brand);
font-weight:700;
font-variant-numeric:tabular-nums;
}
.toolbar__r{
flex:1 1 260px;
min-width:0;
display:flex;
}
.toolbar__r input{
flex:1;
min-width:0;
width:100%;
padding:11px 14px;
font-size:14.5px;
font-family:inherit;
color:var(--ink);
background:var(--surface);
border:1px solid var(--line-2);
border-radius:var(--r-sm);
box-shadow:var(--sh-1);
transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.toolbar__r input::placeholder{color:var(--ink-4)}
.toolbar__r input:hover{border-color:var(--brand-3)}
.toolbar__r input:focus{
outline:none;
border-color:var(--brand-2);
background:#fff;
box-shadow:0 0 0 4px rgba(30,96,145,.12),var(--sh-1);
}
/* 类目页的 .toolbar 只有 __n / __r 两个直接子元素，
由 HTML 侧的 .toolbar--bar 修饰类开启横向布局；
其他列表页用 .toolbar__in，不受此规则影响 */
.toolbar--bar{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:12px 20px;
padding:13px 16px;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-md);
box-shadow:var(--sh-1);
}
/* ------------------------------------------------------------
12.4 状态规范：加载 / 空数据 / 错误
------------------------------------------------------------
列表页三态统一为同一种「虚线浅底提示面板」：
· .state--loading 数据加载中（实线浅底，最轻）
· .state--empty 查询无结果（虚线浅底）
· .state--error 加载失败（实线 + 品牌红左描边）
三个都是修饰类，不改变原元素语义。
.empty（既有类）与 .state 共用同一套外观，
这样 history 页、products.html、oe-search.html 里已有的
.empty 面板无需改动 HTML 即自动统一。
------------------------------------------------------------ */
.state,
.empty{
border:1px dashed var(--line-2);
border-radius:var(--r-md);
background:var(--surface-2);
color:var(--ink-2);
text-align:center;
padding:clamp(26px,4.4vw,44px) clamp(18px,3.4vw,34px);
font-size:14px;
line-height:1.7;
}
.state a,
.empty a{color:var(--brand-2);text-decoration:underline}
.state a:hover,
.empty a:hover{color:var(--brand)}
/* 错误态：换用品牌红左描边，一眼区别于「无结果」 */
.state--error{
border-style:solid;
border-color:var(--line);
border-left:3px solid var(--accent);
background:var(--surface);
text-align:left;
}
/* 加载态：柔和浅底，不抢注意力 */
.state--loading{
border-style:solid;
border-color:var(--line);
background:var(--surface);
color:var(--ink-3);
}
/* 面板内的强调数字沿用品牌色 */
.state b,
.empty b{color:var(--brand)}
/* 预渲染类目页的空状态是
， 内层直接放 span + a，没有 .empty b / .empty p，需要补内边距与行高 */ p.empty{ margin-top:18px; line-height:1.9; } p.empty a{ font-weight:600; } /* 加载失败面板：换用品牌红左描边，与「无结果」一眼区分 */ .state--error{ border-style:solid; border-color:var(--line); border-left:3px solid var(--accent); background:var(--surface); text-align:left; } /* JS 注入的失败面板是
，同样给红左描边 */ p.empty.is-error{ border-style:solid; border-color:var(--line); border-left:3px solid var(--accent); background:var(--surface); text-align:left; line-height:1.7; margin-top:0; } /* ------------------------------------------------------------ 12.5 提示面板在栅格内必须横跨整行 ------------------------------------------------------------ products.js / oe-search.js / category.js 加载失败时执行 grid.innerHTML = '
…
'， 而 #grid / #oeGrid / #catGrid 都是 .pgrid（3 列栅格）。 不处理的话，这块提示面板只占 1/3 列宽，被硬挤在左侧一格里， 长文案会折成好几行 —— 与页面下方的空状态面板完全不一致。 ------------------------------------------------------------ */ .pgrid > .empty, .pgrid > .state{ grid-column:1/-1; } /* ------------------------------------------------------------ 12.6 响应式断点（本组件专用） ------------------------------------------------------------ 900px → 4 列降 2 列（与 .pgrid 同档，栅格语言一致） 560px → 降 1 列（与 .pgrid 同档） 640px → 标签云标题独占一行，标签从第二行开始排 ------------------------------------------------------------ */ @media (max-width:900px){ /* 2 列：2×2 方阵，比 auto-fill 更整齐 */ .stats--mini .stats__in{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ /* 标签云改为上下两段：标题一行，标签一行 */ .topapps{ align-items:flex-start; gap:9px; padding:13px 15px; } .topapps .chips{flex:1 1 100%} } @media (max-width:560px){ /* 1 列：4 张卡竖排 */ .stats--mini .stats__in{ grid-template-columns:1fr; gap:10px; } /* 统计条内部间距在窄屏略收，避免卡片贴边 */ .stats--mini .stats__i{ padding:13px 15px; } .stats--mini .stats__i b{ font-size:22px; } /* 工具条改为上下排列，输入框占满整行 */ .toolbar--bar{ padding:12px 14px; } .toolbar__r{flex:1 1 100%} } /* ============================================================ 13. LOGO 修复（2026-10-07） ------------------------------------------------------------ 实测问题（Edge 无头，1440 / 390 两档）： 页头 logo.png 渲染 105× 38，原始 602×217→ 比例正常但尺寸过小 页脚 logo-white.png 渲染 315× 34，原始 602×217 → 变形 234%（手机 275%） 两个根因： 1. 变形：`.brand` 是 display:flex;flex-direction:column（style.css:98）， 但 `.brand--ftr`（style.css:400）只给了 margin-bottom，没有任何