|
|
<!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; |
|
|
} |
|
|
.fullscreen-control { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.control-btn { |
|
|
background: rgba(255, 215, 0, 0.2); |
|
|
border: 1px solid rgba(255, 215, 0, 0.5); |
|
|
color: #FFD700; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.control-btn:hover { |
|
|
background: rgba(255, 215, 0, 0.4); |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.control-btn i { |
|
|
font-size: 18px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="particles-js"></div> |
|
|
<div class="fullscreen-control"> |
|
|
<button id="fullscreenBtn" class="control-btn"><i class="fas fa-expand"></i></button> |
|
|
</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 |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const fullscreenBtn = document.getElementById('fullscreenBtn'); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
switch(e.key) { |
|
|
case 'ArrowRight': |
|
|
case 'ArrowDown': |
|
|
case 'Space': |
|
|
nextSlide(); |
|
|
break; |
|
|
case 'ArrowLeft': |
|
|
case 'ArrowUp': |
|
|
previousSlide(); |
|
|
break; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function toggleFullScreen() { |
|
|
if (!document.fullscreenElement) { |
|
|
document.documentElement.requestFullscreen().catch(err => { |
|
|
console.log(`Error attempting to enable fullscreen: ${err.message}`); |
|
|
}); |
|
|
fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>'; |
|
|
} else { |
|
|
if (document.exitFullscreen) { |
|
|
document.exitFullscreen(); |
|
|
fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>'; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
fullscreenBtn.addEventListener('click', toggleFullScreen); |
|
|
|
|
|
|
|
|
document.addEventListener('fullscreenchange', () => { |
|
|
if (!document.fullscreenElement) { |
|
|
fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
totalPagesElement.textContent = totalSlides; |
|
|
updateProgress(); |
|
|
initCharts(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
