update pay ui
This commit is contained in:
@@ -1,439 +1,404 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh-CN" data-theme="night">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>双季戊四醇概念分析报告</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/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>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.timeline-dot {
|
||||
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||
}
|
||||
.price-up {
|
||||
color: #10b981;
|
||||
}
|
||||
.price-down {
|
||||
color: #ef4444;
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.table-container {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<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.10.2/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--glow-color: hsl(180, 100%, 50%);
|
||||
}
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: #00000a;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.bg-deep-space {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: radial-gradient(circle at 20% 20%, hsl(190, 80%, 15%, 0.3) 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 70%, hsl(280, 80%, 20%, 0.3) 0%, transparent 40%);
|
||||
z-index: -1;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(10, 15, 30, 0.5);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 0 80px rgba(0, 0, 0, 0.3),
|
||||
inset 0 0 10px rgba(100, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.glass-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 80px rgba(0, 0, 0, 0.5),
|
||||
0 0 30px var(--glow-color, hsl(180, 100%, 50%)),
|
||||
inset 0 0 15px rgba(100, 255, 255, 0.2);
|
||||
}
|
||||
.orbitron {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
text-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color);
|
||||
}
|
||||
.text-glow {
|
||||
text-shadow: 0 0 8px var(--glow-color);
|
||||
}
|
||||
.border-glow {
|
||||
border-color: var(--glow-color);
|
||||
}
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.8; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
.pulse-glow {
|
||||
animation: pulse 3s infinite ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-gray-100 p-4 md:p-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- 标题部分 -->
|
||||
<div class="text-center mb-10">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">双季戊四醇概念分析</h1>
|
||||
<p class="text-gray-300 text-lg">供给硬缺口 + 需求爆发的超级周期</p>
|
||||
</div>
|
||||
<body class="text-gray-200 antialiased">
|
||||
<div class="bg-deep-space"></div>
|
||||
<div class="container mx-auto p-4 md:p-8 space-y-8 md:space-y-12">
|
||||
|
||||
<!-- 时间轴部分 -->
|
||||
<div class="card rounded-2xl p-6 mb-8">
|
||||
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||||
<i class="fas fa-clock mr-3 text-blue-400"></i>
|
||||
概念发展时间轴
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start">
|
||||
<div class="timeline-dot w-4 h-4 rounded-full mt-1.5 mr-4 flex-shrink-0"></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-1">
|
||||
<span class="font-semibold">2024年10月</span>
|
||||
<span class="text-sm bg-gray-700 px-2 py-1 rounded">价格: 2.5万元/吨</span>
|
||||
</div>
|
||||
<p class="text-gray-300">行业库存趋近于零,湖北宜化4万吨装置因环保搬迁计划曝光</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="timeline-dot w-4 h-4 rounded-full mt-1.5 mr-4 flex-shrink-0"></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-1">
|
||||
<span class="font-semibold">2025年1-2月</span>
|
||||
<span class="text-sm bg-gray-700 px-2 py-1 rounded price-up">价格: 4.5万元/吨</span>
|
||||
</div>
|
||||
<p class="text-gray-300">下游PCB油墨需求因AI算力爆发(胜宏科技等客户)激增</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="timeline-dot w-4 h-4 rounded-full mt-1.5 mr-4 flex-shrink-0"></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-1">
|
||||
<span class="font-semibold">2025年3月</span>
|
||||
<span class="text-sm bg-gray-700 px-2 py-1 rounded price-up">价格: 5.5-7万元/吨</span>
|
||||
</div>
|
||||
<p class="text-gray-300">湖北宜化6月搬迁确认,中毅达被券商密集推荐(连涨11日翻倍)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="timeline-dot w-4 h-4 rounded-full mt-1.5 mr-4 flex-shrink-0"></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-1">
|
||||
<span class="font-semibold">2025年5月</span>
|
||||
<span class="text-sm bg-gray-700 px-2 py-1 rounded price-up">价格: 7.45万元/吨</span>
|
||||
<span class="text-xs text-green-400">同比+132%</span>
|
||||
</div>
|
||||
<p class="text-gray-300">中毅达公告"双季占比极少",股价"天地板"巨震,但行业报价仍维持高位</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<header class="text-center py-8">
|
||||
<h1 class="orbitron text-4xl md:text-6xl font-bold text-glow tracking-widest uppercase">双季戊四醇</h1>
|
||||
<p class="mt-4 text-xl text-cyan-200">深度行研报告</p>
|
||||
<p class="mt-2 text-sm text-gray-500">北京价值前沿科技有限公司 AI投研agent:“价小前投研” 呈现</p>
|
||||
</header>
|
||||
|
||||
<!-- 核心观点 -->
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="card rounded-2xl p-6">
|
||||
<h2 class="text-2xl font-bold mb-4 flex items-center">
|
||||
<i class="fas fa-lightbulb mr-3 text-yellow-400"></i>
|
||||
核心观点摘要
|
||||
</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-blue-900/20 border-l-4 border-blue-400 p-4 rounded">
|
||||
<p class="font-semibold text-blue-300 mb-1">阶段判断</p>
|
||||
<p class="text-sm">双季戊四醇处于"供给硬缺口+需求爆发"驱动的超级周期</p>
|
||||
</div>
|
||||
<div class="bg-purple-900/20 border-l-4 border-purple-400 p-4 rounded">
|
||||
<p class="font-semibold text-purple-300 mb-1">价格涨幅</p>
|
||||
<p class="text-sm">从2024年10月2.5万→7.45万/吨(涨幅198%)</p>
|
||||
</div>
|
||||
<div class="bg-red-900/20 border-l-4 border-red-400 p-4 rounded">
|
||||
<p class="font-semibold text-red-300 mb-1">核心矛盾</p>
|
||||
<p class="text-sm">市场炒作的"涨价弹性"与上市公司实际业绩贡献的严重错配</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Executive Summary -->
|
||||
<section class="glass-card p-6 md:p-8" style="--glow-color: hsl(260, 100%, 70%);">
|
||||
<h2 class="orbitron text-2xl font-bold mb-4 border-l-4 border-glow pl-4 text-glow" style="--glow-color: hsl(260, 100%, 70%);">核心观点摘要</h2>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
双季戊四醇正处于一轮由 <strong class="text-purple-300">“AI算力驱动的新兴需求”</strong> 与 <strong class="text-purple-300">“刚性且面临冲击的供给格局”</strong> 所引发的、基本面驱动的强景气周期中。其核心驱动力是清晰的 <strong class="font-semibold text-white">供需错配</strong>,而龙头企业明确的停产搬迁计划则为价格上涨提供了极强的确定性催化。未来潜力取决于AI需求的可持续性与供给缺口兑现的程度,当前已从主题炒作过渡到 <strong class="font-semibold text-white">业绩验证阶段</strong>。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="card rounded-2xl p-6">
|
||||
<h2 class="text-2xl font-bold mb-4 flex items-center">
|
||||
<i class="fas fa-chart-line mr-3 text-green-400"></i>
|
||||
核心驱动力
|
||||
</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-arrow-down text-red-400 mt-1 mr-3"></i>
|
||||
<div>
|
||||
<p class="font-semibold">供给收缩不可逆</p>
|
||||
<p class="text-sm text-gray-300">湖北宜化6万吨产能(占全球25%)2025年6月搬迁,2026年Q4前无复产计划</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-arrow-up text-green-400 mt-1 mr-3"></i>
|
||||
<div>
|
||||
<p class="font-semibold">需求刚性爆发</p>
|
||||
<p class="text-sm text-gray-300">PCB油墨中双季不可替代,AI服务器/汽车电子PCB需求年增20%+</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-percentage text-blue-400 mt-1 mr-3"></i>
|
||||
<div>
|
||||
<p class="font-semibold">成本占比极低</p>
|
||||
<p class="text-sm text-gray-300">双季占PCB油墨成本<5%,下游对涨价容忍度极高</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产业链分析 -->
|
||||
<div class="card rounded-2xl p-6 mb-8">
|
||||
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||||
<i class="fas fa-sitemap mr-3 text-indigo-400"></i>
|
||||
产业链与核心公司分析
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-6">
|
||||
<div class="bg-gray-800/50 p-4 rounded-lg">
|
||||
<h3 class="font-semibold text-lg mb-3 text-blue-300">上游</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li class="flex items-center"><i class="fas fa-flask mr-2 text-gray-400"></i>甲醛+乙醛(湖北宜化自给)</li>
|
||||
<li class="flex items-center"><i class="fas fa-vial mr-2 text-gray-400"></i>液碱(中泰化学)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-800/50 p-4 rounded-lg">
|
||||
<h3 class="font-semibold text-lg mb-3 text-purple-300">中游</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li class="flex items-center"><i class="fas fa-industry mr-2 text-gray-400"></i>湖北宜化(6万吨,搬迁中)</li>
|
||||
<li class="flex items-center"><i class="fas fa-industry mr-2 text-gray-400"></i>中毅达(<1万吨,概念龙头)</li>
|
||||
<li class="flex items-center"><i class="fas fa-industry mr-2 text-gray-400"></i>金禾实业(2万吨)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-800/50 p-4 rounded-lg">
|
||||
<h3 class="font-semibold text-lg mb-3 text-green-300">下游</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li class="flex items-center"><i class="fas fa-microchip mr-2 text-gray-400"></i>PCB油墨(容大感光、广信材料)</li>
|
||||
<li class="flex items-center"><i class="fas fa-paint-brush mr-2 text-gray-400"></i>高端涂料(汽车/航空)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-700">
|
||||
<th class="text-left py-3 px-4">公司</th>
|
||||
<th class="text-left py-3 px-4">双季产能</th>
|
||||
<th class="text-left py-3 px-4">实际关联度</th>
|
||||
<th class="text-left py-3 px-4">风险点</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-800">
|
||||
<td class="py-3 px-4 font-semibold">湖北宜化</td>
|
||||
<td class="py-3 px-4">6万吨(搬迁中)</td>
|
||||
<td class="py-3 px-4"><span class="bg-green-900/30 text-green-300 px-2 py-1 rounded text-xs">直接龙头</span></td>
|
||||
<td class="py-3 px-4">新疆宜化未并表,A股无纯标的</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800">
|
||||
<td class="py-3 px-4 font-semibold">中毅达</td>
|
||||
<td class="py-3 px-4">未披露(估算<1万吨)</td>
|
||||
<td class="py-3 px-4"><span class="bg-yellow-900/30 text-yellow-300 px-2 py-1 rounded text-xs">概念龙头</span></td>
|
||||
<td class="py-3 px-4">公告"占比极少",业绩弹性存疑</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 px-4 font-semibold">金禾实业</td>
|
||||
<td class="py-3 px-4">2万吨(单季为主)</td>
|
||||
<td class="py-3 px-4"><span class="bg-blue-900/30 text-blue-300 px-2 py-1 rounded text-xs">弹性标的</span></td>
|
||||
<td class="py-3 px-4">双季收率仅5%,利润贡献有限</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联股票数据表格 -->
|
||||
<div class="card rounded-2xl p-6 mb-8">
|
||||
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||||
<i class="fas fa-table mr-3 text-cyan-400"></i>
|
||||
关联股票数据
|
||||
</h2>
|
||||
<div class="table-container">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-700">
|
||||
<th class="text-left py-3 px-4">股票名称</th>
|
||||
<th class="text-left py-3 px-4">产能/项目</th>
|
||||
<th class="text-left py-3 px-4">行业地位/用途</th>
|
||||
<th class="text-left py-3 px-4">其他信息</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">中钛达</td>
|
||||
<td class="py-3 px-4">4.3万吨</td>
|
||||
<td class="py-3 px-4">国内行业第二</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">键邦股份</td>
|
||||
<td class="py-3 px-4">无季戊四醇系列产品及在建项目</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">湖北宜化</td>
|
||||
<td class="py-3 px-4">5万吨</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">苏盐井神</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
<td class="py-3 px-4">参股公司江苏瑞阳13.38%</td>
|
||||
<td class="py-3 px-4">2023年退出,无股权关联</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">金禾实业</td>
|
||||
<td class="py-3 px-4">2万吨/年</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">江天化学</td>
|
||||
<td class="py-3 px-4">20万吨</td>
|
||||
<td class="py-3 px-4">甲醇用于生产季戊四醇</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">华尔泰</td>
|
||||
<td class="py-3 px-4">5万吨/年</td>
|
||||
<td class="py-3 px-4">生产密胺树脂产品</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">云天化</td>
|
||||
<td class="py-3 px-4">26万吨/年</td>
|
||||
<td class="py-3 px-4">部分外售,部分用于生产聚甲醛</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800 hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">世名科技</td>
|
||||
<td class="py-3 px-4">已研发</td>
|
||||
<td class="py-3 px-4">PCB阻焊油等领域</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-800/30">
|
||||
<td class="py-3 px-4 font-semibold">金牛化工</td>
|
||||
<td class="py-3 px-4">20万吨/年</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
<td class="py-3 px-4">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 风险与结论 -->
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="card rounded-2xl p-6">
|
||||
<h2 class="text-2xl font-bold mb-4 flex items-center">
|
||||
<i class="fas fa-exclamation-triangle mr-3 text-red-400"></i>
|
||||
潜在风险与挑战
|
||||
</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-cog text-gray-400 mt-1 mr-3"></i>
|
||||
<div>
|
||||
<p class="font-semibold">技术风险</p>
|
||||
<p class="text-sm text-gray-300">双季收率提升可能打破供给瓶颈</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-flask text-gray-400 mt-1 mr-3"></i>
|
||||
<div>
|
||||
<p class="font-semibold">商业化风险</p>
|
||||
<p class="text-sm text-gray-300">PCB油墨若转向水性/无溶剂技术,双季需求或萎缩</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-balance-scale text-gray-400 mt-1 mr-3"></i>
|
||||
<div>
|
||||
<p class="font-semibold">政策风险</p>
|
||||
<p class="text-sm text-gray-300">环保政策若放松,湖北宜化搬迁延期,供给缺口消失</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-info-circle text-gray-400 mt-1 mr-3"></i>
|
||||
<div>
|
||||
<p class="font-semibold">信息矛盾</p>
|
||||
<p class="text-sm text-gray-300">券商研报与公司公告存在差异,存在误导性推荐</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card rounded-2xl p-6">
|
||||
<h2 class="text-2xl font-bold mb-4 flex items-center">
|
||||
<i class="fas fa-chart-pie mr-3 text-green-400"></i>
|
||||
投资启示
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gradient-to-r from-blue-900/30 to-purple-900/30 p-4 rounded-lg">
|
||||
<p class="font-semibold mb-2">阶段判断</p>
|
||||
<p class="text-sm">当前处于"主题炒作向基本面过渡"阶段,现货涨价已兑现,但A股缺乏纯正标的</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<p class="font-semibold text-green-300 mb-1">短期策略</p>
|
||||
<p class="text-sm">回避纯概念股(中毅达),关注湖北宜化(000422)搬迁进展</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="font-semibold text-blue-300 mb-1">长期跟踪</p>
|
||||
<p class="text-sm">跟踪卫星化学等潜在技术突破者(α-烯烃副产双季)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-800/50 p-3 rounded text-xs">
|
||||
<p class="font-semibold mb-1">关键跟踪指标:</p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<li>现货价格能否突破10万/吨</li>
|
||||
<li>湖北宜化6月是否如期停产</li>
|
||||
<li>PCB厂库存是否跌破7天</li>
|
||||
<!-- Concept Event Evolution -->
|
||||
<section class="glass-card p-6 md:p-8">
|
||||
<h2 class="orbitron text-2xl font-bold mb-6 border-l-4 border-glow pl-4 text-glow">概念行情演进脉络</h2>
|
||||
<ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
|
||||
<li>
|
||||
<div class="timeline-middle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-cyan-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" /></svg>
|
||||
</div>
|
||||
<div class="timeline-start md:text-end mb-10">
|
||||
<time class="font-mono italic">2024 H2</time>
|
||||
<div class="text-lg font-black text-cyan-300">背景酝酿期</div>
|
||||
AI算力建设加速,拉动高端PCB需求,双季戊四醇作为核心材料需求萌芽。自2024年7月起,其价格涨幅开始明显高于单季戊四醇,供需紧张初现端倪。
|
||||
</div>
|
||||
<hr class="bg-cyan-400"/>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="bg-cyan-400"/>
|
||||
<div class="timeline-middle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-cyan-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" /></svg>
|
||||
</div>
|
||||
<div class="timeline-end mb-10">
|
||||
<time class="font-mono italic">2024.10 - 2025.02</time>
|
||||
<div class="text-lg font-black text-cyan-300">行情启动期</div>
|
||||
价格从2.5万元/吨启动,至2月飙升至5.5万元/吨,实现翻倍。市场出现“行业零库存”,工厂排单至数月后,供不应求格局确立。
|
||||
</div>
|
||||
<hr class="bg-cyan-400"/>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="bg-cyan-400"/>
|
||||
<div class="timeline-middle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-cyan-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" /></svg>
|
||||
</div>
|
||||
<div class="timeline-start md:text-end mb-10">
|
||||
<time class="font-mono italic">2025.03 - 至今</time>
|
||||
<div class="text-lg font-black text-cyan-300">催化剂发酵期</div>
|
||||
市场密集预期龙头 <strong class="text-white">湖北宜化</strong> 将于6月停产搬迁,明确的供给冲击引爆情绪。价格持续突破7万元/吨,中毅达财报验证涨价行情的盈利弹性。
|
||||
</div>
|
||||
<hr/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Price Trend -->
|
||||
<section class="glass-card p-6 md:p-8">
|
||||
<h2 class="orbitron text-2xl font-bold mb-4 border-l-4 border-glow pl-4 text-glow">价格动态:指数级上涨</h2>
|
||||
<p class="mb-6 text-gray-400">自2024年下半年以来,双季戊四醇价格脱离母产品单季戊四醇的走势,走出独立行情。新闻数据显示,价格从2024年10月约2.5万元/吨低点,数月内实现翻倍,并在2025年Q1-Q2持续创下新高。市场甚至出现“价格突破20万,依然在下游客户承受范围”的乐观预期。</p>
|
||||
<div id="priceChart" class="w-full h-96"></div>
|
||||
</section>
|
||||
|
||||
<!-- Supply & Demand Bento Grid -->
|
||||
<section>
|
||||
<h2 class="orbitron text-3xl font-bold mb-6 text-center text-glow">核心驱动力:供需剪刀差</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
|
||||
<!-- Demand Side -->
|
||||
<div class="glass-card p-6 md:p-8 space-y-4 row-span-2 pulse-glow" style="--glow-color: hsl(150, 100%, 50%);">
|
||||
<h3 class="orbitron text-2xl font-bold text-green-300 text-glow" style="--glow-color: hsl(150, 100%, 50%);">需求端:结构性爆发 & 价格不敏感</h3>
|
||||
<div class="divider before:bg-green-700 after:bg-green-700"></div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg text-white">AI算力驱动PCB油墨需求</h4>
|
||||
<p class="text-gray-400">AI服务器、数据中心建设带动高端PCB需求放量。双季戊四醇是 <strong class="text-green-300">PCB固化油墨核心材料</strong>,直接受益。需求占比约40%,且具备高景气度。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg text-white">新兴领域拓展</h4>
|
||||
<p class="text-gray-400">在 <strong class="text-green-300">新能源汽车高端涂料</strong>、航空航天高级润滑剂等领域应用增长,需求具备刚性。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg text-white">低成本占比,高价格承受力</h4>
|
||||
<p class="text-gray-400">在下游高端产品(如PCB油墨)中成本占比较低,使得下游客户对原料价格上涨的 <strong class="text-green-300">承受能力极强</strong>。新闻调研称价格涨至20万元/吨仍在可接受范围。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Supply Side -->
|
||||
<div class="glass-card p-6 md:p-8 space-y-4 pulse-glow" style="--glow-color: hsl(30, 100%, 50%);">
|
||||
<h3 class="orbitron text-2xl font-bold text-orange-300 text-glow" style="--glow-color: hsl(30, 100%, 50%);">供给端:高度刚性 & 持续收缩</h3>
|
||||
<div class="divider before:bg-orange-700 after:bg-orange-700"></div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg text-white">工艺约束:产量受限</h4>
|
||||
<p class="text-gray-400">作为单季戊四醇的 <strong class="text-orange-300">副产品</strong>,产出率仅5%-10%,无法独立扩产,产量与单季开工率强相关。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-card p-6 md:p-8 space-y-4 pulse-glow" style="--glow-color: hsl(0, 100%, 60%);">
|
||||
<div>
|
||||
<h4 class="font-bold text-lg text-white">产能固化:无新增供给</h4>
|
||||
<p class="text-gray-400">行业技术壁垒高,近年来 <strong class="text-red-400">无新增产能</strong>,新进入者门槛高,供给端缺乏弹性。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg text-white">事件冲击:龙头停产</h4>
|
||||
<p class="text-gray-400">龙头 <strong class="text-red-400">湖北宜化</strong>(占全国产能25%)计划于2025年6月起停产搬迁,将对本已紧张的供给造成巨大冲击,是行情的核心催化剂。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Market Perception & Discrepancies -->
|
||||
<section class="glass-card p-6 md:p-8" style="--glow-color: hsl(210, 100%, 60%);">
|
||||
<h2 class="orbitron text-2xl font-bold mb-4 border-l-4 border-glow pl-4 text-glow" style="--glow-color: hsl(210, 100%, 60%);">市场认知与预期差</h2>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="font-semibold text-xl text-blue-300 mb-2">市场共识</h3>
|
||||
<p class="text-gray-300">当前市场热度极高,情绪高度乐观。共识在于:供需持续紧张,龙头搬迁将加剧短缺,价格将继续上涨。新闻与研报频繁将其与历史牛市品种“PVDF、TMA”相提并论,渲染强烈涨价预期。</p>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-xl text-yellow-300 mb-2">潜在预期差 / 被忽略的关键点</h3>
|
||||
<ul class="list-disc list-inside space-y-3 text-gray-300">
|
||||
<li>
|
||||
<strong class="text-white">“龙头”的错位认知:</strong> 市场将 <span class="badge badge-warning">中毅达</span> 追捧为“全球双季戊四醇之王”,但其公司内部人士已明确表示“<span class="italic text-yellow-200">双季戊四醇...占比非常少,并不足以支撑当前市场对公司股价的追捧。</span>” 这是一个巨大的预期差,市场可能过度交易了其“概念纯度”。
|
||||
</li>
|
||||
<li>
|
||||
<strong class="text-white">对单季戊四醇的忽视:</strong> 双季产量受限于单季。若单季传统下游(如涂料)需求疲软导致开工率下降,将 <span class="italic text-yellow-200">被动减少双季供应</span>,进一步加剧短缺。
|
||||
</li>
|
||||
<li>
|
||||
<strong class="text-white">替代品威胁的低估:</strong> 虽目前 <span class="badge badge-outline badge-info">新戊二醇</span> 等替代品存在技术缺陷,但若价格持续暴涨,可能 <span class="italic text-yellow-200">倒逼下游加速研发替代方案</span>,构成长期风险。
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Catalysts & Future Path -->
|
||||
<section class="glass-card p-6 md:p-8">
|
||||
<h2 class="orbitron text-2xl font-bold mb-6 border-l-4 border-glow pl-4 text-glow">关键催化剂与未来路径</h2>
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-lg text-cyan-300 mb-2">近期催化剂 (未来3-6个月)</h3>
|
||||
<ul class="list-decimal list-inside space-y-2 text-gray-400">
|
||||
<li><strong class="text-white">湖北宜化停产公告/实施 (核心):</strong> 2025年6月是关键时间点,任何官方公告或实际动作都将是直接催化剂。</li>
|
||||
<li><strong class="text-white">价格持续突破:</strong> 突破10万元/吨等关键心理价位将强化市场乐观预期。</li>
|
||||
<li><strong class="text-white">相关公司中报业绩:</strong> 验证涨价带来的盈利弹性。</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="divider md:divider-horizontal"></div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-lg text-cyan-300 mb-2">长期发展路径</h3>
|
||||
<ul class="list-decimal list-inside space-y-2 text-gray-400">
|
||||
<li><strong class="text-white">供给缺口兑现期 (2025 H2):</strong> 随着宜化停产,价格可能达到周期顶峰。</li>
|
||||
<li><strong class="text-white">新产能落地期 (2025 Q4 - 2026):</strong> 宜化新产能投产将缓解紧张局势。</li>
|
||||
<li><strong class="text-white">价格中枢重估:</strong> 周期过后,由于新兴需求增长,价格中枢可能永久性高于过去水平。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Related Stocks -->
|
||||
<section class="overflow-x-auto w-full">
|
||||
<h2 class="orbitron text-3xl font-bold mb-6 text-center text-glow">产业链及核心关联标的</h2>
|
||||
<div class="glass-card p-4 md:p-6">
|
||||
<table class="table table-zebra w-full text-base">
|
||||
<thead class="text-lg text-cyan-300">
|
||||
<tr>
|
||||
<th>产业链环节</th>
|
||||
<th>股票代码</th>
|
||||
<th>股票名称</th>
|
||||
<th>核心关联逻辑</th>
|
||||
<th>其他标签</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 中游核心生产 -->
|
||||
<tr class="hover:bg-cyan-900/50 transition-colors duration-300">
|
||||
<td rowspan="3" class="font-bold align-middle bg-slate-800/50">中游核心<br>(双)季戊四醇生产</td>
|
||||
<td><a href="https://valuefrontier.cn/company?scode=000422" target="_blank" class="link link-hover text-cyan-400">000422</a></td>
|
||||
<td class="font-bold text-white">湖北宜化</td>
|
||||
<td>国内最大季戊四醇产能(6万吨),双季收率行业领先。其停产搬迁是本轮行情的<strong class="text-red-400">核心变量和叙事</strong>。</td>
|
||||
<td><div class="badge badge-primary">事实龙头</div></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-cyan-900/50 transition-colors duration-300">
|
||||
<td><a href="https://valuefrontier.cn/company?scode=600610" target="_blank" class="link link-hover text-cyan-400">600610</a></td>
|
||||
<td class="font-bold text-white">中毅达</td>
|
||||
<td>国内第二大季戊四醇产能(4.3万吨),但公司自述双季占比较小,存在<strong class="text-yellow-400">预期差</strong>。</td>
|
||||
<td><div class="badge badge-secondary">概念龙头</div></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-cyan-900/50 transition-colors duration-300">
|
||||
<td><a href="https://valuefrontier.cn/company?scode=002597" target="_blank" class="link link-hover text-cyan-400">002597</a></td>
|
||||
<td class="font-bold text-white">金禾实业</td>
|
||||
<td>拥有2万吨/年<strong class="text-yellow-400">季戊四醇</strong>产能。(注:数据源称其有2万吨/年<strong class="text-red-500">双季</strong>产能,与行业总产能矛盾,可靠性存疑)</td>
|
||||
<td><div class="badge badge-warning">数据矛盾</div></td>
|
||||
</tr>
|
||||
<!-- 上游原料 -->
|
||||
<tr class="hover:bg-cyan-900/50 transition-colors duration-300">
|
||||
<td rowspan="4" class="font-bold align-middle bg-slate-800/50">上游原料<br>甲醛/甲醇</td>
|
||||
<td><a href="https://valuefrontier.cn/company?scode=300927" target="_blank" class="link link-hover text-cyan-400">300927</a></td>
|
||||
<td>江天化学</td>
|
||||
<td>甲醛可用于生产季戊四醇,公司为华东地区最大工业甲醛供应商。</td>
|
||||
<td><div class="badge badge-outline">原料供应</div></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-cyan-900/50 transition-colors duration-300">
|
||||
<td><a href="https://valuefrontier.cn/company?scode=001217" target="_blank" class="link link-hover text-cyan-400">001217</a></td>
|
||||
<td>华尔泰</td>
|
||||
<td>甲醛装置产能为5万吨/年,主要自用。</td>
|
||||
<td><div class="badge badge-outline">原料供应</div></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-cyan-900/50 transition-colors duration-300">
|
||||
<td><a href="https://valuefrontier.cn/company?scode=600096" target="_blank" class="link link-hover text-cyan-400">600096</a></td>
|
||||
<td>云天化</td>
|
||||
<td>拥有约1万吨季戊四醇产能,同时拥有26万吨/年甲醇产能。</td>
|
||||
<td><div class="badge badge-outline">一体化</div></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-cyan-900/50 transition-colors duration-300">
|
||||
<td><a href="https://valuefrontier.cn/company?scode=600722" target="_blank" class="link link-hover text-cyan-400">600722</a></td>
|
||||
<td>金牛化工</td>
|
||||
<td>子公司金牛旭阳甲醇产能为20万吨/年。</td>
|
||||
<td><div class="badge badge-outline">原料供应</div></td>
|
||||
</tr>
|
||||
<!-- 潜在布局 & 澄清 -->
|
||||
<tr class="hover:bg-cyan-900/50 transition-colors duration-300">
|
||||
<td rowspan="2" class="font-bold align-middle bg-slate-800/50">其他关联/澄清</td>
|
||||
<td><a href="https://valuefrontier.cn/company?scode=300522" target="_blank" class="link link-hover text-cyan-400">300522</a></td>
|
||||
<td>世名科技</td>
|
||||
<td>公众号显示公司已研发生产双季戊四醇,可用于PCB阻焊油墨等领域。</td>
|
||||
<td><div class="badge badge-info">潜在玩家</div></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-cyan-900/50 transition-colors duration-300">
|
||||
<td><a href="https://valuefrontier.cn/company?scode=603285" target="_blank" class="link link-hover text-cyan-400">603285</a></td>
|
||||
<td>键邦股份</td>
|
||||
<td>公告澄清:公司<strong class="text-red-400">无</strong>季戊四醇系列产品的生产及在建项目。</td>
|
||||
<td><div class="badge badge-error">概念澄清</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Disclaimer -->
|
||||
<footer class="text-center py-8">
|
||||
<p class="text-sm text-gray-500">
|
||||
声明:本报告由北京价值前沿科技有限公司 AI投研agent“价小前投研” 合成,内容基于公开数据分析,不构成任何投资建议。
|
||||
</p>
|
||||
<p class="text-sm text-gray-600">股市有风险,投资需谨慎。</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 风险提示 -->
|
||||
<div class="card bg-gradient-to-r from-red-900/20 to-orange-900/20 rounded-2xl p-6 border border-red-500/30">
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-exclamation-circle text-red-400 text-xl mt-1 mr-3"></i>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg mb-2 text-red-300">风险提示</h3>
|
||||
<p class="text-sm">若中毅达等概念股无法兑现订单,板块或现"多杀多"踩踏。投资需谨慎,请结合自身风险承受能力做出决策。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var chartDom = document.getElementById('priceChart');
|
||||
var myChart = echarts.init(chartDom, 'dark');
|
||||
var option;
|
||||
|
||||
<script>
|
||||
// 添加一些交互效果
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 表格行悬停效果
|
||||
const tableRows = document.querySelectorAll('tbody tr');
|
||||
tableRows.forEach(row => {
|
||||
row.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateX(2px)';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
});
|
||||
row.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateX(0)';
|
||||
});
|
||||
});
|
||||
option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
},
|
||||
formatter: '{b}<br/>价格: {c} 万元/吨'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2024-10', '2024-12', '2025-02', '2025-03', '2025-04'],
|
||||
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
|
||||
axisLabel: { color: '#ccc' }
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元/吨',
|
||||
axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.3)' } },
|
||||
axisLabel: { color: '#ccc' },
|
||||
splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.1)' } }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '双季戊四醇价格',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: 'rgb(0, 221, 255)' },
|
||||
{ offset: 1, color: 'rgb(77, 119, 255)' }
|
||||
]),
|
||||
shadowColor: 'rgba(0, 221, 255, 0.5)',
|
||||
shadowBlur: 10
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 221, 255, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(77, 119, 255, 0)' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2.5, 3.5, 5.5, 6.7, 7.14]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 卡片进入动画
|
||||
const cards = document.querySelectorAll('.card');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '0';
|
||||
entry.target.style.transform = 'translateY(20px)';
|
||||
setTimeout(() => {
|
||||
entry.target.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}, 100);
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener('resize', myChart.resize);
|
||||
});
|
||||
});
|
||||
|
||||
cards.forEach(card => {
|
||||
observer.observe(card);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
</html>
|
||||
Reference in New Issue
Block a user