Spaces:
Running
Running
File size: 13,681 Bytes
aa99493 56c61cf aa99493 1989cd4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 |
<!DOCTYPE html>
<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>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></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;
}
.glass-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
border-radius: 12px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.input-field {
transition: all 0.3s ease;
}
.input-field:focus {
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
<div class="relative min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-indigo-600 text-white py-4 px-6 shadow-lg z-10">
<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="hidden md:flex space-x-6">
<a href="index.html" class="hover:text-indigo-200 font-medium">首页</a>
<a href="calculator.html" class="hover:text-indigo-200 font-medium">薪资计算</a>
<a href="payment.html" class="hover:text-indigo-200 font-medium">薪资发放</a>
<a href="salary_detail.html" class="hover:text-indigo-200 font-medium">薪资明细</a>
<a href="#" class="hover:text-indigo-200 font-medium">社保公积金</a>
<a href="#" class="hover:text-indigo-200 font-medium">报表管理</a>
</div>
<div class="flex items-center space-x-4">
<button class="px-4 py-2 bg-indigo-700 rounded-lg hover:bg-indigo-800 transition">登录</button>
<button class="px-4 py-2 bg-white text-indigo-600 rounded-lg hover:bg-indigo-50 transition">注册</button>
</div>
<button class="md:hidden">
<i data-feather="menu" class="w-6 h-6"></i>
</button>
</div>
</nav>
<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-6 py-12 z-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
智能薪资核算<br>
<span class="text-indigo-600">轻松搞定</span> 薪资管理
</h1>
<p class="text-lg text-gray-600 mb-8">
薪智算为您提供一站式薪资计算解决方案，自动计算社保公积金、个人所得税，生成合规报表，让薪资管理变得简单高效。
</p>
<div class="flex flex-wrap gap-4">
<button class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition shadow-lg flex items-center">
<i data-feather="play" class="mr-2"></i> 立即体验
</button>
<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">
<i data-feather="book-open" class="mr-2"></i> 使用教程
</button>
</div>
</div>
<div class="glass-card p-8">
<h2 class="text-2xl font-bold mb-6 text-center">薪资计算器</h2>
<form>
<div class="space-y-4">
<div>
<label class="block text-gray-700 mb-2">基本工资</label>
<div class="relative">
<span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
<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">
</div>
</div>
<div>
<label class="block text-gray-700 mb-2">奖金/补贴</label>
<div class="relative">
<span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
<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">
</div>
</div>
<div>
<label class="block text-gray-700 mb-2">社保基数</label>
<div class="relative">
<span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
<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">
</div>
</div>
<div>
<label class="block text-gray-700 mb-2">公积金基数</label>
<div class="relative">
<span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
<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">
</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>
</main>
<!-- 功能特色 -->
<section class="py-16 bg-white z-10">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">核心功能</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="glass-card p-6 rounded-xl hover:shadow-xl transition">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
<i data-feather="percent" class="text-indigo-600 w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold mb-3">智能个税计算</h3>
<p class="text-gray-600">自动计算最新个人所得税，支持累计预扣法，精准符合税法要求。</p>
</div>
<div class="glass-card p-6 rounded-xl hover:shadow-xl transition">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
<i data-feather="shield" class="text-indigo-600 w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold mb-3">社保公积金</h3>
<p class="text-gray-600">支持全国各城市社保公积金自动计算，实时更新最新缴费基数和比例。</p>
</div>
<div class="glass-card p-6 rounded-xl hover:shadow-xl transition">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
<i data-feather="file-text" class="text-indigo-600 w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold mb-3">报表导出</h3>
<p class="text-gray-600">一键生成工资条、银行代发文件、个税申报表等多种格式报表。</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-12 z-10">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4 flex items-center">
<i data-feather="dollar-sign" class="mr-2"></i> 薪智算
</h3>
<p class="text-gray-400">让薪资管理变得简单高效，为企业提供一站式薪资计算解决方案。</p>
</div>
<div>
<h4 class="font-bold mb-4">产品</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">薪资计算</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">社保公积金</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">个税计算</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">报表导出</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">资源</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">帮助文档</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">API接口</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">更新日志</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">联系我们</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">关注我们</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600 transition">
<i data-feather="github" class="w-5 h-5"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-500 transition">
<i data-feather="twitter" class="w-5 h-5"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-500 transition">
<i data-feather="youtube" class="w-5 h-5"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-700 transition">
<i data-feather="linkedin" class="w-5 h-5"></i>
</a>
</div>
<div class="mt-6">
<p class="text-gray-400">订阅我们的新闻</p>
<div class="flex mt-2">
<input type="email" placeholder="您的邮箱" class="py-2 px-3 rounded-l-lg focus:outline-none text-gray-800">
<button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition">
<i data-feather="send" class="w-4 h-4"></i>
</button>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 薪智算 - 智能薪资核算系统. 保留所有权利.</p>
</div>
</div>
</footer>
</div>
<script>
// Vanta.js 背景动画
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x5b6ee1,
backgroundColor: 0xf8fafc,
points: 12.00,
maxDistance: 22.00,
spacing: 18.00
});
// Feather 图标替换
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
});
</script>
</body>
</html>
|