Hugging Face's logo

Spaces:
benzzi1111
/
paymaster
Running

App Files Community
benzzi1111 commited on
Commit
56c61cf
·
verified ·
1 Parent(s): aa99493

新生成个界面，薪资发放与明细查询界面，中文写

Browse files
Files changed (4) hide show
  1. calculator.html +4 -1
  2. index.html +1 -0
  3. payment.html +2 -1
  4. salary_detail.html +257 -0
calculator.html CHANGED
@@ -37,10 +37,13 @@
37
  <a href="payment.html" class="hover:text-indigo-200 transition">
38
  <i data-feather="dollar-sign" class="w-5 h-5"></i>
39
  </a>
 
 
 
40
  <a href="#" class="hover:text-indigo-200 transition">
41
  <i data-feather="user" class="w-5 h-5"></i>
42
  </a>
43
- </div>
44
  </div>
45
  </nav>
46
 
 
37
  <a href="payment.html" class="hover:text-indigo-200 transition">
38
  <i data-feather="dollar-sign" class="w-5 h-5"></i>
39
  </a>
40
+ <a href="salary_detail.html" class="hover:text-indigo-200 transition">
41
+ <i data-feather="credit-card" class="w-5 h-5"></i>
42
+ </a>
43
  <a href="#" class="hover:text-indigo-200 transition">
44
  <i data-feather="user" class="w-5 h-5"></i>
45
  </a>
46
+ </div>
47
  </div>
48
  </nav>
49
 
index.html CHANGED
@@ -41,6 +41,7 @@
41
  <a href="index.html" class="hover:text-indigo-200 font-medium">首页</a>
42
  <a href="calculator.html" class="hover:text-indigo-200 font-medium">薪资计算</a>
43
  <a href="payment.html" class="hover:text-indigo-200 font-medium">薪资发放</a>
 
44
  <a href="#" class="hover:text-indigo-200 font-medium">社保公积金</a>
45
  <a href="#" class="hover:text-indigo-200 font-medium">报表管理</a>
46
  </div>
 
41
  <a href="index.html" class="hover:text-indigo-200 font-medium">首页</a>
42
  <a href="calculator.html" class="hover:text-indigo-200 font-medium">薪资计算</a>
43
  <a href="payment.html" class="hover:text-indigo-200 font-medium">薪资发放</a>
44
+ <a href="salary_detail.html" class="hover:text-indigo-200 font-medium">薪资明细</a>
45
  <a href="#" class="hover:text-indigo-200 font-medium">社保公积金</a>
46
  <a href="#" class="hover:text-indigo-200 font-medium">报表管理</a>
47
  </div>
payment.html CHANGED
@@ -41,9 +41,10 @@
41
  <a href="index.html" class="hover:text-indigo-200 font-medium">首页</a>
42
  <a href="calculator.html" class="hover:text-indigo-200 font-medium">薪资计算</a>
43
  <a href="payment.html" class="font-medium text-indigo-200 border-b-2 border-indigo-200">薪资发放</a>
 
44
  <a href="#" class="hover:text-indigo-200 font-medium">社保公积金</a>
45
  <a href="#" class="hover:text-indigo-200 font-medium">报表管理</a>
46
- </div>
47
  <div class="flex items-center space-x-4">
48
  <div class="relative">
49
  <i data-feather="bell" class="w-5 h-5 hover:text-indigo-200 cursor-pointer"></i>
 
41
  <a href="index.html" class="hover:text-indigo-200 font-medium">首页</a>
42
  <a href="calculator.html" class="hover:text-indigo-200 font-medium">薪资计算</a>
43
  <a href="payment.html" class="font-medium text-indigo-200 border-b-2 border-indigo-200">薪资发放</a>
44
+ <a href="salary_detail.html" class="hover:text-indigo-200 font-medium">薪资明细</a>
45
  <a href="#" class="hover:text-indigo-200 font-medium">社保公积金</a>
46
  <a href="#" class="hover:text-indigo-200 font-medium">报表管理</a>
47
+ </div>
48
  <div class="flex items-center space-x-4">
49
  <div class="relative">
50
  <i data-feather="bell" class="w-5 h-5 hover:text-indigo-200 cursor-pointer"></i>
