/* ============================================================ 非常在线 t.veryol.com —— 前台新版 UI(2026-09-13) 简约大气 · 科技范 类名一律 .vh-*,不覆盖老站既有样式。 配色 = 调色板:在 上切换, 可选:light(默认) / ink / gold / violet ============================================================ */ /* ---------- 调色板变量(默认:light 亮色·科技蓝) ---------- */ :root { --vh-bg: #f4f6fb; --vh-glow-1: rgba(37, 99, 235, .10); --vh-glow-2: rgba(6, 182, 212, .07); --vh-head-bg: rgba(255, 255, 255, .88); --vh-panel: #ffffff; --vh-panel-2: #eff3fa; --vh-line: rgba(15, 23, 42, .12); --vh-line-soft: rgba(15, 23, 42, .07); --vh-text: #0f172a; --vh-dim: rgba(15, 23, 42, .68); --vh-mut: rgba(15, 23, 42, .45); --vh-faint: rgba(15, 23, 42, .38); --vh-acc: #2563eb; --vh-acc-2: #0e7490; --vh-acc-soft: rgba(37, 99, 235, .09); --vh-acc-line: rgba(37, 99, 235, .38); --vh-active-fg: #1d4ed8; --vh-grad: linear-gradient(115deg, #2563eb 0%, #06b6d4 100%); --vh-thumb-a: #e9eef7; --vh-thumb-b: #dde5f1; --vh-thumb-glow: rgba(37, 99, 235, .10); --vh-menu-bg: #ffffff; --vh-menu-shadow: 0 28px 60px -26px rgba(15, 23, 42, .35); --vh-foot-bg: #eef2f8; --vh-card-shadow: 0 1px 2px rgba(15, 23, 42, .05); --vh-card-shadow-hover: 0 20px 42px -28px rgba(15, 23, 42, .32); --vh-rank-num: rgba(15, 23, 42, .28); --vh-watermark: url('/assets/logo-veryol.png'); } /* ---------- 暗色:墨蓝青 ---------- */ html[data-vh-palette="ink"] { --vh-bg: #070a14; --vh-glow-1: rgba(76, 141, 255, .16); --vh-glow-2: rgba(34, 211, 238, .10); --vh-head-bg: rgba(7, 10, 20, .80); --vh-panel: rgba(255, 255, 255, .032); --vh-panel-2: rgba(255, 255, 255, .06); --vh-line: rgba(255, 255, 255, .10); --vh-line-soft: rgba(255, 255, 255, .055); --vh-text: #e9eef9; --vh-dim: rgba(233, 238, 249, .66); --vh-mut: rgba(233, 238, 249, .40); --vh-faint: rgba(233, 238, 249, .32); --vh-acc: #4c8dff; --vh-acc-2: #22d3ee; --vh-acc-soft: rgba(76, 141, 255, .14); --vh-acc-line: rgba(76, 141, 255, .42); --vh-active-fg: #ffffff; --vh-grad: linear-gradient(115deg, #4c8dff 0%, #22d3ee 100%); --vh-thumb-a: #141c30; --vh-thumb-b: #0d1424; --vh-thumb-glow: rgba(76, 141, 255, .18); --vh-menu-bg: #0b1020; --vh-menu-shadow: 0 28px 60px -26px rgba(0, 0, 0, .95); --vh-foot-bg: rgba(255, 255, 255, .015); --vh-card-shadow: none; --vh-card-shadow-hover: none; --vh-rank-num: rgba(233, 238, 249, .26); --vh-watermark: url('/assets/logo-veryol-white.png'); } /* ---------- 暗色:曜石金 ---------- */ html[data-vh-palette="gold"] { --vh-bg: #0a0908; --vh-glow-1: rgba(245, 166, 35, .13); --vh-glow-2: rgba(255, 209, 102, .06); --vh-head-bg: rgba(10, 9, 8, .82); --vh-panel: rgba(255, 255, 255, .035); --vh-panel-2: rgba(255, 255, 255, .065); --vh-line: rgba(255, 236, 200, .14); --vh-line-soft: rgba(255, 236, 200, .07); --vh-text: #f7f3ea; --vh-dim: rgba(247, 243, 234, .68); --vh-mut: rgba(247, 243, 234, .42); --vh-faint: rgba(247, 243, 234, .32); --vh-acc: #f5a524; --vh-acc-2: #ffd166; --vh-acc-soft: rgba(245, 165, 36, .15); --vh-acc-line: rgba(245, 165, 36, .45); --vh-active-fg: #ffd166; --vh-grad: linear-gradient(115deg, #f5a524 0%, #ffd166 100%); --vh-thumb-a: #231c12; --vh-thumb-b: #171208; --vh-thumb-glow: rgba(245, 165, 36, .16); --vh-menu-bg: #17130c; --vh-menu-shadow: 0 28px 60px -26px rgba(0, 0, 0, .95); --vh-foot-bg: rgba(255, 255, 255, .02); --vh-card-shadow: none; --vh-card-shadow-hover: none; --vh-rank-num: rgba(247, 243, 234, .26); --vh-watermark: url('/assets/logo-veryol-white.png'); } /* ---------- 暗色:星紫 ---------- */ html[data-vh-palette="violet"] { --vh-bg: #0a0813; --vh-glow-1: rgba(139, 92, 246, .18); --vh-glow-2: rgba(34, 211, 238, .09); --vh-head-bg: rgba(10, 8, 19, .82); --vh-panel: rgba(255, 255, 255, .035); --vh-panel-2: rgba(255, 255, 255, .065); --vh-line: rgba(214, 200, 255, .13); --vh-line-soft: rgba(214, 200, 255, .07); --vh-text: #efeafd; --vh-dim: rgba(239, 234, 253, .66); --vh-mut: rgba(239, 234, 253, .40); --vh-faint: rgba(239, 234, 253, .30); --vh-acc: #8b5cf6; --vh-acc-2: #22d3ee; --vh-acc-soft: rgba(139, 92, 246, .16); --vh-acc-line: rgba(139, 92, 246, .48); --vh-active-fg: #ffffff; --vh-grad: linear-gradient(115deg, #8b5cf6 0%, #22d3ee 100%); --vh-thumb-a: #1c1633; --vh-thumb-b: #130f26; --vh-thumb-glow: rgba(139, 92, 246, .20); --vh-menu-bg: #120e22; --vh-menu-shadow: 0 28px 60px -26px rgba(0, 0, 0, .95); --vh-foot-bg: rgba(255, 255, 255, .015); --vh-card-shadow: none; --vh-card-shadow-hover: none; --vh-rank-num: rgba(239, 234, 253, .26); --vh-watermark: url('/assets/logo-veryol-white.png'); } /* ---------- 基础 ---------- */ .vh-head, .vh-foot, .vh-main, .vh-chips, .vh-panel { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; } .vh-in { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; } .vh-main { padding-bottom: 56px; } .vh-home, .vh-page { background: var(--vh-bg); color: var(--vh-text); } .vh-home::before, .vh-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(680px 380px at 12% -6%, var(--vh-glow-1), transparent 62%), radial-gradient(720px 420px at 92% 2%, var(--vh-glow-2), transparent 60%); } .vh-home > *, .vh-page > * { position: relative; z-index: 1; } a { text-decoration: none; } .vh-home img { display: block; } /* logo 双版本:浅色底用深字版,深色底用白字版 */ img.vh-onlight { display: none; } html[data-vh-palette="light"] img.vh-onlight { display: block; } html[data-vh-palette="light"] img.vh-ondark { display: none; } /* ---------- 页眉 ---------- */ .vh-head { position: sticky; top: 0; z-index: 60; background: var(--vh-head-bg); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--vh-line-soft); } .vh-head-in { display: flex; align-items: center; gap: 28px; height: 66px; } .vh-logo { display: flex; align-items: center; flex: 0 0 auto; } .vh-logo img { height: 30px; width: auto; } .vh-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; } .vh-nav > a, .vh-more-btn { display: inline-block; padding: 8px 12px; border-radius: 9px; font-size: 14.5px; line-height: 1.2; color: var(--vh-dim); transition: color .18s var(--vh-ease), background .18s var(--vh-ease); white-space: nowrap; cursor: pointer; background: none; border: 0; font-family: inherit; } .vh-nav > a:hover, .vh-more-btn:hover { color: var(--vh-text); background: var(--vh-panel-2); } .vh-nav > a.active { color: var(--vh-active-fg); background: var(--vh-acc-soft); } .vh-head-act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .vh-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; color: var(--vh-text); border: 1px solid var(--vh-line); background: var(--vh-panel); transition: all .18s var(--vh-ease); } .vh-pill:hover { border-color: var(--vh-acc-line); background: var(--vh-acc-soft); } /* 更多(纯 CSS 下拉) */ .vh-more { position: relative; } .vh-more-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; min-width: 320px; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--vh-menu-bg); border: 1px solid var(--vh-line); border-radius: 14px; box-shadow: var(--vh-menu-shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s var(--vh-ease); } .vh-more:hover .vh-more-panel, .vh-more:focus-within .vh-more-panel { opacity: 1; visibility: visible; transform: translateY(0); } .vh-more-panel a { padding: 8px 10px; border-radius: 9px; font-size: 13.5px; color: var(--vh-dim); transition: all .16s var(--vh-ease); } .vh-more-panel a:hover { color: var(--vh-text); background: var(--vh-panel-2); } /* ---------- 首页:骨架 ---------- */ .vh-body { padding-top: 26px; } /* Hero(图片之上的深色遮罩与标题白字,与调色板无关) */ .vh-hero { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 20px; } .vh-lead { position: relative; display: block; overflow: hidden; border-radius: 20px; border: 1px solid var(--vh-line-soft); min-height: 420px; background: linear-gradient(135deg, #101728, #0a1020); box-shadow: var(--vh-card-shadow); } .vh-lead-bg { position: absolute; inset: 0; } .vh-lead-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--vh-ease); } .vh-lead:hover .vh-lead-bg img { transform: scale(1.035); } .vh-lead-mask { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 8, 15, .28) 0%, rgba(6, 8, 15, .72) 48%, rgba(6, 8, 15, .96) 100%); } .vh-lead-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 32px 28px; } .vh-lead h1 { margin: 14px 0 0; font-size: 31px; line-height: 1.34; font-weight: 800; letter-spacing: -.015em; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); } .vh-lead-ex { margin: 12px 0 0; font-size: 14.5px; line-height: 1.75; color: rgba(255, 255, 255, .74); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vh-lead-meta { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .60); display: flex; flex-wrap: wrap; gap: 14px; } .vh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--vh-acc); background: var(--vh-acc-soft); border: 1px solid var(--vh-acc-line); } .vh-chip-hot { color: #fff; background: var(--vh-grad); border-color: transparent; } /* 最新简报 */ .vh-briefs { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid var(--vh-line-soft); background: var(--vh-panel); box-shadow: var(--vh-card-shadow); } .vh-briefs-h { display: flex; align-items: center; gap: 10px; padding: 18px 22px 12px; font-size: 15px; font-weight: 700; color: var(--vh-text); } .vh-briefs-h i { flex: 1 1 auto; height: 1px; background: var(--vh-line); } .vh-briefs-h em { font-size: 12px; font-style: normal; color: var(--vh-mut); letter-spacing: .08em; } .vh-briefs ul { list-style: none; margin: 0; padding: 0 8px 10px; flex: 1 1 auto; } .vh-briefs li + li { border-top: 1px solid var(--vh-line-soft); } .vh-briefs a { display: flex; gap: 12px; padding: 11px 14px; border-radius: 10px; transition: background .16s var(--vh-ease); } .vh-briefs a:hover { background: var(--vh-panel-2); } .vh-briefs time { flex: 0 0 auto; font-size: 12.5px; color: var(--vh-acc); padding-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .vh-briefs h4 { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 500; color: var(--vh-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 分类 chips */ .vh-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .vh-chips a { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; color: var(--vh-dim); border: 1px solid var(--vh-line-soft); background: var(--vh-panel); transition: all .18s var(--vh-ease); } .vh-chips a:hover { color: var(--vh-text); border-color: var(--vh-acc-line); background: var(--vh-acc-soft); transform: translateY(-1px); } /* 区块 */ .vh-sec { margin-top: 40px; } .vh-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .vh-sec-head h2 { position: relative; margin: 0; padding-left: 14px; font-size: 21px; font-weight: 750; letter-spacing: -.01em; color: var(--vh-text); } .vh-sec-head h2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 19px; border-radius: 3px; background: var(--vh-grad); } .vh-more-link { font-size: 13.5px; color: var(--vh-mut); transition: color .16s var(--vh-ease); } .vh-more-link:hover { color: var(--vh-acc); } /* 卡片网格 */ .vh-grid { display: grid; gap: 18px; } .vh-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vh-card { display: flex; flex-direction: column; overflow: hidden; position: relative; border-radius: var(--vh-radius); border: 1px solid var(--vh-line-soft); background: var(--vh-panel); box-shadow: var(--vh-card-shadow); transition: transform .22s var(--vh-ease), border-color .22s var(--vh-ease), box-shadow .22s var(--vh-ease); } .vh-card:hover { transform: translateY(-3px); border-color: var(--vh-acc-line); box-shadow: var(--vh-card-shadow-hover); } .vh-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(140deg, var(--vh-thumb-a) 0%, var(--vh-thumb-b) 55%, var(--vh-thumb-a) 100%); } .vh-thumb::after { content: ""; position: absolute; inset: 0; opacity: .75; background: radial-gradient(420px 200px at 78% -10%, var(--vh-thumb-glow), transparent 60%); } /* 图缺失(老站图片仍在搬迁中)时:淡淡水印,不留空白/破图 */ .vh-thumb::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .085; background: var(--vh-watermark) center / 46% auto no-repeat; } .vh-thumb-sm::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .085; background: var(--vh-watermark) center / 66% auto no-repeat; } .vh-thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--vh-ease); } .vh-card:hover .vh-thumb img { transform: scale(1.05); } .vh-card-body { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 16px; flex: 1 1 auto; } .vh-card-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--vh-mut); } .vh-card-meta .vh-cat { color: var(--vh-acc); font-weight: 600; } .vh-card h3 { margin: 0; font-size: 15.5px; line-height: 1.6; font-weight: 650; color: var(--vh-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vh-card:hover h3 { color: var(--vh-acc); } html[data-vh-palette="light"] .vh-card:hover h3 { color: var(--vh-text); } .vh-card p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--vh-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 左右分栏 */ .vh-split { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; margin-top: 8px; } .vh-split-side { display: flex; flex-direction: column; gap: 22px; } .vh-split .vh-sec:first-child { margin-top: 40px; } .vh-panel { border-radius: var(--vh-radius); border: 1px solid var(--vh-line-soft); background: var(--vh-panel); overflow: hidden; box-shadow: var(--vh-card-shadow); } .vh-panel-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; font-size: 15px; font-weight: 700; color: var(--vh-text); } .vh-panel-h span { position: relative; padding-left: 12px; } .vh-panel-h span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 15px; border-radius: 2px; background: var(--vh-grad); } .vh-panel-h a { font-size: 12.5px; font-weight: 500; color: var(--vh-mut); } .vh-panel-h a:hover { color: var(--vh-acc); } /* 热读榜 */ .vh-rank { list-style: none; margin: 0; padding: 0 10px 14px; } .vh-rank li + li { border-top: 1px solid var(--vh-line-soft); } .vh-rank a { display: flex; gap: 12px; padding: 11px 8px; border-radius: 9px; transition: background .16s var(--vh-ease); } .vh-rank a:hover { background: var(--vh-panel-2); } .vh-rank b { flex: 0 0 auto; width: 22px; font-size: 14px; font-weight: 800; font-style: italic; color: var(--vh-rank-num); font-variant-numeric: tabular-nums; } .vh-rank li:nth-child(1) b { color: #ef4444; } .vh-rank li:nth-child(2) b { color: #f59e0b; } .vh-rank li:nth-child(3) b { color: #eab308; } .vh-rank h4 { margin: 0; font-size: 13.5px; line-height: 1.55; font-weight: 500; color: var(--vh-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vh-rank a:hover h4 { color: var(--vh-text); } /* 图赏缩略 */ .vh-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 16px; } .vh-thumb-sm { position: relative; aspect-ratio: 1 / 1; border-radius: 11px; overflow: hidden; background: linear-gradient(140deg, var(--vh-thumb-a), var(--vh-thumb-b)); } .vh-thumb-sm img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--vh-ease); } .vh-thumb-sm:hover img { transform: scale(1.06); } .vh-thumb-sm span { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 9px 8px; font-size: 12px; line-height: 1.45; color: #fff; background: linear-gradient(180deg, transparent, rgba(6, 8, 15, .92)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- 页脚 ---------- */ .vh-foot { margin-top: 56px; border-top: 1px solid var(--vh-line-soft); background: var(--vh-foot-bg); } .vh-foot-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 44px 0 30px; } .vh-foot-brand img { height: 28px; width: auto; } .vh-foot-brand p { margin: 14px 0 0; max-width: 340px; font-size: 13px; line-height: 1.85; color: var(--vh-mut); } .vh-foot h5 { margin: 0 0 14px; font-size: 13.5px; font-weight: 700; color: var(--vh-text); letter-spacing: .02em; } .vh-foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; } .vh-foot-links a, .vh-foot-all a { font-size: 13px; color: var(--vh-mut); transition: color .16s var(--vh-ease); } .vh-foot-links a:hover, .vh-foot-all a:hover { color: var(--vh-acc); } .vh-foot-all { display: flex; flex-wrap: wrap; gap: 14px; } .vh-foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0 26px; border-top: 1px solid var(--vh-line-soft); font-size: 12.5px; color: var(--vh-faint); } .vh-foot-bottom div { display: flex; flex-wrap: wrap; gap: 16px; } .vh-foot-bottom a { color: inherit; } .vh-foot-bottom a:hover { color: var(--vh-acc); } /* ---------- 响应式 ---------- */ @media (max-width: 1120px) { .vh-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vh-split { grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; } } @media (max-width: 980px) { .vh-hero { grid-template-columns: minmax(0, 1fr); } .vh-lead { min-height: 340px; } .vh-lead h1 { font-size: 25px; } .vh-split { grid-template-columns: minmax(0, 1fr); } .vh-split-side { display: grid; grid-template-columns: 1fr 1fr; } .vh-grid-4, .vh-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vh-foot-in { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 760px) { .vh-in { padding: 0 16px; } .vh-head-in { height: 58px; gap: 14px; } .vh-logo img { height: 26px; } .vh-nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .vh-nav::-webkit-scrollbar { display: none; } .vh-nav > a, .vh-more-btn { padding: 7px 9px; font-size: 13.5px; } .vh-more { display: none; } .vh-head-act { display: none; } .vh-body { padding-top: 18px; } .vh-lead { min-height: 300px; border-radius: 16px; } .vh-lead-body { padding: 20px 18px; } .vh-lead h1 { font-size: 21px; } .vh-lead-ex { display: none; } .vh-sec { margin-top: 30px; } .vh-sec-head h2 { font-size: 18px; } .vh-grid-4, .vh-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 14px; } .vh-split-side { grid-template-columns: minmax(0, 1fr); } .vh-foot-in { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 32px 0 22px; } .vh-foot-bottom { justify-content: flex-start; } } /* 老 style.css 给所有
加了 100px 上下内边距(窄屏 70/50px)—— 新版首页区块不需要,类选择器特异性更高,可稳定覆盖 */ .vh-hero, .vh-sec { padding: 0; } .vh-foot { padding: 0; } /* ============================================================ 内容页(文章 / 栏目 / 标签)2026-09-13 —— 与首页同一套设计语言 ============================================================ */ /* ---------- 面包屑 / 页头 ---------- */ .vh-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 18px 0 0; font-size: 13px; color: var(--vh-mut); } .vh-crumb a { color: var(--vh-mut); } .vh-crumb a:hover { color: var(--vh-acc); } .vh-crumb i { font-style: normal; opacity: .4; } .vh-crumb span { color: var(--vh-dim); } .vh-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 12px 0 0; } .vh-page-head h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.012em; color: var(--vh-text); } .vh-page-head p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--vh-mut); max-width: 760px; } .vh-count { flex: 0 0 auto; font-size: 13px; color: var(--vh-mut); white-space: nowrap; padding-bottom: 3px; } .vh-chips-filter { margin-top: 18px; } .vh-chips a.active { color: var(--vh-acc); border-color: var(--vh-acc-line); background: var(--vh-acc-soft); font-weight: 650; } .vh-empty { padding: 76px 0; text-align: center; font-size: 14px; color: var(--vh-mut); } /* 栏目页置顶大卡 */ .vh-lead-list { min-height: 340px; margin-top: 24px; } .vh-lead-list h1 { font-size: 26px; } /* ---------- 文章页 ---------- */ .vh-art { margin-top: 18px; padding: 30px 34px 26px; border-radius: 18px; border: 1px solid var(--vh-line-soft); background: var(--vh-panel); box-shadow: var(--vh-card-shadow); } .vh-art-head h1 { margin: 14px 0 0; font-size: 29px; line-height: 1.42; font-weight: 800; letter-spacing: -.015em; color: var(--vh-text); } .vh-art-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--vh-mut); } .vh-art-intro { margin: 20px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--vh-line-soft); background: var(--vh-panel-2); font-size: 14px; line-height: 1.9; color: var(--vh-dim); } /* 正文排版(老库 HTML 直接输出,这里统一观感) */ .vh-prose { margin-top: 24px; font-size: 16px; line-height: 2; color: var(--vh-dim); overflow-wrap: break-word; word-break: break-word; } .vh-prose p { margin: 0 0 18px; } .vh-prose strong, .vh-prose b { color: var(--vh-text); } .vh-prose h1, .vh-prose h2, .vh-prose h3, .vh-prose h4 { margin: 30px 0 14px; line-height: 1.5; font-weight: 750; color: var(--vh-text); letter-spacing: -.01em; } .vh-prose h2 { font-size: 21px; } .vh-prose h3 { font-size: 18px; } .vh-prose h4 { font-size: 16px; } .vh-prose > h2:first-child, .vh-prose > h3:first-child { margin-top: 0; } .vh-prose a { color: var(--vh-acc); } .vh-prose a:hover { text-decoration: underline; } .vh-prose img { max-width: 100%; height: auto; margin: 16px auto; border-radius: 12px; } .vh-prose figure { margin: 20px 0; } .vh-prose figcaption { margin-top: 8px; font-size: 13px; color: var(--vh-mut); text-align: center; } .vh-prose ul, .vh-prose ol { margin: 0 0 18px; padding-left: 24px; } .vh-prose li { margin: 7px 0; } .vh-prose blockquote { margin: 20px 0; padding: 14px 20px; border-left: 3px solid var(--vh-acc); border-radius: 0 12px 12px 0; background: var(--vh-panel-2); color: var(--vh-dim); } .vh-prose blockquote p:last-child { margin-bottom: 0; } .vh-prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; } .vh-prose th, .vh-prose td { border: 1px solid var(--vh-line); padding: 10px 12px; text-align: left; line-height: 1.7; } .vh-prose th { background: var(--vh-panel-2); color: var(--vh-text); font-weight: 650; } .vh-prose iframe, .vh-prose video, .vh-prose embed { max-width: 100%; border: 0; border-radius: 12px; } .vh-prose p > img:only-child { margin-left: auto; margin-right: auto; } .vh-prose hr { margin: 26px 0; border: 0; border-top: 1px solid var(--vh-line); } .vh-prose pre { margin: 18px 0; padding: 14px 16px; border-radius: 12px; overflow: auto; background: var(--vh-panel-2); border: 1px solid var(--vh-line-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.8; } .vh-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; } .vh-prose em { font-style: italic; } /* 标签 / 分享 */ .vh-art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--vh-line-soft); font-size: 13px; color: var(--vh-mut); } .vh-art-tags a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--vh-line); font-size: 12.5px; color: var(--vh-dim); transition: all .18s var(--vh-ease); } .vh-art-tags a:hover { color: var(--vh-acc); border-color: var(--vh-acc-line); background: var(--vh-acc-soft); } .vh-share { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--vh-mut); } .vh-share > a, .vh-share .vh-qr > a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--vh-line); color: var(--vh-dim); font-size: 14px; transition: all .18s var(--vh-ease); } .vh-share > a:hover, .vh-share .vh-qr > a:hover { color: var(--vh-acc); border-color: var(--vh-acc-line); background: var(--vh-acc-soft); } .vh-share .vh-qr { position: relative; display: inline-flex; } .vh-share .vh-qr img { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); width: 150px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--vh-line); opacity: 0; visibility: hidden; transition: all .2s var(--vh-ease); } .vh-share .vh-qr:hover img { opacity: 1; visibility: visible; } .vh-copy { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--vh-line); background: none; color: var(--vh-dim); font: inherit; font-size: 12.5px; cursor: pointer; transition: all .18s var(--vh-ease); } .vh-copy:hover { color: var(--vh-acc); border-color: var(--vh-acc-line); } /* 上一篇 / 下一篇 */ .vh-artnav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; } .vh-artnav-a { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px; border-radius: 14px; border: 1px solid var(--vh-line-soft); background: var(--vh-panel); transition: all .2s var(--vh-ease); } .vh-artnav-a:hover { border-color: var(--vh-acc-line); transform: translateY(-2px); } .vh-artnav-a em { font-style: normal; font-size: 12px; color: var(--vh-mut); } .vh-artnav-a span { font-size: 14px; line-height: 1.6; color: var(--vh-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vh-artnav .vh-next { text-align: right; } /* 分页 */ .vh-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 34px 0 8px; } .vh-pager a, .vh-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--vh-line-soft); background: var(--vh-panel); font-size: 13.5px; color: var(--vh-dim); transition: all .18s var(--vh-ease); } .vh-pager a:hover { color: var(--vh-acc); border-color: var(--vh-acc-line); } .vh-pager .on { color: #fff; background: var(--vh-grad); border-color: transparent; font-weight: 650; } .vh-pager span.dis { opacity: .45; pointer-events: none; } .vh-pager .vh-pager-i { min-width: 0; height: auto; padding: 0 4px; border: 0; background: none; font-size: 12.5px; color: var(--vh-mut); } /* 内容页响应式(放在最后,覆盖上面的定宽) */ @media (max-width: 980px) { .vh-split-side { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .vh-page-head { flex-direction: column; align-items: flex-start; gap: 6px; } .vh-page-head h1 { font-size: 21px; } .vh-art { padding: 20px 17px 18px; border-radius: 14px; } .vh-art-head h1 { font-size: 22px; } .vh-prose { font-size: 15.5px; line-height: 1.95; } .vh-artnav { grid-template-columns: minmax(0, 1fr); } .vh-artnav .vh-next { text-align: left; } .vh-split-side { grid-template-columns: minmax(0, 1fr); } .vh-lead-list { min-height: 280px; } .vh-lead-list h1 { font-size: 20px; } } /* 版心 1400 后的五列排布(首页最新资讯 5 条一行) */ .vh-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1200px) { .vh-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .vh-grid-5 { grid-template-columns: minmax(0, 1fr); } } /* 置顶大卡无图时:淡品牌水印,避免大片空白 */ .vh-lead-bg::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .10; background: var(--vh-watermark) center / 26% auto no-repeat; } .vh-lead-bg img { position: relative; z-index: 1; }