Hugging Face's logo

Spaces:
mistpe
/
wine
Running

App Files Community
wine / index6.html
mistpe's picture
mistpe
Rename index.html to index6.html
265145b verified
raw
history blame contribute delete
29.1 kB
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>绍兴黄酒产业振兴战略规划</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
body {
 margin: 0;
 padding: 0;
 overflow: hidden;
 font-family: "Microsoft YaHei", sans-serif;
 background: linear-gradient(135deg, #1a1a1a 0%, #363636 100%);
 color: #fff;
 cursor: pointer;
}
#particles-js {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
}
.slide {
 width: 100vw;
 height: 100vh;
 display: none;
 padding: 40px;
 box-sizing: border-box;
 position: relative;
 z-index: 2;
 background: rgba(0, 0, 0, 0.6);
 backdrop-filter: blur(10px);
}
.slide.active {
 display: block;
 animation: fadeIn 0.5s ease;
}
.title {
 font-size: 42px;
 text-align: center;
 margin-bottom: 40px;
 background: linear-gradient(45deg, #FFD700, #FFA500);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.card-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 20px;
 max-width: 1200px;
 margin: 0 auto;
}
.card {
 background: rgba(255, 255, 255, 0.1);
 border-radius: 15px;
 padding: 25px;
 backdrop-filter: blur(5px);
 border: 1px solid rgba(255, 215, 0, 0.2);
 transition: transform 0.3s ease;
}
.card:hover {
 transform: translateY(-5px);
 box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
}
.card-icon {
 font-size: 42px;
 color: #FFD700;
 margin-bottom: 20px;
 text-align: center;
}
.card-title {
 font-size: 24px;
 color: #FFD700;
 margin-bottom: 15px;
 font-weight: bold;
}
.card-content {
 font-size: 24px;
 line-height: 1.8;
}
.chart-container {
 width: 100%;
 max-width: 800px;
 margin: 20px auto;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 15px;
 padding: 20px;
 font-size: 16px;
}
.progress-bar {
 position: fixed;
 bottom: 0;
 left: 0;
 height: 4px;
 background: #FFD700;
 transition: width 0.3s ease;
 z-index: 3;
}
.page-indicator {
 position: fixed;
 bottom: 20px;
 right: 20px;
 font-size: 18px;
 color: #FFD700;
 z-index: 3;
 background: rgba(0, 0, 0, 0.5);
 padding: 10px 20px;
 border-radius: 20px;
}
.grid-layout {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
 max-width: 1200px;
 margin: 0 auto;
}
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}
.icon-list {
 list-style: none;
 padding: 0;
}
.icon-list li {
 display: flex;
 align-items: center;
 margin-bottom: 18px;
 font-size: 22px;
}
.icon-list i {
 color: #FFD700;
 margin-right: 12px;
 font-size: 22px;
}
/* 数据卡片特殊样式 */
.data-number {
 text-align: center;
 font-size: 42px !important;
 color: #FFD700;
 margin: 15px 0;
}
.card .data-number + div {
 font-size: 20px;
 text-align: center;
}
/* 特殊调整社会文化效益卡片 */
.card .icon-list li {
 font-size: 20px;
 padding: 8px 0;
}
/* 首页标题特殊样式 */
.slide:first-child .title {
 font-size: 56px;
 margin-top: 50px;
}
/* 子标题样式 */
.slide .subtitle {
 text-align: center;
 font-size: 32px;
 margin: 30px 0;
}
/* 结束页特殊样式 */
.slide:last-child .card {
 display: inline-block;
 max-width: 600px;
}
.slide:last-child .card p {
 font-size: 24px;
 margin: 20px 0;
}
.slide:last-child .card p:last-child {
 font-size: 20px;
}
.fullscreen-control {
 position: fixed;
 top: 20px;
 right: 20px;
 z-index: 1000;
}
.control-btn {
 background: rgba(255, 215, 0, 0.2);
 border: 1px solid rgba(255, 215, 0, 0.5);
 color: #FFD700;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.3s ease;
}
.control-btn:hover {
 background: rgba(255, 215, 0, 0.4);
 transform: scale(1.1);
}
.control-btn i {
 font-size: 18px;
}
</style>
</head>
<body>
 <div id="particles-js"></div>
