822 lines
32 KiB
HTML
822 lines
32 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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 新增提醒相关样式 */
|
|||
|
|
.sidebar-notification {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 12px 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background-color 0.3s;
|
|||
|
|
}
|
|||
|
|
.sidebar-notification:hover {
|
|||
|
|
background-color: #2c3e50;
|
|||
|
|
}
|
|||
|
|
.notification-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 5px;
|
|||
|
|
right: 15px;
|
|||
|
|
background-color: #e74c3c;
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.reminder-item {
|
|||
|
|
padding: 15px;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.reminder-item.urgent {
|
|||
|
|
border-left: 4px solid #e74c3c;
|
|||
|
|
background-color: #fff5f5;
|
|||
|
|
}
|
|||
|
|
.reminder-item.warning {
|
|||
|
|
border-left: 4px solid #f39c12;
|
|||
|
|
background-color: #fffaf0;
|
|||
|
|
}
|
|||
|
|
.reminder-content h4 {
|
|||
|
|
margin: 0 0 5px 0;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
}
|
|||
|
|
.reminder-content p {
|
|||
|
|
margin: 0;
|
|||
|
|
color: #7f8c8d;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.reminder-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
.modal {
|
|||
|
|
display: none;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 1;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
background-color: rgba(0,0,0,0.4);
|
|||
|
|
}
|
|||
|
|
.modal-content {
|
|||
|
|
background-color: #fefefe;
|
|||
|
|
margin: 10% auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid #888;
|
|||
|
|
width: 60%;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
.close {
|
|||
|
|
color: #aaa;
|
|||
|
|
float: right;
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.close:hover {
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
</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 class="sidebar-notification" onclick="showReminders()">
|
|||
|
|
<span>保险提醒</span>
|
|||
|
|
<span class="notification-badge" id="reminderBadge">2</span>
|
|||
|
|
</div>
|
|||
|
|
</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>
|
|||
|
|
<div id="remindersList">
|
|||
|
|
<div class="reminder-item urgent">
|
|||
|
|
<div class="reminder-content">
|
|||
|
|
<h4>医疗保险即将到期</h4>
|
|||
|
|
<p>保单号: CL12345678</p>
|
|||
|
|
<p>到期日期: 2023-12-31 (剩余15天)</p>
|
|||
|
|
<p>提醒内容: 您的医疗保险即将到期，请及时处理续保事宜。</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="reminder-actions">
|
|||
|
|
<button class="btn btn-primary" onclick="viewInsuranceDetail('CL12345678')">查看详情</button>
|
|||
|
|
<button class="btn btn-success" onclick="acknowledgeReminder('1')">续保</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="reminder-item warning">
|
|||
|
|
<div class="reminder-content">
|
|||
|
|
<h4>意外险即将到期</h4>
|
|||
|
|
<p>保单号: PA87654321</p>
|
|||
|
|
<p>到期日期: 2023-12-25 (剩余9天)</p>
|
|||
|
|
<p>提醒内容: 您的意外险即将到期，请及时处理续保事宜。</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="reminder-actions">
|
|||
|
|
<button class="btn btn-primary" onclick="viewInsuranceDetail('PA87654321')">查看详情</button>
|
|||
|
|
<button class="btn btn-success" onclick="acknowledgeReminder('2')">续保</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
<!-- 新增：提醒详情模态框 -->
|
|||
|
|
<div id="remindersModal" class="modal">
|
|||
|
|
<div class="modal-content" style="width: 80%; max-width: 800px;">
|
|||
|
|
<span class="close" onclick="document.getElementById('remindersModal').style.display='none'">×</span>
|
|||
|
|
<h2>我的保险提醒</h2>
|
|||
|
|
<div id="modalRemindersList">
|
|||
|
|
<!-- 内容由JavaScript动态加载 -->
|
|||
|
|
</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');
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 新增提醒功能脚本
|
|||
|
|
function showReminders() {
|
|||
|
|
loadReminders();
|
|||
|
|
document.getElementById('remindersModal').style.display = 'block';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadReminders() {
|
|||
|
|
// 模拟数据
|
|||
|
|
const reminders = [
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
insuranceId: 'CL12345678',
|
|||
|
|
insuranceType: '医疗保险',
|
|||
|
|
endDate: '2023-12-31',
|
|||
|
|
daysLeft: 15,
|
|||
|
|
message: '您的医疗保险即将到期，请及时处理续保事宜。',
|
|||
|
|
isUrgent: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '2',
|
|||
|
|
insuranceId: 'PA87654321',
|
|||
|
|
insuranceType: '意外险',
|
|||
|
|
endDate: '2023-12-25',
|
|||
|
|
daysLeft: 9,
|
|||
|
|
message: '您的意外险即将到期，请及时处理续保事宜。',
|
|||
|
|
isUrgent: false
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const list = document.getElementById('modalRemindersList');
|
|||
|
|
list.innerHTML = '';
|
|||
|
|
|
|||
|
|
if (reminders.length === 0) {
|
|||
|
|
list.innerHTML = '<p>暂无待处理的保险提醒</p>';
|
|||
|
|
document.getElementById('reminderBadge').style.display = 'none';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.getElementById('reminderBadge').textContent = reminders.length;
|
|||
|
|
|
|||
|
|
reminders.forEach(reminder => {
|
|||
|
|
const item = document.createElement('div');
|
|||
|
|
item.className = `reminder-item ${reminder.isUrgent ? 'urgent' : 'warning'}`;
|
|||
|
|
|
|||
|
|
item.innerHTML = `
|
|||
|
|
<div class="reminder-content">
|
|||
|
|
<h4>${reminder.insuranceType}即将到期</h4>
|
|||
|
|
<p>保单号: ${reminder.insuranceId}</p>
|
|||
|
|
<p>到期日期: ${reminder.endDate} (剩余${reminder.daysLeft}天)</p>
|
|||
|
|
<p>${reminder.message}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="reminder-actions">
|
|||
|
|
<button class="btn btn-primary" onclick="viewInsuranceDetail('${reminder.insuranceId}')">查看详情</button>
|
|||
|
|
<button class="btn btn-success" onclick="acknowledgeReminder('${reminder.id}')">续保</button>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
list.appendChild(item);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function viewInsuranceDetail(policyId) {
|
|||
|
|
alert(`查看保单 ${policyId} 的详情`);
|
|||
|
|
document.getElementById('remindersModal').style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function acknowledgeReminder(reminderId) {
|
|||
|
|
// 这里应该是AJAX请求标记提醒为已处理
|
|||
|
|
alert(`已续保 ${reminderId}`);
|
|||
|
|
|
|||
|
|
// 更新UI
|
|||
|
|
const badge = document.getElementById('reminderBadge');
|
|||
|
|
const newCount = parseInt(badge.textContent) - 1;
|
|||
|
|
badge.textContent = newCount > 0 ? newCount : '0';
|
|||
|
|
if (newCount <= 0) {
|
|||
|
|
badge.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从列表中移除
|
|||
|
|
const item = document.querySelector(`[onclick="acknowledgeReminder('${reminderId}')"]`).closest('.reminder-item');
|
|||
|
|
if (item) item.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击模态框外部关闭模态框
|
|||
|
|
window.onclick = function(event) {
|
|||
|
|
if (event.target == document.getElementById('remindersModal')) {
|
|||
|
|
document.getElementById('remindersModal').style.display = "none";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|