salary.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. body {
  14. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  15. background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  16. min-height: 100vh;
  17. padding: 20px;
  18. color: #333;
  19. }
  20. .container {
  21. max-width: 1200px;
  22. margin: 0 auto;
  23. background: white;
  24. border-radius: 20px;
  25. box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  26. overflow: hidden;
  27. }
  28. .header {
  29. background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  30. color: white;
  31. padding: 60px 40px;
  32. text-align: center;
  33. }
  34. .header h1 {
  35. font-size: 48px;
  36. margin-bottom: 15px;
  37. font-weight: 700;
  38. }
  39. .header p {
  40. font-size: 20px;
  41. opacity: 0.95;
  42. }
  43. .content {
  44. padding: 50px 40px;
  45. }
  46. .section {
  47. margin-bottom: 50px;
  48. }
  49. .section h2 {
  50. font-size: 32px;
  51. color: #f5576c;
  52. margin-bottom: 25px;
  53. padding-bottom: 15px;
  54. border-bottom: 3px solid #f5576c;
  55. }
  56. .section p {
  57. font-size: 18px;
  58. line-height: 1.8;
  59. color: #555;
  60. margin-bottom: 20px;
  61. }
  62. .features {
  63. display: grid;
  64. grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  65. gap: 30px;
  66. margin-top: 30px;
  67. }
  68. .feature-card {
  69. background: linear-gradient(135deg, #ffeef1 0%, #ffe0e5 100%);
  70. padding: 30px;
  71. border-radius: 15px;
  72. transition: transform 0.3s ease, box-shadow 0.3s ease;
  73. }
  74. .feature-card:hover {
  75. transform: translateY(-5px);
  76. box-shadow: 0 10px 30px rgba(245, 87, 108, 0.3);
  77. }
  78. .feature-card h3 {
  79. font-size: 24px;
  80. color: #f5576c;
  81. margin-bottom: 15px;
  82. }
  83. .feature-card p {
  84. font-size: 16px;
  85. color: #666;
  86. line-height: 1.6;
  87. }
  88. .back-button {
  89. display: inline-block;
  90. margin-top: 30px;
  91. padding: 15px 40px;
  92. background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  93. color: white;
  94. text-decoration: none;
  95. border-radius: 50px;
  96. font-size: 18px;
  97. transition: transform 0.3s ease, box-shadow 0.3s ease;
  98. }
  99. .back-button:hover {
  100. transform: translateY(-2px);
  101. box-shadow: 0 10px 25px rgba(245, 87, 108, 0.4);
  102. }
  103. .icon {
  104. font-size: 40px;
  105. margin-bottom: 15px;
  106. }
  107. </style>
  108. </head>
  109. <body>
  110. <div class="container">
  111. <div class="header">
  112. <h1>💰 工资发放系统</h1>
  113. <p>薪资计算与发放管理</p>
  114. </div>
  115. <div class="content">
  116. <div class="section">
  117. <h2>系统简介</h2>
  118. <p>
  119. 工资发放系统是一套专业的薪资管理解决方案,为企业提供从薪资计算、审核到发放的全流程管理。
  120. 系统支持多种薪资结构、自动计算各类津贴补贴、个税计算等功能,确保薪资发放的准确性和及时性,
  121. 同时提供详细的薪资报表和统计分析,帮助企业优化薪酬管理。
  122. </p>
  123. </div>
  124. <div class="section">
  125. <h2>核心功能</h2>
  126. <div class="features">
  127. <div class="feature-card">
  128. <div class="icon">🧮</div>
  129. <h3>薪资计算</h3>
  130. <p>自动计算基本工资、绩效奖金、各类津贴补贴,支持复杂的薪资公式配置,确保计算准确无误。</p>
  131. </div>
  132. <div class="feature-card">
  133. <div class="icon">📋</div>
  134. <h3>个税管理</h3>
  135. <p>自动计算个人所得税,支持最新的个税政策,包括专项扣除、专项附加扣除等,确保合规性。</p>
  136. </div>
  137. <div class="feature-card">
  138. <div class="icon">✅</div>
  139. <h3>审核流程</h3>
  140. <p>多级审核机制,支持薪资数据的复核和审批,确保薪资发放的准确性和安全性。</p>
  141. </div>
  142. <div class="feature-card">
  143. <div class="icon">💳</div>
  144. <h3>发放管理</h3>
  145. <p>支持银行代发、现金发放等多种发放方式,自动生成发放清单,与银行系统对接,实现批量发放。</p>
  146. </div>
  147. <div class="feature-card">
  148. <div class="icon">📊</div>
  149. <h3>薪资报表</h3>
  150. <p>提供丰富的薪资报表,包括工资条、薪资汇总表、成本分析表等,支持自定义报表格式。</p>
  151. </div>
  152. <div class="feature-card">
  153. <div class="icon">🔒</div>
  154. <h3>数据安全</h3>
  155. <p>严格的权限控制,确保薪资数据的安全性和保密性,支持数据加密和操作日志记录。</p>
  156. </div>
  157. </div>
  158. </div>
  159. <div class="section">
  160. <h2>系统优势</h2>
  161. <p>
  162. • <strong>计算精准</strong>:采用精确的计算引擎,支持复杂的薪资规则,确保计算结果准确无误<br>
  163. • <strong>政策同步</strong>:及时更新最新的个税政策和社保政策,确保合规性<br>
  164. • <strong>流程规范</strong>:标准化的薪资发放流程,减少人为错误,提高工作效率<br>
  165. • <strong>数据透明</strong>:员工可在线查看个人工资条,提高薪资透明度<br>
  166. • <strong>成本控制</strong>:提供详细的薪资成本分析,帮助企业优化薪酬结构
  167. </p>
  168. </div>
  169. <a href="javascript:history.back()" class="back-button">← 返回导航</a>
  170. </div>
  171. </div>
  172. </body>
  173. </html>