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