<!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: 6px;
|
--box-shadow: 0 2px 8px 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;
|
height: 100vh;
|
overflow: hidden;
|
}
|
|
.container {
|
display: flex;
|
height: 100%;
|
}
|
|
/* 左侧边栏 */
|
.sidebar {
|
width: 220px;
|
background: white;
|
border-right: 1px solid var(--border-color);
|
display: flex;
|
flex-direction: column;
|
box-shadow: var(--box-shadow);
|
z-index: 10;
|
}
|
|
.sidebar-header {
|
padding: 20px;
|
border-bottom: 1px solid var(--border-color);
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
color: white;
|
}
|
|
.sidebar-header h2 {
|
font-size: 1.2rem;
|
margin-bottom: 5px;
|
}
|
|
.sidebar-header p {
|
font-size: 0.9rem;
|
opacity: 0.9;
|
}
|
|
.nav-menu {
|
flex: 1;
|
padding: 20px 0;
|
}
|
|
.nav-item {
|
padding: 12px 20px;
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
cursor: pointer;
|
transition: all 0.2s ease;
|
border-left: 4px solid transparent;
|
}
|
|
.nav-item:hover {
|
background-color: #f8f9fa;
|
}
|
|
.nav-item.active {
|
background-color: #e3f2fd;
|
border-left-color: var(--primary-color);
|
color: var(--primary-color);
|
font-weight: 600;
|
}
|
|
.nav-item i {
|
font-size: 1.1rem;
|
width: 20px;
|
text-align: center;
|
}
|
|
.nav-item.active i {
|
color: var(--primary-color);
|
}
|
|
/* 主要内容区域 */
|
.main-content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
|
/* 顶部栏 */
|
.top-bar {
|
background: white;
|
padding: 15px 20px;
|
border-bottom: 1px solid var(--border-color);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.breadcrumb {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.breadcrumb-item {
|
font-size: 0.9rem;
|
color: var(--gray-color);
|
}
|
|
.breadcrumb-separator {
|
color: var(--gray-color);
|
font-size: 0.8rem;
|
}
|
|
.breadcrumb-item.active {
|
color: var(--primary-color);
|
font-weight: 600;
|
}
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
gap: 15px;
|
}
|
|
.notification {
|
position: relative;
|
cursor: pointer;
|
}
|
|
.notification-badge {
|
position: absolute;
|
top: -5px;
|
right: -5px;
|
background-color: var(--danger-color);
|
color: white;
|
font-size: 0.7rem;
|
width: 18px;
|
height: 18px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
/* 内容区域 */
|
.content-area {
|
flex: 1;
|
overflow-y: auto;
|
padding: 20px;
|
}
|
|
.page-title {
|
font-size: 1.5rem;
|
color: var(--secondary-color);
|
margin-bottom: 20px;
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.page-title i {
|
color: var(--primary-color);
|
}
|
|
/* 查询条件区域 */
|
.query-conditions {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 20px;
|
margin-bottom: 20px;
|
box-shadow: var(--box-shadow);
|
}
|
|
.query-title {
|
font-size: 1.1rem;
|
color: var(--dark-color);
|
margin-bottom: 15px;
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.query-form {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 20px;
|
}
|
|
.form-group {
|
margin-bottom: 0px;
|
}
|
|
.form-group.full-width {
|
grid-column: 1 / -1;
|
}
|
|
.form-label {
|
display: block;
|
margin-bottom: 8px;
|
font-weight: 600;
|
color: var(--dark-color);
|
}
|
|
.form-input {
|
width: 100%;
|
padding: 10px 15px;
|
border: 1px solid var(--border-color);
|
border-radius: var(--border-radius);
|
font-size: 1rem;
|
transition: border 0.3s;
|
}
|
|
.form-input: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;
|
}
|
|
.search-box {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
margin-top: 10px;
|
}
|
|
.search-input {
|
flex: 1;
|
position: relative;
|
}
|
|
.search-input i {
|
position: absolute;
|
left: 15px;
|
top: 50%;
|
transform: translateY(-50%);
|
color: var(--gray-color);
|
}
|
|
.search-input input {
|
padding-left: 40px;
|
}
|
|
.button-group {
|
display: flex;
|
gap: 10px;
|
}
|
|
.btn {
|
padding: 10px 20px;
|
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;
|
}
|
|
.btn-primary {
|
background-color: var(--primary-color);
|
color: white;
|
}
|
|
.btn-primary:hover {
|
background-color: var(--secondary-color);
|
transform: translateY(-2px);
|
}
|
|
.btn-secondary {
|
background-color: #e9ecef;
|
color: var(--dark-color);
|
}
|
|
.btn-secondary:hover {
|
background-color: #dee2e6;
|
}
|
|
/* 筛选器区域 */
|
.filters-section {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 20px;
|
margin-bottom: 20px;
|
box-shadow: var(--box-shadow);
|
}
|
|
.filters-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 20px;
|
}
|
|
.filter-category {
|
margin-bottom: 15px;
|
}
|
|
.filter-title {
|
font-size: 1rem;
|
color: var(--dark-color);
|
margin-bottom: 10px;
|
font-weight: 600;
|
}
|
|
.filter-list {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.filter-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
cursor: pointer;
|
padding: 5px 0;
|
}
|
|
.filter-item:hover {
|
color: var(--primary-color);
|
}
|
|
.filter-checkbox {
|
width: 16px;
|
height: 16px;
|
border: 1px solid var(--border-color);
|
border-radius: 3px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.filter-checkbox.checked {
|
background-color: var(--primary-color);
|
border-color: var(--primary-color);
|
color: white;
|
}
|
|
.filter-checkbox.checked i {
|
font-size: 0.8rem;
|
}
|
|
.filter-count {
|
margin-left: auto;
|
font-size: 0.85rem;
|
color: var(--gray-color);
|
background: #f8f9fa;
|
padding: 2px 8px;
|
border-radius: 10px;
|
}
|
|
/* 查询结果区域 */
|
.results-section {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 20px;
|
box-shadow: var(--box-shadow);
|
}
|
|
.results-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
padding-bottom: 15px;
|
border-bottom: 1px solid var(--border-color);
|
}
|
|
.results-title {
|
font-size: 1.2rem;
|
color: var(--dark-color);
|
}
|
|
.query-conditions-summary {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
margin-bottom: 20px;
|
padding: 15px;
|
background: #f8f9fa;
|
border-radius: var(--border-radius);
|
border-left: 4px solid var(--primary-color);
|
}
|
|
.condition-item {
|
display: inline-flex;
|
align-items: center;
|
gap: 5px;
|
background: white;
|
padding: 5px 10px;
|
border-radius: 20px;
|
font-size: 0.9rem;
|
border: 1px solid var(--border-color);
|
}
|
|
.condition-item i {
|
color: var(--gray-color);
|
cursor: pointer;
|
}
|
|
.condition-item i:hover {
|
color: var(--danger-color);
|
}
|
|
.laws-list {
|
display: flex;
|
flex-direction: column;
|
gap: 15px;
|
}
|
|
.law-item {
|
padding: 20px;
|
border: 1px solid var(--border-color);
|
border-radius: var(--border-radius);
|
transition: all 0.2s ease;
|
cursor: pointer;
|
}
|
|
.law-item:hover {
|
border-color: var(--primary-color);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
transform: translateY(-2px);
|
}
|
|
.law-item.active {
|
border-color: var(--primary-color);
|
background: #f0f7ff;
|
}
|
|
.law-title {
|
font-size: 1.1rem;
|
color: var(--primary-color);
|
margin-bottom: 10px;
|
font-weight: 600;
|
}
|
|
.law-meta {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 15px;
|
margin-bottom: 15px;
|
font-size: 0.85rem;
|
color: var(--gray-color);
|
}
|
|
.law-meta-item {
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
}
|
|
.law-meta-item i {
|
font-size: 0.8rem;
|
}
|
|
.law-content {
|
background: #f8f9fa;
|
padding: 15px;
|
border-radius: var(--border-radius);
|
font-size: 0.95rem;
|
line-height: 1.6;
|
margin-top: 10px;
|
border-left: 3px solid var(--primary-color);
|
}
|
|
.law-article {
|
margin-bottom: 15px;
|
}
|
|
.article-number {
|
font-weight: 600;
|
color: var(--primary-color);
|
margin-right: 10px;
|
}
|
|
.pagination {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 10px;
|
margin-top: 30px;
|
padding-top: 20px;
|
border-top: 1px solid var(--border-color);
|
}
|
|
.page-info {
|
font-size: 0.9rem;
|
color: var(--gray-color);
|
}
|
|
@media (max-width: 1200px) {
|
.filters-grid {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
@media (max-width: 768px) {
|
.container {
|
flex-direction: column;
|
}
|
|
.sidebar {
|
width: 100%;
|
height: auto;
|
}
|
|
.query-form {
|
grid-template-columns: 1fr;
|
}
|
|
.filters-grid {
|
grid-template-columns: 1fr;
|
}
|
|
.date-input-group {
|
flex-direction: column;
|
align-items: stretch;
|
}
|
|
.date-separator {
|
display: none;
|
}
|
}
|
|
/* 模态窗口样式 - 添加在现有的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="page-title">
|
<i class="fas fa-book"></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" value="民事主体从事民事活动">
|
</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 full-width">
|
<div class="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>
|
</div>
|
</form>
|
</div>
|
|
<!-- 筛选器区域 -->
|
<div class="filters-section">
|
<div class="filters-grid">
|
<!-- 法律性质 -->
|
<div class="filter-category">
|
<h3 class="filter-title">法律性质</h3>
|
<div class="filter-list">
|
<div class="filter-item">
|
<div class="filter-checkbox checked">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>法律 (256)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>法律解释 (33)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>有关法律问题和重大问题的决定 (12)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>修改、废止的决定 (8)</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 checked">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>全国人民代表大会 (256)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>全国人民代表大会常务委员会 (256)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>国务院 (21)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>地方各级人民代表大会 (8)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>人民法院 (21)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>人民检察院 (8)</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 checked">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>有效 (33)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>尚未生效 (33)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>已废止 (12)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>已修改 (21)</span>
|
</div>
|
<div class="filter-item">
|
<div class="filter-checkbox">
|
<i class="fas fa-check"></i>
|
</div>
|
<span>其他 (8)</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 查询结果区域 -->
|
<div class="results-section">
|
<div class="results-header">
|
<h2 class="results-title">查询结果</h2>
|
<div class="page-info">记录总数：256条</div>
|
</div>
|
|
|
|
<!-- 法律法规列表 -->
|
<div class="laws-list">
|
<!-- 民法典 -->
|
<div class="law-item active" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="law-title">中华人民共和国民法典</h3>
|
<div class="law-meta">
|
<div class="law-meta-item">
|
<i class="fas fa-check-circle" style="color: var(--success-color);"></i>
|
<span>时效性：有效</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-layer-group"></i>
|
<span>法律效力位阶：法律</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-landmark"></i>
|
<span>制定机关：全国人民代表大会</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>公布日期：2020-05-28</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-check"></i>
|
<span>实施日期：2021-01-01</span>
|
</div>
|
</div>
|
<div class="law-content" style="background-color: white">
|
<div class="law-article" >
|
<span class="article-number">第五条</span>
|
<span>民事主体从事民事活动，应当遵循自愿原则，按照自己的意思设立、变更、终止民事法律关系。</span>
|
</div>
|
<div class="law-article">
|
<span class="article-number">第六条</span>
|
<span>民事主体从事民事活动，应当遵循公平原则，合理确定各方的权利和义务。</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 劳动法 -->
|
<div class="law-item" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="law-title">中华人民共和国劳动法</h3>
|
<div class="law-meta">
|
<div class="law-meta-item">
|
<i class="fas fa-check-circle" style="color: var(--success-color);"></i>
|
<span>时效性：有效</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-layer-group"></i>
|
<span>法律效力位阶：法律</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-landmark"></i>
|
<span>制定机关：全国人民代表大会</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>公布日期：2020-05-28</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-check"></i>
|
<span>实施日期：2021-01-01</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 重复劳动法项 -->
|
<div class="law-item" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="law-title">中华人民共和国劳动法</h3>
|
<div class="law-meta">
|
<div class="law-meta-item">
|
<i class="fas fa-check-circle" style="color: var(--success-color);"></i>
|
<span>时效性：有效</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-layer-group"></i>
|
<span>法律效力位阶：法律</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-landmark"></i>
|
<span>制定机关：全国人民代表大会</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>公布日期：2020-05-28</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-check"></i>
|
<span>实施日期：2021-01-01</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="law-item" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="law-title">中华人民共和国劳动法</h3>
|
<div class="law-meta">
|
<div class="law-meta-item">
|
<i class="fas fa-check-circle" style="color: var(--success-color);"></i>
|
<span>时效性：有效</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-layer-group"></i>
|
<span>法律效力位阶：法律</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-landmark"></i>
|
<span>制定机关：全国人民代表大会</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>公布日期：2020-05-28</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-check"></i>
|
<span>实施日期：2021-01-01</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="law-item" onclick="openCalculatorModal()" style="cursor: pointer;">
|
<h3 class="law-title">中华人民共和国劳动法</h3>
|
<div class="law-meta">
|
<div class="law-meta-item">
|
<i class="fas fa-check-circle" style="color: var(--success-color);"></i>
|
<span>时效性：有效</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-layer-group"></i>
|
<span>法律效力位阶：法律</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="fas fa-landmark"></i>
|
<span>制定机关：全国人民代表大会</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-alt"></i>
|
<span>公布日期：2020-05-28</span>
|
</div>
|
<div class="law-meta-item">
|
<i class="far fa-calendar-check"></i>
|
<span>实施日期：2021-01-01</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 分页 -->
|
<div class="pagination">
|
<button class="btn btn-secondary">
|
<i class="fas fa-chevron-left"></i>
|
上一页
|
</button>
|
<span class="page-info">第 1 页 / 共 13 页</span>
|
<button class="btn btn-secondary">
|
下一页
|
<i class="fas fa-chevron-right"></i>
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
// 设置日期输入框的默认值
|
document.addEventListener('DOMContentLoaded', function() {
|
// 设置开始日期为一年前
|
const oneYearAgo = new Date();
|
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
|
|
const startDateInput = document.getElementById('startDate');
|
const endDateInput = document.getElementById('endDate');
|
|
startDateInput.valueAsDate = oneYearAgo;
|
endDateInput.valueAsDate = new Date();
|
|
// 筛选器交互
|
const filterCheckboxes = document.querySelectorAll('.filter-checkbox');
|
filterCheckboxes.forEach(checkbox => {
|
checkbox.addEventListener('click', function() {
|
this.classList.toggle('checked');
|
});
|
});
|
|
// 条件标签关闭按钮
|
const conditionItems = document.querySelectorAll('.condition-item i');
|
conditionItems.forEach(item => {
|
item.addEventListener('click', function() {
|
const conditionItem = this.parentElement;
|
conditionItem.style.display = 'none';
|
});
|
});
|
|
// 法律法规项点击效果
|
const lawItems = document.querySelectorAll('.law-item');
|
lawItems.forEach(item => {
|
item.addEventListener('click', function() {
|
lawItems.forEach(i => i.classList.remove('active'));
|
this.classList.add('active');
|
});
|
});
|
|
// 查询按钮点击事件
|
const queryBtn = document.querySelector('.btn-primary');
|
queryBtn.addEventListener('click', function() {
|
const keyword = document.querySelector('.form-input[type="text"]').value;
|
alert(`正在查询关键词："${keyword}"，请稍候...`);
|
// 这里可以添加实际的查询逻辑
|
});
|
|
// 重置按钮点击事件
|
const resetBtn = document.querySelector('.btn-secondary');
|
resetBtn.addEventListener('click', function() {
|
document.querySelector('.form-input[type="text"]').value = '';
|
document.getElementById('startDate').valueAsDate = oneYearAgo;
|
document.getElementById('endDate').valueAsDate = new Date();
|
|
filterCheckboxes.forEach(checkbox => {
|
checkbox.classList.remove('checked');
|
});
|
|
// 重新勾选默认项
|
document.querySelectorAll('.filter-category:first-child .filter-checkbox')[0].classList.add('checked');
|
document.querySelectorAll('.filter-category:nth-child(2) .filter-checkbox')[0].classList.add('checked');
|
document.querySelectorAll('.filter-category:nth-child(3) .filter-checkbox')[0].classList.add('checked');
|
|
alert('查询条件已重置！');
|
});
|
});
|
|
// 欠薪计算器模态窗口功能
|
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="law_search_detail.html"></iframe>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
</html>
|