<div class="fullscreen-control">
 <button id="fullscreenBtn" class="control-btn"><i class="fas fa-expand"></i></button>
</div>
 <!-- 封面页 -->
 <div class="slide active">
 <div class="title" style="font-size: 56px; margin-top: 50px;">绍兴黄酒产业振兴战略规划</div>
 <div style="text-align: center; font-size: 32px; margin: 30px 0;">
 ——传统产业的创新发展之路
 </div>
 <div class="card-container" style="margin-top: 50px;">
 <div class="card">
 <div class="card-icon"><i class="fas fa-history"></i></div>
 <div class="data-number" style="text-align: center; font-size: 36px; color: #FFD700;">1000+</div>
 <div style="text-align: center;">年历史传承</div>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-chart-line"></i></div>
 <div class="data-number" style="text-align: center; font-size: 36px; color: #FFD700;">100+</div>
 <div style="text-align: center;">亿年产值</div>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-building"></i></div>
 <div class="data-number" style="text-align: center; font-size: 36px; color: #FFD700;">50+</div>
 <div style="text-align: center;">家重点企业</div>
 </div>
 </div>
<div style="text-align: center; font-size: 28px; margin: 30px 0;">
 讲述人：王威媚
 </div>
 </div>
<!-- 目录页 -->
<div class="slide">
 <div class="title">目录</div>
 <div class="card-container">
 <div class="card">
 <div class="card-icon"><i class="fas fa-chart-bar"></i></div>
 <div class="card-title">现状与问题</div>
 <ul class="icon-list">
 <li><i class="fas fa-check"></i>产业现状分析</li>
 <li><i class="fas fa-exclamation-circle"></i>存在问题剖析</li>
 <li><i class="fas fa-search"></i>问题成因分析</li>
 </ul>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-road"></i></div>
 <div class="card-title">战略规划</div>
 <ul class="icon-list">
 <li><i class="fas fa-bullseye"></i>振兴战略规划</li>
 <li><i class="fas fa-tasks"></i>具体实施方案</li>
 <li><i class="fas fa-chart-line"></i>预期效果评估</li>
 </ul>
 </div>
 </div>
</div>
<!-- 产业现状分析 -->
 <div class="slide">
 <div class="title">产业现状分析</div>
 <div class="grid-layout">
 <div class="card">
 <div class="card-icon"><i class="fas fa-industry"></i></div>
 <div class="card-title">产业规模</div>
 <ul class="icon-list">
 <li><i class="fas fa-check-circle"></i>浙江省历史经典产业</li>
 <li><i class="fas fa-clock"></i>千年酿造历史文化传承</li>
 <li><i class="fas fa-dollar-sign"></i>年产值超过百亿规模</li>
 </ul>
 </div>
 <div class="chart-container">
 <canvas id="industryChart"></canvas>
 </div>
 </div>
 </div>
<!-- 问题剖析 -->
 <div class="slide">
 <div class="title">存在问题剖析</div>
 <div class="card-container">
 <div class="card">
 <div class="card-icon"><i class="fas fa-shopping-cart"></i></div>
 <div class="card-title">市场营销问题</div>
 <ul class="icon-list">
 <li><i class="fas fa-exclamation-circle"></i>产品结构单一</li>
 <li><i class="fas fa-store-alt"></i>营销渠道传统</li>
 </ul>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-cogs"></i></div>
 <div class="card-title">生产技术问题</div>
 <ul class="icon-list">
 <li><i class="fas fa-exclamation-circle"></i>标准化程度不高</li>
 <li><i class="fas fa-industry"></i>现代化需求差距</li>
 </ul>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-trademark"></i></div>
 <div class="card-title">品牌建设问题</div>
 <ul class="icon-list">
 <li><i class="fas fa-exclamation-circle"></i>年轻化转型不足</li>
 <li><i class="fas fa-globe"></i>国际影响力有限</li>
 </ul>
 </div>
 </div>
 </div>