salary_detail.html ADDED
@@ -0,0 +1,257 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
11
+ body {
12
+ font-family: 'Noto Sans SC', sans-serif;
13
+ }
14
+ .detail-card {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .detail-card:hover {
18
+ transform: translateY(-2px);
19
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50">
24
+ <!-- 导航栏 -->
25
+ <nav class="bg-indigo-600 text-white py-4 px-6 shadow-lg">
26
+ <div class="container mx-auto flex justify-between items-center">
27
+ <div class="flex items-center space-x-2">
28
+ <i data-feather="dollar-sign" class="w-6 h-6"></i>
29
+ <span class="text-xl font-bold">薪智算</span>
30
+ </div>
31
+ <div class="hidden md:flex space-x-6">
32
+ <a href="index.html" class="hover:text-indigo-200 font-medium">首页</a>
33
+ <a href="calculator.html" class="hover:text-indigo-200 font-medium">薪资计算</a>
34
+ <a href="payment.html" class="hover:text-indigo-200 font-medium">薪资发放</a>
35
+ <a href="salary_detail.html" class="font-medium text-indigo-200 border-b-2 border-indigo-200">薪资明细</a>
36
+ <a href="#" class="hover:text-indigo-200 font-medium">社保公积金</a>
37
+ </div>
38
+ <div class="flex items-center space-x-4">
39
+ <div class="relative">
40
+ <i data-feather="bell" class="w-5 h-5 hover:text-indigo-200 cursor-pointer"></i>
41
+ <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">2</span>
42
+ </div>
43
+ <div class="flex items-center space-x-2 cursor-pointer">
44
+ <div class="w-8 h-8 rounded-full bg-indigo-700 flex items-center justify-center">
45
+ <i data-feather="user" class="w-4 h-4"></i>
46
+ </div>
47
+ <span>员工</span>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </nav>
52
+
53
+ <main class="container mx-auto px-6 py-8">
54
+ <!-- 顶部标题 -->
55
+ <div class="mb-8">
56
+ <h1 class="text-2xl md:text-3xl font-bold">我的薪资明细</h1>
57
+ <p class="text-gray-600 mt-2">查看历史薪资发放记录与明细</p>
58
+ </div>
59
+
60
+ <!-- 筛选条件 -->
61
+ <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
62
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
63
+ <div>
64
+ <label class="block text-sm font-medium text-gray-700 mb-1">查询月份</label>
65
+ <input type="month" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-1 focus:ring-indigo-500">
66
+ </div>
67
+ <div>
68
+ <label class="block text-sm font-medium text-gray-700 mb-1">薪资类型</label>
69
+ <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-1 focus:ring-indigo-500">
70
+ <option value="">全部类型</option>
71
+ <option>月度工资</option>
72
+ <option>年终奖</option>
73
+ <option>项目奖金</option>
74
+ <option>其他补贴</option>
75
+ </select>
76
+ </div>
77
+ <div class="flex items-end">
78
+ <button class="w-full py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center justify-center">
79
+ <i data-feather="search" class="mr-2 w-4 h-4"></i> 查询
80
+ </button>
81
+ </div>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- 薪资明细卡片 -->
86
+ <div class="grid grid-cols-1 gap-6 mb-8">
87
+ <!-- 薪资卡片1 -->
88
+ <div class="detail-card bg-white rounded-lg shadow-sm overflow-hidden">
89
+ <div class="p-5 border-b border-gray-200 flex justify-between items-center">
90
+ <div>
91
+ <h3 class="text-lg font-bold">2023年10月薪资</h3>
92
+ <p class="text-sm text-gray-500">发放日期: 2023-10-05</p>
93
+ </div>
94
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">已发放</span>
95
+ </div>
96
+ <div class="p-5">
97
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
98
+ <div>
99
+ <p class="text-sm text-gray-500">税前工资</p>
100
+ <p class="text-xl font-bold">¥15,000.00</p>
101
+ </div>
102
+ <div>
103
+ <p class="text-sm text-gray-500">扣款总额</p>
104
+ <p class="text-xl font-bold">¥2,873.60</p>
105
+ </div>
106
+ <div>
107
+ <p class="text-sm text-gray-500">实发工资</p>
108
+ <p class="text-xl font-bold text-indigo-600">¥12,126.40</p>
109
+ </div>
110
+ </div>
111
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
112
+ <i data-feather="chevron-down" class="mr-1 w-4 h-4"></i> 查看详细明细
113
+ </button>
114
+ </div>
115
+ <!-- 详细明细 (默认隐藏) -->
116
+ <div class="px-5 pb-5 hidden">
117
+ <div class="overflow-x-auto">
118
+ <table class="w-full">
119
+ <thead class="bg-gray-50">
120
+ <tr>
121
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
122
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
123
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
124
+ </tr>
125
+ </thead>
126
+ <tbody class="divide-y divide-gray-200">
127
+ <tr>
128
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">基本工资</td>
129
+ <td class="px-4 py-3 whitespace-nowrap text-sm">¥12,000.00</td>
130
+ <td class="px-4 py-3 whitespace-nowrap text-sm">-</td>
131
+ </tr>
132
+ <tr>
133
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">绩效奖金</td>
134
+ <td class="px-4 py-3 whitespace-nowrap text-sm">¥3,000.00</td>
135
+ <td class="px-4 py-3 whitespace-nowrap text-sm">Q3绩效</td>
136
+ </tr>
137
+ <tr>
138
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">养老保险</td>
139
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-red-500">-¥840.00</td>
140
+ <td class="px-4 py-3 whitespace-nowrap text-sm">个人8%</td>
141
+ </tr>
142
+ <tr>
143
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">医疗保险</td>
144
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-red-500">-¥108.00</td>
145
+ <td class="px-4 py-3 whitespace-nowrap text-sm">个人2%+3</td>
146
+ </tr>
147
+ <tr>
148
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">失业保险</td>
149
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-red-500">-¥30.00</td>
150
+ <td class="px-4 py-3 whitespace-nowrap text-sm">个人0.5%</td>
151
+ </tr>
152
+ <tr>
153
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">公积金</td>
154
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-red-500">-¥1,200.00</td>
155
+ <td class="px-4 py-3 whitespace-nowrap text-sm">个人12%</td>
156
+ </tr>
157
+ <tr>
158
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">个人所得税</td>
159
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-red-500">-¥245.60</td>
160
+ <td class="px-4 py-3 whitespace-nowrap text-sm">累计预扣法</td>
161
+ </tr>
162
+ </tbody>
163
+ </table>
164
+ </div>
165
+ <div class="mt-4 flex justify-end">
166
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center">
167
+ <i data-feather="download" class="mr-2 w-4 h-4"></i> 下载工资条
168
+ </button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- 薪资卡片2 -->
174
+ <div class="detail-card bg-white rounded-lg shadow-sm overflow-hidden">
175
+ <div class="p-5 border-b border-gray-200 flex justify-between items-center">
176
+ <div>
177
+ <h3 class="text-lg font-bold">2023年9月薪资</h3>
178
+ <p class="text-sm text-gray-500">发放日期: 2023-09-05</p>
179
+ </div>
180
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">已发放</span>
181
+ </div>
182
+ <div class="p-5">
183
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
184
+ <div>
185
+ <p class="text-sm text-gray-500">税前工资</p>
186
+ <p class="text-xl font-bold">¥15,000.00</p>
187
+ </div>
188
+ <div>
189
+ <p class="text-sm text-gray-500">扣款总额</p>
190
+ <p class="text-xl font-bold">¥2,873.60</p>
191
+ </div>
192
+ <div>
193
+ <p class="text-sm text-gray-500">实发工资</p>
194
+ <p class="text-xl font-bold text-indigo-600">¥12,126.40</p>
195
+ </div>
196
+ </div>
197
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
198
+ <i data-feather="chevron-down" class="mr-1 w-4 h-4"></i> 查看详细明细
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- 分页 -->
205
+ <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 rounded-b-lg">
206
+ <div class="flex-1 flex justify-between sm:hidden">
207
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">上一页</a>
208
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">下一页</a>
209
+ </div>
210
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
211
+ <div>
212
+ <p class="text-sm text-gray-700">
213
+ 显示 <span class="font-medium">1</span> 到 <span class="font-medium">2</span>，共 <span class="font-medium">6</span> 条记录
214
+ </p>
215
+ </div>
216
+ <div>
217
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
218
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
219
+ <span class="sr-only">Previous</span>
220
+ <i data-feather="chevron-left" class="h-5 w-5"></i>
221
+ </a>
222
+ <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
223
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
224
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
225
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
226
+ <span class="sr-only">Next</span>
227
+ <i data-feather="chevron-right" class="h-5 w-5"></i>
228
+ </a>
229
+ </nav>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </main>
234
+
235
+ <script>
236
+ // Feather 图标替换
237
+ document.addEventListener('DOMContentLoaded', function() {
238
+ feather.replace();
239
+
240
+ // 点击展开/收起详细明细
241
+ document.querySelectorAll('.detail-card button').forEach(button => {
242
+ button.addEventListener('click', function() {
243
+ const detailSection = this.closest('.detail-card').querySelector('div.hidden');
244
+ const icon = this.querySelector('i');
245
+
246
+ if (detailSection) {
247
+ detailSection.classList.toggle('hidden');
248
+ icon.setAttribute('data-feather',
249
+ detailSection.classList.contains('hidden') ? 'chevron-down' : 'chevron-up');
250
+ feather.replace();
251
+ }
252
+ });
253
+ });
254
+ });
255
+ </script>
256
+ </body>
257
+ </html>