<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>雷雨·四凤卷宗 | 无声的雷</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #4a3b2c;
font-family: 'Segoe UI', '华文楷书', 'Microsoft YaHei', 'Courier New', monospace;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 20px;
}
.casebook {
max-width: 1100px;
width: 100%;
background: transparent;
position: relative;
box-shadow: 0 20px 35px rgba(0,0,0,0.5);
}
.page {
width: 210mm;
min-height: 297mm;
background: #fef7e0;
background-image: radial-gradient(circle at 10% 20%, rgba(0,0,0,0.02) 2%, transparent 2.5%);
background-size: 28px 28px;
margin: 0 auto 25px auto;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
border-radius: 4px;
position: relative;
padding: 18mm 15mm 20mm 15mm;
page-break-after: always;
break-inside: avoid;
border: 1px solid #d6bf8b;
}
@media screen {
.page {
width: 100%;
max-width: 210mm;
margin-left: auto;
margin-right: auto;
}
}
@media print {
body {
background: white;
padding: 0;
margin: 0;
}
.page {
margin: 0;
box-shadow: none;
border: 1px solid #ccc;
page-break-after: always;
break-inside: avoid;
}
.nav-controls, .print-tip {
display: none;
}
.casebook {
max-width: 100%;
box-shadow: none;
}
}
.stamp {
position: absolute;
top: 20px;
right: 25px;
transform: rotate(12deg);
opacity: 0.6;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 14px;
color: #b03a2e;
border: 2px solid #b03a2e;
padding: 5px 10px;
border-radius: 3px;
background: rgba(255,245,200,0.7);
pointer-events: none;
z-index: 2;
}
h1 {
font-size: 28px;
font-weight: 800;
letter-spacing: 4px;
margin: 15px 0 5px;
color: #2c2416;
border-left: 8px solid #9e2f1f;
padding-left: 18px;
}
.case-number {
font-family: monospace;
background: #2b2b1f;
display: inline-block;
color: #e6d5a8;
padding: 4px 12px;
font-size: 13px;
letter-spacing: 1px;
margin: 10px 0 20px 0;
}
hr.sep {
margin: 18px 0;
border: none;
height: 1px;
background: linear-gradient(90deg, #b48b5a, #f0ddb0, #b48b5a);
}
.investigator-line {
background: #f0e5cf;
padding: 8px 12px;
font-family: monospace;
margin: 15px 0;
border-left: 4px solid #8b5a2b;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sign-space {
border-bottom: 1px dotted #8b5a2b;
min-width: 160px;
display: inline-block;
margin-left: 8px;
}
mark {
background: #f9f0c1;
color: #a43b1a;
padding: 0 2px;
}
.dialogue {
background: #f7efda;
padding: 12px 18px;
margin: 16px 0;
font-family: 'Courier New', monospace;
font-size: 0.95rem;
border-left: 6px solid #bc9a6c;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.role {
font-weight: bold;
color: #6b3e1c;
}
.insight {
background: #fff2dd;
padding: 12px;
border-radius: 12px;
margin: 18px 0;
border: 1px dashed #c6a87f;
}
.task-box {
background: #e7dbbc;
margin-top: 22px;
padding: 12px 18px;
border: 2px solid #ab8e54;
}
.emotion-chart {
margin: 20px 0;
background: #fef3e0;
padding: 12px;
text-align: center;
}
.axis {
margin: 15px 0;
position: relative;
height: 140px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 140"><line x1="30" y1="110" x2="470" y2="110" stroke="%237a5a3a" stroke-width="1.5" stroke-dasharray="3 2"/><line x1="30" y1="10" x2="30" y2="110" stroke="%237a5a3a" stroke-width="1.5"/><text x="20" y="15" fill="%238b4513" font-size="10">高</text><text x="20" y="115" fill="%238b4513" font-size="10">低</text><text x="30" y="130" fill="%234d2a10" font-size="9">初登场</text><text x="130" y="130" fill="%234d2a10" font-size="9">甜蜜憧憬</text><text x="230" y="130" fill="%234d2a10" font-size="9">警告与疏远</text><text x="330" y="130" fill="%234d2a10" font-size="9">怀孕暴露</text><text x="430" y="130" fill="%234d2a10" font-size="9">雷雨夜</text></svg>') no-repeat center;
background-size: contain;
}
.footer-note {
margin-top: 25px;
font-size: 11px;
text-align: center;
color: #855e32;
border-top: 1px solid #e0caa0;
padding-top: 12px;
font-style: italic;
}
.nav-controls {
display: flex;
justify-content: center;
gap: 25px;
margin: 20px auto 10px;
position: sticky;
bottom: 20px;
background: #3f3322cc;
backdrop-filter: blur(8px);
padding: 12px 28px;
border-radius: 60px;
width: fit-content;
z-index: 999;
}
.nav-btn {
background: #2c2418;
border: none;
color: #ffefcf;
font-size: 1.3rem;
font-weight: bold;
padding: 8px 20px;
border-radius: 40px;
cursor: pointer;
transition: 0.2s;
font-family: monospace;
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
.nav-btn:hover {
background: #7e5e38;
transform: scale(1.02);
}
.page-indicator {
background: #ede3c9;
padding: 6px 18px;
border-radius: 32px;
font-weight: bold;
color: #562e1a;
}
.print-tip {
text-align: center;
margin-top: 10px;
font-size: 12px;
color: #f2e2b0;
background: #2e2a22;
display: inline-block;
padding: 4px 12px;
border-radius: 30px;
}
.dash-highlight {
background: #f1dbaa;
font-weight: bold;
padding: 0 2px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="casebook" id="casebook">
<!-- 第1页：封面 + 调查员须知 -->
<div class="page" id="page1">
<div class="stamp">
<div>绝密</div>
<div>🔍 调查副本</div>
</div>
<div style="text-align: center; margin-top: 20px;">
<div style="font-size: 48px; font-weight: 900; letter-spacing: 8px; color: #582a12;">⚡ 雷雨 ⚡</div>
<div style="font-size: 20px; margin: 8px 0; border-top: 2px solid #b48c48; border-bottom: 2px solid #b48c48; display: inline-block; padding: 4px 20px;">女性命运调查</div>
</div>
<div class="case-number">案件编号：L-2026-03 密级：无声的雷</div>
<div style="font-family: monospace; font-size: 24px; font-weight: bold; margin: 20px 0 0 0;">嫌疑人代号：<span style="background: #2b2118; color: #ecd9b4; padding: 2px 15px;">【 四 凤 】</span></div>
<div class="investigator-line">
<span>🔍 调查员姓名：<span class="sign-space" style="width: 180px;">_________________</span></span>
<span>📁 组别：<span class="sign-space" style="width: 100px;">四凤组____________</span></span>
</div>
<hr class="sep">
<div class="insight">
<p style="font-weight: bold;">⚠️ 调查员阅前须知</p>
<p style="margin-top: 8px;">你听见雷声时，往往已经什么都来不及了。这本册子是你的记忆——但你不知道后面会发生什么。</p>
<p>阅读时留意：</p>
<p>1️⃣ 谁把标签还给你？他们怎么叫你的名字？又怎么喊你别的？<br>
2️⃣ 看看你说话时那些安静下来的破折号和省略号。它们原本打算说什么？把它们找出来——也许你会察觉你咽下去的那些半句话。</p>
<p><mark>任务结束时，你将为这份卷宗画下你心里的"情绪曲线"。</mark></p>
</div>
<div style="font-size: 13px; margin-top: 25px; border-left: 3px solid #b26b3a; padding-left: 14px;">
<p>⚡ 本卷宗仅提供证词节选，结论由调查员独立完成。<br>⚡ 每一次省略都是未被听见的呐喊。</p>
</div>
<div class="footer-note">📜 卷一 · 无声的雷 • 丫鬟的梦</div>
</div>
<!-- 第2页：第一幕 楼梯口的人影 + 第二幕 我怕的不是雷声 -->
<div class="page" id="page2">
<div class="stamp" style="opacity:0.4;">证物C</div>
<h1>第一幕 · 楼梯口的人影</h1>
<p>我叫四凤。我是周公馆的丫鬟。我很早就学会低头走路，不多嘴不乱看。但有时我忍不住。他姓周——大少爷。他很早就从乡下进入大宅，不爱说话，也不像老爷那样凶。我也不知道自己是从哪一天开始注意到他的——也许是他帮我拿东西的时候，靠近我的一瞬间。也许更早。</p>
<p>他从不在下人面前摆架子。他把我当一个人，不是工具。有一天，我对母亲说起他，脸上藏不住笑——</p>
<div class="dialogue">
<div><span class="role">四凤</span>：妈，大少爷他——他对我很好。</div>
<div><span class="role">鲁妈</span>：他对你好？怎么个好法？</div>
<div><span class="role">四凤</span>：（低头，笑）他——他说要带我去——去城里。</div>
<div><span class="role">鲁妈</span>：（担心）凤儿，你现在还小，别想这些。</div>
</div>
<p>我以为这是幸福的开始。</p>
<hr class="sep">
<h1>第二幕 · 我怕的不是雷声</h1>
<p>可后来他对母亲撒谎：“四凤是个好女孩，我——我不可能做对不起她的事。”他的声音变了。我不敢相信那是从同一个嘴唇中发出来的话。</p>
<div class="dialogue">
<div><span class="role">鲁妈</span>：四凤，你以后——少跟大少爷来往。</div>
<div><span class="role">四凤</span>：为什么？妈，我......</div>
<div><span class="role">鲁妈</span>：不要问为什么——大人的事，你不知道。</div>
<div><span class="role">四凤</span>：我......我不知道......可我——可我真的很喜欢他。</div>
</div>
<div class="insight">
<p>🔍 <strong>文本侦探任务</strong>：圈出别人对四凤的称呼。谁给了她这些标签？她认同吗？</p>
</div>
<div class="footer-note">📜 卷二 · 憧憬与警告 • 话到嘴边又咽下</div>
</div>
<!-- 第3页：第三幕 她听见了 + 我怀孕了 + 雷雨奔跑 -->
<div class="page" id="page3">
<div class="stamp" style="opacity:0.4;">破碎的梦</div>
<h1>第三幕 · 她听见了</h1>
<p>繁漪忽然找上我。</p>
<div class="dialogue">
<div><span class="role">繁漪</span>：（冷冷地）四凤，你是不是以为——你能进周家的门？</div>
<div><span class="role">四凤</span>：我——我没有——我只是......</div>
<div><span class="role">繁漪</span>：你只是什么？只是——一个丫鬟。不要做梦。</div>
</div>
<p>我不知道为什么太太会对我说这些。我想告诉她——是少爷先靠近我的，不是我主动的。可到了嘴边，那些话又咽了回去。我的世界断成了两半。</p>
<p>后来，他对我的态度也变了。不再许诺。不再靠得太近。好像我身上突然添了什么脏东西，让他一定要离远。我以为是我做错什么了。</p>
<hr class="sep">
<h1>我怀孕了</h1>
<p>冲突越来越乱。老爷和少爷吵，鲁妈和太太吵。鲁大海突然出现，喊周朴园是坏资本家——我认出这是我哥哥。更早前，被发现了怀了孩子，我决定向妈妈坦白。</p>
<div class="dialogue">
<div><span class="role">四凤</span>：（哭）妈，我——我有了——</div>
<div><span class="role">鲁妈</span>：（震惊）你有什么了？</div>
<div><span class="role">四凤</span>：我......我不知道该怎么办......我——我怕......</div>
<div><span class="role">鲁妈</span>：（抱紧她）你——你这个傻孩子。</div>
</div>
<p>妈妈没出声。她只是抱住了我，一直哭。</p>
<hr class="sep">
<h1>第四幕 · 雷雨中的奔跑</h1>
<p>后来的事情我就记不太清了。雨大起来。没完没了的雷声。我甩开鲁妈的手跑出去。</p>
<div class="dialogue">
<div><span class="role">周朴园</span>：四凤——你不能走——他——他是你——你哥哥！</div>
<div><span class="role">四凤</span>：（愣住，摇头）不——不可能——你骗我——</div>
<div><span class="role">周萍</span>：四凤——</div>
<div><span class="role">四凤</span>：（尖叫）我不知道！——我什么都不知道！</div>
</div>
<p>我没听见最后那句话。雷声盖过一切。我不知道自己跑出去之后发生了什么。</p>
<div class="insight">
<p>📌 <strong>处境分析任务</strong>：四凤的反抗形态——无知？隐忍？她的“不知道”是主动选择还是结构性剥夺？</p>
</div>
<div class="footer-note">📜 卷三 · 雷声盖过一切 • 她什么都不知道</div>
</div>
<!-- 第4页：藏在你心底的秘密 + 情绪曲线 + 调查任务（无内心OS解码练习） -->
<div class="page" id="page4">
<div class="stamp">未说出的秘密</div>
<h1>📖 藏在你心底的秘密</h1>
<ul style="margin-left: 24px; margin-bottom: 20px;">
<li>你爱周萍，甚至怀了他的孩子。</li>
<li>你不知道他是你同母异父的哥哥——你们共同的母亲叫鲁侍萍。</li>
<li>你很少向别人顶嘴。你总觉得别人比你有理，因为你只是丫鬟。因此你选择了沉默，躲避，甚至到最后自己也说不出口。</li>
<li>你不知道“为什么我不知道”——你从未得到完整的讯息，也没有人帮你。</li>
<li>你以为只要听话，离开周家，一切就会好起来。但这是不可能的。你身上埋着的是两代人的秘密。</li>
</ul>
<hr class="sep">
<h3>📉 情绪曲线 · 五阶段描画</h3>
<p>根据卷宗五个阶段：<strong>初登场(丫鬟日常) → 甜蜜憧憬(与周萍相恋) → 警告与疏远(鲁妈劝阻+繁漪羞辱) → 怀孕暴露 → 雷雨夜(真相崩塌)</strong>，为每个阶段选一个情绪关键词，并在下方坐标轴对应位置标出情绪强度（1低~5高），连成曲线。</p>
<div class="emotion-chart">
<div class="axis" style="height: 140px;"></div>
、
<p style="font-size:12px; margin-top:8px;">（手绘曲线区 · 可用彩笔在卷宗上连接五点）</p>
<textarea rows="2" style="width:100%; background:#fcf4e2; border:1px solid #b89968; margin-top:10px; padding:8px;" ></textarea>
</div>
<div class="task-box">
<p><strong>📋 调查员最终任务（小组合作）</strong></p>
<ol style="margin-left: 20px;">
<li><strong>圈出定义标签</strong>：别人怎么称呼四凤？（“丫鬟”“傻孩子”“四凤”）。这些标签如何塑造了她的自我认知？她是否从未被当作一个完整的人？</li>
<li><strong>破折号/省略号标记</strong>：标出卷宗中停下来的地方（如“我只是......”“我——我怕......”“我不知道！——我什么都不知道”），思考每个停顿处她想表达却没能说完的情绪。</li>
<li><strong>反抗形态雷达图</strong>：为四凤的爆发/隐忍/无知三种反抗方式打分（1~5）。小组讨论后填入调查报告。</li>
<li><strong>缺失资源归纳</strong>：她缺少什么？教育？信息？（她从未被告知真相）经济独立？社会支持？填写表格。</li>
<li><strong>发布会准备</strong>：结合“深圳女性支持资源卡”，为2026年的四凤设计援助方案+第一步行动（如性教育普及、未成年保护、意外怀孕救助热线等）。</li>
</ol>
<p style="margin-top: 16px;">💬 <strong>讨论提示</strong>：四凤的“无知”不是天生的，而是结构性的信息隔绝。如果她生活在2026年的深圳，谁能告诉她“身体自主权”“血缘关系的真相”？请小组在方案中体现。</p>
</div>
<div class="footer-note">🔎 真相需要你来说出 —— 她本不必独自承受雷雨</div>
</div>
<!-- 第5页：援助方案工作纸 + 资源卡引用 -->
<div class="page" id="page5">
<div class="stamp" style="font-size:12px;">🌱 新生方案</div>
<h1>🆘 2026深圳援助方案 · 工作纸（四凤专案）</h1>
<p>四凤的困局：信息隔绝、意外怀孕、阶级压抑、家庭秘密、缺乏自主权。如果她生活在2026年的深圳，哪些资源可以帮助她？小组讨论后填写：</p>
<div style="background:#ecdbba; padding: 12px; margin: 15px 0;">
<p>🔹 法律援助：未成年人保护热线 12345 · 女性权益公益律师咨询<br>
🔹 健康支持：青少年意外怀孕援助中心（免费咨询、医疗支持）· 深圳妇幼保健院绿色通道<br>
🔹 教育赋能：性教育课堂、职业高中支持计划、反家暴与自我保护工作坊<br>
🔹 信息渠道：学校社工、社区青少年服务中心、“深i她”小程序 · 12355青少年心理援助热线</p>
</div>
<p><strong>✍️ 为四凤设计“第一步行动”卡片</strong>（具体可执行，尊重她的年龄和处境）</p>
<textarea rows="3" style="width:100%; background:#fff5e6; border:2px solid #bd8f57; margin:10px 0; padding:10px;" ></textarea>
<p><strong>🎤 发布会形式选择</strong>：新闻连线 / 模拟提案 / 内心独白+旁白 / 穿越对话（90秒）<br>
💡 四凤的发布会可以聚焦“信息权”——如果当年有人告诉她真相，如果她知道自己可以说不。</p>
<div class="investigator-line" style="justify-content: flex-start; gap: 20px;">
<span>✔ 方案简述：</span><span class="sign-space" style="width: 250px;">____________________</span>
</div>
<div class="insight" style="margin-top: 15px;">
<p>📢 四凤不是无知，而是被剥夺了知情的机会。今天的我们，可以还她选择的权利。</p>
</div>
<div class="footer-note">⚡ 雷雨终将过去，而我们有路可走 · 四凤援助发布会准备页</div>
</div>
</div>
<!-- 翻页控件 -->
<div class="nav-controls">
<button class="nav-btn" id="prevBtn">◀ 上一页</button>
<span class="page-indicator" id="pageIndicator">第 1 / 5 页</span>
<button class="nav-btn" id="nextBtn">下一页 ▶</button>
</div>
<div class="print-tip">
🖨️ 提示：可按 Ctrl+P 打印卷宗，每页自动A4分页。屏幕翻页浏览。
</div>
<script>
(function(){
const pages = document.querySelectorAll('#casebook .page');
const total = pages.length;
let currentIdx = 0;
function updateVisibility() {
for(let i=0; i<total; i++) {
if(i === currentIdx) {
pages[i].style.display = 'block';
} else {
pages[i].style.display = 'none';
}
}
document.getElementById('pageIndicator').innerText = `第 ${currentIdx+1} / ${total} 页`;
}
function goPrev() {
if(currentIdx > 0) {
currentIdx--;
updateVisibility();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}
function goNext() {
if(currentIdx < total-1) {
currentIdx++;
updateVisibility();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}
document.getElementById('prevBtn').addEventListener('click', goPrev);
document.getElementById('nextBtn').addEventListener('click', goNext);
// 打印样式覆盖隐藏
const style = document.createElement('style');
style.textContent = `@media print { .page { display: block !important; page-break-after: always; } .nav-controls, .print-tip { display: none; } }`;
document.head.appendChild(style);
updateVisibility();
})();
</script>
</body>
</html>
index.html
md
README.md
index.html