Files
vf_react/public/htmls/低代码.html
2025-10-11 16:16:02 +08:00

660 lines
28 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<!-- Nucleo Icons -->
<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" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #1a2a6c, #2a5298, #7e8ba3);
min-height: 100vh;
color: #333;
}
.card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.timeline-item {
position: relative;
padding-left: 40px;
padding-bottom: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 10px;
top: 0;
height: 100%;
width: 2px;
background: #3b82f6;
}
.timeline-item:last-child::before {
height: 20px;
}
.timeline-dot {
position: absolute;
left: 0;
top: 5px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #3b82f6;
border: 3px solid white;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.table-responsive {
overflow-x: auto;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th, .table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.table th {
background-color: #f9fafb;
font-weight: 600;
color: #4b5563;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.table tbody tr:hover {
background-color: #f3f4f6;
}
.badge {
display: inline-block;
padding: 0.25em 0.75em;
font-size: 0.75em;
font-weight: 600;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.375rem;
}
.badge-dot {
display: inline-flex;
align-items: center;
}
.badge-dot i {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
margin-right: 0.5rem;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.text-info-gradient {
background-image: linear-gradient(310deg, #2152ff, #21d4fd);
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.section-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #1e40af;
position: relative;
padding-left: 1rem;
}
.section-title::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background: linear-gradient(to bottom, #3b82f6, #60a5fa);
border-radius: 4px;
}
.key-point {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-left: 4px solid #3b82f6;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
margin: 1rem 0;
}
.highlight-box {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
border-radius: 0.75rem;
padding: 1.5rem;
margin: 1.5rem 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
.card {
margin-bottom: 1.5rem;
}
.section-title {
font-size: 1.25rem;
}
.table-responsive {
border: 0;
}
.table thead {
display: none;
}
.table, .table tbody, .table tr, .table td {
display: block;
width: 100% !important;
}
.table tr {
margin-bottom: 1rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
}
.table td {
text-align: right !important;
padding-left: 50% !important;
position: relative;
border: none;
border-bottom: 1px solid #e5e7eb;
}
.table td::before {
content: attr(data-label);
position: absolute;
left: 15px;
width: calc(50% - 30px);
padding-right: 10px;
text-align: left;
font-weight: 600;
color: #4b5563;
}
.table td:last-child {
border-bottom: none;
}
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- 页面标题 -->
<div class="card p-6 mb-8 text-center">
<h1 class="text-3xl md:text-4xl font-bold text-gradient text-info-gradient mb-4">低代码概念深度分析</h1>
<p class="text-gray-600 max-w-3xl mx-auto">AI赋能下的商业化拐点从"拖拽式开发"到"自然语言生成应用"的技术革命</p>
</div>
<!-- 概念事件时间轴 -->
<div class="card p-6 mb-8">
<h2 class="section-title">概念事件时间轴</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="font-bold text-blue-700">2024-09-05</div>
<p>飞书发布新一代多维表格+低代码平台,强调"全代码能力建设"与出海合规方案。</p>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="font-bold text-blue-700">2024-12-03</div>
<p>苹果App Store付费榜第一名的"小猫补光灯PRO"由个人用户用AI低代码工具Cursor 1小时开发完成引爆市场对"AI+低代码"的想象力。</p>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="font-bold text-blue-700">2024-12-04</div>
<p>招商证券、华福证券连续发布低代码标的梳理报告金现代、普元信息、浩云科技等20CM涨停板块情绪达到高潮。</p>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="font-bold text-blue-700">2025-06-11</div>
<p>金现代宣布轻骑兵低代码平台已适配DeepSeek大模型实现"自然语言生成应用"。</p>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="font-bold text-blue-700">2025-07-03</div>
<p>IDC预测中国低代码市场规模将从2024年的40.3亿元增长至2029年的129.8亿元CAGR 26.4%。</p>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="card p-6 mb-8">
<h2 class="section-title">核心观点摘要</h2>
<div class="key-point">
<p class="font-semibold text-lg mb-2">低代码正处于"AI赋能下的商业化拐点"</p>
<p>技术层面从"拖拽式开发"升级为"AI自然语言生成",市场层面从"通用工具"向"行业垂直解决方案"渗透。短期看AI爆款应用催化情绪中期看信创+SaaS化订单落地长期看企业数字化渗透率提升。</p>
</div>
</div>
<!-- 核心逻辑与市场认知分析 -->
<div class="card p-6 mb-8">
<h2 class="section-title">核心逻辑与市场认知分析</h2>
<h3 class="text-xl font-semibold text-blue-600 mb-3">核心驱动力</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="highlight-box">
<div class="font-bold text-blue-700 mb-2">技术突破</div>
<p>AI大模型如DeepSeek、ChatGLM与低代码平台深度融合实现"一句话生成应用"金现代路演显示代码编写量减少70%效率提升4-6倍</p>
</div>
<div class="highlight-box">
<div class="font-bold text-blue-700 mb-2">政策驱动</div>
<p>信创替代加速(普元信息中标国有大行低代码平台)、数字经济"十四五"规划明确支持"敏捷开发工具"。</p>
</div>
<div class="highlight-box">
<div class="font-bold text-blue-700 mb-2">成本拐点</div>
<p>传统开发人力成本占比超60%低代码可将项目周期从3个月压缩至3周普元信息客户案例</p>
</div>
</div>
<h3 class="text-xl font-semibold text-blue-600 mb-3">市场热度与情绪</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="font-bold text-blue-700 mb-1">舆情热度</div>
<p>12月3日"小猫补光灯"事件后同花顺低代码指数单日涨幅8.7%相关个股搜索量暴增300%。</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<div class="font-bold text-blue-700 mb-1">研报密集度</div>
<p>2024年12月单月发布低代码深度报告5篇招商、华福、民生为年内峰值。</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<div class="font-bold text-blue-700 mb-1">情绪分歧</div>
<p>部分投资者担忧"低代码只能做简单应用"但路演显示普元信息已支持ERP级复杂系统开发5000+应用案例)。</p>
</div>
</div>
<h3 class="text-xl font-semibold text-blue-600 mb-3">预期差分析</h3>
<div class="overflow-x-auto">
<table class="w-full border-collapse border border-gray-200">
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-200 px-4 py-2 text-left">市场认知</th>
<th class="border border-gray-200 px-4 py-2 text-left">实际进展</th>
<th class="border border-gray-200 px-4 py-2 text-left">预期差</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-200 px-4 py-2">低代码="玩具级"工具</td>
<td class="border border-gray-200 px-4 py-2">普元信息中标国防军工项目(涉密级复杂系统)</td>
<td class="border border-gray-200 px-4 py-2 font-bold text-green-600">技术壁垒被低估</td>
</tr>
<tr>
<td class="border border-gray-200 px-4 py-2">客户仅为中小企业</td>
<td class="border border-gray-200 px-4 py-2">金现代客户包括航天科工、山东省交通厅</td>
<td class="border border-gray-200 px-4 py-2 font-bold text-green-600">大客户突破</td>
</tr>
<tr>
<td class="border border-gray-200 px-4 py-2">盈利模式不清晰</td>
<td class="border border-gray-200 px-4 py-2">普元信息低代码业务毛利率49%20232024年目标提升至60%+</td>
<td class="border border-gray-200 px-4 py-2 font-bold text-green-600">盈利路径明确</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 关键催化剂与未来发展路径 -->
<div class="card p-6 mb-8">
<h2 class="section-title">关键催化剂与未来发展路径</h2>
<h3 class="text-xl font-semibold text-blue-600 mb-3">近期催化剂3-6个月</h3>
<div class="space-y-3 mb-6">
<div class="flex items-start">
<div class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</div>
<p><strong>产品发布会</strong>普元信息2025年7月推出AI低代码4.0版本(已预告支持私有化大模型部署)。</p>
</div>
<div class="flex items-start">
<div class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</div>
<p><strong>订单落地</strong>金现代2024年新签3000-5000万订单电力行业占比<30%航天/制造占比提升</p>
</div>
<div class="flex items-start">
<div class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</div>
<p><strong>政策催化</strong>中央经济工作会议2024年12月或提及"AI+信创"专项支持。</p>
</div>
</div>
<h3 class="text-xl font-semibold text-blue-600 mb-3">长期发展路径</h3>
<div class="space-y-4">
<div class="flex items-center">
<div class="bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-lg px-4 py-2 mr-4 font-bold">2025-2026</div>
<p>行业化封装(如金融风控低代码组件、工业设备管理模板)</p>
</div>
<div class="flex items-center">
<div class="bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-lg px-4 py-2 mr-4 font-bold">2027-2028</div>
<p>平台生态化ISV基于低代码开发垂直SaaS类似Salesforce模式</p>
</div>
<div class="flex items-center">
<div class="bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-lg px-4 py-2 mr-4 font-bold">2029+</div>
<p>成为企业数字化"操作系统"IDC预测渗透率从当前15%提升至40%</p>
</div>
</div>
</div>
<!-- 产业链与核心公司深度剖析 -->
<div class="card p-6 mb-8">
<h2 class="section-title">产业链与核心公司深度剖析</h2>
<h3 class="text-xl font-semibold text-blue-600 mb-3">产业链图谱</h3>
<div class="flex flex-col md:flex-row justify-between items-center mb-6 bg-gray-50 p-4 rounded-lg">
<div class="text-center mb-4 md:mb-0">
<div class="font-bold text-blue-700 mb-2">上游</div>
<p>AI大模型DeepSeek、ChatGLM<br>云基础设施(阿里云、华为云)</p>
</div>
<div class="text-center mb-4 md:mb-0">
<i class="fas fa-arrow-right text-blue-500 text-2xl"></i>
</div>
<div class="text-center mb-4 md:mb-0">
<div class="font-bold text-blue-700 mb-2">中游</div>
<p>低代码平台厂商<br>(普元信息、金现代、浩云科技)</p>
</div>
<div class="text-center mb-4 md:mb-0">
<i class="fas fa-arrow-right text-blue-500 text-2xl"></i>
</div>
<div class="text-center">
<div class="font-bold text-blue-700 mb-2">下游</div>
<p>金融(银行/保险)<br>政务(智慧城市)<br>制造(能源/航天)</p>
</div>
</div>
<h3 class="text-xl font-semibold text-blue-600 mb-3">核心玩家对比</h3>
<div class="overflow-x-auto mb-6">
<table class="w-full border-collapse border border-gray-200">
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-200 px-4 py-2 text-left">公司</th>
<th class="border border-gray-200 px-4 py-2 text-left">技术壁垒</th>
<th class="border border-gray-200 px-4 py-2 text-left">客户进展</th>
<th class="border border-gray-200 px-4 py-2 text-left">风险点</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-200 px-4 py-2 font-bold">普元信息</td>
<td class="border border-gray-200 px-4 py-2">20年低代码经验5000+大型企业客户(含国有大行)</td>
<td class="border border-gray-200 px-4 py-2">2024年订单同比增50%+</td>
<td class="border border-gray-200 px-4 py-2">定制化项目拖累毛利率</td>
</tr>
<tr>
<td class="border border-gray-200 px-4 py-2 font-bold">金现代</td>
<td class="border border-gray-200 px-4 py-2">轻骑兵平台适配DeepSeek电力行业渗透率90%</td>
<td class="border border-gray-200 px-4 py-2">2025年目标营收5000万+</td>
<td class="border border-gray-200 px-4 py-2">研发投入高2024年或亏损</td>
</tr>
<tr>
<td class="border border-gray-200 px-4 py-2 font-bold">浩云科技</td>
<td class="border border-gray-200 px-4 py-2">浩易搭获信通院首批认证,物联网场景领先</td>
<td class="border border-gray-200 px-4 py-2">政府项目占比高</td>
<td class="border border-gray-200 px-4 py-2">回款周期长</td>
</tr>
</tbody>
</table>
</div>
<h3 class="text-xl font-semibold text-blue-600 mb-3">验证与证伪</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-green-50 p-4 rounded-lg border border-green-200">
<div class="font-bold text-green-700 mb-2 flex items-center">
<i class="fas fa-check-circle mr-2"></i>证真
</div>
<p>普元信息路演披露某商业银行效率提升75%(具体案例),印证研报"降本增效"逻辑。</p>
</div>
<div class="bg-red-50 p-4 rounded-lg border border-red-200">
<div class="font-bold text-red-700 mb-2 flex items-center">
<i class="fas fa-times-circle mr-2"></i>证伪
</div>
<p>部分投资者认为"低代码无法做复杂系统"但普元信息已贯通5000+政务应用,直接证伪。</p>
</div>
</div>
</div>
<!-- 关联股票数据 -->
<div class="card p-6 mb-8">
<h2 class="section-title">关联股票数据</h2>
<div class="table-responsive">
<table class="table align-items-center mb-0">
<thead>
<tr>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">股票名称</th>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">项目/技术</th>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">荣誉/合作</th>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">行业</th>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">原因</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="股票名称">
<div class="d-flex px-2">
<div class="my-auto">
<h6 class="mb-0 text-xs font-weight-bold">金现代</h6>
</div>
</div>
</td>
<td data-label="项目/技术">轻骑兵低代码开发平台</td>
<td data-label="荣誉/合作">国家信创产品库入选</td>
<td data-label="行业">低代码开发</td>
<td data-label="原因">公司的轻骑兵低代码开发平台已入选国家信创产品库,表明其在低代码领域的技术实力和行业认可度。</td>
</tr>
<tr>
<td data-label="股票名称">
<div class="d-flex px-2">
<div class="my-auto">
<h6 class="mb-0 text-xs font-weight-bold">新炬网络</h6>
</div>
</div>
</td>
<td data-label="项目/技术">低代码开发平台</td>
<td data-label="荣誉/合作">-</td>
<td data-label="行业">低代码开发</td>
<td data-label="原因">公司拥有自主研发的低代码开发平台,直接参与低代码技术应用与市场拓展。</td>
</tr>
<tr>
<td data-label="股票名称">
<div class="d-flex px-2">
<div class="my-auto">
<h6 class="mb-0 text-xs font-weight-bold">科大国创</h6>
</div>
</div>
</td>
<td data-label="项目/技术">AI编程</td>
<td data-label="荣誉/合作">华为仓颉深度合作</td>
<td data-label="行业">AI编程与低代码开发</td>
<td data-label="原因">与华为深度合作开发AI编程技术已实现自动生成代码功能属于低代码领域的前沿技术应用。</td>
</tr>
<tr>
<td data-label="股票名称">
<div class="d-flex px-2">
<div class="my-auto">
<h6 class="mb-0 text-xs font-weight-bold">汉鑫科技</h6>
</div>
</div>
</td>
<td data-label="项目/技术">低代码管理系统开发平台</td>
<td data-label="荣誉/合作">-</td>
<td data-label="行业">低代码开发与智能制造</td>
<td data-label="原因">依托低代码平台结合云解决方案和智能制造技术积累,开发适用于制造业工艺优化的通用管理系统,覆盖多技术领域和产业链场景。</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="card p-6 mb-8">
<h2 class="section-title">潜在风险与挑战</h2>
<div class="overflow-x-auto">
<table class="w-full border-collapse border border-gray-200">
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-200 px-4 py-2 text-left">风险类型</th>
<th class="border border-gray-200 px-4 py-2 text-left">具体表现</th>
<th class="border border-gray-200 px-4 py-2 text-left">应对策略</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-200 px-4 py-2 font-bold text-red-600">技术瓶颈</td>
<td class="border border-gray-200 px-4 py-2">复杂业务场景(如金融衍生品定价)仍需原生代码补充</td>
<td class="border border-gray-200 px-4 py-2">混合开发模式(低代码+专业代码)</td>
</tr>
<tr>
<td class="border border-gray-200 px-4 py-2 font-bold text-red-600">商业化风险</td>
<td class="border border-gray-200 px-4 py-2">中小企业付费意愿低单价10万/项目 vs 大客户100万+</td>
<td class="border border-gray-200 px-4 py-2">推出SaaS订阅制金现代计划2025年上线</td>
</tr>
<tr>
<td class="border border-gray-200 px-4 py-2 font-bold text-red-600">政策风险</td>
<td class="border border-gray-200 px-4 py-2">信创标准变化可能导致技术路线调整</td>
<td class="border border-gray-200 px-4 py-2">提前适配国产芯片/操作系统(普元已支持鲲鹏)</td>
</tr>
<tr>
<td class="border border-gray-200 px-4 py-2 font-bold text-red-600">信息矛盾</td>
<td class="border border-gray-200 px-4 py-2">华福证券称博睿数据"Q4业绩爆发",但公司未披露具体数据</td>
<td class="border border-gray-200 px-4 py-2 font-bold">需跟踪12月财报验证</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="card p-6">
<h2 class="section-title">综合结论与投资启示</h2>
<div class="key-point mb-6">
<p class="font-semibold text-lg mb-2">阶段判断</p>
<p>低代码已从"主题炒作"2023年进入"订单驱动+AI技术验证"阶段2024-2025</p>
</div>
<h3 class="text-xl font-semibold text-blue-600 mb-3">投资方向</h3>
<div class="space-y-4 mb-6">
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-lg border-l-4 border-blue-500">
<div class="font-bold text-blue-700 mb-2">最纯标的</div>
<p><strong>普元信息</strong>低代码收入占比50%,金融/政务壁垒最深)</p>
</div>
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 rounded-lg border-l-4 border-indigo-500">
<div class="font-bold text-indigo-700 mb-2">弹性标的</div>
<p><strong>金现代</strong>AI低代码+电力行业2025年盈利拐点</p>
</div>
</div>
<h3 class="text-xl font-semibold text-blue-600 mb-3">跟踪指标</h3>
<div class="space-y-3 mb-6">
<div class="flex items-start">
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1 flex-shrink-0 font-bold">1</div>
<p><strong>订单转化率</strong>普元信息Q4收入确认2024年新增订单能否兑现</p>
</div>
<div class="flex items-start">
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1 flex-shrink-0 font-bold">2</div>
<p><strong>AI功能渗透率</strong>金现代轻骑兵平台AI生成代码占比目标2025年>30%)。</p>
</div>
<div class="flex items-start">
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1 flex-shrink-0 font-bold">3</div>
<p><strong>行业标杆案例</strong>:是否有央企/部委级大单落地(如航天科工、国家电网)。</p>
</div>
</div>
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-6 rounded-lg">
<p class="text-xl font-bold mb-2">一句话总结</p>
<p>低代码的"AI时刻"已至,短期盯爆款催化,中期看信创订单,长期押注数字化渗透率提升。<strong>普元信息是盾,金现代是矛</strong></p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 初始化粒子背景
if (typeof tsParticles !== 'undefined') {
tsParticles.load("particles-js", {
particles: {
number: {
value: 30,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: false
},
size: {
value: 3,
random: true
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
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: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
}
});
</script>
</body>
</html>
```