300 lines
9.2 KiB
HTML
300 lines
9.2 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
:root {
|
|
--bg-1: #fff4d9;
|
|
--bg-2: #ffe8d6;
|
|
--bg-3: #ffeef5;
|
|
--paper: rgba(255, 251, 245, 0.98);
|
|
--text: #2f1b1b;
|
|
--muted: #7b5e57;
|
|
--line: rgba(122, 77, 54, 0.14);
|
|
--hot-pink: #ff5d8f;
|
|
--orange: #ff8a3d;
|
|
--yellow: #ffc857;
|
|
--red: #f25f5c;
|
|
--shadow: 0 28px 64px rgba(160, 84, 58, 0.18);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
padding: 34px;
|
|
background:
|
|
radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.4), transparent 22%),
|
|
radial-gradient(circle at 88% 10%, rgba(255, 93, 143, 0.14), transparent 24%),
|
|
linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
|
|
font-family: 'Microsoft YaHei', 'PingFang SC', 'Segoe UI', sans-serif;
|
|
color: var(--text);
|
|
}
|
|
.sheet {
|
|
width: 920px;
|
|
margin: 0 auto;
|
|
background: var(--paper);
|
|
border-radius: 34px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid rgba(255, 255, 255, 0.75);
|
|
}
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 34px 38px 30px;
|
|
background:
|
|
radial-gradient(circle at 18% 22%, rgba(255,255,255,0.18), transparent 18%),
|
|
radial-gradient(circle at 90% 20%, rgba(255,255,255,0.16), transparent 20%),
|
|
linear-gradient(135deg, #ff7b54 0%, #ff5d8f 45%, #ffb703 100%);
|
|
color: #fffdf7;
|
|
}
|
|
.hero::before {
|
|
content: "哈哈哈哈";
|
|
position: absolute;
|
|
right: -10px;
|
|
top: 20px;
|
|
font-size: 66px;
|
|
font-weight: 900;
|
|
letter-spacing: .08em;
|
|
color: rgba(255,255,255,0.12);
|
|
transform: rotate(-8deg);
|
|
}
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 7px 14px;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,0.16);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
font-size: 12px;
|
|
letter-spacing: .08em;
|
|
font-weight: 700;
|
|
}
|
|
.hero-title {
|
|
margin: 18px 0 10px;
|
|
font-size: 42px;
|
|
line-height: 1.15;
|
|
font-weight: 900;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.hero-subtitle {
|
|
font-size: 16px;
|
|
color: rgba(255, 251, 245, 0.92);
|
|
}
|
|
.content {
|
|
padding: 28px 30px 34px;
|
|
}
|
|
.lead-box {
|
|
padding: 22px 24px;
|
|
border-radius: 24px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,243,237,0.96));
|
|
border: 1px solid rgba(255, 138, 61, 0.18);
|
|
box-shadow: 0 14px 30px rgba(186, 101, 69, 0.08);
|
|
}
|
|
.lead-kicker {
|
|
font-size: 13px;
|
|
color: #b45309;
|
|
letter-spacing: .08em;
|
|
font-weight: 800;
|
|
margin-bottom: 10px;
|
|
}
|
|
.lead-text {
|
|
font-size: 20px;
|
|
line-height: 1.85;
|
|
color: #4b2e2b;
|
|
font-weight: 600;
|
|
}
|
|
.fans-metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 14px;
|
|
margin-top: 16px;
|
|
}
|
|
.fans-metric-card {
|
|
padding: 18px 18px 16px;
|
|
border-radius: 22px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,245,240,0.92));
|
|
border: 1px solid rgba(255, 138, 61, 0.16);
|
|
}
|
|
.fans-metric-label {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
.fans-metric-value {
|
|
font-size: 30px;
|
|
line-height: 1;
|
|
font-weight: 900;
|
|
color: #d9485f;
|
|
word-break: break-all;
|
|
}
|
|
.fans-metric-hint {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: #8b6b63;
|
|
}
|
|
.section {
|
|
margin-top: 18px;
|
|
padding: 24px;
|
|
border-radius: 26px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,248,244,0.94));
|
|
border: 1px solid var(--line);
|
|
}
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
font-size: 26px;
|
|
font-weight: 900;
|
|
color: #5f2a2a;
|
|
}
|
|
.section-title .icon {
|
|
width: 14px;
|
|
height: 30px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(180deg, #ff5d8f, #ffb703);
|
|
box-shadow: 0 6px 16px rgba(255, 93, 143, 0.22);
|
|
}
|
|
.two-col {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
|
|
gap: 16px;
|
|
}
|
|
.funny-list {
|
|
margin: 0;
|
|
padding-left: 22px;
|
|
}
|
|
.funny-list li {
|
|
margin: 10px 0;
|
|
color: #533835;
|
|
font-size: 16px;
|
|
line-height: 1.76;
|
|
}
|
|
.meme-rank-stack {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.rank-panel {
|
|
/* 右侧梗王榜单独补一个承托容器：
|
|
1. 恢复背景层和阴影层，避免内容少时看起来像直接贴在 section 背景上；
|
|
2. 用更浅的暖色渐变和轻阴影，把右栏边界重新拉出来；
|
|
3. 保持和整张粉丝日报同一套视觉语言，不做突兀的深色描边。 */
|
|
padding: 14px;
|
|
border-radius: 22px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,244,238,0.94));
|
|
border: 1px solid rgba(242, 95, 92, 0.12);
|
|
box-shadow: 0 14px 28px rgba(186, 101, 69, 0.08);
|
|
}
|
|
.meme-rank-card {
|
|
padding: 14px 16px;
|
|
border-radius: 18px;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,240,232,0.95));
|
|
border: 1px solid rgba(242, 95, 92, 0.18);
|
|
}
|
|
.meme-rank-no {
|
|
color: #d9485f;
|
|
font-size: 12px;
|
|
letter-spacing: .08em;
|
|
font-weight: 900;
|
|
margin-bottom: 8px;
|
|
}
|
|
.meme-rank-text {
|
|
color: #4b2e2b;
|
|
font-size: 15px;
|
|
line-height: 1.66;
|
|
font-weight: 700;
|
|
}
|
|
.scene-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.fans-scene-card {
|
|
padding: 16px 16px 15px;
|
|
border-radius: 18px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,245,240,0.95));
|
|
border: 1px solid rgba(255, 138, 61, 0.16);
|
|
min-height: 108px;
|
|
}
|
|
.fans-scene-quote {
|
|
color: #5b3c37;
|
|
font-size: 15px;
|
|
line-height: 1.8;
|
|
}
|
|
.closing-box {
|
|
margin-top: 16px;
|
|
padding: 20px 22px;
|
|
border-radius: 24px;
|
|
background: linear-gradient(135deg, rgba(255, 93, 143, 0.1), rgba(255, 184, 0, 0.12));
|
|
border: 1px solid rgba(255, 93, 143, 0.16);
|
|
}
|
|
.closing-kicker {
|
|
color: #c2410c;
|
|
font-size: 13px;
|
|
letter-spacing: .08em;
|
|
font-weight: 900;
|
|
margin-bottom: 10px;
|
|
}
|
|
.closing-text {
|
|
color: #613b34;
|
|
font-size: 18px;
|
|
line-height: 1.8;
|
|
font-weight: 700;
|
|
}
|
|
.footer-note {
|
|
margin-top: 18px;
|
|
text-align: right;
|
|
color: #8f736c;
|
|
font-size: 12px;
|
|
letter-spacing: .04em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
<!-- 头图区：强调“粉丝向整活日报”的氛围，先把情绪拉起来。 -->
|
|
<div class="hero">
|
|
<div class="eyebrow">DOUYU FANS FUN REPORT</div>
|
|
<div class="hero-title">{{ title_name }} 的弹幕乐子日报</div>
|
|
<div class="hero-subtitle">{{ subtitle }}</div>
|
|
</div>
|
|
<div class="content">
|
|
<!-- 总述区：用一段话快速交代今天直播间到底好笑在哪。 -->
|
|
<div class="lead-box">
|
|
<div class="lead-kicker">今晚气氛速报</div>
|
|
<div class="lead-text">{{ lead_text }}</div>
|
|
</div>
|
|
|
|
<!-- 轻量指标区：保留真实数据来源，但展示口径更偏“乐子视角”。 -->
|
|
<div class="fans-metric-grid">{{ fans_metrics_html }}</div>
|
|
|
|
<!-- 笑点区：左侧放梗概，右侧放梗王榜，方便一眼扫完。 -->
|
|
<div class="section">
|
|
<div class="section-title"><span class="icon"></span><span>今日笑点</span></div>
|
|
<div class="two-col">
|
|
<div>{{ laugh_points_html }}</div>
|
|
<div class="rank-panel">
|
|
<div class="meme-rank-stack">{{ meme_rank_html }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 名场面区：尽量让内容保留“弹幕原声感”，增强现场回放味道。 -->
|
|
<div class="section">
|
|
<div class="section-title"><span class="icon"></span><span>弹幕名场面</span></div>
|
|
<div class="scene-grid">{{ famous_scenes_html }}</div>
|
|
</div>
|
|
|
|
<!-- 收尾句：给整张图一个群聊转发时更像“梗图文案”的落点。 -->
|
|
<div class="closing-box">
|
|
<div class="closing-kicker">收尾播报</div>
|
|
<div class="closing-text">{{ closing_text }}</div>
|
|
</div>
|
|
|
|
<div class="footer-note">ABOT · Douyu Fans Fun Report</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|