/* ============================================================ 资讯中心 · 列表页 · 页面专属样式 ------------------------------------------------------------ 只承载「全局四层（tokens/base/components/utilities）覆盖不到」的两处独有布局： 1. 页头（页面标题 + 一行栏目说明） 2. 内容列表卡片（>860px 左侧缩略图 + 右侧标题/日期/摘要/标签/行动； ≤860px 改为「缩略图在上、文字在下」通栏，见文件底部断点） 配色一律引用 tokens，不写裸色值；栏目导航用全局 .filters， 分页用全局 .pager，标签用全局 .tag。 ============================================================ */ /* ---------- ① 页头：标题 + 副标题（浅色页头，本页无 Hero） ---------- */ .news-head{ background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%); border-bottom:1px solid var(--line); padding:var(--sect-pad-sm) 0 var(--sp-10); } .news-head__t{ font-size:var(--fs-h1); line-height:var(--lh-tight); font-weight:var(--fw-black); color:var(--c-navy); letter-spacing:-.01em; margin:0; } .news-head__sub{ margin-top:var(--sp-3); font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--ink-2); } /* 页头内的栏目导航：与标题组保持固定节奏 */ .news-head .filters{margin:var(--sp-8) 0 0;} /* ---------- ② 内容列表：单列卡片流 ---------- */ .news-list{display:grid; gap:var(--sp-4);} .news-item{ position:relative; /* 图列用**百分比**而不是固定像素（2026-09-22 起）： 固定 320px 时容器一窄、图占内容宽的比就失控（1440 视口 29%、900 视口 42%）， 百分比列则任何宽度下占比恒定。对应《视觉与组件分册》§1.4「图列占比（PC）」 = 22%（>1080px）／26%（861–1080px，见文件底部断点），图:文 ≈ 1:3.5／1:2.7。 */ display:grid; grid-template-columns:22% 1fr; gap:var(--sp-6); align-items:stretch; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); box-shadow:var(--sh-1); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur); } .news-item:hover{box-shadow:var(--sh-2); transform:translateY(-3px); border-color:#cfdcee;} /* 缩略图 —— 尺寸遵循《视觉与组件分册》§1.4 列表页图片尺寸规范： · 比例固定 4:3；PC 端宽度 = 「22% 图列」（1440 视口 ≈240×180px）， 移动端通栏 = 卡片内容宽、比例 4:3、最高 240px（见文件底部断点） · 有图时 以 object-fit:cover 铺满，等效「居中裁剪」，不拉伸变形 · 无图时露出品牌占位底（藏青渐变 + 栏目名） ⚠️ align-self:start 是关键：父网格是 align-items:stretch， 缺了它缩略图会被纵向拉伸、高度变成「卡片高度」， aspect-ratio 于是反过来按高度推宽度，撑破图列、横向压到右侧正文 （2026-09-15 踩过一次；2026-09-22 改 4:3 + 百分比图列时再次确认）。 */ .news-item__thumb{ position:relative; display:grid; place-items:center; overflow:hidden; width:100%; aspect-ratio:4/3; align-self:start; border-radius:var(--r-sm); background:linear-gradient(135deg,var(--c-navy-deep) 0%,var(--c-navy) 58%,#17406f 100%); } .news-item__thumb::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse at 30% 25%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse at 30% 25%,#000 0%,transparent 75%); } .news-item__ph{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; color:#ffe9c9; font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.14em; } .news-item__ph svg{opacity:.9;} /* 有封面图时（数据源的 cover 有值；现全站默认引用各列表页的 DEFAULT_COVER）： 绝对定位铺满缩略图区，object-fit:cover ⇒ 等效《视觉与组件分册》§1.4 的「居中裁剪」，绝不拉伸变形。 用 inset:0 而不是给图片设 aspect-ratio —— 图片绝不能反过来参与卡片高度计算， 否则会重演 2026-09-15 那次「缩略图撑破缩略图列、横向压到正文」的问题。 */ .news-item__img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; } /* 右侧正文 */ .news-item__meta{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3);} .news-item__date{font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.02em;} .news-item__t{font-size:var(--fs-h3); font-weight:var(--fw-black); line-height:var(--lh-snug); margin:0 0 var(--sp-2);} .news-item__t a{color:var(--ink); text-decoration:none; position:relative; z-index:1; transition:color var(--dur-fast) var(--ease);} .news-item__t a::after{content:""; position:absolute; inset:0; z-index:1;} .news-item__t a:hover{color:var(--c-gold);} .news-item__sum{ font-size:15px; color:var(--ink-2); line-height:var(--lh-body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; /* 摘要统一按「2 行」占位：否则 1 行摘要的卡片会比别的矮一截， 同一列表里卡片高度参差不齐（缩略图自 2026-09-22 起 align-self:start 已不再随卡片高度拉伸，故此处只为「卡片等高」服务）。 */ min-height:calc(2 * var(--lh-body) * 15px); } .news-item__more{ position:relative; z-index:2; margin-top:var(--sp-4); display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:var(--fw-bold); color:var(--c-navy); transition:gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .news-item__more:hover{gap:10px; color:var(--c-gold-dark);} /* ---------- ②-a 卡片标签行：允许多标签换行 ---------- 全站列表卡片共用（资讯 1 个标签、案例最多 5 个，大纲 V1.31「标签规范」）。 必须允许换行 —— .news-item__meta 默认是单行 flex，案例的 5 个标签会横向溢出。 */ .news-item__meta--tags{flex-wrap:wrap;} .news-item__meta--tags .tag{font-size:12px; padding:2px 9px;} /* ---------- ②-d 筛选条「更多标签」 ---------- 标签较多的列表页（客户案例 21 个标签）首屏只铺前 N 个， 其余在构建期就带 hidden 属性，由 app.js 一键展开 / 收起。 */ .filter--extra[hidden]{display:none;} .filter--more{ border-style:dashed; color:var(--ink-3); font-weight:var(--fw-bold); } .filter--more:hover{border-color:var(--c-navy); color:var(--c-navy);} .filter--more::after{content:"⌄"; margin-left:6px; font-size:12px;} .filters.is-open .filter--more::after{content:"⌃";} /* ---------- ③ 分页：数量说明 + 页码 ---------- */ /* V1.1 起该屏不再有「页面显示标题」（内部导航名），仅保留数量说明文字，弱化为小号灰字 */ #pager .sect-head{margin-bottom:var(--sp-4);} #pager .sect-head p{ font-size:var(--fs-sm); color:var(--ink-3); letter-spacing:.04em; } #pager .pager{margin-top:var(--sp-6);} /* ---------- ④ 响应式一：861–1080px 图列加宽一档 ---------- 《视觉与组件分册》§1.4「图列占比（PC）」第二档。容器缩到 885px（1024 视口）时若仍用 22%， 图只有 ~195px、偏小；改 26% 后图占内容宽稳定落在 22%~26% 区间。 再窄即进下面的移动端通栏，故本档不设上限。 */ @media (max-width:1080px) and (min-width:861px){ .news-item{grid-template-columns:26% 1fr;} } /* ---------- ⑤ ≤860px（移动端）：改为「图上文下」通栏 ---------- 《视觉与组件分册》§1.4（2026-09-22 改版）已删除旧的「移动端左图右文 160×90」口径： 160×90 时图仅 90px 高、卡片却有 225px 高，左侧下方空出 78~103px， 正文列也被挤到 266px（375 手机更窄）。现改为缩略图占满整宽、文字全宽排布。 比例 4:3 + max-height:240px 的配合：375 手机内容宽 303px ⇒ 303×227 正好 4:3； 414 及以上（含 521–860 平板）4:3 高度会超过 240px，由限高压平， 避免平板出现 788×591 的巨图。DOM 顺序是 缩略图 → 正文，单列即「图上文下」。 */ @media (max-width:860px){ .news-item{grid-template-columns:1fr; gap:var(--sp-4); padding:var(--sp-4);} .news-item__thumb{aspect-ratio:4/3; max-height:240px; align-self:start;} .news-item__t{font-size:var(--fs-h4);} }