Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>薪资计算器 - 薪智算</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Noto Sans SC', sans-serif; | |
| } | |
| .result-card { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| } | |
| .input-highlight { | |
| transition: all 0.3s ease; | |
| } | |
| .input-highlight:focus { | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- 导航栏 --> | |
| <nav class="bg-indigo-600 text-white py-4 px-6 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="dollar-sign" class="w-6 h-6"></i> | |
| <span class="text-xl font-bold">薪智算</span> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <a href="index.html" class="hover:text-indigo-200 transition"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| </a> | |
| <a href="payment.html" class="hover:text-indigo-200 transition"> | |
| <i data-feather="dollar-sign" class="w-5 h-5"></i> | |
| </a> | |
| <a href="salary_detail.html" class="hover:text-indigo-200 transition"> | |
| <i data-feather="credit-card" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="hover:text-indigo-200 transition"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="container mx-auto px-6 py-12"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-3xl md:text-4xl font-bold mb-4">智能薪资计算器</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">输入您的薪资信息，系统将自动计算税后收入、社保公积金扣款和个人所得税</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- 输入表单 --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-bold mb-6 flex items-center"> | |
| <i data-feather="edit-3" class="mr-2"></i> 薪资信息输入 | |
| </h2> | |
| <form> | |
| <div class="space-y-6"> | |
| <!-- 基本工资 --> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">基本工资</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span> | |
| <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"> | |
| </div> | |
| </div> | |
| <!-- 奖金补贴 --> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">奖金/补贴</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span> | |
| <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"> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mt-2"> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded">交通补贴</span> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded">餐补</span> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded">通讯补贴</span> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded">绩效奖金</span> | |
| </div> | |
| </div> | |
| <!-- 社保公积金 --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">社保基数</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span> | |
| <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"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">公积金基数</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span> | |
| <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"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 城市选择 --> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">所在城市</label> | |
| <select class="w-full input-highlight py-3 px-4 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500"> | |
| <option value="">-- 请选择城市 --</option> | |
| <option value="beijing">北京</option> | |
| <option value="shanghai">上海</option> | |
| <option value="guangzhou">广州</option> | |
| <option value="shenzhen">深圳</option> | |
| <option value="hangzhou">杭州</option> | |
| <option value="chengdu">成都</option> | |
| </select> | |
| </div> | |
| <!-- 专项附加扣除 --> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">专项附加扣除</label> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-3"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| <span class="text-gray-700">子女教育</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| <span class="text-gray-700">继续教育</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| <span class="text-gray-700">大病医疗</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| <span class="text-gray-700">住房贷款</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| <span class="text-gray-700">住房租金</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| <span class="text-gray-700">赡养老人</span> | |
| </label> | |
| </div> | |
| </div> | |
| <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"> | |
| <i data-feather="calculator" class="mr-2"></i> 立即计算薪资 | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- 计算结果 --> | |
| <div class="result-card text-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-bold mb-6 flex items-center"> | |
| <i data-feather="dollar-sign" class="mr-2"></i> 计算结果 | |
| </h2> | |
| <div class="space-y-6"> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg"> | |
| <div class="flex justify-between mb-2"> | |
| <span>税前月薪</span> | |
| <span class="font-bold">¥15,000.00</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span>奖金补贴</span> | |
| <span class="font-bold">¥2,000.00</span> | |
| </div> | |
| <div class="border-t border-white border-opacity-30 my-3"></div> | |
| <div class="flex justify-between text-lg"> | |
| <span>税前总收入</span> | |
| <span class="font-bold">¥17,000.00</span> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg"> | |
| <div class="flex justify-between mb-2"> | |
| <span>社保个人缴纳</span> | |
| <span class="font-bold">¥1,428.00</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span>公积金个人缴纳</span> | |
| <span class="font-bold">¥1,200.00</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span>个人所得税</span> | |
| <span class="font-bold">¥245.60</span> | |
| </div> | |
| <div class="border-t border-white border-opacity-30 my-3"></div> | |
| <div class="flex justify-between text-lg"> | |
| <span>总扣款</span> | |
| <span class="font-bold">¥2,873.60</span> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-4 rounded-lg text-center"> | |
| <div class="text-sm mb-1">税后月收入</div> | |
| <div class="text-3xl font-bold">¥14,126.40</div> | |
| </div> | |
| <button class="w-full py-3 bg-white text-indigo-600 rounded-lg hover:bg-opacity-90 transition flex justify-center items-center"> | |
| <i data-feather="download" class="mr-2"></i> 导出工资条 | |
| </button> | |
| <div class="text-xs opacity-80"> | |
| <p class="mb-1">计算结果仅供参考，具体以实际发放为准</p> | |
| <p>最后更新时间：2023年10月社保公积金标准</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 详细计算结果 --> | |
| <div class="mt-12 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="border-b border-gray-200"> | |
| <div class="px-6 py-4 flex items-center justify-between"> | |
| <h3 class="text-lg font-bold flex items-center"> | |
| <i data-feather="bar-chart-2" class="mr-2"></i> 详细计算结果 | |
| </h3> | |
| <button class="text-indigo-600 hover:text-indigo-800 transition"> | |
| <i data-feather="maximize-2" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">企业缴纳</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">个人缴纳</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">基数</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">比例</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">养老保险</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥1,680.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥840.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥12,000</td> | |
| <td class="px-4 py-3 whitespace-nowrap">企业16% / 个人8%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">医疗保险</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥540.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥108.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥12,000</td> | |
| <td class="px-4 py-3 whitespace-nowrap">企业4.5% / 个人2%+3</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">失业保险</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥60.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥30.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥12,000</td> | |
| <td class="px-4 py-3 whitespace-nowrap">企业0.5% / 个人0.5%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">工伤保险</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥24.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥0.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥12,000</td> | |
| <td class="px-4 py-3 whitespace-nowrap">企业0.2%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">生育保险</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥108.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥0.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥12,000</td> | |
| <td class="px-4 py-3 whitespace-nowrap">企业0.9%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">公积金</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥1,200.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥1,200.00</td> | |
| <td class="px-4 py-3 whitespace-nowrap">¥12,000</td> | |
| <td class="px-4 py-3 whitespace-nowrap">企业12% / 个人12%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Feather 图标替换 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |