公开透明 · 善款与项目明�?/title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="transparency.css" /> </head> <body> <header class="topbar"> <div class="container"> <a class="brand" href="figma-hero.html">陈纪�?· 公益</a> <nav class="menu"> <a class="back-btn" href="javascript:void(0)" onclick="history.length>1?history.back():location.href='figma-hero.html'">返回</a> <a href="about.html">关于</a> <a href="projects.html">项目</a> <a class="active" href="transparency.html">透明</a> <a class="btn" href="support.html">参与支持</a> </nav> </div> </header> <main> <section class="hero"> <div class="container hero-inner"> <h1>公开透明</h1> <p class="lead">每一笔善款均有记录，项目进展持续公布，接受社会监督�?/p> <div class="kpis"> <div class="kpi"><strong>¥ 1,236,820</strong><span>累计善款</span></div> <div class="kpi"><strong>80%</strong><span>直达项目比例</span></div> <div class="kpi"><strong>100%</strong><span>明细已公开</span></div> </div> </div> </section> <section class="ledger"> <div class="container"> <div class="section-head"> <h2>收支明细</h2> <div class="controls"> <label> 月份 <select id="month"> <option value="2025-08" selected>2025-08</option> <option value="2025-07">2025-07</option> <option value="2025-06">2025-06</option> </select> </label> <input id="search" type="search" placeholder="搜索项目/用�? /> <a class="btn btn-primary" href="#" download>下载当月明细</a> </div> </div> <div class="table-wrap"> <table class="table" id="table"> <thead> <tr> <th>日期</th> <th>类型</th> <th>项目/用�?/th> <th>金额 (¥)</th> <th>备注/票据</th> </tr> </thead> <tbody> <tr> <td>2025-08-10</td> <td class="income">收入</td> <td>春芽书包 · 第三�?/td> <td>3200.00</td> <td>微信捐赠批次#A2031</td> </tr> <tr> <td>2025-08-11</td> <td class="expense">支出</td> <td>小伟医疗应�?· 住院预付�?/td> <td>12000.00</td> <td>发票�?982331</td> </tr> <tr> <td>2025-08-12</td> <td class="income">收入</td> <td>长者暖�?· 入冬关怀</td> <td>5300.00</td> <td>企业配捐</td> </tr> <tr> <td>2025-08-13</td> <td class="expense">支出</td> <td>乡村小图书角 · 书籍采购</td> <td>2980.50</td> <td>清单与收据已上传</td> </tr> <tr> <td>2025-08-14</td> <td class="expense">支出</td> <td>无障碍坡�?· 施工尾款</td> <td>5000.00</td> <td>合同与验收单</td> </tr> </tbody> </table> </div> </div> </section> <section class="projects"> <div class="container"> <div class="section-head"> <h2>项目进展</h2> <p class="muted">每周/每月发布更新，包含图片与关键节点�?/p> </div> <div class="grid3"> <article class="card"> <h3>春芽书包 · 第三�?/h3> <p>�?批次物资已送达南坪小学�?5名学生签收完成；志愿者回访记录已上传�?/p> <a class="link" href="projects.html#story-edu">查看更新</a> </article> <article class="card"> <h3>小伟医疗应�?/h3> <p>已完成术前检查与住院安排，费用支付明细与医院证明已公示�?/p> <a class="link" href="projects.html#story-emg">查看更新</a> </article> <article class="card"> <h3>长者暖�?· 入冬关怀</h3> <p>首批取暖包（电热�?保温壶）配送中，入户检修进�?70%�?/p> <a class="link" href="projects.html#story-com">查看更新</a> </article> </div> </div> </section> <section class="reports"> <div class="container"> <div class="section-head"> <h2>审计与下�?/h2> <p class="muted">年度收支汇总、第三方审计报告与月度公示打包下载�?/p> </div> <div class="grid3"> <article class="card file"> <h3>2024 年度收支汇�?/h3> <p>PDF · 1.2MB</p> <a class="btn btn-primary" href="#" download>下载</a> </article> <article class="card file"> <h3>2024 第三方审计报�?/h3> <p>PDF · 2.4MB</p> <a class="btn btn-primary" href="#" download>下载</a> </article> <article class="card file"> <h3>2025-08 月度公示</h3> <p>ZIP · 6.0MB（图片与票据�?/p> <a class="btn btn-primary" href="#" download>下载</a> </article> </div> </div> </section> </main> <footer class="footer"> <div class="container">© 2025 陈纪森公�?· 公开透明，接受监督。邮箱：contact@example.com</div> </footer> <script> const search = document.getElementById('search'); const table = document.getElementById('table'); search.addEventListener('input', () => { const q = search.value.toLowerCase(); for (const row of table.tBodies[0].rows) { row.style.display = row.innerText.toLowerCase().includes(q) ? '' : 'none'; } }); </script> </body> </html>