<!-- 问题成因分析 -->
<div class="slide">
 <div class="title">问题成因分析</div>
 <div class="grid-layout">
 <div class="chart-container">
 <canvas id="problemChart"></canvas>
 </div>
 <div class="card-container" style="grid-template-columns: 1fr;width:350px;">
 <div class="card">
 <div class="card-icon"><i class="fas fa-lightbulb"></i></div>
 <div class="card-title">主要成因</div>
 <ul class="icon-list">
 <li><i class="fas fa-flask"></i>研发投入比例偏低 (占比<3%)</li>
 <li><i class="fas fa-users"></i>高端人才储备不足</li>
 <li><i class="fas fa-link"></i>产业链整合度不高</li>
 </ul>
 </div>
 </div>
 </div>
</div>
<!-- 振兴战略规划 -->
<div class="slide">
 <div class="title">振兴战略规划</div>
 <div class="card-container">
 <div class="card">
 <div class="card-icon"><i class="fas fa-flag"></i></div>
 <div class="card-title">战略目标</div>
 <div class="chart-container" style="height: 300px;width:300px;">
 <canvas id="targetChart"></canvas>
 </div>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-compass"></i></div>
 <div class="card-title">发展方向</div>
 <ul class="icon-list">
 <li><i class="fas fa-digital-tachograph"></i>数字化转型</li>
 <li><i class="fas fa-globe-asia"></i>国际化布局</li>
 <li><i class="fas fa-seedling"></i>生态化建设</li>
 </ul>
 </div>
 </div>
</div>
<!-- 实施方案（产业升级） -->
<div class="slide">
 <div class="title">实施方案 - 产业升级</div>
 <div class="grid-layout">
 <div class="card">
 <div class="card-icon"><i class="fas fa-industry"></i></div>
 <div class="card-title">产业集聚工程</div>
 <div class="chart-container" style="height: 250px;width:380px;">
 <canvas id="industrialChart"></canvas>
 </div>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-award"></i></div>
 <div class="card-title">品质提升工程</div>
 <ul class="icon-list">
 <li><i class="fas fa-shield-alt"></i>原产地保护体系</li>
 <li><i class="fas fa-certificate"></i>标准化体系建设</li>
 <li><i class="fas fa-sync"></i>工艺创新升级</li>
 </ul>
 </div>
 </div>
</div>
<!-- 实施方案（创新人才） -->
<div class="slide">
 <div class="title">实施方案 - 创新人才</div>
 <div class="card-container">
 <div class="card">
 <div class="card-icon"><i class="fas fa-lightbulb"></i></div>
 <div class="card-title">创新驱动</div>
 <div class="chart-container" style="height: 250px;width:400px;">
 <canvas id="innovationChart"></canvas>
 </div>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-user-graduate"></i></div>
 <div class="card-title">人才培育</div>
 <ul class="icon-list">
 <li><i class="fas fa-user-tie"></i>绍兴工匠计划</li>
 <li><i class="fas fa-hands"></i>技艺传承体系</li>
 <li><i class="fas fa-graduation-cap"></i>人才培训体系</li>
 </ul>
 </div>
 </div>
</div>
<!-- 实施方案（市场文化） -->
<div class="slide">
 <div class="title">实施方案 - 市场文化</div>
 <div class="grid-layout">
 <div class="card">
 <div class="card-icon"><i class="fas fa-store"></i></div>
 <div class="card-title">市场开拓</div>
 <ul class="icon-list">
 <li><i class="fas fa-ad"></i>品牌整合营销</li>
 <li><i class="fas fa-globe"></i>国际营销网络</li>
 <li><i class="fas fa-shopping-bag"></i>新零售布局</li>
 </ul>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-culture"></i></div>
 <div class="card-title">文化传承</div>
 <div class="chart-container" style="height: 300px;">
 <canvas id="cultureChart"></canvas>
 </div>
 </div>
 </div>
