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

466
public/htmls/机器人皮肤仿生皮肤.html Normal file
View File

@@ -0,0 +1,466 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>机器人皮肤/仿生皮肤 - 概念深度分析</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></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=Inter:wght@300;400;500;600;700&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #667eea;
left: -10px;
top: 6px;
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.tech-tag {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.table-scroll-custom {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-scroll-custom::-webkit-scrollbar {
height: 8px;
}
.table-scroll-custom::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.table-scroll-custom::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.table-scroll-custom::-webkit-scrollbar-thumb:hover {
background: #555;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse-animation {
animation: pulse 2s infinite;
}
.risk-card {
border-left: 4px solid #ef4444;
}
.opportunity-card {
border-left: 4px solid #10b981;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col items-center text-center">
<div class="mb-6 pulse-animation">
<i class="fas fa-robot text-6xl"></i>
</div>
<h1 class="text-5xl font-bold mb-4">机器人皮肤/仿生皮肤</h1>
<p class="text-xl mb-8 opacity-90">从前沿技术到商业化落地的关键转折</p>
<div class="flex flex-wrap gap-4 justify-center">
<span class="bg-white/20 px-4 py-2 rounded-full backdrop-blur-sm">
<i class="fas fa-chart-line mr-2"></i>具身智能核心
</span>
<span class="bg-white/20 px-4 py-2 rounded-full backdrop-blur-sm">
<i class="fas fa-hand-sparkles mr-2"></i>触觉感知革命
</span>
<span class="bg-white/20 px-4 py-2 rounded-full backdrop-blur-sm">
<i class="fas fa-atom mr-2"></i>万亿级市场
</span>
</div>
</div>
</div>
</section>
<!-- 核心数据展示 -->
<section class="py-12 -mt-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="glass-effect rounded-xl p-6 hover-scale">
<div class="text-3xl font-bold text-purple-600 mb-2">2000-8000</div>
<div class="text-gray-600">单机器人手部价值量(元)</div>
</div>
<div class="glass-effect rounded-xl p-6 hover-scale">
<div class="text-3xl font-bold text-purple-600 mb-2">10倍</div>
<div class="text-gray-600">2025年出货量增长</div>
</div>
<div class="glass-effect rounded-xl p-6 hover-scale">
<div class="text-3xl font-bold text-purple-600 mb-2">30+</div>
<div class="text-gray-600">汉威科技覆盖客户数</div>
</div>
<div class="glass-effect rounded-xl p-6 hover-scale">
<div class="text-3xl font-bold text-purple-600 mb-2">300万+</div>
<div class="text-gray-600">商业化按压寿命要求</div>
</div>
</div>
</div>
</section>
<!-- 事件时间轴 -->
<section class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">核心催化事件</h2>
<div class="max-w-4xl mx-auto">
<div class="space-y-6">
<div class="flex items-start glass-effect rounded-lg p-4">
<div class="timeline-dot flex-1">
<div class="font-semibold text-purple-600">2025年2月</div>
<div class="text-gray-700 mt-1">产业链初步联动 - 唯科科技将仿生机器人电子 skin 作为重点项目</div>
</div>
</div>
<div class="flex items-start glass-effect rounded-lg p-4">
<div class="timeline-dot flex-1">
<div class="font-semibold text-purple-600">2025年4月21日</div>
<div class="text-gray-700 mt-1">情绪引爆点 - 央视报道订单爆发式增长，企业24小时赶工</div>
</div>
</div>
<div class="flex items-start glass-effect rounded-lg p-4">
<div class="timeline-dot flex-1">
<div class="font-semibold text-purple-600">2025年6-8月</div>
<div class="text-gray-700 mt-1">认知深化 - 特斯拉Gen3采用"压阻+电容"混合方案</div>
</div>
</div>
<div class="flex items-start glass-effect rounded-lg p-4">
<div class="timeline-dot flex-1">
<div class="font-semibold text-purple-600">2025年10-11月</div>
<div class="text-gray-700 mt-1">应用具象化 - 小鹏发布全包覆柔性 skin，Figure 03展示织物 skin</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑分析 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center">核心逻辑与市场认知</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="hover-scale">
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl p-6 h-full">
<i class="fas fa-microchip text-4xl text-blue-600 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">技术刚需驱动</h3>
<p class="text-gray-600">解决人形机器人"好用"问题的关键，实现全身覆盖和精细触觉感知，是具身智能的终极触觉方案</p>
</div>
</div>
<div class="hover-scale">
<div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl p-6 h-full">
<i class="fas fa-dollar-sign text-4xl text-green-600 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">成本优势显著</h3>
<p class="text-gray-600">单手成本2000-8000元，对比单个六维力矩传感器1万元，性价比优势明显，覆盖面积更大</p>
</div>
</div>
<div class="hover-scale">
<div class="bg-gradient-to-br from-purple-50 to-pink-100 rounded-xl p-6 h-full">
<i class="fas fa-chart-line text-4xl text-purple-600 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">商业化拐点</h3>
<p class="text-gray-600">订单爆发、产能提升、技术迭代成熟，客户从单手指试用扩展到全手甚至身体关节安装</p>
</div>
</div>
</div>
</div>
</section>
<!-- 预期差分析 -->
<section class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">预期差分析</h2>
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="risk-card bg-red-50 rounded-lg p-6">
<div class="flex items-center mb-3">
<i class="fas fa-exclamation-triangle text-red-600 text-2xl mr-3"></i>
<h3 class="text-lg font-semibold text-red-800">市场过热预期</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• "订单爆发"实为低基数增长</li>
<li>• 多数订单处于送样/小批量阶段</li>
<li>• 技术领先不等于量产能力</li>
</ul>
</div>
<div class="opportunity-card bg-green-50 rounded-lg p-6">
<div class="flex items-center mb-3">
<i class="fas fa-lightbulb text-green-600 text-2xl mr-3"></i>
<h3 class="text-lg font-semibold text-green-800">产业实际进展</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• "从0到1"的早期量产阶段</li>
<li>• 良率控制是当前最大挑战</li>
<li>• 供应商格局仍有变数</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">产业链核心标的</h2>
<div class="table-scroll-custom">
<table class="w-full bg-white rounded-lg overflow-hidden shadow-lg">
<thead class="gradient-bg text-white">
<tr>
<th class="px-6 py-4 text-left">股票名称</th>
<th class="px-6 py-4 text-left">核心业务</th>
<th class="px-6 py-4 text-left">业务进展</th>
<th class="px-6 py-4 text-left">信息来源</th>
<th class="px-6 py-4 text-left">投资逻辑</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<!-- 核心中游 -->
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold text-purple-600">汉威科技</td>
<td class="px-6 py-4">电子皮肤</td>
<td class="px-6 py-4">已向部分机器人厂家小批量供货</td>
<td class="px-6 py-4">年报</td>
<td class="px-6 py-4">中游核心，覆盖30+客户</td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-6 py-4 font-semibold text-blue-600">福莱新材</td>
<td class="px-6 py-4">传感器材料</td>
<td class="px-6 py-4">高性能柔性传感器材料，二代曲面设计</td>
<td class="px-6 py-4">公告</td>
<td class="px-6 py-4">中游追赶者，技术储备深厚</td>
</tr>
<!-- 上游材料 -->
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 font-semibold text-green-600">道恩股份</td>
<td class="px-6 py-4">热塑弹性体</td>
<td class="px-6 py-4">重点开发仿生皮肤应用，解决材料发粘问题</td>
<td class="px-6 py-4">互动</td>
<td class="px-6 py-4">上游核心材料供应商</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 font-semibold text-green-600">浙江众成</td>
<td class="px-6 py-4">热塑弹性体</td>
<td class="px-6 py-4">TPE材料成本降低30%，供货头部厂商</td>
<td class="px-6 py-4">机构研报</td>
<td class="px-6 py-4">性价比优势明显</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 font-semibold text-green-600">硅宝科技</td>
<td class="px-6 py-4">硅橡胶</td>
<td class="px-6 py-4">中国有机硅密封胶行业龙头，总产能21万吨/年</td>
<td class="px-6 py-4">研报</td>
<td class="px-6 py-4">上游基础材料龙头</td>
</tr>
<!-- 其他关键标的 -->
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-semibold text-indigo-600">申昊科技</td>
<td class="px-6 py-4">柔性传感器</td>
<td class="px-6 py-4">已小批量应用于公司操作类机器人</td>
<td class="px-6 py-4">调研</td>
<td class="px-6 py-4">技术差异化，应用明确</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-semibold text-indigo-600">奥迪威</td>
<td class="px-6 py-4">检测</td>
<td class="px-6 py-4">电子皮肤是公司新技术发展路线之一</td>
<td class="px-6 py-4">调研</td>
<td class="px-6 py-4">离电式/电容式技术路线</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-semibold text-indigo-600">唯科科技</td>
<td class="px-6 py-4">传感器材料</td>
<td class="px-6 py-4">IME模内电子技术应用开发中</td>
<td class="px-6 py-4">调研</td>
<td class="px-6 py-4">塑胶人皮+电子技术结合</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center">投资启示与风险提示</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl p-8 mb-8">
<h3 class="text-2xl font-bold mb-4 text-purple-800">
<i class="fas fa-star mr-2"></i>核心投资策略
</h3>
<div class="space-y-4">
<div class="flex items-start">
<span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">1</span>
<div>
<h4 class="font-semibold text-purple-800">首选核心标的</h4>
<p class="text-gray-700">汉威科技 - 11年技术积累，广泛客户覆盖，明确量产规划</p>
</div>
</div>
<div class="flex items-start">
<span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">2</span>
<div>
<h4 class="font-semibold text-purple-800">次选配置方向</h4>
<p class="text-gray-700">技术差异化玩家(奥迪威、申昊科技) + 上游关键材料(道恩股份、浙江众成)</p>
</div>
</div>
<div class="flex items-start">
<span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">3</span>
<div>
<h4 class="font-semibold text-purple-800">关键跟踪指标</h4>
<p class="text-gray-700">汉威科技季度财报、头部机器人厂商供应商名单、行业渗透率数据</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-red-100 to-orange-100 rounded-xl p-8">
<h3 class="text-2xl font-bold mb-4 text-red-800">
<i class="fas fa-exclamation-circle mr-2"></i>主要风险提示
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="risk-card bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-700 mb-2">技术风险</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 多模态集成难题</li>
<li>• 300万次寿命要求</li>
<li>• 标准化缺失</li>
</ul>
</div>
<div class="risk-card bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-700 mb-2">商业化风险</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 成本下降曲线不确定</li>
<li>• ROI验证待观察</li>
<li>• 价格战风险</li>
</ul>
</div>
<div class="risk-card bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-700 mb-2">竞争风险</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 供应商格局未定</li>
<li>• 特斯拉最终选择不明</li>
<li>• 知识产权纠纷可能</li>
</ul>
</div>
<div class="risk-card bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-700 mb-2">信息风险</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 市场情绪过热</li>
<li>• 关键数据不透明</li>
<li>• 概念炒作与实际差距</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="gradient-bg text-white py-8">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">本报告仅供参考，不构成投资建议</p>
<p class="text-sm opacity-75">数据来源：公开信息整理 | 更新时间：2025年11月</p>
</div>
</footer>
<script>
// 添加滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// 观察所有卡片元素
document.querySelectorAll('.hover-scale').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);
});
// 表格行点击高亮
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('click', function() {
// 移除其他高亮
document.querySelectorAll('tbody tr').forEach(r => {
r.classList.remove('ring-2', 'ring-purple-500');
});
// 添加当前高亮
this.classList.add('ring-2', 'ring-purple-500');
});
});
// 添加平滑滚动
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',
block: 'start'
});
}
});
});
</script>
</body>
</html>