Files
vf_react/public/htmls/电子特气六氟化钨.html
2025-11-13 17:38:54 +08:00

793 lines
29 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>电子特气六氟化钨(WF6)概念深度分析</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
body {
background: #f5f5f5;
line-height: 1.6;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.header-title h1 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.header-title p {
opacity: 0.9;
}
.header-stats {
display: flex;
gap: 2rem;
}
.stat-item {
text-align: center;
}
.stat-item .value {
font-size: 1.5rem;
font-weight: bold;
}
.stat-item .label {
font-size: 0.875rem;
opacity: 0.9;
}
.tabs {
background: white;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.tabs-container {
display: flex;
gap: 0.5rem;
padding: 1rem;
overflow-x: auto;
}
.tab-btn {
padding: 0.75rem 1.5rem;
border: none;
background: #f3f4f6;
cursor: pointer;
border-radius: 0.5rem;
font-size: 1rem;
white-space: nowrap;
transition: all 0.3s;
}
.tab-btn:hover {
background: #e5e7eb;
}
.tab-btn.active {
background: #4f46e5;
color: white;
}
.main-content {
padding: 2rem 0;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.card {
background: white;
border-radius: 0.75rem;
padding: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #1f2937;
}
.grid {
display: grid;
gap: 1.5rem;
}
.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-4 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.metric-card {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
padding: 1.5rem;
border-radius: 0.5rem;
border-left: 4px solid #3b82f6;
}
.metric-card .title {
color: #64748b;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.metric-card .value {
font-size: 2rem;
font-weight: bold;
color: #3b82f6;
margin-bottom: 0.25rem;
}
.metric-card .desc {
color: #64748b;
font-size: 0.875rem;
}
.timeline-item {
position: relative;
padding-left: 2rem;
padding-bottom: 2rem;
}
.timeline-item:before {
content: '';
position: absolute;
left: 0.375rem;
top: 0.375rem;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #4f46e5;
}
.timeline-item:after {
content: '';
position: absolute;
left: 0.625rem;
top: 1rem;
width: 2px;
height: calc(100% - 1rem);
background: #e5e7eb;
}
.timeline-item:last-child:after {
display: none;
}
.timeline-content {
background: #fef2f2;
border-left: 4px solid #ef4444;
padding: 1rem;
border-radius: 0.5rem;
}
.timeline-content.warning {
background: #fefce8;
border-left-color: #eab308;
}
.timeline-content.success {
background: #f0fdf4;
border-left-color: #22c55e;
}
.timeline-date {
display: inline-block;
background: #ef4444;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.75rem;
margin-bottom: 0.5rem;
}
.timeline-content.warning .timeline-date {
background: #eab308;
}
.timeline-content.success .timeline-date {
background: #22c55e;
}
.timeline-content h3 {
color: #991b1b;
margin-bottom: 0.5rem;
}
.timeline-content.warning h3 {
color: #854d0e;
}
.timeline-content.success h3 {
color: #166534;
}
.info-box {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid #bae6fd;
}
.info-box h3 {
color: #0369a1;
margin-bottom: 1rem;
}
.info-box ul {
list-style: none;
}
.info-box li {
padding: 0.5rem 0;
color: #334155;
}
.info-box li:before {
content: '• ';
color: #3b82f6;
font-weight: bold;
margin-right: 0.5rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
th {
background: #f9fafb;
font-weight: 600;
color: #374151;
}
tr:hover {
background: #f9fafb;
}
.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
}
.badge-blue {
background: #dbeafe;
color: #1e40af;
}
.badge-yellow {
background: #fef3c7;
color: #92400e;
}
.badge-green {
background: #d1fae5;
color: #065f46;
}
.filter-btns {
margin-bottom: 1rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.5rem 1rem;
border: none;
background: #e5e7eb;
cursor: pointer;
border-radius: 0.375rem;
font-size: 0.875rem;
}
.filter-btn.active {
background: #4f46e5;
color: white;
}
.footer {
background: #1f2937;
color: white;
text-align: center;
padding: 2rem 1rem;
margin-top: 3rem;
}
.footer p {
margin: 0.5rem 0;
}
.highlight {
color: #4f46e5;
font-weight: 600;
}
@media (max-width: 768px) {
.header-stats {
display: none;
}
.header-title h1 {
font-size: 1.5rem;
}
table {
font-size: 0.875rem;
}
th, td {
padding: 0.5rem;
}
}
</style>
</head>
<body>
<!-- Header -->
<div class="header">
<div class="container">
<div class="header-content">
<div class="header-title">
<h1>⚛️ 电子特气六氟化钨(WF6)</h1>
<p>半导体制造核心材料 · 国产替代先锋</p>
</div>
<div class="header-stats">
<div class="stat-item">
<div class="value">70-90%</div>
<div class="label">韩厂涨幅</div>
</div>
<div class="stat-item">
<div class="value">42.44%</div>
<div class="label">需求CAGR</div>
</div>
<div class="stat-item">
<div class="value">2230吨</div>
<div class="label">中船特气产能</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tabs -->
<div class="tabs">
<div class="container">
<div class="tabs-container">
<button class="tab-btn active" onclick="switchTab('overview')">概念概览</button>
<button class="tab-btn" onclick="switchTab('timeline')">事件时间轴</button>
<button class="tab-btn" onclick="switchTab('analysis')">深度分析</button>
<button class="tab-btn" onclick="switchTab('industry')">产业链</button>
<button class="tab-btn" onclick="switchTab('stocks')">核心股票</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<div class="container">
<!-- Overview Tab -->
<div id="overview" class="tab-content active">
<div class="card">
<h2>📊 核心观点摘要</h2>
<div class="grid grid-2">
<div class="info-box">
<h3>市场状态</h3>
<p>六氟化钨概念正处于<span class="highlight">供需错配与涨价周期的起点</span>,核心驱动力来自上游成本推动、供应收缩和下游需求爆发。</p>
</div>
<div class="info-box">
<h3>关键催化剂</h3>
<ul>
<li>韩国厂商2026年执行新价格(+70%-90%)</li>
<li>中船特气2026年目标产能2000吨</li>
<li>三星、SK海力士HBM扩产计划</li>
</ul>
</div>
</div>
</div>
<div class="card">
<h2>📈 关键指标</h2>
<div class="grid grid-4">
<div class="metric-card">
<div class="title">全球市场份额</div>
<div class="value">35%</div>
<div class="desc">中国厂商占比</div>
</div>
<div class="metric-card">
<div class="title">国产化率</div>
<div class="value">12%</div>
<div class="desc">当前市场替代率</div>
</div>
<div class="metric-card">
<div class="title">2025年需求</div>
<div class="value">4500吨</div>
<div class="desc">国内预计需求</div>
</div>
<div class="metric-card">
<div class="title">成本涨幅</div>
<div class="value">100%</div>
<div class="desc">钨粉价格翻倍</div>
</div>
</div>
</div>
</div>
<!-- Timeline Tab -->
<div id="timeline" class="tab-content">
<div class="card">
<h2>⏰ 概念事件时间轴</h2>
<div class="timeline-item">
<div class="timeline-content">
<span class="timeline-date">2025-08-07</span>
<h3>日本关东电化工厂爆炸</h3>
<p>日本关东电化涩川工厂发生爆炸,影响<strong>1400吨WF6产能</strong>,全球供应收紧。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content warning">
<span class="timeline-date">2025-10-23</span>
<h3>韩国厂商宣布涨价</h3>
<p>韩国主要WF6供应商(SK Specialty、厚城等)宣布2026年起将价格上调<strong>70%-90%</strong></p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content success">
<span class="timeline-date">2025-10-28</span>
<h3>中船特气回应涨价预期</h3>
<p>公司可完全覆盖成本,吨净利有望大幅提升;国内钨出口限制赋予厂商<strong>原材料成本优势</strong></p>
</div>
</div>
</div>
</div>
<!-- Analysis Tab -->
<div id="analysis" class="tab-content">
<div class="card">
<h2>🧠 核心逻辑分析</h2>
<div class="grid grid-3">
<div class="info-box">
<h3>⚖️ 供需错配</h3>
<p>海外厂商主导(日韩占80%+),但日本事故导致1400吨产能受阻,韩国厂商计划压缩产能。</p>
<p style="margin-top: 1rem;"><strong>2025年国内需求预计达4500吨</strong></p>
</div>
<div class="info-box">
<h3>💰 成本推动</h3>
<p>钨粉占WF6成本的50%,价格从20万元/吨涨至40万元/吨,直接推高生产成本。</p>
<p style="margin-top: 1rem;"><strong>钨粉价格涨幅:100%</strong></p>
</div>
<div class="info-box">
<h3>🚀 国产替代</h3>
<p>政策驱动下,中船特气、昊华科技等龙头加速突破客户验证壁垒。</p>
<p style="margin-top: 1rem;"><strong>国产化率目标:60%+</strong></p>
</div>
</div>
</div>
<div class="card">
<h2>📊 市场情绪与预期差</h2>
<div class="grid grid-2">
<div>
<h3 style="color: #22c55e; margin-bottom: 1rem;">😊 乐观因素</h3>
<ul style="list-style: none; padding: 0;">
<li style="padding: 0.5rem 0;">✓ 新闻和研报密集发布,市场高度关注韩国涨价和日本事故</li>
<li style="padding: 0.5rem 0;">✓ 半导体先进制程(3nm/5nm)和HBM扩产拉动需求</li>
<li style="padding: 0.5rem 0;">✓ 国内厂商获得原材料成本优势(钨出口限制)</li>
</ul>
</div>
<div>
<h3 style="color: #ef4444; margin-bottom: 1rem;">⚠️ 风险与预期差</h3>
<ul style="list-style: none; padding: 0;">
<li style="padding: 0.5rem 0;">✗ 涨价传导延迟:国内涨价幅度仅50%+,弱于海外70-90%</li>
<li style="padding: 0.5rem 0;">✗ 产能瓶颈:中船特气实际月产仅20.2吨,达产率存疑</li>
<li style="padding: 0.5rem 0;">✗ 技术壁垒:高纯WF6提纯和包装物依赖进口</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Industry Tab -->
<div id="industry" class="tab-content">
<div class="card">
<h2>🗺️ 产业链图谱</h2>
<div class="grid grid-3">
<div class="info-box">
<h3>⛰️ 上游:原材料</h3>
<p>钨粉供应商(国内为主)</p>
<p><strong>成本占比:50%</strong></p>
</div>
<div class="info-box">
<h3>🏭 中游:WF6制造</h3>
<p>中船特气、昊华科技等</p>
<p><strong>技术壁垒:高</strong></p>
</div>
<div class="info-box">
<h3>💻 下游:应用</h3>
<p>半导体晶圆厂、面板厂</p>
<p><strong>工艺:金属薄膜沉积</strong></p>
</div>
</div>
</div>
<div class="card">
<h2>🏆 核心玩家对比</h2>
<table>
<thead>
<tr>
<th>公司</th>
<th>产能/份额</th>
<th>竞争优势</th>
<th>风险点</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>中船特气</strong></td>
<td>全球第一(2230吨)<br>全球覆盖率70.31%</td>
<td>国内市占率65%<br>客户覆盖三星/台积电</td>
<td>产能达产率<br>涨价传导延迟</td>
</tr>
<tr>
<td><strong>昊华科技</strong></td>
<td>600吨<br>在建1300吨</td>
<td>六氟丁二烯全球第一<br>多品类布局</td>
<td>产能规模较小</td>
</tr>
<tr>
<td><strong>广钢气体</strong></td>
<td>产能未公开</td>
<td>电子大宗气体<br>全品类覆盖</td>
<td>WF6业务占比不明确</td>
</tr>
<tr>
<td><strong>华特气体</strong></td>
<td>拟建1000吨</td>
<td>国产替代先行者<br>55个产品替代</td>
<td>在建产能进度不确定</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Stocks Tab -->
<div id="stocks" class="tab-content">
<div class="card">
<h2>📈 核心股票数据</h2>
<div class="filter-btns">
<button class="filter-btn active" onclick="filterStocks('all')">全部</button>
<button class="filter-btn" onclick="filterStocks('三氯化氮')">三氯化氮</button>
<button class="filter-btn" onclick="filterStocks('六氟化钨')">六氟化钨</button>
<button class="filter-btn" onclick="filterStocks('六氟丁二烯')">六氟丁二烯</button>
</div>
<table id="stockTable">
<thead>
<tr>
<th>股票名称</th>
<th>行业</th>
<th>关键指标</th>
<th>市场份额/地位</th>
<th>信息来源</th>
</tr>
</thead>
<tbody>
<tr data-category="三氯化氮">
<td><strong>中船特气</strong></td>
<td><span class="badge badge-blue">三氯化氮</span></td>
<td>产能:18500吨/年</td>
<td>全球覆盖率:65.03%</td>
<td>互动/年报</td>
</tr>
<tr data-category="三氯化氮">
<td><strong>南大光电</strong></td>
<td><span class="badge badge-blue">三氯化氮</span></td>
<td>产能:8300吨/年</td>
<td>-</td>
<td>互动</td>
</tr>
<tr data-category="三氯化氮">
<td><strong>昊华科技</strong></td>
<td><span class="badge badge-blue">三氯化氮</span></td>
<td>产能:5000吨/年<br>在建:6000吨/年</td>
<td>-</td>
<td>年报</td>
</tr>
<tr data-category="六氟化钨">
<td><strong>中船特气</strong></td>
<td><span class="badge badge-yellow">六氟化钨</span></td>
<td>产能:2000吨/年</td>
<td>全球覆盖率:70.31%</td>
<td>年报</td>
</tr>
<tr data-category="六氟化钨">
<td><strong>昊华科技</strong></td>
<td><span class="badge badge-yellow">六氟化钨</span></td>
<td>产能:600吨/年</td>
<td>-</td>
<td>互动</td>
</tr>
<tr data-category="六氟化钨">
<td><strong>中巨芯</strong></td>
<td><span class="badge badge-yellow">六氟化钨</span></td>
<td>产能:600吨/年</td>
<td>-</td>
<td>调研</td>
</tr>
<tr data-category="六氟化钨">
<td><strong>和远气体</strong></td>
<td><span class="badge badge-yellow">六氟化钨</span></td>
<td>在建:500吨/年</td>
<td>-</td>
<td>公告</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>昊华科技</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>产能:1200吨/年</td>
<td>全球第一</td>
<td>年报</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>中船特气</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>产能:200吨/年</td>
<td>-</td>
<td>调研</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>中巨芯</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>建成:175吨/年</td>
<td>-</td>
<td>互动</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>华特气体</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>在建:300吨/年</td>
<td>-</td>
<td>年报</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>金宏气体</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>在建:200吨/年</td>
<td>-</td>
<td>年报</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<h2>💡 投资启示</h2>
<div class="grid grid-2">
<div class="info-box">
<h3>⭐ 投资价值方向</h3>
<ul>
<li><strong>纯度高、产能大的龙头</strong>:中船特气(全球份额第一)</li>
<li><strong>多品类布局的厂商</strong>:昊华科技(六氟化钨+六氟丁二烯)</li>
<li><strong>技术突破的先行者</strong>:华特气体(55个产品替代)</li>
</ul>
</div>
<div class="info-box">
<h3>📊 关键跟踪指标</h3>
<ul>
<li>中船特气WF6月度出货量和吨净利变化</li>
<li>国内晶圆厂(中芯国际)WF6招标价格</li>
<li>钨粉价格走势和出口政策变动</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>© 2025 电子特气六氟化钨概念分析</p>
<p style="opacity: 0.7;">数据来源:公开新闻、路演记录、研报 | 仅供投资参考</p>
</div>
<script>
// Tab switching
function switchTab(tabName) {
// Hide all tabs
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// Remove active class from all buttons
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
// Show selected tab
document.getElementById(tabName).classList.add('active');
// Add active class to clicked button
event.target.classList.add('active');
}
// Stock filtering
function filterStocks(category) {
const rows = document.querySelectorAll('#stockTable tbody tr');
const buttons = document.querySelectorAll('.filter-btn');
// Update button styles
buttons.forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
// Filter rows
rows.forEach(row => {
if (category === 'all' || row.getAttribute('data-category') === category) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
}
console.log('Page loaded successfully!');
</script>
</body>
</html>