wine

Running

App Files Files Community

mistpe commited on Oct 27, 2024

Commit

4bf86bd

verified ·

1 Parent(s): 884da0b

Create index.html

Browse files

Files changed (1) hide show

index.html +833 -0

index.html ADDED Viewed

	@@ -0,0 +1,833 @@

+<!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;
+}
+</style>
+</head>
+<body>
+    <div id="particles-js"></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();
+            }
+        });
+        // 键盘事件监听
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowRight' || e.key === 'Space') {
+                nextSlide();
+            } else if (e.key === 'ArrowLeft') {
+                previousSlide();
+            }
+        });
+        // 初始化
+        totalPagesElement.textContent = totalSlides;
+        updateProgress();
+        initCharts();
+    </script>
+</body>
+</html>