加了 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-lead) center / 26% auto no-repeat; } .vh-lead-bg img { position: relative; z-index: 1; } /* 回到顶部按钮(老 main.js 注入,这里接管外观与定位;防「页脚下方留白」复发) */ .back-to-top { position: fixed; right: 26px; bottom: 26px; z-index: 300; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vh-acc-line); background: var(--vh-grad); color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .22s var(--vh-ease), transform .22s var(--vh-ease), visibility .22s var(--vh-ease); display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { transform: translateY(-3px); } @media (max-width: 760px) { .back-to-top { right: 16px; bottom: 18px; width: 40px; height: 40px; } } /* 悬浮按钮与页脚右下角文字错开(悬停/滚到底时不遮备案号) */ @media (min-width: 981px) { .vh-foot-bottom { padding-right: 72px; } } /* ===== 首页 Hero 重构(2026-09-13)===== */ /* 关键修复:置顶大卡的无图水印规则给 .vh-lead-bg img 设了 z-index:1, 把遮罩(.vh-lead-mask)与文字(.vh-lead-body,均 z-index auto)整个盖住了 —— 于是标题白字压在浅色照片上等于看不见。这里重排层级:图0 < 遮罩1 < 文字2 */ .vh-lead-bg { z-index: 0; } .vh-lead-mask { z-index: 1; } .vh-lead-body { z-index: 2; } /* 版面升级 */ @media (min-width: 981px) { .vh-hero { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 22px; } } .vh-lead { min-height: 470px; border-radius: 22px; } .vh-lead-mask { background: linear-gradient(180deg, rgba(6,8,15,.08) 0%, rgba(6,8,15,.40) 40%, rgba(6,8,15,.84) 76%, rgba(6,8,15,.97) 100%); } .vh-lead-body { padding: 34px 36px 30px; max-width: 94%; } .vh-lead h1 { margin: 16px 0 0; font-size: 33px; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .vh-lead-ex { margin-top: 13px; font-size: 14.5px; } .vh-lead-meta { margin-top: 18px; gap: 16px; } .vh-chip-hot { box-shadow: 0 8px 20px rgba(37, 99, 235, .32); } /* 右侧「最新动态」面板 */ .vh-briefs { border-radius: 22px; } .vh-briefs-h { padding: 19px 20px 2px; font-size: 15.5px; gap: 9px; } .vh-live { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); animation: vh-live-pulse 1.9s var(--vh-ease) infinite; } @keyframes vh-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .vh-briefs ul { padding: 4px 8px 2px; } .vh-briefs a { padding: 12px 14px; } .vh-briefs li:first-child a { background: var(--vh-panel-2); } .vh-briefs li:first-child h4 { font-weight: 600; } .vh-briefs h4 { font-size: 14px; line-height: 1.6; } .vh-briefs-f { border-top: 1px solid var(--vh-line-soft); padding: 12px 20px; text-align: center; font-size: 13.5px; letter-spacing: .02em; } .vh-briefs-f a { color: var(--vh-acc); font-weight: 600; } .vh-briefs-f a:hover { opacity: .78; } @media (max-width: 980px) { .vh-lead { min-height: 390px; } .vh-lead-body { padding: 24px 22px; max-width: 100%; } .vh-lead h1 { font-size: 26px; } } /* 首页中部:去掉热读榜/图赏精选侧栏后,栏目精选通栏铺满,每行 4 个(2026-09-13) */ .vh-split-full { grid-template-columns: minmax(0, 1fr); gap: 0; } /* ===== 首页主体重构(2026-09-13 v2)===== */ /* 分带:除首节外,各带之间用细线分隔并留出呼吸感 */ .vh-sec + .vh-sec { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--vh-line-soft); } /* 焦点带(最新资讯):1 大 + N 小 */ .vh-grid-6 { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .vh-card-feat { grid-column: span 2; } .vh-card-feat .vh-thumb { aspect-ratio: 16 / 9; } .vh-band-focus .vh-card:not(.vh-card-feat) p { display: none; } .vh-band-focus .vh-card:not(.vh-card-feat) h3 { font-size: 14.5px; -webkit-line-clamp: 3; } .vh-band-focus .vh-card:not(.vh-card-feat) .vh-card-body { padding: 12px 14px 14px; gap: 7px; } /* 栏目带:横向卡片(2 列 × 2 行) */ .vh-grid-2 { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 700px) { .vh-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 行业观察:浅色带,收尾更完整 */ .vh-band-industry { background: var(--vh-panel-2); border: 1px solid var(--vh-line-soft); border-radius: 22px; padding: 24px 24px 28px; } @media (min-width: 981px) { .vh-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } .vh-card-feat { grid-column: span 2; } .vh-card-feat .vh-card-body { padding: 16px 18px 18px; gap: 10px; } .vh-card-feat h3 { font-size: 20px; line-height: 1.5; -webkit-line-clamp: 3; } .vh-card-h { flex-direction: row; min-height: 150px; } .vh-card-h .vh-thumb { flex: 0 0 42%; align-self: stretch; aspect-ratio: auto; } .vh-card-h .vh-card-body { padding: 15px 17px; } .vh-card-h h3 { font-size: 16.5px; } .vh-card-h p { -webkit-line-clamp: 2; } .vh-band-industry { padding: 28px 28px 32px; } } /* ===== 图赏(图集)详情页:画廊 + 灯箱(2026-09-13) ===== */ .vh-gal-n { color: var(--vh-acc); font-weight: 600; } .vh-galwrap { margin-top: 8px; } .vh-gal { margin: 20px 0 6px; } .vh-gal-stage { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(300px, 32vw, 460px); padding: 18px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 130% at 50% 0%, #1c2436 0%, #0c1017 100%); } .vh-gal-img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; cursor: zoom-in; transition: opacity .2s var(--vh-ease, cubic-bezier(.4, 0, .2, 1)); } .vh-gal-img.err { opacity: .22; } .vh-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 14, 22, .55); color: #fff; font-size: 15px; cursor: pointer; backdrop-filter: blur(6px); transition: var(--vh-ease, cubic-bezier(.4, 0, .2, 1)); } .vh-gal-nav:hover { background: var(--vh-grad); border-color: transparent; transform: translateY(-50%) scale(1.06); } .vh-gal-prev { left: 16px; } .vh-gal-next { right: 16px; } .vh-gal-num { position: absolute; top: 16px; right: 16px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(10, 14, 22, .62); border: 1px solid rgba(255, 255, 255, .14); color: #e8eefc; font-size: 12.5px; letter-spacing: .3px; } .vh-gal-num b { color: #fff; } .vh-gal-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 4px 11px; } .vh-gal-cap { margin: 0; font-size: 14px; color: var(--vh-dim); } .vh-gal-tip { font-size: 12.5px; color: var(--vh-faint); white-space: nowrap; } .vh-gal-tip b { color: var(--vh-mut); font-weight: 600; } .vh-gal-thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 3px 2px 14px; scrollbar-width: thin; } .vh-gal-thumbs::-webkit-scrollbar { height: 6px; } .vh-gal-thumbs::-webkit-scrollbar-thumb { background: var(--vh-line); border-radius: 3px; } .vh-gal-th { flex: 0 0 auto; width: 150px; height: 96px; padding: 0; cursor: pointer; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--vh-panel-2); transition: var(--vh-ease, cubic-bezier(.4, 0, .2, 1)); } .vh-gal-th img { display: block; width: 100%; height: 100%; object-fit: cover; } .vh-gal-th:hover { transform: translateY(-2px); } .vh-gal-th.on { border-color: var(--vh-acc); box-shadow: 0 8px 20px -8px var(--vh-acc); } /* 灯箱(JS 会把它移到 body 下,需保持 fixed,别被 .vh-page > * 规则改成 relative) */ .vh-lb { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: rgba(5, 7, 12, .94); opacity: 0; transition: opacity .2s var(--vh-ease, cubic-bezier(.4, 0, .2, 1)); } .vh-page > .vh-lb { position: fixed; } .vh-lb[hidden] { display: none; } .vh-lb.on { opacity: 1; } .vh-lb img { max-width: 92vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .vh-lb-x, .vh-lb-nav { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; padding: 0; backdrop-filter: blur(6px); transition: var(--vh-ease, cubic-bezier(.4, 0, .2, 1)); } .vh-lb-x { top: 18px; right: 20px; width: 42px; height: 42px; border-radius: 50%; font-size: 17px; } .vh-lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 17px; } .vh-lb-prev { left: 22px; } .vh-lb-next { right: 22px; } .vh-lb-x:hover, .vh-lb-nav:hover { background: var(--vh-grad); border-color: transparent; } .vh-lb-bar { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; gap: 16px; align-items: center; justify-content: center; color: #c7d2e4; font-size: 13px; } .vh-lb-bar span:first-child { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); } @media (max-width: 760px) { .vh-gal-stage { height: clamp(240px, 60vw, 330px); padding: 12px; border-radius: 14px; } .vh-gal-img { max-height: 46vh; } .vh-gal-nav { width: 38px; height: 38px; font-size: 13px; } .vh-gal-prev { left: 8px; } .vh-gal-next { right: 8px; } .vh-gal-num { top: 10px; right: 10px; font-size: 11.5px; padding: 4px 9px; } .vh-gal-th { width: 104px; height: 68px; } .vh-gal-tip { display: none; } .vh-lb-nav { width: 42px; height: 42px; } .vh-lb-prev { left: 10px; } .vh-lb-next { right: 10px; } } /* ===== 字号统一(2026-09-13):菜单与内容正文 16px ===== */ .vh-nav > a, .vh-more-btn { font-size: 16px; } .vh-more-panel a { font-size: 15px; } .vh-card p { font-size: 15px; line-height: 1.75; } .vh-card h3 { font-size: 16.5px; } .vh-card-meta { font-size: 13px; } .vh-sec-head h2 { font-size: 22px; } .vh-briefs h4 { font-size: 15px; } .vh-briefs time { font-size: 13px; } /* ===== 首页主体重构 v3:参考 smzdm(2026-09-13)===== 要点:图为主的无边框卡片、4:3 圆角图、TOP 角标、分区标题带下划线、大留白 */ .vh-band-grid .vh-card { border: 0; background: transparent; box-shadow: none; border-radius: 0; } .vh-band-grid .vh-card:hover { transform: translateY(-2px); border: 0; box-shadow: none; } .vh-band-grid .vh-thumb { border-radius: 14px; aspect-ratio: 4 / 3; } .vh-band-grid .vh-card-body { padding: 11px 2px 0; gap: 7px; } .vh-band-grid .vh-card h3 { font-size: 16.5px; font-weight: 700; line-height: 1.5; } .vh-band-grid .vh-card p { display: none; } .vh-band-grid .vh-card-meta { font-size: 13px; gap: 8px; } .vh-band-grid .vh-card:hover h3 { color: var(--vh-acc); } /* 分区标题:smzdm 式,标题 + 细分隔线 + 右侧查看更多 */ .vh-band-grid .vh-sec-head { border-bottom: 1px solid var(--vh-line-soft); padding-bottom: 13px; margin-bottom: 20px; align-items: center; } .vh-band-grid .vh-sec-head h2 { font-size: 23px; padding-left: 0; } .vh-band-grid .vh-sec-head h2::before { display: none; } .vh-band-grid .vh-more-link { font-size: 14px; display: inline-flex; align-items: center; gap: 4px; } /* TOP 角标 */ .vh-card-badge { position: absolute; left: 0; top: 0; z-index: 4; padding: 4px 11px; font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .05em; border-radius: 14px 0 12px 0; background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); } .vh-grid-4 .vh-card:nth-child(1) .vh-card-badge { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .vh-grid-4 .vh-card:nth-child(2) .vh-card-badge { background: linear-gradient(135deg, #f43f5e, #be123c); } .vh-grid-4 .vh-card:nth-child(3) .vh-card-badge { background: linear-gradient(135deg, #f59e0b, #d97706); } /* 焦点带的图卡也统一圆角 + 4:3(小卡) */ .vh-band-focus .vh-card { border: 0; background: transparent; box-shadow: none; } .vh-band-focus .vh-card:hover { border: 0; box-shadow: none; transform: translateY(-2px); } .vh-band-focus .vh-card .vh-thumb { border-radius: 14px; aspect-ratio: 4 / 3; } .vh-band-focus .vh-card-feat .vh-thumb { aspect-ratio: 16 / 9; } .vh-band-focus .vh-card-body { padding: 11px 2px 0; } .vh-band-focus .vh-card p { display: none; } .vh-band-focus .vh-card-feat p { display: -webkit-box; color: var(--vh-mut); font-size: 14px; } .vh-band-focus .vh-sec-head { border-bottom: 1px solid var(--vh-line-soft); padding-bottom: 13px; margin-bottom: 20px; align-items: center; } .vh-band-focus .vh-sec-head h2 { font-size: 23px; padding-left: 0; } .vh-band-focus .vh-sec-head h2::before { display: none; } @media (max-width: 980px) { .vh-band-grid .vh-sec-head h2, .vh-band-focus .vh-sec-head h2 { font-size: 20px; } .vh-band-grid .vh-card h3 { font-size: 15.5px; } } /* ===== 文章页主体重构(2026-09-13)===== */ /* 两栏:正文自适应 + 侧栏 300 吸顶(必须限定 min-width,否则反杀移动端单列) */ @media (min-width: 981px) { .vh-page .vh-split { grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: start; } .vh-page .vh-split-side { position: sticky; top: 84px; } } /* 标题区 */ .vh-art-head h1 { font-size: 34px; line-height: 1.36; letter-spacing: -.02em; margin: 14px 0 0; } .vh-art-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 13.5px; color: var(--vh-mut); } .vh-art-intro { margin: 22px 0 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--vh-acc); font-size: 16.5px; line-height: 1.85; color: var(--vh-dim); } /* 编辑名片 */ .vh-art-author { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 14px; border-radius: 14px; background: var(--vh-panel-2); } .vh-art-author img { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; } .vh-art-author strong { display: block; font-size: 15px; color: var(--vh-text); } .vh-art-author span { font-size: 13px; color: var(--vh-mut); } /* 正文:16.5px / 行高 1.95;图片限高,避免竖图占满整屏 */ .vh-prose { font-size: 16.5px; line-height: 1.95; margin-top: 26px; } .vh-prose p { margin: 0 0 20px; } .vh-prose img { max-width: 100%; max-height: 620px; width: auto; height: auto; margin: 22px auto; border-radius: 12px; display: block; } .vh-prose h2 { font-size: 22px; position: relative; padding-left: 14px; margin: 34px 0 14px; } .vh-prose h2::before { content: ""; position: absolute; left: 0; top: .32em; width: 4px; height: .92em; border-radius: 2px; background: var(--vh-grad); } .vh-prose h3 { font-size: 18.5px; margin: 26px 0 12px; } /* 侧栏榜单:前三名数字着色 */ .vh-page .vh-panel { border-radius: 16px; } .vh-page .vh-rank li:nth-child(1) b { color: #3b82f6; } .vh-page .vh-rank li:nth-child(2) b { color: #f43f5e; } .vh-page .vh-rank li:nth-child(3) b { color: #f59e0b; } /* 上下篇 */ .vh-artnav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; } .vh-artnav-a { display: block; padding: 14px 16px; border: 1px solid var(--vh-line-soft); border-radius: 14px; background: var(--vh-panel); transition: transform .2s var(--vh-ease), border-color .2s var(--vh-ease); } .vh-artnav-a:hover { border-color: var(--vh-acc-line); transform: translateY(-2px); } .vh-artnav-a em { display: block; font-style: normal; font-size: 12.5px; color: var(--vh-mut); margin-bottom: 6px; } .vh-artnav-a span { font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--vh-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vh-artnav .vh-next { text-align: right; } @media (max-width: 980px) { .vh-art-head h1 { font-size: 26px; } .vh-artnav { grid-template-columns: minmax(0, 1fr); } .vh-page .vh-split-side { position: static; } } /* ===== 首页主体改版(2026-09-13 v3:图文并重)—— 每块带图 + 编号热点/热榜,标题两行内不硬切 ===== */ /* ① 热点速览 */ .vh-flash { display: flex; gap: 14px 26px; margin-top: 22px; padding: 14px 18px; border-radius: var(--vh-radius); /* border: 1px solid var(--vh-line-soft); */ background: #eef0ff; /* box-shadow: var(--vh-card-shadow); */ } .vh-flash-h { flex: 0 0 auto; align-self: flex-start; position: relative; padding-left: 13px; font-size: 14.5px; font-weight: 750; color: var(--vh-text); white-space: nowrap; } .vh-flash-h::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 15px; border-radius: 2px; background: var(--vh-grad); } .vh-flash-list { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 30px; } .vh-flash-i { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14.5px; color: var(--vh-dim); } .vh-flash-i b { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--vh-grad); } .vh-flash-i span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vh-flash-i:hover { color: var(--vh-acc); } /* ② 图文行(最新资讯 / 行业观察共用) */ .vh-rows { list-style: none; margin: 0; padding: 0; } .vh-rows > li + li { border-top: 1px solid var(--vh-line-soft); } .vh-nrow a { display: flex; gap: 14px; align-items: flex-start; padding: 13px 8px; border-radius: 10px; transition: background .16s var(--vh-ease); } .vh-nrow a:hover { background: var(--vh-panel-2); } .vh-nrow-th { flex: 0 0 auto; width: 122px; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, var(--vh-thumb-a), var(--vh-thumb-b)); display: flex; align-items: center; justify-content: center; } .vh-nrow-th img { display: block; width: 100%; height: 100%; object-fit: cover; } .vh-nrow-ph { font-size: 12px; font-weight: 650; color: rgba(255, 255, 255, .82); letter-spacing: .04em; } .vh-nrow-bd { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 1px; } .vh-nrow-tt { font-size: 16px; line-height: 1.58; /* font-weight: 620; */ color: var(--vh-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vh-nrow a:hover .vh-nrow-tt { color: var(--vh-acc); } .vh-nrow-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--vh-faint); } .vh-nrow-meta i { font-style: normal; color: var(--vh-mut); } .vh-nrow-meta .vh-tm { margin-left: auto; font-variant-numeric: tabular-nums; } .vh-news-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; } .vh-news-2col > .vh-rows { min-width: 0; } /* ③ 图文卡缺图占位:渐变底 + 分类名,不留空白灰块 */ .vh-thumb { position: relative; } .vh-thumb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 650; color: rgba(255, 255, 255, .82); letter-spacing: .06em; } /* ④ 侧栏:最新图赏 */ .vh-gal-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 2px 16px 16px; } .vh-gal-mini a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--vh-line-soft); background: var(--vh-panel); transition: var(--vh-ease); } .vh-gal-mini a:hover { box-shadow: var(--vh-card-shadow-hover); } .vh-gal-mini-th { aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--vh-thumb-a), var(--vh-thumb-b)); } .vh-gal-mini-th img { display: block; width: 100%; height: 100%; object-fit: cover; } .vh-gal-mini h4 { margin: 0; padding: 8px 9px; font-size: 12.5px; line-height: 1.5; color: var(--vh-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vh-gal-mini a:hover h4 { color: var(--vh-acc); } @media (max-width: 1100px) { .vh-flash-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 980px) { .vh-news-2col { grid-template-columns: minmax(0, 1fr); gap: 0; } } @media (max-width: 760px) { .vh-flash { flex-direction: column; gap: 10px; padding: 13px 15px; } .vh-nrow-th { width: 104px; } .vh-nrow-tt { font-size: 14.5px; } .vh-nrow a { padding: 12px 4px; } .vh-gal-mini { padding: 2px 12px 14px; } } /* 首页热读榜:去掉继承自 .vh-panel 通栏规则的 100px 上下内边距(上下留白), 并让榜单撑满侧栏高度、条目均分 —— 与主栏顶部/底部对齐(2026-09-13) */ .vh-split-side { min-width: 0; } .vh-split-side > .vh-panel { padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .vh-split-side > .vh-panel > .vh-panel-h { flex: 0 0 auto; } .vh-split-side .vh-rank { flex: 1 1 auto; display: flex; flex-direction: column; } .vh-split-side .vh-rank > li { flex: 1 1 auto; display: flex; align-items: center; } .vh-split-side .vh-rank > li > a { width: 100%; } @media (max-width: 980px) { .vh-split-side > .vh-panel { flex: 0 0 auto; } .vh-split-side .vh-rank > li { flex: 0 0 auto; } } /* 主体(页面)背景改白(2026-09-13 老板要求)—— 仅浅色主题,夜间配色不受影响 */ html[data-vh-palette="light"] .vh-home, html[data-vh-palette="light"] .vh-page { background: #ffffff; } /* 白底后:浅色主题线条/阴影略微加深,保证白底上板块边界可辨(2026-09-13) */ html[data-vh-palette="light"] { --vh-line-soft: rgba(15, 23, 42, .10); --vh-line: rgba(15, 23, 42, .15); --vh-card-shadow: 0 1px 3px rgba(15, 23, 42, .07); }