<!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: 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
}
|
|
body {
|
background-color: #f5f7fb;
|
color: #333;
|
line-height: 1.6;
|
min-height: 100vh;
|
padding: 20px;
|
}
|
|
.container {
|
max-width: 1400px;
|
margin: 0 auto;
|
background: white;
|
border-radius: var(--border-radius);
|
box-shadow: var(--box-shadow);
|
overflow: hidden;
|
}
|
|
/* 顶部标题区域 */
|
.header {
|
padding: 25px 30px;
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
color: white;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
}
|
|
.platform-title {
|
font-size: 1.8rem;
|
font-weight: 600;
|
margin-bottom: 5px;
|
}
|
|
.breadcrumb {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
font-size: 1rem;
|
opacity: 0.9;
|
}
|
|
.breadcrumb-separator {
|
font-size: 0.8rem;
|
}
|
|
.current-page {
|
font-weight: 600;
|
}
|
|
/* 主要内容区域 */
|
.main-content {
|
display: flex;
|
min-height: 800px;
|
}
|
|
/* 左侧边栏 */
|
.sidebar {
|
width: 280px;
|
background: white;
|
border-right: 1px solid var(--border-color);
|
padding: 25px;
|
}
|
|
.section-title {
|
font-size: 1.4rem;
|
color: var(--secondary-color);
|
margin-bottom: 25px;
|
padding-bottom: 10px;
|
border-bottom: 2px solid var(--primary-color);
|
}
|
|
.nav-menu {
|
display: flex;
|
flex-direction: column;
|
gap: 15px;
|
}
|
|
.nav-item {
|
padding: 12px 15px;
|
border-radius: var(--border-radius);
|
cursor: pointer;
|
transition: all 0.2s ease;
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
font-size: 1.05rem;
|
}
|
|
.nav-item:hover {
|
background-color: #f0f7ff;
|
color: var(--primary-color);
|
transform: translateX(5px);
|
}
|
|
.nav-item.active {
|
background-color: #e3f2fd;
|
color: var(--primary-color);
|
font-weight: 600;
|
border-left: 4px solid var(--primary-color);
|
}
|
|
.nav-item i {
|
font-size: 1.2rem;
|
width: 24px;
|
text-align: center;
|
}
|
|
/* 主要内容区域 */
|
.content-area {
|
flex: 1;
|
padding: 30px;
|
}
|
|
.content-title {
|
font-size: 1.6rem;
|
color: var(--secondary-color);
|
margin-bottom: 30px;
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
}
|
|
.content-title i {
|
color: var(--primary-color);
|
}
|
|
/* 查询条件区域 */
|
.query-conditions {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 25px;
|
margin-bottom: 25px;
|
box-shadow: var(--box-shadow);
|
border: 1px solid var(--border-color);
|
}
|
|
.query-title {
|
font-size: 1.2rem;
|
color: var(--dark-color);
|
margin-bottom: 20px;
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.query-title i {
|
color: var(--primary-color);
|
}
|
|
.query-form {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 20px;
|
}
|
|
.form-group {
|
margin-bottom: 5px;
|
}
|
|
.form-label {
|
display: block;
|
margin-bottom: 8px;
|
font-weight: 600;
|
color: var(--dark-color);
|
font-size: 1rem;
|
}
|
|
.form-input, .form-select {
|
width: 100%;
|
padding: 12px 15px;
|
border: 1px solid var(--border-color);
|
border-radius: var(--border-radius);
|
font-size: 1rem;
|
transition: all 0.3s;
|
background-color: white;
|
}
|
|
.form-input:focus, .form-select:focus {
|
border-color: var(--primary-color);
|
outline: none;
|
box-shadow: 0 0 0 3px rgba(26, 111, 184, 0.1);
|
}
|
|
.date-input-group {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.date-input {
|
flex: 1;
|
}
|
|
.date-separator {
|
color: var(--gray-color);
|
font-weight: 600;
|
}
|
|
.button-group {
|
display: flex;
|
gap: 15px;
|
align-items: flex-end;
|
}
|
|
.btn {
|
padding: 12px 25px;
|
border: none;
|
border-radius: var(--border-radius);
|
font-weight: 600;
|
cursor: pointer;
|
transition: all 0.2s ease;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 8px;
|
font-size: 1rem;
|
height: 46px;
|
}
|
|
.btn-primary {
|
background-color: var(--primary-color);
|
color: white;
|
}
|
|
.btn-primary:hover {
|
background-color: var(--secondary-color);
|
transform: translateY(-2px);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
}
|
|
.btn-secondary {
|
background-color: #e9ecef;
|
color: var(--dark-color);
|
}
|
|
.btn-secondary:hover {
|
background-color: #dee2e6;
|
}
|
|
/* 筛选器区域 */
|
.filters-section {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 25px;
|
margin-bottom: 30px;
|
}
|
|
.filter-category {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 20px;
|
box-shadow: var(--box-shadow);
|
border: 1px solid var(--border-color);
|
}
|
|
.filter-title {
|
font-size: 1.1rem;
|
color: var(--dark-color);
|
margin-bottom: 18px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid var(--border-color);
|
font-weight: 600;
|
}
|
|
.filter-list {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.filter-item {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
cursor: pointer;
|
padding: 8px 5px;
|
border-radius: 4px;
|
transition: all 0.2s ease;
|
}
|
|
.filter-item:hover {
|
background-color: #f8f9fa;
|
color: var(--primary-color);
|
}
|
|
.filter-item.active {
|
background-color: #e3f2fd;
|
color: var(--primary-color);
|
font-weight: 600;
|
}
|
|
.filter-checkbox {
|
width: 18px;
|
height: 18px;
|
border: 2px solid var(--border-color);
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.2s ease;
|
}
|
|
.filter-checkbox.checked {
|
background-color: var(--primary-color);
|
border-color: var(--primary-color);
|
color: white;
|
}
|
|
.filter-checkbox.checked i {
|
font-size: 0.9rem;
|
}
|
|
.filter-count {
|
margin-left: auto;
|
font-size: 0.9rem;
|
color: var(--gray-color);
|
background: #f8f9fa;
|
padding: 3px 10px;
|
border-radius: 20px;
|
min-width: 60px;
|
text-align: center;
|
}
|
|
/* 子筛选器 */
|
.sub-filter-list {
|
margin-left: 20px;
|
margin-top: 8px;
|
border-left: 2px solid #e9ecef;
|
padding-left: 15px;
|
}
|
|
.sub-filter-item {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
cursor: pointer;
|
padding: 6px 5px;
|
font-size: 0.95rem;
|
}
|
|
/* 查询结果区域 */
|
.results-section {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 25px;
|
box-shadow: var(--box-shadow);
|
border: 1px solid var(--border-color);
|
}
|
|
.results-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 25px;
|
padding-bottom: 15px;
|
border-bottom: 1px solid var(--border-color);
|
}
|
|
.results-title {
|
font-size: 1.3rem;
|
color: var(--dark-color);
|
font-weight: 600;
|
}
|
|
.total-count {
|
font-size: 1rem;
|
color: var(--gray-color);
|
background: #f8f9fa;
|
padding: 8px 15px;
|
border-radius: 20px;
|
font-weight: 600;
|
}
|
|
.cases-list {
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
}
|
|
.case-item {
|
padding: 20px;
|
border: 1px solid var(--border-color);
|
border-radius: var(--border-radius);
|
transition: all 0.2s ease;
|
cursor: pointer;
|
}
|
|
.case-item:hover {
|
border-color: var(--primary-color);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
transform: translateY(-3px);
|
}
|
|
.case-title {
|
font-size: 1.15rem;
|
color: var(--primary-color);
|
margin-bottom: 15px;
|
font-weight: 600;
|
line-height: 1.4;
|
}
|
|
.case-meta {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20px;
|
font-size: 0.95rem;
|
color: var(--gray-color);
|
margin-bottom: 10px;
|
}
|
|
.case-meta-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.case-meta-item i {
|
font-size: 0.9rem;
|
color: var(--primary-color);
|
}
|
|
.case-type-badge {
|
display: inline-block;
|
padding: 4px 12px;
|
border-radius: 20px;
|
font-size: 0.85rem;
|
font-weight: 600;
|
margin-top: 5px;
|
}
|
|
.case-type-badge.judgment {
|
background-color: #e3f2fd;
|
color: var(--primary-color);
|
}
|
|
.case-type-badge.mediation {
|
background-color: #e8f5e9;
|
color: var(--success-color);
|
}
|
|
/* 分页 */
|
.pagination {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 15px;
|
margin-top: 35px;
|
padding-top: 25px;
|
border-top: 1px solid var(--border-color);
|
}
|
|
.pagination-btn {
|
padding: 10px 20px;
|
border: 1px solid var(--border-color);
|
border-radius: var(--border-radius);
|
background: white;
|
color: var(--dark-color);
|
cursor: pointer;
|
transition: all 0.2s ease;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-weight: 600;
|
}
|
|
.pagination-btn:hover {
|
background-color: #f8f9fa;
|
border-color: var(--primary-color);
|
color: var(--primary-color);
|
}
|
|
.pagination-btn.disabled {
|
opacity: 0.5;
|
cursor: not-allowed;
|
}
|
|
.pagination-btn.disabled:hover {
|
background-color: white;
|
border-color: var(--border-color);
|
color: var(--dark-color);
|
}
|
|
.page-info {
|
font-size: 1rem;
|
color: var(--gray-color);
|
font-weight: 600;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 1200px) {
|
.filters-section {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
|
.query-form {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
@media (max-width: 992px) {
|
.main-content {
|
flex-direction: column;
|
}
|
|
.sidebar {
|
width: 100%;
|
border-right: none;
|
border-bottom: 1px solid var(--border-color);
|
}
|
|
.nav-menu {
|
flex-direction: row;
|
flex-wrap: wrap;
|
}
|
}
|
|
@media (max-width: 768px) {
|
body {
|
padding: 10px;
|
}
|
|
.header {
|
padding: 20px;
|
}
|
|
.platform-title {
|
font-size: 1.5rem;
|
}
|
|
.content-area, .sidebar {
|
padding: 20px;
|
}
|
|
.filters-section {
|
grid-template-columns: 1fr;
|
}
|
|
.query-form {
|
grid-template-columns: 1fr;
|
}
|
|
.date-input-group {
|
flex-direction: column;
|
align-items: stretch;
|
}
|
|
.date-separator {
|
display: none;
|
}
|
|
.button-group {
|
flex-direction: column;
|
}
|
|
.case-meta {
|
flex-direction: column;
|
gap: 10px;
|
}
|
}
|
|
/* 滚动条样式 */
|
::-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: 1000px;
|
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>
|
<div class="container">
|
|
|
<!-- 主要内容区域 -->
|
<div class="main-content">
|
<!-- 左侧边栏 -->
|
|
|
<!-- 主要内容区域 -->
|
<div class="content-area">
|
<h1 class="content-title">
|
<i class="fas fa-folder-open"></i>
|
典型案例
|
</h1>
|
|
<!-- 查询条件区域 -->
|
<div class="query-conditions">
|
<h2 class="query-title">
|
<i class="fas fa-search"></i>
|
查询条件
|
</h2>
|
<form class="query-form">
|
<div class="form-group">
|
<label class="form-label">关键词</label>
|
<input type="text" class="form-input" placeholder="请填写">
|
</div>
|
<div class="form-group">
|
<label class="form-label">纠纷类型</label>
|
<select class="form-select">
|
<option value="">请选择</option>
|
<option value="邻里纠纷">邻里纠纷</option>
|
<option value="劳动争议">劳动争议</option>
|
<option value="合同纠纷">合同纠纷</option>
|
<option value="家庭纠纷">家庭纠纷</option>
|
<option value="物业纠纷">物业纠纷</option>
|
</select>
|
</div>
|
<div class="form-group">
|
<label class="form-label">纠纷发生时间</label>
|
<div class="date-input-group">
|
<input type="date" class="form-input date-input" id="startDate">
|
<span class="date-separator">至</span>
|
<input type="date" class="form-input date-input" id="endDate">
|
</div>
|
</div>
|
<div class="form-group button-group">
|
<button type="button" class="btn btn-primary">
|
<i class="fas fa-search"></i>
|
查询
|
</button>
|
<button type="button" class="btn btn-secondary">
|
<i class="fas fa-redo"></i>
|
重置条件
|
</button>
|
</div>
|
</form>
|
</div>
|
|
<!-- 筛选器区域 -->
|
<div class="filters-section">
|
<!-- 案例类型筛选 -->
|
<div class="filter-category">
|
<h3 class="filter-title">案例类型</h3>
|
<div class="filter-list">
|
<div class="filter-item active">
|
<div class="filter-checkbox checked">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>判决文书</span>
|
<span class="filter-count">1221120</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>调解案例</span>
|
<span class="filter-count">332526</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 发生时间筛选 -->
|
<div class="filter-category">
|
<h3 class="filter-title">发生时间</h3>
|
<div class="filter-list">
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>2021年</span>
|
<span class="filter-count">1221120</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>2022年</span>
|
<span class="filter-count">332526</span>
|
</div>
|
<div class="filter-item active">
|
<div class="filter-checkbox checked">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>2023年</span>
|
<span class="filter-count">62221</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>2024年</span>
|
<span class="filter-count">32212</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 纠纷发生地筛选 -->
|
<div class="filter-category">
|
<h3 class="filter-title">纠纷发生地</h3>
|
<div class="filter-list">
|
<div class="filter-item active">
|
<div class="filter-checkbox checked">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>全部</span>
|
<span class="filter-count">462100</span>
|
</div>
|
|
<div class="sub-filter-list">
|
<div class="sub-filter-item">
|
<div class="filter-checkbox checked">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>广东省</span>
|
<span class="filter-count">62201</span>
|
</div>
|
|
<div class="sub-filter-list">
|
<div class="sub-filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>广州市</span>
|
<span class="filter-count">10221</span>
|
</div>
|
<div class="sub-filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>深圳市</span>
|
<span class="filter-count">20001</span>
|
</div>
|
<div class="sub-filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>中山市</span>
|
<span class="filter-count">9632</span>
|
</div>
|
</div>
|
|
<div class="sub-filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>广西省</span>
|
<span class="filter-count">44552</span>
|
</div>
|
<div class="sub-filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>湖南省</span>
|
<span class="filter-count">83001</span>
|
</div>
|
<div class="sub-filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>湖北省</span>
|
<span class="filter-count">98745</span>
|
</div>
|
<div class="sub-filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>浙江省</span>
|
<span class="filter-count">30021</span>
|
</div>
|
<div class="sub-filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>山西省</span>
|
<span class="filter-count">2121</span>
|
</div>
|
<div class="sub-filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>福建省</span>
|
<span class="filter-count">9061</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 查询结果区域 -->
|
<div class="results-section">
|
<div class="results-header">
|
<h2 class="results-title">查询结果</h2>
|
<div class="total-count">记录总数：256条</div>
|
</div>
|
|
<!-- 案例列表 -->
|
<div class="cases-list">
|
<!-- 案例1 -->
|
<div class="case-item" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="case-title">黄某诉郭某隐私权邻里纠纷调解典型案例</h3>
|
<div class="case-meta">
|
<div class="case-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>发生时间：2024-4-12</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-map-marker-alt"></i>
|
<span>发生地点：广东省/广州市</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-balance-scale"></i>
|
<span>纠纷类型：邻里纠纷</span>
|
</div>
|
</div>
|
<div class="case-type-badge mediation">调解案例</div>
|
</div>
|
|
<!-- 案例2 -->
|
<div class="case-item" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="case-title">杨某诉某科技公司劳动争议民事纠纷判决案</h3>
|
<div class="case-meta">
|
<div class="case-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>发生时间：2024-4-12</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-map-marker-alt"></i>
|
<span>发生地点：广东省/广州市</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-balance-scale"></i>
|
<span>纠纷类型：劳动争议</span>
|
</div>
|
</div>
|
<div class="case-type-badge judgment">判决文书</div>
|
</div>
|
|
<!-- 案例3 -->
|
<div class="case-item" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="case-title">杨某诉某科技公司劳动争议民事纠纷判决案</h3>
|
<div class="case-meta">
|
<div class="case-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>发生时间：2024-4-12</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-map-marker-alt"></i>
|
<span>发生地点：广东省/广州市</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-balance-scale"></i>
|
<span>纠纷类型：劳动争议</span>
|
</div>
|
</div>
|
<div class="case-type-badge judgment">判决文书</div>
|
</div>
|
|
<!-- 案例4 -->
|
<div class="case-item" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="case-title">杨某诉某科技公司劳动争议民事纠纷判决案</h3>
|
<div class="case-meta">
|
<div class="case-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>发生时间：2024-4-12</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-map-marker-alt"></i>
|
<span>发生地点：广东省/广州市</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-balance-scale"></i>
|
<span>纠纷类型：劳动争议</span>
|
</div>
|
</div>
|
<div class="case-type-badge judgment">判决文书</div>
|
</div>
|
|
<!-- 案例5 -->
|
<div class="case-item" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="case-title">杨某诉某科技公司劳动争议民事纠纷判决案</h3>
|
<div class="case-meta">
|
<div class="case-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>发生时间：2024-4-12</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-map-marker-alt"></i>
|
<span>发生地点：广东省/广州市</span>
|
</div>
|
<div class="case-meta-item">
|
<i class="fas fa-balance-scale"></i>
|
<span>纠纷类型：劳动争议</span>
|
</div>
|
</div>
|
<div class="case-type-badge judgment">判决文书</div>
|
</div>
|
</div>
|
|
<!-- 分页 -->
|
<div class="pagination">
|
<button class="pagination-btn disabled">
|
<i class="fas fa-chevron-left"></i>
|
上一页
|
</button>
|
<span class="page-info">第 1 页 / 共 13 页</span>
|
<button class="pagination-btn">
|
下一页
|
<i class="fas fa-chevron-right"></i>
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
document.addEventListener('DOMContentLoaded', function() {
|
// 设置日期输入框的默认值
|
const startDateInput = document.getElementById('startDate');
|
const endDateInput = document.getElementById('endDate');
|
|
// 设置默认开始日期为三个月前
|
const threeMonthsAgo = new Date();
|
threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
|
|
startDateInput.valueAsDate = threeMonthsAgo;
|
endDateInput.valueAsDate = new Date();
|
|
// 筛选器交互
|
const filterItems = document.querySelectorAll('.filter-item, .sub-filter-item');
|
filterItems.forEach(item => {
|
const checkbox = item.querySelector('.filter-checkbox');
|
|
item.addEventListener('click', function(e) {
|
e.stopPropagation(); // 防止事件冒泡
|
|
// 切换选中状态
|
checkbox.classList.toggle('checked');
|
item.classList.toggle('active');
|
|
// 如果是"全部"被选中，则取消其他选项的选中状态
|
if (item.textContent.includes('全部') && checkbox.classList.contains('checked')) {
|
const sameCategoryItems = item.closest('.filter-list').querySelectorAll('.filter-item, .sub-filter-item');
|
sameCategoryItems.forEach(otherItem => {
|
if (otherItem !== item) {
|
const otherCheckbox = otherItem.querySelector('.filter-checkbox');
|
otherCheckbox.classList.remove('checked');
|
otherItem.classList.remove('active');
|
}
|
});
|
} else if (!item.textContent.includes('全部') && checkbox.classList.contains('checked')) {
|
// 如果选中了非"全部"的选项，则取消"全部"的选中状态
|
const allItem = item.closest('.filter-list').querySelector('.filter-item:first-child');
|
if (allItem && allItem.textContent.includes('全部')) {
|
const allCheckbox = allItem.querySelector('.filter-checkbox');
|
allCheckbox.classList.remove('checked');
|
allItem.classList.remove('active');
|
}
|
}
|
});
|
});
|
|
// 案例项点击效果
|
const caseItems = document.querySelectorAll('.case-item');
|
caseItems.forEach(item => {
|
item.addEventListener('click', function() {
|
// 移除所有案例项的活跃状态
|
caseItems.forEach(i => i.classList.remove('active'));
|
// 添加当前案例项的活跃状态
|
this.classList.add('active');
|
|
// 这里可以添加查看案例详情的逻辑
|
const caseTitle = this.querySelector('.case-title').textContent;
|
console.log(`查看案例详情: ${caseTitle}`);
|
// 在实际应用中，这里可以打开案例详情模态窗口或跳转到详情页面
|
});
|
});
|
|
// 查询按钮点击事件
|
const queryBtn = document.querySelector('.btn-primary');
|
queryBtn.addEventListener('click', function() {
|
const keyword = document.querySelector('.form-input[type="text"]').value;
|
const disputeType = document.querySelector('.form-select').value;
|
const startDate = startDateInput.value;
|
const endDate = endDateInput.value;
|
|
// 收集选中的筛选条件
|
const selectedTypes = [];
|
const selectedYears = [];
|
const selectedLocations = [];
|
|
document.querySelectorAll('.filter-checkbox.checked').forEach(checkbox => {
|
const item = checkbox.closest('.filter-item, .sub-filter-item');
|
const text = item.querySelector('span:not(.filter-count)').textContent.trim();
|
|
if (checkbox.closest('.filter-category:first-child')) {
|
selectedTypes.push(text);
|
} else if (checkbox.closest('.filter-category:nth-child(2)')) {
|
selectedYears.push(text);
|
} else if (checkbox.closest('.filter-category:nth-child(3)')) {
|
selectedLocations.push(text);
|
}
|
});
|
|
// 在实际应用中，这里可以发送查询请求到服务器
|
console.log('查询条件:', {
|
keyword,
|
disputeType,
|
startDate,
|
endDate,
|
selectedTypes,
|
selectedYears,
|
selectedLocations
|
});
|
|
// 显示查询结果提示
|
alert('正在查询典型案例，请稍候...');
|
});
|
|
// 重置按钮点击事件
|
const resetBtn = document.querySelector('.btn-secondary');
|
resetBtn.addEventListener('click', function() {
|
// 重置表单
|
document.querySelector('.form-input[type="text"]').value = '';
|
document.querySelector('.form-select').value = '';
|
|
startDateInput.valueAsDate = threeMonthsAgo;
|
endDateInput.valueAsDate = new Date();
|
|
// 重置筛选器
|
filterItems.forEach(item => {
|
const checkbox = item.querySelector('.filter-checkbox');
|
checkbox.classList.remove('checked');
|
item.classList.remove('active');
|
});
|
|
// 重新设置默认选中项
|
document.querySelectorAll('.filter-category:first-child .filter-item:first-child .filter-checkbox').forEach(cb => cb.classList.add('checked'));
|
document.querySelectorAll('.filter-category:first-child .filter-item:first-child').forEach(item => item.classList.add('active'));
|
|
document.querySelectorAll('.filter-category:nth-child(2) .filter-item:nth-child(3) .filter-checkbox').forEach(cb => cb.classList.add('checked'));
|
document.querySelectorAll('.filter-category:nth-child(2) .filter-item:nth-child(3)').forEach(item => item.classList.add('active'));
|
|
document.querySelectorAll('.filter-category:nth-child(3) .filter-item:first-child .filter-checkbox').forEach(cb => cb.classList.add('checked'));
|
document.querySelectorAll('.filter-category:nth-child(3) .filter-item:first-child').forEach(item => item.classList.add('active'));
|
|
// 重置案例项选中状态
|
caseItems.forEach(item => item.classList.remove('active'));
|
|
alert('查询条件已重置！');
|
});
|
|
// 分页按钮点击事件
|
const paginationBtns = document.querySelectorAll('.pagination-btn:not(.disabled)');
|
paginationBtns.forEach(btn => {
|
btn.addEventListener('click', function() {
|
if (this.classList.contains('disabled')) return;
|
|
const isPrev = this.textContent.includes('上一页');
|
const pageInfo = document.querySelector('.page-info');
|
const currentPage = parseInt(pageInfo.textContent.match(/第 (\d+) 页/)[1]);
|
const totalPages = 13;
|
|
let newPage = isPrev ? currentPage - 1 : currentPage + 1;
|
|
if (newPage < 1) newPage = 1;
|
if (newPage > totalPages) newPage = totalPages;
|
|
pageInfo.textContent = `第 ${newPage} 页 / 共 ${totalPages} 页`;
|
|
// 更新按钮状态
|
const prevBtn = document.querySelector('.pagination-btn:first-child');
|
const nextBtn = document.querySelector('.pagination-btn:last-child');
|
|
prevBtn.classList.toggle('disabled', newPage === 1);
|
nextBtn.classList.toggle('disabled', newPage === totalPages);
|
|
console.log(`跳转到第 ${newPage} 页`);
|
// 在实际应用中，这里可以发送分页请求到服务器
|
});
|
});
|
});
|
|
// 欠薪计算器模态窗口功能
|
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();
|
}
|
});
|
|
</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="case_search_detail.html"></iframe>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
</html>
|
