Hugging Face's logo

Spaces:
benzzi1111
/
paymaster
Running

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

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

Browse files
Files changed (4) hide show
  1. README.md +9 -5
  2. calculator.html +299 -0
  3. index.html +233 -18
  4. payment.html +301 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Paymaster
3
- emoji: 👁
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: 薪智算PayMaster💰
3
+ colorFrom: green
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
calculator.html ADDED
@@ -0,0 +1,299 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ .result-card {
15
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
16
+ }
17
+ .input-highlight {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .input-highlight:focus {
21
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50">
26
+ <!-- 导航栏 -->
27
+ <nav class="bg-indigo-600 text-white py-4 px-6 shadow-lg">
28
+ <div class="container mx-auto flex justify-between items-center">
29
+ <div class="flex items-center space-x-2">
30
+ <i data-feather="dollar-sign" class="w-6 h-6"></i>
31
+ <span class="text-xl font-bold">薪智算</span>
32
+ </div>
33
+ <div class="flex items-center space-x-6">
34
+ <a href="index.html" class="hover:text-indigo-200 transition">
35
+ <i data-feather="home" class="w-5 h-5"></i>
36
+ </a>
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
+
47
+ <main class="container mx-auto px-6 py-12">
48
+ <div class="max-w-4xl mx-auto">
49
+ <div class="text-center mb-12">
50
+ <h1 class="text-3xl md:text-4xl font-bold mb-4">智能薪资计算器</h1>
51
+ <p class="text-gray-600 max-w-2xl mx-auto">输入您的薪资信息，系统将自动计算税后收入、社保公积金扣款和个人所得税</p>
52
+ </div>
53
+
54
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
55
+ <!-- 输入表单 -->
56
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6">
57
+ <h2 class="text-xl font-bold mb-6 flex items-center">
58
+ <i data-feather="edit-3" class="mr-2"></i> 薪资信息输入
59
+ </h2>
60
+
61
+ <form>
62
+ <div class="space-y-6">
63
+ <!-- 基本工资 -->
64
+ <div>
65
+ <label class="block text-gray-700 mb-2 font-medium">基本工资</label>
66
+ <div class="relative">
67
+ <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
68
+ <input type="number" placeholder="请输入税前基本工资" class="w-full input-highlight pl-8 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
69
+ </div>
70
+ </div>
71
+
72
+ <!-- 奖金补贴 -->
73
+ <div>
74
+ <label class="block text-gray-700 mb-2 font-medium">奖金/补贴</label>
75
+ <div class="relative">
76
+ <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
77
+ <input type="number" placeholder="请输入奖金和各类补贴" class="w-full input-highlight pl-8 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
78
+ </div>
79
+ <div class="flex flex-wrap gap-2 mt-2">
80
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">交通补贴</span>
81
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">餐补</span>
82
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">通讯补贴</span>
83
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">绩效奖金</span>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- 社保公积金 -->
88
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
89
+ <div>
90
+ <label class="block text-gray-700 mb-2 font-medium">社保基数</label>
91
+ <div class="relative">
92
+ <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
93
+ <input type="number" placeholder="社保缴费基数" class="w-full input-highlight pl-8 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
94
+ </div>
95
+ </div>
96
+ <div>
97
+ <label class="block text-gray-700 mb-2 font-medium">公积金基数</label>
98
+ <div class="relative">
99
+ <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
100
+ <input type="number" placeholder="公积金缴费基数" class="w-full input-highlight pl-8 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- 城市选择 -->
106
+ <div>
107
+ <label class="block text-gray-700 mb-2 font-medium">所在城市</label>
108
+ <select class="w-full input-highlight py-3 px-4 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
109
+ <option value="">-- 请选择城市 --</option>
110
+ <option value="beijing">北京</option>
111
+ <option value="shanghai">上海</option>
112
+ <option value="guangzhou">广州</option>
113
+ <option value="shenzhen">深圳</option>
114
+ <option value="hangzhou">杭州</option>
115
+ <option value="chengdu">成都</option>
116
+ </select>
117
+ </div>
118
+
119
+ <!-- 专项附加扣除 -->
120
+ <div>
121
+ <label class="block text-gray-700 mb-2 font-medium">专项附加扣除</label>
122
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
123
+ <label class="flex items-center space-x-2">
124
+ <input type="checkbox" class="rounded text-indigo-600">
125
+ <span class="text-gray-700">子女教育</span>
126
+ </label>
127
+ <label class="flex items-center space-x-2">
128
+ <input type="checkbox" class="rounded text-indigo-600">
129
+ <span class="text-gray-700">继续教育</span>
130
+ </label>
131
+ <label class="flex items-center space-x-2">
132
+ <input type="checkbox" class="rounded text-indigo-600">
133
+ <span class="text-gray-700">大病医疗</span>
134
+ </label>
135
+ <label class="flex items-center space-x-2">
136
+ <input type="checkbox" class="rounded text-indigo-600">
137
+ <span class="text-gray-700">住房贷款</span>
138
+ </label>
139
+ <label class="flex items-center space-x-2">
140
+ <input type="checkbox" class="rounded text-indigo-600">
141
+ <span class="text-gray-700">住房租金</span>
142
+ </label>
143
+ <label class="flex items-center space-x-2">
144
+ <input type="checkbox" class="rounded text-indigo-600">
145
+ <span class="text-gray-700">赡养老人</span>
146
+ </label>
147
+ </div>
148
+ </div>
149
+
150
+ <button type="button" class="w-full py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition mt-6 flex justify-center items-center">
151
+ <i data-feather="calculator" class="mr-2"></i> 立即计算薪资
152
+ </button>
153
+ </div>
154
+ </form>
155
+ </div>
156
+
157
+ <!-- 计算结果 -->
158
+ <div class="result-card text-white rounded-xl shadow-lg p-6">
159
+ <h2 class="text-xl font-bold mb-6 flex items-center">
160
+ <i data-feather="dollar-sign" class="mr-2"></i> 计算结果
161
+ </h2>
162
+
163
+ <div class="space-y-6">
164
+ <div class="bg-white bg-opacity-20 p-4 rounded-lg">
165
+ <div class="flex justify-between mb-2">
166
+ <span>税前月薪</span>
167
+ <span class="font-bold">¥15,000.00</span>
168
+ </div>
169
+ <div class="flex justify-between mb-2">
170
+ <span>奖金补贴</span>
171
+ <span class="font-bold">¥2,000.00</span>
172
+ </div>
173
+ <div class="border-t border-white border-opacity-30 my-3"></div>
174
+ <div class="flex justify-between text-lg">
175
+ <span>税前总收入</span>
176
+ <span class="font-bold">¥17,000.00</span>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="bg-white bg-opacity-20 p-4 rounded-lg">
181
+ <div class="flex justify-between mb-2">
182
+ <span>社保个人缴纳</span>
183
+ <span class="font-bold">¥1,428.00</span>
184
+ </div>
185
+ <div class="flex justify-between mb-2">
186
+ <span>公积金个人缴纳</span>
187
+ <span class="font-bold">¥1,200.00</span>
188
+ </div>
189
+ <div class="flex justify-between mb-2">
190
+ <span>个人所得税</span>
191
+ <span class="font-bold">¥245.60</span>
192
+ </div>
193
+ <div class="border-t border-white border-opacity-30 my-3"></div>
194
+ <div class="flex justify-between text-lg">
195
+ <span>总扣款</span>
196
+ <span class="font-bold">¥2,873.60</span>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="bg-white bg-opacity-10 p-4 rounded-lg text-center">
201
+ <div class="text-sm mb-1">税后月收入</div>
202
+ <div class="text-3xl font-bold">¥14,126.40</div>
203
+ </div>
204
+
205
+ <button class="w-full py-3 bg-white text-indigo-600 rounded-lg hover:bg-opacity-90 transition flex justify-center items-center">
206
+ <i data-feather="download" class="mr-2"></i> 导出工资条
207
+ </button>
208
+
209
+ <div class="text-xs opacity-80">
210
+ <p class="mb-1">计算结果仅供参考，具体以实际发放为准</p>
211
+ <p>最后更新时间：2023年10月社保公积金标准</p>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- 详细计算结果 -->
218
+ <div class="mt-12 bg-white rounded-xl shadow-lg overflow-hidden">
219
+ <div class="border-b border-gray-200">
220
+ <div class="px-6 py-4 flex items-center justify-between">
221
+ <h3 class="text-lg font-bold flex items-center">
222
+ <i data-feather="bar-chart-2" class="mr-2"></i> 详细计算结果
223
+ </h3>
224
+ <button class="text-indigo-600 hover:text-indigo-800 transition">
225
+ <i data-feather="maximize-2" class="w-5 h-5"></i>
226
+ </button>
227
+ </div>
228
+ </div>
229
+ <div class="p-6">
230
+ <div class="overflow-x-auto">
231
+ <table class="w-full">
232
+ <thead class="bg-gray-50">
233
+ <tr>
234
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
235
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">企业缴纳</th>
236
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">个人缴纳</th>
237
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">基数</th>
238
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">比例</th>
239
+ </tr>
240
+ </thead>
241
+ <tbody class="divide-y divide-gray-200">
242
+ <tr>
243
+ <td class="px-4 py-3 whitespace-nowrap">养老保险</td>
244
+ <td class="px-4 py-3 whitespace-nowrap">¥1,680.00</td>
245
+ <td class="px-4 py-3 whitespace-nowrap">¥840.00</td>
246
+ <td class="px-4 py-3 whitespace-nowrap">¥12,000</td>
247
+ <td class="px-4 py-3 whitespace-nowrap">企业16% / 个人8%</td>
248
+ </tr>
249
+ <tr>
250
+ <td class="px-4 py-3 whitespace-nowrap">医疗保险</td>
251
+ <td class="px-4 py-3 whitespace-nowrap">¥540.00</td>
252
+ <td class="px-4 py-3 whitespace-nowrap">¥108.00</td>
253
+ <td class="px-4 py-3 whitespace-nowrap">¥12,000</td>
254
+ <td class="px-4 py-3 whitespace-nowrap">企业4.5% / 个人2%+3</td>
255
+ </tr>
256
+ <tr>
257
+ <td class="px-4 py-3 whitespace-nowrap">失业保险</td>
258
+ <td class="px-4 py-3 whitespace-nowrap">¥60.00</td>
259
+ <td class="px-4 py-3 whitespace-nowrap">¥30.00</td>
260
+ <td class="px-4 py-3 whitespace-nowrap">¥12,000</td>
261
+ <td class="px-4 py-3 whitespace-nowrap">企业0.5% / 个人0.5%</td>
262
+ </tr>
263
+ <tr>
264
+ <td class="px-4 py-3 whitespace-nowrap">工伤保险</td>
265
+ <td class="px-4 py-3 whitespace-nowrap">¥24.00</td>
266
+ <td class="px-4 py-3 whitespace-nowrap">¥0.00</td>
267
+ <td class="px-4 py-3 whitespace-nowrap">¥12,000</td>
268
+ <td class="px-4 py-3 whitespace-nowrap">企业0.2%</td>
269
+ </tr>
270
+ <tr>
271
+ <td class="px-4 py-3 whitespace-nowrap">生育保险</td>
272
+ <td class="px-4 py-3 whitespace-nowrap">¥108.00</td>
273
+ <td class="px-4 py-3 whitespace-nowrap">¥0.00</td>
274
+ <td class="px-4 py-3 whitespace-nowrap">¥12,000</td>
275
+ <td class="px-4 py-3 whitespace-nowrap">企业0.9%</td>
276
+ </tr>
277
+ <tr>
278
+ <td class="px-4 py-3 whitespace-nowrap">公积金</td>
279
+ <td class="px-4 py-3 whitespace-nowrap">¥1,200.00</td>
280
+ <td class="px-4 py-3 whitespace-nowrap">¥1,200.00</td>
281
+ <td class="px-4 py-3 whitespace-nowrap">¥12,000</td>
282
+ <td class="px-4 py-3 whitespace-nowrap">企业12% / 个人12%</td>
283
+ </tr>
284
+ </tbody>
285
+ </table>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </main>
291
+
292
+ <script>
293
+ // Feather 图标替换
294
+ document.addEventListener('DOMContentLoaded', function() {
295
+ feather.replace();
296
+ });
297
+ </script>
298
+ </body>
299
+ </html>
index.html CHANGED
@@ -1,19 +1,234 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
12
+ body {
13
+ font-family: 'Noto Sans SC', sans-serif;
14
+ }
15
+ .glass-card {
16
+ background: rgba(255, 255, 255, 0.85);
17
+ backdrop-filter: blur(10px);
18
+ border-radius: 12px;
19
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .input-field {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .input-field:focus {
25
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50 text-gray-800">
30
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
31
+
32
+ <div class="relative min-h-screen flex flex-col">
33
+ <!-- 导航栏 -->
34
+ <nav class="bg-indigo-600 text-white py-4 px-6 shadow-lg z-10">
35
+ <div class="container mx-auto flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <i data-feather="dollar-sign" class="w-6 h-6"></i>
38
+ <span class="text-xl font-bold">薪智算</span>
39
+ </div>
40
+ <div class="hidden md:flex space-x-6">
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>
47
+ <div class="flex items-center space-x-4">
48
+ <button class="px-4 py-2 bg-indigo-700 rounded-lg hover:bg-indigo-800 transition">登录</button>
49
+ <button class="px-4 py-2 bg-white text-indigo-600 rounded-lg hover:bg-indigo-50 transition">注册</button>
50
+ </div>
51
+ <button class="md:hidden">
52
+ <i data-feather="menu" class="w-6 h-6"></i>
53
+ </button>
54
+ </div>
55
+ </nav>
56
+
57
+ <!-- 主内容区 -->
58
+ <main class="flex-grow container mx-auto px-6 py-12 z-10">
59
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
60
+ <div>
61
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
62
+ 智能薪资核算<br>
63
+ <span class="text-indigo-600">轻松搞定</span> 薪资管理
64
+ </h1>
65
+ <p class="text-lg text-gray-600 mb-8">
66
+ 薪智算为您提供一站式薪资计算解决方案，自动计算社保公积金、个人所得税，生成合规报表，让薪资管理变得简单高效。
67
+ </p>
68
+ <div class="flex flex-wrap gap-4">
69
+ <button class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition shadow-lg flex items-center">
70
+ <i data-feather="play" class="mr-2"></i> 立即体验
71
+ </button>
72
+ <button class="px-6 py-3 bg-white text-indigo-600 border border-indigo-600 rounded-lg hover:bg-indigo-50 transition flex items-center">
73
+ <i data-feather="book-open" class="mr-2"></i> 使用教程
74
+ </button>
75
+ </div>
76
+ </div>
77
+ <div class="glass-card p-8">
78
+ <h2 class="text-2xl font-bold mb-6 text-center">薪资计算器</h2>
79
+ <form>
80
+ <div class="space-y-4">
81
+ <div>
82
+ <label class="block text-gray-700 mb-2">基本工资</label>
83
+ <div class="relative">
84
+ <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
85
+ <input type="number" class="w-full input-field pl-8 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
86
+ </div>
87
+ </div>
88
+ <div>
89
+ <label class="block text-gray-700 mb-2">奖金/补贴</label>
90
+ <div class="relative">
91
+ <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
92
+ <input type="number" class="w-full input-field pl-8 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
93
+ </div>
94
+ </div>
95
+ <div>
96
+ <label class="block text-gray-700 mb-2">社保基数</label>
97
+ <div class="relative">
98
+ <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
99
+ <input type="number" class="w-full input-field pl-8 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
100
+ </div>
101
+ </div>
102
+ <div>
103
+ <label class="block text-gray-700 mb-2">公积金基数</label>
104
+ <div class="relative">
105
+ <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
106
+ <input type="number" class="w-full input-field pl-8 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
107
+ </div>
108
+ </div>
109
+ <button type="button" class="w-full py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition mt-6 flex justify-center items-center">
110
+ <i data-feather="calculator" class="mr-2"></i> 立即计算
111
+ </button>
112
+ </div>
113
+ </form>
114
+ </div>
115
+ </div>
116
+ </main>
117
+
118
+ <!-- 功能特色 -->
119
+ <section class="py-16 bg-white z-10">
120
+ <div class="container mx-auto px-6">
121
+ <h2 class="text-3xl font-bold text-center mb-12">核心功能</h2>
122
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
123
+ <div class="glass-card p-6 rounded-xl hover:shadow-xl transition">
124
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
125
+ <i data-feather="percent" class="text-indigo-600 w-6 h-6"></i>
126
+ </div>
127
+ <h3 class="text-xl font-bold mb-3">智能个税计算</h3>
128
+ <p class="text-gray-600">自动计算最新个人所得税，支持累计预扣法，精准符合税法要求。</p>
129
+ </div>
130
+ <div class="glass-card p-6 rounded-xl hover:shadow-xl transition">
131
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
132
+ <i data-feather="shield" class="text-indigo-600 w-6 h-6"></i>
133
+ </div>
134
+ <h3 class="text-xl font-bold mb-3">社保公积金</h3>
135
+ <p class="text-gray-600">支持全国各城市社保公积金自动计算，实时更新最新缴费基数和比例。</p>
136
+ </div>
137
+ <div class="glass-card p-6 rounded-xl hover:shadow-xl transition">
138
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
139
+ <i data-feather="file-text" class="text-indigo-600 w-6 h-6"></i>
140
+ </div>
141
+ <h3 class="text-xl font-bold mb-3">报表导出</h3>
142
+ <p class="text-gray-600">一键生成工资条、银行代发文件、个税申报表等多种格式报表。</p>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- 页脚 -->
149
+ <footer class="bg-gray-800 text-white py-12 z-10">
150
+ <div class="container mx-auto px-6">
151
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
152
+ <div>
153
+ <h3 class="text-xl font-bold mb-4 flex items-center">
154
+ <i data-feather="dollar-sign" class="mr-2"></i> 薪智算
155
+ </h3>
156
+ <p class="text-gray-400">让薪资管理变得简单高效，为企业提供一站式薪资计算解决方案。</p>
157
+ </div>
158
+ <div>
159
+ <h4 class="font-bold mb-4">产品</h4>
160
+ <ul class="space-y-2">
161
+ <li><a href="#" class="text-gray-400 hover:text-white transition">薪资计算</a></li>
162
+ <li><a href="#" class="text-gray-400 hover:text-white transition">社保公积金</a></li>
163
+ <li><a href="#" class="text-gray-400 hover:text-white transition">个税计算</a></li>
164
+ <li><a href="#" class="text-gray-400 hover:text-white transition">报表导出</a></li>
165
+ </ul>
166
+ </div>
167
+ <div>
168
+ <h4 class="font-bold mb-4">资源</h4>
169
+ <ul class="space-y-2">
170
+ <li><a href="#" class="text-gray-400 hover:text-white transition">帮助文档</a></li>
171
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API接口</a></li>
172
+ <li><a href="#" class="text-gray-400 hover:text-white transition">更新日志</a></li>
173
+ <li><a href="#" class="text-gray-400 hover:text-white transition">联系我们</a></li>
174
+ </ul>
175
+ </div>
176
+ <div>
177
+ <h4 class="font-bold mb-4">关注我们</h4>
178
+ <div class="flex space-x-4">
179
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600 transition">
180
+ <i data-feather="github" class="w-5 h-5"></i>
181
+ </a>
182
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-500 transition">
183
+ <i data-feather="twitter" class="w-5 h-5"></i>
184
+ </a>
185
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-500 transition">
186
+ <i data-feather="youtube" class="w-5 h-5"></i>
187
+ </a>
188
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-700 transition">
189
+ <i data-feather="linkedin" class="w-5 h-5"></i>
190
+ </a>
191
+ </div>
192
+ <div class="mt-6">
193
+ <p class="text-gray-400">订阅我们的新闻</p>
194
+ <div class="flex mt-2">
195
+ <input type="email" placeholder="您的邮箱" class="py-2 px-3 rounded-l-lg focus:outline-none text-gray-800">
196
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition">
197
+ <i data-feather="send" class="w-4 h-4"></i>
198
+ </button>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
204
+ <p>© 2023 薪智算 - 智能薪资核算系统. 保留所有权利.</p>
205
+ </div>
206
+ </div>
207
+ </footer>
208
+ </div>
209
+
210
+ <script>
211
+ // Vanta.js 背景动画
212
+ VANTA.NET({
213
+ el: "#vanta-bg",
214
+ mouseControls: true,
215
+ touchControls: true,
216
+ gyroControls: false,
217
+ minHeight: 200.00,
218
+ minWidth: 200.00,
219
+ scale: 1.00,
220
+ scaleMobile: 1.00,
221
+ color: 0x5b6ee1,
222
+ backgroundColor: 0xf8fafc,
223
+ points: 12.00,
224
+ maxDistance: 22.00,
225
+ spacing: 18.00
226
+ });
227
+
228
+ // Feather 图标替换
229
+ document.addEventListener('DOMContentLoaded', function() {
230
+ feather.replace();
231
+ });
232
+ </script>
233
+ </body>
234
  </html>
payment.html ADDED
@@ -0,0 +1,301 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ .payment-card {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .payment-card:hover {
18
+ transform: translateY(-2px);
19
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .status-paid {
22
+ background-color: #10b981;
23
+ }
24
+ .status-pending {
25
+ background-color: #f59e0b;
26
+ }
27
+ .status-failed {
28
+ background-color: #ef4444;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50">
33
+ <!-- 导航栏 -->
34
+ <nav class="bg-indigo-600 text-white py-4 px-6 shadow-lg">
35
+ <div class="container mx-auto flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <i data-feather="dollar-sign" class="w-6 h-6"></i>
38
+ <span class="text-xl font-bold">薪智算</span>
39
+ </div>
40
+ <div class="hidden md:flex space-x-6">
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>
50
+ <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">3</span>
51
+ </div>
52
+ <div class="flex items-center space-x-2 cursor-pointer">
53
+ <div class="w-8 h-8 rounded-full bg-indigo-700 flex items-center justify-center">
54
+ <i data-feather="user" class="w-4 h-4"></i>
55
+ </div>
56
+ <span>管理员</span>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <main class="container mx-auto px-6 py-8">
63
+ <!-- 顶部操作区 -->
64
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
65
+ <div>
66
+ <h1 class="text-2xl md:text-3xl font-bold">薪资发放与明细查询</h1>
67
+ <p class="text-gray-600 mt-2">查看历史薪资发放记录与明细</p>
68
+ </div>
69
+ <div class="flex flex-wrap gap-3 mt-4 md:mt-0">
70
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
71
+ <i data-feather="plus" class="mr-2 w-4 h-4"></i> 新增发放
72
+ </button>
73
+ <button class="px-4 py-2 bg-white text-indigo-600 border border-indigo-600 rounded-lg hover:bg-indigo-50 transition flex items-center">
74
+ <i data-feather="download" class="mr-2 w-4 h-4"></i> 导出报表
75
+ </button>
76
+ <button class="px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition flex items-center">
77
+ <i data-feather="filter" class="mr-2 w-4 h-4"></i> 筛选
78
+ </button>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- 筛选条件 -->
83
+ <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
84
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
85
+ <div>
86
+ <label class="block text-sm font-medium text-gray-700 mb-1">发放月份</label>
87
+ <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">
88
+ </div>
89
+ <div>
90
+ <label class="block text-sm font-medium text-gray-700 mb-1">部门</label>
91
+ <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-1 focus:ring-indigo-500">
92
+ <option value="">全部部门</option>
93
+ <option>技术部</option>
94
+ <option>产品部</option>
95
+ <option>市场部</option>
96
+ <option>财务部</option>
97
+ </select>
98
+ </div>
99
+ <div>
100
+ <label class="block text-sm font-medium text-gray-700 mb-1">发放状态</label>
101
+ <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-1 focus:ring-indigo-500">
102
+ <option value="">全部状态</option>
103
+ <option>已发放</option>
104
+ <option>发放中</option>
105
+ <option>发放失败</option>
106
+ </select>
107
+ </div>
108
+ <div class="flex items-end">
109
+ <button class="w-full py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">
110
+ 查询
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- 统计数据 -->
117
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
118
+ <div class="bg-white rounded-lg shadow-sm p-4">
119
+ <div class="flex justify-between items-center">
120
+ <div>
121
+ <p class="text-sm text-gray-500">本月发放人数</p>
122
+ <p class="text-2xl font-bold">86</p>
123
+ </div>
124
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
125
+ <i data-feather="users" class="text-indigo-600 w-5 h-5"></i>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <div class="bg-white rounded-lg shadow-sm p-4">
130
+ <div class="flex justify-between items-center">
131
+ <div>
132
+ <p class="text-sm text-gray-500">发放总金额</p>
133
+ <p class="text-2xl font-bold">¥1,286,540</p>
134
+ </div>
135
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
136
+ <i data-feather="dollar-sign" class="text-green-600 w-5 h-5"></i>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ <div class="bg-white rounded-lg shadow-sm p-4">
141
+ <div class="flex justify-between items-center">
142
+ <div>
143
+ <p class="text-sm text-gray-500">平均薪资</p>
144
+ <p class="text-2xl font-bold">¥14,960</p>
145
+ </div>
146
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
147
+ <i data-feather="trending-up" class="text-blue-600 w-5 h-5"></i>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ <div class="bg-white rounded-lg shadow-sm p-4">
152
+ <div class="flex justify-between items-center">
153
+ <div>
154
+ <p class="text-sm text-gray-500">完成率</p>
155
+ <p class="text-2xl font-bold">98%</p>
156
+ </div>
157
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
158
+ <i data-feather="check-circle" class="text-purple-600 w-5 h-5"></i>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- 薪资发放列表 -->
165
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
166
+ <div class="overflow-x-auto">
167
+ <table class="w-full">
168
+ <thead class="bg-gray-50">
169
+ <tr>
170
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发放批次</th>
171
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发放月份</th>
172
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">人数</th>
173
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总金额</th>
174
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发放状态</th>
175
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作人</th>
176
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作时间</th>
177
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
178
+ </tr>
179
+ </thead>
180
+ <tbody class="divide-y divide-gray-200">
181
+ <tr class="hover:bg-gray-50">
182
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">PY20231001</td>
183
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023年10月</td>
184
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">86</td>
185
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥1,286,540.00</td>
186
+ <td class="px-6 py-4 whitespace-nowrap">
187
+ <span class="px-2 py-1 text-xs rounded-full status-paid text-white">已发放</span>
188
+ </td>
189
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张经理</td>
190
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-05 14:30</td>
191
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
192
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">查看</a>
193
+ <a href="#" class="text-gray-600 hover:text-gray-900">导出</a>
194
+ </td>
195
+ </tr>
196
+ <tr class="hover:bg-gray-50">
197
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">PY20230901</td>
198
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023年9月</td>
199
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">82</td>
200
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥1,215,380.00</td>
201
+ <td class="px-6 py-4 whitespace-nowrap">
202
+ <span class="px-2 py-1 text-xs rounded-full status-paid text-white">已发放</span>
203
+ </td>
204
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张经理</td>
205
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-09-05 15:22</td>
206
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
207
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">查看</a>
208
+ <a href="#" class="text-gray-600 hover:text-gray-900">导出</a>
209
+ </td>
210
+ </tr>
211
+ <tr class="hover:bg-gray-50">
212
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">PY20230801</td>
213
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023年8月</td>
214
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">80</td>
215
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥1,158,640.00</td>
216
+ <td class="px-6 py-4 whitespace-nowrap">
217
+ <span class="px-2 py-1 text-xs rounded-full status-paid text-white">已发放</span>
218
+ </td>
219
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李财务</td>
220
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-08-05 16:10</td>
221
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
222
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">查看</a>
223
+ <a href="#" class="text-gray-600 hover:text-gray-900">导出</a>
224
+ </td>
225
+ </tr>
226
+ <tr class="hover:bg-gray-50">
227
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">PY20230701</td>
228
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023年7月</td>
229
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78</td>
230
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥1,086,250.00</td>
231
+ <td class="px-6 py-4 whitespace-nowrap">
232
+ <span class="px-2 py-1 text-xs rounded-full status-paid text-white">已发放</span>
233
+ </td>
234
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李财务</td>
235
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-05 11:45</td>
236
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
237
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">查看</a>
238
+ <a href="#" class="text-gray-600 hover:text-gray-900">导出</a>
239
+ </td>
240
+ </tr>
241
+ <tr class="hover:bg-gray-50">
242
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">PY20230601</td>
243
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023年6月</td>
244
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">76</td>
245
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥1,024,380.00</td>
246
+ <td class="px-6 py-4 whitespace-nowrap">
247
+ <span class="px-2 py-1 text-xs rounded-full status-paid text-white">已发放</span>
248
+ </td>
249
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王会计</td>
250
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-05 10:15</td>
251
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
252
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">查看</a>
253
+ <a href="#" class="text-gray-600 hover:text-gray-900">导出</a>
254
+ </td>
255
+ </tr>
256
+ </tbody>
257
+ </table>
258
+ </div>
259
+
260
+ <!-- 分页 -->
261
+ <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200">
262
+ <div class="flex-1 flex justify-between sm:hidden">
263
+ <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>
264
+ <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>
265
+ </div>
266
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
267
+ <div>
268
+ <p class="text-sm text-gray-700">
269
+ 显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span>，共 <span class="font-medium">12</span> 条记录
270
+ </p>
271
+ </div>
272
+ <div>
273
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
274
+ <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">
275
+ <span class="sr-only">Previous</span>
276
+ <i data-feather="chevron-left" class="h-5 w-5"></i>
277
+ </a>
278
+ <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>
279
+ <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>
280
+ <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>
281
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
282
+ <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">12</a>
283
+ <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">
284
+ <span class="sr-only">Next</span>
285
+ <i data-feather="chevron-right" class="h-5 w-5"></i>
286
+ </a>
287
+ </nav>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </main>
293
+
294
+ <script>
295
+ // Feather 图标替换
296
+ document.addEventListener('DOMContentLoaded', function() {
297
+ feather.replace();
298
+ });
299
+ </script>
300
+ </body>
301
+ </html>