585 lines
28 KiB
HTML
585 lines
28 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>6G产业链深度解析 - 下一代通信技术革命</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.hero-gradient {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-gradient::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||
animation: rotate 30s linear infinite;
|
||
}
|
||
|
||
@keyframes rotate {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.timeline-line {
|
||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||
width: 4px;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding: 20px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.timeline-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.stock-table {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.stock-table table {
|
||
width: 100%;
|
||
min-width: 1000px;
|
||
}
|
||
|
||
.stock-table td, .stock-table th {
|
||
white-space: nowrap;
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.tag-cloud span {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
margin: 4px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tag-cloud span:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.stat-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.pulse-dot {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #10b981;
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
|
||
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
|
||
}
|
||
|
||
.risk-meter {
|
||
height: 20px;
|
||
background: linear-gradient(90deg, #10b981 0%, #fbbf24 50%, #ef4444 100%);
|
||
border-radius: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.risk-indicator {
|
||
position: absolute;
|
||
width: 4px;
|
||
height: 24px;
|
||
background: #1f2937;
|
||
border-radius: 2px;
|
||
top: -2px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Hero Section -->
|
||
<section class="hero-gradient text-white py-20 relative">
|
||
<div class="container mx-auto px-4 relative z-10">
|
||
<div class="text-center" data-aos="fade-up">
|
||
<h1 class="text-5xl md:text-6xl font-bold mb-6">6G产业链深度解析</h1>
|
||
<p class="text-xl md:text-2xl mb-4">下一代通信技术革命 · 2030年商用倒计时</p>
|
||
<div class="flex justify-center items-center gap-2 mb-8">
|
||
<span class="pulse-dot"></span>
|
||
<span>强政策驱动下的主题投资与基本面验证叠加期</span>
|
||
</div>
|
||
<div class="tag-cloud justify-center">
|
||
<span>天空地海一体化</span>
|
||
<span>通信+感知+AI融合</span>
|
||
<span>卫星互联网</span>
|
||
<span>太赫兹技术</span>
|
||
<span>数字孪生</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Key Stats -->
|
||
<section class="py-12 bg-white">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
<div class="stat-card" data-aos="fade-up" data-aos-delay="100">
|
||
<h3 class="text-3xl font-bold text-purple-600 mb-2">2030</h3>
|
||
<p class="text-gray-600">规模化商用元年</p>
|
||
</div>
|
||
<div class="stat-card" data-aos="fade-up" data-aos-delay="200">
|
||
<h3 class="text-3xl font-bold text-purple-600 mb-2">2025</h3>
|
||
<p class="text-gray-600">标准化元年</p>
|
||
</div>
|
||
<div class="stat-card" data-aos="fade-up" data-aos-delay="300">
|
||
<h3 class="text-3xl font-bold text-purple-600 mb-2">3000万</h3>
|
||
<p class="text-gray-600">最高政策资金支持</p>
|
||
</div>
|
||
<div class="stat-card" data-aos="fade-up" data-aos-delay="400">
|
||
<h3 class="text-3xl font-bold text-purple-600 mb-2">100+</h3>
|
||
<p class="text-gray-600">6G研究成果发布</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Timeline Section -->
|
||
<section class="py-12 bg-gray-50">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">发展时间轴</h2>
|
||
<div class="relative">
|
||
<div class="timeline-line hidden md:block"></div>
|
||
|
||
<!-- Timeline Items -->
|
||
<div class="space-y-8">
|
||
<div class="timeline-item md:w-5/12 md:ml-auto" data-aos="fade-right">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年末-2025年初</div>
|
||
<h3 class="text-xl font-bold mb-2">政策催化元年</h3>
|
||
<p>政府工作报告首次将6G纳入"未来产业培育核心框架"，工信部明确"加快6G研发进程"</p>
|
||
</div>
|
||
|
||
<div class="timeline-item md:w-5/12" data-aos="fade-left">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2025年7月</div>
|
||
<h3 class="text-xl font-bold mb-2">首个专项资金落地</h3>
|
||
<p>北京亦庄落地全国首个地方性6G产业专项资金政策，最高支持3000万元</p>
|
||
</div>
|
||
|
||
<div class="timeline-item md:w-5/12 md:ml-auto" data-aos="fade-right">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2025年9月</div>
|
||
<h3 class="text-xl font-bold mb-2">标准突破</h3>
|
||
<p>中国电信牵头"6G系统计费研究"项目获3GPP批准，取得标准话语权</p>
|
||
</div>
|
||
|
||
<div class="timeline-item md:w-5/12" data-aos="fade-left">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2025年11月</div>
|
||
<h3 class="text-xl font-bold mb-2">6G发展大会</h3>
|
||
<p>北京举办2025年6G发展大会，发布技术试验结果和重点场景研究成果</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Core Concepts -->
|
||
<section class="py-12 bg-white">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">核心概念解析</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
||
<div class="card bg-gradient-to-br from-purple-100 to-pink-100 shadow-xl" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-xl font-bold mb-4">技术范式跃迁</h3>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start">
|
||
<span class="text-purple-600 mr-2">▸</span>
|
||
<span><strong>空天地海一体化</strong>：卫星互联网为核心，实现全域覆盖</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-purple-600 mr-2">▸</span>
|
||
<span><strong>通信+感知+AI融合</strong>：网络成为智能服务平台</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-purple-600 mr-2">▸</span>
|
||
<span><strong>太赫兹技术</strong>：6G核心频段，实现TB级传输</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card bg-gradient-to-br from-blue-100 to-cyan-100 shadow-xl" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-xl font-bold mb-4">市场认知分析</h3>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start">
|
||
<span class="text-blue-600 mr-2">▸</span>
|
||
<span><strong>乐观预期</strong>：政策密集释放，板块热度高涨</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-600 mr-2">▸</span>
|
||
<span><strong>预期差1</strong>：低估"感知"功能商业价值</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-600 mr-2">▸</span>
|
||
<span><strong>预期差2</strong>：忽视上游细分"卖铲人"机会</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产业链图谱 -->
|
||
<div class="card shadow-xl" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-xl font-bold mb-4">6G产业链关键环节</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="bg-purple-50 p-4 rounded-lg">
|
||
<h4 class="font-bold text-purple-700 mb-2">上游：核心器件</h4>
|
||
<ul class="text-sm space-y-1">
|
||
<li>• 射频器件（天线/滤波器）</li>
|
||
<li>• 基带/射频芯片</li>
|
||
<li>• 太赫兹器件</li>
|
||
<li>• 光模块/光器件</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-blue-50 p-4 rounded-lg">
|
||
<h4 class="font-bold text-blue-700 mb-2">中游：设备系统</h4>
|
||
<ul class="text-sm space-y-1">
|
||
<li>• 无线主设备</li>
|
||
<li>• 卫星制造与运营</li>
|
||
<li>• 光通信网络</li>
|
||
<li>• 网络安全设备</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-green-50 p-4 rounded-lg">
|
||
<h4 class="font-bold text-green-700 mb-2">下游：运营应用</h4>
|
||
<ul class="text-sm space-y-1">
|
||
<li>• 三大运营商</li>
|
||
<li>• 网络服务与安全</li>
|
||
<li>• 垂直行业应用</li>
|
||
<li>• 终端设备</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Key Catalysts -->
|
||
<section class="py-12 bg-gray-50">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">关键催化剂</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div class="alert alert-info shadow-lg" data-aos="zoom-in">
|
||
<div>
|
||
<h3 class="font-bold">近期催化剂</h3>
|
||
<div class="text-sm mt-2">
|
||
<p>• 2025年6G发展大会技术试验结果</p>
|
||
<p>• 地方政策细则持续出台</p>
|
||
<p>• 运营商6G资本开支边际提升</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert alert-warning shadow-lg" data-aos="zoom-in" data-aos-delay="100">
|
||
<div>
|
||
<h3 class="font-bold">发展阶段</h3>
|
||
<div class="text-sm mt-2">
|
||
<p>• 2025-2027：标准主导</p>
|
||
<p>• 2027-2030：试验验证</p>
|
||
<p>• 2030+：规模商用</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert alert-success shadow-lg" data-aos="zoom-in" data-aos-delay="200">
|
||
<div>
|
||
<h3 class="font-bold">投资方向</h3>
|
||
<div class="text-sm mt-2">
|
||
<p>• 卫星互联网产业链</p>
|
||
<p>• 核心射频器件重构</p>
|
||
<p>• 算力网络与光通信</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Risk Analysis -->
|
||
<section class="py-12 bg-white">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">风险与挑战</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div class="card bg-red-50 shadow-xl" data-aos="fade-right">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-xl font-bold text-red-700 mb-4">技术风险</h3>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<div class="flex justify-between items-center mb-1">
|
||
<span class="text-sm font-medium">太赫兹芯片"卡脖子"</span>
|
||
<span class="text-sm text-red-600">高风险</span>
|
||
</div>
|
||
<div class="risk-meter">
|
||
<div class="risk-indicator" style="left: 85%"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between items-center mb-1">
|
||
<span class="text-sm font-medium">星地融合复杂度</span>
|
||
<span class="text-sm text-yellow-600">中风险</span>
|
||
</div>
|
||
<div class="risk-meter">
|
||
<div class="risk-indicator" style="left: 60%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card bg-orange-50 shadow-xl" data-aos="fade-left">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-xl font-bold text-orange-700 mb-4">市场风险</h3>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<div class="flex justify-between items-center mb-1">
|
||
<span class="text-sm font-medium">投资规模巨大</span>
|
||
<span class="text-sm text-orange-600">高风险</span>
|
||
</div>
|
||
<div class="risk-meter">
|
||
<div class="risk-indicator" style="left: 80%"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between items-center mb-1">
|
||
<span class="text-sm font-medium">国际标准分裂</span>
|
||
<span class="text-sm text-red-600">高风险</span>
|
||
</div>
|
||
<div class="risk-meter">
|
||
<div class="risk-indicator" style="left: 90%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stock Data Table -->
|
||
<section class="py-12 bg-gray-50">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">6G产业链核心股票池</h2>
|
||
|
||
<div class="card bg-white shadow-xl" data-aos="fade-up">
|
||
<div class="card-body p-0">
|
||
<!-- Category Tabs -->
|
||
<div class="tabs tabs-boxed bg-purple-100 p-4 rounded-t-xl">
|
||
<a class="tab tab-active" onclick="filterTable('all')">全部</a>
|
||
<a class="tab" onclick="filterTable('运营商')">运营商</a>
|
||
<a class="tab" onclick="filterTable('光模块')">光模块</a>
|
||
<a class="tab" onclick="filterTable('网络设备')">网络设备</a>
|
||
<a class="tab" onclick="filterTable('基站射频器')">基站射频器</a>
|
||
</div>
|
||
|
||
<!-- Stock Table -->
|
||
<div class="stock-table">
|
||
<table class="table table-zebra w-full" id="stockTable">
|
||
<thead class="bg-purple-600 text-white">
|
||
<tr>
|
||
<th>股票名称</th>
|
||
<th>分类</th>
|
||
<th>产业链</th>
|
||
<th>核心逻辑</th>
|
||
<th>关注理由</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="stockTableBody">
|
||
<!-- Table rows will be populated by JavaScript -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Investment Insights -->
|
||
<section class="py-12 bg-gradient-to-br from-purple-600 to-pink-600 text-white">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">投资启示</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="card bg-white/10 backdrop-blur-md text-white border border-white/20" data-aos="zoom-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-lg font-bold mb-3">✓ 卫星互联网</h3>
|
||
<p class="text-sm">最具增量空间，关注运营（中国卫通）、核心载荷（铖昌科技）、星间光模块（中际旭创）</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card bg-white/10 backdrop-blur-md text-white border border-white/20" data-aos="zoom-in" data-aos-delay="100">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-lg font-bold mb-3">✓ 核心射频</h3>
|
||
<p class="text-sm">6G频段提升带来价值重构，关注通宇通讯、灿勤科技等技术领先者</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card bg-white/10 backdrop-blur-md text-white border border-white/20" data-aos="zoom-in" data-aos-delay="200">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-lg font-bold mb-3">✓ 算力网络</h3>
|
||
<p class="text-sm">AI内生网络需求，中兴通讯、紫光股份等平台型公司受益</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-12" data-aos="fade-up">
|
||
<p class="text-xl mb-4">关键跟踪指标</p>
|
||
<div class="flex flex-wrap justify-center gap-3">
|
||
<span class="badge badge-info badge-lg">研发投入占比</span>
|
||
<span class="badge badge-info badge-lg">标准专利数量</span>
|
||
<span class="badge badge-info badge-lg">技术试验进展</span>
|
||
<span class="badge badge-info badge-lg">订单兑现情况</span>
|
||
<span class="badge badge-info badge-lg">资本开支倾斜</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-900 text-white py-8">
|
||
<div class="container mx-auto px-4 text-center">
|
||
<p class="mb-2">6G产业链深度解析 | 数据来源：机构研报、互动平台、公告等</p>
|
||
<p class="text-sm text-gray-400">投资有风险，入市需谨慎</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Stock Data
|
||
const stockData = [
|
||
{stock: '中国移动', category: '运营商', industry: '6G产业链', reason: '网络建设运营主导者', focus: '运营商分类'},
|
||
{stock: '中国电信', category: '运营商', industry: '6G产业链', reason: '网络建设运营主导者', focus: '运营商分类'},
|
||
{stock: '中国联通', category: '运营商', industry: '6G产业链', reason: '网络建设运营主导者', focus: '运营商分类'},
|
||
{stock: '中兴通讯', category: '网络设备', industry: '6G产业链', reason: '端到端解决方案龙头', focus: '综合平台型'},
|
||
{stock: '中际旭创', category: '光模块', industry: '6G产业链', reason: '星间链路核心受益', focus: '光模块龙头'},
|
||
{stock: '光迅科技', category: '光模块', industry: '6G产业链', reason: '星间链路核心受益', focus: '光模块龙头'},
|
||
{stock: '新易盛', category: '光模块', industry: '6G产业链', reason: '高速光模块领先', focus: '光模块龙头'},
|
||
{stock: '华工科技', category: '光模块', industry: '6G产业链', reason: '国内电信级光模块龙头', focus: '光模块龙头'},
|
||
{stock: '通宇通讯', category: '天线', industry: '6G产业链', reason: '6G天线技术积累', focus: '天线细分龙头'},
|
||
{stock: '武汉凡谷', category: '基站射频器', industry: '6G产业链', reason: '基站射频器件价值重构', focus: '射频器件'},
|
||
{stock: '大富科技', category: '基站射频器', industry: '6G产业链', reason: '基站射频器件价值重构', focus: '射频器件'},
|
||
{stock: '灿勤科技', category: '基站射频器', industry: '6G产业链', reason: '滤波器核心技术', focus: '射频器件'},
|
||
{stock: '铖昌科技', category: '基站射频器', industry: '6G产业链', reason: '卫星射频芯片核心', focus: '卫星互联网'},
|
||
{stock: '国博电子', category: '基站射频器', industry: '6G产业链', reason: '射频芯片国家队', focus: '射频器件'},
|
||
{stock: '中国卫通', category: '运营商', industry: '6G产业链', reason: '卫星运营国家队', focus: '卫星互联网'},
|
||
{stock: '烽火通信', category: '网络设备', industry: '6G产业链', reason: '光通信全产业链', focus: '网络设备'},
|
||
{stock: '紫光股份', category: '网络设备', industry: '6G产业链', reason: 'ICT基础设施龙头', focus: '网络设备'},
|
||
{stock: '电科网安', category: '网络安全', industry: '6G产业链', reason: '6G网络安全需求提升', focus: '网络安全'},
|
||
{stock: '亨通光电', category: '光纤光缆', industry: '6G产业链', reason: '海底光缆+光纤光缆双轮驱动', focus: '有线通信'},
|
||
{stock: '长飞光纤', category: '光纤光缆', industry: '6G产业链', reason: '光纤预制棒龙头', focus: '有线通信'}
|
||
];
|
||
|
||
// Initialize AOS
|
||
AOS.init({
|
||
duration: 1000,
|
||
once: true
|
||
});
|
||
|
||
// Populate Stock Table
|
||
function populateTable(data = stockData) {
|
||
const tbody = document.getElementById('stockTableBody');
|
||
tbody.innerHTML = '';
|
||
|
||
data.forEach((stock, index) => {
|
||
const row = document.createElement('tr');
|
||
row.className = index % 2 === 0 ? 'hover:bg-purple-50' : 'hover:bg-purple-50';
|
||
row.innerHTML = `
|
||
<td class="font-semibold">${stock.stock}</td>
|
||
<td><span class="badge badge-info">${stock.category}</span></td>
|
||
<td>${stock.industry}</td>
|
||
<td class="text-sm">${stock.reason}</td>
|
||
<td><span class="text-xs text-purple-600">${stock.focus}</span></td>
|
||
`;
|
||
tbody.appendChild(row);
|
||
});
|
||
}
|
||
|
||
// Filter Table
|
||
function filterTable(category) {
|
||
// Update active tab
|
||
document.querySelectorAll('.tab').forEach(tab => {
|
||
tab.classList.remove('tab-active');
|
||
});
|
||
event.target.classList.add('tab-active');
|
||
|
||
// Filter data
|
||
const filteredData = category === 'all'
|
||
? stockData
|
||
: stockData.filter(stock => stock.category === category);
|
||
|
||
populateTable(filteredData);
|
||
}
|
||
|
||
// Initialize table on load
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
populateTable();
|
||
});
|
||
|
||
// Add smooth scroll
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |