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

530
public/htmls/华为Mate80.html Normal file
View File

@@ -0,0 +1,530 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为Mate80 - 国产替代与AI创新的双轮驱动</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/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=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.timeline-connector {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.tech-card {
background: linear-gradient(145deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
border: 1px solid rgba(99, 102, 241, 0.2);
}
.risk-card {
background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
border: 1px solid rgba(239, 68, 68, 0.2);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Navigation -->
<div class="navbar glass-effect fixed top-0 z-50">
<div class="navbar-start">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<i class="fas fa-bars"></i>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow glass-effect rounded-box w-52">
<li><a href="#events">概念事件</a></li>
<li><a href="#insights">核心观点</a></li>
<li><a href="#industry">产业链</a></li>
<li><a href="#risks">风险挑战</a></li>
<li><a href="#conclusion">投资启示</a></li>
</ul>
</div>
<a class="btn btn-ghost text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
华为Mate80
</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="#events" class="hover:text-purple-400 transition">概念事件</a></li>
<li><a href="#insights" class="hover:text-purple-400 transition">核心观点</a></li>
<li><a href="#industry" class="hover:text-purple-400 transition">产业链</a></li>
<li><a href="#risks" class="hover:text-purple-400 transition">风险挑战</a></li>
<li><a href="#conclusion" class="hover:text-purple-400 transition">投资启示</a></li>
</ul>
</div>
<div class="navbar-end">
<div class="badge badge-warning gap-2">
<span class="pulse-dot w-2 h-2 bg-yellow-400 rounded-full inline-block"></span>
高热度概念
</div>
</div>
</div>
<!-- Hero Section -->
<div class="hero min-h-screen gradient-bg flex items-center" style="padding-top: 60px;">
<div class="hero-content text-center text-white max-w-5xl">
<div class="max-w-4xl">
<h1 class="mb-5 text-5xl font-bold">
华为Mate80
<span class="block text-3xl mt-2 text-purple-200">国产替代与AI创新的双轮驱动</span>
</h1>
<p class="mb-5 text-xl">
承载中国核心技术全面回归与超越的重任<br>
从"功能手机"向"AI智能终端"的战略转型
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<div class="glass-effect px-6 py-3 rounded-full">
<i class="fas fa-microchip mr-2"></i>麒麟9030芯片
</div>
<div class="glass-effect px-6 py-3 rounded-full">
<i class="fas fa-robot mr-2"></i>鸿蒙OS 6.0 + AI Agent
</div>
<div class="glass-effect px-6 py-3 rounded-full">
<i class="fas fa-satellite mr-2"></i>卫星通信 + eSIM
</div>
</div>
</div>
</div>
</div>
<!-- Core Events Timeline -->
<section id="events" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
概念事件时间轴
</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 timeline-connector"></div>
<!-- Timeline Items -->
<div class="relative mb-12">
<div class="flex items-center justify-end w-full lg:w-1/2 pr-8">
<div class="glass-effect p-6 rounded-lg hover-lift max-w-md">
<div class="text-sm text-purple-400 mb-2">2025年8月</div>
<h3 class="text-xl font-semibold mb-2">技术突破预告</h3>
<p class="text-gray-300">麒麟9030芯片采用创新先进封装和SRAM后置设计，性能追平骁龙8 Gen 3</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
</div>
<div class="relative mb-12">
<div class="flex items-center justify-start w-full lg:w-1/2 pl-8 lg:ml-auto">
<div class="glass-effect p-6 rounded-lg hover-lift max-w-md">
<div class="text-sm text-purple-400 mb-2">2025年9月</div>
<h3 class="text-xl font-semibold mb-2">三折叠手机发布</h3>
<p class="text-gray-300">Mate XTs发布，首次公开麒麟9020芯片，为Mate80预热</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
</div>
<div class="relative mb-12">
<div class="flex items-center justify-end w-full lg:w-1/2 pr-8">
<div class="glass-effect p-6 rounded-lg hover-lift max-w-md">
<div class="text-sm text-purple-400 mb-2">2025年10月</div>
<h3 class="text-xl font-semibold mb-2">供应链细节曝光</h3>
<p class="text-gray-300">5款机型规划，OCA胶、AR镀膜等供应链细节流出</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
</div>
<div class="relative">
<div class="flex items-center justify-start w-full lg:w-1/2 pl-8 lg:ml-auto">
<div class="glass-effect p-6 rounded-lg hover-lift max-w-md">
<div class="text-sm text-purple-400 mb-2">2025年11月中下旬</div>
<h3 class="text-xl font-semibold mb-2">全球发布会</h3>
<p class="text-gray-300">华为Mate80系列正式发布，所有预期集中验证</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full pulse-dot"></div>
</div>
</div>
</div>
</section>
<!-- Core Insights -->
<section id="insights" class="py-20 px-4 bg-gray-800">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
核心观点摘要
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-effect p-8 rounded-lg hover-lift">
<div class="text-4xl mb-4 text-purple-400">
<i class="fas fa-microchip"></i>
</div>
<h3 class="text-xl font-semibold mb-3">半导体技术破局</h3>
<p class="text-gray-300">通过架构创新实现弯道超车，拉动国产半导体产业链全面发展</p>
</div>
<div class="glass-effect p-8 rounded-lg hover-lift">
<div class="text-4xl mb-4 text-purple-400">
<i class="fas fa-brain"></i>
</div>
<h3 class="text-xl font-semibold mb-3">端侧AI范式转移</h3>
<p class="text-gray-300">AI Agent从功能助手向智能体进化，形成软硬芯云协同闭环</p>
</div>
<div class="glass-effect p-8 rounded-lg hover-lift">
<div class="text-4xl mb-4 text-purple-400">
<i class="fas fa-satellite-dish"></i>
</div>
<h3 class="text-xl font-semibold mb-3">通信生态升维</h3>
<p class="text-gray-300">卫星直连+eSIM打破传统限制，实现天地一体化网络互联</p>
</div>
</div>
<!-- Market Analysis -->
<div class="mt-12">
<h3 class="text-2xl font-semibold mb-6">市场认知分析</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="tech-card p-6 rounded-lg">
<h4 class="text-lg font-semibold mb-3 text-purple-300">
<i class="fas fa-fire mr-2"></i>市场热度
</h4>
<ul class="space-y-2 text-gray-300">
<li>• 舆情榜单反复出现，资金关注度极高</li>
<li>• 研报目标涨幅数倍，情绪极其高涨</li>
<li>• 乐观情绪占绝对主导，市场倾向相信技术突破</li>
</ul>
</div>
<div class="risk-card p-6 rounded-lg">
<h4 class="text-lg font-semibold mb-3 text-orange-300">
<i class="fas fa-exclamation-triangle mr-2"></i>预期差分析
</h4>
<ul class="space-y-2 text-gray-300">
<li>• 主动散热技术可靠性未经验证</li>
<li>• 产业链订单确定性存在夸大成分</li>
<li>• AI生态实际体验被市场忽略</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Industry Chain Analysis -->
<section id="industry" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
产业链与核心公司
</h2>
<!-- Stock Data Table -->
<div class="mb-12">
<h3 class="text-2xl font-semibold mb-6">核心标的梳理</h3>
<div class="table-responsive">
<table class="table table-zebra w-full glass-effect">
<thead>
<tr class="text-purple-300">
<th>股票名称</th>
<th>行业环节</th>
<th>关联项目</th>
<th>产业链定位</th>
<th>投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">艾为电子</td>
<td><span class="badge badge-primary">微泵液冷</span></td>
<td>压电微泵液冷驱动芯片</td>
<td>智能终端液冷散热芯片供应</td>
<td>应用于智能手机/平板/PC等终端产品</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">南芯科技</td>
<td><span class="badge badge-primary">微泵液冷</span></td>
<td>压电微泵液冷驱动芯片</td>
<td>移动智能终端液冷散热</td>
<td>已在客户导入验证，实现低功耗散热</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">飞荣达</td>
<td><span class="badge badge-secondary">散热方案</span></td>
<td>热管理产品</td>
<td>消费电子/通信设备散热</td>
<td>热管产品应用于消费电子和通信设备</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">沃特股份</td>
<td><span class="badge badge-secondary">散热材料</span></td>
<td>散热材料方案</td>
<td>高算力芯片散热材料供应</td>
<td>LCF散热风扇材料用于英伟达等客户</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">蜂助手</td>
<td><span class="badge badge-accent">智能体</span></td>
<td>云手机产品</td>
<td>运营商云手机生态</td>
<td>与华为云深度协同打造云手机产品</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">彩讯股份</td>
<td><span class="badge badge-accent">智能体</span></td>
<td>智能体应用开发</td>
<td>华为云生态合作</td>
<td>接入华为"小艺"智能体实现业务直达</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">欧菲光</td>
<td><span class="badge badge-info">摄像头</span></td>
<td>摄像头模组</td>
<td>3D结构光国产化</td>
<td>为华为Mate系列供应摄像头相关模组</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">思特威</td>
<td><span class="badge badge-info">传感器</span></td>
<td>Pura80 Pro主摄传感器</td>
<td>高端CMOS传感器国产化</td>
<td>首款国产定制化一英寸大底CMOS</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Investment Value Analysis -->
<div class="grid md:grid-cols-3 gap-6 mt-12">
<div class="glass-effect p-6 rounded-lg border-l-4 border-green-500">
<h4 class="text-lg font-semibold mb-3 text-green-400">
<i class="fas fa-star mr-2"></i>首选投资标的
</h4>
<p class="text-gray-300 mb-3">主动散热产业链</p>
<ul class="space-y-1 text-sm text-gray-400">
<li>• 艾为电子：驱动芯片核心</li>
<li>• 南芯科技：电源管理关键</li>
<li>• 逻辑纯粹，AI端侧化直接受益</li>
</ul>
</div>
<div class="glass-effect p-6 rounded-lg border-l-4 border-blue-500">
<h4 class="text-lg font-semibold mb-3 text-blue-400">
<i class="fas fa-shield-alt mr-2"></i>稳健投资选择
</h4>
<p class="text-gray-300 mb-3">国产核心芯片供应链</p>
<ul class="space-y-1 text-sm text-gray-400">
<li>• 北京君正：SRAM龙头</li>
<li>• 确定性高，阿尔法显著</li>
<li>• 与华为深度绑定</li>
</ul>
</div>
<div class="glass-effect p-6 rounded-lg border-l-4 border-orange-500">
<h4 class="text-lg font-semibold mb-3 text-orange-400">
<i class="fas fa-exclamation-circle mr-2"></i>谨慎对待标的
</h4>
<p class="text-gray-300 mb-3">主题性过强环节</p>
<ul class="space-y-1 text-sm text-gray-400">
<li>• 日海智能：eSIM独待验证</li>
<li>• 部分新材料：远期故事长</li>
<li>• 赔率高但胜率低</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section id="risks" class="py-20 px-4 bg-gray-800">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
潜在风险与挑战
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="risk-card p-6 rounded-lg">
<div class="text-3xl mb-4 text-red-400">
<i class="fas fa-wrench"></i>
</div>
<h3 class="text-xl font-semibold mb-3">技术风险</h3>
<ul class="space-y-2 text-gray-300">
<li>• 主动散热可靠性挑战</li>
<li>• 麒麟9030良率爬坡</li>
<li>• 实际性能待第三方验证</li>
</ul>
</div>
<div class="risk-card p-6 rounded-lg">
<div class="text-3xl mb-4 text-red-400">
<i class="fas fa-dollar-sign"></i>
</div>
<h3 class="text-xl font-semibold mb-3">商业化风险</h3>
<ul class="space-y-2 text-gray-300">
<li>• 成本控制压力巨大</li>
<li>• 高溢价接受度存疑</li>
<li>• 市场竞争日趋激烈</li>
</ul>
</div>
<div class="risk-card p-6 rounded-lg">
<div class="text-3xl mb-4 text-red-400">
<i class="fas fa-gavel"></i>
</div>
<h3 class="text-xl font-semibold mb-3">政策与竞争</h3>
<ul class="space-y-2 text-gray-300">
<li>• 外部制裁加剧风险</li>
<li>• 行业巨头快速迭代</li>
<li>• 信息交叉验证风险突出</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Conclusion -->
<section id="conclusion" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
综合结论与投资启示
</h2>
<div class="glass-effect p-8 rounded-lg">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-300">最终看法</h3>
<p class="text-gray-300 leading-relaxed">
华为Mate80概念正处于由宏大预期驱动向基本面验证过渡的关键阶段。它具备强大的技术内核和国家战略意义，但市场当前情绪已部分超前于现实，存在交易性拥挤的风险。
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-300">关键跟踪指标</h3>
<ul class="space-y-2 text-gray-300">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
<span>发布后第三方评测数据</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
<span>核心供应商财报验证</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
<span>eSIM进展官方确认</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
<span>出货量与市场反馈</span>
</li>
</ul>
</div>
</div>
<div class="mt-8 p-6 bg-gradient-to-r from-purple-900/30 to-pink-900/30 rounded-lg border border-purple-500/30">
<p class="text-center text-lg italic">
"投资启示：在确定性中寻找阿尔法，在不确定性中控制风险"
</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer p-10 bg-gray-800 text-gray-400">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-white text-lg font-semibold mb-4">关于概念</h3>
<p class="text-sm">华为Mate80代表中国科技创新的里程碑，是国产替代与AI创新的核心载体。</p>
</div>
<div>
<h3 class="text-white text-lg font-semibold mb-4">快速链接</h3>
<ul class="space-y-2 text-sm">
<li><a href="#events" class="hover:text-purple-400 transition">概念事件</a></li>
<li><a href="#insights" class="hover:text-purple-400 transition">核心观点</a></li>
<li><a href="#industry" class="hover:text-purple-400 transition">产业链</a></li>
</ul>
</div>
<div>
<h3 class="text-white text-lg font-semibold mb-4">相关资源</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-purple-400 transition">研究报告</a></li>
<li><a href="#" class="hover:text-purple-400 transition">新闻动态</a></li>
<li><a href="#" class="hover:text-purple-400 transition">数据分析</a></li>
</ul>
</div>
<div>
<h3 class="text-white text-lg font-semibold mb-4">免责声明</h3>
<p class="text-sm">本文档仅供参考，不构成投资建议。投资有风险，入市需谨慎。</p>
</div>
</div>
<div class="divider divider-gray-700"></div>
<div class="text-center text-sm">
<p>&copy; 2025 华为Mate80概念分析. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Smooth scrolling for navigation links
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'
});
}
});
});
// Add scroll effect to navbar
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('shadow-lg');
} else {
navbar.classList.remove('shadow-lg');
}
});
// Intersection Observer for fade-in animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 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);
// Apply observer to sections
document.querySelectorAll('section').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
</script>
</body>
</html>