</div>
<!-- 政策支持 -->
<div class="slide">
 <div class="title">政策支持措施</div>
 <div class="card-container">
 <div class="card">
 <div class="card-icon"><i class="fas fa-money-bill-wave"></i></div>
 <div class="card-title">财政支持</div>
 <ul class="icon-list">
 <li><i class="fas fa-wallet"></i>产业发展专项资金</li>
 <li><i class="fas fa-hand-holding-usd"></i>研发补助支持</li>
 </ul>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-landmark"></i></div>
 <div class="card-title">金融支持</div>
 <ul class="icon-list">
 <li><i class="fas fa-piggy-bank"></i>创新金融产品</li>
 <li><i class="fas fa-shield-alt"></i>融资担保体系</li>
 </ul>
 </div>
 <div class="card">
 <div class="card-icon"><i class="fas fa-users-cog"></i></div>
 <div class="card-title">人才支持</div>
 <ul class="icon-list">
 <li><i class="fas fa-user-plus"></i>人才引进计划</li>
 <li><i class="fas fa-medal"></i>人才激励机制</li>
 </ul>
 </div>
 </div>
</div>
<!-- 预期效果 -->
<div class="slide">
 <div class="title">预期效果评估</div>
 <div class="grid-layout">
 <div class="card">
 <div class="card-icon"><i class="fas fa-chart-line"></i></div>
 <div class="card-title">经济效益</div>
 <div class="chart-container" style="height: 300px;">
 <canvas id="economicChart"></canvas>
 </div>
 </div>
 <div class="card-container" style="grid-template-columns: 1fr;">
 <div class="card">
 <div class="card-icon"><i class="fas fa-hands-helping"></i></div>
 <div class="card-title">社会文化效益</div>
 <ul class="icon-list">
 <li><i class="fas fa-users"></i>带动就业增长 5000+ 人</li>
 <li><i class="fas fa-handshake"></i>促进区域协同发展</li>
 <li><i class="fas fa-landmark"></i>传统文化传承创新</li>
 <li><i class="fas fa-star"></i>城市品牌价值提升</li>
 </ul>
 </div>
 </div>
 </div>
</div>
<!-- 结束页 -->
<div class="slide">
 <div class="title">感谢聆听</div>
 <div style="text-align: center; margin-top: 100px;">
 <div class="card" style="display: inline-block; max-width: 600px;">
 <div class="card-icon"><i class="fas fa-wine-bottle"></i></div>
 <p style="font-size: 24px; margin: 20px 0;">共同推进绍兴黄酒产业振兴</p>
 <p style="font-size: 20px;">助力浙江高质量发展建设共同富裕示范区</p>
 </div>
 </div>
</div>
<div class="progress-bar"></div>
 <div class="page-indicator">
 <span id="current-page">1</span> / <span id="total-pages">12</span>
 </div>
<script>
 // 初始化图表
 function initCharts() {
 const ctx = document.getElementById('industryChart').getContext('2d');
 new Chart(ctx, {
 type: 'line',
 data: {
 labels: ['2019', '2020', '2021', '2022', '2023'],
 datasets: [{
 label: '产业规模增长（亿元）',
 data: [85, 92, 98, 105, 115],
 borderColor: '#FFD700',
 backgroundColor: 'rgba(255, 215, 0, 0.1)',
 tension: 0.4
 }]
 },
 options: {
 responsive: true,
 plugins: {
 legend: {
 labels: {
 color: '#fff'
 }
 }
 },
 scales: {
 y: {
 ticks: {
 color: '#fff'
 },
 grid: {
 color: 'rgba(255, 255, 255, 0.1)'
 }
 },
 x: {
 ticks: {
 color: '#fff'
 },
 grid: {
 color: 'rgba(255, 255, 255, 0.1)'
 }
 }
 }
 }
 });
 }
 // 初始化粒子效果
 particlesJS('particles-js', {
 particles: {
 number: { value: 80, density: { enable: true, value_area: 800 } },
 color: { value: "#FFD700" },
 shape: { type: "circle" },
 opacity: { value: 0.5, random: false },
 size: { value: 3, random: true },
 line_linked: {
 enable: true,
 distance: 150,
 color: "#FFD700",
 opacity: 0.4,
 width: 1
 },
 move: {
 enable: true,
 speed: 2,
 direction: "none",
 random: false,
 straight: false,
 out_mode: "out",
 bounce: false,
 }
 },
 interactivity: {
 detect_on: "canvas",
 events: {
 onhover: { enable: true, mode: "repulse" },
 onclick: { enable: true, mode: "push" },
 resize: true
 },
 },
 retina_detect: true
 });
 let currentSlide = 0;
 const slides = document.querySelectorAll('.slide');
 const totalSlides = slides.length;
 const currentPageElement = document.getElementById('current-page');
 const totalPagesElement = document.getElementById('total-pages');
 const progressBar = document.querySelector('.progress-bar');
 function updateProgress() {
 const progress = ((currentSlide + 1) / totalSlides) * 100;
 progressBar.style.width = `${progress}%`;
 }
