wine

Running

File size: 27,505 Bytes

4bf86bd

<!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>