Files
vf_react/public/htmls/无人机蜂群.html
2025-10-11 16:16:02 +08:00

442 lines
18 KiB
HTML
Raw 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.0">
<title>无人机蜂群 - AI+无人机的第二发展方向</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--accent-color: #198754;
--light-bg: #f8f9fa;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #333;
background-color: #f5f7fa;
}
.hero-section {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
color: white;
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
background-size: 50px 50px;
}
.hero-content {
position: relative;
z-index: 1;
}
.section-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
padding: 2rem;
margin-bottom: 2rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.feature-icon {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.table-container {
overflow-x: auto;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}
.stock-table {
min-width: 100%;
font-size: 0.95rem;
}
.stock-table thead {
background-color: var(--primary-color);
color: white;
}
.stock-table th {
font-weight: 600;
padding: 1rem;
white-space: nowrap;
}
.stock-table td {
padding: 0.75rem 1rem;
vertical-align: middle;
}
.stock-table tbody tr {
transition: background-color 0.2s ease;
}
.stock-table tbody tr:hover {
background-color: rgba(13, 110, 253, 0.05);
}
.badge-status {
font-size: 0.85rem;
padding: 0.35rem 0.65rem;
}
.tech-pill {
display: inline-block;
padding: 0.25rem 0.75rem;
margin: 0.25rem;
background-color: #e9ecef;
border-radius: 20px;
font-size: 0.85rem;
color: #495057;
transition: all 0.2s ease;
}
.tech-pill:hover {
background-color: var(--primary-color);
color: white;
transform: scale(1.05);
}
.timeline-item {
position: relative;
padding-left: 2rem;
margin-bottom: 1.5rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 0.5rem;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--primary-color);
}
.timeline-item::after {
content: '';
position: absolute;
left: 5px;
top: 1.5rem;
width: 2px;
height: calc(100% + 0.5rem);
background-color: #dee2e6;
}
.timeline-item:last-child::after {
display: none;
}
@media (max-width: 768px) {
.hero-section {
padding: 2rem 0;
}
.section-card {
padding: 1.5rem;
}
.stock-table {
font-size: 0.85rem;
}
.stock-table th,
.stock-table td {
padding: 0.5rem;
}
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero-section">
<div class="container">
<div class="hero-content text-center">
<h1 class="display-4 fw-bold mb-3">无人机蜂群</h1>
<p class="lead mb-0">AI+无人机的第二发展方向 | 低成本 · 高协同 · 智能化</p>
</div>
</div>
</section>
<!-- Main Content -->
<div class="container my-5">
<!-- Concept Overview -->
<div class="section-card">
<div class="row align-items-center">
<div class="col-md-8">
<h2 class="mb-3">概念概述</h2>
<p class="mb-3">无人机蜂群作为AI+无人机的第二发展方向,具备低成本、高协同性的核心优势,已在俄乌冲突中实现初步实战应用。通过多机协同、智能决策和分布式执行,无人机蜂群能够完成传统单机难以完成的复杂任务。</p>
<div class="d-flex flex-wrap">
<span class="tech-pill"><i class="bi bi-cpu me-1"></i>人工智能</span>
<span class="tech-pill"><i class="bi bi-wifi me-1"></i>自组网通信</span>
<span class="tech-pill"><i class="bi bi-shield me-1"></i>抗干扰隐身</span>
<span class="tech-pill"><i class="bi bi-diagram-3 me-1"></i>集群控制</span>
<span class="tech-pill"><i class="bi bi-geo-alt me-1"></i>协同导航</span>
</div>
</div>
<div class="col-md-4 text-center">
<i class="bi bi-behive2 feature-icon"></i>
</div>
</div>
</div>
<!-- Key Features -->
<div class="row">
<div class="col-md-4 mb-4">
<div class="section-card h-100">
<div class="text-center">
<i class="bi bi-cash-stack feature-icon"></i>
<h4>低成本优势</h4>
<p>通过规模化生产和标准化设计,大幅降低单机成本,实现"数量胜质量"的作战理念</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="section-card h-100">
<div class="text-center">
<i class="bi bi-people-fill feature-icon"></i>
<h4>高协同性</h4>
<p>多机协同作战,通过自组网通信和分布式决策,实现整体作战效能的指数级提升</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="section-card h-100">
<div class="text-center">
<i class="bi bi-lightning-charge-fill feature-icon"></i>
<h4>智能化水平</h4>
<p>融合AI大模型技术实现自主决策、自适应任务规划和智能故障恢复</p>
</div>
</div>
</div>
</div>
<!-- Application Scenarios -->
<div class="section-card">
<h2 class="mb-4">应用场景</h2>
<div class="row">
<div class="col-md-6 mb-4">
<h5 class="text-primary mb-3"><i class="bi bi-shield-check me-2"></i>军事领域</h5>
<ul class="list-unstyled">
<li class="timeline-item">侦察监视:大范围、多角度情报收集</li>
<li class="timeline-item">电子对抗:分布式电子干扰和压制</li>
<li class="timeline-item">精确打击:协同攻击高价值目标</li>
<li class="timeline-item">通信中继:构建战场通信网络</li>
</ul>
</div>
<div class="col-md-6 mb-4">
<h5 class="text-success mb-3"><i class="bi bi-building me-2"></i>民用领域</h5>
<ul class="list-unstyled">
<li class="timeline-item">农业植保:大规模病虫害监测与防治</li>
<li class="timeline-item">应急救援:灾区通信中继与物资投送</li>
<li class="timeline-item">环境监测:大气/水质实时监控</li>
<li class="timeline-item">物流配送:最后一公里智能配送</li>
</ul>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="section-card">
<h2 class="mb-4">相关上市公司</h2>
<div class="table-container">
<table class="table table-hover stock-table mb-0">
<thead>
<tr>
<th>股票名称</th>
<th>所属领域</th>
<th>核心技术/产品</th>
<th>项目状态</th>
<th>信息来源</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fw-semibold">光启技术</td>
<td>无人机蜂群</td>
<td>长航时大规模无人机蜂群</td>
<td><span class="badge bg-warning badge-status">试飞阶段</span></td>
<td>调研</td>
</tr>
<tr>
<td class="fw-semibold">振华科技</td>
<td>无人机蜂群</td>
<td>无人机及蜂群系统研产销(子公司:甘肃长风电子)</td>
<td><span class="badge bg-success badge-status">运营中</span></td>
<td>公告</td>
</tr>
<tr>
<td class="fw-semibold">航天彩虹</td>
<td>无人机蜂群</td>
<td>CH8系列无人机复杂环境下自主起降/集群作战)</td>
<td><span class="badge bg-info badge-status">技术验证</span></td>
<td>互动</td>
</tr>
<tr>
<td class="fw-semibold">星网宇达</td>
<td>无人机蜂群</td>
<td>智能蜂群控制/抗干扰隐身技术(北京市科学技术二等奖)</td>
<td><span class="badge bg-success badge-status">批量供货</span></td>
<td>调研</td>
</tr>
<tr>
<td class="fw-semibold">科思科技</td>
<td>指控系统</td>
<td>集群作战的系统级供应商</td>
<td><span class="badge bg-primary badge-status">系统级</span></td>
<td>券商</td>
</tr>
<tr>
<td class="fw-semibold">华如科技</td>
<td>指控系统</td>
<td>无人机集群指控系统"云脑"(硬件产品)</td>
<td><span class="badge bg-info badge-status">产品化</span></td>
<td>年报</td>
</tr>
<tr>
<td class="fw-semibold">盟升电子</td>
<td>数据链</td>
<td>导航数据链一体化终端/蜂群自组网通信网络规模伸缩技术</td>
<td><span class="badge bg-success badge-status">已结题</span></td>
<td>互动/年报</td>
</tr>
<tr>
<td class="fw-semibold">王子新材</td>
<td>数据链</td>
<td>抗干扰通信算法/抗干扰数据链(合作方:成都高斯联合)</td>
<td><span class="badge bg-info badge-status">研发中</span></td>
<td>媒体访谈</td>
</tr>
<tr>
<td class="fw-semibold">佳缘科技</td>
<td>数据加密</td>
<td>Gb/s级高速实时加密技术/区块链分布式去中心化技术</td>
<td><span class="badge bg-info badge-status">技术突破</span></td>
<td>互动</td>
</tr>
<tr>
<td class="fw-semibold">智明达</td>
<td>飞控</td>
<td>飞控系统/航电组网/蜂群抗干扰系统</td>
<td><span class="badge bg-success badge-status">系统参与</span></td>
<td>半年报</td>
</tr>
<tr>
<td class="fw-semibold">铭普光磁</td>
<td>其他</td>
<td>频率源组件参股华盾防务4.23%</td>
<td><span class="badge bg-info badge-status">参股</span></td>
<td>公告/工商</td>
</tr>
<tr>
<td class="fw-semibold">海能达</td>
<td>其他</td>
<td>微型无人机蜂群系统/通讯模块</td>
<td><span class="badge bg-info badge-status">产品化</span></td>
<td>公开资料</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Future Outlook -->
<div class="section-card">
<h2 class="mb-4">未来展望</h2>
<div class="row">
<div class="col-md-6">
<h5 class="mb-3"><i class="bi bi-graph-up-arrow me-2 text-primary"></i>技术融合趋势</h5>
<div class="d-flex flex-wrap">
<span class="tech-pill">AI大模型</span>
<span class="tech-pill">5G/6G通信</span>
<span class="tech-pill">数字孪生</span>
<span class="tech-pill">边缘计算</span>
<span class="tech-pill">量子通信</span>
</div>
</div>
<div class="col-md-6">
<h5 class="mb-3"><i class="bi bi-rocket-takeoff me-2 text-success"></i>发展阶段</h5>
<div class="progress mb-2" style="height: 25px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">技术验证</div>
</div>
<div class="progress mb-2" style="height: 25px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">小规模应用</div>
</div>
<div class="progress" style="height: 25px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">规模化部署</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white py-4 mt-5">
<div class="container text-center">
<p class="mb-0">© 2024 无人机蜂群概念分析 | 数据来源:公开信息整理</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.section-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
</script>
</body>
</html>