function initAllCharts() {
 const commonOptions = {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 labels: { color: '#fff' },
 position: 'bottom'
 }
 },
 scales: {
 y: {
 ticks: { color: '#fff' },
 grid: {
color: 'rgba(255, 255, 255, 0.2)', // 改为白色网格线
 borderColor: '#fff' // 坐标轴颜色改为白色
 }
 },
 x: {
 ticks: { color: '#fff' },
 grid: {
 color: 'rgba(255, 255, 255, 0.2)', // 改为白色网格线
 borderColor: '#fff' // 坐标轴颜色改为白色
 }
 },
 r: {
 ticks: { color: '#fff' },
 grid: {
color: 'rgba(255, 255, 255, 0.2)', // 雷达图网格线改为白色
 circular: true
 },
 angleLines: {
 color: 'rgba(255, 255, 255, 0.2)' // 雷达图角度线改为白色
 },
 pointLabels: {
 color: '#fff' // 雷达图标签改为白色
 }
 }
 }
 };
 // 问题成因分析饼图
 const problemCtx = document.getElementById('problemChart');
 problemCtx.style.height = '300px';
 new Chart(problemCtx, {
 type: 'pie',
 data: {
 labels: ['研发投入不足', '人才储备不足', '产业协同不足'],
 datasets: [{
 data: [35, 40, 25],
 backgroundColor: [
 'rgba(255, 215, 0, 0.7)',
 'rgba(255, 165, 0, 0.7)',
 'rgba(218, 165, 32, 0.7)'
 ],
 borderColor: '#fff', // 边框改为白色
 borderWidth: 1
 }]
 },
 options: {
 ...commonOptions,
 }
 });
 // 战略目标雷达图
 const targetCtx = document.getElementById('targetChart');
 targetCtx.style.height = '250px';
 new Chart(targetCtx, {
 type: 'radar',
 data: {
 labels: ['产业规模', '创新能力', '品牌价值', '国际化', '数字化'],
 datasets: [{
 label: '目标值',
 data: [90, 85, 88, 80, 85],
 backgroundColor: 'rgba(255, 215, 0, 0.2)',
 borderColor: '#FFD700',
 pointBackgroundColor: '#fff', // 数据点改为白色
 pointBorderColor: '#FFD700'
 }]
 },
 options: {
 ...commonOptions,
 scales: {
 r: {
 ticks: { color: '#fff' },
 grid: {
color: 'rgba(255, 255, 255, 0.2)',
 circular: true
 },
 angleLines: {
 color: 'rgba(255, 255, 255, 0.2)'
 },
 pointLabels: {
 color: '#fff',
 font: {
 size: 12
 }
 }
 }
 }
 }
 });
 // 产业集聚工程图表
 const industrialCtx = document.getElementById('industrialChart');
 industrialCtx.style.height = '200px';
 new Chart(industrialCtx, {
 type: 'bar',
 data: {
 labels: ['2024', '2025', '2026'],
 datasets: [{
 label: '产业园区规模（平方公里）',
 data: [5, 8, 12],
 backgroundColor: 'rgba(255, 215, 0, 0.6)',
 borderColor: '#fff', // 边框改为白色
 borderWidth: 1
 }]
 },
 options: commonOptions
 });
 // 创新投入图表
 const innovationCtx = document.getElementById('innovationChart');
 innovationCtx.style.height = '200px';
 new Chart(innovationCtx, {
 type: 'line',
 data: {
 labels: ['2024', '2025', '2026', '2027'],
 datasets: [{
 label: '研发投入比例（%）',
 data: [3, 4.5, 6, 8],
 borderColor: '#FFD700',
 tension: 0.4,
 pointBackgroundColor: '#fff', // 数据点改为白色
 pointBorderColor: '#FFD700',
 borderWidth: 2
 }]
 },
 options: commonOptions
 });
 // 文化传承发展图表
 const cultureCtx = document.getElementById('cultureChart');
 cultureCtx.style.height = '200px';
 new Chart(cultureCtx, {
 type: 'bar',
 data: {
 labels: ['文化体验中心', '传承基地', '旅游景点'],
 datasets: [{
 label: '规划建设数量',
 data: [5, 3, 8],
 backgroundColor: 'rgba(255, 215, 0, 0.6)',
 borderColor: '#fff', // 边框改为白色
 borderWidth: 1
 }]
 },
 options: commonOptions
 });
 // 经济效益预测图
 const economicCtx = document.getElementById('economicChart');
 economicCtx.style.height = '200px';
 new Chart(economicCtx, {
 type: 'line',
 data: {
 labels: ['2024', '2025', '2026', '2027', '2028'],
 datasets: [{
 label: '产业规模预测（亿元）',
 data: [120, 150, 185, 230, 300],
 borderColor: '#FFD700',
 tension: 0.4,
 pointBackgroundColor: '#fff', // 数据点改为白色
 pointBorderColor: '#FFD700',
 borderWidth: 2
 }]
 },
 options: commonOptions
 });
}
 // 在原有的showSlide函数中添加新图表的初始化
