<!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);
|
cursor: pointer;
|
}
|
|
.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);
|
}
|
|
/* 返回按钮 */
|
.back-button {
|
display: inline-flex;
|
align-items: center;
|
gap: 8px;
|
padding: 8px 15px;
|
background-color: #f8f9fa;
|
border: 1px solid var(--border-color);
|
border-radius: var(--border-radius);
|
color: var(--dark-color);
|
font-size: 0.9rem;
|
cursor: pointer;
|
margin-bottom: 20px;
|
transition: all 0.2s ease;
|
}
|
|
.back-button:hover {
|
background-color: #e9ecef;
|
transform: translateX(-2px);
|
}
|
|
/* 法律详情区域 */
|
.law-detail-container {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 30px;
|
box-shadow: var(--box-shadow);
|
margin-bottom: 30px;
|
}
|
|
.law-header {
|
margin-bottom: 30px;
|
border-bottom: 2px solid var(--primary-color);
|
padding-bottom: 20px;
|
}
|
|
.law-title {
|
font-size: 1.8rem;
|
color: var(--primary-color);
|
margin-bottom: 20px;
|
text-align: center;
|
}
|
|
.law-meta-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
gap: 15px;
|
margin-top: 20px;
|
}
|
|
.meta-item {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
padding: 10px;
|
background: #f8f9fa;
|
border-radius: var(--border-radius);
|
}
|
|
.meta-label {
|
font-weight: 600;
|
color: var(--dark-color);
|
min-width: 120px;
|
}
|
|
.meta-value {
|
color: var(--gray-color);
|
}
|
|
.meta-value.effective {
|
color: var(--success-color);
|
font-weight: 600;
|
}
|
|
/* 章节导航 - 修改为不固定 */
|
.chapter-nav {
|
background: white;
|
border-radius: var(--border-radius);
|
padding: 20px;
|
box-shadow: var(--box-shadow);
|
margin-bottom: 20px;
|
}
|
|
.chapter-nav-title {
|
font-size: 1.1rem;
|
color: var(--dark-color);
|
margin-bottom: 15px;
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.chapter-list {
|
max-height: 300px;
|
overflow-y: auto;
|
}
|
|
.chapter-link {
|
display: block;
|
padding: 8px 12px;
|
color: var(--gray-color);
|
text-decoration: none;
|
border-left: 3px solid transparent;
|
transition: all 0.2s ease;
|
}
|
|
.chapter-link:hover {
|
background: #f8f9fa;
|
color: var(--primary-color);
|
border-left-color: var(--primary-color);
|
}
|
|
.chapter-link.active {
|
background: #e3f2fd;
|
color: var(--primary-color);
|
border-left-color: var(--primary-color);
|
font-weight: 600;
|
}
|
|
/* 法律内容 */
|
.law-content {
|
line-height: 1.8;
|
}
|
|
.chapter {
|
margin-bottom: 30px;
|
}
|
|
.chapter-title {
|
font-size: 1.4rem;
|
color: var(--secondary-color);
|
margin-bottom: 20px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid var(--border-color);
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.chapter-title i {
|
color: var(--primary-color);
|
}
|
|
.articles-container {
|
margin-left: 20px;
|
}
|
|
.article-item {
|
margin-bottom: 25px;
|
padding: 15px;
|
border-left: 3px solid #e9ecef;
|
transition: all 0.2s ease;
|
}
|
|
.article-item:hover {
|
border-left-color: var(--primary-color);
|
background: #f8f9fa;
|
}
|
|
.article-number {
|
font-weight: 700;
|
color: var(--primary-color);
|
margin-bottom: 8px;
|
font-size: 1.1rem;
|
}
|
|
.article-content {
|
font-size: 1rem;
|
color: var(--dark-color);
|
text-align: justify;
|
}
|
|
.highlighted {
|
background-color: #fff3cd;
|
padding: 3px 5px;
|
border-radius: 3px;
|
font-weight: 600;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 992px) {
|
.container {
|
flex-direction: column;
|
}
|
|
.sidebar {
|
width: 100%;
|
height: auto;
|
}
|
|
.law-meta-grid {
|
grid-template-columns: 1fr;
|
}
|
|
.articles-container {
|
margin-left: 0;
|
}
|
}
|
|
@media (max-width: 768px) {
|
.law-header {
|
padding: 15px;
|
}
|
|
.law-title {
|
font-size: 1.4rem;
|
}
|
|
.chapter-title {
|
font-size: 1.2rem;
|
}
|
|
.article-content {
|
font-size: 0.95rem;
|
}
|
}
|
|
/* 滚动条样式 */
|
::-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>
|
</head>
|
<body>
|
<div class="container">
|
<!-- 左侧边栏 -->
|
|
|
<!-- 主要内容区域 -->
|
<div class="main-content">
|
<!-- 顶部栏 -->
|
|
|
<!-- 内容区域 -->
|
<div class="content-area">
|
|
|
<!-- 章节导航 -->
|
<div class="chapter-nav">
|
<h3 class="chapter-nav-title">
|
<i class="fas fa-list-ol"></i>
|
章节导航
|
</h3>
|
<div class="chapter-list">
|
<a href="#chapter1" class="chapter-link active">第一章 总则</a>
|
<a href="#chapter2" class="chapter-link">第二章 促进就业</a>
|
<a href="#chapter3" class="chapter-link">第三章 劳动合同</a>
|
<a href="#chapter4" class="chapter-link">第四章 工作时间与休息休假</a>
|
<a href="#chapter5" class="chapter-link">第五章 工资</a>
|
<a href="#chapter6" class="chapter-link">第六章 劳动安全卫生</a>
|
<a href="#chapter7" class="chapter-link">第七章 女职工和未成年工特殊保护</a>
|
</div>
|
</div>
|
|
<!-- 法律详情容器 -->
|
<div class="law-detail-container">
|
<div class="law-header">
|
<h2 class="law-title">中华人民共和国劳动法</h2>
|
<div class="law-meta-grid">
|
<div class="meta-item">
|
<span class="meta-label">时效性:</span>
|
<span class="meta-value effective">有效</span>
|
</div>
|
<div class="meta-item">
|
<span class="meta-label">法律效力位阶:</span>
|
<span class="meta-value">法律</span>
|
</div>
|
<div class="meta-item">
|
<span class="meta-label">制定机关:</span>
|
<span class="meta-value">全国人民代表大会</span>
|
</div>
|
<div class="meta-item">
|
<span class="meta-label">公布日期:</span>
|
<span class="meta-value">2020-05-28</span>
|
</div>
|
<div class="meta-item">
|
<span class="meta-label">实施日期:</span>
|
<span class="meta-value">2021-01-01</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="law-content">
|
<!-- 第一章 总则 -->
|
<div class="chapter" id="chapter1">
|
<h3 class="chapter-title">
|
<i class="fas fa-bookmark"></i>
|
第一章 总则
|
</h3>
|
<div class="articles-container">
|
<div class="article-item">
|
<div class="article-number">第一条</div>
|
<div class="article-content">
|
为了保护劳动者的合法权益，调整劳动关系，建立和维护适应社会主义市场经济的劳动制度，促进经济发展和社会进步，根据宪法，制定本法。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第二条</div>
|
<div class="article-content">
|
在中华人民共和国境内的企业、个体经济组织（以下简称用人单位）和与之形成劳动关系的劳动者，适用本法。
|
<br><br>
|
国家机关、事业组织、社会团体和与之建立劳动合同关系的劳动者，依照本法执行。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第三条</div>
|
<div class="article-content">
|
劳动者享有平等就业和选择职业的权利、取得劳动报酬的权利、休息休假的权利、获得劳动安全卫生保护的权利、接受职业技能培训的权利、享受社会保险和福利的权利、提请劳动争议处理的权利以及法律规定的其他劳动权利。
|
<br><br>
|
劳动者应当完成劳动任务，提高职业技能，执行劳动安全卫生规程，遵守劳动纪律和职业道德。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第四条</div>
|
<div class="article-content">
|
用人单位应当依法建立和完善规章制度，保障劳动者享有劳动权利和履行劳动义务。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第五条</div>
|
<div class="article-content">
|
国家采取各种措施，促进劳动就业，发展职业教育，制定劳动标准，调节社会收入，完善社会保障，协调劳动关系，逐步提高劳动者的生活水平。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第六条</div>
|
<div class="article-content">
|
国家提倡劳动者参加社会义务劳动，开展劳动竞赛和合理化建议活动，鼓励和保护劳动者进行科学研究、技术革新和发明创造，表彰和奖励劳动模范和先进工作者。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第七条</div>
|
<div class="article-content">
|
劳动者有依法参加和组织工会的权利。
|
<br><br>
|
工会代表和维护劳动者的合法权益，依法独立自主地开展工作。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第八条</div>
|
<div class="article-content">
|
劳动者依照法律规定，通过职工大会、职工代表大会或者其他形式，参与民主管理或者就保护劳动者合法权益与用人单位进行平等协商。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第九条</div>
|
<div class="article-content">
|
国务院劳动行政部门主管全国劳动工作。
|
<br><br>
|
县级以上地方人民政府劳动行政部门主管本行政区域内的劳动工作。
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 第二章 促进就业 -->
|
<div class="chapter" id="chapter2">
|
<h3 class="chapter-title">
|
<i class="fas fa-bookmark"></i>
|
第二章 促进就业
|
</h3>
|
<div class="articles-container">
|
<div class="article-item">
|
<div class="article-number">第十条</div>
|
<div class="article-content">
|
国家通过促进经济和社会发展，创造就业条件，扩大就业机会。
|
<br><br>
|
国家鼓励企业、事业单位、社会团体在法律法规规定的范围内兴办产业或者拓展经营，增加就业。
|
<br><br>
|
国家支持劳动者自愿组织起来就业和从事个体经营实现就业。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第十一条</div>
|
<div class="article-content">
|
地方各级人民政府应当采取措施，发展多种类型的职业介绍机构，提供就业服务。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第十二条</div>
|
<div class="article-content">
|
劳动者就业，不因民族、种族、性别、宗教信仰不同而受歧视。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第十三条</div>
|
<div class="article-content">
|
妇女享有与男子平等的就业权利。在录用职工时，除国家规定的不适合妇女的工种或岗位外，不得以性别为由拒绝录用妇女或者提高对妇女的录用标准。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第十四条</div>
|
<div class="article-content">
|
残疾人、少数民族人员、退役军人、复员转业军人、退伍军人的就业，法律、法规有特别规定的，从其规定。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第十五条</div>
|
<div class="article-content">
|
禁止用人单位招用未满十六周岁的未成年人。
|
<br><br>
|
文艺、体育和特种工艺单位招用未满十六周岁的未成年人，必须依照国家有关规定，履行审批手续，并保障其接受义务教育的权利。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第十六条</div>
|
<div class="article-content">
|
劳动合同是劳动者与用人单位确立劳动关系、明确双方权利和义务的协议。
|
<br><br>
|
建立劳动关系应当订立劳动合同。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第十七条</div>
|
<div class="article-content">
|
订立和变更劳动合同，应当遵循平等自愿、协商一致的原则，不得违反法律、行政法规的规定。
|
<br><br>
|
劳动合同依法订立即具有法律约束力，当事人必须履行劳动合同规定的义务。
|
</div>
|
</div>
|
<div class="article-item">
|
<div class="article-number">第十八条</div>
|
<div class="article-content">
|
下列劳动合同无效：
|
<br><br>
|
（一）违反法律、行政法规的劳动合同；
|
<br>
|
（二）采取欺诈、威胁等手段订立的劳动合同。
|
<br><br>
|
无效的劳动合同，自订立之日起，没有法律约束力。确认劳动合同部分无效的，如果不影响其余部分的效力，其余部分仍然有效。
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
document.addEventListener('DOMContentLoaded', function() {
|
// 返回按钮功能
|
const backButton = document.getElementById('backButton');
|
backButton.addEventListener('click', function() {
|
if (confirm('确定要返回查询结果页面吗？')) {
|
window.history.back();
|
}
|
});
|
|
// 章节导航功能
|
const chapterLinks = document.querySelectorAll('.chapter-link');
|
chapterLinks.forEach(link => {
|
link.addEventListener('click', function(e) {
|
e.preventDefault();
|
|
// 移除所有活跃状态
|
chapterLinks.forEach(l => l.classList.remove('active'));
|
|
// 添加当前活跃状态
|
this.classList.add('active');
|
|
// 平滑滚动到对应章节
|
const targetId = this.getAttribute('href');
|
const targetElement = document.querySelector(targetId);
|
if (targetElement) {
|
targetElement.scrollIntoView({
|
behavior: 'smooth',
|
block: 'start'
|
});
|
}
|
});
|
});
|
|
// 监听滚动，更新章节导航活跃状态
|
const chapters = document.querySelectorAll('.chapter');
|
const observerOptions = {
|
root: null,
|
rootMargin: '0px',
|
threshold: 0.3
|
};
|
|
const observer = new IntersectionObserver((entries) => {
|
entries.forEach(entry => {
|
if (entry.isIntersecting) {
|
const id = entry.target.id;
|
chapterLinks.forEach(link => {
|
link.classList.remove('active');
|
if (link.getAttribute('href') === `#${id}`) {
|
link.classList.add('active');
|
}
|
});
|
}
|
});
|
}, observerOptions);
|
|
chapters.forEach(chapter => {
|
observer.observe(chapter);
|
});
|
|
// 模拟从查询页面跳转过来的效果
|
const urlParams = new URLSearchParams(window.location.search);
|
const fromSearch = urlParams.get('from');
|
|
if (fromSearch === 'search') {
|
// 显示跳转提示
|
setTimeout(() => {
|
const firstArticle = document.querySelector('.article-item');
|
if (firstArticle) {
|
firstArticle.scrollIntoView({
|
behavior: 'smooth',
|
block: 'center'
|
});
|
|
// 添加临时高亮效果
|
firstArticle.style.backgroundColor = '#fff3cd';
|
setTimeout(() => {
|
firstArticle.style.backgroundColor = '';
|
}, 2000);
|
}
|
}, 500);
|
}
|
});
|
</script>
|
</body>
|
</html>
|
