wine

Running

App Files Files Community

mistpe commited on Oct 27, 2024

Commit

c50a35b

verified ·

1 Parent(s): d354ed2

Update index.html

Browse files

Files changed (1) hide show

index.html +681 -0

index.html CHANGED Viewed

	@@ -0,0 +1,681 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>绍兴黄酒产业振兴整体解决方案 - 共富示范区建设背景下的产业焕新之路</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
+    <style>
+        :root {
+            --primary: #8E2129;
+            --secondary: #D4B167;
+            --accent: #2C5530;
+            --dark: #1A1A1A;
+            --light: #FFFFFF;
+            --bg: #F5F5F5;
+            --gradient: linear-gradient(135deg, #8E2129, #D4B167);
+            --shadow: 0 4px 20px rgba(0,0,0,0.1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
+            line-height: 1.6;
+            color: var(--dark);
+            background: var(--bg);
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        /* 导航栏 */
+        .nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(10px);
+            z-index: 100;
+            box-shadow: var(--shadow);
+        }
+        .nav-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 70px;
+        }
+        .nav-logo {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: var(--primary);
+        }
+        .nav-links {
+            display: flex;
+            gap: 30px;
+        }
+        .nav-links a {
+            text-decoration: none;
+            color: var(--dark);
+            font-weight: 500;
+        }
+        /* 方案概述区域 */
+        .hero {
+            padding-top: 100px;
+            padding-bottom: 60px;
+            background: var(--gradient);
+            color: var(--light);
+        }
+        .hero-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 40px;
+            align-items: center;
+        }
+        .hero-text h1 {
+            font-size: 2.5rem;
+            margin-bottom: 20px;
+        }
+        .hero-stats {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .stat-card {
+            background: rgba(255,255,255,0.1);
+            padding: 20px;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+        }
+        .stat-value {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        /* 方案详情区域 */
+        .section {
+            padding: 80px 0;
+        }
+        .section-header {
+            text-align: center;
+            margin-bottom: 60px;
+        }
+        .section-title {
+            font-size: 2rem;
+            color: var(--primary);
+            margin-bottom: 15px;
+        }
+        .section-desc {
+            color: #666;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        /* 方案步骤 */
+        .steps-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+        .step-card {
+            background: var(--light);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: var(--shadow);
+        }
+        .step-number {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: var(--primary);
+            margin-bottom: 15px;
+        }
+        /* 实施路径 */
+        .timeline {
+            position: relative;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .timeline::before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: var(--primary);
+            transform: translateX(-50%);
+        }
+        .timeline-item {
+            margin-bottom: 40px;
+            position: relative;
+        }
+        .timeline-content {
+            width: calc(50% - 30px);
+            padding: 20px;
+            background: var(--light);
+            border-radius: 10px;
+            box-shadow: var(--shadow);
+        }
+        .timeline-item:nth-child(odd) .timeline-content {
+            margin-left: auto;
+        }
+        /* 数据图表 */
+        .chart-container {
+            background: var(--light);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: var(--shadow);
+            margin-top: 40px;
+        }
+        .chart {
+            height: 400px;
+        }
+        /* 预期成果 */
+        .results-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 30px;
+        }
+        .result-card {
+            background: var(--light);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: var(--shadow);
+            text-align: center;
+        }
+        .result-value {
+            font-size: 2.5rem;
+            font-weight: bold;
+            color: var(--primary);
+            margin: 15px 0;
+        }
+        /* 保障措施 */
+        .measures-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+        }
+        .measure-card {
+            background: var(--light);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: var(--shadow);
+        }
+        /* 投资预算 */
+        .budget-table {
+            width: 100%;
+            border-collapse: collapse;
+            background: var(--light);
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: var(--shadow);
+        }
+        .budget-table th,
+        .budget-table td {
+            padding: 15px;
+            text-align: left;
+            border-bottom: 1px solid #eee;
+        }
+        .budget-table th {
+            background: var(--primary);
+            color: var(--light);
+        }
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .hero-content {
+                grid-template-columns: 1fr;
+            }
+            .measures-grid {
+                grid-template-columns: 1fr;
+            }
+            .timeline::before {
+                left: 20px;
+            }
+            .timeline-content {
+                width: calc(100% - 50px);
+                margin-left: 50px !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="nav">
+        <div class="container nav-content">
+            <div class="nav-logo">绍兴黄酒产业振兴方案</div>
+            <div class="nav-links">
+                <a href="#background">方案背景</a>
+                <a href="#approach">实施路径</a>
+                <a href="#measures">保障措施</a>
+                <a href="#results">预期成果</a>
+            </div>
+        </div>
+    </nav>
+    <!-- 方案概述 -->
+    <section class="hero">
+        <div class="container hero-content">
+            <div class="hero-text">
+                <h1>绍兴黄酒产业振兴整体解决方案</h1>
+                <p>立足共同富裕示范区建设，打造世界级黄酒产业集群，推动传统产业数字化转型，引领黄酒产业高质量发展。</p>
+                <div class="hero-stats">
+                    <div class="stat-card">
+                        <div class="stat-value">100亿+</div>
+                        <div class="stat-label">2027年产值目标</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">30%</div>
+                        <div class="stat-label">数字化转型率</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">50万+</div>
+                        <div class="stat-label">带动就业</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">500亿</div>
+                        <div class="stat-label">品牌价值</div>
+                    </div>
+                </div>
+            </div>
+            <div class="hero-chart">
+                <div id="overviewChart" style="height: 400px;"></div>
+            </div>
+        </div>
+    </section>
+    <!-- 方案背景 -->
+    <section id="background" class="section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">方案背景</h2>
+                <p class="section-desc">把握历史机遇，推动传统产业转型升级</p>
+            </div>
+            <div class="steps-grid">
+                <div class="step-card">
+                    <div class="step-number">政策基础</div>
+                    <h3>省市支持政策</h3>
+                    <p>• 浙江省委省政府重点支持</p>
+                    <p>• 绍兴市专项扶持资金</p>
+                    <p>• 共同富裕示范区建设要求</p>
+                </div>
+                <div class="step-card">
+                    <div class="step-number">发展现状</div>
+                    <h3>产业基础扎实</h3>
+                    <p>• 2023年销售收入36.13亿</p>
+                    <p>• 利润总额9.13亿</p>
+                    <p>• 增长潜力巨大</p>
+                </div>
+                <div class="step-card">
+                    <div class="step-number">机遇挑战</div>
+                    <h3>转型升级机遇</h3>
+                    <p>• 消费升级趋势明显</p>
+                    <p>• 数字化转型迫切</p>
+                    <p>• 品牌价值待提升</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 实施路径 -->
+    <section id="approach" class="section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">实施路径</h2>
+                <p class="section-desc">四大行动计划助力产业振兴</p>
+            </div>
+            <div class="timeline">
+                <div class="timeline-item">
+                    <div class="timeline-content">
+                        <h3>改革强企行动</h3>
+                        <ul>
+                            <li>组建黄酒投资发展集团</li>
+                            <li>推动企业股份制改革</li>
+                            <li>完善现代企业制度</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-content">
+                        <h3>创新拓市行动</h3>
+                        <ul>
+                            <li>建设研发创新中心</li>
+                            <li>打造数字营销体系</li>
+                            <li>开发年轻化产品</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-content">
+                        <h3>优品立名行动</h3>
+                        <ul>
+                            <li>制定品质标准体系</li>
+                            <li>打造区域公共品牌</li>
+                            <li>建设原酒交易市场</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-content">
+                        <h3>文化推广行动</h3>
+                        <ul>
+                            <li>建设文化体验中心</li>
+                            <li>开发文创产品矩阵</li>
+                            <li>提升品牌影响力</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 保障措施 -->
+    <section id="measures" class="section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">保障措施</h2>
+                <p class="section-desc">全方位支持体系确保方案落地</p>
+            </div>
+            <div class="measures-grid">
+                <div class="measure-card">
+                    <h3>组织保障</h3>
+                    <ul>
+                        <li>成立产业发展领导小组</li>
+                        <li>建立跨部门协调机制</li>
+                        <li>组建专业化运营团队</li>
+                    </ul>
+                </div>
+                <div class="measure-card">
+                    <h3>资金保障</h3>
+                    <ul>
+                        <li>设立产业发展基金</li>
+                        <li>统筹各类扶持资金</li>
+                        <li>创新金融支持模式</li>
+                    </ul>
+                </div>
+                <div class="measure-card">
+                    <h3>技术保障</h3>
+                    <ul>
+                        <li>建设创新研发平台</li>
+                        <li>引进高端技术人才</li>
+                        <li>加强产学研合作</li>
+                    </ul>
+                </div>
+                <div class="measure-card">
+                    <h3>政策保障</h3>
+                    <ul>
+                        <li>出台专项支持政策</li>
+                        <li>优化营商环境</li>
+                        <li>加强知识产权保护</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 投资预算 -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">投资预算</h2>
+                <p class="section-desc">分期分批推进，确保资金效益最大化</p>
+            </div>
+            <table class="budget-table">
+                <thead>
+                    <tr>
+                        <th>投资项目</th>
+                        <th>投资金额（亿元）</th>
+                        <th>实施周期</th>
+                        <th>预期效益</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>数字化改造工程</td>
+                        <td>5.0</td>
+                        <td>2024-2025</td>
+                        <td>提升生产效率30%</td>
+                    </tr>
+                    <tr>
+                        <td>品牌建设工程</td>
+                        <td>3.0</td>
+                        <td>2024-2026</td>
+                        <td>品牌价值提升50%</td>
+                    </tr>
+                    <tr>
+                        <td>研发创新中心</td>
+                        <td>4.0</td>
+                        <td>2024-2025</td>
+                        <td>新品销售占比30%</td>
+                    </tr>
+                    <tr>
+                        <td>市场营销体系</td>
+                        <td>3.0</td>
+                        <td>2024-2026</td>
+                        <td>市场份额提升20%</td>
+                    </tr>
+                </tbody>
+            </table>
+            <div class="chart-container">
+                <div id="investmentChart" class="chart"></div>
+            </div>
+        </div>
+    </section>
+    <!-- 预期成果 -->
+    <section id="results" class="section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">预期成果</h2>
+                <p class="section-desc">2027年产业发展目标</p>
+            </div>
+            <div class="results-grid">
+                <div class="result-card">
+                    <h3>产业规模</h3>
+                    <div class="result-value">100亿+</div>
+                    <p>年销售收入</p>
+                </div>
+                <div class="result-card">
+                    <h3>品牌价值</h3>
+                    <div class="result-value">500亿</div>
+                    <p>品牌估值</p>
+                </div>
+                <div class="result-card">
+                    <h3>带动就业</h3>
+                    <div class="result-value">50万+</div>
+                    <p>就业人数</p>
+                </div>
+                <div class="result-card">
+                    <h3>科技创新</h3>
+                    <div class="result-value">30%</div>
+                    <p>研发投入占比</p>
+                </div>
+            </div>
+            <div class="chart-container">
+                <div id="resultsChart" class="chart"></div>
+            </div>
+        </div>
+    </section>
+    <script>
+        // 初始化图表
+        document.addEventListener('DOMContentLoaded', function() {
+            // 概览图表
+            const overviewChart = echarts.init(document.getElementById('overviewChart'));
+            overviewChart.setOption({
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['销售收入', '利润总额'],
+                    textStyle: {
+                        color: '#fff'
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['2023', '2024E', '2025E', '2026E', '2027E'],
+                    axisLabel: {
+                        color: '#fff'
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        color: '#fff'
+                    }
+                },
+                series: [
+                    {
+                        name: '销售收入',
+                        type: 'line',
+                        smooth: true,
+                        data: [36.13, 50, 65, 80, 100],
+                        lineStyle: {
+                            color: '#FFD700'
+                        },
+                        itemStyle: {
+                            color: '#FFD700'
+                        }
+                    },
+                    {
+                        name: '利润总额',
+                        type: 'line',
+                        smooth: true,
+                        data: [9.13, 12, 16, 20, 25],
+                        lineStyle: {
+                            color: '#87CEEB'
+                        },
+                        itemStyle: {
+                            color: '#87CEEB'
+                        }
+                    }
+                ]
+            });
+            // 投资分布图表
+            const investmentChart = echarts.init(document.getElementById('investmentChart'));
+            investmentChart.setOption({
+                title: {
+                    text: '投资分布'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{b}: {c}亿元 ({d}%)'
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '70%'],
+                        data: [
+                            {value: 5.0, name: '数字化改造'},
+                            {value: 3.0, name: '品牌建设'},
+                            {value: 4.0, name: '研发创新'},
+                            {value: 3.0, name: '市场营销'}
+                        ]
+                    }
+                ]
+            });
+            // 预期成果趋势图
+            const resultsChart = echarts.init(document.getElementById('resultsChart'));
+            resultsChart.setOption({
+                title: {
+                    text: '发展趋势预测'
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['产值规模', '就业人数', '品牌价值']
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['2023', '2024E', '2025E', '2026E', '2027E']
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '亿元',
+                        position: 'left'
+                    },
+                    {
+                        type: 'value',
+                        name: '万人',
+                        position: 'right'
+                    }
+                ],
+                series: [
+                    {
+                        name: '产值规模',
+                        type: 'bar',
+                        data: [36.13, 50, 65, 80, 100]
+                    },
+                    {
+                        name: '就业人数',
+                        type: 'line',
+                        yAxisIndex: 1,
+                        data: [20, 25, 35, 42, 50]
+                    },
+                    {
+                        name: '品牌价值',
+                        type: 'line',
+                        data: [100, 200, 300, 400, 500]
+                    }
+                ]
+            });
+            // 响应式处理
+            window.addEventListener('resize', function() {
+                overviewChart.resize();
+                investmentChart.resize();
+                resultsChart.resize();
+            });
+        });
+    </script>
+</body>
+</html>