这是全新一版「新闻资讯」板块预览,采用新拟态(Neumorphism)风格,用双向柔和阴影代替边框和卡片,营造出从浅灰表面“凸起”的质感。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>首页「新闻资讯」板块 · 新风格预览 v8(新拟态)</title>
<style>
:root {
--nm-bg: #e4e9f0;
--nm-light: #ffffff;
--nm-dark: #b8c2d0;
--nm-dark-2: #a3b1c6;
--brand: #ff6726;
--ink: #3d4a5c;
--ink-2: #5c6779;
--ink-3: #8a93a3;
--ink-4: #a8b0bc;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
background: var(--nm-bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.toolbar {
position: sticky; top: 0; z-index: 100;
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center; justify-content: center;
padding: 14px 16px;
background: var(--nm-bg);
box-shadow: 0 6px 14px rgba(184,194,208,.55);
}
.toolbar .label { font-size: 12px; color: var(--ink-3); margin-right: 4px; }
.toolbar button {
appearance: none; font-family: inherit; cursor: pointer;
border: none; background: var(--nm-bg); color: var(--ink-2);
font-size: 12px; font-weight: 700;
padding: 8px 16px; border-radius: 999px;
box-shadow:
4px 4px 8px var(--nm-dark),
-4px -4px 8px var(--nm-light);
transition: box-shadow .22s, color .22s;
}
.toolbar button:hover {
color: var(--brand);
box-shadow:
2px 2px 5px var(--nm-dark),
-2px -2px 5px var(--nm-light);
}
.toolbar button.on {
color: var(--brand);
box-shadow:
inset 4px 4px 8px var(--nm-dark),
inset -4px -4px 8px var(--nm-light);
}
.stage {
container-type: inline-size;
width: 100%;
margin: 0 auto;
transition: width .35s cubic-bezier(.22,.61,.36,1);
}
#news.messageBox {
background: var(--nm-bg);
padding: 96px 24px 100px;
}
.newsShell {
max-width: 1280px;
margin: 0 auto;
}
.topBar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 52px;
}
.head { min-width: 0; }
.kicker {
display: inline-flex; align-items: center; gap: 12px;
font-size: 11px; font-weight: 800;
letter-spacing: .26em;
color: var(--brand);
}
.kicker::before {
content: "";
width: 10px; height: 10px;
border-radius: 50%;
background: var(--nm-bg);
box-shadow:
3px 3px 6px var(--nm-dark),
-3px -3px 6px var(--nm-light);
}
.title {
margin: 20px 0 0;
font-size: 44px; font-weight: 800;
line-height: 1.12; letter-spacing: -0.03em;
color: var(--ink);
}
.sub {
margin: 14px 0 0;
font-size: 15px; line-height: 1.7;
color: var(--ink-3);
}
.more {
flex: none;
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px;
border-radius: 999px;
background: var(--nm-bg);
color: var(--brand);
font-size: 14px; font-weight: 800;
text-decoration: none;
white-space: nowrap;
box-shadow:
7px 7px 14px var(--nm-dark),
-7px -7px 14px var(--nm-light);
transition: box-shadow .25s cubic-bezier(.22,.61,.36,1),
transform .25s cubic-bezier(.22,.61,.36,1);
}
.more i {
font-style: normal;
transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.more:hover {
box-shadow:
inset 6px 6px 12px var(--nm-dark),
inset -6px -6px 12px var(--nm-light);
transform: translateY(1px);
}
.more:hover i { transform: translateX(4px); }
.bento {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 264px);
gap: 26px;
}
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--nm-bg);
border-radius: 24px;
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow:
10px 10px 22px var(--nm-dark),
-10px -10px 22px var(--nm-light);
transition: box-shadow .35s cubic-bezier(.22,.61,.36,1),
transform .35s cubic-bezier(.22,.61,.36,1);
}
.card:hover {
transform: translateY(-3px);
box-shadow:
15px 15px 30px var(--nm-dark),
-13px -13px 28px var(--nm-light);
}
.media {
position: relative;
flex: 0 0 auto;
margin: 10px;
border-radius: 16px;
overflow: hidden;
background: var(--nm-bg);
}
.media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.card:hover .media img { transform: scale(1.05); }
.media::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
box-shadow:
inset 7px 7px 14px rgba(163,177,198,.60),
inset -7px -7px 14px rgba(255,255,255,.85);
pointer-events: none;
z-index: 2;
}
.body {
display: flex;
flex-direction: column;
min-width: 0;
}
.card--hero {
grid-column: span 2;
grid-row: span 2;
}
.card--hero .media {
flex: 0 0 52%;
border-radius: 20px;
}
.card--hero .body {
flex: 1;
padding: 6px 28px 26px;
justify-content: center;
}
.tag {
display: inline-flex; align-items: center; gap: 7px;
align-self: flex-start;
padding: 6px 13px;
border-radius: 999px;
font-size: 11px; font-weight: 800;
letter-spacing: .08em;
color: var(--brand);
background: var(--nm-bg);
box-shadow:
inset 3px 3px 6px var(--nm-dark),
inset -3px -3px 6px var(--nm-light);
}
.tag::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 8px rgba(255,103,38,.7);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .45; transform: scale(.72); }
}
.card--hero .titleH {
margin: 16px 0 0;
font-size: 24px; font-weight: 800;
line-height: 1.44; letter-spacing: -0.015em;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .25s;
}
.card--hero:hover .titleH { color: var(--brand); }
.card--hero .excerpt {
margin: 10px 0 0;
font-size: 14px; line-height: 1.7;
color: var(--ink-3);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card--hero .meta {
margin-top: 18px;
font-size: 13px;
color: var(--ink-4);
letter-spacing: .04em;
}
.card--sm .media { flex: 0 0 54%; border-radius: 14px; }
.card--sm .body {
flex: 1;
padding: 4px 18px 18px;
justify-content: space-between;
gap: 10px;
}
.card--sm .titleH {
margin: 0;
font-size: 15px; font-weight: 700;
line-height: 1.5; letter-spacing: -0.005em;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .25s;
}
.card--sm:hover .titleH { color: var(--brand); }
.card--sm .meta {
font-size: 12px;
color: var(--ink-4);
letter-spacing: .04em;
}
.card--wide {
grid-column: span 2;
flex-direction: row;
align-items: stretch;
}
.card--wide .media {
flex: 0 0 38%;
min-height: 0;
margin: 10px 0 10px 10px;
border-radius: 14px;
}
.card--wide .body {
flex: 1;
padding: 20px 24px;
justify-content: center;
}
.card--wide .titleH {
margin: 0;
font-size: 17px; font-weight: 700;
line-height: 1.5; letter-spacing: -0.005em;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .25s;
}
.card--wide:hover .titleH { color: var(--brand); }
.card--wide .excerpt {
margin: 8px 0 0;
font-size: 13px; line-height: 1.65;
color: var(--ink-3);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card--wide .meta {
margin-top: 14px;
font-size: 12px;
color: var(--ink-4);
letter-spacing: .04em;
}
@container (max-width: 1120px) {
#news.messageBox { padding: 84px 24px 88px; }
.title { font-size: 40px; }
.bento {
grid-template-rows: repeat(2, 244px);
gap: 22px;
}
.card { border-radius: 22px; }
.card--hero .body { padding: 6px 24px 22px; }
.card--hero .titleH { font-size: 21px; margin-top: 14px; }
.card--hero .excerpt { font-size: 13px; }
.card--sm .body { padding: 4px 16px 16px; }
.card--sm .titleH { font-size: 14px; }
.card--wide .body { padding: 18px 20px; }
.card--wide .titleH { font-size: 16px; }
}
@container (max-width: 880px) {
#news.messageBox { padding: 64px 20px 68px; }
.topBar { margin-bottom: 34px; }
.title { font-size: 32px; }
.sub { font-size: 14px; }
.more { padding: 12px 22px; font-size: 13px; }
.bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
gap: 20px;
}
.card--hero {
grid-column: span 2;
grid-row: auto;
min-height: 420px;
}
.card--hero .media { flex: 0 0 auto; aspect-ratio: 16 / 9; }
.card--hero .body { padding: 8px 22px 22px; }
.card--hero .titleH { font-size: 20px; }
.card--sm { min-height: 250px; }
.card--sm .media { flex: 0 0 auto; aspect-ratio: 16 / 10; }
.card--wide {
grid-column: span 2;
min-height: 200px;
}
.card--wide .media { flex: 0 0 34%; }
.card--wide .body { padding: 18px 20px; }
.card--wide .titleH { font-size: 16px; }
}
@container (max-width: 640px) {
#news.messageBox { padding: 48px 16px 52px; }
.topBar {
flex-direction: column;
align-items: flex-start;
gap: 20px;
margin-bottom: 28px;
}
.title { font-size: 26px; margin-top: 14px; }
.sub { font-size: 13px; margin-top: 10px; }
.more { width: 100%; justify-content: center; padding: 13px 20px; }
.bento {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.card--hero,
.card--sm,
.card--wide {
grid-column: span 1 !important;
min-height: 0;
border-radius: 18px;
flex-direction: column;
}
.card--hero .media,
.card--sm .media,
.card--wide .media {
flex: 0 0 auto;
aspect-ratio: 16 / 9;
width: auto;
margin: 8px;
border-radius: 12px;
}
.card--hero .body,
.card--sm .body,
.card--wide .body {
flex: 1;
padding: 4px 16px 16px;
justify-content: flex-start;
}
.card--hero .titleH { font-size: 17px; margin-top: 10px; }
.card--sm .titleH { font-size: 15px; margin: 0; }
.card--wide .titleH { font-size: 15px; }
.card--hero .excerpt,
.card--wide .excerpt { display: none; }
.card--hero .meta,
.card--sm .meta,
.card--wide .meta { margin-top: 10px; font-size: 12px; }
.tag { font-size: 10px; padding: 5px 11px; }
}
@container (max-width: 380px) {
.title { font-size: 22px; }
.card--hero .titleH { font-size: 16px; }
.card--sm .titleH { font-size: 14px; }
.card--wide .titleH { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
.notes {
max-width: 1280px;
margin: 40px auto 80px;
padding: 0 24px;
font-size: 13px; line-height: 1.9; color: var(--ink-2);
}
.notes h4 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.notes ul { margin: 0; padding-left: 18px; }
.notes li { margin-bottom: 6px; }
.notes code {
background: var(--nm-bg); padding: 2px 7px; border-radius: 6px;
font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
box-shadow: inset 2px 2px 4px var(--nm-dark), inset -2px -2px 4px var(--nm-light);
}
</style>
</head>
<body>
<div class="toolbar">
<span class="label">预览宽度</span>
<button data-w="auto" class="on">自适应</button>
<button data-w="1440">1440</button>
<button data-w="1280">1280</button>
<button data-w="980">980</button>
<button data-w="768">768</button>
<button data-w="390">390</button>
</div>
<div class="stage" id="stage">
<section class="messageBox" id="news">
<div class="newsShell">
<div class="topBar">
<div class="head">
<span class="kicker">NEWS</span>
<h3 class="title">新闻资讯</h3>
<p class="sub">4000+ 企业客户的共同选择</p>
</div>
<a class="more" href="/news">更多资讯 <i>→</i></a>
</div>
<div class="bento">
<a class="card card--hero" href="/shows/19/1001.html">
<div class="media">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaeef4'/%3E%3Cstop offset='1' stop-color='%23d6dce6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3Cg transform='translate(400 210)' fill='none' stroke='%239aa4b4' stroke-width='5'%3E%3Crect x='-80' y='-60' width='160' height='120' rx='14'/%3E%3Ccircle cx='-36' cy='-22' r='14'/%3E%3Cpath d='M-64 46 L-22 -2 L10 30 L40 -4 L76 46 Z' stroke-linejoin='round'/%3E%3C/g%3E%3Ctext x='400' y='350' text-anchor='middle' font-family='sans-serif' font-size='22' font-weight='500' fill='%239aa4b4' letter-spacing='3'%3E暂无图片%3C/text%3E%3C/svg%3E"
alt="暂无图片" loading="lazy" decoding="async" />
</div>
<div class="body">
<span class="tag">最新动态</span>
<h4 class="titleH">LovePS 发布 AI 智能助手 2.0:让企业服务响应速度提升 300%</h4>
<p class="excerpt">支持多轮对话、知识库自动学习与工单智能分派,把平均响应时间从 8 分钟压缩到 90 秒以内。</p>
<time class="meta" datetime="2026-10-01">2026 / 10 / 01</time>
</div>
</a>
<a class="card card--sm" href="/shows/19/1002.html">
<div class="media">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaeef4'/%3E%3Cstop offset='1' stop-color='%23d6dce6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='300' fill='url(%23g)'/%3E%3Cg transform='translate(200 128)' fill='none' stroke='%239aa4b4' stroke-width='4'%3E%3Crect x='-40' y='-30' width='80' height='60' rx='10'/%3E%3Ccircle cx='-18' cy='-10' r='7'/%3E%3Cpath d='M-32 22 L-12 0 L4 14 L18 -2 L34 22 Z' stroke-linejoin='round'/%3E%3C/g%3E%3Ctext x='200' y='200' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%239aa4b4'%3E暂无图片%3C/text%3E%3C/svg%3E"
alt="暂无图片" loading="lazy" decoding="async" />
</div>
<div class="body">
<h4 class="titleH">Semrush 2026 全球 SEO 趋势报告:AI 搜索正在重塑流量结构</h4>
<time class="meta" datetime="2026-09-30">2026 / 09 / 30</time>
</div>
</a>
<a class="card card--sm" href="/shows/19/1003.html">
<div class="media">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaeef4'/%3E%3Cstop offset='1' stop-color='%23d6dce6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='300' fill='url(%23g)'/%3E%3Cg transform='translate(200 128)' fill='none' stroke='%239aa4b4' stroke-width='4'%3E%3Crect x='-40' y='-30' width='80' height='60' rx='10'/%3E%3Ccircle cx='-18' cy='-10' r='7'/%3E%3Cpath d='M-32 22 L-12 0 L4 14 L18 -2 L34 22 Z' stroke-linejoin='round'/%3E%3C/g%3E%3Ctext x='200' y='200' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%239aa4b4'%3E暂无图片%3C/text%3E%3C/svg%3E"
alt="暂无图片" loading="lazy" decoding="async" />
</div>
<div class="body">
<h4 class="titleH">企业数字化转型白皮书 2026:从流量思维到用户资产思维</h4>
<time class="meta" datetime="2026-09-28">2026 / 09 / 28</time>
</div>
</a>
<a class="card card--wide" href="/shows/19/1004.html">
<div class="media">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaeef4'/%3E%3Cstop offset='1' stop-color='%23d6dce6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='600' height='400' fill='url(%23g)'/%3E%3Cg transform='translate(300 180)' fill='none' stroke='%239aa4b4' stroke-width='4.5'%3E%3Crect x='-50' y='-38' width='100' height='76' rx='12'/%3E%3Ccircle cx='-22' cy='-14' r='9'/%3E%3Cpath d='M-40 30 L-14 -2 L6 18 L24 -4 L48 30 Z' stroke-linejoin='round'/%3E%3C/g%3E%3Ctext x='300' y='278' text-anchor='middle' font-family='sans-serif' font-size='17' fill='%239aa4b4'%3E暂无图片%3C/text%3E%3C/svg%3E"
alt="暂无图片" loading="lazy" decoding="async" />
</div>
<div class="body">
<h4 class="titleH">网站速度优化实战:把 LCP 从 4.2s 降到 1.1s 的 7 个动作</h4>
<p class="excerpt">不用重写前端,也不用换服务器。这 7 个动作按投入产出比排序,第 3 个几乎零成本。</p>
<time class="meta" datetime="2026-09-25">2026 / 09 / 25</time>
</div>
</a>
</div>
</div>
</section>
</div>
<div class="notes">
<h4>这一版改了什么</h4>
<ul>
<li><b>新拟态(Neumorphism)</b>:去掉所有边框和描边,改用双向柔和阴影——左上亮、右下暗——让卡片从浅灰表面上「凸起」。</li>
<li><b>同色系</b>:背景、卡片、按钮统一使用 <code>#e4e9f0</code>,阴影亮色 <code>#ffffff</code>、暗色 <code>#b8c2d0</code>,营造「同一块材质被塑形」的观感。</li>
<li><b>凸 / 凹两种语义</b>:
<ul>
<li><b>凸起</b>:卡片、按钮、NEWS 小圆点 —— 表示「可以看 / 可以点」;</li>
<li><b>凹陷</b>:图片位、标签胶囊、按钮 hover —— 表示「嵌入的屏幕 / 已按下」。</li>
</ul>
</li>
<li><b>图片位嵌入</b>:<code>.media</code> 用 <code>inset</code> 阴影做成凹槽,上面再叠一层 <code>::after</code> 覆盖层,让图片看起来像嵌进面板里。</li>
<li><b>hover 反馈</b>:卡片 hover 时阴影变大 + 上移 3px(浮起感);按钮 hover 时反转为内凹(按下感)。</li>
<li><b>Bento Grid 结构保留</b>:大卡 2×2、小卡 1×1、宽卡 2×1 的错落布局不变,只换视觉语言。</li>
<li><b>与线上约束对齐</b>:<code>id="news"</code> 保留、仍在 <code>AboutNewsFooter</code> 内、<code>#about</code> 不受影响、CSS 依旧走 <code>legacy-home.css</code> 单一入口。</li>
</ul>
</div>
<script>
const stage = document.getElementById('stage');
const buttons = document.querySelectorAll('.toolbar button[data-w]');
buttons.forEach(btn => {
btn.addEventListener('click', () => {
buttons.forEach(b => b.classList.remove('on'));
btn.classList.add('on');
const w = btn.dataset.w;
stage.style.width = (w === 'auto') ? '100%' : (w + 'px');
});
});
</script>
</body>
</html>
```
### 新拟态的核心:同色材质 + 双向阴影
这一版彻底去掉了边框和描边,改用新拟态最典型的“双向阴影”来塑造立体感。
**同一块材质,两种形态**
背景、卡片、按钮全部使用同一个浅灰 `#e4e9f0`,视觉上像同一块材质被压出了不同形状。凸起时左上亮、右下暗,凹陷时反过来——这个规则贯穿整个板块。
**凸起代表“可操作”**
卡片、按钮、“NEWS”前面的小圆点都是凸起的。卡片 hover 时阴影变大并上移 3px,形成浮起感;按钮 hover 时则反转为内凹,模拟被按下的动作。
**凹陷代表“嵌入”**
图片位是最关键的凹陷区域。`inset` 阴影让图片看起来像嵌在面板里的一块屏幕,而不是浮在上面的卡片。为了让内阴影在图片上方也能显示,额外加了一层 `::after` 覆盖层。
**标签也是凹陷的**
“最新动态”标签用内凹的小胶囊,和凸起的卡片形成对比。橙色小圆点在里面轻轻脉动,是新拟态里少见的一点动态。
**Bento Grid 结构保留**
大卡 2×2、小卡 1×1、宽卡 2×1 的错落布局没有变,只换视觉语言。这样内容节奏和上一版一致,但观感完全不同。
---
**优化建议:** 新拟态在浅色屏幕上效果最好,如果用户系统开启了深色模式,建议额外准备一套深色新拟态配色(背景 `#2a2f38`、亮阴影 `#353b47`、暗阴影 `#1e2229`),否则深色下阴影会几乎不可见。