使用cursor完成文档可视化
·
现有一个PDF文件，里面是一些调研的信息，现在想把这些信息，通过网页的形式呈现出来，方便阅读。
PDF文件的内容如下所示：
为了方便cursor理解，人工把PDF中的文字内容，转成txt文件。
在cursor中让其根据文本内容，生成网页。
一个漂亮的网页就生成出来了
网页代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国女性职业发展报告 2023</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<style>
/* 自定义样式 */
* {
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* 浅色模式 */
:root {
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-tertiary: #f1f3f5;
--text-primary: #1a1a1a;
--text-secondary: #6b7280;
--text-tertiary: #9ca3af;
--border-color: #e5e7eb;
--accent-color: #5e6ad2;
--accent-hover: #4c5ac4;
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
--highlight-bg: #eef2ff;
}
/* 深色模式 */
.dark {
--bg-primary: #0d0d0d;
--bg-secondary: #1a1a1a;
--bg-tertiary: #262626;
--text-primary: #f5f5f5;
--text-secondary: #a1a1a1;
--text-tertiary: #737373;
--border-color: #2a2a2a;
--accent-color: #7b89e8;
--accent-hover: #8b98ec;
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
--highlight-bg: #1e2337;
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}
.section-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
margin-bottom: 1.5rem;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
}
.section-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
}
.dark .section-card:hover {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
}
.highlight-box {
background-color: var(--highlight-bg);
border-left: 4px solid var(--accent-color);
padding: 1rem 1.25rem;
border-radius: 8px;
margin: 1rem 0;
}
.stat-card {
background-color: var(--bg-tertiary);
border-radius: 10px;
padding: 1.5rem;
text-align: center;
}
.nav-link {
color: var(--text-secondary);
padding: 0.5rem 1rem;
border-radius: 8px;
transition: all 0.2s ease;
}
.nav-link:hover {
background-color: var(--bg-tertiary);
color: var(--text-primary);
}
.nav-link.active {
background-color: var(--accent-color);
color: white;
}
.tag {
display: inline-block;
background-color: var(--bg-tertiary);
color: var(--text-secondary);
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-size: 0.875rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.progress-bar {
background-color: var(--bg-tertiary);
border-radius: 8px;
height: 8px;
overflow: hidden;
margin: 0.5rem 0;
}
.progress-fill {
background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
height: 100%;
border-radius: 8px;
transition: width 0.5s ease;
}
.theme-toggle {
background-color: var(--bg-tertiary);
border-radius: 50px;
padding: 0.5rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--border-color);
transition: all 0.2s ease;
}
.theme-toggle:hover {
background-color: var(--bg-secondary);
}
.divider {
height: 1px;
background-color: var(--border-color);
margin: 2rem 0;
}
h1,
h2,
h3,
h4 {
color: var(--text-primary);
}
h2 {
font-size: 1.875rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
h3 {
font-size: 1.5rem;
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
h4 {
font-size: 1.25rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
color: var(--text-primary);
}
p {
line-height: 1.75;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.toc-item {
padding: 0.75rem 1rem;
border-left: 2px solid transparent;
transition: all 0.2s ease;
cursor: pointer;
}
.toc-item:hover {
background-color: var(--bg-tertiary);
border-left-color: var(--accent-color);
}
.toc-item.active {
background-color: var(--highlight-bg);
border-left-color: var(--accent-color);
color: var(--accent-color);
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* 动画 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeInUp 0.6s ease-out;
}
/* 数据可视化样式 */
.data-viz {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1.5rem 0;
}
.data-item {
flex: 1;
min-width: 200px;
background-color: var(--bg-tertiary);
padding: 1.25rem;
border-radius: 10px;
border: 1px solid var(--border-color);
}
.data-value {
font-size: 2rem;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 0.5rem;
}
.data-label {
font-size: 0.875rem;
color: var(--text-secondary);
}
/* 列表样式 */
ul,
ol {
margin: 1rem 0;
padding-left: 1.5rem;
}
li {
line-height: 1.75;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
/* 表格样式 */
.table-container {
overflow-x: auto;
margin: 1.5rem 0;
border-radius: 10px;
border: 1px solid var(--border-color);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: var(--bg-tertiary);
color: var(--text-primary);
padding: 1rem;
text-align: left;
font-weight: 600;
}
td {
padding: 1rem;
border-top: 1px solid var(--border-color);
color: var(--text-secondary);
}
tr:hover {
background-color: var(--bg-secondary);
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="sticky top-0 z-50 backdrop-blur-lg"
style="background-color: rgba(var(--bg-primary), 0.8); border-bottom: 1px solid var(--border-color);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-4">
<h1 class="text-xl font-bold">中国女性职业发展报告</h1>
<span class="tag">2023版</span>
</div>
<!-- 主题切换按钮 -->
<button id="themeToggle" class="theme-toggle" aria-label="切换主题">
<svg id="sunIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
</path>
</svg>
<svg id="moonIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z">
</path>
</svg>
</button>
</div>
</div>
</header>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- 侧边栏目录 -->
<aside class="lg:col-span-3 hidden lg:block">
<div class="sticky top-24">
<div class="section-card">
<h3 class="text-lg font-semibold mb-4" style="margin-top: 0;">目录</h3>
<nav id="tableOfContents" class="space-y-1">
<div class="toc-item" data-section="summary">摘要</div>
<div class="toc-item" data-section="education">1. 女性受教育程度</div>
<div class="toc-item" data-section="employment">2. 中国女性就业情况</div>
<div class="toc-item" data-section="salary">3. 职场女性的薪资</div>
<div class="toc-item" data-section="development">4. 女性职业发展</div>
<div class="toc-item" data-section="correlation">5. 相关性分析</div>
<div class="toc-item" data-section="policy">6. 政策建议</div>
<div class="toc-item" data-section="conclusion">结论</div>
</nav>
</div>
</div>
</aside>
<!-- 主要内容区域 -->
<main class="lg:col-span-9">
<!-- 头部信息 -->
<div class="section-card animate-fade-in">
<div class="text-center mb-8">
<h1 class="text-4xl sm:text-5xl font-bold mb-4">中国女性职业发展报告</h1>
<p class="text-xl mb-2" style="color: var(--text-secondary);">2023 版</p>
<div class="flex flex-wrap justify-center gap-2 mt-4">
<span class="tag">育娲人口研究</span>
<span class="tag">2023/02</span>
</div>
</div>
<div class="divider"></div>
<div class="mt-6">
<p class="text-center" style="color: var(--text-secondary);">
<strong>作者：</strong>梁建章、任泽平、黄文政、何亚福、於嘉、鲍笛
</p>
</div>
</div>
<!-- 摘要 -->
<section id="summary" class="section-card animate-fade-in">
<h2>📊 摘要</h2>
<div class="highlight-box">
<p><strong>核心发现：</strong>本报告基于2020年全国人口普查数据及国际比较研究，系统分析了中国女性的教育、就业、薪资及职业发展状况。</p>
</div>
<h3>主要数据概览</h3>
<div class="data-viz">
<div class="data-item">
<div class="data-value">6.88亿</div>
<div class="data-label">中国女性人口总数</div>
</div>
<div class="data-item">
<div class="data-value">48.76%</div>
<div class="data-label">女性人口占比</div>
</div>
<div class="data-item">
<div class="data-value">68.57%</div>
<div class="data-label">女性劳动参与率（2019）</div>
</div>
<div class="data-item">
<div class="data-value">102位</div>
<div class="data-label">性别平等指数全球排名</div>
</div>
</div>
<h4>教育程度</h4>
<p>20-49岁人口中，受过高等教育的男性和女性人数在总体上相差不大。其中，<strong>大专和博士学历的男性占比高于女性</strong>，而<strong>本科和硕士学历的女性占比高于男性</strong>。
</p>
<h4>就业趋势</h4>
<p>长期以来，中国女性的劳动参与率高于世界平均水平。不过，近三十年来，中国15-64岁女性的劳动参与率呈下降趋势，从1990年的<span
style="color: var(--accent-color); font-weight: 600;">79.39%</span>下降到2019年的<span
style="color: var(--accent-color); font-weight: 600;">68.57%</span>。</p>
<h4>国际比较</h4>
<p>根据世界经济论坛2022年7月发布的《全球性别差距报告2022》，2022年中国在性别平等指数中的整体排名相比2021年提高了5位，在143个经济体中排名<strong>第102名</strong>。
</p>
<p>2022年中国的女性董事比例为<span
style="color: var(--accent-color); font-weight: 600;">13.8%</span>，仅高于日本、韩国等东亚国家，低于绝大多数欧洲国家。法国的女性董事比例最高，达到45.3%。
</p>
<div class="highlight-box mt-6">
<h4 style="margin-top: 0;">核心挑战</h4>
<ul>
<li>子女数量与女性就业几率存在负相关关系</li>
<li>每多一个子女会使得女性工资率下降约10%</li>
<li>女性在职业发展中仍存在婚育方面的歧视</li>
</ul>
</div>
</section>
<!-- 女性受教育程度 -->
<section id="education" class="section-card animate-fade-in">
<h2>📚 1. 女性受教育程度以及与男性的比较</h2>
<h3>人口结构</h3>
<p>根据2020年人口普查数据，中国女性人口共有<strong>6.88亿人</strong>，占比为48.76%。</p>
<div class="data-viz">
<div class="data-item">
<div class="data-value">17.3%</div>
<div class="data-label">0-14岁女性（1.188亿）</div>
</div>
<div class="data-item">
<div class="data-value">62.9%</div>
<div class="data-label">15-59岁女性（4.329亿）</div>
</div>
<div class="data-item">
<div class="data-value">19.8%</div>
<div class="data-label">60岁以上女性（1.366亿）</div>
</div>
</div>
<h3>按受教育程度划分</h3>
<div class="table-container">
<table>
<thead>
<tr>
<th>学历层次</th>
<th>女性人数</th>
</tr>
</thead>
<tbody>
<tr>
<td>小学学历</td>
<td>1.848亿人</td>
</tr>
<tr>
<td>初中学历</td>
<td>2.236亿人</td>
</tr>
<tr>
<td>高中学历</td>
<td>9,521万人</td>
</tr>
<tr>
<td>大专学历</td>
<td>5,358万人</td>
</tr>
<tr>
<td>本科学历</td>
<td>4,652万人</td>
</tr>
<tr>
<td>硕士学历</td>
<td>477万人</td>
</tr>
<tr>
<td>博士学历</td>
<td>50万人</td>
</tr>
</tbody>
</table>
</div>
<h3>性别比较分析</h3>
<p>20-49岁人口中，受过高等教育的男性和女性人数在总体上相差不大：</p>
<ul>
<li><strong>大专学历：</strong>男性占比高于女性</li>
<li><strong>本科学历：</strong>女性占比高于男性 ✨</li>
<li><strong>硕士学历：</strong>女性占比高于男性 ✨</li>
<li><strong>博士学历：</strong>男性占比高于女性</li>
</ul>
<div class="highlight-box">
<h4 style="margin-top: 0;">历史变迁</h4>
<p>近三十年来，中国女性人口的受教育水平不断提高：</p>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-2">
<span><strong>1990年：</strong>20-24岁女性本科占比</span>
<span style="color: var(--accent-color); font-weight: 600;">0.9%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 3%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span><strong>2020年：</strong>20-24岁女性本科占比</span>
<span style="color: var(--accent-color); font-weight: 600;">28.6%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 95%;"></div>
</div>
</div>
</div>
</div>
<h3>国际比较</h3>
<p>根据世界银行2019年数据，中国、美国、加拿大、英国、法国、意大利、瑞典和澳大利亚等国，<strong>女性的大学毛入学率高于男性</strong>；而日本和韩国，男性的毛入学率高于女性。
</p>
</section>
<!-- 中国女性就业情况 -->
<section id="employment" class="section-card animate-fade-in">
<h2>💼 2. 中国女性就业情况</h2>
<h3>就业规模</h3>
<p>根据国新办2019年9月发表的《新中国70年妇女事业的发展与进步》数据：</p>
<ul>
<li>全社会就业人员中<strong>女性占比超过四成</strong></li>
<li>2017年，全国女性就业人数<strong>3.4亿</strong>，比1978年翻了一番</li>
<li>2017年，公有经济企事业单位女性专业技术人员<strong>1,529.7万</strong>，占比48.6%</li>
<li>互联网领域创业者中<strong>女性达到55%</strong></li>
</ul>
<h3>劳动参与率趋势</h3>
<div class="highlight-box">
<p><strong>核心发现：</strong>长期以来，中国女性的劳动参与率高于世界平均水平10-20个百分点。</p>
</div>
<p>然而，近三十年来，中国女性的劳动参与率呈下降趋势：</p>
<div class="data-viz">
<div class="data-item">
<div class="data-value">79.39%</div>
<div class="data-label">1990年女性劳动参与率</div>
</div>
<div class="data-item">
<div class="data-value">68.57%</div>
<div class="data-label">2019年女性劳动参与率</div>
</div>
<div class="data-item">
<div class="data-value">▼10.82%</div>
<div class="data-label">下降幅度</div>
</div>
</div>
<h4>下降原因分析</h4>
<ul>
<li>经济转型</li>
<li>育儿责任增加</li>
<li>劳动力市场性别歧视</li>
<li>女性受教育年限延长，参加工作时间推迟</li>
</ul>
<h3>国际比较</h3>
<p>根据世界银行2019年数据，15-64岁女性劳动参与率对比：</p>
<div class="space-y-3">
<div>
<div class="flex justify-between mb-1">
<span>德国</span>
<span style="color: var(--accent-color);">75.8%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 95%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>加拿大</span>
<span style="color: var(--accent-color);">74.5%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 93%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>中国</span>
<span style="color: var(--accent-color);">68.6%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 86%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>美国</span>
<span style="color: var(--accent-color);">66.8%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 84%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>韩国</span>
<span style="color: var(--accent-color);">60.4%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 76%;"></div>
</div>
</div>
</div>
<div class="highlight-box mt-6">
<h4 style="margin-top: 0;">退休年龄规定</h4>
<ul>
<li><strong>女工人：</strong>50周岁</li>
<li><strong>女干部：</strong>55周岁</li>
<li><strong>县处级女干部及高级职称女性：</strong>60周岁（可自愿在55周岁退休）</li>
</ul>
</div>
</section>
<!-- 职场女性薪资 -->
<section id="salary" class="section-card animate-fade-in">
<h2>💰 3. 职场女性的薪资和性别工资差距</h2>
<h3>薪资水平</h3>
<p>根据智联招聘《2022中国女性职场现状调查报告》：</p>
<div class="data-viz">
<div class="data-item">
<div class="data-value">8,545元</div>
<div class="data-label">2022年职场女性平均月薪</div>
</div>
<div class="data-item">
<div class="data-value">+5%</div>
<div class="data-label">相比2021年薪资涨幅</div>
</div>
<div class="data-item">
<div class="data-value">30%+</div>
<div class="data-label">女性收入占家庭总收入40%以上</div>
</div>
</div>
<h3>性别不平等原因</h3>
<div class="highlight-box">
<h4 style="margin-top: 0;">女性视角（62.3%认为）</h4>
<p><strong>"生育是女性摆脱不掉的负担"</strong>，远高于男性的28.1%</p>
</div>
<div class="highlight-box">
<h4 style="margin-top: 0;">男性视角（41.5%认为）</h4>
<p><strong>"根深蒂固的封建思想"</strong>是主要原因，其次是"社会分工"（33%）</p>
</div>
<h3>性别薪酬差异</h3>
<p>根据BOSS直聘研究院《2021年中国职场性别薪酬差异报告》：</p>
<ul>
<li>2021年度，女性劳动者平均薪酬为<strong>7,017元</strong></li>
<li>较2020年同比提升<strong>2.5%</strong></li>
<li>平均薪酬水平为城镇男性劳动者的<strong>77.1%</strong></li>
<li>性别薪酬差异较2020年改善<strong>1.2个百分点</strong></li>
</ul>
<h4>行业差异分析</h4>
<p>性别薪酬差异最高的三个行业（女性从业者占比超过60%）：</p>
<ol>
<li><strong>教育培训业</strong> - 性别薪酬差异52.7%，较2020年拉大近10个百分点</li>
<li><strong>专业服务业</strong></li>
<li><strong>制药医疗业</strong></li>
</ol>
<p>而女性占比相对较低的<strong>汽车行业</strong>和<strong>机械制造业</strong>中，性别薪酬差异则低于20%。</p>
<h3>OECD国家性别工资差距比较（2022）</h3>
<div class="space-y-3">
<div>
<div class="flex justify-between mb-1">
<span>韩国</span>
<span style="color: #ef4444;">31.48%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 100%; background: #ef4444;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>日本</span>
<span style="color: #f97316;">22.1%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 70%; background: #f97316;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>美国</span>
<span style="color: #eab308;">17.3%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 55%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>比利时</span>
<span style="color: #22c55e;">3.3%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 10%; background: #22c55e;"></div>
</div>
</div>
</div>
<p class="mt-4"><em>注：北欧国家的性别工资差距普遍低于8%</em></p>
</section>
<!-- 女性职业发展 -->
<section id="development" class="section-card animate-fade-in">
<h2>🚀 4. 女性职业发展和综合女性地位</h2>
<h3>全球性别差距指数</h3>
<p>世界经济论坛《全球性别差距报告2022》评估维度：</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
<div class="stat-card">
<h4 style="margin: 0 0 0.5rem 0;">经济活动参与度</h4>
<p style="margin: 0; font-size: 0.875rem;">就业与收入机会</p>
</div>
<div class="stat-card">
<h4 style="margin: 0 0 0.5rem 0;">政治活动参与度</h4>
<p style="margin: 0; font-size: 0.875rem;">政治决策权力</p>
</div>
<div class="stat-card">
<h4 style="margin: 0 0 0.5rem 0;">受教育水平</h4>
<p style="margin: 0; font-size: 0.875rem;">教育机会平等</p>
</div>
<div class="stat-card">
<h4 style="margin: 0 0 0.5rem 0;">健康和生存状况</h4>
<p style="margin: 0; font-size: 0.875rem;">健康权益保障</p>
</div>
</div>
<h3>主要国家排名（2022）</h3>
<div class="space-y-3">
<div>
<div class="flex justify-between mb-1">
<span>🥇 冰岛（连续13年第一）</span>
<span style="color: var(--accent-color);">No.1</span>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>🥈 芬兰</span>
<span style="color: var(--accent-color);">No.2</span>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>🥉 挪威</span>
<span style="color: var(--accent-color);">No.3</span>
</div>
</div>
<div class="divider" style="margin: 1rem 0;"></div>
<div>
<div class="flex justify-between mb-1">
<span>韩国</span>
<span>No.99</span>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>中国</span>
<span>No.102 (↑5位)</span>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>日本（发达国家中最后）</span>
<span>No.116</span>
</div>
</div>
</div>
<div class="highlight-box mt-6">
<h4 style="margin-top: 0;">中国进步与挑战</h4>
<p><strong>进步方面：</strong></p>
<ul>
<li>经济活动参与度有所改善</li>
<li>健康生存状况得到提升</li>
<li>出生性别比有较大进步</li>
</ul>
<p><strong>挑战方面：</strong></p>
<ul>
<li>中等教育男女入学均等指标分数较低</li>
</ul>
</div>
<h3>女性董事占比（2022）</h3>
<div class="space-y-3">
<div>
<div class="flex justify-between mb-1">
<span>法国</span>
<span style="color: var(--accent-color);">45.3%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 90%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>挪威</span>
<span style="color: var(--accent-color);">42.3%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 84%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>瑞典</span>
<span style="color: var(--accent-color);">36.4%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 72%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>美国</span>
<span style="color: var(--accent-color);">28.6%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 57%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>中国</span>
<span style="color: var(--accent-color);">13.8%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 27%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>日本</span>
<span style="color: var(--accent-color);">11.4%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 23%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>韩国</span>
<span style="color: var(--accent-color);">8.7%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 17%;"></div>
</div>
</div>
</div>
<h3>女性企业家比例（2021）</h3>
<p>中国女性企业家在企业家总人数中的占比为<strong>29.7%</strong>：</p>
<ul>
<li>低于俄罗斯、美国、加拿大、英国、法国等欧美国家</li>
<li>高于日本、韩国、印度、土耳其等亚洲国家</li>
</ul>
<h3>女性议员比例</h3>
<p>中国第十三届全国人大2,980名代表中，女代表742名，占代表总数的<strong>24.9%</strong>。</p>
<p>国际对比：</p>
<ul>
<li>瑞典：46.4%</li>
<li>芬兰：45.5%</li>
<li>法国：37.8%</li>
<li>德国：35.1%</li>
<li>英国：34.5%</li>
<li>美国：29.4%</li>
<li>韩国：19.1%</li>
<li>日本：10%</li>
</ul>
</section>
<!-- 相关性分析 -->
<section id="correlation" class="section-card animate-fade-in">
<h2>📈 5. 女性就业、受教育程度与生育问题的相关性分析</h2>
<div class="highlight-box">
<p><strong>核心矛盾：</strong>职场女性在进入结婚、生子阶段时，不得不面对将原本计划中用于职场的时间分担给孩子和家庭的困境。</p>
</div>
<h3>生育意愿下降趋势</h3>
<div class="data-viz">
<div class="data-item">
<div class="data-value">1.76</div>
<div class="data-label">2017年平均打算生育子女数</div>
</div>
<div class="data-item">
<div class="data-value">1.73</div>
<div class="data-label">2019年平均打算生育子女数</div>
</div>
<div class="data-item">
<div class="data-value">1.64</div>
<div class="data-label">2021年平均打算生育子女数</div>
</div>
</div>
<p>作为生育主体的<strong>90后和00后女性</strong>生育意愿尤其低：</p>
<ul>
<li>90后：1.54个</li>
<li>00后：1.48个</li>
</ul>
<h3>5.1 女性受教育程度与生育水平的关系</h3>
<p>2020年人口普查数据显示，15-64岁妇女按受教育程度分的平均生育孩子数：</p>
<div class="space-y-3">
<div>
<div class="flex justify-between mb-1">
<span>小学学历</span>
<span style="color: var(--accent-color);">1.97个</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 100%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>初中学历</span>
<span style="color: var(--accent-color);">1.55个</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 79%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>高中学历</span>
<span style="color: var(--accent-color);">0.94个</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 48%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>专科学历</span>
<span style="color: var(--accent-color);">0.78个</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 40%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>本科学历</span>
<span style="color: var(--accent-color);">0.63个</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 32%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>硕士学历</span>
<span style="color: var(--accent-color);">0.57个</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 29%;"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>博士学历</span>
<span style="color: var(--accent-color);">0.63个</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 32%;"></div>
</div>
</div>
</div>
<p class="mt-4"><em>💡 例外：博士学历女性的平均生育孩子数稍高于硕士，与本科学历持平。</em></p>
<h3>5.2 女性职业与生育水平的关系</h3>
<p>2020年人口普查数据显示，15-64岁妇女按职业区分的平均生育孩子数：</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>职业类型</th>
<th>平均生育孩子数</th>
</tr>
</thead>
<tbody>
<tr>
<td>农、林、牧、渔业生产人员</td>
<td><strong>1.91个</strong></td>
</tr>
<tr>
<td>制造业人员</td>
<td>1.55个</td>
</tr>
<tr>
<td>党政干部和企事业单位负责人</td>
<td>1.3个</td>
</tr>
<tr>
<td>第三产业服务人员</td>
<td>1.3个</td>
</tr>
<tr>
<td>办事人员</td>
<td>0.99个</td>
</tr>
<tr>
<td>专业技术人员</td>
<td>0.92个</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-4"><strong>规律：</strong>从事第一产业的女性生育率 > 第二产业 > 第三产业</p>
<h3>5.3 女性在职业发展中仍存在婚育方面的歧视</h3>
<div class="highlight-box">
<h4 style="margin-top: 0;">企业招聘现状</h4>
<p>一些企业认为女性结婚后要怀孕、休产假、哺乳孩子，会加重人力资源成本，因此在招聘中对处于生育年龄阶段的女性区别对待。</p>
</div>
<p>智联招聘《2022中国女性职场现状调查报告》显示：</p>
<ul>
<li><strong>61.2%</strong>的女性在求职中被问婚育情况（高于上一年的55.8%）</li>
<li><strong>38.3%</strong>的女性表示婚育影响职场前景</li>
</ul>
<div class="highlight-box">
<h4 style="margin-top: 0;">相关法规</h4>
<p>2019年2月，人力资源部等九部门联合印发《关于进一步规范招聘行为促进妇女就业的通知》规定：</p>
<ul>
<li>不得以性别为由限制妇女求职就业、拒绝录用妇女</li>
<li>不得询问妇女婚育情况</li>
<li>不得将妊娠测试作为入职体检项目</li>
<li>不得将限制生育作为录用条件</li>
</ul>
</div>
<h3>5.4 孩子数量对母亲就业几率和工资收入的影响</h3>
<p>根据华中科技大学社会学院2021年7月发表于《人口与经济》的研究：</p>
<div class="highlight-box">
<h4 style="margin-top: 0;">就业几率影响</h4>
<ul>
<li>有<strong>一个孩子</strong>使得妻子就业几率下降约<strong>6.6%</strong></li>
<li>有<strong>两个孩子</strong>其就业几率再次下降<strong>9.3%</strong>（与一孩状态相比）</li>
<li>生育对<strong>丈夫就业几率的影响不显著</strong></li>
</ul>
</div>
<div class="data-viz">
<div class="data-item">
<div class="data-value">-7%</div>
<div class="data-label">一孩母亲小时工资率下降</div>
</div>
<div class="data-item">
<div class="data-value">-16.8%</div>
<div class="data-label">二孩母亲小时工资率下降</div>
</div>
<div class="data-item">
<div class="data-value">-10%</div>
<div class="data-label">每多一个子女女性工资率下降</div>
</div>
</div>
<h4>家庭收入影响</h4>
<ul>
<li>有一孩的家庭劳动力市场总收入下降约<strong>5.6%</strong></li>
<li>有二孩的家庭其劳动力市场总收入再次下降约<strong>7.1%</strong></li>
</ul>
<h3>5.5 社会层面女性就业率与生育水平的关系</h3>
<div class="highlight-box">
<h4 style="margin-top: 0;">核心观点</h4>
<p>女性的职业发展与生育需求的矛盾可以通过福利政策得到缓解。鼓励生育并不必然带来女性职场地位的下降。</p>
</div>
<h4>U型曲线关系</h4>
<p>女性地位和生育率的关系不是单纯的线性关系，而是呈现U型曲线：</p>
<ol>
<li><strong>传统社会（左侧）：</strong>女性地位低，家庭是其主要活动领域 → 生育水平高</li>
<li><strong>发展中阶段（底部）：</strong>女性地位提高，参加工作比例增加 → 工作与家庭冲突 → 生育率下降</li>
<li><strong>高度发达阶段（右侧）：</strong>女性地位和经济独立性非常高 + 增加生育福利 → 生育率反弹</li>
</ol>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-6">
<div class="stat-card">
<h4 style="margin: 0 0 0.5rem 0;">低收入国家</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">女性地位低<br>生育率高</p>
</div>
<div class="stat-card">
<h4 style="margin: 0 0 0.5rem 0;">日本、韩国</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">中游水平<br>生育率很低</p>
</div>
<div class="stat-card">
<h4 style="margin: 0 0 0.5rem 0;">北欧国家</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">女性地位高+福利好<br>生育率高
</p>
</div>
</div>
<h4>成功案例：瑞典</h4>
<ul>
<li>当今世界公认的性别平等最成功的国家之一</li>
<li>议会中女议员比例约占<strong>40%</strong></li>
<li>1980年代颁布《同居法》，承认同居关系的法律效力</li>
<li>近年来生育率达到<strong>1.9</strong>，在欧洲国家中几乎是最高的</li>
</ul>
<h4>成功案例：冰岛</h4>
<ul>
<li>欧洲生育率最高的国家之一，平均每名妇女育有<strong>两个孩子</strong></li>
<li>女性参加工作比例超过<strong>70%</strong></li>
<li><strong>90%</strong>的冰岛儿童能进入由国家出资的公立幼儿园</li>
<li><strong>70%</strong>的父亲选择休三个月以上的产假，享受80%的工资</li>
</ul>
<div class="highlight-box mt-6">
<p><strong>结论：</strong>中国目前正处于U型曲线的底部，生育成本很高，女性的职业发展机会成本更高。需要通过福利减负，提高女性地位，从而走出U型曲线。</p>
</div>
</section>
<!-- 政策建议 -->
<section id="policy" class="section-card animate-fade-in">
<h2>💡 6. 政策建议</h2>
<p>报告提出<strong>十项生育减负政策建议</strong>，旨在降低职业女性的育儿负担和机会成本：</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
<div class="stat-card">
<div class="text-3xl mb-2">💰</div>
<h4 style="margin: 0 0 0.5rem 0;">1. 现金补贴</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">
二孩家庭每月1000元/孩<br>三孩及以上每月2000元/孩</p>
</div>
<div class="stat-card">
<div class="text-3xl mb-2">📉</div>
<h4 style="margin: 0 0 0.5rem 0;">2. 个税和社保减免</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">二孩家庭减半<br>三孩以上家庭全免
</p>
</div>
<div class="stat-card">
<div class="text-3xl mb-2">🏠</div>
<h4 style="margin: 0 0 0.5rem 0;">3. 购房补贴</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">
二孩返还50%房贷利息<br>三孩全部补贴返还</p>
</div>
<div class="stat-card">
<div class="text-3xl mb-2">🏫</div>
<h4 style="margin: 0 0 0.5rem 0;">4. 增建托儿所</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">
0-3岁入托率提高到50%<br>建设至少10万个托儿所</p>
</div>
<div class="stat-card">
<div class="text-3xl mb-2">👨👩👧</div>
<h4 style="margin: 0 0 0.5rem 0;">5. 增加产假天数</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">
父母双方产假天数增加<br>实现男女相对平等</p>
</div>
<div class="stat-card">
<div class="text-3xl mb-2">💻</div>
<h4 style="margin: 0 0 0.5rem 0;">6. 提倡灵活办公</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">
弹性工作时间和地点<br>孕妇和哺乳期女性可在家办公</p>
</div>
<div class="stat-card">
<div class="text-3xl mb-2">👩🍼</div>
<h4 style="margin: 0 0 0.5rem 0;">7. 引进外籍保姆</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">扩大家政服务供给<br>降低育儿成本
</p>
</div>
<div class="stat-card">
<div class="text-3xl mb-2">🧬</div>
<h4 style="margin: 0 0 0.5rem 0;">8. 扶植辅助生育技术</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">支持辅助生育<br>保障生育权益
</p>
</div>
<div class="stat-card">
<div class="text-3xl mb-2">👩👧</div>
<h4 style="margin: 0 0 0.5rem 0;">9. 保障单亲家庭权益</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">完善单亲家庭<br>社会保障体系
</p>
</div>
<div class="stat-card">
<div class="text-3xl mb-2">📚</div>
<h4 style="margin: 0 0 0.5rem 0;">10. 教育改革</h4>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">
普及本科教育<br>减轻升学压力，缩短学制</p>
</div>
</div>
<h3>重点措施详解</h3>
<h4>🏫 增建托儿所</h4>
<p>对女性职业生涯影响最大的是孩子的0-3岁时期。</p>
<div class="highlight-box">
<p><strong>现状：</strong>我国3岁以下婴幼儿的入托率仅为<strong>5.5%</strong>，供给和需求缺口巨大</p>
<p><strong>对比：</strong>法国3岁以下小孩入托率达到<strong>56.3%</strong></p>
<p><strong>目标：</strong>把0-3岁婴幼儿的入托率提高到<strong>50%</strong>左右，需要兴建至少<strong>10万个托儿所</strong></p>
</div>
<h4>👨👩👧 提供男女平等的育产假</h4>
<p>如果仅仅延长女性育产假，容易导致用人单位不愿意招聘女性，加剧性别歧视。</p>
<div class="highlight-box">
<h4 style="margin-top: 0;">瑞典经验</h4>
<ul>
<li>父母一起可获得<strong>480天</strong>带薪育儿假</li>
<li>父母双方各享有<strong>90天</strong>不能转让给对方的育儿假</li>
<li>确保公平和父母共同承担育儿责任</li>
<li>生育率在<strong>1.8</strong>左右，在欧洲国家中仅次于法国</li>
</ul>
</div>
<p><strong>核心理念：</strong>通过法律规定父亲的家庭责任，促进男女两性职场机会平等和家务劳动责任分担，消除就业市场性别歧视。</p>
<h4>💻 提倡灵活办公</h4>
<p>对于有条件的企业，可实行弹性办公和在家办公，允许员工灵活安排工作时间和地点。</p>
<div class="highlight-box">
<h4 style="margin-top: 0;">携程实践效果</h4>
<ul>
<li>工作效率没有下降</li>
<li>员工满意度大幅提升</li>
<li>减少通勤拥堵</li>
<li>有利于环境保护、家庭和谐和缓解高房价</li>
<li>特别受到刚生孩子的女性员工欢迎</li>
</ul>
</div>
<p><strong>核心价值：</strong>女性可节省通勤时间陪伴小孩，男性员工也可更多参与育儿和家务，缓解职业女性焦虑，提高育龄女性的生育意愿。</p>
</section>
<!-- 结论 -->
<section id="conclusion" class="section-card animate-fade-in">
<h2>📝 结论</h2>
<div class="highlight-box">
<p style="font-size: 1.125rem; line-height: 1.75;">
中国当前的女性地位和职场发展仍有较大的提高空间，也需要更多的政策加以扶持。从本质上看，<strong>鼓励生育的政策与提升女性地位并不相悖</strong>。
</p>
</div>
<h3>国际经验借鉴</h3>
<p>很多西欧和北欧国家鼓励生育的家庭福利政策与性别平权成功经验值得中国借鉴：</p>
<ul>
<li>✅ 普惠的幼托服务</li>
<li>✅ 男女平等的产假</li>
<li>✅ 保障单亲家庭权益</li>
<li>✅ 开放辅助生育技术</li>
</ul>
<h3>观念转变</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
<div class="highlight-box">
<h4 style="margin-top: 0;">❌ 摒弃传统观念</h4>
<p>打破"男主外女主内"的传统性别分工思维</p>
</div>
<div class="highlight-box">
<h4 style="margin-top: 0;">✅ 建立新观念</h4>
<p>男性应该更多承担家务与育儿责任，根据具体情况形成合理分工</p>
</div>
</div>
<h3>家庭平权</h3>
<ul>
<li>子女的冠姓权上实现性别平权</li>
<li>提倡子女随母姓</li>
<li>家庭分工根据实际情况而非固有性别观念</li>
</ul>
<div class="highlight-box mt-6"
style="background: linear-gradient(135deg, var(--highlight-bg) 0%, var(--bg-tertiary) 100%); border: none; padding: 2rem;">
<h3 style="margin-top: 0; text-align: center;">核心结论</h3>
<p style="font-size: 1.125rem; text-align: center; margin-bottom: 0;">
为实现女性地位的提升与两性和谐发展，社会除了必须提供充分的福利来缓解女性家庭与事业的冲突外，还要及时调整男女分工和择偶传统观念，让男性更多地参与家务和养育孩子。<br><br>
<strong
style="color: var(--accent-color); font-size: 1.25rem;">只有在一个女性友好的社会中，才能实现人口与经济的发展目标。</strong>
</p>
</div>
</section>
<!-- 参考文献 -->
<section class="section-card animate-fade-in">
<h2>📖 参考文献</h2>
<ol style="font-size: 0.875rem; line-height: 1.75;">
<li>新中国70年妇女事业的发展与进步 - 国务院新闻办公室</li>
<li>中国妇女发展纲要（2021－2030年）</li>
<li>智联招聘. 2022中国女性职场现状调查报告</li>
<li>BOSS直聘研究院. 2021年中国职场性别薪酬差异报告</li>
<li>澎湃新闻. 二孩妈比一孩妈就业几率低一成，中产家庭压力更大</li>
<li>世界经济论坛. Global Gender Gap Report 2022</li>
<li>OECD. Women in politics</li>
<li>梁建章、任泽平等. 中国人口预测报告2023版</li>
<li>茅倬彦. 实施三孩政策完善配套措施</li>
<li>中国人民大学等. 中国大学生婚育观调查报告，2022</li>
<li>张樨樨、杜玉帆. "全面二孩"政策背景下生育对城镇女性职业中断的影响研究. 华东师范大学学报哲学社会科学版，2019</li>
<li>张樨樨、王利华. "全面二孩"政策对城镇女性就业质量的影响. 上海大学学报(社会科学版)，2017</li>
<li>Drasch, K. Educational Attainment and Family-Related Employment Interruptions in Germany.
European Sociological Review, 2013</li>
<li>Bächmann, A.C. and Gatermann, D. The Duration of Family-Related Employment Interruptions.
Journal for Labour Market Research, 2017</li>
<li>McDonald, P. Gender equity in theories of fertility transition. Population and development
review, 2000</li>
</ol>
</section>
<!-- 页脚 -->
<footer class="section-card" style="text-align: center; background-color: var(--bg-tertiary);">
<p style="margin-bottom: 0.5rem;"><strong>中国女性职业发展报告 2023版</strong></p>
<p style="margin-bottom: 0.5rem; font-size: 0.875rem;">育娲人口研究 | 2023年2月</p>
<p style="margin-bottom: 0; font-size: 0.875rem; color: var(--text-tertiary);">
作者：梁建章、任泽平、黄文政、何亚福、於嘉、鲍笛
</p>
</footer>
</main>
</div>
</div>
<!-- JavaScript -->
<script>
// 主题切换功能
const themeToggle = document.getElementById('themeToggle');
const sunIcon = document.getElementById('sunIcon');
const moonIcon = document.getElementById('moonIcon');
const html = document.documentElement;
// 检查系统主题偏好
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// 初始化主题
function initTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
} else if (prefersDark) {
setTheme('dark');
} else {
setTheme('light');
}
}
// 设置主题
function setTheme(theme) {
if (theme === 'dark') {
html.classList.add('dark');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
} else {
html.classList.remove('dark');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
}
localStorage.setItem('theme', theme);
}
// 主题切换事件
themeToggle.addEventListener('click', () => {
const currentTheme = html.classList.contains('dark') ? 'dark' : 'light';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
});
// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
setTheme(e.matches ? 'dark' : 'light');
}
});
// 初始化主题
initTheme();
// 目录导航功能
const tocItems = document.querySelectorAll('.toc-item');
const sections = document.querySelectorAll('section[id]');
// 点击目录项滚动到对应部分
tocItems.forEach(item => {
item.addEventListener('click', () => {
const sectionId = item.getAttribute('data-section');
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// 滚动时高亮当前目录项
function highlightTOC() {
let currentSection = '';
const scrollPosition = window.scrollY + 100;
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
currentSection = section.getAttribute('id');
}
});
tocItems.forEach(item => {
item.classList.remove('active');
if (item.getAttribute('data-section') === currentSection) {
item.classList.add('active');
}
});
}
// 滚动事件监听（带节流）
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(() => {
highlightTOC();
ticking = false;
});
ticking = true;
}
});
// 初始化高亮
highlightTOC();
// 动画效果
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// 观察所有卡片
document.querySelectorAll('.section-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
// 打印当前页面
function printReport() {
window.print();
}
// 键盘快捷键
document.addEventListener('keydown', (e) => {
// Ctrl/Cmd + P: 打印
if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
e.preventDefault();
printReport();
}
// Ctrl/Cmd + D: 切换主题
if ((e.ctrlKey || e.metaKey) && e.key === 'd') {
e.preventDefault();
themeToggle.click();
}
});
// 平滑滚动到顶部功能
let lastScrollTop = 0;
const header = document.querySelector('header');
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 添加阴影效果
if (scrollTop > 0) {
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
} else {
header.style.boxShadow = 'none';
}
lastScrollTop = scrollTop;
});
console.log('%c中国女性职业发展报告 2023版', 'color: #5e6ad2; font-size: 20px; font-weight: bold;');
console.log('%c育娲人口研究', 'color: #6b7280; font-size: 14px;');
</script>
</body>
</html把这个代码，放到txt文件中，把后缀改成html，就可以在浏览器中查看。
到此展示了一个pdf文件（文字版本的信息），如何通过cursor来生成网页，让枯燥的文字变成生动有趣的可视化页面。
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
1
0- 0
已为社区贡献6条内容
所有评论(0)