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

update pay function

Browse Source
This commit is contained in:
zzlgreat
2025-11-21 14:34:15 +08:00
parent 0aa050b95f
commit 564caa08c2
10 changed files with 6355 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

604
public/htmls/忆阻器.html Normal file
View File

@@ -0,0 +1,604 @@
我将为您生成一个专业、详实的忆阻器概念分析页面，融合金融分析深度与现代前端美学。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>忆阻器 - 下一代AI硬件的颠覆性力量</title>
<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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tech-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tech-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.timeline-line {
background: linear-gradient(180deg, transparent, #667eea, #764ba2, transparent);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.5);
}
}
.stock-table {
font-size: 14px;
}
.stock-table th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-weight: 600;
}
.risk-badge {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { box-shadow: 0 0 5px #ef4444; }
to { box-shadow: 0 0 20px #ef4444, 0 0 30px #ef4444; }
}
.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 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
@media (max-width: 768px) {
.stock-table {
font-size: 12px;
}
.tech-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<header class="hero-gradient text-white relative">
<div class="container mx-auto px-4 py-16 relative z-10">
<div class="text-center">
<div class="inline-block mb-4">
<span class="glass-effect px-4 py-2 rounded-full text-sm">
<i class="fas fa-microchip mr-2"></i>前沿科技 · 金融洞察
</span>
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6">
忆阻器
<span class="block text-3xl md:text-4xl mt-2 opacity-90">
Memristor - 破解AI算力能耗之谜
</span>
</h1>
<p class="text-xl max-w-3xl mx-auto mb-8 opacity-90">
第四代无源电路元件，存算一体架构核心，将AI芯片能耗降低57.2%
</p>
<div class="flex flex-wrap justify-center gap-4">
<span class="bg-white/20 px-4 py-2 rounded-lg">
<i class="fas fa-chart-line mr-2"></i>Gartner技术成熟度：期望膨胀期
</span>
<span class="bg-white/20 px-4 py-2 rounded-lg">
<i class="fas fa-fire mr-2"></i>市场热度：脉冲式上升
</span>
<span class="bg-white/20 px-4 py-2 rounded-lg">
<i class="fas fa-shield-alt mr-2"></i>投资策略：早布局 · 长周期
</span>
</div>
</div>
</div>
</header>
<!-- 核心观点摘要 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">
核心观点摘要
</h2>
<div class="tech-grid">
<div class="tech-card bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl border border-purple-200">
<div class="text-purple-600 mb-4">
<i class="fas fa-bolt text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">技术突破验证期</h3>
<p class="text-gray-700">
已从理论验证进入工程化突破关键期，AI芯片能耗锐减57.2%，脑机接口实现四自由度操控
</p>
</div>
<div class="tech-card bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl border border-blue-200">
<div class="text-blue-600 mb-4">
<i class="fas fa-industry text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">0到1的幼稚期</h3>
<p class="text-gray-700">
产业整体处于"0到1"幼稚期，代工厂缺失构成最大瓶颈，创业公司被迫自建产线
</p>
</div>
<div class="tech-card bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-xl border border-green-200">
<div class="text-green-600 mb-4">
<i class="fas fa-chart-line text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">研报零覆盖</h3>
<p class="text-gray-700">
市场关注度极低，6份研报零提及，存在巨大预期差，属于典型的"高壁垒、长周期"主题
</p>
</div>
<div class="tech-card bg-gradient-to-br from-orange-50 to-red-50 p-6 rounded-xl border border-orange-200">
<div class="text-orange-600 mb-4">
<i class="fas fa-exclamation-triangle text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">核心风险</h3>
<p class="text-gray-700">
代工厂断链、材料可靠性、技术路线竞争，从实验室到商业化仍需跨越"死亡谷"
</p>
</div>
</div>
</div>
</section>
<!-- 技术突破时间轴 -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<span class="gradient-text">技术突破时间轴</span>
</h2>
<div class="relative max-w-4xl mx-auto">
<div class="timeline-line absolute left-8 md:left-1/2 transform md:-translate-x-1/2 w-1 h-full"></div>
<!-- 2023年5月 -->
<div class="relative flex items-center mb-12">
<div class="absolute left-8 md:left-1/2 transform md:-translate-x-1/2 w-4 h-4 bg-indigo-600 rounded-full pulse-dot"></div>
<div class="ml-16 md:ml-0 md:w-1/2 md:pr-8 md:text-right">
<div class="bg-white p-4 rounded-lg shadow-lg">
<h3 class="font-semibold text-indigo-600">2023年5月29日</h3>
<p class="text-gray-700">中国移动联合清华大学完成业界首次忆阻器存算一体芯片端到端技术验证</p>
</div>
</div>
</div>
<!-- 2025年2月 -->
<div class="relative flex items-center mb-12 md:flex-row-reverse">
<div class="absolute left-8 md:left-1/2 transform md:-translate-x-1/2 w-4 h-4 bg-purple-600 rounded-full pulse-dot"></div>
<div class="ml-16 md:ml-0 md:w-1/2 md:pl-8">
<div class="bg-white p-4 rounded-lg shadow-lg">
<h3 class="font-semibold text-purple-600">2025年2月17日</h3>
<p class="text-gray-700">清华-天大团队在《自然·电子》发表基于忆阻器的"双环路"脑机接口系统</p>
</div>
</div>
</div>
<!-- 2025年7月 -->
<div class="relative flex items-center mb-12">
<div class="absolute left-8 md:left-1/2 transform md:-translate-x-1/2 w-4 h-4 bg-green-600 rounded-full pulse-dot"></div>
<div class="ml-16 md:ml-0 md:w-1/2 md:pr-8 md:text-right">
<div class="bg-white p-4 rounded-lg shadow-lg">
<h3 class="font-semibold text-green-600">2025年7月29日</h3>
<p class="text-gray-700">福晶科技披露少量供应镍酸锂晶体，忆阻器关键功能层材料量产突破</p>
</div>
</div>
</div>
<!-- 2025年11月 -->
<div class="relative flex items-center mb-12">
<div class="absolute left-8 md:left-1/2 transform md:-translate-x-1/2 w-4 h-4 bg-red-600 rounded-full pulse-dot"></div>
<div class="ml-16 md:ml-0 md:w-1/2 md:pr-8 md:text-right">
<div class="bg-white p-4 rounded-lg shadow-lg">
<h3 class="font-semibold text-red-600">2025年11月17日</h3>
<p class="text-gray-700">港大团队宣布忆阻器AI芯片能耗锐减57.2%，能效比展现颠覆性潜力</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">
产业链图谱
</h2>
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-8 mb-8">
<div class="grid md:grid-cols-3 gap-6">
<div class="text-center">
<div class="bg-white rounded-lg p-6 shadow-md">
<i class="fas fa-layer-group text-4xl text-indigo-600 mb-4"></i>
<h3 class="font-semibold text-lg mb-2">上游：材料与设备</h3>
<p class="text-sm text-gray-600">功能材料、制造设备、EDA工具</p>
<div class="mt-4 space-y-2">
<div class="text-sm bg-indigo-100 rounded px-2 py-1">天通股份(镍酸锂薄膜)</div>
<div class="text-sm bg-indigo-100 rounded px-2 py-1">福晶科技(晶体供应)</div>
</div>
</div>
</div>
<div class="text-center">
<div class="bg-white rounded-lg p-6 shadow-md">
<i class="fas fa-microchip text-4xl text-purple-600 mb-4"></i>
<h3 class="font-semibold text-lg mb-2">中游：器件与芯片</h3>
<p class="text-sm text-gray-600">技术验证、设计制造、代工厂</p>
<div class="mt-4 space-y-2">
<div class="text-sm bg-purple-100 rounded px-2 py-1">亿铸科技(POC芯片)</div>
<div class="text-sm bg-red-100 rounded px-2 py-1">代工厂：空缺(核心瓶颈)</div>
</div>
</div>
</div>
<div class="text-center">
<div class="bg-white rounded-lg p-6 shadow-md">
<i class="fas fa-robot text-4xl text-green-600 mb-4"></i>
<h3 class="font-semibold text-lg mb-2">下游：系统与应用</h3>
<p class="text-sm text-gray-600">脑机接口、AI芯片、边缘设备</p>
<div class="mt-4 space-y-2">
<div class="text-sm bg-green-100 rounded px-2 py-1">中国移动(边缘计算)</div>
<div class="text-sm bg-green-100 rounded px-2 py-1">清华-天大(脑机接口)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">
核心相关公司
</h2>
<div class="bg-white rounded-xl shadow-xl overflow-hidden">
<div class="overflow-x-auto">
<table class="stock-table w-full">
<thead>
<tr>
<th class="px-4 py-3 text-left">股票名称</th>
<th class="px-4 py-3 text-left">产业链定位</th>
<th class="px-4 py-3 text-left">具体项目</th>
<th class="px-4 py-3 text-left">信源</th>
<th class="px-4 py-3 text-left">纯度评级</th>
<th class="px-4 py-3 text-left">关键逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-semibold text-indigo-600">天通股份</td>
<td class="px-4 py-3">镍酸锂晶片薄膜(材料)</td>
<td class="px-4 py-3">大尺寸镍酸锂晶片</td>
<td class="px-4 py-3">互动/研报</td>
<td class="px-4 py-3">
<span class="bg-yellow-500 text-white px-2 py-1 rounded">★★★★★</span>
</td>
<td class="px-4 py-3 text-sm">销量国内第一，受益于忆阻器放量的核心材料商</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-semibold text-indigo-600">盛视科技</td>
<td class="px-4 py-3">参股亿铸科技(3.42%)</td>
<td class="px-4 py-3">基于忆阻器ReRAM的POC芯片</td>
<td class="px-4 py-3">公告</td>
<td class="px-4 py-3">
<span class="bg-blue-500 text-white px-2 py-1 rounded">★★★☆☆</span>
</td>
<td class="px-4 py-3 text-sm">财务投资+业务协同，参股国内领先忆阻器芯片公司</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-semibold text-indigo-600">中国移动</td>
<td class="px-4 py-3">产品验证方</td>
<td class="px-4 py-3">忆阻器存算一体芯片端到端技术验证</td>
<td class="px-4 py-3">新闻</td>
<td class="px-4 py-3">
<span class="bg-blue-500 text-white px-2 py-1 rounded">★★★☆☆</span>
</td>
<td class="px-4 py-3 text-sm">央企龙头，完成技术验证，具备采购拉动能力</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-semibold text-indigo-600">福晶科技</td>
<td class="px-4 py-3">镍酸锂晶体(材料)</td>
<td class="px-4 py-3">少量供应镍酸锂晶体</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">
<span class="bg-orange-500 text-white px-2 py-1 rounded">★★☆☆☆</span>
</td>
<td class="px-4 py-3 text-sm">少量供应，非核心业务，贡献有限</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-semibold text-indigo-600">金百泽</td>
<td class="px-4 py-3">设计制造服务</td>
<td class="px-4 py-3">高校忆阻器研究的电子服务</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">
<span class="bg-orange-500 text-white px-2 py-1 rounded">★★☆☆☆</span>
</td>
<td class="px-4 py-3 text-sm">"卖铲人"角色，为学术团队提供原型服务</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 font-semibold text-indigo-600">风华高科</td>
<td class="px-4 py-3">产品</td>
<td class="px-4 py-3">忆阻器研究</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">
<span class="bg-gray-500 text-white px-2 py-1 rounded">★☆☆☆☆</span>
</td>
<td class="px-4 py-3 text-sm">明确无专项投入，概念纯度最低</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 风险与挑战 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">
核心风险与挑战
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-red-50 rounded-xl p-6 border-l-4 border-red-500">
<h3 class="text-xl font-semibold text-red-700 mb-4">
<i class="fas fa-exclamation-circle mr-2"></i>技术风险
</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
<span>代工厂缺失：创业公司被迫自建产线，良率可能&lt;30%</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
<span>材料可靠性：循环寿命仅10⁵次，远低于DRAM的10¹⁵次</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
<span>集成密度：当前1Kb-1Mb，商业需&gt;1Gb，差3个数量级</span>
</li>
</ul>
</div>
<div class="bg-orange-50 rounded-xl p-6 border-l-4 border-orange-500">
<h3 class="text-xl font-semibold text-orange-700 mb-4">
<i class="fas fa-coins mr-2"></i>商业化风险
</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-times-circle text-orange-500 mt-1 mr-2"></i>
<span>成本倒挂：自建产线成本&gt;$100，边缘AI芯片仅$5-10</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-orange-500 mt-1 mr-2"></i>
<span>市场错配：脑机接口市场规模&lt;1亿，无法支撑量产</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-orange-500 mt-1 mr-2"></i>
<span>路线竞争：SRAM/MRAM/PCRAM多路线竞争，忆阻器无绝对优势</span>
</li>
</ul>
</div>
<div class="bg-yellow-50 rounded-xl p-6 border-l-4 border-yellow-500">
<h3 class="text-xl font-semibold text-yellow-700 mb-4">
<i class="fas fa-gavel mr-2"></i>政策与竞争风险
</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-times-circle text-yellow-500 mt-1 mr-2"></i>
<span>政策优先度：未在"卡脖子"清单明确提及</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-yellow-500 mt-1 mr-2"></i>
<span>国际竞争：IBM/惠普专利储备领先，可能封锁代工渠道</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-yellow-500 mt-1 mr-2"></i>
<span>知识产权：基础专利到期，但工艺改进专利仍在快速申请</span>
</li>
</ul>
</div>
<div class="bg-purple-50 rounded-xl p-6 border-l-4 border-purple-500">
<h3 class="text-xl font-semibold text-purple-700 mb-4">
<i class="fas fa-chart-line mr-2"></i>投资风险
</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-times-circle text-purple-500 mt-1 mr-2"></i>
<span>预期差：新闻乐观叙事与路演负面现实形成矛盾</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-purple-500 mt-1 mr-2"></i>
<span>信息真空：0篇研报覆盖，财务模型无法建立</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-purple-500 mt-1 mr-2"></i>
<span>概念混淆：市场存在大量"伪概念股"需仔细甄别</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 投资建议 -->
<section class="py-16 bg-gradient-to-br from-indigo-600 to-purple-600 text-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
投资策略建议
</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="glass-effect rounded-xl p-6">
<h3 class="text-2xl font-bold mb-4">
<i class="fas fa-lightbulb mr-2"></i>当前策略
</h3>
<p class="mb-4">
轻仓配置天通股份，作为"不对称期权"。仓位控制2-3%，向下有底，向上空间巨大。
</p>
<div class="bg-white/10 rounded-lg p-4">
<p class="text-sm">
天通股份作为材料龙头，无论技术路线如何，薄膜外延材料都是刚性需求。
</p>
</div>
</div>
<div class="glass-effect rounded-xl p-6">
<h3 class="text-2xl font-bold mb-4">
<i class="fas fa-rocket mr-2"></i>加仓条件
</h3>
<ul class="space-y-2 mb-4">
<li>✓ 中芯国际宣布忆阻器工艺平台</li>
<li>✓ 天通股份单季采购额>1000万</li>
<li>✓ 科技部设立忆阻器重大专项</li>
</ul>
<div class="bg-green-500/20 rounded-lg p-4">
<p class="text-sm">
满足任一条件，仓位可提升至5-8%
</p>
</div>
</div>
<div class="glass-effect rounded-xl p-6">
<h3 class="text-2xl font-bold mb-4">
<i class="fas fa-shield-alt mr-2"></i>风控纪律
</h3>
<p class="mb-4">
若2年内未现代工厂合作，或亿铸科技等头部公司倒闭，应清仓离场。
</p>
<div class="bg-red-500/20 rounded-lg p-4">
<p class="text-sm">
保持70%观察、20%研究、10%参与的"狙击手"姿态
</p>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-xl opacity-90">
忆阻器的命运不取决于技术多先进，而取决于产业生态能否在2026年前疏通
</p>
<div class="mt-4 flex justify-center gap-4">
<span class="bg-white/20 px-4 py-2 rounded-lg">
<i class="fas fa-clock mr-2"></i>耐心等待基本面质变
</span>
<span class="bg-white/20 px-4 py-2 rounded-lg">
<i class="fas fa-chart-pie mr-2"></i>不宜重仓 · 适合配置
</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-300 py-8">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">
<i class="fas fa-info-circle mr-2"></i>
本页面基于公开信息整理，不构成投资建议
</p>
<p class="text-sm">
数据来源：新闻、路演、公司公告 | 更新时间：2025年11月
</p>
</div>
</footer>
<script>
// 添加滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 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('.tech-card, section').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('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>