/* ========================================================================== portal-r32a.css —— 资讯列表 / 资讯详情 / 内页页头（客户反馈第 32 轮） · 只作追加：不覆盖 portal.css / portal-extra.css / r29* / r30a / r31a-d · 引入位置：resource/template/portal/partials/head.html 里紧跟 portal-r31d.css 之后 · 规则都带 .nd- / .prose / .pager / .pagehead 前缀，不外溢到别的页面模块 对应问题： 2. 资讯详情：标题 / 元信息 / 分享条 与下方封面图之间的 168px 白色断层（视觉断层） 4. 富文本： 默认样式（蓝字下划线）/ text-align 在图片上同样生效 / 图片外链可点 5. 资讯详情：没有封面时不再出现巨大的白底占位框（模板已删容器，这里只负责「有封面」时的紧凑间距） 7. 资讯列表：完整页码条的当前页高亮、首末页禁用态、省略号 8. 内页页头：灰白蒙版改成品牌深色蒙版，标题/面包屑白字有深色托底 ========================================================================== */ /* -------------------------------------------------------------------------- 8. 内页页头（关于我们 / 联系我们 / 资讯 / 人才招聘等页的顶部 banner） 现场有两种状态： a) 后台「官网管理 - 页面头图」没配图（本地库 zxr_portal_page.hero_image 全是空）： 页头底色是 portal.css:357 的米白渐变 linear-gradient(150deg,#FFFDF7,var(--gold-50)) —— 客户看到的那层「灰白蒙版」就是它， 主标题是深灰字，整块像蒙了一层雾。 b) 配了头图：portal.css:374 的 .pagehead--has-hero::before 又盖了 linear-gradient(150deg,rgba(255,252,244,.82),rgba(255,247,226,.60) 55%,rgba(255,250,236,.86)) 一层米白半透明，把照片糊成灰白，白字压上去几乎没有对比度。 做法：a) 没配图用米白底 + 右上角品牌金柔光渐变（#FAC100 光晕），文字深色； b) 配图时在左侧叠「深灰→透明」方向渐变蒙版（右侧透出原图、左侧压暗托字）， 右上角留一抹品牌金微光回归品牌感；页头文字统一转白、面包屑用香槟金（当前层）/ 半透明白（父级）。 说明：只覆盖 CSS，不动 partials/pagehead.html 与各页面模板。 -------------------------------------------------------------------------- */ /* a) 没配头图：米白底 + 右上角品牌金柔光渐变（参考设计稿），文字深色 */ .pagehead:not(.pagehead--has-hero){ background: radial-gradient(900px 430px at 88% -32%, rgba(250,193,0,.40), rgba(250,193,0,.14) 45%, transparent 68%), radial-gradient(620px 320px at 62% -45%, rgba(255,201,59,.20), transparent 62%), linear-gradient(150deg, #FFFDF7, var(--gold-50,#FFF9E6)); color:var(--ink-900,#1A1A1A); } .pagehead:not(.pagehead--has-hero) h1{color:var(--ink-900,#1A1A1A);text-shadow:none} .pagehead:not(.pagehead--has-hero) p{color:rgba(26,26,26,.78);text-shadow:none} .pagehead:not(.pagehead--has-hero) .crumb{color:rgba(26,26,26,.72)} .pagehead:not(.pagehead--has-hero) .crumb a{color:rgba(26,26,26,.85)} .pagehead:not(.pagehead--has-hero) .crumb a:hover, .pagehead:not(.pagehead--has-hero) .crumb b{color:var(--gold-600,#967000)} /* b) 配了头图（深色图尤甚）：左侧叠「深灰→透明」方向渐变蒙版—— 左重右透：左侧压暗托住白字、右侧透出原图，右上角留一抹品牌金微光回归品牌感 */ .pagehead--has-hero::before{ background: radial-gradient(720px 360px at 82% -10%, rgba(250,193,0,.16), transparent 62%), linear-gradient(to right, rgba(31,31,31,.88) 0%, rgba(31,31,31,.50) 46%, rgba(31,31,31,0) 100%); } /* 两种状态共用的白字（.pagehead 本身就是这两个 class 的公共父类） */ .pagehead{color:#fff} .pagehead h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.38)} .pagehead p{color:rgba(255,255,255,.84);text-shadow:0 1px 8px rgba(0,0,0,.30)} .pagehead .crumb{color:rgba(255,255,255,.72)} .pagehead .crumb a{color:rgba(255,255,255,.84)} .pagehead .crumb a:hover{color:var(--gold-400,#FFC93B)} .pagehead .crumb b{color:var(--gold-400,#FFC93B)} /* -------------------------------------------------------------------------- 2 + 5. 资讯详情：头部（标题 / 日期·阅读 / 分享条）与封面或正文之间的留白 根因：标题在 .pagehead 里（下内边距 58px）→ 元信息/分享条是 .section--tight（72px 下内边距） → 封面图又在下一个 .section（96px 上内边距）里，中间整整 72+96=168px 纯白； 16:9 封面在 840px 阅读列里还有近 470px 高，所以看起来就是「一大片白 + 一个白框」。 做法：模板给这两段挂 .nd-headbar / .nd-body（news-detail.html），这里压掉相邻内边距： 页头下沿收到 34px，头部块下内边距归零，正文块上内边距 28px。 没有封面时模板不再输出 .photo 容器（问题5），元信息之后直接进正文。 -------------------------------------------------------------------------- */ .pagehead.nd-pagehead{padding-bottom:34px} /* 这一段原来靠模板内联 style="padding-top:0" 抵消 .section--tight 的 72px 上内边距； 现在改为类名控制，上下内边距都收掉，元信息行紧接页头。 */ .section.nd-headbar{padding-top:0;padding-bottom:0} .section.nd-body{padding-top:28px} .nd-cover{margin:0} .nd-article > .prose.mt-l{margin-top:32px} /* -------------------------------------------------------------------------- 4① 富文本链接：默认蓝字 + 下划线，hover 转品牌金 根因：portal.css:56 的全局 reset `a{color:inherit;text-decoration:none}` 把后台正文里的 一起「重制」了——链接和正文同色、没有下划线，读者根本看不出能点。 做法：只给 .prose 内的 恢复「蓝字 + 下划线」，hover 变色，键盘聚焦有金色描边。 -------------------------------------------------------------------------- */ .prose a{ color:#0B63CE; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(11,99,206,.45); transition:color .2s var(--ease,ease), text-decoration-color .2s var(--ease,ease); overflow-wrap:anywhere; } .prose a:hover{color:var(--gold-600,#967000);text-decoration-color:currentColor} .prose a:focus-visible{outline:2px solid var(--gold-500,#FAC100);outline-offset:2px;border-radius:2px} /* -------------------------------------------------------------------------- 4② text-align：后台设置的「左对齐 / 居中 / 右对齐」在图片上也要生效 根因：portal.css:57 的全局 `img{max-width:100%;display:block}` 把正文图片变成块级元素， 块级元素不受父级 text-align 影响 —— 后台把段落设成居中，文字居中了， 段落里的 仍靠左，前后台看起来不一致（编辑器里居中、前台偏左）。 做法：段落内 / 链接内的图片恢复 inline-block，让父级 text-align 真正作用于图片； 直接挂在 .prose 下的裸图片继续保持块级并水平居中。 -------------------------------------------------------------------------- */ .prose p > img, .prose p > a > img, .prose figcaption img{display:inline-block;vertical-align:middle} .prose > img, .prose > a > img{display:block;margin-left:auto;margin-right:auto} /* -------------------------------------------------------------------------- 4④ 图片外链：控制器会把没有外链的富文本图片包成 （见 internal/controller/portal/view.go 的 portalRichText）。 这里给这层链接去掉下划线 / 蓝色，改成「图片可点开」的视觉：圆角 + 轻微提亮。 -------------------------------------------------------------------------- */ .prose a.prose-img{ display:inline-block;vertical-align:middle;line-height:0; text-decoration:none;color:inherit;border-radius:10px;overflow:hidden; } .prose a.prose-img:hover, .prose a.prose-img:focus-visible{text-decoration:none;color:inherit;filter:brightness(1.05)} .prose a.prose-img:focus-visible{outline:2px solid var(--gold-500,#FAC100);outline-offset:3px} .prose a.prose-img img{border-radius:10px} /* -------------------------------------------------------------------------- 7. 资讯列表分页条：完整页码「上一页 [1] [2] [3] [4] 下一页」 根因：news.html 原来只输出「上一页 + 当前页 span + 下一页」，没有任何页码； 点不到「1」自然回不到第一页。 做法：页码序列由控制器算好（.NewsPages，0 = 省略号）后模板逐页输出； 这里只补视觉：等宽数字、当前页深色高亮、首末页翻页键置灰不可点、窄屏收紧。 -------------------------------------------------------------------------- */ .pager{gap:8px} .pager .btn{padding:8px 14px;min-width:42px;justify-content:center;font-variant-numeric:tabular-nums} .pager .btn.is-current{ background:linear-gradient(135deg,var(--navy-700,#404040),var(--navy-900,#262626)); border-color:transparent;color:#fff;font-weight:700;cursor:default;box-shadow:none; } .pager .pager__step{min-width:84px} .pager .btn.is-disabled{opacity:.42;cursor:not-allowed;pointer-events:none;box-shadow:none} .pager .pager__gap{color:var(--ink-400,#999999);padding:0 2px;letter-spacing:1px;user-select:none} /* 上下篇只有一篇（另一侧到头）时占满整行，避免右边空出一个方框 */ .post-nav a:only-child{grid-column:1 / -1} @media (max-width:560px){ .pager{gap:6px} .pager .btn{padding:7px 9px;min-width:34px;font-size:13px} .pager .pager__step{min-width:0} .pagehead.nd-pagehead{padding-bottom:26px} }