611 lines
24 KiB
HTML
611 lines
24 KiB
HTML
<!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;
|
||
}
|
||
|
||
/* 新增样式 */
|
||
.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>
|
||
// 切换保险详情显示
|
||
function toggleDetail(detailId) {
|
||
const detailElement = document.getElementById(detailId);
|
||
if (detailElement.style.display === 'block') {
|
||
detailElement.style.display = 'none';
|
||
} else {
|
||
// 先关闭所有已打开的详情
|
||
document.querySelectorAll('.insurance-detail').forEach(detail => {
|
||
detail.style.display = 'none';
|
||
});
|
||
// 再打开当前点击的详情
|
||
detailElement.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
// 侧边栏菜单切换
|
||
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');
|
||
|
||
// 这里可以添加切换内容的逻辑
|
||
// 例如: document.querySelectorAll('.card').forEach(card => card.style.display = 'none');
|
||
// document.getElementById(this.dataset.target).style.display = 'block';
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |