556 lines
26 KiB
HTML
556 lines
26 KiB
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>
|
||
<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> |