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