<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>会计信息管理系统</title> <style> body { font-family
: "Microsoft YaHei", sans-serif; background-color
: #f4f6f9; margin
: 0; padding
: 0; } header { background-color
: #2c3e50; color
: white; padding
: 20px; text-align
: center; } nav { background-color
: #34495e; overflow
: hidden; } nav a { float
: left; display
: block; color
: white; text-align
: center; padding
: 14px 20px; text-decoration
: none; } nav a
:hover { background-color
: #ddd; color
: black; } .container { max-width
: 1200px; margin
: 20px auto; padding
: 20px; background-color
: white; border-radius
: 8px; box-shadow
: 0 0 10px rgba(0,0,0,0.1); } table { width
: 1
00%; border-collapse
: collapse; margin-top
: 20px; } table, th, td { border
: 1px solid #ccc; } th, td { padding
: 12px; text-align
: center; } th { background-color
: #ecf0f1; } .form-group { margin-bottom
: 15px; } .form-group label { display
: block; margin-bottom
: 5px; font-weight
: bold; } .form-group input, .form-group select { width
: 1
00%; padding
: 8px; border
: 1px solid #ccc; border-radius
: 4px; } button { background-color
: #27ae60; color
: white; padding
: 10px 15px; border
: none; border-radius
: 4px; cursor
: pointer; } button
:hover { background-color
: #219a52; } .chart-container { margin-top
: 30px; text-align
: center; } footer { text-align
: center; padding
: 20px; background-color
: #2c3e50; color
: white; margin-top
: 40px; } </style> </head> <body> <header> <h1>会计信息网络化管理系统</h1> <p>实时财务数据 · 安全高效 · 多端同步</p> </header> <nav> <a href="#home">首页</a> <a href="#balance-sheet">资产负债表</a> <a href="#income-statement">利润表</a> <a href="#entry">凭证录入</a> <a href="#charts">数据可视化</a> </nav> <div class="container" id="home"> <h2>欢迎使用会计信息管理系统</h2> <p>本系统提供企业财务数据的在线录入、查询、分析与可视化功能，支持多用户权限管理和数据加密传输。</p> <!-- 凭证录入表单 --> <section id="entry"> <h3>会计凭证录入</h3> <form id="accountingForm"> <div class="form-group"> <label>凭证编号</label> <input type="text" id="voucherNo" required /> </div> <div class="form-group"> <label>日期</label> <input type="date" id="date" required /> </div> <div class="form-group"> <label>摘要</label> <input type="text" id="summary" placeholder="如：销售商品收入" required /> </div> <div class="form-group"> <label>科目</label> <select id="account" required> <option value="">--选择会计科目--</option> <option value="cash">库存现金</option> <option value="bank">银行存款</option> <option value="revenue">主营业务收入</option> <option value="payable">应付账款</option> <option value="receivable">应收账款</option> </select> </div> <div class="form-group"> <label>借方金额</label> <input type="number" id="debit" step="0.01" placeholder="请输入借方金额" /> </div> <div class="form-group"> <label>贷方金额</label> <input type="number" id="credit" step="0.01" placeholder="请输入贷方金额" /> </div> <button type="submit">保存凭证</button> </form> </section> <!-- 资产负债表示例 --> <section id="balance-sheet" style="display
: none;"> <h3>资产负债表（示例）</h3> <table> <thead> <tr> <th>项目</th> <th>期末余额（元）</th> <th>期初余额（元）</th> </tr> </thead> <tbody> <tr><td>货币资金</td><td>150,
000.
00</td><td>130,
000.
00</td></tr> <tr><td>应收账款</td><td>80,
000.
00</td><td>75,
000.
00</td></tr> <tr><td>存货</td><td>2
00,
000.
00</td><td>190,
000.
00</td></tr> <tr><td><strong>资产合计</strong></td><td><strong>430,
000.
00</strong></td><td><strong>395,
000.
00</strong></td></tr> <tr><td>应付账款</td><td>60,
000.
00</td><td>55,
000.
00</td></tr> <tr><td>应交税费</td><td>20,
000.
00</td><td>18,
000.
00</td></tr> <tr><td><strong>负债合计</strong></td><td><strong>80,
000.
00</strong></td><td><strong>73,
000.
00</strong></td></tr> <tr><td><strong>所有者权益</strong></td><td><strong>350,
000.
00</strong></td><td><strong>322,
000.
00</strong></td></tr> </tbody> </table> </section> <!-- 利润表示例 --> <section id="income-statement" style="display
: none;"> <h3>利润表（示例）</h3> <table> <thead> <tr> <th>项目</th> <th>本期金额（元）</th> <th>上期金额（元）</th> </tr> </thead> <tbody> <tr><td>一、营业收入</td><td>5
00,
000.
00</td><td>450,
000.
00</td></tr> <tr><td>减：营业成本</td><td>3
00,
000.
00</td><td>270,
000.
00</td></tr> <tr><td>税金及附加</td><td>20,
000.
00</td><td>18,
000.
00</td></tr> <tr><td>销售费用</td><td>30,
000.
00</td><td>28,
000.
00</td></tr> <tr><td>管理费用</td><td>40,
000.
00</td><td>38,
000.
00</td></tr> <tr><td><strong>二、营业利润</strong></td><td><strong>110,
000.
00</strong></td><td><strong>96,
000.
00</strong></td></tr> <tr><td>加：营业外收入</td><td>5,
000.
00</td><td>4,
000.
00</td></tr> <tr><td><strong>三、利润总额</strong></td><td><strong>115,
000.
00</strong></td><td><strong>1
00,
000.
00</strong></td></tr> <tr><td>减：
所得税费用</td><td>28,750.
00</td><td>25,
000.
00</td></tr> <tr><td><strong>四、净利润</strong></td><td><strong>86,250.
00</strong></td><td><strong>75,
000.
00</strong></td></tr> </tbody> </table> </section> <!-- 图表占位 --> <section id="charts" style="display
: none;" class="chart-container"> <h3>财务数据可视化</h3> <p>此处可集成 ECharts 或 Chart.js 实现柱状图、折线图等。</p> <img src="https
://via.placeholder.com/6
00x3
00?text=收入+支出+趋势图" alt="图表占位图" /> </section> </div> <footer> © 2025 会计信息网络化管理系统 | 技术支持：Web开发团队 </footer> <script> // 简单的页面切换功能 document.querySelectorAll('nav a').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href').substring(1); document.querySelectorAll('.container > section').forEach(section => { section.style.display = 'none'; }); if (targetId === 'home') { document.getElementById('home').style.display = 'block'; } else { document.getElementById(targetId).style.display = 'block'; } }); }); // 表单提交处理（演示） document.getElementById('accountingForm').addEventListener('submit', function(e) { e.preventDefault(); const voucherNo = document.getElementById('voucherNo').value; const date = document.getElementById('date').value; const summary = document.getElementById('summary').value; const account = document.getElementById('account').value; const debit = document.getElementById('debit').value; const credit = document.getElementById('credit').value; alert(`凭证已保存！\n编号：${voucherNo}\n摘要：${summary}\n借方：${debit}元\n贷方：${credit}元`); // 这里可以发送到后端API进行存储 // fetch('/api/voucher', { method
: 'POST', body
: JSON.stringify(...) }) }); </script> </body> </html> 首页加点内容，我需要完整代码
扫一扫
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
