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

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 17:38:54 +08:00
parent 0e32076e71
commit cb4c51a958
65 changed files with 39193 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

556
public/htmls/氟制冷剂.html Normal file
View File

@@ -0,0 +1,556 @@
<!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.24/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-item {
position: relative;
padding-left: 40px;
margin-bottom: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: -30px;
width: 2px;
background: linear-gradient(180deg, #667eea, #764ba2);
}
.timeline-item:last-child::before {
display: none;
}
.timeline-dot {
position: absolute;
left: -6px;
top: 5px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #667eea;
border: 3px solid white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
.stock-table {
font-size: 0.875rem;
}
.stock-table th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-weight: 600;
position: sticky;
top: 0;
z-index: 10;
}
.stock-table tr:hover {
background-color: rgba(102, 126, 234, 0.05);
transition: all 0.3s ease;
}
.highlight-cell {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
font-weight: 600;
}
.profit-badge {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.875rem;
}
.industry-card {
transition: all 0.3s ease;
border: 1px solid rgba(102, 126, 234, 0.1);
}
.industry-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
}
.chart-bar {
transition: all 0.5s ease;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeInUp 0.6s ease-out;
}
.mobile-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-scroll::-webkit-scrollbar {
height: 4px;
}
.mobile-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.mobile-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 2px;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<div class="gradient-bg text-white py-16 px-4">
<div class="container mx-auto max-w-7xl">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="mb-6 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in">
<i class="fas fa-snowflake mr-3"></i>氟制冷剂
</h1>
<p class="text-xl opacity-90">政策驱动的超级景气周期投资机会</p>
</div>
<div class="text-center md:text-right">
<div class="profit-badge mb-2">
<i class="fas fa-chart-line mr-2"></i>高景气度确认
</div>
<p class="text-sm opacity-80">2025年业绩爆发期</p>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto max-w-7xl px-4 py-8">
<!-- 核心观点摘要 -->
<div class="glass-effect rounded-2xl p-6 mb-8 animate-fade-in">
<h2 class="text-2xl font-bold mb-4 text-gray-800">
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i>核心观点摘要
</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="industry-card bg-white rounded-xl p-4">
<div class="text-purple-600 text-3xl mb-2">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="font-semibold text-gray-800 mb-2">政策驱动</h3>
<p class="text-sm text-gray-600">配额制度重塑供给格局，从无序竞争转向寡头垄断</p>
</div>
<div class="industry-card bg-white rounded-xl p-4">
<div class="text-purple-600 text-3xl mb-2">
<i class="fas fa-rocket"></i>
</div>
<h3 class="font-semibold text-gray-800 mb-2">业绩兑现</h3>
<p class="text-sm text-gray-600">三美股份前三季度预增175%-198%，行业进入利润释放期</p>
</div>
<div class="industry-card bg-white rounded-xl p-4">
<div class="text-purple-600 text-3xl mb-2">
<i class="fas fa-chart-area"></i>
</div>
<h3 class="font-semibold text-gray-800 mb-2">持续景气</h3>
<p class="text-sm text-gray-600">供给刚性约束+需求稳健增长，景气周期有望持续数年</p>
</div>
</div>
</div>
<!-- 事件时间轴 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-history text-blue-500 mr-2"></i>催化事件时间轴
</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<h3 class="font-semibold text-gray-800">2020-2022年（基线年）</h3>
<p class="text-sm text-gray-600 mt-1">企业"抢份额"大战，供过于求导致价格低迷</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<h3 class="font-semibold text-gray-800">2023年下半年（政策拐点）</h3>
<p class="text-sm text-gray-600 mt-1">配额核算方案明确，价格触底回升</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<h3 class="font-semibold text-gray-800">2024年初（景气起点）</h3>
<p class="text-sm text-gray-600 mt-1">配额制度正式实施，价格进入单边上涨通道</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<h3 class="font-semibold text-gray-800">2025年至今（业绩爆发）</h3>
<p class="text-sm text-gray-600 mt-1">龙头业绩创同期新高，进入利润释放"甜蜜期"</p>
</div>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-network-wired text-green-500 mr-2"></i>产业链图谱
</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-4">
<h3 class="font-semibold text-gray-800 mb-3">
<i class="fas fa-mountain text-blue-600 mr-2"></i>上游
</h3>
<div class="space-y-2">
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">萤石</span>
<span class="text-xs text-gray-500">金石资源、永和股份</span>
</div>
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">氢氟酸</span>
<span class="text-xs text-gray-500">多家企业</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4">
<h3 class="font-semibold text-gray-800 mb-3">
<i class="fas fa-industry text-purple-600 mr-2"></i>中游
</h3>
<div class="space-y-2">
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">氟制冷剂</span>
<span class="text-xs text-gray-500">巨化、三美、东岳等</span>
</div>
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">配额集中度</span>
<span class="text-xs text-red-500">CR3 > 60%</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-blue-50 rounded-xl p-4">
<h3 class="font-semibold text-gray-800 mb-3">
<i class="fas fa-shopping-cart text-green-600 mr-2"></i>下游
</h3>
<div class="space-y-2">
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">空调</span>
<span class="text-xs text-gray-500">最大需求方</span>
</div>
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">汽车/冷链</span>
<span class="text-xs text-gray-500">快速增长</span>
</div>
</div>
</div>
</div>
</div>
<!-- 股票数据表格 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-table text-indigo-500 mr-2"></i>核心公司配额分布
</h2>
<!-- R32空调制冷剂 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-700">
<i class="fas fa-snowflake text-blue-400 mr-2"></i>R32 空调制冷剂
</h3>
<div class="mobile-scroll">
<table class="stock-table w-full bg-white rounded-lg overflow-hidden">
<thead>
<tr>
<th class="px-4 py-3 text-left">公司</th>
<th class="px-4 py-3 text-left">2025年配额</th>
<th class="px-4 py-3 text-left">占比</th>
<th class="px-4 py-3 text-left">核心竞争力</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 font-semibold">巨化股份</td>
<td class="px-4 py-3">12.8万吨</td>
<td class="px-4 py-3 highlight-cell">45.8%</td>
<td class="px-4 py-3 text-sm">绝对龙头，定价权</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">东岳集团</td>
<td class="px-4 py-3">5.6万吨</td>
<td class="px-4 py-3">20.1%</td>
<td class="px-4 py-3 text-sm">第二大生产商</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">三美股份</td>
<td class="px-4 py-3">3.3万吨</td>
<td class="px-4 py-3">11.8%</td>
<td class="px-4 py-3 text-sm">盈利弹性强</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">东阳光</td>
<td class="px-4 py-3">-</td>
<td class="px-4 py-3">10.3%</td>
<td class="px-4 py-3 text-sm">稳定供应</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- R125氟制冷剂 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-700">
<i class="fas fa-snowflake text-purple-400 mr-2"></i>R125 混配制冷剂
</h3>
<div class="mobile-scroll">
<table class="stock-table w-full bg-white rounded-lg overflow-hidden">
<thead>
<tr>
<th class="px-4 py-3 text-left">公司</th>
<th class="px-4 py-3 text-left">2025年配额</th>
<th class="px-4 py-3 text-left">占比</th>
<th class="px-4 py-3 text-left">市场地位</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 font-semibold">巨化股份</td>
<td class="px-4 py-3">6.4万吨</td>
<td class="px-4 py-3 highlight-cell">38.4%</td>
<td class="px-4 py-3 text-sm">最大生产商</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">三美股份</td>
<td class="px-4 py-3">3.1万吨</td>
<td class="px-4 py-3">18.4%</td>
<td class="px-4 py-3 text-sm">成本优势</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">昊华科技</td>
<td class="px-4 py-3">2.9万吨</td>
<td class="px-4 py-3">17.4%</td>
<td class="px-4 py-3 text-sm">中化系整合</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- R134a汽车制冷剂 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-700">
<i class="fas fa-snowflake text-green-400 mr-2"></i>R134a 汽车制冷剂
</h3>
<div class="mobile-scroll">
<table class="stock-table w-full bg-white rounded-lg overflow-hidden">
<thead>
<tr>
<th class="px-4 py-3 text-left">公司</th>
<th class="px-4 py-3 text-left">2025年配额</th>
<th class="px-4 py-3 text-left">占比</th>
<th class="px-4 py-3 text-left">应用领域</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 font-semibold">昊华科技</td>
<td class="px-4 py-3">5.4万吨</td>
<td class="px-4 py-3 highlight-cell">26%</td>
<td class="px-4 py-3 text-sm">汽车空调主导</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">巨化股份</td>
<td class="px-4 py-3">7.7万吨</td>
<td class="px-4 py-3">36.7%</td>
<td class="px-4 py-3 text-sm">多元化应用</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">三美股份</td>
<td class="px-4 py-3">5万吨</td>
<td class="px-4 py-3">24%</td>
<td class="px-4 py-3 text-sm">汽车主力</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 萤石上游 -->
<div>
<h3 class="text-lg font-semibold mb-3 text-gray-700">
<i class="fas fa-gem text-orange-400 mr-2"></i>萤石上游资源
</h3>
<div class="mobile-scroll">
<table class="stock-table w-full bg-white rounded-lg overflow-hidden">
<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>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 font-semibold">金石资源</td>
<td class="px-4 py-3">2700万吨</td>
<td class="px-4 py-3 highlight-cell">A股第一</td>
<td class="px-4 py-3 text-sm">卖铲人角色</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">永和股份</td>
<td class="px-4 py-3">485.27万吨</td>
<td class="px-4 py-3">A股第二</td>
<td class="px-4 py-3 text-sm">一体化布局</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 风险提示 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-4 text-gray-800">
<i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>潜在风险与挑战
</h2>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-red-50 border-l-4 border-red-400 p-4 rounded">
<h3 class="font-semibold text-gray-800 mb-2">
<i class="fas fa-microchip text-red-600 mr-2"></i>技术风险
</h3>
<p class="text-sm text-gray-600">四代制冷剂替代威胁：当三代价格达9.6万元/吨时，替代进程将加速</p>
</div>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
<h3 class="font-semibold text-gray-800 mb-2">
<i class="fas fa-chart-line text-yellow-600 mr-2"></i>市场风险
</h3>
<p class="text-sm text-gray-600">下游需求不及预期：房地产低迷影响空调需求，汽车销量波动</p>
</div>
<div class="bg-orange-50 border-l-4 border-orange-400 p-4 rounded">
<h3 class="font-semibold text-gray-800 mb-2">
<i class="fas fa-balance-scale text-orange-600 mr-2"></i>政策风险
</h3>
<p class="text-sm text-gray-600">配额政策调整：提前或超额发放配额将打破供给刚性</p>
</div>
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded">
<h3 class="font-semibold text-gray-800 mb-2">
<i class="fas fa-globe text-blue-600 mr-2"></i>竞争风险
</h3>
<p class="text-sm text-gray-600">海外新兴产能：印度、中东等地区新建项目长期可能冲击出口</p>
</div>
</div>
</div>
<!-- 投资建议 -->
<div class="glass-effect rounded-2xl p-6">
<h2 class="text-2xl font-bold mb-4 text-gray-800">
<i class="fas fa-coins text-yellow-500 mr-2"></i>投资启示
</h2>
<div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-6">
<p class="text-lg font-semibold text-gray-800 mb-4">综合结论：</p>
<p class="text-gray-700 mb-4">氟制冷剂概念已完全脱离主题炒作，进入基本面业绩驱动的价值投资阶段。这是一个具备清晰长逻辑、高竞争壁垒和强劲盈利兑现能力的"硬资产"板块。</p>
<div class="grid md:grid-cols-2 gap-4 mt-6">
<div class="bg-white rounded-lg p-4">
<h3 class="font-semibold text-purple-600 mb-2">
<i class="fas fa-star mr-2"></i>核心配置
</h3>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 巨化股份：R32绝对龙头，配额占比45.8%</li>
<li>• 三美股份：盈利弹性强，业绩兑现能力突出</li>
<li>• 昊华科技：中化系整合，R134a优势明显</li>
</ul>
</div>
<div class="bg-white rounded-lg p-4">
<h3 class="font-semibold text-green-600 mb-2">
<i class="fas fa-chart-line mr-2"></i>关键跟踪指标
</h3>
<ul class="text-sm text-gray-600 space-y-1">
<li>• R32/R125/R134a周度价格</li>
<li>• 龙头公司季度毛利率和净利润</li>
<li>• 2026年配额削减方案</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="gradient-bg text-white py-8 mt-12">
<div class="container mx-auto max-w-7xl px-4 text-center">
<p class="text-sm opacity-80">© 2025 氟制冷剂行业分析 | 数据来源：公开信息整理</p>
<p class="text-xs opacity-60 mt-2">投资有风险，入市需谨慎</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.classList.add('animate-fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.industry-card, .timeline-item').forEach(el => {
observer.observe(el);
});
// 表格行点击效果
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('click', function() {
this.style.transform = 'scale(1.02)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 200);
});
});
</script>
</body>
</html>