index.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>账单统计</title>
  7. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  8. <style>
  9. body {
  10. background-color: #f8f9fa;
  11. padding: 20px;
  12. }
  13. .card {
  14. margin-bottom: 20px;
  15. box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  16. }
  17. .table th {
  18. background-color: #f8f9fa;
  19. }
  20. .summary-card {
  21. background-color: #fff;
  22. border-radius: 8px;
  23. padding: 20px;
  24. margin-bottom: 20px;
  25. }
  26. .amount {
  27. font-weight: bold;
  28. color: #28a745;
  29. }
  30. .amount.negative {
  31. color: #dc3545;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="container">
  37. <div class="row">
  38. <div class="col-12">
  39. <div class="card">
  40. <div class="card-header">
  41. <h3 class="mb-0">账单统计</h3>
  42. </div>
  43. <div class="card-body">
  44. <div class="row">
  45. <div class="col-md-6">
  46. <div class="summary-card">
  47. <h4>入款统计</h4>
  48. <p>总入款:<span class="amount" id="totalDeposit">0.00</span></p>
  49. <p>入款费率:<span id="depositFeeRate">5.0%</span></p>
  50. <p>入款手续费:<span class="amount" id="depositFee">0.00</span></p>
  51. </div>
  52. </div>
  53. <div class="col-md-6">
  54. <div class="summary-card">
  55. <h4>下发统计</h4>
  56. <p>总下发:<span class="amount" id="totalWithdrawal">0.00</span></p>
  57. <p>下发费率:<span id="withdrawalFeeRate">0.0%</span></p>
  58. <p>下发手续费:<span class="amount" id="withdrawalFee">0.00</span></p>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="summary-card">
  63. <h4>余额统计</h4>
  64. <p>应下发:<span class="amount" id="shouldWithdraw">0.00</span></p>
  65. <p>当前余额:<span class="amount" id="currentBalance">0.00</span></p>
  66. </div>
  67. <div class="row">
  68. <div class="col-md-6">
  69. <div class="card">
  70. <div class="card-header">
  71. <h5 class="mb-0">入款记录</h5>
  72. </div>
  73. <div class="card-body">
  74. <div class="table-responsive">
  75. <table class="table" id="depositTable">
  76. <thead>
  77. <tr>
  78. <th>时间</th>
  79. <th>金额</th>
  80. </tr>
  81. </thead>
  82. <tbody></tbody>
  83. </table>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="col-md-6">
  89. <div class="card">
  90. <div class="card-header">
  91. <h5 class="mb-0">下发记录</h5>
  92. </div>
  93. <div class="card-body">
  94. <div class="table-responsive">
  95. <table class="table" id="withdrawalTable">
  96. <thead>
  97. <tr>
  98. <th>时间</th>
  99. <th>金额</th>
  100. </tr>
  101. </thead>
  102. <tbody></tbody>
  103. </table>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  115. <script src="/js/bill.js"></script>
  116. </body>
  117. </html>