// 修改showSlide函数来初始化所有相关页面的图表
function showSlide(index) {
 slides[currentSlide].classList.remove('active');
 currentSlide = index;
 slides[currentSlide].classList.add('active');
 currentPageElement.textContent = currentSlide + 1;
 updateProgress();
// 根据不同页面初始化相应的图表
 switch(currentSlide) {
 case 2: // 产业现状页
 setTimeout(initCharts, 100);
 break;
 case 4: // 问题成因分析页
 case 5: // 振兴战略规划页
 case 6: // 实施方案（产业升级）页
 case 7: // 实施方案（创新人才）页
 case 8: // 实施方案（市场文化）页
 case 10: // 预期效果页
 setTimeout(() => initAllCharts(), 100);
 break;
 }
}
 function nextSlide() {
 if (currentSlide < totalSlides - 1) {
 showSlide(currentSlide + 1);
 }
 }
 function previousSlide() {
 if (currentSlide > 0) {
 showSlide(currentSlide - 1);
 }
 }
 // 点击事件监听
 document.addEventListener('click', (e) => {
 // 避免点击导航按钮时触发
 if (!e.target.closest('.nav-buttons')) {
 nextSlide();
 }
 });
// 获取全屏按钮元素
const fullscreenBtn = document.getElementById('fullscreenBtn');
// 键盘事件监听，支持上下键
document.addEventListener('keydown', (e) => {
 switch(e.key) {
 case 'ArrowRight':
 case 'ArrowDown':
 case 'Space':
 nextSlide();
 break;
 case 'ArrowLeft':
 case 'ArrowUp':
 previousSlide();
 break;
 }
});
// 全屏功能
function toggleFullScreen() {
 if (!document.fullscreenElement) {
 document.documentElement.requestFullscreen().catch(err => {
 console.log(`Error attempting to enable fullscreen: ${err.message}`);
 });
 fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
 } else {
 if (document.exitFullscreen) {
 document.exitFullscreen();
 fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
 }
 }
}
fullscreenBtn.addEventListener('click', toggleFullScreen);
// 监听全屏变化
document.addEventListener('fullscreenchange', () => {
 if (!document.fullscreenElement) {
 fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
 }
});
 // 初始化
 totalPagesElement.textContent = totalSlides;
 updateProgress();
 initCharts();
 </script>
</body>
</html>