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

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 17:38:54 +08:00
parent 0e32076e71
commit cb4c51a958
65 changed files with 39193 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

585
public/htmls/6G产业链.html Normal file
View File

@@ -0,0 +1,585 @@
<!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>