vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 10.10线上最新代码提交

Browse Source
This commit is contained in:
zdl
2025-10-11 16:16:02 +08:00
parent 4d0dc109bc
commit 864844a52b
3338 changed files with 460147 additions and 152745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

499
public/htmls/量子科技.html Normal file
View File

@@ -0,0 +1,499 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>量子科技概念洞察</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.waves.min.js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.quantum-bg {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
position: relative;
overflow: hidden;
}
.quantum-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(14, 165, 233, 0.1) 0%, transparent 50%);
z-index: 1;
}
.content-wrapper {
position: relative;
z-index: 2;
}
.timeline-dot {
width: 12px;
height: 12px;
background-color: #3b82f6;
border-radius: 50%;
position: absolute;
left: -6px;
top: 6px;
}
.timeline-line {
position: absolute;
left: 0;
top: 18px;
bottom: -18px;
width: 1px;
background-color: #334155;
}
.card-gradient {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.1);
}
.highlight-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.table-container {
overflow-x: auto;
}
@media (max-width: 768px) {
.timeline-dot {
width: 10px;
height: 10px;
left: -5px;
top: 5px;
}
.timeline-line {
top: 15px;
bottom: -15px;
}
}
</style>
</head>
<body class="quantum-bg min-h-screen text-gray-100">
<div id="particles-js" class="fixed inset-0 z-0"></div>
<div class="content-wrapper container mx-auto px-4 py-8 max-w-6xl">
<!-- 标题部分 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4 highlight-text">量子科技概念洞察</h1>
<p class="text-lg text-gray-300 max-w-3xl mx-auto">
探索量子科技前沿发展，把握未来产业投资机遇
</p>
</div>
<!-- 概念事件时间轴 -->
<div class="card-gradient rounded-xl p-6 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 text-blue-400">概念事件时间轴</h2>
<div class="space-y-8">
<div class="relative pl-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-blue-300">2024年12月</h3>
<p class="text-gray-300">谷歌发布<strong class="text-blue-400">Willow量子芯片</strong>，5分钟完成超算需10²⁵年的计算，马斯克点赞；中国"祖冲之三号"实现105比特超导体系，速度超超算千万亿倍。</p>
</div>
</div>
<div class="relative pl-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-blue-300">2025年2月</h3>
<p class="text-gray-300">微软推出<strong class="text-purple-400">全球首个拓扑量子芯片</strong>（Majorana1），8比特巴掌大小，抗噪声能力显著提升。</p>
</div>
</div>
<div class="relative pl-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-blue-300">2025年3月</h3>
<p class="text-gray-300">英伟达GTC大会设立<strong class="text-green-400">首个"量子日"</strong>，黄仁勋与D-Wave、IonQ等探讨量子商业化；中国两会连续6年提及量子科技，国务院将其列为"未来产业"核心。</p>
</div>
</div>
<div class="relative pl-8">
<div class="timeline-dot"></div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-blue-300">2025年6月</h3>
<p class="text-gray-300">中国电信量子集团投资<strong class="text-yellow-400">超百亿元</strong>建设合肥产业化基地；国盾量子中标<strong class="text-yellow-400">1.4亿元</strong>合肥超算中心量子计算机订单。</p>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="card-gradient rounded-xl p-6 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-4 text-purple-400">核心观点摘要</h2>
<div class="bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-lg p-4 border-l-4 border-purple-500">
<p class="text-gray-200 leading-relaxed">
量子科技正处于<strong class="text-purple-400">"技术验证→专用场景落地→生态构建"</strong>的关键拐点。<strong class="text-blue-400">政策与巨头双重催化</strong>下，2025-2027年或迎来<strong class="text-green-400">量子通信规模化建设</strong>与<strong class="text-green-400">量子计算专用机商业化</strong>的共振期，但<strong class="text-red-400">通用量子计算仍需10年以上</strong>。当前阶段<strong class="text-yellow-400">主题投资属性强于业绩兑现</strong>，需紧盯<strong class="text-blue-400">量子比特数突破</strong>与<strong class="text-blue-400">下游订单落地</strong>两大核心指标。
</p>
</div>
</div>
<!-- 核心逻辑与市场认知分析 -->
<div class="grid md:grid-cols-2 gap-6 mb-8">
<div class="card-gradient rounded-xl p-6 shadow-xl">
<h3 class="text-xl font-bold mb-4 text-blue-400">核心驱动力</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-microchip text-blue-400 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold text-blue-300">技术突破</h4>
<p class="text-sm text-gray-300">谷歌Willow解决30年未攻克的<strong>量子纠错问题</strong>（逻辑比特错误率↓），微软拓扑芯片降低噪声干扰，中国"骁鸿"芯片达<strong>504比特</strong>（全球前列）。</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-landmark text-purple-400 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold text-purple-300">政策加码</h4>
<p class="text-sm text-gray-300">中美将量子列为<strong>国家安全技术</strong>（美国《国家量子倡议法案》追加18亿美元，中国"十四五"专项投入超千亿）。</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-shield-alt text-green-400 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold text-green-300">需求刚性</h4>
<p class="text-sm text-gray-300">量子计算威胁RSA加密（谷歌预计10年内破解2048位密钥），倒逼<strong>量子通信（QKD）</strong>与<strong>抗量子密码（PQC）</strong>提前部署。</p>
</div>
</li>
</ul>
</div>
<div class="card-gradient rounded-xl p-6 shadow-xl">
<h3 class="text-xl font-bold mb-4 text-purple-400">市场热度与情绪</h3>
<div class="space-y-4">
<div>
<h4 class="font-semibold text-blue-300 mb-2">新闻热度</h4>
<p class="text-sm text-gray-300">2024年12月-2025年3月，量子概念股<strong class="text-yellow-400">集体涨停</strong>（复旦复华、国盾量子等），美股量子板块（IONQ、RGTI）单日涨幅<strong class="text-red-400">20%-50%</strong>。</p>
</div>
<div>
<h4 class="font-semibold text-purple-300 mb-2">研报密集度</h4>
<p class="text-sm text-gray-300">2024年5月-2025年6月，<strong class="text-blue-400">15篇深度报告</strong>聚焦量子，天风、中金、国君等头部券商连续路演，情绪<strong class="text-green-400">极度乐观</strong>但存在<strong class="text-yellow-400">技术路径分歧</strong>（超导vs光量子）。</p>
</div>
</div>
</div>
</div>
<!-- 预期差分析 -->
<div class="card-gradient rounded-xl p-6 mb-8 shadow-xl">
<h3 class="text-xl font-bold mb-4 text-yellow-400">预期差分析</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-blue-900/20 rounded-lg p-4">
<h4 class="font-semibold text-blue-300 mb-2">市场共识</h4>
<p class="text-gray-300">量子计算将颠覆AI算力瓶颈，2025年专用机落地。</p>
</div>
<div class="bg-purple-900/20 rounded-lg p-4">
<h4 class="font-semibold text-purple-300 mb-2">被忽略点</h4>
<ul class="text-sm text-gray-300 space-y-2">
<li>• <strong>商业化节奏</strong>：国盾量子2024年量子计算收入仅<strong class="text-red-400">4000万元</strong>（占营收<50%），<strong>整机售价数千万</strong>且客户以科研为主，<strong>C端应用仍处科普阶段</strong>。</li>
<li>• <strong>技术瓶颈</strong>：当前<strong>500比特</strong>离破解RSA需<strong>2000+逻辑比特</strong>（实际需百万物理比特），<strong>纠错成本</strong>可能使商业化推迟至2030年后。</li>
</ul>
</div>
</div>
</div>
<!-- 关键催化剂与未来发展路径 -->
<div class="grid md:grid-cols-2 gap-6 mb-8">
<div class="card-gradient rounded-xl p-6 shadow-xl">
<h3 class="text-xl font-bold mb-4 text-green-400">近期催化剂（3-6个月）</h3>
<ol class="space-y-3">
<li class="flex items-start">
<span class="bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 flex-shrink-0">1</span>
<div>
<h4 class="font-semibold text-green-300">政策落地</h4>
<p class="text-sm text-gray-300">中国<strong>抗量子密码标准</strong>（预计2025年Q3发布），推动金融、政务系统升级。</p>
</div>
</li>
<li class="flex items-start">
<span class="bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 flex-shrink-0">2</span>
<div>
<h4 class="font-semibold text-green-300">订单释放</h4>
<p class="text-sm text-gray-300">中国电信<strong>量子城域网二期</strong>招标（北京/广州/武汉等，单城投资<strong>1-5亿元</strong>），国盾量子或获<strong>核心设备份额</strong>。</p>
</div>
</li>
<li class="flex items-start">
<span class="bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 flex-shrink-0">3</span>
<div>
<h4 class="font-semibold text-green-300">技术验证</h4>
<p class="text-sm text-gray-300">微软拓扑芯片<strong>实测数据</strong>（若错误率<0.1%，将验证拓扑路线可行性）。</p>
</div>
</li>
</ol>
</div>
<div class="card-gradient rounded-xl p-6 shadow-xl">
<h3 class="text-xl font-bold mb-4 text-blue-400">长期路径（2025-2035）</h3>
<div class="space-y-4">
<div class="border-l-4 border-blue-500 pl-4">
<h4 class="font-semibold text-blue-300">2025-2027</h4>
<p class="text-sm text-gray-300">专用量子计算机在<strong>密码破解、药物模拟</strong>等场景落地，市场规模<strong>10亿→100亿美元</strong>（Yole预测）。</p>
</div>
<div class="border-l-4 border-purple-500 pl-4">
<h4 class="font-semibold text-purple-300">2028-2032</h4>
<p class="text-sm text-gray-300">量子通信骨干网覆盖全国，<strong>QKD设备</strong>年需求<strong>10亿级</strong>（中国1.2万公里干线+城域网）。</p>
</div>
<div class="border-l-4 border-green-500 pl-4">
<h4 class="font-semibold text-green-300">2033+</h4>
<p class="text-sm text-gray-300">百万比特通用机出现，<strong>量子云计算</strong>成为AI基础设施，市场规模<strong>千亿美元级</strong>。</p>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司分析 -->
<div class="card-gradient rounded-xl p-6 mb-8 shadow-xl">
<h3 class="text-xl font-bold mb-4 text-purple-400">产业链与核心公司深度剖析</h3>
<div class="mb-6">
<h4 class="font-semibold text-blue-300 mb-3">产业链图谱</h4>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-blue-900/20 rounded-lg p-4">
<h5 class="font-semibold text-blue-300 mb-2">上游</h5>
<p class="text-sm text-gray-300">稀释制冷机（<strong class="text-blue-400">鹏力超低温</strong>）、激光器（<strong class="text-blue-400">华工科技</strong>）、单光子探测器（<strong class="text-blue-400">国盾量子</strong>）</p>
</div>
<div class="bg-purple-900/20 rounded-lg p-4">
<h5 class="font-semibold text-purple-300 mb-2">中游</h5>
<p class="text-sm text-gray-300">量子计算机（<strong class="text-purple-400">国盾量子</strong>、<strong class="text-purple-400">本源量子</strong>）、QKD设备（<strong class="text-purple-400">国盾量子</strong>、<strong class="text-purple-400">九州量子</strong>）</p>
</div>
<div class="bg-green-900/20 rounded-lg p-4">
<h5 class="font-semibold text-green-300 mb-2">下游</h5>
<p class="text-sm text-gray-300">运营商（<strong class="text-green-400">中国电信</strong>）、金融（<strong class="text-green-400">工商银行</strong>）、超算中心（<strong class="text-green-400">合肥"巢湖明月"</strong>）</p>
</div>
</div>
</div>
<div>
<h4 class="font-semibold text-purple-300 mb-3">核心玩家对比</h4>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-700">
<th class="text-left py-3 px-2 text-purple-400">公司</th>
<th class="text-left py-3 px-2 text-purple-400">技术路线</th>
<th class="text-left py-3 px-2 text-purple-400">核心进展</th>
<th class="text-left py-3 px-2 text-purple-400">风险点</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-800">
<td class="py-3 px-2 font-semibold text-blue-400">国盾量子</td>
<td class="py-3 px-2 text-gray-300">超导+通信</td>
<td class="py-3 px-2 text-gray-300">504比特"骁鸿"芯片，电信控股<strong>23%</strong></td>
<td class="py-3 px-2 text-gray-300">收入依赖政府项目，毛利率波动大</td>
</tr>
<tr class="border-b border-gray-800">
<td class="py-3 px-2 font-semibold text-purple-400">本源量子</td>
<td class="py-3 px-2 text-gray-300">超导</td>
<td class="py-3 px-2 text-gray-300">"本源悟空"国产化率<strong>80%</strong></td>
<td class="py-3 px-2 text-gray-300">未上市，商业化能力待验证</td>
</tr>
<tr>
<td class="py-3 px-2 font-semibold text-green-400">IonQ</td>
<td class="py-3 px-2 text-gray-300">离子阱</td>
<td class="py-3 px-2 text-gray-300">36比特Forte系统，美股<strong>估值泡沫</strong></td>
<td class="py-3 px-2 text-gray-300">技术扩展性存疑</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-6 grid md:grid-cols-2 gap-4">
<div class="bg-green-900/20 rounded-lg p-4">
<h5 class="font-semibold text-green-300 mb-2">印证</h5>
<p class="text-sm text-gray-300">国盾量子2024年<strong>量子计算收入同比+300%</strong>（基数低），合肥超算中心订单<strong>1.4亿元</strong>。</p>
</div>
<div class="bg-red-900/20 rounded-lg p-4">
<h5 class="font-semibold text-red-300 mb-2">矛盾</h5>
<p class="text-sm text-gray-300">华金证券预测国盾2025年<strong>营收3.5亿</strong>（需年均复合<strong>100%+</strong>），但公司路演称<strong>"无业绩指引"</strong>。</p>
</div>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="card-gradient rounded-xl p-6 mb-8 shadow-xl">
<h3 class="text-xl font-bold mb-4 text-red-400">潜在风险与挑战</h3>
<div class="grid md:grid-cols-3 gap-4 mb-6">
<div class="bg-red-900/20 rounded-lg p-4">
<h4 class="font-semibold text-red-300 mb-3">技术风险</h4>
<ul class="text-sm text-gray-300 space-y-2">
<li>• <strong>纠错瓶颈</strong>：当前<strong>1000物理比特=1逻辑比特</strong>，百万比特通用机需<strong>10亿级投资</strong>（IBM路线图）。</li>
<li>• <strong>路线竞争</strong>：光量子（<strong>九章三号</strong>）与超导（<strong>祖冲之三号</strong>）尚无定论，<strong>技术迭代可能颠覆现有布局</strong>。</li>
</ul>
</div>
<div class="bg-yellow-900/20 rounded-lg p-4">
<h4 class="font-semibold text-yellow-300 mb-3">商业化风险</h4>
<ul class="text-sm text-gray-300 space-y-2">
<li>• <strong>成本过高</strong>：稀释制冷机单价<strong>500万元</strong>，量子计算机整机<strong>3000万-5000万元</strong>，<strong>仅科研机构可负担</strong>。</li>
<li>• <strong>需求错配</strong>：C端"量子密话"用户<strong>150万</strong>（电信数据），但<strong>ARPU仅2.7元/月</strong>，<strong>规模变现困难</strong>。</li>
</ul>
</div>
<div class="bg-purple-900/20 rounded-lg p-4">
<h4 class="font-semibold text-purple-300 mb-3">政策与竞争风险</h4>
<ul class="text-sm text-gray-300 space-y-2">
<li>• <strong>美国制裁</strong>：2024年12月新增<strong>37家中国量子企业</strong>入实体清单，<strong>进口芯片/制冷机受限</strong>。</li>
<li>• <strong>内卷加剧</strong>：华为、百度等巨头入局，<strong>价格战或压缩利润空间</strong>。</li>
</ul>
</div>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="card-gradient rounded-xl p-6 mb-8 shadow-xl">
<h3 class="text-xl font-bold mb-4 text-blue-400">综合结论与投资启示</h3>
<div class="bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-lg p-4 mb-6">
<h4 class="font-semibold text-blue-300 mb-2">阶段判断</h4>
<p class="text-gray-200">
量子科技处于<strong class="text-purple-400">"主题投资2.0"</strong>阶段——<strong class="text-blue-400">政策催化+订单萌芽</strong>，但<strong class="text-red-400">业绩尚未放量</strong>。类比2019年的半导体，需警惕<strong class="text-yellow-400">估值透支</strong>。
</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div>
<h4 class="font-semibold text-green-300 mb-3">投资方向</h4>
<div class="space-y-3">
<div class="bg-green-900/20 rounded-lg p-3">
<h5 class="font-semibold text-green-300 mb-1">短期（1年）</h5>
<p class="text-sm text-gray-300"><strong>量子通信基建</strong>（QKD设备、城域网），<strong>国盾量子</strong>（电信订单+合肥项目）为<strong>最纯标的</strong>。</p>
</div>
<div class="bg-blue-900/20 rounded-lg p-3">
<h5 class="font-semibold text-blue-300 mb-1">长期（3-5年）</h5>
<p class="text-sm text-gray-300"><strong>量子计算专用机</strong>（药物、金融场景），关注<strong>本源量子</strong>（未上市）或<strong>IonQ</strong>（美股高波动）。</p>
</div>
</div>
</div>
<div>
<h4 class="font-semibold text-purple-300 mb-3">跟踪指标</h4>
<ol class="space-y-2">
<li class="flex items-start">
<span class="bg-purple-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold mr-2 flex-shrink-0">1</span>
<p class="text-sm text-gray-300"><strong>量子比特数</strong>：2025年能否突破<strong>1000物理比特</strong>（IBM/谷歌里程碑）。</p>
</li>
<li class="flex items-start">
<span class="bg-purple-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold mr-2 flex-shrink-0">2</span>
<p class="text-sm text-gray-300"><strong>订单落地</strong>：中国电信<strong>2025年量子城域网招标金额</strong>（预计<strong>5-10亿元</strong>）。</p>
</li>
<li class="flex items-start">
<span class="bg-purple-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold mr-2 flex-shrink-0">3</span>
<p class="text-sm text-gray-300"><strong>政策催化</strong>：中国<strong>PQC标准</strong>发布时间（Q3敏感窗口）。</p>
</li>
</ol>
</div>
</div>
<div class="bg-red-900/20 rounded-lg p-4 border-l-4 border-red-500">
<h4 class="font-semibold text-red-300 mb-2">风险提示</h4>
<p class="text-gray-200">若2025年<strong>无国家级量子基建招标</strong>，当前估值或<strong>回调30%+</strong>。</p>
</div>
</div>
<!-- 关联股票数据表格 -->
<div class="card-gradient rounded-xl p-6 shadow-xl">
<h3 class="text-xl font-bold mb-4 text-blue-400">关联股票数据</h3>
<div class="table-container">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-700">
<th class="text-left py-3 px-4 text-blue-400">股票代码</th>
<th class="text-left py-3 px-4 text-blue-400">股票名称</th>
<th class="text-left py-3 px-4 text-blue-400">相关度</th>
<th class="text-left py-3 px-4 text-blue-400">最新价</th>
<th class="text-left py-3 px-4 text-blue-400">涨跌幅</th>
<th class="text-left py-3 px-4 text-blue-400">市值</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6" class="text-center py-8 text-gray-400">
暂无关联股票数据
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
// 初始化粒子背景
tsParticles.load("particles-js", {
particles: {
number: {
value: 30,
density: {
enable: true,
value_area: 800
}
},
color: {
value: ["#3b82f6", "#8b5cf6", "#0ea5e9"]
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: true
},
size: {
value: 3,
random: true
},
move: {
enable: true,
speed: 1,
direction: "none",
random: true,
straight: false,
out_mode: "out"
},
line_linked: {
enable: true,
distance: 150,
color: "#334155",
opacity: 0.2,
width: 1
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
}
},
retina_detect: true
});
</script>
</body>
</html>
```