7092cd845c
- 将粉丝日报改为信息优先布局，新增重点信息、话题簇、英雄焦点和热点窗口区块 - 让模板直接展示本地提纯出的有效信息，不再只依赖少量乐子文案 - 补充粉丝日报渲染辅助函数，提升证据簇和高频信息的承载能力
438 lines
12 KiB
HTML
438 lines
12 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
:root {
|
|
--bg-1: #f7efe3;
|
|
--bg-2: #fde4cf;
|
|
--bg-3: #fff7ef;
|
|
--paper: rgba(255, 252, 247, 0.98);
|
|
--text: #2f241f;
|
|
--muted: #7a6256;
|
|
--line: rgba(117, 85, 66, 0.14);
|
|
--accent: #db5f41;
|
|
--accent-2: #f3a447;
|
|
--accent-3: #ff7e67;
|
|
--shadow: 0 28px 64px rgba(132, 87, 63, 0.16);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
padding: 28px;
|
|
background:
|
|
radial-gradient(circle at 15% 12%, rgba(255,255,255,.45), transparent 22%),
|
|
radial-gradient(circle at 86% 10%, rgba(255,126,103,.16), transparent 22%),
|
|
linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%);
|
|
font-family: 'Microsoft YaHei', 'PingFang SC', 'Segoe UI', sans-serif;
|
|
color: var(--text);
|
|
}
|
|
.sheet {
|
|
width: 1080px;
|
|
margin: 0 auto;
|
|
background: var(--paper);
|
|
border-radius: 34px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid rgba(255,255,255,.78);
|
|
}
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 34px 38px 30px;
|
|
background:
|
|
radial-gradient(circle at 14% 18%, rgba(255,255,255,.2), transparent 16%),
|
|
radial-gradient(circle at 92% 18%, rgba(255,255,255,.14), transparent 18%),
|
|
linear-gradient(135deg, #ff875b 0%, #ff6a6a 42%, #f8b84e 100%);
|
|
color: #fffaf5;
|
|
}
|
|
.hero::after {
|
|
content: "INFO + FUN";
|
|
position: absolute;
|
|
right: 28px;
|
|
top: 18px;
|
|
font-size: 52px;
|
|
font-weight: 900;
|
|
letter-spacing: .08em;
|
|
color: rgba(255,255,255,.1);
|
|
transform: rotate(-6deg);
|
|
}
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 7px 14px;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,.14);
|
|
border: 1px solid rgba(255,255,255,.22);
|
|
font-size: 12px;
|
|
letter-spacing: .08em;
|
|
font-weight: 800;
|
|
}
|
|
.hero-title {
|
|
margin: 18px 0 10px;
|
|
font-size: 40px;
|
|
line-height: 1.16;
|
|
font-weight: 900;
|
|
letter-spacing: -.03em;
|
|
}
|
|
.hero-subtitle {
|
|
font-size: 16px;
|
|
color: rgba(255,250,245,.92);
|
|
}
|
|
.content {
|
|
padding: 26px 28px 32px;
|
|
}
|
|
.lead-box {
|
|
padding: 22px 26px;
|
|
border-radius: 24px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,244,236,.96));
|
|
border: 1px solid rgba(219,95,65,.14);
|
|
box-shadow: 0 14px 30px rgba(171, 106, 75, 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.82;
|
|
color: #4b332b;
|
|
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: 20px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,245,239,.92));
|
|
border: 1px solid rgba(219,95,65,.12);
|
|
}
|
|
.fans-metric-label {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
.fans-metric-value {
|
|
font-size: 28px;
|
|
line-height: 1;
|
|
font-weight: 900;
|
|
color: #cf593e;
|
|
word-break: break-all;
|
|
}
|
|
.fans-metric-hint {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: #8f7368;
|
|
line-height: 1.5;
|
|
}
|
|
.section {
|
|
margin-top: 18px;
|
|
padding: 22px;
|
|
border-radius: 26px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,244,.94));
|
|
border: 1px solid var(--line);
|
|
}
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
color: #5b2d23;
|
|
}
|
|
.section-title .icon {
|
|
width: 14px;
|
|
height: 28px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(180deg, var(--accent), var(--accent-2));
|
|
box-shadow: 0 6px 14px rgba(219,95,65,.2);
|
|
}
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.fans-info-card {
|
|
padding: 16px 16px 15px;
|
|
border-radius: 18px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,245,240,.94));
|
|
border: 1px solid rgba(219,95,65,.12);
|
|
min-height: 112px;
|
|
}
|
|
.fans-info-text {
|
|
font-size: 15px;
|
|
line-height: 1.76;
|
|
color: #523935;
|
|
font-weight: 600;
|
|
}
|
|
.topic-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
.topic-cluster-card {
|
|
padding: 18px 18px 14px;
|
|
border-radius: 20px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,244,237,.94));
|
|
border: 1px solid rgba(219,95,65,.12);
|
|
}
|
|
.topic-cluster-title {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
color: #6d2f22;
|
|
margin-bottom: 8px;
|
|
}
|
|
.topic-cluster-meta {
|
|
font-size: 12px;
|
|
color: #8d6c61;
|
|
margin-bottom: 10px;
|
|
}
|
|
.topic-cluster-list {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
}
|
|
.topic-cluster-list li {
|
|
margin: 8px 0;
|
|
font-size: 14px;
|
|
line-height: 1.66;
|
|
color: #4d3832;
|
|
}
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.hero-mention-card {
|
|
padding: 16px;
|
|
border-radius: 18px;
|
|
background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,241,232,.94));
|
|
border: 1px solid rgba(243,164,71,.22);
|
|
}
|
|
.hero-mention-name {
|
|
font-size: 17px;
|
|
line-height: 1.4;
|
|
font-weight: 900;
|
|
color: #6b311f;
|
|
margin-bottom: 6px;
|
|
}
|
|
.hero-mention-meta {
|
|
font-size: 12px;
|
|
color: #8c6d61;
|
|
margin-bottom: 8px;
|
|
}
|
|
.hero-mention-sample {
|
|
font-size: 14px;
|
|
line-height: 1.65;
|
|
color: #533833;
|
|
}
|
|
.timeline-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
|
|
gap: 14px;
|
|
}
|
|
.hot-window-stack,
|
|
.repeat-chip-wrap,
|
|
.meme-rank-stack {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.fans-hot-window-card,
|
|
.repeat-digest-panel,
|
|
.rank-panel {
|
|
padding: 14px 16px;
|
|
border-radius: 18px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,245,239,.94));
|
|
border: 1px solid rgba(219,95,65,.12);
|
|
}
|
|
.fans-hot-window-time {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
color: #c84f3f;
|
|
margin-bottom: 6px;
|
|
}
|
|
.fans-hot-window-meta {
|
|
font-size: 14px;
|
|
color: #5c433b;
|
|
}
|
|
.repeat-chip-wrap {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.repeat-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
border-radius: 14px;
|
|
background: rgba(255,255,255,.9);
|
|
border: 1px solid rgba(219,95,65,.1);
|
|
}
|
|
.repeat-chip.emotion {
|
|
background: rgba(255,247,236,.94);
|
|
}
|
|
.repeat-chip-text {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: #4d3932;
|
|
font-weight: 700;
|
|
}
|
|
.repeat-chip-count {
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
color: #a05441;
|
|
font-weight: 800;
|
|
}
|
|
.two-col {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
|
|
gap: 16px;
|
|
}
|
|
.funny-list {
|
|
margin: 0;
|
|
padding-left: 22px;
|
|
}
|
|
.funny-list li {
|
|
margin: 10px 0;
|
|
color: #533835;
|
|
font-size: 15px;
|
|
line-height: 1.76;
|
|
}
|
|
.meme-rank-card {
|
|
padding: 14px 16px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,240,232,.95));
|
|
border: 1px solid rgba(242,95,92,.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,.98), rgba(255,245,240,.95));
|
|
border: 1px solid rgba(255,138,61,.16);
|
|
min-height: 102px;
|
|
}
|
|
.fans-scene-quote {
|
|
color: #5b3c37;
|
|
font-size: 15px;
|
|
line-height: 1.75;
|
|
}
|
|
.closing-box {
|
|
margin-top: 16px;
|
|
padding: 20px 22px;
|
|
border-radius: 24px;
|
|
background: linear-gradient(135deg, rgba(255,126,103,.1), rgba(243,164,71,.14));
|
|
border: 1px solid rgba(255,126,103,.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 INFO 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="info-grid">{{ effective_info_html }}</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title"><span class="icon"></span><span>核心讨论话题</span></div>
|
|
<div class="topic-grid">{{ topic_clusters_html }}</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title"><span class="icon"></span><span>英雄与对局焦点</span></div>
|
|
<div class="hero-grid">{{ hero_mentions_html }}</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title"><span class="icon"></span><span>热点窗口与共识梗</span></div>
|
|
<div class="timeline-layout">
|
|
<div class="hot-window-stack">{{ hot_windows_html }}</div>
|
|
<div class="repeat-digest-panel">
|
|
<div class="repeat-chip-wrap">{{ repeat_digest_html }}</div>
|
|
</div>
|
|
</div>
|
|
</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 Info Report</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|