update pay function
This commit is contained in:
736
public/htmls/券商合并预期.html
Normal file
736
public/htmls/券商合并预期.html
Normal file
@@ -0,0 +1,736 @@
|
||||
我将为您创建一个关于券商合并预期概念的现代化HTML页面，融合金融专业性和视觉美感。
|
||||
|
||||
|
||||
<!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>
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<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;800&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.stock-row:hover {
|
||||
background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
|
||||
transform: translateX(5px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.badge-glow {
|
||||
box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<div class="navbar glass-effect sticky top-0 z-50 px-4 py-3">
|
||||
<div class="flex-1">
|
||||
<a class="btn btn-ghost text-xl font-bold gradient-text">券商合并预期</a>
|
||||
</div>
|
||||
<div class="flex-none gap-2">
|
||||
<button class="btn btn-ghost btn-circle">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-circle">
|
||||
<i class="fas fa-bell"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="hero min-h-[60vh] glass-effect mx-4 mt-4 rounded-3xl" style="background-image: url('https://picsum.photos/seed/finance-merge/1920/800');">
|
||||
<div class="hero-overlay bg-opacity-60 rounded-3xl"></div>
|
||||
<div class="hero-content text-center text-white">
|
||||
<div class="max-w-4xl">
|
||||
<h1 class="mb-5 text-5xl font-bold animate-fade-in">
|
||||
打造金融国家队
|
||||
</h1>
|
||||
<p class="mb-5 text-xl">
|
||||
券商合并预期 - 从政策推动到价值重塑的三阶段演进
|
||||
</p>
|
||||
<div class="flex justify-center gap-4 mb-8">
|
||||
<div class="stat glass-effect rounded-lg px-6 py-4">
|
||||
<div class="stat-value text-2xl">2-3家</div>
|
||||
<div class="stat-desc">2035年国际投行目标</div>
|
||||
</div>
|
||||
<div class="stat glass-effect rounded-lg px-6 py-4">
|
||||
<div class="stat-value text-2xl">10家</div>
|
||||
<div class="stat-desc">2025年优质机构目标</div>
|
||||
</div>
|
||||
<div class="stat glass-effect rounded-lg px-6 py-4">
|
||||
<div class="stat-value text-2xl">50%↑</div>
|
||||
<div class="stat-desc">CR5资产占比目标</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-lg" onclick="scrollToSection('timeline')">
|
||||
探索政策时间轴 <i class="fas fa-arrow-down ml-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- 政策时间轴 -->
|
||||
<section id="timeline" class="mb-12">
|
||||
<h2 class="text-3xl font-bold mb-8 text-white text-center">政策演进时间轴</h2>
|
||||
<div class="timeline glass-effect rounded-2xl p-8">
|
||||
<div class="relative">
|
||||
<div class="timeline-line absolute left-8 top-0 bottom-0 w-1"></div>
|
||||
|
||||
<div class="mb-8 flex items-center">
|
||||
<div class="timeline-dot w-4 h-4 bg-indigo-600 rounded-full absolute left-6"></div>
|
||||
<div class="ml-16 glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="badge badge-primary badge-glow">2023年10月</div>
|
||||
<h3 class="font-bold text-lg mt-2">中央金融工作会议</h3>
|
||||
<p>首次提出"金融强国"目标，明确支持国有大型金融机构做优做强</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-center">
|
||||
<div class="timeline-dot w-4 h-4 bg-purple-600 rounded-full absolute left-6"></div>
|
||||
<div class="ml-16 glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="badge badge-secondary badge-glow">2024年3月</div>
|
||||
<h3 class="font-bold text-lg mt-2">证监会指导意见</h3>
|
||||
<p>明确5年内形成10家优质头部机构，2035年形成2-3家国际投行</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-center">
|
||||
<div class="timeline-dot w-4 h-4 bg-pink-600 rounded-full absolute left-6"></div>
|
||||
<div class="ml-16 glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="badge badge-accent badge-glow">2024年4月</div>
|
||||
<h3 class="font-bold text-lg mt-2">新"国九条"</h3>
|
||||
<p>国务院层面首次支持投行通过并购重组提升核心竞争力</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-center">
|
||||
<div class="timeline-dot w-4 h-4 bg-green-600 rounded-full absolute left-6"></div>
|
||||
<div class="ml-16 glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="badge badge-success badge-glow">2024年9月</div>
|
||||
<h3 class="font-bold text-lg mt-2">国泰君安+海通证券</h3>
|
||||
<p>新"国九条"后首例头部券商合并，总资产1.62万亿</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-center">
|
||||
<div class="timeline-dot w-4 h-4 bg-yellow-600 rounded-full absolute left-6"></div>
|
||||
<div class="ml-16 glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="badge badge-warning badge-glow">2025年11月</div>
|
||||
<h3 class="font-bold text-lg mt-2">中金公司"一对二"合并</h3>
|
||||
<p>一次性合并东兴、信达证券，总资产达1万亿，超出市场预期</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心逻辑与市场认知 -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-3xl font-bold mb-8 text-white text-center">核心逻辑与预期差</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="glass-effect rounded-2xl p-6 card-hover">
|
||||
<div class="text-4xl mb-4">🏛️</div>
|
||||
<h3 class="text-xl font-bold mb-3">政策强制力</h3>
|
||||
<p class="text-gray-700">不同于以往市场化并购，本轮是"只许成功，不许失败"的国家战略，行政推动力度空前</p>
|
||||
<div class="mt-4">
|
||||
<div class="badge badge-info">顶层设计</div>
|
||||
<div class="badge badge-error">硬性约束</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect rounded-2xl p-6 card-hover">
|
||||
<div class="text-4xl mb-4">📉</div>
|
||||
<h3 class="text-xl font-bold mb-3">行业生存压力</h3>
|
||||
<p class="text-gray-700">经纪业务佣金率从8‱降至不足1‱，IPO收紧、再融资停滞，中小券商面临生存危机</p>
|
||||
<div class="mt-4">
|
||||
<div class="badge badge-warning">盈亏平衡</div>
|
||||
<div class="badge badge-secondary">供给扭转</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect rounded-2xl p-6 card-hover">
|
||||
<div class="text-4xl mb-4">💹</div>
|
||||
<h3 class="text-xl font-bold mb-3">估值修复空间</h3>
|
||||
<p class="text-gray-700">券商板块PB处于历史1.18%分位，国泰君安PB仅0.88倍，较中信存在100%修复空间</p>
|
||||
<div class="mt-4">
|
||||
<div class="badge badge-success">历史底部</div>
|
||||
<div class="badge badge-primary">机构低配</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 关键催化剂 -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-3xl font-bold mb-8 text-white text-center">关键催化剂</h2>
|
||||
<div class="glass-effect rounded-2xl p-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl p-6 text-white">
|
||||
<i class="fas fa-calendar-alt text-3xl mb-4"></i>
|
||||
<h3 class="text-xl font-bold mb-2">2025年12月-2026年1月</h3>
|
||||
<p>国泰君安/海通合并后首份协同效应数据披露，验证"1+1"增量价值</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl p-6 text-white">
|
||||
<i class="fas fa-chart-pie text-3xl mb-4"></i>
|
||||
<h3 class="text-xl font-bold mb-2">2026年Q1</h3>
|
||||
<p>中金公司吸收东兴、信达证券方案公布，汇金系整合路径明朗</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-green-500 to-teal-500 rounded-xl p-6 text-white">
|
||||
<i class="fas fa-landmark text-3xl mb-4"></i>
|
||||
<h3 class="text-xl font-bold mb-2">2026年3月</h3>
|
||||
<p>证监会《一流投行建设意见》中期评估，出台更具体鼓励政策</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-orange-500 to-red-500 rounded-xl p-6 text-white">
|
||||
<i class="fas fa-city text-3xl mb-4"></i>
|
||||
<h3 class="text-xl font-bold mb-2">2026年Q2</h3>
|
||||
<p>地方两会明确券商整合时间表，浙江系、深圳系后续动作</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 股票数据表格 -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-3xl font-bold mb-8 text-white text-center">券商股权结构全景图</h2>
|
||||
<div class="glass-effect rounded-2xl p-6 overflow-x-auto">
|
||||
<table class="table 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>
|
||||
<th>消息来源</th>
|
||||
<th>合并逻辑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">申万宏源</td>
|
||||
<td><span class="badge badge-primary">汇金系</span></td>
|
||||
<td>中央汇金投资有限责任公司</td>
|
||||
<td>49.70%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人中央汇金投资有限责任公司持股49.70%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">中国银河</td>
|
||||
<td><span class="badge badge-primary">汇金系</span></td>
|
||||
<td>中央汇金投资有限责任公司</td>
|
||||
<td>32.76%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人中央汇金投资有限责任公司持股32.76%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">东兴证券</td>
|
||||
<td><span class="badge badge-secondary">财政系</span></td>
|
||||
<td>国务院国资委</td>
|
||||
<td>32.28%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人国务院国资委持股32.28%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">信达证券</td>
|
||||
<td><span class="badge badge-secondary">财政系</span></td>
|
||||
<td>国务院</td>
|
||||
<td>45.63%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人国务院持股45.63%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">中信证券</td>
|
||||
<td><span class="badge badge-info">中信系</span></td>
|
||||
<td>中国中信金融控股有限公司</td>
|
||||
<td>18.45%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">第一大股东中国中信金融控股有限公司持股18.45%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">中金财富证券</td>
|
||||
<td><span class="badge badge-info">中信系</span></td>
|
||||
<td>北京金融控股集团有限公司</td>
|
||||
<td>35.81%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">第一大股东北京金融控股集团有限公司持股35.81%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">方正证券</td>
|
||||
<td><span class="badge badge-warning">平安系</span></td>
|
||||
<td>新方正控股发展有限责任公司</td>
|
||||
<td>28.71%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">新方正控股发展有限责任公司持股28.71%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">平安证券</td>
|
||||
<td><span class="badge badge-warning">平安系</span></td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">未上市</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">华安证券</td>
|
||||
<td><span class="badge badge-success">安徽系</span></td>
|
||||
<td>安徽省国资委</td>
|
||||
<td>32.97%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人安徽省国资委持股32.97%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">国元证券</td>
|
||||
<td><span class="badge badge-success">安徽系</span></td>
|
||||
<td>安徽省国资委</td>
|
||||
<td>28.45%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人安徽省国资委持股28.45%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">浙商证券</td>
|
||||
<td><span class="badge badge-accent">浙江系</span></td>
|
||||
<td>浙江交投投资集团</td>
|
||||
<td>26.38%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人浙江交投投资集团持股26.38%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">财通证券</td>
|
||||
<td><span class="badge badge-accent">浙江系</span></td>
|
||||
<td>浙江省财政厅</td>
|
||||
<td>32.40%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人浙江省财政厅持股32.40%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">华鑫股份</td>
|
||||
<td><span class="badge badge-error">上海系</span></td>
|
||||
<td>上海市国资委</td>
|
||||
<td>55.26%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人上海市国资委持股55.26%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">国泰君安</td>
|
||||
<td><span class="badge badge-error">上海系</span></td>
|
||||
<td>上海国际集团有限公司</td>
|
||||
<td>18.83%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人上海国际集团有限公司持股18.83%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">华泰证券</td>
|
||||
<td><span class="badge badge-info">江苏系</span></td>
|
||||
<td>江苏省国资委</td>
|
||||
<td>28.59%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人江苏省国资委持股28.59%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">东吴证券</td>
|
||||
<td><span class="badge badge-info">江苏系</span></td>
|
||||
<td>苏州市国资委</td>
|
||||
<td>27.80%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人苏州市国资委持股27.80%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">南京证券</td>
|
||||
<td><span class="badge badge-info">江苏系</span></td>
|
||||
<td>南京市国资委</td>
|
||||
<td>28.90%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人南京市国资委持股28.90%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">国联民生</td>
|
||||
<td><span class="badge badge-info">江苏系</span></td>
|
||||
<td>无锡市国资委</td>
|
||||
<td>35.12%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人无锡市国资委持股35.12%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">天风证券</td>
|
||||
<td><span class="badge badge-warning">湖北系</span></td>
|
||||
<td>湖北省财政厅</td>
|
||||
<td>28.14%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人湖北省财政厅持股28.14%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">长江证券</td>
|
||||
<td><span class="badge badge-warning">湖北系</span></td>
|
||||
<td>长江产业投资集团有限公司</td>
|
||||
<td>17.41%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">第一大股东长江产业投资集团有限公司持股17.41%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">西南证券</td>
|
||||
<td><span class="badge badge-secondary">川渝系</span></td>
|
||||
<td>重庆市国资委</td>
|
||||
<td>31.12%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人重庆市国资委持股31.12%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">华西证券</td>
|
||||
<td><span class="badge badge-secondary">川渝系</span></td>
|
||||
<td>泸州市国资委</td>
|
||||
<td>21.07%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人泸州市国资委持股21.07%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">第一创业</td>
|
||||
<td><span class="badge badge-primary">北京系</span></td>
|
||||
<td>北京国有资本运营管理有限公司</td>
|
||||
<td>11.06%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">第一大股东北京国有资本运营管理有限公司持股11.06%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">首创证券</td>
|
||||
<td><span class="badge badge-primary">北京系</span></td>
|
||||
<td>北京市国资委</td>
|
||||
<td>82.39%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人北京市国资委持股82.39%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">兴业证券</td>
|
||||
<td><span class="badge badge-success">福建系</span></td>
|
||||
<td>福建省财政厅</td>
|
||||
<td>20.49%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人福建省财政厅持股20.49%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">华福证券</td>
|
||||
<td><span class="badge badge-success">福建系</span></td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">未上市</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">锦龙股份</td>
|
||||
<td><span class="badge badge-accent">东莞系</span></td>
|
||||
<td>杨志茂</td>
|
||||
<td>18.80%</td>
|
||||
<td>年报</td>
|
||||
<td class="text-sm">实际控制人杨志茂持股18.80%</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">东莞证券</td>
|
||||
<td><span class="badge badge-accent">东莞系</span></td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>公开资料</td>
|
||||
<td class="text-sm">2024年9月23日锦龙股份董事会通过转让东莞证券20%股份事项</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">中山证券</td>
|
||||
<td><span class="badge badge-accent">东莞系</span></td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>公开资料</td>
|
||||
<td class="text-sm">锦龙股份持有中山证券67.78%股权</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">西部证券</td>
|
||||
<td><span class="badge badge-error">最新推进</span></td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>公开资料</td>
|
||||
<td class="text-sm">西部证券在2025年9月成功控股国融证券</td>
|
||||
</tr>
|
||||
<tr class="stock-row">
|
||||
<td class="font-bold">国信证券</td>
|
||||
<td><span class="badge badge-error">最新推进</span></td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>公开资料</td>
|
||||
<td class="text-sm">2025年8月21日证监会核准国信证券成为万和证券主要股东</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 投资建议 -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-3xl font-bold mb-8 text-white text-center">投资策略与风险提示</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="glass-effect rounded-2xl p-6">
|
||||
<h3 class="text-2xl font-bold mb-4 gradient-text">最具投资价值方向</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="alert alert-success">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
<div>
|
||||
<h4 class="font-bold">头部券商A+H股套利</h4>
|
||||
<p class="text-sm">国泰君安H股、中信证券H股，港股折价50%，存在30-40%套利空间</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<div>
|
||||
<h4 class="font-bold">地方国资"唯一牌照"</h4>
|
||||
<p class="text-sm">首创证券、东吴证券，地方国资做强动力，市值小并购期权未充分定价</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
<i class="fas fa-laptop-code"></i>
|
||||
<div>
|
||||
<h4 class="font-bold">金融IT真受益标的</h4>
|
||||
<p class="text-sm">财富趋势、指南针，C端流量平台，合并后获客成本下降20%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect rounded-2xl p-6">
|
||||
<h3 class="text-2xl font-bold mb-4 gradient-text">核心跟踪指标</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>指标类别</th>
|
||||
<th>触发条件</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>审批速度</td>
|
||||
<td>受理到批复合计<90天</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ROE提升</td>
|
||||
<td>国泰君安+海通ROE>7.5%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>市场情绪</td>
|
||||
<td>成交额占比>5%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>估值修复</td>
|
||||
<td>PB回升至分位30%+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>人才稳定</td>
|
||||
<td>核心人员流失率<10%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 风险矩阵 -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-3xl font-bold mb-8 text-white text-center">风险矩阵</h2>
|
||||
<div class="glass-effect rounded-2xl p-8">
|
||||
<canvas id="riskChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="glass-effect mt-12 py-8">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<p class="text-gray-600">© 2024 券商合并预期分析报告 | 数据来源：公开资料整理</p>
|
||||
<div class="mt-4 flex justify-center gap-4">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-600"><i class="fab fa-github text-2xl"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-600"><i class="fab fa-twitter text-2xl"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-600"><i class="fab fa-linkedin text-2xl"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 平滑滚动
|
||||
function scrollToSection(sectionId) {
|
||||
document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// 风险矩阵图表
|
||||
const ctx = document.getElementById('riskChart').getContext('2d');
|
||||
const riskChart = new Chart(ctx, {
|
||||
type: 'bubble',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: '整合风险',
|
||||
data: [{x: 5, y: 5, r: 25}],
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.6)'
|
||||
}, {
|
||||
label: '政策风险',
|
||||
data: [{x: 4, y: 4, r: 20}],
|
||||
backgroundColor: 'rgba(255, 159, 64, 0.6)'
|
||||
}, {
|
||||
label: '市场风险',
|
||||
data: [{x: 3, y: 3, r: 15}],
|
||||
backgroundColor: 'rgba(255, 205, 86, 0.6)'
|
||||
}, {
|
||||
label: '财务风险',
|
||||
data: [{x: 2, y: 2, r: 10}],
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.6)'
|
||||
}, {
|
||||
label: '股东风险',
|
||||
data: [{x: 1, y: 1, r: 8}],
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.6)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const label = context.dataset.label || '';
|
||||
const impact = '影响程度: ' + context.parsed.y + '★';
|
||||
const probability = '发生概率: ' + context.parsed.x + '★';
|
||||
return [label, impact, probability];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: '发生概率'
|
||||
},
|
||||
min: 0,
|
||||
max: 6
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: '影响程度'
|
||||
},
|
||||
min: 0,
|
||||
max: 6
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 动画效果
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const cards = document.querySelectorAll('.card-hover');
|
||||
cards.forEach((card, index) => {
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, 100);
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
这个HTML页面完整展现了券商合并预期概念的核心内容，包括：
|
||||
|
||||
1. **视觉设计**：采用渐变色背景、玻璃态效果、卡片悬浮动画等现代设计元素，营造专业金融科技感
|
||||
|
||||
2. **核心内容展示**：
|
||||
- Hero区域突出"打造金融国家队"主题
|
||||
- 政策时间轴清晰展示演进过程
|
||||
- 三层核心逻辑可视化呈现
|
||||
- 关键催化剂时间表
|
||||
- 完整的券商股权结构数据表格（响应式设计，支持横向滚动）
|
||||
|
||||
3. **交互功能**：
|
||||
- 平滑滚动导航
|
||||
- 表格行悬停效果
|
||||
- 风险矩阵气泡图
|
||||
- 卡片动画效果
|
||||
|
||||
4. **数据呈现**：
|
||||
- 股票数据表格完整展示所有券商信息
|
||||
- 使用徽章区分不同派系
|
||||
- 颜色编码增强可读性
|
||||
|
||||
5. **投资价值**：
|
||||
- 明确的投资方向建议
|
||||
- 核心跟踪指标
|
||||
- 风险提示与应对策略
|
||||
|
||||
页面完全响应式设计，适配各种设备屏幕，同时保持了金融专业性和视觉美感的平衡。
|
||||
971
public/htmls/华为AI容器.html
Normal file
971
public/htmls/华为AI容器.html
Normal file
@@ -0,0 +1,971 @@
|
||||
我将为您创建一个详实且炫酷的华为AI容器概念展示页面。这个页面将完整呈现Insight的深度内容，并以现代化的设计风格展示相关股票数据。
|
||||
|
||||
|
||||
<!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 href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></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;
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.stock-table {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.stock-table::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.stock-table::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.stock-table::-webkit-scrollbar-thumb {
|
||||
background: #667eea;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.tag-cloud span {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tag-cloud span:hover {
|
||||
transform: scale(1.05);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Hero Section -->
|
||||
<div class="gradient-bg text-white">
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
<div class="flex flex-col lg:flex-row items-center justify-between">
|
||||
<div class="lg:w-2/3 mb-8 lg:mb-0">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="bg-white/20 px-3 py-1 rounded-full text-sm">核心概念</span>
|
||||
<span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-1">
|
||||
<i data-lucide="flame" class="w-4 h-4"></i>
|
||||
舆情热度 20251120
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="text-4xl lg:text-6xl font-bold mb-4">华为AI容器</h1>
|
||||
<p class="text-xl lg:text-2xl mb-6 opacity-90">算力效率革命的战略突围</p>
|
||||
<p class="text-lg opacity-80 mb-8">在美国先进制程封锁倒逼下，通过系统级软件创新实现算力效率革命</p>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div class="glass-effect px-4 py-2 rounded-lg">
|
||||
<i data-lucide="calendar" class="inline w-5 h-5 mr-2"></i>
|
||||
2025年11月21日发布
|
||||
</div>
|
||||
<div class="glass-effect px-4 py-2 rounded-lg">
|
||||
<i data-lucide="code-2" class="inline w-5 h-5 mr-2"></i>
|
||||
开源Flex:ai技术
|
||||
</div>
|
||||
<div class="glass-effect px-4 py-2 rounded-lg">
|
||||
<i data-lucide="target" class="inline w-5 h-5 mr-2"></i>
|
||||
对标英伟达AI技术
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3">
|
||||
<div class="glass-effect rounded-2xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4">核心催化剂</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0 pulse-dot">
|
||||
<span class="text-sm font-bold">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">2025年9月</p>
|
||||
<p class="text-sm opacity-80">UCM推理加速器开源</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-sm font-bold">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">2025年11月21日</p>
|
||||
<p class="text-sm opacity-80">Flex:ai正式发布开源</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-sm font-bold">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">2027年Q4</p>
|
||||
<p class="text-sm opacity-80">Atlas 960 SuperPoD发布</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="bg-white shadow-sm sticky top-0 z-40">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="tabs tabs-boxed flex flex-nowrap overflow-x-auto py-4" id="mainTabs">
|
||||
<a href="#overview" class="tab tab-active" onclick="showSection('overview')">
|
||||
<i data-lucide="eye" class="w-4 h-4 mr-2"></i>核心洞察
|
||||
</a>
|
||||
<a href="#logic" class="tab" onclick="showSection('logic')">
|
||||
<i data-lucide="brain" class="w-4 h-4 mr-2"></i>核心逻辑
|
||||
</a>
|
||||
<a href="#catalyst" class="tab" onclick="showSection('catalyst')">
|
||||
<i data-lucide="zap" class="w-4 h-4 mr-2"></i>催化剂
|
||||
</a>
|
||||
<a href="#industry" class="tab" onclick="showSection('industry')">
|
||||
<i data-lucide="git-branch" class="w-4 h-4 mr-2"></i>产业链
|
||||
</a>
|
||||
<a href="#stocks" class="tab" onclick="showSection('stocks')">
|
||||
<i data-lucide="line-chart" class="w-4 h-4 mr-2"></i>核心股票
|
||||
</a>
|
||||
<a href="#risk" class="tab" onclick="showSection('risk')">
|
||||
<i data-lucide="alert-triangle" class="w-4 h-4 mr-2"></i>风险提示
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overview Section -->
|
||||
<section id="overview" class="container mx-auto px-4 py-12">
|
||||
<div class="grid lg:grid-cols-3 gap-6">
|
||||
<!-- 核心观点 -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8 hover-lift">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="lightbulb" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold">核心观点摘要</h2>
|
||||
</div>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
<p class="text-gray-700 leading-relaxed mb-4">
|
||||
华为AI容器概念正处于<strong class="text-gradient">"技术突破预期发酵期"</strong>，其核心驱动力并非单一产品发布，而是<strong class="text-gradient">在美国先进制程封锁倒逼下，通过系统级软件创新实现算力效率革命的战略突围</strong>。
|
||||
</p>
|
||||
<p class="text-gray-700 leading-relaxed mb-4">
|
||||
当前市场关注度逐步升温，但存在显著<strong class="text-purple-600">预期差</strong>：多数人聚焦昇腾硬件性能，却低估中间层容器技术作为"算力操作系统"的战略价值。
|
||||
</p>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
Flex:ai的开源若在性能上真正逼近英伟达生态，将重塑国产AI算力价值链，使华为从"卖铲子"升级为"制定采矿规则"，具备<strong class="text-gradient">从主题投资向基本面驱动跃迁</strong>的潜力。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 市场热度评估 -->
|
||||
<div>
|
||||
<div class="bg-white rounded-2xl shadow-lg p-6 hover-lift">
|
||||
<h3 class="text-xl font-bold mb-4 flex items-center">
|
||||
<i data-lucide="trending-up" class="w-5 h-5 mr-2 text-purple-600"></i>
|
||||
市场热度评估
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">舆情热度</span>
|
||||
<span class="text-sm font-semibold">80%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">研报覆盖</span>
|
||||
<span class="text-sm font-semibold">30%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 30%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">交易拥挤度</span>
|
||||
<span class="text-sm font-semibold">25%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 25%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 p-4 bg-purple-50 rounded-lg">
|
||||
<p class="text-sm text-purple-700">
|
||||
<i data-lucide="info" class="inline w-4 h-4 mr-1"></i>
|
||||
距离11月发布尚有8个月，属于<strong>预期发酵早期</strong>，尚未达到交易拥挤
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预期差分析 -->
|
||||
<div class="mt-8 bg-white rounded-2xl shadow-lg p-8">
|
||||
<h3 class="text-2xl font-bold mb-6 flex items-center">
|
||||
<i data-lucide="layers" class="w-6 h-6 mr-3 text-purple-600"></i>
|
||||
预期差深度挖掘
|
||||
</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr class="text-left">
|
||||
<th class="bg-purple-50 text-purple-700">市场普遍认知</th>
|
||||
<th class="bg-purple-50 text-purple-700">被忽略的关键事实</th>
|
||||
<th class="bg-purple-50 text-purple-700">预期差影响</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="py-4">Flex:ai只是一个容器工具</td>
|
||||
<td class="py-4">
|
||||
<span class="inline-block px-2 py-1 bg-blue-100 text-blue-700 rounded text-sm mb-1">UCM（9月开源）</span>
|
||||
<span class="inline-block px-2 py-1 bg-blue-100 text-blue-700 rounded text-sm">+ Flex:ai（11月发布）</span>
|
||||
<p class="text-sm mt-1">构成"推理+训练"全栈优化</p>
|
||||
</td>
|
||||
<td class="py-4 text-green-600">技术价值被系统性低估</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="py-4">华为AI容器主要服务昇腾生态</td>
|
||||
<td class="py-4">
|
||||
<span class="inline-block px-2 py-1 bg-green-100 text-green-700 rounded text-sm">兼容K8s/Docker原生接口</span>
|
||||
<p class="text-sm mt-1">可管理第三方云设施</p>
|
||||
</td>
|
||||
<td class="py-4 text-green-600">潜在市场空间从昇腾扩展到全行业</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="py-4">开源=不赚钱</td>
|
||||
<td class="py-4">
|
||||
<span class="inline-block px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-sm">博睿数据</span>
|
||||
<span class="inline-block px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-sm">3000万采购订单</span>
|
||||
<p class="text-sm mt-1">OEM模式已跑通</p>
|
||||
</td>
|
||||
<td class="py-4 text-green-600">商业模式已验证，变现路径清晰</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Logic Section -->
|
||||
<section id="logic" class="container mx-auto px-4 py-12 hidden">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold mb-4">核心驱动力三维解析</h2>
|
||||
<p class="text-gray-600">深入剖析华为AI容器背后的战略逻辑</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-6">
|
||||
<!-- 地缘政治驱动 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="bg-gradient-to-br from-red-500 to-orange-500 p-6 text-white">
|
||||
<i data-lucide="shield-off" class="w-10 h-10 mb-3"></i>
|
||||
<h3 class="text-xl font-bold">地缘政治驱动</h3>
|
||||
<p class="text-sm opacity-90 mt-2">被迫创新下的突围</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-green-500 mt-0.5"></i>
|
||||
<div>
|
||||
<p class="font-semibold">7nm制程限制</p>
|
||||
<p class="text-sm text-gray-600">无法追赶英伟达最新GPU</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-green-500 mt-0.5"></i>
|
||||
<div>
|
||||
<p class="font-semibold">软件定义硬件</p>
|
||||
<p class="text-sm text-gray-600">系统级创新突破物理限制</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-green-500 mt-0.5"></i>
|
||||
<div>
|
||||
<p class="font-semibold">CloudMatrix架构</p>
|
||||
<p class="text-sm text-gray-600">384颗NPU全对等互联</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI算力需求驱动 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-cyan-500 p-6 text-white">
|
||||
<i data-lucide="cpu" class="w-10 h-10 mb-3"></i>
|
||||
<h3 class="text-xl font-bold">AI算力需求驱动</h3>
|
||||
<p class="text-sm opacity-90 mt-2">场景驱动的爆发增长</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="trending-up" class="w-5 h-5 text-blue-500 mt-0.5"></i>
|
||||
<div>
|
||||
<p class="font-semibold">中国市场增速55%</p>
|
||||
<p class="text-sm text-gray-600">AI服务器市场2023H1达30亿美元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="trending-up" class="w-5 h-5 text-blue-500 mt-0.5"></i>
|
||||
<div>
|
||||
<p class="font-semibold">智能算力增速3-3.9倍</p>
|
||||
<p class="text-sm text-gray-600">远超通用算力16.6%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="trending-up" class="w-5 h-5 text-blue-500 mt-0.5"></i>
|
||||
<div>
|
||||
<p class="font-semibold">成本降低30%+</p>
|
||||
<p class="text-sm text-gray-600">容器技术优化万卡集群效率</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生态构建驱动 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="bg-gradient-to-br from-purple-500 to-indigo-500 p-6 text-white">
|
||||
<i data-lucide="globe" class="w-10 h-10 mb-3"></i>
|
||||
<h3 class="text-xl font-bold">生态构建驱动</h3>
|
||||
<p class="text-sm opacity-90 mt-2">标准制定的战略布局</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="git-merge" class="w-5 h-5 text-purple-500 mt-0.5"></i>
|
||||
<div>
|
||||
<p class="font-semibold">开源复制TensorFlow路径</p>
|
||||
<p class="text-sm text-gray-600">建立开发者生态</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="git-merge" class="w-5 h-5 text-purple-500 mt-0.5"></i>
|
||||
<div>
|
||||
<p class="font-semibold">20+万卡集群客户基础</p>
|
||||
<p class="text-sm text-gray-600">锁定昇腾硬件采购</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="git-merge" class="w-5 h-5 text-purple-500 mt-0.5"></i>
|
||||
<div>
|
||||
<p class="font-semibold">软件-硬件-云服务闭环</p>
|
||||
<p class="text-sm text-gray-600">类比CUDA锁定NV GPU</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Catalyst Section -->
|
||||
<section id="catalyst" class="container mx-auto px-4 py-12 hidden">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold mb-4">关键催化剂与时间轴</h2>
|
||||
<p class="text-gray-600">把握华为AI容器发展的关键节点</p>
|
||||
</div>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="relative">
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full timeline-line"></div>
|
||||
|
||||
<!-- 2025年Q3 -->
|
||||
<div class="relative flex items-center mb-8">
|
||||
<div class="w-1/2 pr-8 text-right">
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover-lift">
|
||||
<span class="inline-block px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm mb-2">近期催化剂</span>
|
||||
<h3 class="text-xl font-bold mb-2">2025年9月 UCM正式开源</h3>
|
||||
<p class="text-gray-600 text-sm">推理记忆数据管理器开源，作为Flex:ai的前奏</p>
|
||||
<div class="mt-3 flex justify-end gap-2">
|
||||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">金融场景试点</span>
|
||||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">GitHub Star数</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-blue-500 rounded-full border-4 border-white flex items-center justify-center">
|
||||
<i data-lucide="calendar" class="w-4 h-4 text-white"></i>
|
||||
</div>
|
||||
<div class="w-1/2 pl-8"></div>
|
||||
</div>
|
||||
|
||||
<!-- 2025年11月 -->
|
||||
<div class="relative flex items-center mb-8">
|
||||
<div class="w-1/2 pr-8"></div>
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-purple-500 rounded-full border-4 border-white flex items-center justify-center">
|
||||
<i data-lucide="rocket" class="w-4 h-4 text-white"></i>
|
||||
</div>
|
||||
<div class="w-1/2 pl-8">
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover-lift">
|
||||
<span class="inline-block px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm mb-2">核心事件</span>
|
||||
<h3 class="text-xl font-bold mb-2">2025年11月21日 Flex:ai发布</h3>
|
||||
<p class="text-gray-600 text-sm">上海论坛正式发布并开源，对标英伟达AI技术</p>
|
||||
<div class="mt-3 flex gap-2">
|
||||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">性能测试数据</span>
|
||||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">社区活跃度</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2026-2027 -->
|
||||
<div class="relative flex items-center">
|
||||
<div class="w-1/2 pr-8 text-right">
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover-lift">
|
||||
<span class="inline-block px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm mb-2">长期发展</span>
|
||||
<h3 class="text-xl font-bold mb-2">2026-2027 生态爆发期</h3>
|
||||
<p class="text-gray-600 text-sm">Atlas 960 SuperPoD发布，15,488张加速卡</p>
|
||||
<div class="mt-3 flex justify-end gap-2">
|
||||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">标准输出</span>
|
||||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">全球引领</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-green-500 rounded-full border-4 border-white flex items-center justify-center">
|
||||
<i data-lucide="target" class="w-4 h-4 text-white"></i>
|
||||
</div>
|
||||
<div class="w-1/2 pl-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Metrics -->
|
||||
<div class="grid lg:grid-cols-4 gap-4 mt-12">
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 text-center metric-card">
|
||||
<div class="text-3xl font-bold text-gradient mb-2">3000万</div>
|
||||
<p class="text-gray-600 text-sm">博睿数据订单金额</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 text-center metric-card">
|
||||
<div class="text-3xl font-bold text-gradient mb-2">20+</div>
|
||||
<p class="text-gray-600 text-sm">CloudMatrix超级节点</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 text-center metric-card">
|
||||
<div class="text-3xl font-bold text-gradient mb-2">8192</div>
|
||||
<p class="text-gray-600 text-sm">Atlas 950加速卡数</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 text-center metric-card">
|
||||
<div class="text-3xl font-bold text-gradient mb-2">245TB</div>
|
||||
<p class="text-gray-600 text-sm">AI SSD单盘容量</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Industry Chain Section -->
|
||||
<section id="industry" class="container mx-auto px-4 py-12 hidden">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold mb-4">产业链全景图</h2>
|
||||
<p class="text-gray-600">华为AI容器的完整生态体系</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<!-- 上游：基础设施层 -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="server" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">上游：基础设施层</h3>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-4 gap-4">
|
||||
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-orange-600">昇腾芯片</h4>
|
||||
<p class="text-sm text-gray-600">昇腾910/950处理器<br>华为海思自主研发</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-orange-600">CloudMatrix</h4>
|
||||
<p class="text-sm text-gray-600">384超级节点架构<br>全对等互联技术</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-orange-600">Atlas集群</h4>
|
||||
<p class="text-sm text-gray-600">950/960 SuperPoD<br>万卡级算力集群</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-orange-600">AI存储</h4>
|
||||
<p class="text-sm text-gray-600">245TB AI SSD<br>"以存代算"技术</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t-2 border-dashed my-8"></div>
|
||||
|
||||
<!-- 中游：AI容器平台层 -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="layers" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">中游：AI容器平台层</h3>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-4 gap-4">
|
||||
<div class="bg-blue-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-blue-600">Flex:ai引擎</h4>
|
||||
<p class="text-sm text-gray-600">开源AI容器引擎<br>核心调度算法</p>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-blue-600">UCS管理平台</h4>
|
||||
<p class="text-sm text-gray-600">华为云统一管理<br>分布式集群管控</p>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-blue-600">UCM加速套件</h4>
|
||||
<p class="text-sm text-gray-600">KV Cache优化<br>推理性能提升</p>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-blue-600">中间件适配</h4>
|
||||
<p class="text-sm text-gray-600">东方通/中国软件<br>信创生态整合</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t-2 border-dashed my-8"></div>
|
||||
|
||||
<!-- 下游：行业应用 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-green-500 to-teal-500 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="globe-2" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">下游：行业应用与解决方案</h3>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-4 gap-4">
|
||||
<div class="bg-green-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-green-600">智慧医疗</h4>
|
||||
<p class="text-sm text-gray-600">DCS AI解决方案<br>华大系/塞力医疗</p>
|
||||
</div>
|
||||
<div class="bg-green-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-green-600">金融科技</h4>
|
||||
<p class="text-sm text-gray-600">银联UCM试点<br>博睿数据运维</p>
|
||||
</div>
|
||||
<div class="bg-green-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-green-600">政务云</h4>
|
||||
<p class="text-sm text-gray-600">混合云容器服务<br>电科数字/青云科技</p>
|
||||
</div>
|
||||
<div class="bg-green-50 rounded-lg p-4 hover:shadow-md transition">
|
||||
<h4 class="font-semibold mb-2 text-green-600">企业服务</h4>
|
||||
<p class="text-sm text-gray-600">企业级容器云<br>行业定制方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stocks Section -->
|
||||
<section id="stocks" class="container mx-auto px-4 py-12 hidden">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold mb-4">核心股票池</h2>
|
||||
<p class="text-gray-600">华为AI容器产业链核心标的</p>
|
||||
</div>
|
||||
|
||||
<!-- Stock Table -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||
<div class="p-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
|
||||
<h3 class="text-xl font-bold">股票数据详情</h3>
|
||||
</div>
|
||||
<div class="stock-table">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left p-4">股票名称</th>
|
||||
<th class="text-left p-4">分类</th>
|
||||
<th class="text-left p-4">相关性描述</th>
|
||||
<th class="text-left p-4">信源</th>
|
||||
<th class="text-center p-4">强度</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b hover:bg-purple-50 transition">
|
||||
<td class="p-4 font-semibold">博睿数据</td>
|
||||
<td class="p-4">
|
||||
<span class="badge badge-info">技术服务</span>
|
||||
</td>
|
||||
<td class="p-4 text-sm">华为云UCS可观测软件框架供应商，3000万采购订单已落地</td>
|
||||
<td class="p-4 text-sm">互动</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-purple-50 transition">
|
||||
<td class="p-4 font-semibold">飞荣达</td>
|
||||
<td class="p-4">
|
||||
<span class="badge badge-secondary">散热</span>
|
||||
</td>
|
||||
<td class="p-4 text-sm">华为服务器液冷散热核心供应商，受益Atlas集群放量</td>
|
||||
<td class="p-4 text-sm">路演</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-purple-50 transition">
|
||||
<td class="p-4 font-semibold">青云科技</td>
|
||||
<td class="p-4">
|
||||
<span class="badge badge-primary">容器云</span>
|
||||
</td>
|
||||
<td class="p-4 text-sm">KubeSphere容器平台，华为云原生生态伙伴</td>
|
||||
<td class="p-4 text-sm">官网</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-purple-50 transition">
|
||||
<td class="p-4 font-semibold">神州数码</td>
|
||||
<td class="p-4">
|
||||
<span class="badge badge-primary">容器云</span>
|
||||
</td>
|
||||
<td class="p-4 text-sm">推出首个基于鲲鹏环境的开源容器云发行版</td>
|
||||
<td class="p-4 text-sm">公告</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-purple-50 transition">
|
||||
<td class="p-4 font-semibold">电科数字</td>
|
||||
<td class="p-4">
|
||||
<span class="badge badge-primary">容器云</span>
|
||||
</td>
|
||||
<td class="p-4 text-sm">华讯容器云平台，华为云高级别合作伙伴</td>
|
||||
<td class="p-4 text-sm">官微/互动</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-purple-50 transition">
|
||||
<td class="p-4 font-semibold">蜂助手</td>
|
||||
<td class="p-4">
|
||||
<span class="badge badge-success">技术服务</span>
|
||||
</td>
|
||||
<td class="p-4 text-sm">容器虚拟化核心技术，加强与华为产品级技术合作</td>
|
||||
<td class="p-4 text-sm">互动</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-purple-50 transition">
|
||||
<td class="p-4 font-semibold">东方通</td>
|
||||
<td class="p-4">
|
||||
<span class="badge badge-warning">中间件</span>
|
||||
</td>
|
||||
<td class="p-4 text-sm">云原生中间件平台TongCNMP，已应用于华为云</td>
|
||||
<td class="p-4 text-sm">公告/互动</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Investment Advice -->
|
||||
<div class="mt-8 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-4">投资建议</h3>
|
||||
<div class="grid lg:grid-cols-3 gap-6">
|
||||
<div class="bg-white rounded-xl p-6">
|
||||
<h4 class="font-semibold mb-3 text-green-600">首选</h4>
|
||||
<p class="text-sm">博睿数据：唯一明确获得华为云AI容器平台采购订单的公司，OEM模式深度绑定，收入确定性最高</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-6">
|
||||
<h4 class="font-semibold mb-3 text-blue-600">次选</h4>
|
||||
<p class="text-sm">飞荣达：算力效率提升必然带来功耗密度增加，Atlas集群的万卡级部署对液冷需求爆发</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-6">
|
||||
<h4 class="font-semibold mb-3 text-yellow-600">备选</h4>
|
||||
<p class="text-sm">华大系/塞力医疗：华为医疗军团的DCS AI方案已明确集成容器技术，需关注临床落地进展</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Risk Section -->
|
||||
<section id="risk" class="container mx-auto px-4 py-12 hidden">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold mb-4">风险提示</h2>
|
||||
<p class="text-gray-600">投资需关注的关键风险点</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-6">
|
||||
<!-- 技术风险 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg p-6 border-l-4 border-red-500">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<i data-lucide="alert-triangle" class="w-6 h-6 text-red-500"></i>
|
||||
<h3 class="text-xl font-bold">技术风险</h3>
|
||||
</div>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-red-500 mt-0.5"></i>
|
||||
<span class="text-sm">Flex:ai性能能否真正对标英伟达存疑</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-red-500 mt-0.5"></i>
|
||||
<span class="text-sm">开源社区活跃度不及预期</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-red-500 mt-0.5"></i>
|
||||
<span class="text-sm">ISV生态构建速度缓慢</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 商业化风险 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg p-6 border-l-4 border-orange-500">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<i data-lucide="trending-down" class="w-6 h-6 text-orange-500"></i>
|
||||
<h3 class="text-xl font-bold">商业化风险</h3>
|
||||
</div>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-orange-500 mt-0.5"></i>
|
||||
<span class="text-sm">变现路径不清晰</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-orange-500 mt-0.5"></i>
|
||||
<span class="text-sm">客户迁移成本高</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-orange-500 mt-0.5"></i>
|
||||
<span class="text-sm">华为云容器收入占比低（<5%）</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 政策竞争风险 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg p-6 border-l-4 border-yellow-500">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<i data-lucide="shield" class="w-6 h-6 text-yellow-500"></i>
|
||||
<h3 class="text-xl font-bold">政策与竞争风险</h3>
|
||||
</div>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-yellow-500 mt-0.5"></i>
|
||||
<span class="text-sm">阿里云、腾讯云快速跟进</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-yellow-500 mt-0.5"></i>
|
||||
<span class="text-sm">国内云CR3市场份额超70%</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-yellow-500 mt-0.5"></i>
|
||||
<span class="text-sm">开源软件出口管制风险</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Risk Warning Box -->
|
||||
<div class="mt-8 bg-red-50 border-2 border-red-200 rounded-xl p-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<i data-lucide="alert-circle" class="w-6 h-6 text-red-500 mt-0.5"></i>
|
||||
<div>
|
||||
<h4 class="font-bold text-red-700 mb-2">重要提示</h4>
|
||||
<p class="text-sm text-red-600">
|
||||
距离11月Flex:ai发布尚有8个月时间窗口，存在重大不确定性。历史上华为曾延期发布产品，需警惕"预期过度前置"风险。
|
||||
建议在9月UCM开源后根据社区热度动态调整仓位，若技术反馈正面可加仓，若平淡则减仓锁定收益。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-white py-12 mt-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center">
|
||||
<p class="text-sm opacity-75">© 2025 华为AI容器概念分析 | 数据来源：公开信息整理</p>
|
||||
<p class="text-xs opacity-50 mt-2">投资有风险，入市需谨慎</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Initialize Lucide icons
|
||||
lucide.createIcons();
|
||||
|
||||
// Tab navigation
|
||||
function showSection(sectionId) {
|
||||
// Hide all sections
|
||||
const sections = document.querySelectorAll('section');
|
||||
sections.forEach(section => {
|
||||
section.classList.add('hidden');
|
||||
});
|
||||
|
||||
// Show selected section
|
||||
const selectedSection = document.getElementById(sectionId);
|
||||
if (selectedSection) {
|
||||
selectedSection.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Update tab active state
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
tabs.forEach(tab => {
|
||||
tab.classList.remove('tab-active');
|
||||
});
|
||||
event.target.classList.add('tab-active');
|
||||
|
||||
// Reinitialize icons for newly shown content
|
||||
setTimeout(() => lucide.createIcons(), 100);
|
||||
}
|
||||
|
||||
// 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' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add animation on scroll
|
||||
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);
|
||||
|
||||
// Observe all metric cards and hover-lift elements
|
||||
document.querySelectorAll('.metric-card, .hover-lift').forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = 'all 0.6s ease';
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
这个HTML页面完整展示了华为AI容器概念的深度分析，主要特点包括：
|
||||
|
||||
## 核心功能：
|
||||
1. **详实的内容保留** - 完整呈现了Insight中的核心观点、逻辑分析、催化剂时间轴等
|
||||
2. **炫酷的视觉设计** - 使用渐变色、玻璃态效果、动画过渡等现代设计元素
|
||||
3. **股票数据表格** - 清晰展示相关股票及其关联度，使用星级评价系统
|
||||
4. **响应式布局** - 完美适配移动端和桌面端
|
||||
5. **交互式导航** - 标签页切换不同内容模块
|
||||
6. **数据可视化** - 进度条、时间轴、卡片等多种数据展示方式
|
||||
|
||||
## 设计亮点：
|
||||
- 渐变色主题贯穿全站
|
||||
- 卡片悬浮效果增强交互感
|
||||
- 时间轴清晰展示发展路径
|
||||
- 星级评价直观展示股票关联度
|
||||
- 风险提示醒目突出
|
||||
- 移动端友好的触控交互
|
||||
|
||||
页面内容深度与视觉效果并重，既保留了专业金融分析的严谨性，又具有现代化的审美体验。
|
||||
615
public/htmls/寒潮.html
Normal file
615
public/htmls/寒潮.html
Normal file
@@ -0,0 +1,615 @@
|
||||
|
||||
<!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.0/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;800&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', 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);
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.pulse-animation {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(180deg, #667eea, #764ba2);
|
||||
}
|
||||
|
||||
.stock-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stock-table {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.floating-icon {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Hero Section -->
|
||||
<div class="hero-gradient text-white py-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between">
|
||||
<div class="md:w-2/3 mb-10 md:mb-0">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-snowflake text-4xl mr-4 floating-icon"></i>
|
||||
<h1 class="text-5xl font-bold">寒潮投资概念</h1>
|
||||
</div>
|
||||
<p class="text-xl mb-6">季节性事件驱动的短期机遇分析</p>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="bg-white/20 backdrop-blur rounded-lg p-4">
|
||||
<div class="text-3xl font-bold">15-30</div>
|
||||
<div class="text-sm">有效窗口期（天）</div>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur rounded-lg p-4">
|
||||
<div class="text-3xl font-bold">3次</div>
|
||||
<div class="text-sm">2024-25预警峰值</div>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur rounded-lg p-4">
|
||||
<div class="text-3xl font-bold">10%</div>
|
||||
<div class="text-sm">波司登单日涨幅</div>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur rounded-lg p-4">
|
||||
<div class="text-3xl font-bold">60万吨</div>
|
||||
<div class="text-sm">东三省日耗峰值</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<div class="bg-white/10 backdrop-blur rounded-2xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4">当前阶段判断</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-fire text-yellow-400 mr-3"></i>
|
||||
<span>季节性事件驱动高峰期</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-chart-line text-green-400 mr-3"></i>
|
||||
<span>短期主题投资机会</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-exclamation-triangle text-orange-400 mr-3"></i>
|
||||
<span>非长期产业趋势</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto px-4 py-10">
|
||||
<!-- 时间轴 -->
|
||||
<div class="glass-morphism rounded-2xl p-8 mb-8">
|
||||
<h2 class="text-3xl font-bold gradient-text mb-6">概念事件时间轴</h2>
|
||||
<div class="relative">
|
||||
<div class="timeline-line"></div>
|
||||
<div class="space-y-6">
|
||||
<div class="timeline-item relative pl-8">
|
||||
<div class="bg-blue-50 rounded-lg p-4">
|
||||
<div class="font-semibold text-blue-600">2024年11月下旬</div>
|
||||
<div>首轮预警启动，寒潮蓝色预警，0℃线南压至苏皖北部</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item relative pl-8">
|
||||
<div class="bg-orange-50 rounded-lg p-4">
|
||||
<div class="font-semibold text-orange-600">2025年1月23日</div>
|
||||
<div>中国气象局启动寒潮暴雪Ⅲ级应急响应，局地降温超20℃</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item relative pl-8">
|
||||
<div class="bg-purple-50 rounded-lg p-4">
|
||||
<div class="font-semibold text-purple-600">2025年1-2月</div>
|
||||
<div>欧美同步寒潮，德国天然气消费激增，TTF价格突破50美元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item relative pl-8">
|
||||
<div class="bg-green-50 rounded-lg p-4">
|
||||
<div class="font-semibold text-green-600">2025年3月</div>
|
||||
<div>寒潮延续至春季，北京发布蓝色预警，0℃线南压至秦岭</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 核心逻辑 -->
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="glass-morphism rounded-xl p-6 card-hover">
|
||||
<div class="text-blue-500 text-4xl mb-4">
|
||||
<i class="fas fa-cloud-showers-heavy"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">气象灾害冲击</h3>
|
||||
<p class="text-gray-600">全国大部降温6-10℃，局地超20℃，官方定调"极端天气事件"</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<span class="text-sm text-gray-500">东三省日耗从35万→60万吨/天</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-morphism rounded-xl p-6 card-hover">
|
||||
<div class="text-purple-500 text-4xl mb-4">
|
||||
<i class="fas fa-link"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">供应链脆弱性</h3>
|
||||
<p class="text-gray-600">上游原料紧张、中游订单爆单、下游需求即时</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<span class="text-sm text-gray-500">古麒绒材羽绒收入占比99.27%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-morphism rounded-xl p-6 card-hover">
|
||||
<div class="text-green-500 text-4xl mb-4">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">能源刚性需求</h3>
|
||||
<p class="text-gray-600">空调制热+煤炭/天然气供暖叠加，需求非线性增长</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<span class="text-sm text-gray-500">提前10天供暖多耗5000万吨煤</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产业链分析 -->
|
||||
<div class="glass-morphism rounded-2xl p-8 mb-8">
|
||||
<h2 class="text-3xl font-bold gradient-text mb-6">产业链四象限模型</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6">
|
||||
<h3 class="text-lg font-bold text-blue-700 mb-4">能源链（需求强度：★★★★★）</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>上游资源：</span>
|
||||
<span class="font-semibold">中国神华、陕西煤业</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>中游制造：</span>
|
||||
<span class="font-semibold">古麒绒材</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>下游消费：</span>
|
||||
<span class="font-semibold">波司登</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6">
|
||||
<h3 class="text-lg font-bold text-green-700 mb-4">设备链（需求强度：★★★★）</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>核心原料：</span>
|
||||
<span class="font-semibold">棉花/鸭绒</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>热泵设备：</span>
|
||||
<span class="font-semibold">日出东方、双良节能</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>终端零售：</span>
|
||||
<span class="font-semibold">彩虹集团</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6">
|
||||
<h3 class="text-lg font-bold text-purple-700 mb-4">服务链（需求强度：★★★）</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>电力供应：</span>
|
||||
<span class="font-semibold">华能、华电</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>智能温控：</span>
|
||||
<span class="font-semibold">瑞纳智能</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>热力服务：</span>
|
||||
<span class="font-semibold">联美控股</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-orange-50 to-yellow-50 rounded-xl p-6">
|
||||
<h3 class="text-lg font-bold text-orange-700 mb-4">消费品链（需求强度：★★）</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>品牌服装：</span>
|
||||
<span class="font-semibold">波司登、太平鸟</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>家居保暖：</span>
|
||||
<span class="font-semibold">真爱美家</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>小家电：</span>
|
||||
<span class="font-semibold">彩虹集团</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 股票数据表格 -->
|
||||
<div class="glass-morphism rounded-2xl p-8 mb-8">
|
||||
<h2 class="text-3xl font-bold gradient-text mb-6">相关上市公司一览</h2>
|
||||
|
||||
<!-- 供热/暖板块 -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold mb-4 text-blue-600">
|
||||
<i class="fas fa-fire mr-2"></i>供热/暖板块
|
||||
</h3>
|
||||
<div class="stock-table">
|
||||
<table class="table table-zebra table-compact w-full">
|
||||
<thead>
|
||||
<tr class="bg-blue-100">
|
||||
<th>股票代码</th>
|
||||
<th>公司名称</th>
|
||||
<th>相关性描述</th>
|
||||
<th>核心逻辑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>联美控股</td>
|
||||
<td>2025H1供暖及蒸汽收入14.16亿元，占比74.62%</td>
|
||||
<td>供暖收入占比高，直接受益寒潮</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>惠天热电</td>
|
||||
<td>沈阳市大型专业供热上市公司，2025H1供暖供热气11.66亿元，占比96.35%</td>
|
||||
<td>专业供热且收入占比极高</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>京能热力</td>
|
||||
<td>实控人北京市国资委（持股28.46%）；2025H1热力服务收入6.55亿元，占比84.67%</td>
|
||||
<td>国资控股保障，区域垄断性强</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>金房能源</td>
|
||||
<td>2025H1供热行业6.55亿元，占比97.59%；北京地区占比62.11%</td>
|
||||
<td>供热收入占比极高，区域集中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>瑞纳智能</td>
|
||||
<td>2025H1供热节能服务0.74亿元，占比79.59%</td>
|
||||
<td>智慧供暖，技术壁垒高</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 热泵板块 -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold mb-4 text-green-600">
|
||||
<i class="fas fa-temperature-high mr-2"></i>热泵板块
|
||||
</h3>
|
||||
<div class="stock-table">
|
||||
<table class="table table-zebra table-compact w-full">
|
||||
<thead>
|
||||
<tr class="bg-green-100">
|
||||
<th>股票代码</th>
|
||||
<th>公司名称</th>
|
||||
<th>相关性描述</th>
|
||||
<th>核心逻辑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>日出东方</td>
|
||||
<td>推进以空气能热泵为龙头业务的战略布局；空气能热泵产能10万套左右</td>
|
||||
<td>热泵为核心业务，西藏项目17.67亿</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>万和电气</td>
|
||||
<td>2024年推出的R290热泵产品成为行业内的佼佼者</td>
|
||||
<td>R290热泵技术领先</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>双良节能</td>
|
||||
<td>中国最大的溴化锂制冷机、吸收式热泵和空冷器生产商和集成商</td>
|
||||
<td>溴化锂热泵领域龙头</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>振邦智能</td>
|
||||
<td>空气能热泵是公司主要产品智能电器控制器的主要应用之一</td>
|
||||
<td>热泵控制器核心供应商</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 御寒产品板块 -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold mb-4 text-purple-600">
|
||||
<i class="fas fa-tshirt mr-2"></i>御寒产品板块
|
||||
</h3>
|
||||
<div class="stock-table">
|
||||
<table class="table table-zebra table-compact w-full">
|
||||
<thead>
|
||||
<tr class="bg-purple-100">
|
||||
<th>股票代码</th>
|
||||
<th>公司名称</th>
|
||||
<th>相关性描述</th>
|
||||
<th>核心逻辑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>古麒绒材</td>
|
||||
<td>主要产品为高规格羽绒材料，2025H1羽绒行业5.33亿元，占比99.27%</td>
|
||||
<td>最纯粹的羽绒原料标的</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>华英农业</td>
|
||||
<td>2025H1羽绒13.55亿元，占比65.43%</td>
|
||||
<td>羽绒收入占比较高</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>真爱美家</td>
|
||||
<td>2025H1毛毯3.45亿元，占比88%，保暖性和舒适度高</td>
|
||||
<td>毛毯收入占比极高</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-</td>
|
||||
<td>彩虹集团</td>
|
||||
<td>电热毯行业龙头；2025H1家用柔性取暖系列3.56亿元，占比65.73%</td>
|
||||
<td>电热毯龙头，需求反馈最快</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 能源板块 -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold mb-4 text-orange-600">
|
||||
<i class="fas fa-oil-can mr-2"></i>能源板块
|
||||
</h3>
|
||||
<div class="stock-table">
|
||||
<table class="table table-zebra table-compact w-full">
|
||||
<thead>
|
||||
<tr class="bg-orange-100">
|
||||
<th>股票代码</th>
|
||||
<th>公司名称</th>
|
||||
<th>相关性描述</th>
|
||||
<th>核心逻辑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>601088</td>
|
||||
<td>中国神华</td>
|
||||
<td>煤炭产业链龙头，股息率4.8%</td>
|
||||
<td>长协煤保供能力强，现金流稳定</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>601225</td>
|
||||
<td>陕西煤业</td>
|
||||
<td>煤炭产业链，股息率4.5%</td>
|
||||
<td>资源禀赋优秀，成本优势明显</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>600188</td>
|
||||
<td>兖矿能源</td>
|
||||
<td>煤炭产业链，澳洲产能占比高</td>
|
||||
<td>受益国际煤价上涨，弹性大</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>601018</td>
|
||||
<td>中煤能源</td>
|
||||
<td>煤炭产业链，央企背景</td>
|
||||
<td>产能规模大，保供主力</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>600997</td>
|
||||
<td>开滦股份</td>
|
||||
<td>焦炭产业链，煤焦一体化</td>
|
||||
<td>焦煤涨价受益，弹性较好</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 投资策略 -->
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="glass-morphism rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-green-600">
|
||||
<i class="fas fa-chess-rook mr-2"></i>操作策略
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-green-50 rounded-lg p-4">
|
||||
<div class="font-semibold mb-2">三日法则</div>
|
||||
<p class="text-sm text-gray-600">每3日评估一次，若数据未达预期立即减半</p>
|
||||
</div>
|
||||
<div class="bg-yellow-50 rounded-lg p-4">
|
||||
<div class="font-semibold mb-2">止损纪律</div>
|
||||
<p class="text-sm text-gray-600">买入3日内若下跌超5%，立即止损</p>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-4">
|
||||
<div class="font-semibold mb-2">仓位控制</div>
|
||||
<p class="text-sm text-gray-600">主题配置不超过10%，卫星策略定位</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-morphism rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-red-600">
|
||||
<i class="fas fa-exclamation-triangle mr-2"></i>关键风险
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-red-50 rounded-lg p-4">
|
||||
<div class="font-semibold mb-2">可持续性风险</div>
|
||||
<p class="text-sm text-gray-600">天气红利难持续，寒潮结束需求断崖</p>
|
||||
</div>
|
||||
<div class="bg-orange-50 rounded-lg p-4">
|
||||
<div class="font-semibold mb-2">技术风险</div>
|
||||
<p class="text-sm text-gray-600">热泵低温性能衰减，-10℃以下COP降至2.5</p>
|
||||
</div>
|
||||
<div class="bg-purple-50 rounded-lg p-4">
|
||||
<div class="font-semibold mb-2">政策风险</div>
|
||||
<p class="text-sm text-gray-600">保供压制煤价，长协上限770元/吨</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关键跟踪指标 -->
|
||||
<div class="glass-morphism rounded-2xl p-8">
|
||||
<h2 class="text-3xl font-bold gradient-text mb-6">关键跟踪指标</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-gradient-to-r from-red-500 to-orange-500 text-white rounded-xl p-6">
|
||||
<div class="text-2xl font-bold mb-2">一级指标（每日）</div>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 中央气象台预警等级</li>
|
||||
<li>• 东三省电厂日耗（>60万吨）</li>
|
||||
<li>• 生猪日屠宰量（>17万头）</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-xl p-6">
|
||||
<div class="text-2xl font-bold mb-2">二级指标（每周）</div>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 秦皇岛港库存（<500万吨）</li>
|
||||
<li>• 羽绒原料价格指数（周涨>5%）</li>
|
||||
<li>• 小家电换手率（>5%）</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-green-500 to-teal-500 text-white rounded-xl p-6">
|
||||
<div class="text-2xl font-bold mb-2">三级指标（每月）</div>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 天猫京东羽绒服销量</li>
|
||||
<li>• 企业月度经营数据</li>
|
||||
<li>• 能源库存变动</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="hero-gradient text-white py-8 mt-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<p class="mb-2">寒潮投资概念解析 - 数据更新至2025年</p>
|
||||
<p class="text-sm opacity-75">本内容仅供参考，不构成投资建议</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 动态效果
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 滚动动画
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -100px 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);
|
||||
|
||||
document.querySelectorAll('.card-hover').forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = 'all 0.6s ease';
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// 表格行悬停效果
|
||||
document.querySelectorAll('tbody tr').forEach(row => {
|
||||
row.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.02)';
|
||||
this.style.transition = 'all 0.2s ease';
|
||||
});
|
||||
row.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
746
public/htmls/对日反制.html
Normal file
746
public/htmls/对日反制.html
Normal file
@@ -0,0 +1,746 @@
|
||||
我将为您创建一个专业的金融投资分析页面，展示"对日反制"投资概念的深度分析。这个页面将融合金融严谨性与现代设计美学。
|
||||
|
||||
|
||||
<!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>
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<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;800&display=swap');
|
||||
|
||||
* {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 2px;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.gradient-border-inner {
|
||||
background: #0f172a;
|
||||
border-radius: calc(1rem - 2px);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
}
|
||||
|
||||
.hover-card {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.hover-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: .5; }
|
||||
}
|
||||
|
||||
.stock-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.stock-table::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.stock-table::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.stock-table::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tag-primary {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
}
|
||||
|
||||
.tag-secondary {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
||||
}
|
||||
|
||||
.tag-accent {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
}
|
||||
|
||||
.number-stat {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.risk-high { border-left: 4px solid #ef4444; }
|
||||
.risk-medium { border-left: 4px solid #f59e0b; }
|
||||
.risk-low { border-left: 4px solid #10b981; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-950 text-white">
|
||||
<!-- Hero Section -->
|
||||
<div class="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-gray-950"></div>
|
||||
<div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 backdrop-blur-sm mb-6">
|
||||
<span class="pulse-dot w-2 h-2 bg-green-400 rounded-full mr-2"></span>
|
||||
<span class="text-sm font-medium text-gray-300">2025年下半年地缘政治驱动的投资机会</span>
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
|
||||
对日反制概念
|
||||
</h1>
|
||||
<p class="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
|
||||
地缘政治博弈下的国产替代加速，从精准制裁到产业链重构的投资逻辑梳理
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-r from-red-500 to-orange-500 flex items-center justify-center">
|
||||
<i class="fas fa-exclamation-triangle text-white text-xl"></i>
|
||||
</div>
|
||||
<h3 class="ml-4 text-lg font-semibold">风险警示</h3>
|
||||
</div>
|
||||
<p class="text-gray-400">主题炒作早期阶段，警惕情绪退潮风险，政策不确定性高</p>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center">
|
||||
<i class="fas fa-industry text-white text-xl"></i>
|
||||
</div>
|
||||
<h3 class="ml-4 text-lg font-semibold">核心机会</h3>
|
||||
</div>
|
||||
<p class="text-gray-400">资源管制 > 材料替代 > 水产出口，关注实质性国产替代标的</p>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
|
||||
<i class="fas fa-chart-line text-white text-xl"></i>
|
||||
</div>
|
||||
<h3 class="ml-4 text-lg font-semibold">时间窗口</h3>
|
||||
</div>
|
||||
<p class="text-gray-400">3-6个月关键观察期，等待政策验证，不赌情绪溢价</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<div class="py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">
|
||||
<span class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||
关键事件时间轴
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full timeline-line rounded-full"></div>
|
||||
|
||||
<div class="space-y-12">
|
||||
<!-- Event 1 -->
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-full md:w-5/12 text-right pr-8 hidden md:block">
|
||||
<div class="gradient-border">
|
||||
<div class="gradient-border-inner">
|
||||
<div class="text-sm text-purple-400 mb-2">2025年5月19日</div>
|
||||
<h4 class="text-lg font-semibold mb-2">背景伏笔：资源管制启动</h4>
|
||||
<p class="text-gray-400 text-sm">缅甸成为日本T金属第一大供应国，但货源依赖中国境内非法走私，中方加强全链条管控</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-500 rounded-full border-4 border-gray-950"></div>
|
||||
<div class="w-full md:w-5/12 pl-8 md:hidden">
|
||||
<div class="gradient-border">
|
||||
<div class="gradient-border-inner">
|
||||
<div class="text-sm text-purple-400 mb-2">2025年5月19日</div>
|
||||
<h4 class="text-lg font-semibold mb-2">背景伏笔：资源管制启动</h4>
|
||||
<p class="text-gray-400 text-sm">缅甸成为日本T金属第一大供应国，但货源依赖中国境内非法走私，中方加强全链条管控</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event 2 -->
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-full md:w-5/12 text-right pr-8 hidden md:block">
|
||||
<div class="gradient-border">
|
||||
<div class="gradient-border-inner">
|
||||
<div class="text-sm text-orange-400 mb-2">2025年9月8日</div>
|
||||
<h4 class="text-lg font-semibold mb-2">精准制裁落地</h4>
|
||||
<p class="text-gray-400 text-sm">外交部依据《反外国制裁法》对日本参议员石平实施制裁，冻结资产、禁止交易、人员禁入</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-orange-500 rounded-full border-4 border-gray-950 pulse-dot"></div>
|
||||
<div class="w-full md:w-5/12 pl-8 md:hidden">
|
||||
<div class="gradient-border">
|
||||
<div class="gradient-border-inner">
|
||||
<div class="text-sm text-orange-400 mb-2">2025年9月8日</div>
|
||||
<h4 class="text-lg font-semibold mb-2">精准制裁落地</h4>
|
||||
<p class="text-gray-400 text-sm">外交部依据《反外国制裁法》对日本参议员石平实施制裁，冻结资产、禁止交易、人员禁入</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event 3 -->
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-full md:w-5/12 text-right pr-8 hidden md:block">
|
||||
<div class="gradient-border">
|
||||
<div class="gradient-border-inner">
|
||||
<div class="text-sm text-red-400 mb-2">2025年11月15日</div>
|
||||
<h4 class="text-lg font-semibold mb-2">事态升级信号</h4>
|
||||
<p class="text-gray-400 text-sm">"玉渊谭天"发布：针对高市早苗挑衅，中方表态从"敦促"升级为"一切后果由日方承担"</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-red-500 rounded-full border-4 border-gray-950 pulse-dot"></div>
|
||||
<div class="w-full md:w-5/12 pl-8 md:hidden">
|
||||
<div class="gradient-border">
|
||||
<div class="gradient-border-inner">
|
||||
<div class="text-sm text-red-400 mb-2">2025年11月15日</div>
|
||||
<h4 class="text-lg font-semibold mb-2">事态升级信号</h4>
|
||||
<p class="text-gray-400 text-sm">"玉渊谭天"发布：针对高市早苗挑衅，中方表态从"敦促"升级为"一切后果由日方承担"</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Core Logic Section -->
|
||||
<div class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-950 to-gray-900">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">
|
||||
<span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
|
||||
核心逻辑三层递进
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-transparent rounded-2xl blur-xl"></div>
|
||||
<div class="relative glass-morphism rounded-2xl p-8 h-full">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
|
||||
<span class="text-2xl font-bold text-blue-400">1</span>
|
||||
</div>
|
||||
<h3 class="ml-3 text-xl font-semibold">政治惩戒必要性</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">
|
||||
石平案开创对日政治人物精准制裁先例，法律依据明确，手段涵盖资产冻结、人员禁入、供应链隔离，形成强力震慑。
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 rounded-full text-xs font-medium tag-primary">《反外国制裁法》</span>
|
||||
<span class="px-3 py-1 rounded-full text-xs font-medium tag-primary">精准制裁</span>
|
||||
<span class="px-3 py-1 rounded-full text-xs font-medium tag-primary">民意基础</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-transparent rounded-2xl blur-xl"></div>
|
||||
<div class="relative glass-morphism rounded-2xl p-8 h-full">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
|
||||
<span class="text-2xl font-bold text-purple-400">2</span>
|
||||
</div>
|
||||
<h3 class="ml-3 text-xl font-semibold">资源反制可行性</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">
|
||||
日本在半导体材料、高性能陶瓷、OLED材料等领域深度依赖中国供应链。中方已在战略矿产实施全链条管控，具备"卡脖子"能力。
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 rounded-full text-xs font-medium tag-secondary">半导体材料</span>
|
||||
<span class="px-3 py-1 rounded-full text-xs font-medium tag-secondary">稀土管制</span>
|
||||
<span class="px-3 py-1 rounded-full text-xs font-medium tag-secondary">全链条管控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-orange-500/20 to-transparent rounded-2xl blur-xl"></div>
|
||||
<div class="relative glass-morphism rounded-2xl p-8 h-full">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
|
||||
<span class="text-2xl font-bold text-orange-400">3</span>
|
||||
</div>
|
||||
<h3 class="ml-3 text-xl font-semibold">国力博弈战略性</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">
|
||||
日本面临"美关税压力+国内加息+经济疲软"三重困境，GDP连续负增长，对华出口依存度超20%，此时反制可精准打击其执政基础。
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 rounded-full text-xs font-medium tag-accent">两线承压</span>
|
||||
<span class="px-3 py-1 rounded-full text-xs font-medium tag-accent">战略筹码</span>
|
||||
<span class="px-3 py-1 rounded-full text-xs font-medium tag-accent">以点破面</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stock Data Tables -->
|
||||
<div class="py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">
|
||||
<span class="bg-gradient-to-r from-green-400 to-emerald-400 bg-clip-text text-transparent">
|
||||
核心标的深度剖析
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Semiconductor Materials -->
|
||||
<div class="gradient-border">
|
||||
<div class="gradient-border-inner">
|
||||
<h3 class="text-2xl font-bold mb-6 flex items-center">
|
||||
<i class="fas fa-microchip mr-3 text-blue-400"></i>
|
||||
半导体材料板块
|
||||
</h3>
|
||||
<div class="stock-table">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-700">
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">股票代码</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">细分领域</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">日本产业地位</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">核心竞争力</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">风险等级</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-blue-400">彤程新材</td>
|
||||
<td class="py-3 px-4">ArF/KrF光刻胶</td>
|
||||
<td class="py-3 px-4">日系及杜邦主导</td>
|
||||
<td class="py-3 px-4">KrF量产，ArF验证中</td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-yellow-500/20 text-yellow-400">中等</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-blue-400">南大光电</td>
|
||||
<td class="py-3 px-4">ArF光刻胶</td>
|
||||
<td class="py-3 px-4">日系及杜邦主导</td>
|
||||
<td class="py-3 px-4">通过02专项验收</td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-yellow-500/20 text-yellow-400">中等</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-purple-400">华懋科技</td>
|
||||
<td class="py-3 px-4">PSPI</td>
|
||||
<td class="py-3 px-4">日本东丽、旭化成主导</td>
|
||||
<td class="py-3 px-4">收购徐州博康，PSPI量产</td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-red-500/20 text-red-400">高</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-purple-400">鼎龙股份</td>
|
||||
<td class="py-3 px-4">PSPI</td>
|
||||
<td class="py-3 px-4">日本东丽、旭化成主导</td>
|
||||
<td class="py-3 px-4">PSPI产品国内领先</td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-red-500/20 text-red-400">高</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-green-400">华海诚科</td>
|
||||
<td class="py-3 px-4">环氧塑封料EMC</td>
|
||||
<td class="py-3 px-4">日本住友电工、力森诺科主导</td>
|
||||
<td class="py-3 px-4">H1营收占比92.8%</td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-green-500/20 text-green-400">低</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- High Performance Ceramics -->
|
||||
<div class="gradient-border">
|
||||
<div class="gradient-border-inner">
|
||||
<h3 class="text-2xl font-bold mb-6 flex items-center">
|
||||
<i class="fas fa-cube mr-3 text-purple-400"></i>
|
||||
高性能陶瓷板块
|
||||
</h3>
|
||||
<div class="stock-table">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-700">
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">股票代码</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">细分领域</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">日本产业地位</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">技术优势</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">风险等级</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-purple-400">国瓷材料</td>
|
||||
<td class="py-3 px-4">MLCC陶瓷粉体</td>
|
||||
<td class="py-3 px-4">日本京瓷、TDK主导</td>
|
||||
<td class="py-3 px-4">全球MLCC粉体龙头</td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-green-500/20 text-green-400">低</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-purple-400">三环集团</td>
|
||||
<td class="py-3 px-4">陶瓷电容</td>
|
||||
<td class="py-3 px-4">日本京瓷、TDK主导</td>
|
||||
<td class="py-3 px-4">国内MLCC龙头</td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-green-500/20 text-green-400">低</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-purple-400">中瓷电子</td>
|
||||
<td class="py-3 px-4">电子陶瓷外壳</td>
|
||||
<td class="py-3 px-4">日本京瓷、TDK主导</td>
|
||||
<td class="py-3 px-4">军用电子陶瓷领先</td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-yellow-500/20 text-yellow-400">中等</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other Related Stocks -->
|
||||
<div class="gradient-border">
|
||||
<div class="gradient-border-inner">
|
||||
<h3 class="text-2xl font-bold mb-6 flex items-center">
|
||||
<i class="fas fa-water mr-3 text-cyan-400"></i>
|
||||
其他相关板块
|
||||
</h3>
|
||||
<div class="stock-table">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-700">
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">股票代码</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">细分领域</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">关联逻辑</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">实际受益度</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-300">投资建议</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-cyan-400">中水渔业</td>
|
||||
<td class="py-3 px-4">水产养殖</td>
|
||||
<td class="py-3 px-4">对日出口占比10%</td>
|
||||
<td class="py-3 px-4"><span class="text-red-400">受损方</span></td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-red-500/20 text-red-400">规避</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-cyan-400">乐凯胶片</td>
|
||||
<td class="py-3 px-4">偏光片TAC膜</td>
|
||||
<td class="py-3 px-4">唯一国产TFT-TAC膜</td>
|
||||
<td class="py-3 px-4">技术突破但规模小</td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-yellow-500/20 text-yellow-400">观察</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition-colors">
|
||||
<td class="py-3 px-4 font-medium text-cyan-400">中国稀土</td>
|
||||
<td class="py-3 px-4">稀土资源</td>
|
||||
<td class="py-3 px-4">潜在反制工具</td>
|
||||
<td class="py-3 px-4"><span class="text-green-400">高</span></td>
|
||||
<td class="py-3 px-4"><span class="px-2 py-1 rounded text-xs bg-green-500/20 text-green-400">关注</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Risk Analysis -->
|
||||
<div class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-gray-950">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">
|
||||
<span class="bg-gradient-to-r from-red-400 to-orange-400 bg-clip-text text-transparent">
|
||||
风险提示与挑战
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="glass-morphism rounded-2xl p-6 risk-high hover-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-500/20 flex items-center justify-center">
|
||||
<i class="fas fa-exclamation-triangle text-red-400"></i>
|
||||
</div>
|
||||
<h3 class="ml-3 text-lg font-semibold">技术风险</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-3">
|
||||
光刻胶需12-18个月验证期，国产良率低、价格高20-30%，若日方断供将导致停产风险
|
||||
</p>
|
||||
<div class="text-xs text-gray-500">
|
||||
关键指标：良率稳定性 < 90%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 risk-high hover-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-500/20 flex items-center justify-center">
|
||||
<i class="fas fa-sync-alt text-red-400"></i>
|
||||
</div>
|
||||
<h3 class="ml-3 text-lg font-semibold">反制螺旋风险</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-3">
|
||||
日本可能对半导体设备、精密仪器实施出口管制，影响长江存储、中芯国际扩产计划
|
||||
</p>
|
||||
<div class="text-xs text-gray-500">
|
||||
关键指标：东京电子设备出口许可
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 risk-medium hover-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
|
||||
<i class="fas fa-dollar-sign text-yellow-400"></i>
|
||||
</div>
|
||||
<h3 class="ml-3 text-lg font-semibold">商业化风险</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-3">
|
||||
规模不经济导致国产替代成本高，晶圆厂替换动力不足，商业化进程缓慢
|
||||
</p>
|
||||
<div class="text-xs text-gray-500">
|
||||
关键指标：国产替代成本差异 > 15%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 risk-medium hover-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
|
||||
<i class="fas fa-users text-yellow-400"></i>
|
||||
</div>
|
||||
<h3 class="ml-3 text-lg font-semibold">客户集中度风险</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-3">
|
||||
华海诚科等公司前五大客户占比超70%，若终端需求下滑将大幅影响业绩
|
||||
</p>
|
||||
<div class="text-xs text-gray-500">
|
||||
关键指标：CR5 > 70%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 risk-low hover-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
|
||||
<i class="fas fa-shield-alt text-green-400"></i>
|
||||
</div>
|
||||
<h3 class="ml-3 text-lg font-semibold">政策持续性</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-3">
|
||||
国产替代政策具有长期性，即使地缘缓和，产业链安全仍是核心诉求
|
||||
</p>
|
||||
<div class="text-xs text-gray-500">
|
||||
关键指标："十四五"规划延续性
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 risk-low hover-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
|
||||
<i class="fas fa-chart-line text-green-400"></i>
|
||||
</div>
|
||||
<h3 class="ml-3 text-lg font-semibold">市场需求确定</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-3">
|
||||
半导体、新能源等下游需求旺盛，为国产替代提供确定的市场空间
|
||||
</p>
|
||||
<div class="text-xs text-gray-500">
|
||||
关键指标：半导体CAPEX增速 > 10%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Investment Strategy -->
|
||||
<div class="py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="gradient-border mb-12">
|
||||
<div class="gradient-border-inner text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
<span class="bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
|
||||
投资策略与操作建议
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-gray-400 text-lg">
|
||||
当前阶段，观望优于参与。等待政策验证，不赌情绪溢价
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-card">
|
||||
<div class="text-center mb-6">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 mb-4">
|
||||
<i class="fas fa-check-circle text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">重点配置</h3>
|
||||
<p class="text-sm text-gray-400">资源管制 > 材料替代 > 水产出口</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full mr-3"></span>
|
||||
<span class="text-sm">中国稀土（资源定价权）</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full mr-3"></span>
|
||||
<span class="text-sm">华海诚科（EMC龙头）</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full mr-3"></span>
|
||||
<span class="text-sm">鼎龙股份（PSPI量产）</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-card">
|
||||
<div class="text-center mb-6">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 mb-4">
|
||||
<i class="fas fa-eye text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">观察等待</h3>
|
||||
<p class="text-sm text-gray-400">技术突破但规模尚小</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-yellow-400 rounded-full mr-3"></span>
|
||||
<span class="text-sm">彤程新材（光刻胶验证）</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-yellow-400 rounded-full mr-3"></span>
|
||||
<span class="text-sm">乐凯胶片（TAC膜研发）</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-yellow-400 rounded-full mr-3"></span>
|
||||
<span class="text-sm">南大光电（ArF进展）</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-card">
|
||||
<div class="text-center mb-6">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-r from-red-500 to-pink-500 mb-4">
|
||||
<i class="fas fa-times-circle text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">坚决规避</h3>
|
||||
<p class="text-sm text-gray-400">逻辑错误，将直接受损</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-red-400 rounded-full mr-3"></span>
|
||||
<span class="text-sm">中水渔业（水产出口）</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-red-400 rounded-full mr-3"></span>
|
||||
<span class="text-sm">国联水产（对日依赖）</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-red-400 rounded-full mr-3"></span>
|
||||
<span class="text-sm">獐子岛（贸易风险）</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Metrics -->
|
||||
<div class="glass-morphism rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-6">关键跟踪指标</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold number-stat mb-2">≥2次/月</div>
|
||||
<div class="text-sm text-gray-400">部级官员提及反制</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold number-stat mb-2">≥1项</div>
|
||||
<div class="text-sm text-gray-400">贸易救济立案</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold number-stat mb-2">>30天</div>
|
||||
<div class="text-sm text-gray-400">出口许可周期</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold number-stat mb-2">>15%</div>
|
||||
<div class="text-sm text-gray-400">概念股换手率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 px-4 border-t border-gray-800">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<p class="text-gray-500 text-sm">
|
||||
* 本分析基于公开信息整理，不构成投资建议。投资有风险，决策需谨慎。
|
||||
</p>
|
||||
<p class="text-gray-600 text-xs mt-4">
|
||||
数据来源：外交部、产业库、公司财报、机构调研 | 更新时间：2025年11月
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Add smooth scroll behavior
|
||||
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' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add intersection observer for fade-in animations
|
||||
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('.hover-card').forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||
observer.observe(card);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
604
public/htmls/忆阻器.html
Normal file
604
public/htmls/忆阻器.html
Normal 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>代工厂缺失：创业公司被迫自建产线，良率可能<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，商业需>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>成本倒挂：自建产线成本>$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>市场错配：脑机接口市场规模<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>
|
||||
736
public/htmls/林地资源.html
Normal file
736
public/htmls/林地资源.html
Normal file
@@ -0,0 +1,736 @@
|
||||
<!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>
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<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;800;900&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.number-highlight {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.sticky-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
|
||||
margin: 3rem 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<div class="sticky-nav shadow-lg">
|
||||
<div class="navbar bg-base-100 px-4 lg:px-8">
|
||||
<div class="flex-1">
|
||||
<a href="#" class="btn btn-ghost text-xl font-bold gradient-text">
|
||||
<i class="fas fa-tree mr-2"></i>林地资源分析
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button class="btn btn-circle btn-ghost">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</button>
|
||||
<button class="btn btn-circle btn-ghost">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden">
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
<div class="glass-morphism rounded-3xl p-8 lg:p-12">
|
||||
<div class="flex flex-col lg:flex-row items-center gap-8">
|
||||
<div class="flex-1 text-white">
|
||||
<div class="badge badge-warning badge-lg mb-4">战略资产重构</div>
|
||||
<h1 class="text-4xl lg:text-6xl font-bold mb-6">
|
||||
林地资源：从传统资产到<span class="text-yellow-300">三重价值</span>跃迁
|
||||
</h1>
|
||||
<p class="text-lg lg:text-xl mb-8 opacity-90">
|
||||
政策市场化改革 + 产业链上游紧缩 + 碳汇价值商业化，开启林地资源新时代
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div class="stat bg-white/20 rounded-lg px-4 py-3">
|
||||
<div class="stat-title text-white/80">2024年</div>
|
||||
<div class="stat-value text-2xl text-white">政策破冰期</div>
|
||||
</div>
|
||||
<div class="stat bg-white/20 rounded-lg px-4 py-3">
|
||||
<div class="stat-title text-white/80">2025年</div>
|
||||
<div class="stat-value text-2xl text-white">碳汇元年</div>
|
||||
</div>
|
||||
<div class="stat bg-white/20 rounded-lg px-4 py-3">
|
||||
<div class="stat-title text-white/80">2027年</div>
|
||||
<div class="stat-value text-2xl text-white">价值爆发期</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="bg-white/10 rounded-2xl p-6">
|
||||
<canvas id="trendChart" width="400" height="300"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 时间轴 -->
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<h2 class="text-3xl font-bold text-white mb-8">概念事件与背景时间轴</h2>
|
||||
<div class="timeline">
|
||||
<div class="relative">
|
||||
<!-- 时间轴线 -->
|
||||
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-white/30"></div>
|
||||
|
||||
<!-- 时间节点 -->
|
||||
<div class="relative flex items-center mb-8">
|
||||
<div class="timeline-dot absolute left-8 w-4 h-4 bg-yellow-400 rounded-full -translate-x-1/2"></div>
|
||||
<div class="ml-16 glass-morphism rounded-xl p-6 card-hover flex-1">
|
||||
<div class="text-yellow-400 font-bold text-lg mb-2">2024年6月</div>
|
||||
<h3 class="text-xl font-semibold text-white mb-2">政策破冰期</h3>
|
||||
<p class="text-white/80">国家林草局印发《集体林地经营权流转管理办法》，确立市场化机制</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex items-center mb-8">
|
||||
<div class="timeline-dot absolute left-8 w-4 h-4 bg-blue-400 rounded-full -translate-x-1/2"></div>
|
||||
<div class="ml-16 glass-morphism rounded-xl p-6 card-hover flex-1">
|
||||
<div class="text-blue-400 font-bold text-lg mb-2">2023-2024年</div>
|
||||
<h3 class="text-xl font-semibold text-white mb-2">产业觉醒期</h3>
|
||||
<p class="text-white/80">全球新增商品浆产能超800万吨，木片资源日趋紧张</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex items-center mb-8">
|
||||
<div class="timeline-dot absolute left-8 w-4 h-4 bg-green-400 rounded-full -translate-x-1/2"></div>
|
||||
<div class="ml-16 glass-morphism rounded-xl p-6 card-hover flex-1">
|
||||
<div class="text-green-400 font-bold text-lg mb-2">2024年9月10日</div>
|
||||
<h3 class="text-xl font-semibold text-white mb-2">碳汇商业化元年</h3>
|
||||
<p class="text-white/80">CCER交易规则最终确定，岳阳林纸中标云南254.4万亩林业碳汇项目</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex items-center">
|
||||
<div class="timeline-dot absolute left-8 w-4 h-4 bg-red-400 rounded-full -translate-x-1/2"></div>
|
||||
<div class="ml-16 glass-morphism rounded-xl p-6 card-hover flex-1">
|
||||
<div class="text-red-400 font-bold text-lg mb-2">2024年</div>
|
||||
<h3 class="text-xl font-semibold text-white mb-2">地缘政治映射</h3>
|
||||
<p class="text-white/80">印尼通过林地许可查封部分镍矿，林地成为资源国调控工具</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心观点 -->
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<h2 class="text-3xl font-bold text-white mb-8">核心观点摘要</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="glass-morphism rounded-2xl p-6 card-hover">
|
||||
<div class="text-6xl mb-4">📊</div>
|
||||
<h3 class="text-2xl font-bold text-white mb-3">市场认知严重滞后</h3>
|
||||
<p class="text-white/80 mb-4">10篇主流研报中0篇涉及林地资源，关注度处于冰点</p>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge badge-error">预期差极大</span>
|
||||
<span class="badge badge-warning">主题发酵期</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 card-hover">
|
||||
<div class="text-6xl mb-4">💰</div>
|
||||
<h3 class="text-2xl font-bold text-white mb-3">三重价值重构</h3>
|
||||
<p class="text-white/80 mb-4">造纸产业链成本护城河 + 双碳战略绿色金融资产 + 地缘政策缓冲器</p>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge badge-success">成本优势</span>
|
||||
<span class="badge badge-info">碳汇价值</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 p-8 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded-2xl border border-white/20">
|
||||
<p class="text-xl text-white font-medium italic">
|
||||
"林地资源已不再是传统意义上的农林资产，而是造纸产业链的'成本护城河'、双碳战略下的'绿色金融资产'以及资源民族主义的'政策缓冲器'"
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心逻辑 -->
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<h2 class="text-3xl font-bold text-white mb-8">三重核心驱动力</h2>
|
||||
<div class="space-y-8">
|
||||
<!-- 政策市场化 -->
|
||||
<div class="glass-morphism rounded-2xl p-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-gavel text-white text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white">政策市场化改革</h3>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-4 mt-6">
|
||||
<div class="bg-white/10 rounded-lg p-4">
|
||||
<div class="text-yellow-400 font-semibold mb-2">确权到流转闭环</div>
|
||||
<p class="text-white/80 text-sm">林地可从分散农户集中至企业，实现规模化经营</p>
|
||||
</div>
|
||||
<div class="bg-white/10 rounded-lg p-4">
|
||||
<div class="text-yellow-400 font-semibold mb-2">金融属性激活</div>
|
||||
<p class="text-white/80 text-sm">经营权可抵押、可融资，资产估值转向现金流折现</p>
|
||||
</div>
|
||||
<div class="bg-white/10 rounded-lg p-4">
|
||||
<div class="text-yellow-400 font-semibold mb-2">流动性溢价</div>
|
||||
<p class="text-white/80 text-sm">拥有流转渠道的企业将获得流动性溢价</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产业链紧缩 -->
|
||||
<div class="glass-morphism rounded-2xl p-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-industry text-white text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white">产业链上游资源紧缩</h3>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 gap-6 mt-6">
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-blue-400 mb-2">2027年前无新增项目</div>
|
||||
<p class="text-white/80">全球新增商品浆产能超800万吨，下一个大型项目需等到2027年</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-blue-400 mb-2">成本差100美元+</div>
|
||||
<p class="text-white/80">太阳纸业自制木片成本50-100美元/吨，外购价150-200美元/吨</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<div class="flex justify-between text-white/80 mb-2">太阳纸业老挝木片自供率</div>
|
||||
<div class="w-full bg-white/20 rounded-full h-6 progress-bar">
|
||||
<div class="bg-gradient-to-r from-blue-400 to-blue-600 h-6 rounded-full flex items-center justify-center text-white font-semibold" style="width: 60%">
|
||||
60% (2024年)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 碳汇价值 -->
|
||||
<div class="glass-morphism rounded-2xl p-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-leaf text-white text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white">碳汇价值商业化</h3>
|
||||
</div>
|
||||
<div class="stats shadow w-full">
|
||||
<div class="stat place-items-center bg-white/10 rounded-lg">
|
||||
<div class="stat-title">碳汇毛利率</div>
|
||||
<div class="stat-value text-green-400">70-80%</div>
|
||||
</div>
|
||||
<div class="stat place-items-center bg-white/10 rounded-lg">
|
||||
<div class="stat-title">岳阳林纸储备</div>
|
||||
<div class="stat-value text-green-400">8000万亩+</div>
|
||||
</div>
|
||||
<div class="stat place-items-center bg-white/10 rounded-lg">
|
||||
<div class="stat-title">CCER价格预期</div>
|
||||
<div class="stat-value text-green-400">年增30-40%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心公司对比 -->
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<h2 class="text-3xl font-bold text-white mb-8">核心玩家深度对比</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full glass-morphism rounded-2xl overflow-hidden">
|
||||
<thead class="bg-white/20">
|
||||
<tr>
|
||||
<th class="text-white">公司</th>
|
||||
<th class="text-white">核心逻辑</th>
|
||||
<th class="text-white">资源规模</th>
|
||||
<th class="text-white">商业模式</th>
|
||||
<th class="text-white">竞争优势</th>
|
||||
<th class="text-white">投资价值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold text-yellow-400">太阳纸业</td>
|
||||
<td>林浆纸一体化</td>
|
||||
<td>老挝6万公顷</td>
|
||||
<td>木片自给降本</td>
|
||||
<td>16年深耕，成本优势</td>
|
||||
<td><span class="badge badge-success badge-lg">★★★★★</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold text-green-400">岳阳林纸</td>
|
||||
<td>林业碳汇第一股</td>
|
||||
<td>8000万亩储备</td>
|
||||
<td>碳汇高毛利</td>
|
||||
<td>央企背景，开发能力</td>
|
||||
<td><span class="badge badge-success badge-lg">★★★★☆</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold text-blue-400">仙鹤股份</td>
|
||||
<td>特种纸原料锁定</td>
|
||||
<td>100万亩桉树</td>
|
||||
<td>政府排他支持</td>
|
||||
<td>运输成本最低</td>
|
||||
<td><span class="badge badge-warning badge-lg">★★★★☆</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">永安林业</td>
|
||||
<td>纯资源持有</td>
|
||||
<td>114.1万亩</td>
|
||||
<td>传统采伐</td>
|
||||
<td>区域垄断</td>
|
||||
<td><span class="badge badge-warning badge-lg">★★☆☆☆</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">东珠生态</td>
|
||||
<td>碳汇开发服务</td>
|
||||
<td>421.5万亩</td>
|
||||
<td>轻资产模式</td>
|
||||
<td>快速扩张</td>
|
||||
<td><span class="badge badge-error badge-lg">★★☆☆☆</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 股票数据表格 -->
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<h2 class="text-3xl font-bold text-white mb-8">林地资源相关股票数据</h2>
|
||||
<div class="glass-morphism rounded-2xl p-6 overflow-x-auto">
|
||||
<table class="table table-zebra w-full text-white">
|
||||
<thead class="bg-white/20">
|
||||
<tr>
|
||||
<th class="text-white">股票代码</th>
|
||||
<th class="text-white">股票名称</th>
|
||||
<th class="text-white">分类</th>
|
||||
<th class="text-white">项目详情</th>
|
||||
<th class="text-white">地理位置</th>
|
||||
<th class="text-white">股东背景</th>
|
||||
<th class="text-white">持股比例</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">岳阳林纸</td>
|
||||
<td>岳阳林纸</td>
|
||||
<td><span class="badge badge-info">自有林地</span></td>
|
||||
<td>公司拥有林业面积180万亩</td>
|
||||
<td>-</td>
|
||||
<td>国务院国资委</td>
|
||||
<td>30.9%</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">岳阳林纸</td>
|
||||
<td>岳阳林纸</td>
|
||||
<td><span class="badge badge-success">林业碳汇</span></td>
|
||||
<td>累计完成项目储备8246.79万亩</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">康欣新材</td>
|
||||
<td>康欣新材</td>
|
||||
<td><span class="badge badge-info">自有林地</span></td>
|
||||
<td>速生杨林地等138万余亩</td>
|
||||
<td>-</td>
|
||||
<td>无锡国资委</td>
|
||||
<td>19.86%</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">永安林业</td>
|
||||
<td>永安林业</td>
|
||||
<td><span class="badge badge-info">自有林地</span></td>
|
||||
<td>森林资源总面积114.1万亩</td>
|
||||
<td>福建永安市</td>
|
||||
<td>国务院国资委</td>
|
||||
<td>5.31%</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">福建金森</td>
|
||||
<td>福建金森</td>
|
||||
<td><span class="badge badge-info">自有林地</span></td>
|
||||
<td>森林资源面积近80万亩</td>
|
||||
<td>福建省将乐县</td>
|
||||
<td>将乐县财政局</td>
|
||||
<td>63.83%</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">平潭发展</td>
|
||||
<td>平潭发展</td>
|
||||
<td><span class="badge badge-info">自有林地</span></td>
|
||||
<td>自有林地约60万亩、托管约30万亩</td>
|
||||
<td>福建省平潭综合实验区</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">丰林集团</td>
|
||||
<td>丰林集团</td>
|
||||
<td><span class="badge badge-info">自有林地</span></td>
|
||||
<td>拥有近20万亩产权林地</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">东珠生态</td>
|
||||
<td>东珠生态</td>
|
||||
<td><span class="badge badge-success">林业碳汇</span></td>
|
||||
<td>开发面积林地421.5万亩</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">海南橡胶</td>
|
||||
<td>海南橡胶</td>
|
||||
<td><span class="badge badge-warning">其他</span></td>
|
||||
<td>公司胶园土地390万亩</td>
|
||||
<td>-</td>
|
||||
<td>海南国资委</td>
|
||||
<td>57.92%</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/10">
|
||||
<td class="font-bold">泉阳泉</td>
|
||||
<td>泉阳泉</td>
|
||||
<td><span class="badge badge-warning">其他</span></td>
|
||||
<td>控股股东拥有林地128.96万公顷</td>
|
||||
<td>-</td>
|
||||
<td>吉林国资委</td>
|
||||
<td>15.99%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 关键催化剂 -->
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<h2 class="text-3xl font-bold text-white mb-8">关键催化剂</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-gradient-to-br from-yellow-500/20 to-orange-500/20 glass-morphism rounded-2xl p-6 border border-yellow-500/30">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<i class="fas fa-clock text-yellow-400 text-2xl"></i>
|
||||
<h3 class="text-xl font-bold text-white">近期催化剂（3-6个月）</h3>
|
||||
</div>
|
||||
<ul class="space-y-3 text-white/80">
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-circle text-xs mt-2 text-yellow-400"></i>
|
||||
<span>岳阳林纸2024年报：碳汇利润达5000万+</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-circle text-xs mt-2 text-yellow-400"></i>
|
||||
<span>CCER价格落地：80-100元/吨</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-circle text-xs mt-2 text-yellow-400"></i>
|
||||
<span>太阳纸业中报：木片自供率提升</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-circle text-xs mt-2 text-yellow-400"></i>
|
||||
<span>仙鹤股份：广西林地协议签署</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-blue-500/20 to-purple-500/20 glass-morphism rounded-2xl p-6 border border-blue-500/30">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<i class="fas fa-rocket text-blue-400 text-2xl"></i>
|
||||
<h3 class="text-xl font-bold text-white">长期发展路径（2025-2030）</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">1</div>
|
||||
<div>
|
||||
<div class="text-white font-semibold">2025-2026：商业模式兑现期</div>
|
||||
<div class="text-white/60 text-sm">木片自给率80%+，碳汇收入占比15-20%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold">2</div>
|
||||
<div>
|
||||
<div class="text-white font-semibold">2027-2028：证券化与金融化</div>
|
||||
<div class="text-white/60 text-sm">林地经营权ABS、碳汇期货</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold">3</div>
|
||||
<div>
|
||||
<div class="text-white font-semibold">2029-2030：产业整合</div>
|
||||
<div class="text-white/60 text-sm">国内并购潮，海外基地复制</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 风险提示 -->
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<h2 class="text-3xl font-bold text-white mb-8">潜在风险与挑战</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="glass-morphism rounded-2xl p-6 border-red-500/30 border">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<i class="fas fa-exclamation-triangle text-red-400 text-xl"></i>
|
||||
<h3 class="text-xl font-bold text-white">政策风险</h3>
|
||||
</div>
|
||||
<ul class="text-white/80 space-y-2 text-sm">
|
||||
<li>• CCER政策变动</li>
|
||||
<li>• 海外林地租约不确定性</li>
|
||||
<li>• 碳汇价格波动</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 border-orange-500/30 border">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<i class="fas fa-tools text-orange-400 text-xl"></i>
|
||||
<h3 class="text-xl font-bold text-white">执行风险</h3>
|
||||
</div>
|
||||
<ul class="text-white/80 space-y-2 text-sm">
|
||||
<li>• 砍伐面积爬坡不及预期</li>
|
||||
<li>• 碳汇项目签发周期长</li>
|
||||
<li>• 本土化运营挑战</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-2xl p-6 border-yellow-500/30 border">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<i class="fas fa-globe text-yellow-400 text-xl"></i>
|
||||
<h3 class="text-xl font-bold text-white">地缘风险</h3>
|
||||
</div>
|
||||
<ul class="text-white/80 space-y-2 text-sm">
|
||||
<li>• 资源民族主义蔓延</li>
|
||||
<li>• 政权更迭影响</li>
|
||||
<li>• 社区关系维护</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 投资建议 -->
|
||||
<section class="container mx-auto px-4 py-12 mb-12">
|
||||
<h2 class="text-3xl font-bold text-white mb-8">投资启示</h2>
|
||||
<div class="glass-morphism rounded-2xl p-8 bg-gradient-to-br from-green-500/20 to-blue-500/20 border-green-400/30 border">
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-white mb-4">阶段判断</h3>
|
||||
<p class="text-white/80 mb-4">
|
||||
当前处于"主题发酵期向基本面兑现期过渡"的关键节点。与纯主题概念不同，林地资源具备明确的成本节约和利润贡献。
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge badge-success">PB普遍1-2倍</span>
|
||||
<span class="badge badge-info">修复空间>50%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-white mb-4">核心配置</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||||
<span class="text-white font-semibold">第一顺位</span>
|
||||
<span class="text-yellow-400">太阳纸业</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||||
<span class="text-white font-semibold">第二顺位</span>
|
||||
<span class="text-green-400">岳阳林纸</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||||
<span class="text-white font-semibold">第三顺位</span>
|
||||
<span class="text-blue-400">仙鹤股份</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 p-6 bg-white/10 rounded-xl">
|
||||
<p class="text-xl text-white font-medium text-center">
|
||||
"2025年是林地资源基本面兑现元年，静待估值修复与戴维斯双击"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="glass-morphism py-8">
|
||||
<div class="container mx-auto px-4 text-center text-white/80">
|
||||
<p>© 2024 林地资源概念分析 | 数据来源：公开信息整理</p>
|
||||
<p class="mt-2 text-sm">投资有风险，入市需谨慎</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 趋势图表
|
||||
const ctx = document.getElementById('trendChart').getContext('2d');
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)');
|
||||
gradient.addColorStop(1, 'rgba(255, 255, 255, 0.1)');
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['2023', '2024', '2025', '2026', '2027', '2028'],
|
||||
datasets: [{
|
||||
label: '林地资源价值指数',
|
||||
data: [100, 135, 180, 250, 350, 480],
|
||||
borderColor: 'rgba(255, 255, 255, 0.8)',
|
||||
backgroundColor: gradient,
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#fff',
|
||||
bodyColor: '#fff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.8)'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.8)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 平滑滚动
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动动画
|
||||
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('.card-hover').forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||
observer.observe(card);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
675
public/htmls/牛肉.html
Normal file
675
public/htmls/牛肉.html
Normal file
@@ -0,0 +1,675 @@
|
||||
我将为您创建一个专业且炫酷的牛肉概念投资分析页面。这个页面将整合所有深度insight、新闻数据和股票信息，采用现代化的设计风格。
|
||||
|
||||
|
||||
<!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;800&display=swap');
|
||||
|
||||
* {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.dark-gradient {
|
||||
background: linear-gradient(180deg, #1a1c20 0%, #2d3436 100%);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
width: 2px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.scroll-smooth {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.neon-border {
|
||||
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5),
|
||||
inset 0 0 20px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.data-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.timeline-line {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-white scroll-smooth">
|
||||
<!-- Hero Section -->
|
||||
<section class="gradient-bg py-20 px-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center">
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-6 text-white">
|
||||
<i class="fas fa-chart-line mr-4"></i>牛肉产业投资分析
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-purple-100 mb-8">周期反转与全球共振的黄金投资机遇</p>
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-8">
|
||||
<span class="bg-white/20 px-6 py-3 rounded-full text-lg">
|
||||
<i class="fas fa-arrow-trend-up mr-2"></i>价格弹性: +70-80%
|
||||
</span>
|
||||
<span class="bg-white/20 px-6 py-3 rounded-full text-lg">
|
||||
<i class="fas fa-calendar mr-2"></i>周期长度: 2-3年
|
||||
</span>
|
||||
<span class="bg-white/20 px-6 py-3 rounded-full text-lg">
|
||||
<i class="fas fa-globe mr-2"></i>全球共振
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心观点摘要 -->
|
||||
<section class="py-16 px-6 dark-gradient">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold mb-8 text-gradient">核心观点</h2>
|
||||
<div class="data-card rounded-2xl p-8 neon-border">
|
||||
<p class="text-xl leading-relaxed">
|
||||
当前牛肉概念处于<span class="text-purple-400 font-bold">周期反转初期</span>，驱动逻辑从政策主题转向基本面改善。
|
||||
<span class="text-purple-400 font-bold">未来2-3年景气度将持续上行</span>，价格弹性或超预期。
|
||||
</p>
|
||||
<div class="grid md:grid-cols-3 gap-6 mt-8">
|
||||
<div class="bg-gradient-to-r from-purple-600/20 to-pink-600/20 p-6 rounded-xl">
|
||||
<i class="fas fa-industry text-3xl text-purple-400 mb-3"></i>
|
||||
<h3 class="text-xl font-semibold mb-2">深度去化</h3>
|
||||
<p class="text-gray-300">母牛存栏降3% · 犊牛降8% · 产业根基受损</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-blue-600/20 to-cyan-600/20 p-6 rounded-xl">
|
||||
<i class="fas fa-shield-halved text-3xl text-blue-400 mb-3"></i>
|
||||
<h3 class="text-xl font-semibold mb-2">政策约束</h3>
|
||||
<p class="text-gray-300">商务部保障措施 · 关税加征 · 进口收缩</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-green-600/20 to-emerald-600/20 p-6 rounded-xl">
|
||||
<i class="fas fa-earth-americas text-3xl text-green-400 mb-3"></i>
|
||||
<h3 class="text-xl font-semibold mb-2">全球共振</h3>
|
||||
<p class="text-gray-300">国际价格涨40% · 美国供给缺口 · 巴西减产</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 时间轴 -->
|
||||
<section class="py-16 px-6 bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">核心事件时间轴</h2>
|
||||
<div class="relative">
|
||||
<div class="timeline-line"></div>
|
||||
|
||||
<!-- 2020-2022 -->
|
||||
<div class="flex items-center mb-12">
|
||||
<div class="w-1/2 md:pr-8 text-right">
|
||||
<div class="data-card p-6 rounded-xl card-hover">
|
||||
<h3 class="text-2xl font-bold mb-2 text-purple-400">2020-2022年</h3>
|
||||
<p class="text-lg">景气高点与产能扩张</p>
|
||||
<ul class="mt-3 text-gray-300 text-sm">
|
||||
<li>• 牛肉价格达历史峰值 86.21元/公斤</li>
|
||||
<li>• 2020-2024年产量CAGR 3.5%</li>
|
||||
<li>• 地方政府鼓励大规模补栏</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center pulse">
|
||||
<i class="fas fa-arrow-up text-white"></i>
|
||||
</div>
|
||||
<div class="w-1/2 md:pl-8"></div>
|
||||
</div>
|
||||
|
||||
<!-- 2023年 -->
|
||||
<div class="flex items-center mb-12">
|
||||
<div class="w-1/2 md:pr-8"></div>
|
||||
<div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center pulse">
|
||||
<i class="fas fa-arrow-down text-white"></i>
|
||||
</div>
|
||||
<div class="w-1/2 md:pl-8">
|
||||
<div class="data-card p-6 rounded-xl card-hover">
|
||||
<h3 class="text-2xl font-bold mb-2 text-red-400">2023年</h3>
|
||||
<p class="text-lg">供需反转，价格崩塌</p>
|
||||
<ul class="mt-3 text-gray-300 text-sm">
|
||||
<li>• 3月开启持续下跌，跌幅超13%</li>
|
||||
<li>• 能繁母牛存栏下降1.9%</li>
|
||||
<li>• 产能去化信号初现</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2024年 -->
|
||||
<div class="flex items-center mb-12">
|
||||
<div class="w-1/2 md:pr-8 text-right">
|
||||
<div class="data-card p-6 rounded-xl card-hover">
|
||||
<h3 class="text-2xl font-bold mb-2 text-orange-400">2024年</h3>
|
||||
<p class="text-lg">深度亏损，产业动摇</p>
|
||||
<ul class="mt-3 text-gray-300 text-sm">
|
||||
<li>• 连续8个月亏损超1000元/头</li>
|
||||
<li>• 65%以上养殖场户亏损</li>
|
||||
<li>• 12月商务部启动保障措施调查</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-orange-600 rounded-full flex items-center justify-center pulse">
|
||||
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||
</div>
|
||||
<div class="w-1/2 md:pl-8"></div>
|
||||
</div>
|
||||
|
||||
<!-- 2025年 -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-1/2 md:pr-8"></div>
|
||||
<div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center pulse">
|
||||
<i class="fas fa-chart-line text-white"></i>
|
||||
</div>
|
||||
<div class="w-1/2 md:pl-8">
|
||||
<div class="data-card p-6 rounded-xl card-hover">
|
||||
<h3 class="text-2xl font-bold mb-2 text-green-400">2025年</h3>
|
||||
<p class="text-lg">周期拐点显现</p>
|
||||
<ul class="mt-3 text-gray-300 text-sm">
|
||||
<li>• 1-2月进口量同比下降17.4%</li>
|
||||
<li>• 3月起价格淡季不淡，上涨8.67%</li>
|
||||
<li>• 11月预期政策落地，核心催化剂</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 供需与价格分析 -->
|
||||
<section class="py-16 px-6 dark-gradient">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold mb-12">供需格局深度分析</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<!-- 供给端 -->
|
||||
<div class="data-card p-8 rounded-2xl">
|
||||
<h3 class="text-2xl font-bold mb-6 text-purple-400">
|
||||
<i class="fas fa-boxes-stacked mr-3"></i>供给端变化
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span>能繁母牛存栏</span>
|
||||
<span class="text-red-400">↓ 3%</span>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded-full h-3">
|
||||
<div class="bg-gradient-to-r from-red-500 to-red-600 h-3 rounded-full" style="width: 3%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span>新生犊牛</span>
|
||||
<span class="text-red-400">↓ 8%</span>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded-full h-3">
|
||||
<div class="bg-gradient-to-r from-red-500 to-red-600 h-3 rounded-full" style="width: 8%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span>全国牛存栏</span>
|
||||
<span class="text-red-400">↓ 4.4%</span>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded-full h-3">
|
||||
<div class="bg-gradient-to-r from-red-500 to-red-600 h-3 rounded-full" style="width: 4.4%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span>进口量</span>
|
||||
<span class="text-red-400">↓ 17.4%</span>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded-full h-3">
|
||||
<div class="bg-gradient-to-r from-red-500 to-red-600 h-3 rounded-full" style="width: 17.4%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 价格预测 -->
|
||||
<div class="data-card p-8 rounded-2xl">
|
||||
<h3 class="text-2xl font-bold mb-6 text-green-400">
|
||||
<i class="fas fa-chart-column mr-3"></i>价格走势预测
|
||||
</h3>
|
||||
<canvas id="priceChart" width="400" height="200"></canvas>
|
||||
<div class="mt-6 space-y-2">
|
||||
<p class="text-sm"><span class="text-green-400">2025年:</span> 26-28元/公斤 (↑10-15%)</p>
|
||||
<p class="text-sm"><span class="text-yellow-400">2026年:</span> 32-35元/公斤 (↑30-40%)</p>
|
||||
<p class="text-sm"><span class="text-red-400">2027年:</span> 38-42元/公斤 (↑70-80%)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心催化剂 -->
|
||||
<section class="py-16 px-6 bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">关键催化剂</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="data-card p-6 rounded-xl text-center card-hover">
|
||||
<div class="text-5xl mb-4 text-purple-400">
|
||||
<i class="fas fa-gavel"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">政策落地</h3>
|
||||
<p class="text-gray-300">2025年11月商务部保障措施终裁</p>
|
||||
<div class="mt-4 text-2xl font-bold text-purple-400">核心催化</div>
|
||||
</div>
|
||||
|
||||
<div class="data-card p-6 rounded-xl text-center card-hover">
|
||||
<div class="text-5xl mb-4 text-blue-400">
|
||||
<i class="fas fa-snowflake"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">消费旺季</h3>
|
||||
<p class="text-gray-300">Q4传统旺季，需求环比提升30%</p>
|
||||
<div class="mt-4 text-2xl font-bold text-blue-400">季节催化</div>
|
||||
</div>
|
||||
|
||||
<div class="data-card p-6 rounded-xl text-center card-hover">
|
||||
<div class="text-5xl mb-4 text-green-400">
|
||||
<i class="fas fa-globe"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">海外涨价</h3>
|
||||
<p class="text-gray-300">国际价格已涨40%，传导效应显现</p>
|
||||
<div class="mt-4 text-2xl font-bold text-green-400">外部催化</div>
|
||||
</div>
|
||||
|
||||
<div class="data-card p-6 rounded-xl text-center card-hover">
|
||||
<div class="text-5xl mb-4 text-orange-400">
|
||||
<i class="fas fa-file-invoice-dollar"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">业绩预增</h3>
|
||||
<p class="text-gray-300">龙头Q3利润或增200%+</p>
|
||||
<div class="mt-4 text-2xl font-bold text-orange-400">业绩催化</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产业链分析 -->
|
||||
<section class="py-16 px-6 dark-gradient">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold mb-12">产业链价值分布</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- 上游 -->
|
||||
<div class="data-card p-8 rounded-2xl text-center">
|
||||
<h3 class="text-2xl font-bold mb-4 text-purple-400">上游</h3>
|
||||
<p class="text-lg mb-4">种源与饲料</p>
|
||||
<div class="text-3xl font-bold mb-4">15-25% 毛利率</div>
|
||||
<div class="space-y-2 text-left">
|
||||
<p>• 天山生物（育种）</p>
|
||||
<p>• 禾丰股份、海大集团（饲料）</p>
|
||||
<p>• 福成股份、西部牧业（养殖）</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中游 -->
|
||||
<div class="data-card p-8 rounded-2xl text-center">
|
||||
<h3 class="text-2xl font-bold mb-4 text-blue-400">中游</h3>
|
||||
<p class="text-lg mb-4">屠宰加工</p>
|
||||
<div class="text-3xl font-bold mb-4">6-13% 毛利率</div>
|
||||
<div class="space-y-2 text-left">
|
||||
<p>• 光明肉业（银蕨农场）</p>
|
||||
<p>• 得利斯（产能利用率关键）</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下游 -->
|
||||
<div class="data-card p-8 rounded-2xl text-center">
|
||||
<h3 class="text-2xl font-bold mb-4 text-green-400">下游</h3>
|
||||
<p class="text-lg mb-4">品牌与渠道</p>
|
||||
<div class="text-3xl font-bold mb-4">25-35% 毛利率</div>
|
||||
<div class="space-y-2 text-left">
|
||||
<p>• 福成股份（肥牛品牌）</p>
|
||||
<p>• 光明肉业（银蕨品牌）</p>
|
||||
<p>• 味知香（预制菜）</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心公司股票数据 -->
|
||||
<section class="py-16 px-6 bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">核心上市公司分析</h2>
|
||||
<div class="table-container">
|
||||
<table class="w-full data-card rounded-lg overflow-hidden">
|
||||
<thead class="sticky-header bg-gradient-to-r from-purple-600 to-pink-600">
|
||||
<tr>
|
||||
<th class="p-4 text-left">股票代码</th>
|
||||
<th class="p-4 text-left">股票名称</th>
|
||||
<th class="p-4 text-left">业务分类</th>
|
||||
<th class="p-4 text-left">核心业务</th>
|
||||
<th class="p-4 text-left">投资逻辑</th>
|
||||
<th class="p-4 text-center">推荐评级</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
|
||||
<td class="p-4">600965</td>
|
||||
<td class="p-4 font-bold text-green-400">福成股份</td>
|
||||
<td class="p-4"><span class="bg-purple-600/30 px-2 py-1 rounded">养殖</span></td>
|
||||
<td class="p-4 text-sm">三个养牛场，活牛存栏容纳能力达到四万头，2025年上半年活牛存栏3.44万头</td>
|
||||
<td class="p-4 text-sm">全产业链区域龙头，华北渠道强，"福成肥牛"品牌知名度高</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="text-2xl">⭐⭐⭐⭐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
|
||||
<td class="p-4">300313</td>
|
||||
<td class="p-4 font-bold text-blue-400">天山生物</td>
|
||||
<td class="p-4"><span class="bg-orange-600/30 px-2 py-1 rounded">育种</span></td>
|
||||
<td class="p-4 text-sm">我国唯一专业从事牛品种改良的上市公司，将打造自有鲜牛肉品牌</td>
|
||||
<td class="p-4 text-sm">稀缺育种标的，掌握核心种源，长期成长确定</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="text-2xl">⭐⭐⭐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
|
||||
<td class="p-4">600073</td>
|
||||
<td class="p-4 font-bold text-purple-400">光明肉业</td>
|
||||
<td class="p-4"><span class="bg-green-600/30 px-2 py-1 rounded">加工</span></td>
|
||||
<td class="p-4 text-sm">控股新西兰银蕨农场（市占率30%），2025Q1净利润同比+312%</td>
|
||||
<td class="p-4 text-sm">海外资源龙头，直接受益全球涨价，业绩弹性最大</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="text-2xl">⭐⭐⭐⭐⭐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
|
||||
<td class="p-4">002330</td>
|
||||
<td class="p-4 font-bold text-yellow-400">得利斯</td>
|
||||
<td class="p-4"><span class="bg-blue-600/30 px-2 py-1 rounded">加工</span></td>
|
||||
<td class="p-4 text-sm">主要业务之一为牛肉精深加工行业</td>
|
||||
<td class="p-4 text-sm">纯屠宰企业，当前仍亏损，产能利用率是关键</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="text-2xl">⭐⭐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
|
||||
<td class="p-4">605089</td>
|
||||
<td class="p-4 font-bold text-cyan-400">味知香</td>
|
||||
<td class="p-4"><span class="bg-green-600/30 px-2 py-1 rounded">预制菜</span></td>
|
||||
<td class="p-4 text-sm">牛肉类产品占比较大（预制菜）</td>
|
||||
<td class="p-4 text-sm">受益消费升级，牛肉预制菜需求增长</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="text-2xl">⭐⭐⭐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
|
||||
<td class="p-4">300106</td>
|
||||
<td class="p-4 font-bold text-green-400">西部牧业</td>
|
||||
<td class="p-4"><span class="bg-purple-600/30 px-2 py-1 rounded">养殖</span></td>
|
||||
<td class="p-4 text-sm">建设肉牛专业育肥基地，与肉牛养殖专业合作社建立合作关系</td>
|
||||
<td class="p-4 text-sm">乳肉兼营，受益原奶+牛肉双周期</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="text-2xl">⭐⭐⭐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
|
||||
<td class="p-4">000061</td>
|
||||
<td class="p-4 font-bold text-red-400">农产品</td>
|
||||
<td class="p-4"><span class="bg-red-600/30 px-2 py-1 rounded">贸易</span></td>
|
||||
<td class="p-4 text-sm">引进的南美牛肉等核心品类的规模稳健增长</td>
|
||||
<td class="p-4 text-sm">进口贸易商，政策收紧直接受损，建议规避</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="text-2xl">⭐</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 投资策略 -->
|
||||
<section class="py-16 px-6 dark-gradient">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">投资策略建议</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<!-- 第一梯队 -->
|
||||
<div class="data-card p-8 rounded-2xl neon-border">
|
||||
<div class="text-3xl font-bold mb-4 text-green-400">第一梯队</div>
|
||||
<div class="text-xl mb-4">海外资源型（首选）</div>
|
||||
<div class="bg-green-600/20 p-4 rounded-lg mb-4">
|
||||
<p class="font-bold text-green-400 mb-2">核心标的：光明肉业</p>
|
||||
<p class="text-sm">逻辑最顺 · 弹性最大</p>
|
||||
<p class="text-sm mt-2">2027年利润或达5亿元，对应PE仅5-6倍</p>
|
||||
</div>
|
||||
<div class="text-sm space-y-1">
|
||||
<p>• 仓位建议：60%</p>
|
||||
<p>• 持有周期：至2027年景气高点</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二梯队 -->
|
||||
<div class="data-card p-8 rounded-2xl neon-border">
|
||||
<div class="text-3xl font-bold mb-4 text-blue-400">第二梯队</div>
|
||||
<div class="text-xl mb-4">全产业链型（次优）</div>
|
||||
<div class="bg-blue-600/20 p-4 rounded-lg mb-4">
|
||||
<p class="font-bold text-blue-400 mb-2">核心标的：福成股份</p>
|
||||
<p class="text-sm">双轮驱动 · 品牌护城河</p>
|
||||
<p class="text-sm mt-2">存栏3.44万头具备扩张潜力</p>
|
||||
</div>
|
||||
<div class="text-sm space-y-1">
|
||||
<p>• 仓位建议：30%</p>
|
||||
<p>• 持有周期：中期配置</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三梯队 -->
|
||||
<div class="data-card p-8 rounded-2xl neon-border">
|
||||
<div class="text-3xl font-bold mb-4 text-purple-400">第三梯队</div>
|
||||
<div class="text-xl mb-4">育种核心（长期）</div>
|
||||
<div class="bg-purple-600/20 p-4 rounded-lg mb-4">
|
||||
<p class="font-bold text-purple-400 mb-2">核心标的：天山生物</p>
|
||||
<p class="text-sm">产业升级 · 种源卡脖子</p>
|
||||
<p class="text-sm mt-2">技术壁垒高，业绩释放慢</p>
|
||||
</div>
|
||||
<div class="text-sm space-y-1">
|
||||
<p>• 仓位建议：10%</p>
|
||||
<p>• 持有周期：卫星仓位</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 风险提示 -->
|
||||
<div class="bg-red-900/30 border border-red-600 p-6 rounded-xl">
|
||||
<h3 class="text-2xl font-bold mb-4 text-red-400">
|
||||
<i class="fas fa-triangle-exclamation mr-2"></i>风险提示
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 class="font-bold mb-2 text-red-300">需求风险</h4>
|
||||
<ul class="text-sm text-gray-300 space-y-1">
|
||||
<li>• 消费降级导致高价蛋白需求萎缩</li>
|
||||
<li>• 餐饮端恢复不及预期</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold mb-2 text-red-300">政策风险</h4>
|
||||
<ul class="text-sm text-gray-300 space-y-1">
|
||||
<li>• 保障措施力度不及预期</li>
|
||||
<li>• 贸易反制措施</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 border-t border-gray-800 py-8 px-6">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<p class="text-gray-400">© 2025 牛肉产业投资分析报告 | 数据来源：公开信息整理</p>
|
||||
<p class="text-gray-500 text-sm mt-2">投资有风险，入市需谨慎</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 价格走势图表
|
||||
const ctx = document.getElementById('priceChart').getContext('2d');
|
||||
const priceChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['2024', '2025', '2026', '2027', '2028'],
|
||||
datasets: [{
|
||||
label: '牛肉价格预测（元/公斤）',
|
||||
data: [24, 27, 34, 40, 38],
|
||||
borderColor: 'rgb(168, 85, 247)',
|
||||
backgroundColor: 'rgba(168, 85, 247, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: false,
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 滚动动画
|
||||
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('.card-hover').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>
|
||||
|
||||
|
||||
这个HTML页面提供了一个专业、炫酷且功能丰富的牛肉产业投资分析界面。主要特点包括：
|
||||
|
||||
## 🎯 核心功能
|
||||
1. **完整的内容展示** - 整合了所有insight分析、新闻数据和股票信息
|
||||
2. **交互式时间轴** - 展示核心事件演进过程
|
||||
3. **数据可视化** - 包含价格走势图表和供需进度条
|
||||
4. **详细股票表格** - 清晰展示相关上市公司信息，支持水平滚动
|
||||
5. **投资策略建议** - 分梯队展示投资标的和建议
|
||||
|
||||
## 💫 设计亮点
|
||||
- **渐变色主题** - 紫色到粉色的渐变，营造专业金融感
|
||||
- **玻璃态效果** - 半透明卡片配合模糊背景
|
||||
- **霓虹光效** - 重要元素添加发光边框
|
||||
- **响应式布局** - 完美适配桌面和移动设备
|
||||
- **平滑动画** - 滚动触发的渐入效果
|
||||
- **微交互** - 悬停效果和脉冲动画
|
||||
|
||||
## 📊 数据展示
|
||||
- 三重共振驱动逻辑的可视化
|
||||
- 供需端变化进度条
|
||||
- 价格预测折线图
|
||||
- 产业链价值分布
|
||||
- 核心公司评级表格
|
||||
|
||||
页面保留了insight的绝大部分关键内容，包括周期分析、产能去化、政策影响、全球格局等核心观点，并通过现代化的设计语言让信息更易理解和吸收。
|
||||
624
public/htmls/羽绒.html
Normal file
624
public/htmls/羽绒.html
Normal file
@@ -0,0 +1,624 @@
|
||||
|
||||
<!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>羽绒行业深度分析报告</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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', sans-serif;
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(147, 51, 234, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-scale:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #1f2937;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #4b5563;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #6b7280;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-text {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.price-up {
|
||||
animation: priceUp 1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes priceUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-white">
|
||||
<!-- Hero Section -->
|
||||
<div class="gradient-bg min-h-screen flex items-center justify-center relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-black opacity-50"></div>
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<div class="text-center">
|
||||
<h1 class="hero-text text-6xl md:text-8xl font-bold mb-6 text-white animate-pulse">
|
||||
羽绒行业
|
||||
</h1>
|
||||
<p class="text-2xl md:text-3xl mb-8 text-gray-200">供需失衡下的史诗级行情</p>
|
||||
<div class="flex justify-center space-x-4 mb-12">
|
||||
<div class="glass-effect rounded-lg px-6 py-3">
|
||||
<i class="fas fa-chart-line text-yellow-400 mr-2"></i>
|
||||
<span class="text-xl font-semibold">价格涨幅 <span class="text-3xl">241%</span></span>
|
||||
</div>
|
||||
<div class="glass-effect rounded-lg px-6 py-3">
|
||||
<i class="fas fa-snowflake text-blue-400 mr-2"></i>
|
||||
<span class="text-xl font-semibold">冷冬催化</span>
|
||||
</div>
|
||||
<div class="glass-effect rounded-lg px-6 py-3">
|
||||
<i class="fas fa-industry text-green-400 mr-2"></i>
|
||||
<span class="text-xl font-semibold">产业升级</span>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="scrollToSection('timeline')" class="bg-purple-600 hover:bg-purple-700 px-8 py-4 rounded-full text-xl font-semibold transition-all hover-scale">
|
||||
深度解析 <i class="fas fa-arrow-down ml-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path fill="#111827" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,117.3C672,107,768,117,864,138.7C960,160,1056,192,1152,192C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<section id="timeline" class="py-20 bg-gray-900">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16 gradient-text">概念事件时间轴</h2>
|
||||
<div class="space-y-8">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center timeline-dot">
|
||||
<span class="text-sm font-bold">2023</span>
|
||||
</div>
|
||||
<div class="flex-grow glass-effect rounded-lg p-6 card-hover">
|
||||
<h3 class="text-xl font-semibold mb-2">价格基础奠定期</h3>
|
||||
<p class="text-gray-300">白鸭绒价格从3,500元/吨涨至5,380元/吨，涨幅超53%。供给端产能去化，需求端冰雪经济推动。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-red-600 rounded-full flex items-center justify-center timeline-dot">
|
||||
<span class="text-sm font-bold">2024.11</span>
|
||||
</div>
|
||||
<div class="flex-grow glass-effect rounded-lg p-6 card-hover">
|
||||
<h3 class="text-xl font-semibold mb-2">央视曝光造假事件</h3>
|
||||
<p class="text-gray-300">央视曝光羽绒造假黑幕，以"飞丝"冒充羽绒，成本差距50%+。行业监管趋严，劣币出清加速。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-green-600 rounded-full flex items-center justify-center timeline-dot">
|
||||
<span class="text-sm font-bold">2025.05</span>
|
||||
</div>
|
||||
<div class="flex-grow glass-effect rounded-lg p-6 card-hover">
|
||||
<h3 class="text-xl font-semibold mb-2">古麒绒材上市</h3>
|
||||
<p class="text-gray-300">羽绒材料龙头古麒绒材登陆A股，上市首日大涨222.85%触发临停，概念情绪达到高点。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-yellow-600 rounded-full flex items-center justify-center timeline-dot">
|
||||
<span class="text-sm font-bold">2025.10-11</span>
|
||||
</div>
|
||||
<div class="flex-grow glass-effect rounded-lg p-6 card-hover price-up">
|
||||
<h3 class="text-xl font-semibold mb-2">价格暴涨期</h3>
|
||||
<p class="text-gray-300">寒潮提前来临，90%白鸭绒价格从17万元/吨飙升至58万元/吨，鹅绒达98万元/吨。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center timeline-dot">
|
||||
<span class="text-sm font-bold">2025.11.20</span>
|
||||
</div>
|
||||
<div class="flex-grow glass-effect rounded-lg p-6 card-hover">
|
||||
<h3 class="text-xl font-semibold mb-2">机构密集推荐</h3>
|
||||
<p class="text-gray-300">多家机构同步推荐波司登，关注古麒绒材，明确"冷冬逐步确认"交易逻辑。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Logic Section -->
|
||||
<section class="py-20 bg-gray-800">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16 gradient-text">核心逻辑三维解析</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="glass-effect rounded-xl p-8 card-hover">
|
||||
<div class="text-4xl mb-4">📉</div>
|
||||
<h3 class="text-2xl font-bold mb-4 text-purple-400">供给侧刚性收缩</h3>
|
||||
<ul class="space-y-2 text-gray-300">
|
||||
<li>• 养殖产能历史低位（40-42亿羽）</li>
|
||||
<li>• 较高峰期减少16.7%</li>
|
||||
<li>• 环保政策挤出中小屠宰场</li>
|
||||
<li>• 羽毛分流效应（羽毛球原料）</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect rounded-xl p-8 card-hover">
|
||||
<div class="text-4xl mb-4">📈</div>
|
||||
<h3 class="text-2xl font-bold mb-4 text-green-400">需求侧结构性升级</h3>
|
||||
<ul class="space-y-2 text-gray-300">
|
||||
<li>• 冰雪经济1.5万亿市场空间</li>
|
||||
<li>• 新国标实际成本增加15-20%</li>
|
||||
<li>• 高充绒量（300克/件）成标配</li>
|
||||
<li>• 渗透率仅9%（vs 欧美35%）</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect rounded-xl p-8 card-hover">
|
||||
<div class="text-4xl mb-4">⚖️</div>
|
||||
<h3 class="text-2xl font-bold mb-4 text-blue-400">监管侧劣币出清</h3>
|
||||
<ul class="space-y-2 text-gray-300">
|
||||
<li>• 央视曝光行业造假乱象</li>
|
||||
<li>• 成本铁底420-550元/千克</li>
|
||||
<li>• 从"价格战"转向"价值战"</li>
|
||||
<li>• 头部企业市占率加速提升</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Industry Chain Section -->
|
||||
<section class="py-20 bg-gray-900">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16 gradient-text">产业链图谱</h2>
|
||||
<div class="overflow-x-auto custom-scrollbar">
|
||||
<div class="flex space-x-6 pb-4" style="min-width: max-content;">
|
||||
<!-- 上游 -->
|
||||
<div class="bg-gray-800 rounded-lg p-6 min-w-[280px] card-hover">
|
||||
<h3 class="text-xl font-bold mb-4 text-purple-400">上游：水禽养殖与屠宰</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-gray-700 rounded p-3">
|
||||
<div class="font-semibold">益客食品</div>
|
||||
<div class="text-sm text-gray-400">全球第二大肉鸭供应商</div>
|
||||
<div class="text-sm text-gray-400">年屠宰3.5亿只</div>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded p-3">
|
||||
<div class="font-semibold">立华股份</div>
|
||||
<div class="text-sm text-gray-400">商品鹅年销210万只</div>
|
||||
<div class="text-sm text-gray-400">鹅绒高端原料</div>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded p-3">
|
||||
<div class="font-semibold">华英农业</div>
|
||||
<div class="text-sm text-gray-400">自产约8%原毛</div>
|
||||
<div class="text-sm text-gray-400">其余90%外采</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中游 -->
|
||||
<div class="bg-gray-800 rounded-lg p-6 min-w-[280px] card-hover">
|
||||
<h3 class="text-xl font-bold mb-4 text-green-400">中游：羽绒加工与水洗</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-gray-700 rounded p-3">
|
||||
<div class="font-semibold">古麒绒材</div>
|
||||
<div class="text-sm text-gray-400">A股次新龙头</div>
|
||||
<div class="text-sm text-gray-400">产能2288吨</div>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded p-3">
|
||||
<div class="font-semibold">华英农业</div>
|
||||
<div class="text-sm text-gray-400">市占率国内15%</div>
|
||||
<div class="text-sm text-gray-400">全球接近10%</div>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded p-3">
|
||||
<div class="font-semibold">柳桥集团</div>
|
||||
<div class="text-sm text-gray-400">非上市龙头</div>
|
||||
<div class="text-sm text-gray-400">出口占比高</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下游 -->
|
||||
<div class="bg-gray-800 rounded-lg p-6 min-w-[320px] card-hover">
|
||||
<h3 class="text-xl font-bold mb-4 text-blue-400">下游：品牌服饰与家纺</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-gray-700 rounded p-3">
|
||||
<div class="font-semibold">波司登</div>
|
||||
<div class="text-sm text-gray-400">全球羽绒服专家</div>
|
||||
<div class="text-sm text-gray-400">品牌定价权最强</div>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded p-3">
|
||||
<div class="font-semibold">富安娜/罗莱生活</div>
|
||||
<div class="text-sm text-gray-400">家纺龙头</div>
|
||||
<div class="text-sm text-gray-400">羽绒被渗透率提升</div>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded p-3">
|
||||
<div class="font-semibold">安踏/李宁</div>
|
||||
<div class="text-sm text-gray-400">运动品牌</div>
|
||||
<div class="text-sm text-gray-400">冬季羽绒品类增量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Companies Comparison -->
|
||||
<section class="py-20 bg-gray-800">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16 gradient-text">核心玩家四维对比</h2>
|
||||
<div class="overflow-x-auto custom-scrollbar">
|
||||
<table class="w-full bg-gray-900 rounded-lg overflow-hidden">
|
||||
<thead>
|
||||
<tr class="bg-purple-600">
|
||||
<th class="px-6 py-4 text-left">公司</th>
|
||||
<th class="px-6 py-4 text-center">业务纯度</th>
|
||||
<th class="px-6 py-4 text-center">定价权</th>
|
||||
<th class="px-6 py-4 text-center">资金实力</th>
|
||||
<th class="px-6 py-4 text-center">风险敞口</th>
|
||||
<th class="px-6 py-4 text-center">核心逻辑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-800">
|
||||
<td class="px-6 py-4 font-semibold">古麒绒材</td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐⭐⭐<br><span class="text-sm text-gray-400">99%羽绒业务</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐<br><span class="text-sm text-gray-400">技术溢价但账期被动</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐<br><span class="text-sm text-gray-400">IPO募资5亿</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐⭐⭐<br><span class="text-sm text-gray-400">原材料占比96%+</span></td>
|
||||
<td class="px-6 py-4 text-sm">技术龙头+产能扩张<br><span class="text-red-400">需警惕现金流恶化</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-800">
|
||||
<td class="px-6 py-4 font-semibold">华英农业</td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐⭐<br><span class="text-sm text-gray-400">70%羽绒+30%食品</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐<br><span class="text-sm text-gray-400">加工费模式，毛利率7-9%</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐<br><span class="text-sm text-gray-400">依赖融资</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐⭐<br><span class="text-sm text-gray-400">订单锁定+库存跌价</span></td>
|
||||
<td class="px-6 py-4 text-sm">规模优势+出清受益<br><span class="text-yellow-400">但盈利能力脆弱</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-800">
|
||||
<td class="px-6 py-4 font-semibold">波司登</td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐<br><span class="text-sm text-gray-400">主品牌+多元化</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐⭐⭐<br><span class="text-sm text-gray-400">品牌溢价，可提价传导</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐⭐<br><span class="text-sm text-gray-400">港股龙头，现金充裕</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐<br><span class="text-sm text-gray-400">成本占比<45%</span></td>
|
||||
<td class="px-6 py-4 text-sm">品牌护城河最深<br><span class="text-green-400">估值已反映预期</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-800">
|
||||
<td class="px-6 py-4 font-semibold">益客食品</td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐<br><span class="text-sm text-gray-400">羽绒为辅，食品为主</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐<br><span class="text-sm text-gray-400">副产品，无单独定价</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐⭐⭐<br><span class="text-sm text-gray-400">肉鸭龙头</span></td>
|
||||
<td class="px-6 py-4 text-center">⭐<br><span class="text-sm text-gray-400">成本内部化</span></td>
|
||||
<td class="px-6 py-4 text-sm">上游资源隐形标的<br><span class="text-blue-400">业务纯度不足</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stock Data Section -->
|
||||
<section class="py-20 bg-gray-900">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16 gradient-text">相关股票数据</h2>
|
||||
<div class="overflow-x-auto custom-scrollbar">
|
||||
<table class="w-full bg-gray-800 rounded-lg overflow-hidden text-sm">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-purple-600 to-purple-700">
|
||||
<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>
|
||||
<th class="px-4 py-3 text-left">投资逻辑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">
|
||||
<td class="px-4 py-3 font-semibold text-purple-400">古麒绒材</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">原材料-研发-生产-销售</td>
|
||||
<td class="px-4 py-3">营收占比99.27%，2024年营收9.59亿</td>
|
||||
<td class="px-4 py-3">A股唯一纯羽绒材料标的，技术龙头</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">
|
||||
<td class="px-4 py-3 font-semibold text-purple-400">华英农业</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">中国羽绒行业出口十强</td>
|
||||
<td class="px-4 py-3">营收占比67.22%，2024年营收31.8亿</td>
|
||||
<td class="px-4 py-3">规模优势，市占率国内15%，军工订单</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">
|
||||
<td class="px-4 py-3 font-semibold text-purple-400">益客食品</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">原料绒-毛梗/毛片副产品</td>
|
||||
<td class="px-4 py-3">2024年羽绒营收9.19亿元</td>
|
||||
<td class="px-4 py-3">上游资源隐形标的，年屠宰3.5亿只</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">
|
||||
<td class="px-4 py-3 font-semibold text-purple-400">立华股份</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">育种-种鹅繁育-商品鹅养殖及销售</td>
|
||||
<td class="px-4 py-3">2024年销售商品鹅209.63万只，同比+21.73%</td>
|
||||
<td class="px-4 py-3">鹅绒高端原料，羽毛制作羽毛球</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">
|
||||
<td class="px-4 py-3 font-semibold text-purple-400">煌上煌</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">子公司加工</td>
|
||||
<td class="px-4 py-3">持股51%子公司丰城煌鹏羽绒</td>
|
||||
<td class="px-4 py-3">业务占比较小，弹性有限</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">
|
||||
<td class="px-4 py-3 font-semibold text-blue-400">森马服饰</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">品牌设计-生产-销售</td>
|
||||
<td class="px-4 py-3">古麒绒材大客户（占比约20%）</td>
|
||||
<td class="px-4 py-3">下游品牌商，拥有定价权</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">
|
||||
<td class="px-4 py-3 font-semibold text-blue-400">海澜之家</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">品牌设计-生产-销售</td>
|
||||
<td class="px-4 py-3">古麒绒材大客户（占比约20%）</td>
|
||||
<td class="px-4 py-3">下游品牌商，拥有定价权</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">
|
||||
<td class="px-4 py-3 font-semibold text-blue-400">探路者</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">户外品牌-羽绒服产品</td>
|
||||
<td class="px-4 py-3">专业户外羽绒服市场</td>
|
||||
<td class="px-4 py-3">户外领域羽绒服，细分市场龙头</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">
|
||||
<td class="px-4 py-3 font-semibold text-blue-400">嘉曼服饰</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">品牌设计-生产-销售</td>
|
||||
<td class="px-4 py-3">童装羽绒服市场</td>
|
||||
<td class="px-4 py-3">儿童羽绒服细分市场</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Investment Advice Section -->
|
||||
<section class="py-20 bg-gray-800">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16 gradient-text">投资建议与风险提示</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div class="glass-effect rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-green-400">投资优先级</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-3xl">🥇</span>
|
||||
<div>
|
||||
<div class="font-semibold">超配：波司登、益客食品</div>
|
||||
<div class="text-sm text-gray-400">品牌护城河+上游资源</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-3xl">🥈</span>
|
||||
<div>
|
||||
<div class="font-semibold">标配：华英农业</div>
|
||||
<div class="text-sm text-gray-400">规模优势+军工订单</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-3xl">🥉</span>
|
||||
<div>
|
||||
<div class="font-semibold">低配：古麒绒材、富安娜</div>
|
||||
<div class="text-sm text-gray-400">情绪溢价高、逻辑不纯</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-red-400">关键风险</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start space-x-3">
|
||||
<i class="fas fa-exclamation-triangle text-yellow-400 mt-1"></i>
|
||||
<div>
|
||||
<div class="font-semibold">价格数据混乱</div>
|
||||
<div class="text-sm text-gray-400">新闻涨幅241% vs 实际涨幅53%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-3">
|
||||
<i class="fas fa-exclamation-triangle text-yellow-400 mt-1"></i>
|
||||
<div>
|
||||
<div class="font-semibold">中游毛利率压缩</div>
|
||||
<div class="text-sm text-gray-400">订单锁定导致毛利率仅7-9%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-3">
|
||||
<i class="fas fa-exclamation-triangle text-yellow-400 mt-1"></i>
|
||||
<div>
|
||||
<div class="font-semibold">库存周期错配</div>
|
||||
<div class="text-sm text-gray-400">囤货压力与资金占用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-3">
|
||||
<i class="fas fa-exclamation-triangle text-yellow-400 mt-1"></i>
|
||||
<div>
|
||||
<div class="font-semibold">暖冬风险</div>
|
||||
<div class="text-sm text-gray-400">2025年Q1业绩证伪概率高</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 bg-gray-900 border-t border-gray-800">
|
||||
<div class="container mx-auto px-6 text-center">
|
||||
<p class="text-gray-400 mb-4">本报告仅供参考，不构成投资建议</p>
|
||||
<p class="text-sm text-gray-500">数据来源：公开新闻、路演记录、研报 | 更新时间：2025年11月</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Smooth scroll function
|
||||
function scrollToSection(sectionId) {
|
||||
const section = document.getElementById(sectionId);
|
||||
section.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// Add animation on scroll
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('price-up');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.card-hover').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Dynamic date update
|
||||
const updateDate = () => {
|
||||
const now = new Date();
|
||||
const options = { year: 'numeric', month: 'long', day: 'numeric' };
|
||||
document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
|
||||
};
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updateDate();
|
||||
|
||||
// Add hover effect to table rows
|
||||
const tableRows = document.querySelectorAll('tbody tr');
|
||||
tableRows.forEach(row => {
|
||||
row.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.02)';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
});
|
||||
row.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Parallax effect for hero section
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const hero = document.querySelector('.gradient-bg');
|
||||
if (hero) {
|
||||
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
576
public/htmls/谷歌.html
Normal file
576
public/htmls/谷歌.html
Normal file
@@ -0,0 +1,576 @@
|
||||
我将为您创建一个专业的金融科技风格HTML页面，展示谷歌AI转型的完整投资分析。这个页面将融合数据可视化、动态效果和响应式设计。
|
||||
|
||||
|
||||
<!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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
* {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.number-animate {
|
||||
animation: countUp 1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes countUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.timeline-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 20px;
|
||||
width: 2px;
|
||||
height: calc(100% + 10px);
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.timeline-item:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.glow-text {
|
||||
text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
.scroll-hidden::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.badge-glow {
|
||||
animation: badgeGlow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes badgeGlow {
|
||||
from {
|
||||
box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Hero Section -->
|
||||
<section class="gradient-bg text-white py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-full mb-6 badge-glow">
|
||||
<i class="fab fa-google text-3xl"></i>
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-6 glow-text">
|
||||
谷歌AI产业链投资分析
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto">
|
||||
从"搜索广告公司"向"AI基础设施+应用生态平台"的战略蜕变
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-6 mt-16">
|
||||
<div class="glass-effect rounded-xl p-6 card-hover">
|
||||
<div class="text-3xl font-bold number-animate">450<span class="text-xl">万</span></div>
|
||||
<div class="text-blue-200 mt-2">等效H100算力</div>
|
||||
<div class="text-sm text-blue-300 mt-1">2025年预期</div>
|
||||
</div>
|
||||
<div class="glass-effect rounded-xl p-6 card-hover">
|
||||
<div class="text-3xl font-bold number-animate">1300<span class="text-xl">万亿</span></div>
|
||||
<div class="text-blue-200 mt-2">月均Token处理量</div>
|
||||
<div class="text-sm text-blue-300 mt-1">环比增长30%</div>
|
||||
</div>
|
||||
<div class="glass-effect rounded-xl p-6 card-hover">
|
||||
<div class="text-3xl font-bold number-animate">23.7<span class="text-xl">%</span></div>
|
||||
<div class="text-blue-200 mt-2">云业务利润率</div>
|
||||
<div class="text-sm text-blue-300 mt-1">Q3 2025</div>
|
||||
</div>
|
||||
<div class="glass-effect rounded-xl p-6 card-hover">
|
||||
<div class="text-3xl font-bold number-animate">1550<span class="text-xl">亿美元</span></div>
|
||||
<div class="text-blue-200 mt-2">云积压订单</div>
|
||||
<div class="text-sm text-blue-300 mt-1">环比增长46.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Timeline -->
|
||||
<section class="py-16 px-4 bg-white">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
|
||||
<i class="fas fa-clock text-purple-600 mr-3"></i>关键时间轴
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="timeline-item">
|
||||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年2-3月</div>
|
||||
<div class="text-lg font-semibold text-gray-800 mb-2">AI Overview大规模推广</div>
|
||||
<div class="text-gray-600 text-sm">Token消耗量达480万亿/月</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年5月</div>
|
||||
<div class="text-lg font-semibold text-gray-800 mb-2">Gemini 2.5 Pro发布</div>
|
||||
<div class="text-gray-600 text-sm">AI Mode上线，月活破1亿</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年8月</div>
|
||||
<div class="text-lg font-semibold text-gray-800 mb-2">Pixel 9搭载Gemini Nano</div>
|
||||
<div class="text-gray-600 text-sm">Gemini Live对标Apple Intelligence</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年9月</div>
|
||||
<div class="text-lg font-semibold text-gray-800 mb-2">反垄断判决超预期</div>
|
||||
<div class="text-gray-600 text-sm">保留Chrome，消除不确定性</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年10月</div>
|
||||
<div class="text-lg font-semibold text-gray-800 mb-2">Q3财报验证AI正循环</div>
|
||||
<div class="text-gray-600 text-sm">搜索收入增速创2-3年新高</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年11月</div>
|
||||
<div class="text-lg font-semibold text-gray-800 mb-2">TPU外供重大突破</div>
|
||||
<div class="text-gray-600 text-sm">OpenAI/META成为客户</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Logic Section -->
|
||||
<section class="py-16 px-4 bg-gray-100">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">
|
||||
<i class="fas fa-brain text-purple-600 mr-3"></i>核心逻辑分析
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mb-6">
|
||||
<i class="fas fa-microchip text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-4">算力自主化</h3>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
自研TPU芯片性能对标英伟达B200，凭借功耗和成本优势，云业务利润率从11%提升至23.7%，单季度利润率提升超12个百分点
|
||||
</p>
|
||||
<div class="mt-6 flex items-center text-purple-600 font-semibold">
|
||||
<span>450万等效H100</span>
|
||||
<i class="fas fa-arrow-trend-up ml-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center mb-6">
|
||||
<i class="fas fa-robot text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-4">模型代际领先</h3>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
Gemini 2.5 Pro在LMArena测评中ELO分数达1448分，Veo 3、Imagen 4、Genie模型在多模态领域实现突破性进展
|
||||
</p>
|
||||
<div class="mt-6 flex items-center text-green-600 font-semibold">
|
||||
<span>多模态原生能力</span>
|
||||
<i class="fas fa-trophy ml-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-600 rounded-full flex items-center justify-center mb-6">
|
||||
<i class="fas fa-chart-line text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-4">流量护城河转化</h3>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
AI Overview覆盖15-20亿月活，AI Mode Token消耗是传统模式的2-3倍，重构搜索商业模式，提升广告ROI
|
||||
</p>
|
||||
<div class="mt-6 flex items-center text-orange-600 font-semibold">
|
||||
<span>20亿月活用户</span>
|
||||
<i class="fas fa-users ml-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Market Sentiment -->
|
||||
<div class="bg-gradient-to-r from-purple-50 to-blue-50 rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-chart-pie text-purple-600 mr-3"></i>市场预期差
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-700 mb-4">当前市场认知</h4>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-2"><i class="fas fa-times-circle"></i></span>
|
||||
<span class="text-gray-600">估值便宜但增长乏力（PE 18倍）</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-2"><i class="fas fa-times-circle"></i></span>
|
||||
<span class="text-gray-600">担忧AI搜索冲击广告收入</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-2"><i class="fas fa-times-circle"></i></span>
|
||||
<span class="text-gray-600">机构低配，情绪偏谨慎</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-700 mb-4">产业实际进展</h4>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2"><i class="fas fa-check-circle"></i></span>
|
||||
<span class="text-gray-600">产业链订单上修30-50%</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2"><i class="fas fa-check-circle"></i></span>
|
||||
<span class="text-gray-600">TPU外供打开第二增长曲线</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2"><i class="fas fa-check-circle"></i></span>
|
||||
<span class="text-gray-600">进入"业绩饥渴"状态</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stock Chain Table -->
|
||||
<section class="py-16 px-4 bg-white">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
|
||||
<i class="fas fa-network-wired text-purple-600 mr-3"></i>谷歌产业链核心标的
|
||||
</h2>
|
||||
|
||||
<div class="mb-8 flex flex-wrap gap-4 justify-center">
|
||||
<button onclick="filterCategory('all')" class="px-6 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition">
|
||||
全部
|
||||
</button>
|
||||
<button onclick="filterCategory('光模块')" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">
|
||||
光模块
|
||||
</button>
|
||||
<button onclick="filterCategory('PCB')" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">
|
||||
PCB
|
||||
</button>
|
||||
<button onclick="filterCategory('OCS')" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">
|
||||
OCS
|
||||
</button>
|
||||
<button onclick="filterCategory('液冷散热')" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">
|
||||
液冷散热
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="stockTable">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
|
||||
<th class="p-4 text-left font-semibold">分类</th>
|
||||
<th class="p-4 text-left font-semibold">个股</th>
|
||||
<th class="p-4 text-left font-semibold">相关性描述</th>
|
||||
<th class="p-4 text-left font-semibold">消息来源</th>
|
||||
<th class="p-4 text-center font-semibold">投资评级</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="stockTableBody">
|
||||
<!-- Table content will be dynamically generated -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Risk Analysis -->
|
||||
<section class="py-16 px-4 bg-gradient-to-br from-red-50 to-orange-50">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">
|
||||
<i class="fas fa-exclamation-triangle text-red-600 mr-3"></i>风险提示
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-white rounded-xl p-6 border-l-4 border-red-500">
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-microchip text-red-500 mr-2"></i>技术风险
|
||||
</h3>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li>• AI Mode幻觉率达15-20%</li>
|
||||
<li>• Agent识别第三方应用仅30%</li>
|
||||
<li>• Agent to Agent协议推进缓慢</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 border-l-4 border-orange-500">
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-dollar-sign text-orange-500 mr-2"></i>商业化风险
|
||||
</h3>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li>• AI Ultra月费245美元过高</li>
|
||||
<li>• 广告展示次数或降30-40%</li>
|
||||
<li>• Gemini Advanced仅3000万用户</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 border-l-4 border-yellow-500">
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-gavel text-yellow-600 mr-2"></i>政策风险
|
||||
</h3>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li>• 美国司法部终极裁决未定</li>
|
||||
<li>• 欧盟数字税反制风险</li>
|
||||
<li>• 广告业务拆分风险犹存</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Investment Advice -->
|
||||
<section class="py-16 px-4 gradient-bg text-white">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-12 text-center glow-text">
|
||||
<i class="fas fa-lightbulb mr-3"></i>投资建议
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div class="glass-effect rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-6">谷歌本体 (GOOGL)</h3>
|
||||
<div class="mb-6">
|
||||
<div class="text-4xl font-bold mb-2">增持评级</div>
|
||||
<div class="text-blue-200">目标价：$233-250</div>
|
||||
</div>
|
||||
<ul class="space-y-3 text-blue-100">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mr-3 mt-1"></i>
|
||||
<span>当前18倍PE未反映TPU外供价值</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mr-3 mt-1"></i>
|
||||
<span>监管出清后估值向25倍PE修复</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mr-3 mt-1"></i>
|
||||
<span>AI订阅带来第二增长曲线</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-6">A股产业链配置</h3>
|
||||
<div class="mb-6">
|
||||
<div class="text-4xl font-bold mb-2">重点配置</div>
|
||||
<div class="text-blue-200">硬件链业绩确定性最强</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||||
<span>光库科技</span>
|
||||
<span class="text-green-300 font-semibold">第一优先级</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||||
<span>中际旭创</span>
|
||||
<span class="text-green-300 font-semibold">第二优先级</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||||
<span>沪电股份</span>
|
||||
<span class="text-green-300 font-semibold">第三优先级</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<div class="inline-flex items-center bg-white/20 rounded-full px-8 py-4">
|
||||
<i class="fas fa-chart-line text-3xl mr-4 pulse-dot"></i>
|
||||
<div class="text-left">
|
||||
<div class="text-sm text-blue-200">关键跟踪指标</div>
|
||||
<div class="text-xl font-bold">Q4云业务利润率 & Token环比增速</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-white py-8 px-4">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<p class="text-gray-400">© 2024 谷歌AI产业链投资分析 | 数据来源：公开研报、路演纪要、产业链调研</p>
|
||||
<p class="text-gray-500 text-sm mt-2">风险提示：投资有风险，入市需谨慎</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Stock data processing
|
||||
const stockData = [
|
||||
{category: '光模块', name: '中际旭创', desc: '供货谷歌800G光模块份额A股第一，2025年谷歌光模块采购量约350万只，中际旭创占其采购份额的70%', source: '网传纪要', rating: '强烈推荐'},
|
||||
{category: '光模块', name: '新易盛', desc: '供货谷歌800G光模块份额A股第二，2025年首次切入谷歌800G供应链', source: '网传纪要', rating: '推荐'},
|
||||
{category: '光模块', name: '长芯盛创', desc: '800G硅光模块已通过谷歌多轮验证，计划2025年第三季度量产，预计年出货量超50万只', source: '网传纪要', rating: '推荐'},
|
||||
{category: 'PCB', name: '沪电股份', desc: '供货谷歌PCB份额A股第一，谷歌TPU PCB的核心供应商，在谷歌TPU供应商中占比约30%', source: '网传纪要', rating: '强烈推荐'},
|
||||
{category: 'PCB', name: '胜宏科技', desc: '谷歌V7大份额一供', source: '机构研报', rating: '推荐'},
|
||||
{category: 'OCS', name: '腾景科技', desc: '谷歌OCS交换机的核心光学器件供应商,业务收入占比已达28%', source: '公开资料', rating: '推荐'},
|
||||
{category: 'OCS', name: '光库科技', desc: '2025年6月份并购的武汉捷普工厂，是过去谷歌OCS交换机方案的独家代工厂商', source: '网传纪要', rating: '强烈推荐'},
|
||||
{category: '液冷散热', name: '英维克', desc: '公司推出基于谷歌Descartes 5 CDU规格的CDU产品，同时展示26MW全链路液冷案例', source: '公开资料', rating: '推荐'}
|
||||
];
|
||||
|
||||
// Populate table
|
||||
function populateTable(data) {
|
||||
const tbody = document.getElementById('stockTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
data.forEach((stock, index) => {
|
||||
const row = document.createElement('tr');
|
||||
row.className = 'border-b hover:bg-gray-50 transition-colors';
|
||||
row.innerHTML = `
|
||||
<td class="p-4">
|
||||
<span class="inline-block px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">
|
||||
${stock.category}
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-4 font-semibold text-gray-800">${stock.name}</td>
|
||||
<td class="p-4 text-gray-600 max-w-md">${stock.desc}</td>
|
||||
<td class="p-4 text-gray-500 text-sm">${stock.source}</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="inline-block px-3 py-1 ${
|
||||
stock.rating === '强烈推荐' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'
|
||||
} rounded-full text-sm font-medium">
|
||||
${stock.rating}
|
||||
</span>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// Filter category
|
||||
function filterCategory(category) {
|
||||
const buttons = document.querySelectorAll('button');
|
||||
buttons.forEach(btn => {
|
||||
if (btn.textContent === '全部' && category === 'all' ||
|
||||
btn.textContent === category) {
|
||||
btn.className = 'px-6 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition';
|
||||
} else if (btn.textContent !== '全部') {
|
||||
btn.className = 'px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition';
|
||||
}
|
||||
});
|
||||
|
||||
const filtered = category === 'all' ? stockData : stockData.filter(s => s.category === category);
|
||||
populateTable(filtered);
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
populateTable(stockData);
|
||||
|
||||
// Add smooth scroll
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Animate numbers on scroll
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('number-animate');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.number-animate').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
这个HTML页面完整展示了谷歌AI转型的投资分析，包含以下核心特性：
|
||||
|
||||
## 🎯 核心亮点
|
||||
|
||||
1. **动态数据可视化**：Hero区域展示关键数据指标，带动画效果
|
||||
2. **时间轴展示**：清晰呈现谷歌AI发展的关键节点
|
||||
3. **产业链分析**：交互式表格展示核心标的，支持分类筛选
|
||||
4. **风险提示矩阵**：三维度风险分析（技术、商业化、政策）
|
||||
5. **投资建议卡片**：玻璃拟态设计展示具体配置建议
|
||||
|
||||
## 💫 设计特色
|
||||
|
||||
- **渐变色彩系统**：紫色到蓝色的科技感渐变
|
||||
- **卡片悬浮效果**：鼠标悬停时的3D浮起动画
|
||||
- **脉冲动画**：重要指标的呼吸灯效果
|
||||
- **响应式布局**：完美适配移动端和桌面端
|
||||
- **微交互设计**：按钮点击、表格筛选等细节动画
|
||||
|
||||
## 📊 数据展示
|
||||
|
||||
- 完整保留了insight中的核心数据和逻辑
|
||||
- 股票产业链表格支持动态筛选
|
||||
- 关键数据突出显示（450万算力、1300万亿Token等）
|
||||
- 风险和投资建议分层展示
|
||||
|
||||
这个页面不仅是一个信息展示工具，更是一个专业的投资决策辅助界面，通过视觉化设计帮助投资者快速把握谷歌AI产业链的投资机会。
|
||||
Reference in New Issue
Block a user