/* ============================================================ sxdqchem 新闻详情页 · 正文主内容区样式 适用范围：
及其内部（标题/日期/正文/小标题/图片/返回） 调用方式：在 news_detail 模板的 内加入 说明：原模板正文带 table 嵌套与内联 style，本文件对冲突项用 !important 覆盖，因此即使不改动模板也能立即生效； 若想更干净，可删掉模板里 h1/p/img 的内联 style，仅保留 class。 配色：沿用站点品牌色 —— 藏青 #103a5a / 草绿 #2a8c6e ============================================================ */ :root { --nd-navy: #103a5a; /* 主标题 / 小标题文字 */ --nd-teal: #2a8c6e; /* 强调色：下划线、色条、按钮 */ --nd-teal-d: #1f6f57; /* 按钮 hover */ --nd-text: #3a3f45; /* 正文 */ --nd-muted: #8a929c; /* 日期等次要信息 */ --nd-line: #e8edf2; /* 分隔线 */ --nd-bg: #f4f6f9; /* 页面底色参考 */ } /* ---------- 主容器：白色卡片 + 轻阴影 + 圆角 ---------- */ .nynr { position: relative; max-width: 1000px; margin: 35px auto; padding: 40px 48px 48px !important; background: #ffffff; border: 1px solid var(--nd-line); border-radius: 14px; box-shadow: 0 10px 30px rgba(16, 58, 90, .08); font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; font-size: 16px; line-height: 1.95; color: var(--nd-text); word-break: break-word; } /* ---------- 标题 ---------- */ .nynr .js-crumb-title { text-align: center !important; color: var(--nd-navy) !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .5px; margin: 0 0 10px !important; padding-bottom: 18px !important; border-bottom: 2px solid var(--nd-teal) !important; } /* ---------- 发布日期 ---------- */ .nynr .news-meta { text-align: center; margin: 0 0 28px !important; color: var(--nd-muted); font-size: 14px; letter-spacing: .5px; } .nynr .news-meta time { font-style: normal; } /* ---------- 中和原 table 嵌套的灰色边框/白底，还原纯净正文 ---------- */ .nynr table { width: 100% !important; background: transparent !important; border: 0 !important; border-collapse: collapse !important; margin: 0 !important; } .nynr table table { margin: 0 !important; } .nynr .STYLE2 { padding: 0 !important; font-size: inherit; line-height: inherit; color: inherit; } /* ---------- 正文段落 ---------- */ .nynr p { margin: 0 0 18px !important; text-align: justify !important; text-justify: inter-ideograph; color: var(--nd-text) !important; font-size: 16px !important; line-height: 1.95 !important; } /* 图片所在居中段落保持居中（图片本身已 block 居中） */ .nynr p[style*="text-align: center"] { text-align: center !important; } /* ---------- 小标题 h2：左侧草绿竖条 + 藏青文字 ---------- */ .nynr h2 { font-size: 20px !important; font-weight: 700 !important; color: var(--nd-navy) !important; border-left: 4px solid var(--nd-teal) !important; padding: 2px 0 2px 12px !important; margin: 32px 0 14px !important; line-height: 1.5 !important; } /* ---------- 图片：响应式 / 圆角 / 轻阴影 / 悬停微放大 ---------- */ .nynr img { max-width: 100%; height: auto; display: block; margin: 10px auto; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, .10); transition: transform .25s ease, box-shadow .25s ease; } .nynr img:hover { transform: scale(1.01); box-shadow: 0 4px 18px rgba(0, 0, 0, .16); } /* ---------- 文内链接 ---------- */ .nynr a { color: var(--nd-teal); text-decoration: none; } .nynr a:hover { text-decoration: underline; } /* ---------- 返回按钮：草绿胶囊按钮 ---------- */ .nynr .fanhui { margin-top: 38px; text-align: center; } .nynr .fanhui a { display: inline-block; padding: 10px 30px; background: var(--nd-teal); color: #fff !important; border-radius: 24px; font-size: 15px; text-decoration: none !important; box-shadow: 0 4px 12px rgba(42, 140, 110, .30); transition: background .2s ease, transform .2s ease; } .nynr .fanhui a:hover { background: var(--nd-teal-d); transform: translateY(-1px); } /* ---------- 首段做轻微引导强调（可选） ---------- */ .nynr .STYLE2 > p:first-child { font-size: 17px; } /* ---------- 响应式：手机端 ---------- */ @media (max-width: 768px) { .nynr { padding: 24px 18px 32px !important; font-size: 15px; border-radius: 10px; box-shadow: 0 6px 18px rgba(16, 58, 90, .08); } .nynr .js-crumb-title { font-size: 21px !important; } .nynr h2 { font-size: 18px !important; margin: 26px 0 12px !important; } .nynr p { font-size: 15px !important; line-height: 1.85 !important; } .nynr .STYLE2 > p:first-child { font-size: 16px; } }