<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>白云区人和镇劳动争议"解纷智能体"</title>
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
<style>
|
:root {
|
--primary-color: #1a6fb8;
|
--secondary-color: #0d4a8a;
|
--success-color: #2a9d8f;
|
--warning-color: #e9c46a;
|
--danger-color: #e76f51;
|
--light-color: #f8f9fa;
|
--dark-color: #212529;
|
--gray-color: #6c757d;
|
--border-color: #dee2e6;
|
--border-radius: 8px;
|
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
}
|
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
}
|
|
body {
|
background-color: #f5f7fb;
|
color: #333;
|
line-height: 1.6;
|
overflow-x: hidden;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.status-info {
|
display: flex;
|
align-items: center;
|
gap: 30px;
|
}
|
|
.status-indicator {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.status-dot {
|
width: 12px;
|
height: 12px;
|
border-radius: 50%;
|
background: var(--success-color);
|
animation: pulse 2s infinite;
|
}
|
|
@keyframes pulse {
|
0% {
|
opacity: 1;
|
}
|
50% {
|
opacity: 0.5;
|
}
|
100% {
|
opacity: 1;
|
}
|
}
|
|
.status-text {
|
font-size: 1.1rem;
|
font-weight: 600;
|
color: var(--dark-color);
|
}
|
|
.time-info {
|
font-size: 1rem;
|
color: var(--gray-color);
|
}
|
|
.time-value {
|
color: var(--dark-color);
|
font-weight: 600;
|
}
|
/* 上部分：标题和信息 - 降低高度 */
|
.top-section {
|
background: white;
|
padding: 15px 24px; /* 减少上下内边距 */
|
border-bottom: 1px solid var(--border-color);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px; /* 减少间距 */
|
}
|
|
.title-area {
|
display: flex;
|
align-items: center;
|
gap: 12px; /* 减少间距 */
|
}
|
|
.title-icon {
|
color: var(--primary-color);
|
font-size: 1.8rem; /* 减小图标大小 */
|
}
|
|
.title-text {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.title-text h1 {
|
font-size: 1.6rem; /* 减小标题字体大小 */
|
color: var(--secondary-color);
|
margin-bottom: 4px; /* 减少间距 */
|
}
|
|
.title-subtitle {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
margin-bottom: 3px;
|
}
|
|
.subtitle-text {
|
color: var(--gray-color);
|
font-size: 0.9rem; /* 减小字体 */
|
}
|
|
.ai-status-tag {
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
color: white;
|
padding: 3px 8px; /* 减少内边距 */
|
border-radius: 20px;
|
font-size: 0.75rem; /* 减小字体 */
|
font-weight: 600;
|
display: flex;
|
align-items: center;
|
gap: 4px;
|
}
|
|
.ai-status-tag i {
|
font-size: 0.6rem;
|
}
|
|
.case-info {
|
display: flex;
|
gap: 35px; /* 减少间距 */
|
}
|
|
.info-item {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.info-label {
|
font-size: 0.85rem; /* 减小字体 */
|
color: var(--gray-color);
|
margin-bottom: 3px; /* 减少间距 */
|
}
|
|
.info-value {
|
font-weight: 600;
|
font-size: 1rem; /* 减小字体 */
|
color: var(--dark-color);
|
}
|
|
/* 中部分：A和B区域 */
|
.middle-section {
|
display: flex;
|
flex: 1;
|
overflow: hidden;
|
padding: 15px 24px 80px; /* 减少上下内边距 */
|
gap: 20px;
|
}
|
|
/* A区域：左侧主要内容 */
|
.area-a {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
gap: 12px; /* 减少间距 */
|
overflow: hidden;
|
}
|
|
/* AI调解进度 - 降低高度 */
|
.mediation-progress {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 12px 20px; /* 减少上下内边距 */
|
box-shadow: var(--box-shadow);
|
flex-shrink: 0;
|
height: 120px; /* 进一步降低高度 */
|
display: flex;
|
flex-direction: column;
|
}
|
|
.section-title {
|
display: flex;
|
align-items: center;
|
gap: 8px; /* 减少间距 */
|
font-size: 1.1rem; /* 减小字体 */
|
margin-bottom: 12px; /* 减少间距 */
|
color: var(--secondary-color);
|
}
|
|
.section-title i {
|
font-size: 1.2rem; /* 减小图标大小 */
|
}
|
|
/* 步骤条 - 调整以适应更低高度 */
|
.progress-steps {
|
display: flex;
|
justify-content: space-between;
|
position: relative;
|
margin-bottom: 10px; /* 减少间距 */
|
flex: 1;
|
}
|
|
.progress-steps::before {
|
content: '';
|
position: absolute;
|
top: 18px; /* 调整位置 */
|
left: 0;
|
width: 100%;
|
height: 3px; /* 减少高度 */
|
background: #e9ecef;
|
z-index: 1;
|
}
|
|
.progress-line {
|
position: absolute;
|
top: 18px; /* 调整位置 */
|
left: 0;
|
height: 3px; /* 减少高度 */
|
background: var(--primary-color);
|
z-index: 2;
|
width: 20%;
|
transition: width 0.5s ease;
|
}
|
|
.step {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
position: relative;
|
z-index: 3;
|
width: 20%;
|
}
|
|
.step-indicator {
|
width: 36px; /* 减小尺寸 */
|
height: 36px;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: #e9ecef;
|
color: var(--gray-color);
|
font-weight: 600;
|
margin-bottom: 6px; /* 减少间距 */
|
border: 3px solid white; /* 减少边框 */
|
transition: all 0.3s ease;
|
font-size: 0.75rem; /* 减小字体 */
|
}
|
|
.step.active .step-indicator {
|
background: var(--primary-color);
|
color: white;
|
transform: scale(1.05);
|
}
|
|
.step.completed .step-indicator {
|
background: var(--success-color);
|
color: white;
|
}
|
|
.step-label {
|
font-size: 0.75rem; /* 减小字体 */
|
text-align: center;
|
color: var(--gray-color);
|
font-weight: 500;
|
line-height: 1.2;
|
}
|
|
.step.active .step-label,
|
.step.completed .step-label {
|
color: var(--primary-color);
|
font-weight: 600;
|
}
|
|
.step.completed .step-label {
|
color: var(--success-color);
|
}
|
|
/* 选项卡容器 - 增加高度 */
|
.tab-container {
|
background: white;
|
border-radius: var(--border-radius);
|
box-shadow: var(--box-shadow);
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
min-height: 500px; /* 确保最小高度 */
|
}
|
|
.tab-header {
|
display: flex;
|
border-bottom: 1px solid var(--border-color);
|
background: #f8f9fa;
|
flex-shrink: 0;
|
}
|
|
.tab-btn {
|
padding: 12px 18px; /* 减小内边距 */
|
background: none;
|
border: none;
|
font-size: 0.9rem; /* 减小字体 */
|
font-weight: 600;
|
color: var(--gray-color);
|
cursor: pointer;
|
transition: all 0.2s ease;
|
position: relative;
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
}
|
|
.tab-btn:hover {
|
color: var(--primary-color);
|
background: rgba(26, 111, 184, 0.05);
|
}
|
|
.tab-btn.active {
|
color: var(--primary-color);
|
}
|
|
.tab-btn.active::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 3px;
|
background: var(--primary-color);
|
}
|
|
/* 选项卡待确认标签 */
|
.tab-badge {
|
background: #dc3545;
|
color: white;
|
font-size: 0.7rem;
|
padding: 1px 6px;
|
border-radius: 10px;
|
margin-left: 5px;
|
font-weight: 600;
|
}
|
|
.tab-content {
|
flex: 1;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.tab-pane {
|
flex: 1;
|
display: none;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
|
.tab-pane.active {
|
display: flex;
|
}
|
|
/* 选项卡内容区域 - 增加更多空间 */
|
.tab-content-area {
|
flex: 1;
|
overflow-y: auto;
|
padding: 20px;
|
max-height: calc(100vh - 350px); /* 增加最大高度 */
|
}
|
|
/* 调解数据看板 */
|
.mediation-metrics {
|
display: grid;
|
grid-template-columns: 2fr 1fr;
|
gap: 20px;
|
}
|
|
.metric-card {
|
background: #f8f9fa;
|
border-radius: var(--border-radius);
|
padding: 18px; /* 减少内边距 */
|
display: flex;
|
flex-direction: column;
|
min-height: 200px;
|
}
|
|
.metric-title {
|
font-size: 1rem;
|
color: var(--secondary-color);
|
margin-bottom: 12px; /* 减少间距 */
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-weight: 600;
|
}
|
|
.metric-content {
|
flex: 1;
|
}
|
|
/* 诉求差距分析 */
|
.gap-analysis {
|
background: #f0f7ff;
|
border-radius: 8px;
|
padding: 14px; /* 减少内边距 */
|
border-left: 4px solid var(--primary-color);
|
margin-top: 15px;
|
position: relative;
|
}
|
|
.gap-title {
|
font-size: 0.9rem; /* 减小字体 */
|
font-weight: 600;
|
color: var(--secondary-color);
|
margin-bottom: 6px; /* 减少间距 */
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.gap-update-time {
|
position: absolute;
|
top: 10px;
|
right: 15px;
|
font-size: 0.8rem;
|
color: var(--gray-color);
|
font-style: italic;
|
}
|
|
.gap-content {
|
font-size: 0.9rem; /* 减小字体 */
|
line-height: 1.5;
|
color: var(--dark-color);
|
}
|
|
.gap-content ul {
|
padding-left: 20px;
|
margin-top: 6px; /* 减少间距 */
|
}
|
|
.gap-content li {
|
margin-bottom: 4px; /* 减少间距 */
|
font-size: 0.9rem; /* 减小字体 */
|
}
|
|
/* 调解数据 */
|
.success-metric {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
text-align: center;
|
padding: 10px;
|
height: 100%;
|
}
|
|
.success-value {
|
font-size: 2.5rem; /* 增加字体大小 */
|
font-weight: 800;
|
color: var(--primary-color);
|
line-height: 1;
|
margin-bottom: 8px; /* 减少间距 */
|
}
|
|
.success-label {
|
font-size: 0.95rem; /* 减小字体 */
|
color: var(--gray-color);
|
margin-bottom: 8px;
|
}
|
|
.success-change {
|
font-size: 0.85rem; /* 减小字体 */
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
color: var(--success-color);
|
font-weight: 600;
|
}
|
|
/* 证据材料汇总看板 */
|
.evidence-summary {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 20px;
|
}
|
|
.party-evidence {
|
background: #f8f9fa;
|
border-radius: var(--border-radius);
|
padding: 18px; /* 减少内边距 */
|
border-top: 4px solid #e9ecef;
|
min-height: 300px;
|
}
|
|
.party-evidence.applicant {
|
border-top-color: var(--primary-color);
|
}
|
|
.party-evidence.respondent {
|
border-top-color: #e9c46a;
|
}
|
|
.party-evidence-header {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
margin-bottom: 12px; /* 减少间距 */
|
}
|
|
.party-evidence-title {
|
font-weight: 600;
|
font-size: 1.05rem; /* 减小字体 */
|
color: var(--dark-color);
|
}
|
|
.evidence-count {
|
font-size: 0.85rem; /* 减小字体 */
|
color: var(--gray-color);
|
margin-left: auto;
|
}
|
|
.evidence-list {
|
display: flex;
|
flex-direction: column;
|
gap: 10px; /* 减少间距 */
|
}
|
|
.evidence-item {
|
background: white;
|
border-radius: 6px;
|
padding: 12px; /* 减少内边距 */
|
border-left: 3px solid #e9ecef;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
}
|
|
.evidence-item.applicant {
|
border-left-color: var(--primary-color);
|
}
|
|
.evidence-item.respondent {
|
border-left-color: #e9c46a;
|
}
|
|
.evidence-item-content {
|
flex: 1;
|
}
|
|
.evidence-name {
|
font-weight: 600;
|
font-size: 0.9rem; /* 减小字体 */
|
margin-bottom: 4px; /* 减少间距 */
|
color: var(--dark-color);
|
}
|
|
.evidence-desc {
|
font-size: 0.8rem; /* 减小字体 */
|
color: var(--gray-color);
|
line-height: 1.4;
|
}
|
|
.evidence-upload-time {
|
font-size: 0.75rem; /* 减小字体 */
|
color: var(--gray-color);
|
margin-top: 4px;
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
}
|
|
.evidence-actions {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
gap: 8px;
|
margin-left: 10px;
|
}
|
|
.evidence-status {
|
font-size: 0.75rem; /* 减小字体 */
|
padding: 3px 8px;
|
border-radius: 12px;
|
font-weight: 600;
|
}
|
|
.status-verified {
|
background: #d4edda;
|
color: #155724;
|
border: 1px solid #c3e6cb;
|
}
|
|
.status-pending {
|
background: #fff3cd;
|
color: #856404;
|
border: 1px solid #ffeaa7;
|
}
|
|
/* 新增：证据材料审核状态文字样式 */
|
.evidence-status-text {
|
font-size: 0.8rem;
|
font-weight: 600;
|
margin-top: 4px;
|
display: inline-flex;
|
align-items: center;
|
gap: 6px;
|
}
|
|
.status-text-verified {
|
color: #155724;
|
}
|
|
.status-text-pending {
|
color: #856404;
|
}
|
|
/* 新增：证据材料审核按钮 */
|
.review-btn {
|
padding: 3px 10px;
|
font-size: 0.75rem;
|
background: #1A6FB8;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
margin-top: 10px;
|
margin-left: 0px;
|
font-weight: 600;
|
transition: all 0.2s ease;
|
}
|
|
.review-btn:hover {
|
background: #0056b3;
|
transform: translateY(-1px);
|
}
|
|
.evidence-status-container {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 8px;
|
}
|
|
/* AI调解实时看板 */
|
.board-container {
|
flex: 1;
|
overflow-y: auto;
|
padding-right: 10px;
|
max-height: 450px; /* 增加最大高度 */
|
}
|
|
/* 新增：协商沟通总结 */
|
.mediation-summary {
|
background: #f0f7ff;
|
border-radius: var(--border-radius);
|
padding: 12px 16px;
|
margin-bottom: 15px;
|
border-left: 4px solid var(--primary-color);
|
font-size: 0.9rem;
|
color: var(--dark-color);
|
}
|
|
.summary-title {
|
font-weight: 600;
|
color: var(--secondary-color);
|
margin-bottom: 5px;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.summary-content {
|
line-height: 1.5;
|
}
|
|
.board-item {
|
background: #f8f9fa;
|
border-radius: var(--border-radius);
|
padding: 16px; /* 减少内边距 */
|
margin-bottom: 12px; /* 减少间距 */
|
transition: all 0.2s ease;
|
border: 1px solid #e9ecef;
|
}
|
|
.board-item:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
|
}
|
|
.item-header {
|
display: flex;
|
align-items: center;
|
gap: 10px; /* 减少间距 */
|
margin-bottom: 10px; /* 减少间距 */
|
}
|
|
.item-avatar {
|
width: 32px; /* 减小尺寸 */
|
height: 32px;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: white;
|
font-weight: 600;
|
flex-shrink: 0;
|
font-size: 0.9rem; /* 减小字体 */
|
}
|
|
.avatar-ai {
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
}
|
|
.avatar-applicant {
|
background: linear-gradient(135deg, var(--primary-color), #0d4a8a);
|
}
|
|
.avatar-respondent {
|
background: linear-gradient(135deg, #e9c46a, #e76f51);
|
}
|
|
.avatar-mediator {
|
background: linear-gradient(135deg, #7209b7, #3a0ca3);
|
}
|
|
.item-source {
|
flex: 1;
|
}
|
|
.source-name {
|
font-weight: 600;
|
font-size: 0.95rem; /* 减小字体 */
|
color: var(--dark-color);
|
margin-bottom: 2px;
|
}
|
|
.source-time {
|
font-size: 0.8rem; /* 减小字体 */
|
color: var(--gray-color);
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
}
|
|
.item-content {
|
background: white;
|
border-radius: 8px;
|
padding: 12px; /* 减少内边距 */
|
margin-bottom: 10px; /* 减少间距 */
|
line-height: 1.5;
|
font-size: 0.9rem; /* 减小字体 */
|
border-left: 3px solid #e9ecef;
|
}
|
|
.content-ai {
|
border-left-color: var(--primary-color);
|
}
|
|
.content-applicant {
|
border-left-color: var(--primary-color);
|
}
|
|
.content-respondent {
|
border-left-color: #e9c46a;
|
}
|
|
.content-mediator {
|
border-left-color: #7209b7;
|
}
|
|
.item-tags {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 6px; /* 减少间距 */
|
align-items: center;
|
}
|
|
.item-tag {
|
display: inline-block;
|
padding: 3px 8px; /* 减少内边距 */
|
border-radius: 20px;
|
font-size: 0.75rem; /* 减小字体 */
|
font-weight: 600;
|
}
|
|
.tag-type-1 {
|
background: #e3f2fd;
|
color: #1565c0;
|
border: 1px solid #bbdefb;
|
}
|
|
.tag-type-2 {
|
background: #e8f5e9;
|
color: #2e7d32;
|
border: 1px solid #c8e6c9;
|
}
|
|
.tag-type-3 {
|
background: #fff3e0;
|
color: #ef6c00;
|
border: 1px solid #ffe0b2;
|
}
|
|
.tag-type-4 {
|
background: #f3e5f5;
|
color: #7b1fa2;
|
border: 1px solid #e1bee7;
|
}
|
|
.tag-type-5 {
|
background: #ffebee;
|
color: #c62828;
|
border: 1px solid #ffcdd2;
|
}
|
|
.tag-type-6 {
|
background: #e8eaf6;
|
color: #3949ab;
|
border: 1px solid #c5cae9;
|
}
|
|
.review-status {
|
display: inline-flex;
|
align-items: center;
|
gap: 4px;
|
padding: 2px 6px; /* 减少内边距 */
|
border-radius: 12px;
|
font-size: 0.7rem; /* 减小字体 */
|
font-weight: 600;
|
}
|
|
.review-pending {
|
background: #fff3cd;
|
color: #856404;
|
border: 1px solid #ffeaa7;
|
}
|
|
.review-approved {
|
background: #d4edda;
|
color: #155724;
|
border: 1px solid #c3e6cb;
|
}
|
|
.agreement-link {
|
display: inline-flex;
|
align-items: center;
|
gap: 4px;
|
padding: 3px 8px; /* 减少内边距 */
|
border-radius: 20px;
|
font-size: 0.75rem; /* 减小字体 */
|
font-weight: 600;
|
background: #e3f2fd;
|
color: #1565c0;
|
text-decoration: none;
|
border: 1px solid #bbdefb;
|
transition: all 0.2s ease;
|
}
|
|
.agreement-link:hover {
|
background: #bbdefb;
|
transform: translateY(-1px);
|
}
|
|
/* 调解协议内容展示区域 */
|
.agreement-container {
|
background: #f8f9fa;
|
border-radius: var(--border-radius);
|
padding: 18px; /* 减少内边距 */
|
max-height: 450px; /* 增加最大高度 */
|
overflow-y: auto;
|
position: relative;
|
}
|
|
.agreement-content {
|
line-height: 1.5;
|
font-size: 0.9rem; /* 减小字体 */
|
}
|
|
.agreement-title {
|
text-align: center;
|
color: var(--secondary-color);
|
font-size: 1.2rem;
|
margin-bottom: 20px;
|
font-weight: 700;
|
}
|
|
.agreement-section h3 {
|
color: var(--secondary-color);
|
margin: 15px 0 8px 0; /* 减少间距 */
|
font-size: 1rem; /* 减小字体 */
|
}
|
|
.agreement-section h3:first-child {
|
margin-top: 0;
|
}
|
|
.agreement-section p {
|
margin-bottom: 8px; /* 减少间距 */
|
text-indent: 2em;
|
font-size: 0.9rem; /* 减小字体 */
|
}
|
|
.agreement-section ul {
|
padding-left: 30px; /* 减少缩进 */
|
margin-bottom: 12px; /* 减少间距 */
|
}
|
|
.agreement-section li {
|
margin-bottom: 6px; /* 减少间距 */
|
font-size: 0.9rem; /* 减小字体 */
|
}
|
|
.signature-area {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 20px; /* 减少间距 */
|
padding-top: 15px; /* 减少间距 */
|
border-top: 1px solid var(--border-color);
|
}
|
|
.signature-party {
|
text-align: center;
|
width: 45%;
|
}
|
|
.signature-line {
|
border-bottom: 1px solid var(--dark-color);
|
padding: 15px 0 5px 0; /* 减少间距 */
|
margin-bottom: 5px;
|
}
|
|
/* 协议操作按钮区域 - 调整为4个按钮 */
|
.agreement-actions {
|
position: sticky;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background: rgba(255, 255, 255, 0.95);
|
padding: 15px 0;
|
margin-top: 20px;
|
border-top: 1px solid var(--border-color);
|
display: flex;
|
justify-content: center;
|
gap: 12px;
|
}
|
|
.agreement-btn {
|
padding: 10px 20px;
|
border: none;
|
border-radius: var(--border-radius);
|
font-weight: 600;
|
font-size: 0.9rem; /* 减小字体 */
|
cursor: pointer;
|
transition: all 0.2s ease;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 6px;
|
min-width: 110px; /* 最小宽度 */
|
}
|
|
.agreement-btn-confirm {
|
background: #d4edda;
|
color: #155724;
|
border: 2px solid #c3e6cb;
|
}
|
|
.agreement-btn-confirm:hover {
|
background: #c3e6cb;
|
transform: translateY(-2px);
|
}
|
|
.agreement-btn-modify {
|
background: #fff3cd;
|
color: #856404;
|
border: 2px solid #ffeaa7;
|
}
|
|
.agreement-btn-modify:hover {
|
background: #ffeaa7;
|
transform: translateY(-2px);
|
}
|
|
.agreement-btn-download {
|
background: #e3f2fd;
|
color: #1565c0;
|
border: 2px solid #bbdefb;
|
}
|
|
.agreement-btn-download:hover {
|
background: #bbdefb;
|
transform: translateY(-2px);
|
}
|
|
.agreement-btn-regenerate {
|
background: #d1ecf1;
|
color: #0c5460;
|
border: 2px solid #bee5eb;
|
}
|
|
.agreement-btn-regenerate:hover {
|
background: #bee5eb;
|
transform: translateY(-2px);
|
}
|
|
/* B区域：右侧工具栏 */
|
.area-b {
|
width: 280px;
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
flex-shrink: 0;
|
}
|
|
.tools-panel {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 20px; /* 减少内边距 */
|
box-shadow: var(--box-shadow);
|
height: 100%; /* 修改为100%高度，铺满纵向页面 */
|
display: flex;
|
flex-direction: column;
|
}
|
|
.tools-title {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
font-size: 1.2rem;
|
margin-bottom: 18px; /* 减少间距 */
|
color: var(--secondary-color);
|
}
|
|
.tools-title i {
|
font-size: 1.4rem;
|
}
|
|
.tools-list {
|
display: flex;
|
flex-direction: column;
|
gap: 10px; /* 减少间距 */
|
flex: 1;
|
}
|
|
.tool-item {
|
display: flex;
|
align-items: center;
|
gap: 10px; /* 减少间距 */
|
padding: 12px; /* 减少内边距 */
|
border-radius: var(--border-radius);
|
background: #f8f9fa;
|
/* 移除hover效果 */
|
}
|
|
.tool-icon {
|
width: 36px; /* 减小尺寸 */
|
height: 36px;
|
border-radius: 8px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: white;
|
font-size: 1.1rem; /* 减小字体 */
|
}
|
|
.tool-icon.calculator {
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
}
|
|
.tool-icon.doc {
|
background: linear-gradient(135deg, #2a9d8f, #264653);
|
}
|
|
.tool-icon.law {
|
background: linear-gradient(135deg, #e9c46a, #e76f51);
|
}
|
|
.tool-text {
|
flex: 1;
|
}
|
|
.tool-name {
|
font-weight: 600;
|
font-size: 0.95rem; /* 减小字体 */
|
margin-bottom: 2px; /* 减少间距 */
|
color: var(--dark-color);
|
}
|
|
.tool-desc {
|
font-size: 0.8rem; /* 减小字体 */
|
color: var(--gray-color);
|
}
|
|
/* 底部悬浮控制看板 */
|
.floating-control-panel {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background: white;
|
border-top: 1px solid var(--border-color);
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
|
padding: 12px 24px;
|
z-index: 100;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.control-status {
|
display: flex;
|
align-items: center;
|
gap: 15px;
|
}
|
|
.status-info {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.status-label {
|
font-size: 0.9rem;
|
color: var(--gray-color);
|
margin-bottom: 2px;
|
}
|
|
.status-value {
|
font-weight: 600;
|
font-size: 1.1rem;
|
color: var(--dark-color);
|
}
|
|
.status-progress {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.progress-text {
|
font-size: 0.9rem;
|
color: var(--dark-color);
|
font-weight: 600;
|
min-width: 120px;
|
}
|
|
.progress-bar {
|
width: 150px;
|
height: 8px;
|
background: #e9ecef;
|
border-radius: 4px;
|
overflow: hidden;
|
}
|
|
.progress-fill {
|
height: 100%;
|
background: var(--primary-color);
|
width: 40%; /* 初始进度 */
|
transition: width 0.5s ease;
|
}
|
|
.control-action {
|
display: flex;
|
align-items: center;
|
gap: 15px;
|
}
|
|
.floating-control-btn {
|
padding: 10px 24px;
|
border: none;
|
border-radius: var(--border-radius);
|
font-weight: 600;
|
font-size: 1rem;
|
cursor: pointer;
|
transition: all 0.2s ease;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 8px;
|
background: #ffeaea;
|
color: #e63946;
|
border: 2px solid #ffadad;
|
}
|
|
.floating-control-btn:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
}
|
|
.floating-control-btn:disabled {
|
background: #e9ecef;
|
color: #6c757d;
|
border-color: #dee2e6;
|
cursor: not-allowed;
|
transform: none;
|
box-shadow: none;
|
}
|
|
/* 滚动条样式 */
|
::-webkit-scrollbar {
|
width: 8px;
|
}
|
|
::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 4px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #c1c1c1;
|
border-radius: 4px;
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #a8a8a8;
|
}
|
|
/* 模态窗口样式 - 添加在现有的style标签末尾 */
|
.modal {
|
display: none;
|
position: fixed;
|
z-index: 1000;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.5);
|
overflow: hidden;
|
}
|
|
.modal-content {
|
position: relative;
|
background-color: white;
|
margin: 2% auto;
|
padding: 0;
|
width: 90%;
|
/* 弹窗宽度*/
|
max-width: 1200px;
|
height: 90vh;
|
border-radius: 12px;
|
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
|
animation: modalSlideIn 0.3s ease-out;
|
display: flex;
|
flex-direction: column;
|
}
|
|
@keyframes modalSlideIn {
|
from {
|
opacity: 0;
|
transform: translateY(-50px);
|
}
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
.modal-header {
|
background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
|
color: white;
|
padding: 15px 20px;
|
border-radius: 12px 12px 0 0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-shrink: 0;
|
}
|
|
.modal-header h2 {
|
margin: 0;
|
font-size: 1.5rem;
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.close-btn {
|
color: white;
|
font-size: 28px;
|
font-weight: bold;
|
cursor: pointer;
|
transition: transform 0.2s;
|
width: 40px;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 50%;
|
}
|
|
.close-btn:hover {
|
transform: scale(1.1);
|
background-color: rgba(255, 255, 255, 0.1);
|
}
|
|
.modal-body {
|
flex: 1;
|
overflow: hidden;
|
padding: 0;
|
}
|
|
.modal-iframe {
|
width: 100%;
|
height: 100%;
|
border: none;
|
border-radius: 0 0 12px 12px;
|
}
|
</style>
|
</head>
|
<body style="height: auto">
|
<!-- 上部分：标题和信息 -->
|
<section class="top-section">
|
<div class="header">
|
<div class="title-area">
|
<div class="title-icon">
|
<img style="width: 36px" src="http://gz.hugeinfo.com.cn/dyh/wx414ae04ac3f10b4e/images/pngAI_logo.png" alt="" srcset="" />
|
</div>
|
<div class="title-text">
|
<h1>"解纷智能体"劳动争议AI调解智能体</h1>
|
<div class="title-subtitle">
|
<div class="subtitle-text">AI调解员驾驶舱 - 全自动调解系统</div>
|
<div class="ai-status-tag">
|
<i class="fas fa-circle"></i>
|
AI调解中
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="case-info">
|
<div class="info-item">
|
<div class="info-label">事项编号</div>
|
<div class="info-value">----</div>
|
</div>
|
<div class="info-item">
|
<div class="info-label">纠纷类型</div>
|
<div class="info-value">----</div>
|
</div>
|
<div class="info-item">
|
<div class="info-label">调解开始时间</div>
|
<div class="info-value">----</div>
|
</div>
|
<div class="info-item">
|
<div class="info-label">预计结束时间</div>
|
<div class="info-value">----</div>
|
</div>
|
</div>
|
</div>
|
</section>
|
|
<!-- 中部分：A和B区域 -->
|
<section class="middle-section">
|
<!-- A区域：左侧主要内容 -->
|
<div class="area-a">
|
<!-- AI调解进度 -->
|
<div class="mediation-progress">
|
<h3 class="section-title"><i class="fas fa-road"></i> AI调解进度</h3>
|
|
<div class="progress-steps">
|
<div class="progress-line" id="progressLine"></div>
|
<div class="step completed">
|
<div class="step-indicator">
|
<i class="fas fa-check"></i>
|
</div>
|
<div class="step-label">意愿调查</div>
|
</div>
|
<div class="step active">
|
<div class="step-indicator">2</div>
|
<div class="step-label">材料核实</div>
|
</div>
|
<div class="step">
|
<div class="step-indicator">3</div>
|
<div class="step-label">事实认定</div>
|
</div>
|
<div class="step">
|
<div class="step-indicator">4</div>
|
<div class="step-label">达成协议</div>
|
</div>
|
<div class="step">
|
<div class="step-indicator">5</div>
|
<div class="step-label">履约回访</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 选项卡容器 -->
|
<div class="tab-container">
|
<div class="tab-header">
|
<button class="tab-btn active" data-tab="mediation-data-board">
|
<i class="fas fa-chart-line"></i>
|
调解分析
|
</button>
|
<button class="tab-btn" data-tab="mediation-board">
|
<i class="fas fa-tv"></i>
|
AI调解实时看板
|
</button>
|
<button class="tab-btn" data-tab="evidence-board">
|
<i class="fas fa-file-alt"></i>
|
证据材料汇总
|
<span class="tab-badge">待审核</span>
|
</button>
|
<button class="tab-btn" data-tab="agreement-section">
|
<i class="fas fa-file-contract"></i>
|
调解协议
|
<span class="tab-badge">待确认</span>
|
</button>
|
</div>
|
|
<div class="tab-content">
|
<!-- 调解数据看板 -->
|
<div class="tab-pane active" id="mediation-data-board">
|
<div class="tab-content-area">
|
<div class="mediation-metrics">
|
<!-- 左侧：诉求差距分析 -->
|
<div class="metric-card">
|
<div class="metric-title">
|
<i class="fas fa-exclamation-circle"></i>
|
<span>诉求差距分析</span>
|
</div>
|
<div class="metric-content">
|
<div class="gap-analysis">
|
<div class="gap-title">
|
<i class="fas fa-exclamation-circle"></i>
|
主要分歧点
|
</div>
|
<div class="gap-update-time">3小时前更新</div>
|
<div class="gap-content">
|
双方在以下方面存在明显分歧：
|
<ul>
|
<li><strong>拖欠工资金额</strong>：李晓明主张拖欠3个月工资¥42,000，公司承认拖欠但只认可¥35,000</li>
|
<li><strong>克扣绩效奖金</strong>：李晓明主张应发绩效奖金¥10,800，公司以未完成KPI为由拒绝支付</li>
|
<li><strong>经济补偿金</strong>：李晓明要求支付解除劳动合同经济补偿¥12,000，公司认为员工主动辞职不应支付</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 右侧：调解数据 -->
|
<div class="metric-card">
|
<div class="metric-title">
|
<i class="fas fa-exchange-alt"></i>
|
<span>调解数据</span>
|
</div>
|
<div class="metric-content">
|
<div class="success-metric">
|
<div class="success-value">68%</div>
|
<div class="success-label">预计调解成功概率</div>
|
<div class="success-change">
|
<i class="fas fa-arrow-up"></i>
|
<span>较3小时前 +8%</span>
|
</div>
|
<div style="margin-top: 15px; font-size: 0.9rem; color: var(--gray-color)">
|
协商沟通：<span style="color: var(--dark-color); font-weight: 600">第6轮</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- AI调解实时看板 -->
|
<div class="tab-pane" id="mediation-board">
|
<div class="tab-content-area">
|
<!-- 新增：协商沟通总结 -->
|
<div class="mediation-summary">
|
<div class="summary-title">
|
<i class="fas fa-chart-bar"></i>
|
沟通情况总结
|
</div>
|
<div class="summary-content">
|
截至目前，AI调解员已与申请双方进行协商沟通6轮，期间申请人补充材料2次，被申请人补充材料2次，双方对调解方案表现出积极协商态度。
|
</div>
|
</div>
|
|
<div class="board-container" id="boardContainer">
|
<!-- 对话记录1 -->
|
<div class="board-item">
|
<div class="item-header">
|
<div class="item-avatar avatar-ai">
|
<i class="fas fa-robot"></i>
|
</div>
|
<div class="item-source">
|
<div class="source-name">AI调解员</div>
|
<div class="source-time">
|
<i class="far fa-clock"></i>
|
<span>09:30:05</span>
|
</div>
|
</div>
|
</div>
|
<div class="item-content content-ai">
|
已分别联系李晓明（申请人）和广东好又多贸易有限公司（被申请人）。双方均表示愿意接受调解，希望通过协商解决劳动争议/拖欠、克扣工资纠纷。
|
</div>
|
<div class="item-tags">
|
<span class="item-tag tag-type-1">意愿调查</span>
|
<span class="item-tag tag-type-2">初步接触</span>
|
</div>
|
</div>
|
|
<!-- 对话记录2 -->
|
<div class="board-item">
|
<div class="item-header">
|
<div class="item-avatar avatar-applicant">李</div>
|
<div class="item-source">
|
<div class="source-name">申请人（李晓明）</div>
|
<div class="source-time">
|
<i class="far fa-clock"></i>
|
<span>09:35:22</span>
|
</div>
|
</div>
|
</div>
|
<div class="item-content content-applicant">
|
我在好又多公司担任销售经理3年，公司拖欠我3个月工资共¥42,000，还克扣了季度绩效奖金¥10,800。另外，公司单方面解除劳动合同，应支付经济补偿金¥12,000。我要求公司支付总共¥52,800。
|
</div>
|
<div class="item-tags">
|
<span class="item-tag tag-type-3">诉求表达</span>
|
<span class="item-tag tag-type-5">情绪激动</span>
|
</div>
|
</div>
|
|
<!-- 对话记录3 -->
|
<div class="board-item">
|
<div class="item-header">
|
<div class="item-avatar avatar-respondent">好</div>
|
<div class="item-source">
|
<div class="source-name">被申请人（好又多公司）</div>
|
<div class="source-time">
|
<i class="far fa-clock"></i>
|
<span>09:40:15</span>
|
</div>
|
</div>
|
</div>
|
<div class="item-content content-respondent">
|
公司确实遇到了资金周转困难，拖欠工资问题承认。但李晓明主张的金额有误：1) 3个月工资应为¥35,000（含请假扣款）；2)
|
绩效奖金因未完成KPI指标不应发放；3) 是李晓明主动提出辞职，不应支付经济补偿金。公司最多支付¥38,500。
|
</div>
|
<div class="item-tags">
|
<span class="item-tag tag-type-3">诉求表达</span>
|
</div>
|
</div>
|
|
<!-- 对话记录4：补充材料 -->
|
<div class="board-item">
|
<div class="item-header">
|
<div class="item-avatar avatar-applicant">李</div>
|
<div class="item-source">
|
<div class="source-name">申请人（李晓明）</div>
|
<div class="source-time">
|
<i class="far fa-clock"></i>
|
<span>09:45:33</span>
|
</div>
|
</div>
|
</div>
|
<div class="item-content content-applicant">
|
补充材料：提供了劳动合同、工资条、考勤记录、绩效考评表、解除劳动合同通知书。证明：1) 月工资¥14,000无误；2)
|
绩效考评达标应发奖金；3) 公司单方面解除劳动合同。
|
</div>
|
<div class="item-tags">
|
<span class="item-tag tag-type-4">材料处理</span>
|
<span class="review-status review-pending">
|
<i class="fas fa-clock"></i>
|
待审核
|
</span>
|
</div>
|
</div>
|
|
<!-- 对话记录5 -->
|
<div class="board-item">
|
<div class="item-header">
|
<div class="item-avatar avatar-ai">
|
<i class="fas fa-robot"></i>
|
</div>
|
<div class="item-source">
|
<div class="source-name">AI调解员</div>
|
<div class="source-time">
|
<i class="far fa-clock"></i>
|
<span>09:50:12</span>
|
</div>
|
</div>
|
</div>
|
<div class="item-content content-ai">
|
使用欠薪计算器核算：1) 3个月工资¥42,000（根据劳动合同确认）；2) 绩效奖金需依据考评表判定；3)
|
解除劳动合同性质需认定。建议方案：总额¥46,500（工资¥42,000+部分绩效¥4,500），分期3个月支付。
|
</div>
|
<div class="item-tags">
|
<span class="item-tag tag-type-2">方案建议</span>
|
<span class="item-tag tag-type-6">计算分析</span>
|
</div>
|
</div>
|
|
<!-- 对话记录6 -->
|
<div class="board-item">
|
<div class="item-header">
|
<div class="item-avatar avatar-applicant">李</div>
|
<div class="item-source">
|
<div class="source-name">申请人（李晓明）</div>
|
<div class="source-time">
|
<i class="far fa-clock"></i>
|
<span>09:55:10</span>
|
</div>
|
</div>
|
</div>
|
<div class="item-content content-applicant">
|
¥46,500可以接受，但分期时间太长，我需要尽快拿到钱解决生活困难。如果能一次性支付，我可以放弃经济补偿金要求，接受¥44,000。
|
</div>
|
<div class="item-tags">
|
<span class="item-tag tag-type-3">反馈意见</span>
|
</div>
|
</div>
|
|
<!-- 对话记录7 -->
|
<div class="board-item">
|
<div class="item-header">
|
<div class="item-avatar avatar-respondent">好</div>
|
<div class="item-source">
|
<div class="source-name">被申请人（好又多公司）</div>
|
<div class="source-time">
|
<i class="far fa-clock"></i>
|
<span>10:00:45</span>
|
</div>
|
</div>
|
</div>
|
<div class="item-content content-respondent">
|
¥44,000可以接受，但需要分两期支付（本月支付50%，下月底支付50%）。公司目前资金确实紧张，一次性支付有困难。绩效奖金部分可以协商。
|
</div>
|
<div class="item-tags">
|
<span class="item-tag tag-type-3">反馈意见</span>
|
<span class="item-tag tag-type-1">协商进展</span>
|
</div>
|
</div>
|
|
<!-- 对话记录8：调解协议生成 -->
|
<div class="board-item">
|
<div class="item-header">
|
<div class="item-avatar avatar-ai">
|
<i class="fas fa-robot"></i>
|
</div>
|
<div class="item-source">
|
<div class="source-name">AI调解员</div>
|
<div class="source-time">
|
<i class="far fa-clock"></i>
|
<span>10:05:22</span>
|
</div>
|
</div>
|
</div>
|
<div class="item-content content-ai">
|
根据双方协商结果，已生成调解协议草案：好又多公司支付李晓明劳动报酬¥44,000，分两期支付（2026年1月30日前支付¥22,000，2026年2月28日前支付¥22,000）。双方解除劳动关系，互不追究其他责任。请双方确认。
|
</div>
|
<div class="item-tags">
|
<span class="item-tag tag-type-4">协议处理</span>
|
<a href="#" class="agreement-link" onclick="viewAgreement(); return false;">
|
<i class="fas fa-file-contract"></i>
|
查看调解协议
|
</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 证据材料汇总看板 -->
|
<div class="tab-pane" id="evidence-board">
|
<div class="tab-content-area">
|
<div class="evidence-summary">
|
<!-- 申请人证据材料 -->
|
<div class="party-evidence applicant">
|
<div class="party-evidence-header">
|
<div class="party-evidence-title">
|
<i class="fas fa-user-tie" style="color: var(--primary-color); margin-right: 8px"></i>
|
申请人材料
|
</div>
|
<div class="evidence-count">5份材料</div>
|
</div>
|
<div class="evidence-list">
|
<div class="evidence-item applicant">
|
<div class="evidence-item-content">
|
<div class="evidence-name">劳动合同</div>
|
<div class="evidence-desc">2023年8月1日-2026年1月31日，约定月工资¥14,000</div>
|
<div class="evidence-upload-time">
|
<i class="far fa-clock"></i>
|
<span>上传时间：2026-01-15 09:35</span>
|
</div>
|
<!-- 修改：将审核状态改为文字形式 -->
|
|
</div>
|
<div class="evidence-actions">
|
<span class="evidence-status status-verified">已审核</span>
|
</div>
|
</div>
|
<div class="evidence-item applicant">
|
<div class="evidence-item-content">
|
<div class="evidence-name">2026年1-3月工资条</div>
|
<div class="evidence-desc">显示工资发放记录，1月后无发放记录</div>
|
<div class="evidence-upload-time">
|
<i class="far fa-clock"></i>
|
<span>上传时间：2026-01-15 09:36</span>
|
</div>
|
<!-- 修改：将审核状态改为文字形式 -->
|
|
</div>
|
<div class="evidence-actions">
|
<span class="evidence-status status-verified">已审核</span>
|
</div>
|
</div>
|
<div class="evidence-item applicant">
|
<div class="evidence-item-content">
|
<div class="evidence-name">2026年第一季度考勤记录</div>
|
<div class="evidence-desc">显示全勤，无请假缺勤记录</div>
|
<div class="evidence-upload-time">
|
<i class="far fa-clock"></i>
|
<span>上传时间：2026-01-15 09:37</span>
|
</div>
|
<!-- 修改：将审核状态改为文字形式 -->
|
|
</div>
|
<div class="evidence-actions">
|
<span class="evidence-status status-verified">已审核</span>
|
</div>
|
</div>
|
<div class="evidence-item applicant">
|
<div class="evidence-item-content">
|
<div class="evidence-name">绩效考评表</div>
|
<div class="evidence-desc">第一季度绩效评分85分，达到奖金发放标准</div>
|
<div class="evidence-upload-time">
|
<i class="far fa-clock"></i>
|
<span>上传时间：2026-01-15 09:38</span>
|
</div>
|
<!-- 修改：将审核状态改为文字形式 -->
|
|
</div>
|
<div class="evidence-actions">
|
<span class="evidence-status status-verified">已审核</span>
|
</div>
|
</div>
|
<div class="evidence-item applicant">
|
<div class="evidence-item-content">
|
<div class="evidence-name">解除劳动合同通知书</div>
|
<div class="evidence-desc">公司2026年1月15日单方面解除合同</div>
|
<div class="evidence-upload-time">
|
<i class="far fa-clock"></i>
|
<span>上传时间：2026-01-15 09:45</span>
|
</div>
|
<!-- 修改：将审核状态改为文字形式，待审核材料显示审核按钮 -->
|
<div class="evidence-status-container">
|
|
<button class="review-btn" onclick="openDocAuditModal()" style="cursor: pointer;">审核</button>
|
</div>
|
</div>
|
<div class="evidence-actions">
|
<span class="evidence-status status-pending">待审核</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 被申请人证据材料 -->
|
<div class="party-evidence respondent">
|
<div class="party-evidence-header">
|
<div class="party-evidence-title">
|
<i class="fas fa-building" style="color: #e9c46a; margin-right: 8px"></i>
|
被申请人材料
|
</div>
|
<div class="evidence-count">3份材料</div>
|
</div>
|
<div class="evidence-list">
|
<div class="evidence-item respondent">
|
<div class="evidence-item-content">
|
<div class="evidence-name">2026年1-3月考勤异常记录</div>
|
<div class="evidence-desc">显示李晓明1月有2天事假，应扣款¥1,333</div>
|
<div class="evidence-upload-time">
|
<i class="far fa-clock"></i>
|
<span>上传时间：2026-01-15 09:50</span>
|
</div>
|
<!-- 修改：将审核状态改为文字形式，待审核材料显示审核按钮 -->
|
<div class="evidence-status-container">
|
|
<button class="review-btn" onclick="openDocAuditModal()" style="cursor: pointer;">审核</button>
|
</div>
|
</div>
|
<div class="evidence-actions">
|
<span class="evidence-status status-pending">待审核</span>
|
</div>
|
</div>
|
<div class="evidence-item respondent">
|
<div class="evidence-item-content">
|
<div class="evidence-name">第一季度销售业绩报表</div>
|
<div class="evidence-desc">显示李晓明未完成销售KPI指标（完成率87%）</div>
|
<div class="evidence-upload-time">
|
<i class="far fa-clock"></i>
|
<span>上传时间：2026-01-15 09:52</span>
|
</div>
|
<!-- 修改：将审核状态改为文字形式，待审核材料显示审核按钮 -->
|
<div class="evidence-status-container">
|
|
<button class="review-btn" onclick="openDocAuditModal()" style="cursor: pointer;">审核</button>
|
</div>
|
</div>
|
<div class="evidence-actions">
|
<span class="evidence-status status-pending">待审核</span>
|
</div>
|
</div>
|
<div class="evidence-item respondent">
|
<div class="evidence-item-content">
|
<div class="evidence-name">员工离职申请表</div>
|
<div class="evidence-desc">李晓明2026年1月10日提交的辞职申请</div>
|
<div class="evidence-upload-time">
|
<i class="far fa-clock"></i>
|
<span>上传时间：2026-01-15 09:55</span>
|
</div>
|
<!-- 修改：将审核状态改为文字形式，待审核材料显示审核按钮 -->
|
<div class="evidence-status-container">
|
|
<button class="review-btn" onclick="openDocAuditModal()" style="cursor: pointer;">审核</button>
|
</div>
|
</div>
|
<div class="evidence-actions">
|
<span class="evidence-status status-pending">待审核</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 调解协议内容展示区域 -->
|
<div class="tab-pane" id="agreement-section">
|
<div class="tab-content-area">
|
<div class="agreement-container">
|
<div class="agreement-content" id="agreementContent">
|
<div class="agreement-title">李晓明与广东好又多贸易有限公司劳动争议调解协议书</div>
|
|
<p><strong>甲方（申请人）：</strong>李晓明</p>
|
<p><strong>乙方（被申请人）：</strong>广东好又多贸易有限公司</p>
|
|
<p>
|
甲方与乙方因劳动报酬支付问题发生争议，双方于2026年1月15日向"云小调"劳动争议AI调解智能体申请调解。经AI调解员调解，双方本着平等自愿、互谅互让的原则，达成如下调解协议：
|
</p>
|
|
<h3>一、争议事项</h3>
|
<p>甲方主张乙方拖欠2026年1月至3月共三个月工资、2026年第一季度绩效奖金以及解除劳动合同经济补偿金，合计人民币52,800元。</p>
|
|
<h3>二、调解结果</h3>
|
<p>经调解，双方达成一致意见如下：</p>
|
<ul>
|
<li>乙方同意向甲方支付劳动报酬共计人民币肆万肆仟元整（¥44,000）</li>
|
<li>
|
支付方式：分两期支付
|
<ul>
|
<li>第一期：人民币贰万贰仟元整（¥22,000），于2026年1月30日前支付</li>
|
<li>第二期：人民币贰万贰仟元整（¥22,000），于2026年2月28日前支付</li>
|
</ul>
|
</li>
|
<li>支付账户：甲方指定的银行账户（账户信息另行提供）</li>
|
</ul>
|
|
<h3>三、双方权利义务</h3>
|
<ul>
|
<li>乙方应按约定时间足额支付上述款项</li>
|
<li>甲方收到全部款项后，双方劳动关系正式解除</li>
|
<li>双方互不追究其他法律责任，本协议履行完毕后，争议事项一次性了结</li>
|
</ul>
|
|
<h3>四、违约责任</h3>
|
<p>如乙方未按约定时间支付任何一期款项，甲方有权要求乙方一次性支付剩余全部款项，并按未付金额的日万分之五支付逾期付款违约金。</p>
|
|
<h3>五、其他约定</h3>
|
<ul>
|
<li>本协议经双方在线确认后生效</li>
|
<li>本协议一式三份，甲方、乙方、调解机构各执一份，具有同等法律效力</li>
|
<li>如发生争议，双方同意提交本调解机构所在地人民法院诉讼解决</li>
|
</ul>
|
|
<div class="signature-area">
|
<div class="signature-party">
|
<div class="signature-line"></div>
|
<div>甲方（申请人）：李晓明</div>
|
<div style="font-size: 0.8rem; color: var(--gray-color)">签字/盖章</div>
|
<div style="font-size: 0.8rem; color: var(--gray-color); margin-top: 5px">日期：2026年1月15日</div>
|
</div>
|
<div class="signature-party">
|
<div class="signature-line"></div>
|
<div>乙方（被申请人）：广东好又多贸易有限公司</div>
|
<div style="font-size: 0.8rem; color: var(--gray-color)">签字/盖章</div>
|
<div style="font-size: 0.8rem; color: var(--gray-color); margin-top: 5px">日期：2026年1月15日</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 协议操作按钮区域 - 调整为4个按钮 -->
|
<div class="agreement-actions">
|
<button class="agreement-btn agreement-btn-confirm" onclick="confirmAgreement()">
|
<i class="fas fa-check-circle"></i>
|
确认协议
|
</button>
|
<button class="agreement-btn agreement-btn-modify" onclick="openDocEditModal()" style="cursor: pointer;">
|
<i class="fas fa-edit"></i>
|
修改协议
|
</button>
|
<button class="agreement-btn agreement-btn-download" onclick="downloadAgreement()">
|
<i class="fas fa-download"></i>
|
下载协议
|
</button>
|
<button class="agreement-btn agreement-btn-regenerate" onclick="regenerateAgreement()">
|
<i class="fas fa-redo"></i>
|
重新生成
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- B区域：右侧工具栏 -->
|
<div class="area-b">
|
<!-- 工具栏 -->
|
<div class="tools-panel">
|
<h3 class="tools-title"><i class="fas fa-toolbox"></i> 调解工具箱</h3>
|
<div class="tools-list">
|
<!-- 工具箱部分 - 修改欠薪计算器项 -->
|
<div class="tool-item" >
|
<div class="tool-icon calculator">
|
<i class="fas fa-calculator"></i>
|
</div>
|
<div class="tool-text" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<div class="tool-name">欠薪计算器</div>
|
<div class="tool-desc">自动计算工资、加班费、赔偿金</div>
|
</div>
|
</div>
|
|
<!-- 新增：类案与法条推荐工具 -->
|
<div class="tool-item">
|
<div class="tool-icon law">
|
<i class="fas fa-balance-scale"></i>
|
</div>
|
<div class="tool-text" onclick="openCaseAndLawModal()" style="cursor: pointer;">
|
<div class="tool-name">类案与法条推荐</div>
|
<div class="tool-desc">推荐相似案例和相关法律条文</div>
|
</div>
|
</div>
|
|
<div class="tool-item">
|
<div class="tool-icon doc">
|
<i class="fas fa-gavel"></i>
|
</div>
|
<div class="tool-text" onclick="openLawSearchModal()" style="cursor: pointer;">
|
<div class="tool-name">法律条文查询</div>
|
<div class="tool-desc">劳动法、劳动合同法相关条款</div>
|
</div>
|
</div>
|
<div class="tool-item">
|
<div class="tool-icon law">
|
<i class="fas fa-search"></i>
|
</div>
|
<div class="tool-text" onclick="openCaseSearchModal()" style="cursor: pointer;">
|
<div class="tool-name">典型案例查询</div>
|
<div class="tool-desc">查询类似劳动争议案例</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</section>
|
|
<!-- 底部悬浮控制看板 -->
|
<div class="floating-control-panel">
|
<div class="status-info">
|
<div class="status-indicator">
|
<span class="status-dot"></span>
|
<span class="status-text">调解进行中-阶段2：材料核实 <span style="color: gray">（已进行：25分钟）</span></span>
|
</div>
|
</div>
|
<div class="control-action">
|
<button class="floating-control-btn" id="floatingStopBtn">
|
<i class="fas fa-user-tie"></i>
|
人工接管
|
</button>
|
</div>
|
</div>
|
|
<script>
|
// 模拟调解过程更新
|
let boardItems = [
|
{
|
avatar: 'mediator',
|
name: '调解员',
|
time: '10:10:18',
|
content: '劳动材料审核通过：申请人提交的劳动合同、工资条等材料真实有效，符合劳动争议调解要求。',
|
tags: ['tag-type-4'],
|
reviewStatus: 'approved',
|
},
|
{
|
avatar: 'mediator',
|
name: '调解员',
|
time: '10:15:30',
|
content: '劳动调解协议审核通过：协议内容符合劳动法律法规和调解规范，支付条款明确合理，可进入签署流程。',
|
tags: ['tag-type-4'],
|
reviewStatus: 'approved',
|
},
|
];
|
|
let currentStep = 1; // 当前阶段索引（0-4）
|
const progressLine = document.getElementById('progressLine');
|
const boardContainer = document.getElementById('boardContainer');
|
const floatingStopBtn = document.getElementById('floatingStopBtn');
|
const steps = document.querySelectorAll('.step');
|
|
// 底部悬浮看板元素
|
const aiStatus = document.getElementById('aiStatus');
|
const progressText = document.getElementById('progressText');
|
const progressFill = document.getElementById('progressFill');
|
|
// 阶段名称映射
|
const stepNames = ['阶段1：意愿调查', '阶段2：材料核实', '阶段3：事实认定', '阶段4：达成协议', '阶段5：履约回访'];
|
|
// 更新底部悬浮看板状态
|
function updateFloatingPanel() {
|
progressText.textContent = stepNames[currentStep];
|
|
// 更新进度条
|
const progressWidth = (currentStep + 1) * 20;
|
progressFill.style.width = `${progressWidth}%`;
|
|
// 更新AI状态
|
if (currentStep === 4) {
|
aiStatus.textContent = '调解完成';
|
aiStatus.style.color = 'var(--success-color)';
|
}
|
}
|
|
// 选项卡功能
|
const tabBtns = document.querySelectorAll('.tab-btn');
|
const tabPanes = document.querySelectorAll('.tab-pane');
|
|
// 选项卡切换
|
tabBtns.forEach((btn) => {
|
btn.addEventListener('click', () => {
|
const tabId = btn.getAttribute('data-tab');
|
|
// 更新按钮状态
|
tabBtns.forEach((b) => b.classList.remove('active'));
|
btn.classList.add('active');
|
|
// 更新内容面板
|
tabPanes.forEach((pane) => pane.classList.remove('active'));
|
document.getElementById(tabId).classList.add('active');
|
});
|
});
|
|
// 模拟调解进度更新
|
function simulateProgress() {
|
if (currentStep >= 4) return;
|
|
// 更新进度条
|
const progressWidth = (currentStep + 1) * 20;
|
progressLine.style.width = `${progressWidth}%`;
|
|
// 更新步骤状态
|
steps[currentStep].classList.remove('active');
|
steps[currentStep].classList.add('completed');
|
|
if (currentStep < 4) {
|
steps[currentStep + 1].classList.add('active');
|
}
|
|
currentStep++;
|
|
// 更新底部悬浮看板
|
updateFloatingPanel();
|
|
// 如果是最后一步，更新按钮状态
|
if (currentStep === 4) {
|
floatingStopBtn.disabled = true;
|
floatingStopBtn.innerHTML = '<i class="fas fa-check"></i> 调解完成';
|
floatingStopBtn.style.background = '#d4edda';
|
floatingStopBtn.style.color = '#155724';
|
floatingStopBtn.style.border = '2px solid #c3e6cb';
|
|
// 更新AI状态标签
|
const aiStatusTag = document.querySelector('.ai-status-tag');
|
aiStatusTag.innerHTML = '<i class="fas fa-check-circle"></i> 调解完成';
|
aiStatusTag.style.background = 'linear-gradient(135deg, #2a9d8f, #264653)';
|
}
|
}
|
|
// 向看板添加新项目
|
function addBoardItem() {
|
if (boardItems.length === 0) return;
|
|
const item = boardItems.shift();
|
const newItem = document.createElement('div');
|
newItem.className = 'board-item';
|
|
// 设置头像类
|
let avatarClass = 'avatar-ai';
|
let contentClass = 'content-ai';
|
if (item.avatar === 'applicant') {
|
avatarClass = 'avatar-applicant';
|
contentClass = 'content-applicant';
|
} else if (item.avatar === 'respondent') {
|
avatarClass = 'avatar-respondent';
|
contentClass = 'content-respondent';
|
} else if (item.avatar === 'mediator') {
|
avatarClass = 'avatar-mediator';
|
contentClass = 'content-mediator';
|
}
|
|
// 设置头像内容
|
let avatarContent = '<i class="fas fa-robot"></i>';
|
if (item.avatar === 'applicant') {
|
avatarContent = '李';
|
} else if (item.avatar === 'respondent') {
|
avatarContent = '好';
|
} else if (item.avatar === 'mediator') {
|
avatarContent = '调';
|
}
|
|
// 构建标签HTML
|
let tagsHtml = item.tags.map((tag) => `<span class="item-tag ${tag}">${getTagText(tag)}</span>`).join('');
|
|
// 如果有审核状态，添加审核状态标签
|
if (item.reviewStatus) {
|
if (item.reviewStatus === 'approved') {
|
tagsHtml += `<span class="review-status review-approved"><i class="fas fa-check-circle"></i>已审核</span>`;
|
} else if (item.reviewStatus === 'pending') {
|
tagsHtml += `<span class="review-status review-pending"><i class="fas fa-clock"></i>待审核</span>`;
|
}
|
}
|
|
newItem.innerHTML = `
|
<div class="item-header">
|
<div class="item-avatar ${avatarClass}">
|
${avatarContent}
|
</div>
|
<div class="item-source">
|
<div class="source-name">${item.name}</div>
|
<div class="source-time">
|
<i class="far fa-clock"></i>
|
<span>${item.time}</span>
|
</div>
|
</div>
|
</div>
|
<div class="item-content ${contentClass}">
|
${item.content}
|
</div>
|
<div class="item-tags">
|
${tagsHtml}
|
</div>
|
`;
|
|
boardContainer.appendChild(newItem);
|
|
// 滚动到底部
|
setTimeout(() => {
|
boardContainer.scrollTop = boardContainer.scrollHeight;
|
}, 100);
|
}
|
|
// 模拟调解过程
|
let simulationInterval;
|
|
function startSimulation() {
|
simulationInterval = setInterval(() => {
|
// 每15秒添加一个新项目
|
if (boardItems.length > 0) {
|
addBoardItem();
|
|
// 每添加2个项目，更新一次进度
|
if (boardContainer.children.length % 2 === 0 && boardContainer.children.length > 6) {
|
simulateProgress();
|
}
|
} else {
|
clearInterval(simulationInterval);
|
}
|
}, 15000);
|
}
|
|
// 初始启动模拟
|
startSimulation();
|
|
// 初始化底部悬浮看板
|
updateFloatingPanel();
|
|
// 人工接管按钮点击事件
|
floatingStopBtn.addEventListener('click', function () {
|
if (confirm('确认要人工接管调解吗？接管后将结束AI调解，由工作人员继续处理。')) {
|
clearInterval(simulationInterval);
|
|
// 更新按钮状态
|
floatingStopBtn.disabled = true;
|
floatingStopBtn.innerHTML = '<i class="fas fa-user-tie"></i> 已接管';
|
floatingStopBtn.style.background = '#e9ecef';
|
floatingStopBtn.style.color = '#6c757d';
|
floatingStopBtn.style.border = '2px solid #dee2e6';
|
|
// 更新AI状态
|
aiStatus.textContent = '人工接管';
|
aiStatus.style.color = 'var(--gray-color)';
|
|
// 更新AI状态标签
|
const aiStatusTag = document.querySelector('.ai-status-tag');
|
aiStatusTag.innerHTML = '<i class="fas fa-user-tie"></i> 人工接管';
|
aiStatusTag.style.background = 'linear-gradient(135deg, #6c757d, #495057)';
|
|
alert('AI调解已结束，已转为人工接管模式。工作人员将继续处理本次调解。');
|
}
|
});
|
|
// 查看调解协议
|
function viewAgreement() {
|
// 切换到协议选项卡
|
const agreementTab = document.querySelector('[data-tab="agreement-section"]');
|
agreementTab.click();
|
|
// 滚动到顶部
|
setTimeout(() => {
|
document.querySelector('.tab-content-area').scrollTop = 0;
|
}, 100);
|
}
|
|
// 确认协议
|
function confirmAgreement() {
|
if (confirm('确认此调解协议吗？确认后协议将正式生效并发送给双方签署。')) {
|
alert('调解协议已确认！已发送给双方进行在线签署。');
|
|
// 这里可以添加实际的确认逻辑
|
// 例如：更新协议状态、发送通知等
|
|
// 添加确认记录到看板
|
const newBoardItem = {
|
avatar: 'mediator',
|
name: '调解员',
|
time: getCurrentTime(),
|
content: '调解协议已确认：协议内容符合劳动法律法规和调解规范，已发送给双方进行在线签署。',
|
tags: ['tag-type-4'],
|
reviewStatus: 'approved',
|
};
|
|
boardItems.push(newBoardItem);
|
|
// 如果模拟已停止，重新添加项目
|
if (!simulationInterval) {
|
addBoardItem();
|
}
|
}
|
}
|
|
// 修改协议
|
function modifyAgreement() {
|
const reason = prompt('请输入需要修改的内容说明：');
|
if (reason) {
|
alert(`协议修改请求已提交，理由：${reason}。请AI调解员根据修改意见调整协议内容。`);
|
|
// 这里可以添加实际的修改请求逻辑
|
// 例如：更新协议状态、发送通知等
|
|
// 添加修改记录到看板
|
const newBoardItem = {
|
avatar: 'mediator',
|
name: '调解员',
|
time: getCurrentTime(),
|
content: `调解协议修改请求：${reason}。请AI调解员根据修改意见调整协议内容。`,
|
tags: ['tag-type-4'],
|
reviewStatus: 'pending',
|
};
|
|
boardItems.push(newBoardItem);
|
|
// 如果模拟已停止，重新添加项目
|
if (!simulationInterval) {
|
addBoardItem();
|
}
|
}
|
}
|
|
// 新增：下载协议功能
|
function downloadAgreement() {
|
alert('调解协议正在下载中...');
|
|
// 这里可以添加实际的文件下载逻辑
|
// 例如：将协议内容生成PDF或Word文档并提供下载
|
|
// 模拟下载过程
|
setTimeout(() => {
|
alert('调解协议已下载完成！文件名为："李晓明与广东好又多贸易有限公司劳动争议调解协议书.docx"');
|
|
// 添加下载记录到看板
|
const newBoardItem = {
|
avatar: 'mediator',
|
name: '调解员',
|
time: getCurrentTime(),
|
content: '调解协议已下载：已将协议导出为Word文档，供离线存档和打印使用。',
|
tags: ['tag-type-4'],
|
reviewStatus: 'approved',
|
};
|
|
boardItems.push(newBoardItem);
|
|
// 如果模拟已停止，重新添加项目
|
if (!simulationInterval) {
|
addBoardItem();
|
}
|
}, 1500);
|
}
|
|
// 重新生成协议
|
function regenerateAgreement() {
|
if (confirm('确认要重新生成调解协议吗？AI将根据当前协商情况重新生成一份新的协议草案。')) {
|
alert('正在重新生成调解协议草案，请稍候...');
|
|
// 这里可以添加实际的重新生成逻辑
|
// 例如：调用AI重新生成协议、更新协议内容等
|
|
// 模拟重新生成过程
|
setTimeout(() => {
|
alert('新的调解协议草案已生成！请查看协议内容。');
|
|
// 添加重新生成记录到看板
|
const newBoardItem = {
|
avatar: 'ai',
|
name: 'AI调解员',
|
time: getCurrentTime(),
|
content: '根据最新协商情况，已重新生成调解协议草案。新草案调整了支付条款和违约责任，请双方确认。',
|
tags: ['tag-type-4'],
|
reviewStatus: 'pending',
|
};
|
|
boardItems.push(newBoardItem);
|
|
// 如果模拟已停止，重新添加项目
|
if (!simulationInterval) {
|
addBoardItem();
|
}
|
}, 2000);
|
}
|
}
|
|
// 新增：审核证据材料功能
|
function reviewEvidence(evidenceName, party) {
|
const partyName = party === 'applicant' ? '申请人' : '被申请人';
|
if (confirm(`确定要审核${partyName}的"${evidenceName}"材料吗？`)) {
|
alert(`正在审核"${evidenceName}"材料...`);
|
|
// 模拟审核过程
|
setTimeout(() => {
|
alert(`"${evidenceName}"材料审核完成，已标记为"已审核"状态。`);
|
|
// 这里可以添加实际的状态更新逻辑
|
// 例如：更新数据库中的审核状态、修改界面显示等
|
|
// 添加审核记录到看板
|
const newBoardItem = {
|
avatar: 'mediator',
|
name: '调解员',
|
time: getCurrentTime(),
|
content: `${partyName}材料审核：${evidenceName}已审核通过，材料真实有效。`,
|
tags: ['tag-type-4'],
|
reviewStatus: 'approved',
|
};
|
|
boardItems.push(newBoardItem);
|
|
// 如果模拟已停止，重新添加项目
|
if (!simulationInterval) {
|
addBoardItem();
|
}
|
}, 1500);
|
}
|
}
|
|
// 获取当前时间
|
function getCurrentTime() {
|
const now = new Date();
|
const hours = now.getHours().toString().padStart(2, '0');
|
const minutes = now.getMinutes().toString().padStart(2, '0');
|
const seconds = now.getSeconds().toString().padStart(2, '0');
|
return `${hours}:${minutes}:${seconds}`;
|
}
|
|
// 辅助函数
|
function getTagText(tagClass) {
|
const tagMap = {
|
'tag-type-1': '协商进展',
|
'tag-type-2': '方案建议',
|
'tag-type-3': '诉求反馈',
|
'tag-type-4': '材料处理',
|
'tag-type-5': '情绪状态',
|
'tag-type-6': '计算分析',
|
};
|
return tagMap[tagClass] || '其他';
|
}
|
|
// 初始设置
|
setTimeout(() => {
|
// 可以添加初始对话
|
}, 2000);
|
|
|
/**---欠薪--**/
|
// 欠薪计算器模态窗口功能
|
function openCalculatorModal() {
|
const modal = document.getElementById('calculatorModal');
|
const calculatorIframe = document.getElementById('calculatorIframe');
|
|
modal.style.display = 'block';
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
// 确保iframe加载最新内容
|
calculatorIframe.src = calculatorIframe.src;
|
}
|
|
function closeCalculatorModal() {
|
const modal = document.getElementById('calculatorModal');
|
modal.style.display = 'none';
|
document.body.style.overflow = 'auto'; // 恢复背景滚动
|
}
|
|
// 点击模态窗口背景关闭
|
window.onclick = function(event) {
|
const modal = document.getElementById('calculatorModal');
|
if (event.target === modal) {
|
closeCalculatorModal();
|
}
|
}
|
|
// ESC键关闭模态窗口
|
document.addEventListener('keydown', function(event) {
|
const modal = document.getElementById('calculatorModal');
|
if (event.key === 'Escape' && modal.style.display === 'block') {
|
closeCalculatorModal();
|
}
|
});
|
|
/**---法律条文查询--**/
|
// 法律条文查询模态窗口功能
|
function openLawSearchModal() {
|
const modal = document.getElementById('lawSearchModal');
|
const lawSearchIframe = document.getElementById('lawSearchIframe');
|
|
modal.style.display = 'block';
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
// 确保iframe加载最新内容
|
lawSearchIframe.src = lawSearchIframe.src;
|
}
|
|
function closeLawSearchModal() {
|
const modal = document.getElementById('lawSearchModal');
|
modal.style.display = 'none';
|
document.body.style.overflow = 'auto'; // 恢复背景滚动
|
}
|
|
// 点击模态窗口背景关闭
|
window.onclick = function(event) {
|
const modal = document.getElementById('lawSearchModal');
|
if (event.target === modal) {
|
closeLawSearchModal();
|
}
|
}
|
|
// ESC键关闭模态窗口
|
document.addEventListener('keydown', function(event) {
|
const modal = document.getElementById('lawSearchModal');
|
if (event.key === 'Escape' && modal.style.display === 'block') {
|
closeLawSearchModal();
|
}
|
});
|
|
/**---典型案例查询--**/
|
// 典型案例库查询模态窗口功能
|
function openCaseSearchModal() {
|
const modal = document.getElementById('caseSearchModal');
|
const caseSearchIframe = document.getElementById('caseSearchIframe');
|
|
modal.style.display = 'block';
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
// 确保iframe加载最新内容
|
caseSearchIframe.src = caseSearchIframe.src;
|
}
|
|
function closeCaseSearchModal() {
|
const modal = document.getElementById('caseSearchModal');
|
modal.style.display = 'none';
|
document.body.style.overflow = 'auto'; // 恢复背景滚动
|
}
|
|
// 点击模态窗口背景关闭
|
window.onclick = function(event) {
|
const modal = document.getElementById('caseSearchModal');
|
if (event.target === modal) {
|
closeCaseSearchModal();
|
}
|
}
|
|
// ESC键关闭模态窗口
|
document.addEventListener('keydown', function(event) {
|
const modal = document.getElementById('caseSearchModal');
|
if (event.key === 'Escape' && modal.style.display === 'block') {
|
closeCaseSearchModal();
|
}
|
});
|
|
/**---证据材料审查--**/
|
// 证据材料审查模态窗口功能
|
function openDocAuditModal() {
|
const modal = document.getElementById('docAuditModal');
|
const docAuditIframe = document.getElementById('docAuditIframe');
|
|
modal.style.display = 'block';
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
// 确保iframe加载最新内容
|
docAuditIframe.src = docAuditIframe.src;
|
}
|
|
function closeDocAuditModal() {
|
const modal = document.getElementById('docAuditModal');
|
modal.style.display = 'none';
|
document.body.style.overflow = 'auto'; // 恢复背景滚动
|
}
|
|
// 点击模态窗口背景关闭
|
window.onclick = function(event) {
|
const modal = document.getElementById('docAuditModal');
|
if (event.target === modal) {
|
closeDocAuditModal();
|
}
|
}
|
|
// ESC键关闭模态窗口
|
document.addEventListener('keydown', function(event) {
|
const modal = document.getElementById('docAuditModal');
|
if (event.key === 'Escape' && modal.style.display === 'block') {
|
closeDocAuditModal();
|
}
|
});
|
|
|
/**---调解协议修改审查--**/
|
// 调解协议修改模态窗口功能
|
function openDocEditModal() {
|
const modal = document.getElementById('docEditModal');
|
const docEditIframe = document.getElementById('docEditIframe');
|
|
modal.style.display = 'block';
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
// 确保iframe加载最新内容
|
docEditIframe.src = docEditIframe.src;
|
}
|
|
function closeDocEditModal() {
|
const modal = document.getElementById('docEditModal');
|
modal.style.display = 'none';
|
document.body.style.overflow = 'auto'; // 恢复背景滚动
|
}
|
|
// 点击模态窗口背景关闭
|
window.onclick = function(event) {
|
const modal = document.getElementById('docEditModal');
|
if (event.target === modal) {
|
closeDocEditModal();
|
}
|
}
|
|
// ESC键关闭模态窗口
|
document.addEventListener('keydown', function(event) {
|
const modal = document.getElementById('docEditModal');
|
if (event.key === 'Escape' && modal.style.display === 'block') {
|
closeDocEditModal();
|
}
|
});
|
|
|
/**---类案与法条推荐-**/
|
// 类案与法条推荐模态窗口功能
|
function openCaseAndLawModal() {
|
const modal = document.getElementById('caseAndLawModal');
|
const caseAndLawIframe = document.getElementById('caseAndLawIframe');
|
|
modal.style.display = 'block';
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
// 确保iframe加载最新内容
|
caseAndLawIframe.src = caseAndLawIframe.src;
|
}
|
|
function closeCaseAndLawModal() {
|
const modal = document.getElementById('caseAndLawModal');
|
modal.style.display = 'none';
|
document.body.style.overflow = 'auto'; // 恢复背景滚动
|
}
|
|
// 点击模态窗口背景关闭
|
window.onclick = function(event) {
|
const modal = document.getElementById('caseAndLawModal');
|
if (event.target === modal) {
|
closeCaseAndLawModal();
|
}
|
}
|
|
// ESC键关闭模态窗口
|
document.addEventListener('keydown', function(event) {
|
const modal = document.getElementById('docEditModal');
|
if (event.key === 'Escape' && modal.style.display === 'block') {
|
closeCaseAndLawModal();
|
}
|
});
|
|
</script>
|
|
<!-- 欠薪计算器模态窗口 -->
|
<div id="calculatorModal" class="modal">
|
<div class="modal-content">
|
<div class="modal-header">
|
<h2><i class="fas fa-calculator"></i> 欠薪计算器</h2>
|
<span class="close-btn" onclick="closeCalculatorModal()">×</span>
|
</div>
|
<div class="modal-body">
|
<iframe id="calculatorIframe" class="modal-iframe" src="wage_arrears_calculation.html"></iframe>
|
</div>
|
</div>
|
</div>
|
|
<!-- 法律条文查询模态窗口 -->
|
<div id="lawSearchModal" class="modal">
|
<div class="modal-content">
|
<div class="modal-header">
|
<h2><i class="fas fa-lawsearch"></i> 法律条文查询</h2>
|
<span class="close-btn" onclick="closeLawSearchModal()">×</span>
|
</div>
|
<div class="modal-body">
|
<iframe id="lawSearchIframe" class="modal-iframe" src="law_search.html"></iframe>
|
</div>
|
</div>
|
</div>
|
|
<!-- 典型案例查询模态窗口 -->
|
<div id="caseSearchModal" class="modal">
|
<div class="modal-content">
|
<div class="modal-header">
|
<h2><i class="fas fa-casesearch"></i> 典型案例查询</h2>
|
<span class="close-btn" onclick="closeCaseSearchModal()">×</span>
|
</div>
|
<div class="modal-body">
|
<iframe id="caseSearchIframe" class="modal-iframe" src="case_search.html"></iframe>
|
</div>
|
</div>
|
</div>
|
|
<!-- 材料审查查询模态窗口 -->
|
<div id="docAuditModal" class="modal">
|
<div class="modal-content">
|
<div class="modal-header">
|
<h2><i class="fas fa-docaudit"></i> 证据材料审查</h2>
|
<span class="close-btn" onclick="closeDocAuditModal()">×</span>
|
</div>
|
<div class="modal-body">
|
<iframe id="docAuditIframe" class="modal-iframe" src="doc_audit.html"></iframe>
|
</div>
|
</div>
|
</div>
|
|
<!-- 协议文书修改模态窗口 -->
|
<div id="docEditModal" class="modal">
|
<div class="modal-content">
|
<div class="modal-header">
|
<h2><i class="fas fa-docedit"></i> 修改调解协议书内容</h2>
|
<span class="close-btn" onclick="closeDocEditModal()">×</span>
|
</div>
|
<div class="modal-body">
|
<iframe id="docEditIframe" class="modal-iframe" src="doc_edit.html"></iframe>
|
</div>
|
</div>
|
</div>
|
|
<!-- 类案与法条推荐模态窗口 -->
|
<div id="caseAndLawModal" class="modal" >
|
<div class="modal-content">
|
<div class="modal-header">
|
<h2><i class="fas fa-docedit"></i> 类案与法条推荐</h2>
|
<span class="close-btn" onclick="closeCaseAndLawModal()">×</span>
|
</div>
|
<div class="modal-body">
|
<iframe id="caseAndLawIframe" class="modal-iframe" src="similar_case.html"></iframe>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
</html>
|
