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

416
public/htmls/灯塔工厂.html Normal file
View File

@@ -0,0 +1,416 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>灯塔工厂概念深度解析</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<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;
}
.glass-morphism {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.timeline-item::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: #6366f1;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}
.timeline-line {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #6366f1 0%, #a855f7 100%);
}
.stat-card {
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.badge-glow {
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); }
50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
min-width: 800px;
}
@media (max-width: 640px) {
.table-responsive {
margin: 0 -1rem;
padding: 0 1rem;
}
}
.pulse-dot {
display: inline-block;
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: pulse 1.5s 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); }
}
</style>
</head>
<body>
<div class="min-h-screen p-4 md:p-8">
<!-- 头部 -->
<header class="glass-morphism rounded-2xl p-6 md:p-8 mb-8 shadow-2xl">
<div class="flex items-center justify-between flex-wrap gap-4">
<div>
<h1 class="text-3xl md:text-5xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-2">
灯塔工厂概念
</h1>
<p class="text-gray-600 flex items-center gap-2">
<span class="pulse-dot"></span>
<span>制造业智能化转型的全球标杆</span>
</p>
</div>
<div class="flex gap-3">
<span class="badge badge-lg badge-info badge-glow">AI+制造</span>
<span class="badge badge-lg badge-success">中国领先</span>
</div>
</div>
</header>
<!-- 核心数据展示 -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div class="stat-card glass-morphism rounded-xl p-6 text-center">
<div class="text-4xl font-bold text-indigo-600">50%</div>
<div class="text-sm text-gray-600 mt-2">新增工厂数中国占比</div>
</div>
<div class="stat-card glass-morphism rounded-xl p-6 text-center">
<div class="text-4xl font-bold text-purple-600">6家</div>
<div class="text-sm text-gray-600 mt-2">中国新增灯塔工厂数</div>
</div>
<div class="stat-card glass-morphism rounded-xl p-6 text-center">
<div class="text-4xl font-bold text-pink-600">70-80%</div>
<div class="text-sm text-gray-600 mt-2">生产效率提升</div>
</div>
<div class="stat-card glass-morphism rounded-xl p-6 text-center">
<div class="text-4xl font-bold text-cyan-600">-50%</div>
<div class="text-sm text-gray-600 mt-2">用工人数减少</div>
</div>
</div>
<!-- 时间轴 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-clock text-indigo-600"></i>
关键时间轴
</h2>
<div class="relative pl-8">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="timeline-item relative">
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4">
<div class="font-bold text-indigo-600">2018年</div>
<div class="text-gray-700">世界经济论坛启动"全球灯塔网络"项目</div>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4">
<div class="font-bold text-purple-600">2025年7月25日</div>
<div class="text-gray-700">湖北省计划开工美的全球"灯塔工厂"升级项目</div>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-gradient-to-r from-pink-50 to-red-50 rounded-lg p-4 border-2 border-red-200">
<div class="font-bold text-red-600">2025年9月16日</div>
<div class="text-gray-700 font-semibold">核心催化事件：WEF公布新名单，中国占6家</div>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg p-4">
<div class="font-bold text-orange-600">2025年10月9日</div>
<div class="text-gray-700">市场情绪高峰，概念股成为舆论焦点</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心逻辑 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-brain text-purple-600"></i>
三重核心驱动力
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6">
<div class="text-3xl mb-3">🏛️</div>
<h3 class="font-bold text-lg mb-2 text-blue-800">政策驱动</h3>
<p class="text-sm text-gray-700">与《中国制造2025》深度绑定，政策引导和行业标准确认</p>
</div>
<div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6">
<div class="text-3xl mb-3">🤖</div>
<h3 class="font-bold text-lg mb-2 text-purple-800">技术成熟</h3>
<p class="text-sm text-gray-700">云计算、大数据、AI、5G等技术融合，推动智能化转型</p>
</div>
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6">
<div class="text-3xl mb-3">💰</div>
<h3 class="font-bold text-lg mb-2 text-green-800">商业价值</h3>
<p class="text-sm text-gray-700">降本增效显著，材料利用率98%，毛利率提升</p>
</div>
</div>
</div>
<!-- 产业链分析 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-sitemap text-green-600"></i>
产业链图谱
</h2>
<div class="space-y-4">
<div class="flex items-center gap-3 bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg p-4">
<span class="badge badge-lg badge-secondary">上游</span>
<span class="text-gray-700">基础技术与硬件（芯片、传感器、机器人本体、云计算）</span>
</div>
<div class="flex items-center gap-3 bg-gradient-to-r from-blue-50 to-indigo-100 rounded-lg p-4">
<span class="badge badge-lg badge-primary">中游</span>
<div class="flex-1">
<div class="font-semibold mb-1">核心赋能层</div>
<div class="flex flex-wrap gap-2">
<span class="badge badge-info">工业软件</span>
<span class="badge badge-info">自动化设备</span>
<span class="badge badge-info">系统集成</span>
<span class="badge badge-info">咨询设计</span>
</div>
</div>
</div>
<div class="flex items-center gap-3 bg-gradient-to-r from-purple-50 to-purple-100 rounded-lg p-4">
<span class="badge badge-lg badge-accent">下游</span>
<span class="text-gray-700">灯塔工厂所有者（家电、新能源、工程机械等行业龙头）</span>
</div>
</div>
</div>
<!-- 股票数据表格 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-chart-line text-indigo-600"></i>
核心企业分析
</h2>
<!-- 灯塔工厂拥有者 -->
<div class="mb-8">
<h3 class="text-lg font-semibold mb-4 text-indigo-600">
<i class="fas fa-trophy mr-2"></i>灯塔工厂所有者
</h3>
<div class="table-responsive">
<table class="table table-zebra w-full">
<thead>
<tr class="bg-gradient-to-r from-indigo-500 to-purple-500 text-white">
<th>股票名称</th>
<th>灯塔工厂数量</th>
<th>行业地位</th>
<th>投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">海尔智家</td>
<td><span class="badge badge-success badge-lg">12座</span></td>
<td>全球第一</td>
<td class="text-sm">智能制造顶级实践，组织能力领先</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">工业富联</td>
<td><span class="badge badge-info badge-lg">8座</span></td>
<td>A股第二</td>
<td class="text-sm">消费电子制造，富士康生态优势</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">美的集团</td>
<td><span class="badge badge-info badge-lg">8座</span></td>
<td>A股第二</td>
<td class="text-sm">家电龙头，智能化转型标杆</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">宁德时代</td>
<td><span class="badge badge-warning badge-lg">3座</span></td>
<td>A股第三</td>
<td class="text-sm">新能源赛道核心，成本与技术优势</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">三一重工</td>
<td><span class="badge badge-warning badge-lg">3座</span></td>
<td>A股第三</td>
<td class="text-sm">重工业智能化代表，AI赋能前景</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 核心赋能者 -->
<div>
<h3 class="text-lg font-semibold mb-4 text-purple-600">
<i class="fas fa-cogs mr-2"></i>核心技术赋能者
</h3>
<div class="table-responsive">
<table class="table table-zebra w-full">
<thead>
<tr class="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
<th>股票名称</th>
<th>业务领域</th>
<th>相关业务</th>
<th>核心优势</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">埃斯顿</td>
<td><span class="badge badge-primary">工业机器人</span></td>
<td class="text-sm">参与锂电、光伏、工程机械等多行业灯塔工厂建设</td>
<td class="text-sm">多行业应用经验，受益自动化渗透</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">中控技术</td>
<td><span class="badge badge-primary">工业控制</span></td>
<td class="text-sm">打造Industrial AI标杆案例及灯塔工厂</td>
<td class="text-sm">平台级选手，跨行业赋能</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">中望软件</td>
<td><span class="badge badge-primary">工业软件</span></td>
<td class="text-sm">研发设计类工业软件，灯塔客户推广</td>
<td class="text-sm">国产替代，研发创新基石</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">东土科技</td>
<td><span class="badge badge-primary">工业通信</span></td>
<td class="text-sm">联合发布全球灯塔工厂5G云化PLC应用</td>
<td class="text-sm">5G+工业互联网技术领先</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">鼎捷数智</td>
<td><span class="badge badge-primary">MES系统</span></td>
<td class="text-sm">打造戴卡世界灯塔工厂等标杆案例</td>
<td class="text-sm">制造执行领域专业服务商</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 投资启示 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 mt-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-lightbulb text-yellow-500"></i>
投资启示
</h2>
<div class="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-xl p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-bold text-lg mb-3 text-orange-800">投资价值排序</h3>
<ol class="space-y-2">
<li class="flex items-start gap-2">
<span class="badge badge-warning">1</span>
<span class="text-sm">工业软件与自动化平台商（中控技术、埃斯顿）</span>
</li>
<li class="flex items-start gap-2">
<span class="badge badge-warning">2</span>
<span class="text-sm">战略践行的下游龙头（三一重工、宁德时代）</span>
</li>
</ol>
</div>
<div>
<h3 class="font-bold text-lg mb-3 text-orange-800">关键跟踪指标</h3>
<ul class="space-y-1 text-sm">
<li class="flex items-center gap-2">
<i class="fas fa-check-circle text-green-500"></i>
<span>赋能者：收入增速、毛利率、新签订单</span>
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check-circle text-green-500"></i>
<span>所有者：毛利率、人均产值、存货周转率</span>
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check-circle text-green-500"></i>
<span>宏观：政策动向、产业基金投入</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="text-center mt-12 text-white">
<p class="text-sm opacity-80">数据来源：公开信息整理 | 仅供研究参考</p>
</footer>
</div>
<script>
// 添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 表格响应式处理
function handleTableResize() {
const tables = document.querySelectorAll('.table-responsive');
tables.forEach(table => {
if (window.innerWidth < 640) {
table.style.width = '100vw';
} else {
table.style.width = '100%';
}
});
}
window.addEventListener('resize', handleTableResize);
handleTableResize();
</script>
</body>
</html>