ChengQiqian
/
yuanxingsheji
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
yuanxingsheji/保险管理/保险员工.html

611 lines
24 KiB
HTML
Raw Normal View History

1
2025-07-08 10:16:29 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>员工保险详情</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f6f9;
}
.header {
background-color: #2c3e50;
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
margin: 0;
font-size: 22px;
}
.user-info {
display: flex;
align-items: center;
}
.user-info span {
margin-right: 15px;
}
.logout-btn {
background-color: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
.container {
display: flex;
min-height: calc(100vh - 60px);
}
.sidebar {
width: 220px;
background-color: #34495e;
color: white;
padding: 20px 0;
}
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-menu li {
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.3s;
}
.sidebar-menu li:hover {
background-color: #2c3e50;
}
.sidebar-menu li.active {
background-color: #2c3e50;
border-left: 4px solid #3498db;
}
.main-content {
flex: 1;
padding: 20px;
}
.card {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.card-header {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-header h2 {
margin: 0;
font-size: 18px;
color: #2c3e50;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
font-weight: bold;
color: #2c3e50;
}
tr:hover {
background-color: #f5f5f5;
}
.btn {
padding: 8px 12px;
border-radius: 3px;
border: none;
cursor: pointer;
font-size: 14px;
margin-right: 5px;
}
.btn-primary {
background-color: #3498db;
color: white;
}
.btn-success {
background-color: #27ae60;
color: white;
}
.btn-danger {
background-color: #e74c3c;
color: white;
}
.btn-warning {
background-color: #f39c12;
color: white;
}
.btn-primary:hover {
background-color: #2980b9;
}
.btn-success:hover {
background-color: #219653;
}
.btn-danger:hover {
background-color: #c0392b;
}
.btn-warning:hover {
background-color: #e67e22;
}
.status-active {
color: #27ae60;
font-weight: bold;
}
.status-expired {
color: #e74c3c;
font-weight: bold;
}
.status-pending {
color: #f39c12;
font-weight: bold;
}
1
2025-07-25 17:57:25 +08:00
/* 新增样式 */
1
2025-07-08 10:16:29 +08:00
.insurance-detail {
display: none;
margin-top: 15px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
border-left: 4px solid #3498db;
}
.detail-row {
display: flex;
margin-bottom: 10px;
}
.detail-label {
width: 150px;
font-weight: bold;
color: #555;
}
.detail-value {
flex: 1;
}
.policy-benefits {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #eee;
}
.benefit-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed #ddd;
}
.text-success {
color: #27ae60;
}
.text-warning {
color: #f39c12;
}
.text-danger {
color: #e74c3c;
}
.file-list {
list-style: none;
padding: 0;
}
.file-item {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #eee;
align-items: center;
}
.file-item:hover {
background-color: #f9f9f9;
}
.file-icon {
margin-right: 10px;
color: #3498db;
}
.profile-section {
display: flex;
margin-bottom: 20px;
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #eee;
margin-right: 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-info {
flex: 1;
}
.profile-name {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.profile-meta {
color: #7f8c8d;
margin-bottom: 10px;
}
.profile-actions {
margin-top: 10px;
}
.info-table {
width: 100%;
}
.info-table td {
padding: 10px;
border-bottom: 1px solid #eee;
}
.info-table td:first-child {
width: 30%;
font-weight: bold;
color: #555;
}
</style>
</head>
<body>
<div class="header">
<h1>员工保险管理系统</h1>
<div class="user-info">
<span>张三 (EMP001)</span>
<button class="logout-btn" onclick="window.location.href='login.html'">退出</button>
</div>
</div>
<div class="container">
<div class="sidebar">
<ul class="sidebar-menu">
<li class="active">我的保险</li>
<li>保单文件</li>
<li>个人信息</li>
<li>修改密码</li>
</ul>
</div>
<div class="main-content">
<div class="card">
<div class="card-header">
<h2>我的保险信息</h2>
</div>
<table>
<thead>
<tr>
<th>保险公司</th>
<th>保险类型</th>
<th>保单号</th>
<th>生效日期</th>
<th>到期日期</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>中国人寿</td>
<td>医疗保险</td>
<td>CL12345678</td>
<td>2023-01-01</td>
<td>2023-12-31</td>
<td class="status-active">有效</td>
<td><button class="btn btn-primary" onclick="toggleDetail('detail1')">查看详情</button></td>
</tr>
<tr>
<td colspan="7">
<div id="detail1" class="insurance-detail">
<div class="detail-row">
<div class="detail-label">保费:</div>
<div class="detail-value">¥ 8,500/年 (公司承担¥6,800，个人承担¥1,700)</div>
</div>
<div class="detail-row">
<div class="detail-label">保额:</div>
<div class="detail-value">¥ 500,000</div>
</div>
<div class="detail-row">
<div class="detail-label">受益人:</div>
<div class="detail-value">张三本人</div>
</div>
<div class="detail-row">
<div class="detail-label">缴费方式:</div>
<div class="detail-value">年缴</div>
</div>
<div class="detail-row">
<div class="detail-label">备注:</div>
<div class="detail-value">包含门诊和住院医疗，无免赔额</div>
</div>
<div class="policy-benefits">
<h4>保障内容:</h4>
<div class="benefit-item">
<span>住院医疗费用报销</span>
<span class="text-success">最高¥200,000 (90%报销)</span>
</div>
<div class="benefit-item">
<span>门诊医疗费用报销</span>
<span class="text-success">最高¥50,000 (80%报销)</span>
</div>
<div class="benefit-item">
<span>重大疾病保障</span>
<span class="text-success">一次性给付¥300,000 (涵盖30种重疾)</span>
</div>
<div class="benefit-item">
<span>住院津贴</span>
<span class="text-warning">¥200/天(最高90天)</span>
</div>
<div class="benefit-item">
<span>年度体检</span>
<span class="text-success">免费基础体检1次/年</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>平安保险</td>
<td>意外险</td>
<td>PA87654321</td>
<td>2023-01-01</td>
<td>2023-12-31</td>
<td class="status-active">有效</td>
<td><button class="btn btn-primary" onclick="toggleDetail('detail2')">查看详情</button></td>
</tr>
<tr>
<td colspan="7">
<div id="detail2" class="insurance-detail">
<div class="detail-row">
<div class="detail-label">保费:</div>
<div class="detail-value">¥ 1,200/年 (公司全额承担)</div>
</div>
<div class="detail-row">
<div class="detail-label">保额:</div>
<div class="detail-value">¥ 1,000,000</div>
</div>
<div class="detail-row">
<div class="detail-label">受益人:</div>
<div class="detail-value">张三本人、配偶、子女</div>
</div>
<div class="detail-row">
<div class="detail-label">保障地区:</div>
<div class="detail-value">全球范围(战争地区除外)</div>
</div>
<div class="policy-benefits">
<h4>保障内容:</h4>
<div class="benefit-item">
<span>意外身故/全残</span>
<span class="text-success">¥1,000,000</span>
</div>
<div class="benefit-item">
<span>意外医疗费用</span>
<span class="text-success">¥50,000 (100%报销)</span>
</div>
<div class="benefit-item">
<span>意外住院津贴</span>
<span class="text-warning">¥150/天(最高180天)</span>
</div>
<div class="benefit-item">
<span>公共交通意外</span>
<span class="text-success">额外¥500,000</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>泰康保险</td>
<td>养老保险</td>
<td>TK33445566</td>
<td>2022-01-01</td>
<td>2042-12-31</td>
<td class="status-active">有效</td>
<td><button class="btn btn-primary" onclick="toggleDetail('detail3')">查看详情</button></td>
</tr>
<tr>
<td colspan="7">
<div id="detail3" class="insurance-detail">
<div class="detail-row">
<div class="detail-label">保费:</div>
<div class="detail-value">¥ 12,000/年 (公司承担¥6,000，个人承担¥6,000)</div>
</div>
<div class="detail-row">
<div class="detail-label">保额:</div>
<div class="detail-value">退休后每月¥3,000 (保证领取20年)</div>
</div>
<div class="detail-row">
<div class="detail-label">受益人:</div>
<div class="detail-value">张三本人</div>
</div>
<div class="detail-row">
<div class="detail-label">缴费期限:</div>
<div class="detail-value">20年 (已缴1年)</div>
</div>
<div class="detail-row">
<div class="detail-label">预计退休金:</div>
<div class="detail-value text-success">¥3,000/月 (按当前标准)</div>
</div>
<div class="policy-benefits">
<h4>保障内容:</h4>
<div class="benefit-item">
<span>养老金</span>
<span class="text-success">60岁起每月领取¥3,000</span>
</div>
<div class="benefit-item">
<span>身故保障</span>
<span class="text-success">缴费期内身故返还已缴保费120%</span>
</div>
<div class="benefit-item">
<span>全残保障</span>
<span class="text-success">缴费期内全残免缴后续保费</span>
</div>
<div class="benefit-item">
<span>分红权益</span>
<span class="text-warning">参与公司盈利分配(浮动)</span>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<div class="card-header">
<h2>保单文件</h2>
</div>
<ul class="file-list">
<li class="file-item">
<div>
<span class="file-icon">📄</span>
<span>中国人寿-医疗保险-保单.pdf</span>
</div>
<div>
<button class="btn btn-primary">查看</button>
<button class="btn btn-success">下载</button>
</div>
</li>
<li class="file-item">
<div>
<span class="file-icon">📄</span>
<span>平安保险-意外险-保单.pdf</span>
</div>
<div>
<button class="btn btn-primary">查看</button>
<button class="btn btn-success">下载</button>
</div>
</li>
<li class="file-item">
<div>
<span class="file-icon">📄</span>
<span>泰康保险-养老保险-保单.pdf</span>
</div>
<div>
<button class="btn btn-primary">查看</button>
<button class="btn btn-success">下载</button>
</div>
</li>
<li class="file-item">
<div>
<span class="file-icon">📄</span>
<span>保险条款说明.docx</span>
</div>
<div>
<button class="btn btn-primary">查看</button>
<button class="btn btn-success">下载</button>
</div>
</li>
</ul>
</div>
<div class="card">
<div class="card-header">
<h2>个人信息</h2>
<button class="btn btn-primary">编辑信息</button>
</div>
<div class="profile-section">
<div class="profile-avatar">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="员工头像">
</div>
<div class="profile-info">
<div class="profile-name">张三</div>
<div class="profile-meta">EMP001 | 技术部 | 高级软件工程师</div>
<div class="profile-actions">
<button class="btn btn-primary">更换头像</button>
<button class="btn btn-warning">修改密码</button>
</div>
</div>
</div>
<table class="info-table">
<tr>
<td>员工编号</td>
<td>EMP001</td>
</tr>
<tr>
<td>部门</td>
<td>技术部</td>
</tr>
<tr>
<td>职位</td>
<td>高级软件工程师</td>
</tr>
<tr>
<td>入职日期</td>
<td>2020-05-15</td>
</tr>
<tr>
<td>联系电话</td>
<td>13800138001</td>
</tr>
<tr>
<td>电子邮箱</td>
<td>zhangsan@company.com</td>
</tr>
<tr>
<td>身份证号</td>
<td>**************1234</td>
</tr>
<tr>
<td>联系地址</td>
<td>北京市海淀区中关村软件园1号楼</td>
</tr>
<tr>
<td>紧急联系人</td>
<td>李四 (配偶) 13800138002</td>
</tr>
</table>
</div>
</div>
</div>
<script>
1
2025-07-25 17:57:25 +08:00
// 切换保险详情显示
1
2025-07-08 10:16:29 +08:00
function toggleDetail(detailId) {
const detailElement = document.getElementById(detailId);
if (detailElement.style.display === 'block') {
detailElement.style.display = 'none';
} else {
1
2025-07-25 17:57:25 +08:00
// 先关闭所有已打开的详情
1
2025-07-08 10:16:29 +08:00
document.querySelectorAll('.insurance-detail').forEach(detail => {
detail.style.display = 'none';
});
1
2025-07-25 17:57:25 +08:00
// 再打开当前点击的详情
1
2025-07-08 10:16:29 +08:00
detailElement.style.display = 'block';
}
}
1
2025-07-25 17:57:25 +08:00
// 侧边栏菜单切换
1
2025-07-08 10:16:29 +08:00
document.querySelectorAll('.sidebar-menu li').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.sidebar-menu li').forEach(li => {
li.classList.remove('active');
});
this.classList.add('active');
1
2025-07-25 17:57:25 +08:00
// 这里可以添加切换内容的逻辑
// 例如: document.querySelectorAll('.card').forEach(card => card.style.display = 'none');
// document.getElementById(this.dataset.target).style.display = 'block';
1
2025-07-08 10:16:29 +08:00
});
1
2025-07-25 17:57:25 +08:00
});
1
2025-07-08 10:16:29 +08:00
</script>
</body>
</html>