/* ========================================================================== Life Hub 资讯模块 — 与全站设计系统统一化调整（v1.0.158 QA pass） 本文件此前使用了资讯模块自造的一套颜色（#092b5b 深藏青 / #d99a3e 金色） 和圆角规则，未接入全站在 frontend.css :root 中定义的品牌 token。现按 frontend.css 的规范统一： - 页面宽度 → var(--lhc-page-wide) / var(--lhc-page-max)（与住房、二手、 资源库、学生指南等页面完全一致，最大 1320px，而不是资讯此前的 1600px） - 胶囊按钮/激活态 → var(--lhc-brand-action) 品牌蓝 + var(--lhc-brand-pill-radius) 999px 胶囊圆角（与"查看详情""查看联系方式""发送验证邮件"等全站按钮同源） - 正文/标题颜色 → var(--lhc-ink-strong) / var(--lhc-muted) - 字体字号 → 保持原有 var(--lhc-type-*) token 引用不变（标题级 Georgia 展示字体 + Manrope 正文字体，这部分此前已正确接入，未作改动） ========================================================================== */ .lhc-news-archive, .lhc-news-detail { width: var(--lhc-page-wide, min(90vw, 1320px)); max-width: var(--lhc-page-max, 1320px); margin: 0 auto; padding: 48px 0 80px; color: var(--lhc-ink-strong, #08182c); } /* 主视觉横幅：换成用户指定的这张"香港天际线 + 学生看平板"照片 （news-hero-hk-students.webp），沿用与 content-pages.css 里 .lhc-services-hero 完全同源的深藏青渐变蒙层公式、白色文字 + 投影。 横幅本身此前是一张独立的圆角卡片，工具条（分类筛选 + 资讯列表/资讯详情/ 投稿入口）另起一行、悬空在卡片下方。现在横幅和工具条被包进同一个 .lhc-news-hero-frame 容器里，背景框（圆角、投影）整体向下延伸把工具条也 框进去，两者在视觉上合并成一张完整的卡片——照片部分只保留上方两个圆角， 工具条部分带一层白底、只保留下方两个圆角，作为卡片底部的一条浅色footer。 */ .lhc-news-hero-frame { overflow: hidden; margin: 0 0 26px; border-radius: 16px; box-shadow: 0 18px 40px rgba(6, 36, 74, .12); } /* 这张照片本身左侧已经带了一层深藏青渐变（用于衬白色文字），如果再叠加 一整套和"服务方案"页同样强度的蒙层（.64/.4/.14/.05 横向 + 180deg 纵向 再压一层），两层暗部叠在一起，实测整张横幅明显偏暗。这里把蒙层强度降低 一半左右，并去掉纵向的那层，只保留横向、给左侧文字兜底的最低限度对比度， 右侧人像/天际线的画面亮度基本保持照片原样。 v1.0.193：反馈"左侧区域还是感觉偏暗"——实测发现真正的暗部主要来自这张 照片文件本身左侧就带的深藏青底色（不是上面这层 CSS 渐变叠加造成的， 把渐变强度再砍一半，实测左侧像素几乎没有变化），而且当前白色文字在这 片区域的对比度实测在 10:1～13:1 之间，远超 WCAG AAA 无障碍标准要求的 7:1——也就是说对比度这块留了两倍多的冗余，有充足空间在不影响文字可读性 的前提下把整体调亮。这里给横幅整体加一道 filter:brightness 提亮 （只影响这张横幅，不影响下面工具条/网格卡片），实测提亮后左侧对比度仍 保持在 8.9:1～11:1，依然稳稳超过 7:1 的门槛，视觉上不再显得沉闷。 */ .lhc-news-hero { position: relative; overflow: hidden; min-height: clamp(260px, 26vw, 360px); margin: 0; padding: clamp(36px, 5vw, 60px) clamp(28px, 4vw, 56px); border-radius: 0; background-image: linear-gradient(90deg, rgba(6, 36, 74, .32) 0%, rgba(6, 36, 74, .16) 45%, rgba(6, 36, 74, .04) 80%, rgba(6, 36, 74, 0) 100%), url("../images/news-hero-hk-students.webp"); background-position: center; background-size: cover; filter: brightness(1.3); display: flex; flex-direction: column; justify-content: center; } .lhc-news-eyebrow { font: 700 var(--lhc-type-eyebrow-size, 12px)/1.4 var(--lhc-type-body-family, Arial, sans-serif); color: var(--lhc-brand-blue, #1687F8); letter-spacing: .14em; text-transform: uppercase; } /* 横幅内的 eyebrow 换成不透明徽标胶囊，对齐 .lhc-services-hero .lhc-home-v2__eyebrow 的写法，避免蓝色文字直接压在照片上难以辨认。 */ .lhc-news-hero .lhc-news-eyebrow { display: inline-flex; width: max-content; margin-bottom: 4px; padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, .85); box-shadow: 0 12px 28px rgba(6, 36, 74, .16); color: var(--lhc-brand-blue-deep, #075fd8); } .lhc-news-hero h1 { max-width: 640px; margin: 12px 0 12px; font: var(--lhc-type-h1-size, clamp(36px, 3.3vw, 52px))/var(--lhc-type-h1-line-height, 1.1) var(--lhc-type-display-family, Georgia, serif); color: #fff; text-shadow: 0 4px 18px rgba(6, 36, 74, .4); } /* v1.0.180：这里之前直接复用了全站 --lhc-type-h1-size 这个 token（36-52px， 随视口宽度变化），跟横幅大图里那个"营销主视觉"标题（.lhc-news-hero h1， 同一个 token）用的是一模一样的尺寸。横幅标题是压在整张照片上的展示型 大字，36-52px 合理；但这里是文章详情页正文区域里的标题，读者是来读 文章内容的，不是来看主视觉的，同样的尺寸放在这里明显偏大、跟下面的 摘要/正文比例失调。这里不改全站共用的 token（改了会连带影响住房、 二手市场等其它页面复用同一个 token 的标题，动作太大），只在资讯详情页 这一处单独把字号收到更适合阅读的区间——上限从 52px 降到 36px，下限从 36px 降到 26px，字重不变（还是 Georgia 展示字体），视觉上仍然是这篇 文章里最突出的一行字，但不再跟营销横幅抢戏。 */ .lhc-news-detail h1 { margin: 8px 0 12px; font: clamp(26px, 2.6vw, 36px)/var(--lhc-type-h1-line-height, 1.15) var(--lhc-type-display-family, Georgia, serif); color: var(--lhc-ink-strong, #08182c); } .lhc-news-hero p { max-width: 560px; margin: 0; color: rgba(255, 255, 255, .92); font: var(--lhc-type-body-size, 16px)/1.7 var(--lhc-type-body-family, Arial, sans-serif); text-shadow: 0 2px 12px rgba(6, 36, 74, .32); } /* 工具条：分类筛选（左）+ 资讯列表/资讯详情/投稿入口 子导航（右）并排放在 横幅正下方——不再让子导航单独占一整行挤在顶部主导航下面。现在工具条是 .lhc-news-hero-frame 这张卡片的下半截（白底、只保留下方圆角），和上半截 的照片横幅共用同一个背景框，不再各自独立留白/悬空。 */ .lhc-news-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 16px clamp(16px, 2.6vw, 28px); background: #fff; } .lhc-news-toolbar .lhc-news-filters { flex: 1 1 auto; margin: 0; } /* 分类筛选：圆角改为全站统一的 999px 胶囊（对齐 .lhc-listing-category-rail a 与 :root 注释中明确点名的 "active filter chips"），激活态改为品牌蓝而非 自定义深藏青。 */ .lhc-news-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; background: var(--lhc-surface-soft, #f6f9ff); border: 1px solid #dce8f2; border-radius: 12px; } .lhc-news-filters a { padding: 9px 18px; background: #fff; border: 1px solid #dce8f2; border-radius: var(--lhc-brand-pill-radius, 999px); color: var(--lhc-muted, #49627b); text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color 140ms ease, color 140ms ease, background 140ms ease; } .lhc-news-filters a:hover { border-color: var(--lhc-brand-blue, #1687F8); color: var(--lhc-brand-blue, #1687F8); } .lhc-news-filters a.is-active { border-color: var(--lhc-brand-action, var(--lhc-brand-blue, #1687F8)); background: var(--lhc-brand-action, var(--lhc-brand-blue, #1687F8)); color: #fff; } /* v1.0.181：这次反馈"资讯主页分块卡片标题还是偏大"，实际问题跟 v1.0.180 收窄的那处不是同一个元素——v1.0.180 改的是 .lhc-news-card h2（下面网格里 那些小卡片的标题），但首页顶部这张真正有标题/摘要内容、最显眼的"主推 资讯"大卡片，用的是完全独立的 .lhc-news-featured 系列 class，此前 CSS 里一行样式都没写过，等于一个裸
：标题

用的是浏览器默认字号 （约 1.5em，换算下来接近 24px，还是加粗的默认字体，既没有用资讯模块统一 的 Georgia 展示字体，也没有卡片的边框/圆角/图文布局），跟下面网格卡片 刚调整过的 18px Georgia 标题完全不是一套东西，看上去自然还是偏大、也不 协调。这里按 .lhc-news-card 同一套设计语言把整张主推卡片的版式（左图右 文、卡片边框/圆角/阴影）补齐，标题字号定在 22px——比网格小卡片的 18px 大一档（主推位本来就该比普通卡片更突出一点），但远小于浏览器默认的 24px 起步而且不再无限往大了跑，也没有去碰全站共用的字号变量。 */ .lhc-news-featured { display: flex; flex-wrap: wrap; overflow: hidden; margin: 0 0 18px; border: 1px solid #dce8f2; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(9, 43, 91, .08); } /* v1.0.187：反馈"主推资讯这个大卡片区块太空、太高"——量了一下实际渲染 尺寸，问题出在配图这一列：flex:1 1 320px 会跟着页面变宽持续长大，宽度 长到 700px 左右时，4:3 的高宽比换算出来接近 525px 高，比右边文字区 （标题+摘要+日期，实际只需要约 380px）足足高出 140 多像素——文字区跟 图片区在同一个 flex 行里默认互相"拉伸对齐"，缺口全变成了文字上下的大 片留白，配图本身也被拉得又高又空。这里把高宽比从偏方正的 4:3 换成更 舒展的 16:9（编辑类"主推文章"配图的常见比例），并加一道 max-height 兜底， 这样配图不会再随着页面变宽无限增高，留白也降到了可以接受的范围内， 同时保留了图文比例协调的观感。 */ .lhc-news-featured__image { display: flex; align-items: center; justify-content: center; flex: 1 1 320px; aspect-ratio: 16 / 9; max-height: 340px; background: #eaf3fb; overflow: hidden; } .lhc-news-featured__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .lhc-news-featured__copy { display: flex; flex-direction: column; justify-content: center; flex: 1 1 360px; padding: 24px clamp(20px, 2.6vw, 32px); } .lhc-news-featured__copy .lhc-news-tag { align-self: flex-start; } .lhc-news-featured h2 { margin: 12px 0 10px; font: 22px/1.35 var(--lhc-type-display-family, Georgia, serif); } .lhc-news-featured h2 a { color: var(--lhc-ink-strong, #08182c); text-decoration: none; } .lhc-news-featured p { margin: 0; color: var(--lhc-muted, #5c6b7a); font: var(--lhc-type-body-size, 15px)/1.65 var(--lhc-type-body-family, Arial, sans-serif); } .lhc-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .lhc-news-card { overflow: hidden; border: 1px solid #dce8f2; border-radius: 10px; background: #fff; transition: transform .2s, box-shadow .2s; } .lhc-news-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(9, 43, 91, .1); } .lhc-news-card__image { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #eaf3fb; overflow: hidden; } .lhc-news-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .lhc-news-card__body { padding: 16px 18px 18px; } /* 分类标签：改为全站徽标/标签统一的 999px 胶囊（对齐 .lhc-listing-badges span / .lhc-resource-card__badges span / .lhc-chip 家族），此前是 6px 圆角矩形。 */ .lhc-news-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; border-radius: 999px; background: #e8f3ff; color: var(--lhc-brand-blue-deep, #075fd8); font-size: 12px; font-weight: 700; } /* v1.0.180：这里之前也是直接用全站 --lhc-type-h3-size（固定 20px）。这个 token 本身给一般卡片标题用是合理的，但资讯列表卡片下面配的摘要文字只有 13px（.lhc-news-card p），20px 的 Georgia 衬线标题跟 13px 的正文放在一 起，尺寸落差偏大，标题显得过于突出。这里也不改全站 token（同样会连带 影响其它复用它的卡片标题），只在资讯卡片这一处单独收到 18px，跟下面的 摘要文字比例更协调，也还在"卡片标题"该有的常见尺寸区间内，不会显得 小气。 */ .lhc-news-card h2 { margin: 10px 0 8px; font: 18px/var(--lhc-type-h3-line-height, 1.35) var(--lhc-type-display-family, Georgia, serif); } .lhc-news-card h2 a { color: var(--lhc-ink-strong, #08182c); text-decoration: none; } .lhc-news-card p { min-height: 3.2em; margin: 0; color: var(--lhc-muted, #5c6b7a); font: var(--lhc-type-small-size, 13px)/1.6 var(--lhc-type-body-family, Arial, sans-serif); } .lhc-news-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; } .lhc-news-card__foot time { color: #8a99a9; } .lhc-news-card__foot a, .lhc-news-back { color: var(--lhc-brand-blue, #1687F8); text-decoration: none; font-weight: 700; } .lhc-news-pagination { margin: 34px 0 0; } .lhc-news-pagination ul { display: flex; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .lhc-news-pagination a, .lhc-news-pagination span { display: inline-block; padding: 8px 13px; border: 1px solid #dce8f2; border-radius: 7px; text-decoration: none; color: var(--lhc-ink-strong, #08182c); } .lhc-news-pagination a:hover { border-color: var(--lhc-brand-blue, #1687F8); color: var(--lhc-brand-blue, #1687F8); } .lhc-news-pagination .current { background: var(--lhc-brand-action, var(--lhc-brand-blue, #1687F8)); border-color: var(--lhc-brand-action, var(--lhc-brand-blue, #1687F8)); color: #fff; } .lhc-news-detail { max-width: 900px; } .lhc-news-detail h1 { margin-top: 20px; } /* 摘要/引言左边框：原先用金色（#d99a3e，全站唯一出现在无障碍焦点环上的颜色）， 改为品牌蓝，避免引入调色板之外的第三种品牌色。 */ .lhc-news-lead { padding-left: 18px; border-left: 3px solid var(--lhc-brand-blue, #1687F8); color: var(--lhc-muted, #5c6b7a); font-size: 18px; line-height: 1.7; } /* v1.0.190：反馈"详情页顶部封面图全屏显示"——一开始按"撑满正文栏宽度是 常见头图手法"处理，只加了个 max-height 兜底；后来确认反馈的真实意思是 标题/导语之后这张图占满了刚打开页面时的整个可视区域，人还没读到正文就 先看到一整块很大的图，希望做成跟正文里"插入到正文"配图（.lhc-inline- image）一样克制、压缩的固定尺寸——这两张图现在统一按同一套尺寸限制处理 （max-width:640px、居中），封面图不再撑满整个正文栏，视觉分量跟正文配图 一致，不会在打开文章的第一屏就被图片占满。 */ .lhc-news-detail-cover { margin: 24px auto; max-width: 640px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #eaf3fb; } .lhc-news-detail-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .lhc-news-content { color: var(--lhc-ink, #354d66); font: var(--lhc-type-body-size, 16px)/1.75 var(--lhc-type-body-family, Arial, sans-serif); } .lhc-news-content h2 { margin-top: 34px; color: var(--lhc-ink-strong, #08182c); font: var(--lhc-type-h2-size, clamp(24px, 2.1vw, 30px))/var(--lhc-type-h2-line-height, 1.25) var(--lhc-type-display-family, Georgia, serif); } .lhc-news-content img { max-width: 100%; height: auto; border-radius: 10px; } /* 通过"插入到正文"按钮放进文章里的配图，统一固定尺寸显示，不会跟着每张 图片的原始尺寸忽大忽小——这条规则比上面 .lhc-news-content img 更具体， 会覆盖掉宽度自适应的写法。 v1.0.170 及之前用的是 220×165（缩略图那个尺寸，跟上传区选图用的缩略图 保持一致），实际发布出来看，正文（.lhc-news-detail 最宽 900px）里这么 小一张图跟周围一整段文字放在一起，比例明显偏小、不协调，这次改成占正文 宽度大部分的整块图片（不再和文字同行内嵌，改成独占一行，前后有间距， 更接近常见资讯网站的配图排版），宽度顶到正文实际最大宽度附近 （640px，比 900px 的正文栏略窄，两侧留一点呼吸空间，不会顶到边）， 高度按 3:2 裁切，看起来比之前的小图协调得多。 */ .lhc-news-content img.lhc-inline-image { display: block; width: 100%; max-width: 640px; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 10px; border: 1px solid #d5e0e8; background: #f6f9fb; margin: 20px auto; } .lhc-news-source { padding: 14px 16px; border: 1px solid #dce8f2; border-radius: 9px; background: var(--lhc-surface-soft, #f6f9ff); font-size: 14px; } .lhc-news-source a { overflow-wrap: anywhere; color: var(--lhc-brand-blue, #1687F8); } /* v1.0.188：资讯还没有配图时，主推卡片这块图片位只有一行"资讯配图"纯文字， 跟旁边真的配了图的卡片摆在一起，很容易被当成没做完的半成品。这次不去 自动生成一张千篇一律的默认图（多篇资讯撞同一张图反而显得敷衍），而是 把这个占位状态本身做得更像一个"有意为之的等待态"：加一个简单的图片 图标、文字改成说明"等待配图"而不是干巴巴的名词，颜色也从纯黑改成跟 背景色系配套的浅蓝灰，跟旁边卡片的实拍图区分开、但不显得像故障。管理 员在后台"封面图片"字段补上真实图片后，这个占位状态会自动被替换掉。 */ .lhc-news-image-placeholder__label { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 70%; color: #7897b8; font: 600 var(--lhc-type-small-size, 13px)/1.5 var(--lhc-type-body-family, Arial, sans-serif); text-align: center; } .lhc-news-image-placeholder__label::before { display: block; width: 34px; height: 34px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; opacity: .8; content: ""; } .lhc-news-empty { padding: 50px 24px; text-align: center; border: 1px solid #dce8f2; border-radius: 12px; background: #f7fbff; } .lhc-news-empty h1, .lhc-news-empty h2 { font-family: var(--lhc-type-display-family, Georgia, serif); color: var(--lhc-ink-strong, #08182c); } .lhc-news-empty p { color: var(--lhc-muted, #5c6b7a); } /* 平板断点：与全站 --lhc-page-wide-tablet（calc(100vw - 48px)）在 1100px 收窄的规则统一，并让三列卡片先降为两列（原文件在 1100px 完全没有处理， 720px 以上会直接保持三列挤压变形）。 */ @media (max-width: 1100px) { .lhc-news-archive, .lhc-news-detail { width: var(--lhc-page-wide-tablet, calc(100vw - 48px)); } .lhc-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 手机断点：与全站 --lhc-page-wide-mobile（calc(100vw - 28px)）在 480px 收窄的规则统一（原文件用的是 720px 且未引用 token，与住房/二手/资源库等 页面在 480–720px 区间的留白宽度不一致）。 */ @media (max-width: 480px) { .lhc-news-archive, .lhc-news-detail { width: var(--lhc-page-wide-mobile, calc(100vw - 28px)); padding: 36px 0 60px; } .lhc-news-grid { grid-template-columns: 1fr; gap: 14px; } .lhc-news-hero-frame { margin-bottom: 20px; } .lhc-news-hero { min-height: 0; } .lhc-news-toolbar { flex-direction: column; align-items: stretch; } .lhc-news-filters { flex-wrap: nowrap; overflow: auto; } .lhc-news-filters a { white-space: nowrap; } .lhc-news-lead { font-size: 16px; } } /* ========================================================================== 投稿资讯页面 ========================================================================== */ .lhc-news-submit { width: var(--lhc-page-wide, min(90vw, 1320px)); max-width: var(--lhc-page-max, 1320px); margin: 0 auto; padding: 48px 0 80px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; } .lhc-news-submit__main, .lhc-news-submit__aside { padding: 26px; border: 1px solid #dce8f2; border-radius: 12px; background: #fff; } /* 投稿页标题此前直接沿用首页级横幅标题的字号 + 展示衬线字体 （--lhc-type-h1-size，clamp(36px,3.3vw,52px) + Georgia/CJK 衬线兜底字体）， 在这种紧凑的表单卡片里显得过大，而且纯中文标题落到 CJK 衬线兜底字体 （NSimSun/宋体等）上，和 eyebrow、说明文字、表单标签等全部使用的无衬线 正文字体（--lhc-type-body-family）反差很大，视觉上像两种字体拼在一起。 这里改用与站内"发布房源信息"等投稿类表单页标题同规格的写法——字体统一 为无衬线正文字体，和页面里其它文字一致。上一版字号（h2 规格 24–30px）+ 800 字重实测仍偏大偏重，这里再降一档到固定 22px，字重从 800 降到 600， 不再是"加粗"的观感，和下面 eyebrow、说明文字之间的落差也小了很多。 */ .lhc-news-submit h1 { margin: 8px 0 10px; font-family: var(--lhc-type-body-family, Arial, sans-serif); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--lhc-ink-strong, #08182c); } /* 顶部说明文字之前没有单独设定字号，继承了主题正文段落的字号（18px）， 看起来比表单本身的字段还显眼。这里收到网站正文标准字号，观感上退为 辅助说明文字，不再抢表单的注意力。 */ .lhc-news-submit__intro { font-size: var(--lhc-type-body-size, 16px); line-height: 1.6; color: var(--lhc-muted, #5c6b7a); } /* 表单字段标签（资讯分类/标题/摘要/正文/配图/投稿邮箱/邮箱验证码……）此前 没有单独设定字号，直接继承了主题正文段落的 18px，配合 700 字重，在一份 紧凑表单里显得又大又重。这里显式收到 14px + 600 字重，和输入框本身的 文字大小（inherit，同样是表单默认字号）区分得开，但不会重到抢标题风头。 */ .lhc-news-form label { display: block; margin: 18px 0; color: var(--lhc-ink, #193452); font-size: 14px; font-weight: 600; } /* 这几个字段（资讯分类下拉、标题、摘要）此前用 font:inherit 直接继承父级