375 lines
20 KiB
HTML
375 lines
20 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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||
<style>
|
||
:root {
|
||
--primary-color: #2c3e50;
|
||
--secondary-color: #3498db;
|
||
--accent-color: #e74c3c;
|
||
--light-bg: #f8f9fa;
|
||
--card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
body {
|
||
font-family: 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
|
||
background-color: var(--light-bg);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.hero-section {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||
color: white;
|
||
padding: 3rem 0;
|
||
margin-bottom: 2rem;
|
||
border-radius: 0 0 20px 20px;
|
||
}
|
||
|
||
.card {
|
||
border: none;
|
||
border-radius: 12px;
|
||
box-shadow: var(--card-shadow);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.stats-card {
|
||
text-align: center;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.stats-number {
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.filter-btn {
|
||
margin: 0.25rem;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.filter-btn.active {
|
||
background-color: var(--secondary-color);
|
||
color: white;
|
||
}
|
||
|
||
.table-container {
|
||
overflow-x: auto;
|
||
border-radius: 12px;
|
||
box-shadow: var(--card-shadow);
|
||
}
|
||
|
||
table {
|
||
min-width: 100%;
|
||
}
|
||
|
||
th {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
tr:hover {
|
||
background-color: rgba(52, 152, 219, 0.1);
|
||
}
|
||
|
||
.badge-category {
|
||
font-size: 0.75rem;
|
||
padding: 0.4rem 0.8rem;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.market-share {
|
||
font-weight: bold;
|
||
color: var(--accent-color);
|
||
}
|
||
|
||
.footer {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
padding: 2rem 0;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-section {
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
.stats-card {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.filter-btn {
|
||
font-size: 0.8rem;
|
||
padding: 0.3rem 0.8rem;
|
||
}
|
||
|
||
table {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
th, td {
|
||
padding: 0.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Hero Section -->
|
||
<div class="hero-section">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-8">
|
||
<h1 class="display-4 fw-bold mb-3">半导体材料行业股票分析</h1>
|
||
<p class="lead">探索中国半导体材料产业链中的优质企业，把握行业投资机会</p>
|
||
</div>
|
||
<div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
|
||
<i class="bi bi-cpu display-1"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="container mb-5">
|
||
<!-- Stats Section -->
|
||
<div class="row mb-4">
|
||
<div class="col-md-3 col-6">
|
||
<div class="card stats-card">
|
||
<div class="stats-number" id="totalStocks">0</div>
|
||
<div class="text-muted">股票总数</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 col-6">
|
||
<div class="card stats-card">
|
||
<div class="stats-number" id="totalCategories">0</div>
|
||
<div class="text-muted">材料分类</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 col-6">
|
||
<div class="card stats-card">
|
||
<div class="stats-number" id="topCategory">-</div>
|
||
<div class="text-muted">最多分类</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 col-6">
|
||
<div class="card stats-card">
|
||
<div class="stats-number" id="avgMarketShare">-</div>
|
||
<div class="text-muted">平均市占率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filter Section -->
|
||
<div class="card mb-4">
|
||
<div class="card-body">
|
||
<h5 class="card-title mb-3">按材料分类筛选</h5>
|
||
<div id="filterButtons" class="d-flex flex-wrap">
|
||
<!-- Filter buttons will be generated by JavaScript -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table Section -->
|
||
<div class="card">
|
||
<div class="card-body p-0">
|
||
<div class="table-container">
|
||
<table class="table table-hover mb-0" id="stocksTable">
|
||
<thead>
|
||
<tr>
|
||
<th>股票名称</th>
|
||
<th>材料分类</th>
|
||
<th>项目</th>
|
||
<th>市场占有率</th>
|
||
<th>产业链</th>
|
||
<th>信息来源</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tableBody">
|
||
<!-- Table rows will be generated by JavaScript -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h5>半导体材料行业分析</h5>
|
||
<p>数据更新时间：2025年</p>
|
||
</div>
|
||
<div class="col-md-6 text-md-end">
|
||
<p>© 2025 半导体材料行业分析. 保留所有权利.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
// Parse the stock data
|
||
const stockData = [{'半导体材料(250924)': {'0A9F5D8B-A612-4C2A-998C-EE66F8704F68.png': [{'stock': '兴福电子', '分类': '湿电子化学品', '项目': '电子级硫酸产能10万吨/年', '市场占有率': '2023年电子级硫酸国内占有率为31.22%', '产业链': '已供应台积电、中芯国际、长江存储等', 'reason': '公开资料/互动'}, {'stock': '格林达', '分类': '湿电子化学品', '项目': 'TMAH、BOE蚀刻液、铝蚀刻液等湿电子化学品产能', '市场占有率': '2018年显影液国内市场占有率43.95%', 'reason': '互动'}, {'stock': '江化微', '分类': '湿电子化学品', '项目': '高纯湿电子化学品研发', '市场占有率': '2024年市占率4.58%', 'reason': '公开资料/互动'}, {'stock': '晶瑞电材', '分类': '湿电子化学品', '项目': '高纯双氧水、高纯硫酸、高纯氨水等电子材料', '市场占有率': '半导体系列剥离液多年国内市占率第一', 'reason': '互动'}, {'stock': '安集科技', '分类': '湿电子化学品', '项目': '化学机械抛光液、功能性湿电子化学品和电镀液及添加剂', 'reason': '互动'}, {'stock': '上海新阳', '分类': '湿电子化学品', '项目': '集成电路制造用电镀液、清洗液', '市场占有率': '2021年销售额占行业协会统计的工业化学品市场份额不足10%', 'reason': '互动'}, {'stock': '多氟多', '分类': '湿电子化学品', '项目': '3万吨超净高纯湿电子化学品项目', 'reason': '互动'}, {'stock': '新宙邦', '分类': '湿电子化学品', '项目': '半导体级双氧水(G5)、半导体级氨水(G6)金属杂质<1ppb', 'reason': '公开资料'}, {'stock': '路维光电', '分类': '光掩膜版', '项目': '国内唯一一家拥有G11掩膜版生产线', 'reason': '互动'}, {'stock': '聚和材料', '分类': '光掩膜版', '项目': '与韩华股份共同设立SPC', 'reason': '公告'}, {'stock': '清溢光电', '分类': '光掩膜版', '项目': '新型纳米压印半导体制造设备', 'reason': '互动'}, {'stock': '江丰电子', '分类': '溅射靶材', '项目': '超大规模集成电路用高纯金属溅射靶材', '市场占有率': '2024年核心产品超高纯金属靶材在国内12英寸晶圆厂市占率超73%', 'reason': '网传纪要'}, {'stock': '有研新材', '分类': '溅射靶材', '项目': '先进封装用高纯金属及合金溅射靶材', 'reason': '互动'}, {'stock': '阿石创', '分类': '溅射靶材', '项目': '蒸镀材料和溅射靶材', 'reason': '互动'}, {'stock': '鼎龙股份', '分类': '抛光材料', '项目': 'CMP抛光液', '市场占有率': '国内CMP抛光液市占率约23%', 'reason': '网传纪要'}, {'stock': '安集科技', '分类': '抛光材料', '项目': '化学机械抛光液板块', 'reason': '互动'}, {'stock': '沪硅产业', '分类': '硅片', '项目': '300mm半导体硅片量产', '市场占有率': '首家实现300mm半导体硅片量产', 'reason': '公开资料'}, {'stock': '立昂微', '分类': '硅片', '项目': '8英寸硅片', '市场占有率': '8英寸硅片市占率约18%', 'reason': '公开资料'}, {'stock': '合盛硅业', '分类': '硅片', '项目': '工业硅', '市场占有率': '2017年工业硅市占率约18%', 'reason': '互动'}, {'stock': '晶盛机电', '分类': '硅片', '项目': '全自动单晶硅生长炉', '市场占有率': '国产半导体大硅片设备市占率领先', 'reason': '互动'}, {'stock': '三超新材', '分类': '硅片', '项目': '金刚石线、半导体减薄和硅片倒角', 'reason': '互动'}, {'stock': 'TCL中环', '分类': '硅片', '项目': '200GW/2.10生态建设', '市场占有率': '截至2025年一季度末', 'reason': '互动'}, {'stock': '神工股份', '分类': '硅片', '市场占有率': '大直径硅材料市占率从13%-15%提升', 'reason': '互动'}, {'stock': '南大光电', '分类': '光刻胶', '项目': '28nm及以下制程ArF光刻胶', '市场占有率': '2025年上半年销售数据', 'reason': '公开资料'}, {'stock': '彤程新材', '分类': '光刻胶', '项目': '显示面板光刻胶', '市场占有率': '2024年显示面板光刻胶营收达3.30亿元', 'reason': '公开资料'}, {'stock': '华懋科技', '分类': '光刻胶', '项目': '光刻胶业务', 'reason': '互动'}, {'stock': '晶瑞电材', '分类': '光刻胶', '项目': 'KrF光刻胶、g线系列光刻胶', '市场占有率': '紫外宽谱系列光刻胶多年稳居国内市场第一', 'reason': '互动'}, {'stock': '容大感光', '分类': '光刻胶', '项目': 'PCB光刻胶', '市场占有率': '国内市占率约10%', 'reason': '互动'}, {'stock': '上海新阳', '分类': '光刻胶', '项目': '集成电路制造用电镀液、清洗液', '市场占有率': '2021年销售额占行业协会统计的工业化学品市场份额不足10%', 'reason': '互动'}, {'stock': '华特科技', '分类': '电子特气', '项目': '光引气产品', 'reason': '互动'}, {'stock': '华特气体', '分类': '电子特气', '项目': '年产300吨六氟丁二烯', '市场占有率': '2024年末实现55个产品进口替代', 'reason': '公告/研报'}, {'stock': '金宏气体', '分类': '电子特气', '项目': '六氟丁二烯', '市场占有率': '在建产能200吨/年', 'reason': '年报'}, {'stock': '向日葵', '分类': '电子特气', '项目': '半导体电子特气', 'reason': '公告'}, {'stock': '三孚股份', '分类': '电子特气', '项目': '年产500吨电子级二氯二氢硅', 'reason': '互动'}, {'stock': '雅克科技', '分类': '电子特气', '项目': '高纯四氯化硅', '市场占有率': '高纯四氯化硅产能2000吨/年', 'reason': '互动'}, {'stock': '南大光电', '分类': '电子特气', '项目': '三氟化氮', '市场占有率': '产能8300吨/年', 'reason': '互动'}, {'stock': '凯美特气', '分类': '电子特气', '项目': '超纯氖气和氪气', 'reason': '互动'}, {'stock': '和远气体', '分类': '电子特气', '项目': '电子特气产品', 'reason': '互动'}, {'stock': '深南电路', '分类': '封装基板', '项目': 'FC-BGA封装基板', 'reason': '互动'}, {'stock': '兴森科技', '分类': '封装基板', '项目': 'FCBGA封装基板', 'reason': '互动'}, {'stock': '中瓷电子', '分类': '封装基板', '项目': '陶瓷加热盘', 'reason': '调研'}, {'stock': '通富微电', '分类': '封装基板', '项目': 'FCBGA MCM技术', 'reason': '互动'}, {'stock': '和林微纳', '分类': '封装基板', '项目': 'MEMS晶圆测试探针', 'reason': '互动'}, {'stock': '华海诚科', '分类': '环氧塑封料', '项目': '环氧塑封料', '市场占有率': '市占率9.00%', 'reason': '公开资料'}]}}];
|
||
|
||
// Extract stocks data
|
||
let stocks = [];
|
||
const categoryCounts = {};
|
||
let marketShareSum = 0;
|
||
let marketShareCount = 0;
|
||
|
||
// Process the data
|
||
for (const key in stockData[0]) {
|
||
for (const innerKey in stockData[0][key]) {
|
||
stocks = stockData[0][key][innerKey];
|
||
|
||
// Count categories
|
||
stocks.forEach(stock => {
|
||
if (categoryCounts[stock['分类']]) {
|
||
categoryCounts[stock['分类']]++;
|
||
} else {
|
||
categoryCounts[stock['分类']] = 1;
|
||
}
|
||
|
||
// Extract market share percentages
|
||
if (stock['市场占有率']) {
|
||
const match = stock['市场占有率'].match(/(\d+(?:\.\d+)?)%/);
|
||
if (match) {
|
||
marketShareSum += parseFloat(match[1]);
|
||
marketShareCount++;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// Update stats
|
||
document.getElementById('totalStocks').textContent = stocks.length;
|
||
document.getElementById('totalCategories').textContent = Object.keys(categoryCounts).length;
|
||
|
||
// Find the category with most stocks
|
||
let topCategory = '';
|
||
let maxCount = 0;
|
||
for (const category in categoryCounts) {
|
||
if (categoryCounts[category] > maxCount) {
|
||
maxCount = categoryCounts[category];
|
||
topCategory = category;
|
||
}
|
||
}
|
||
document.getElementById('topCategory').textContent = topCategory;
|
||
|
||
// Calculate average market share
|
||
const avgMarketShare = marketShareCount > 0 ? (marketShareSum / marketShareCount).toFixed(1) + '%' : '-';
|
||
document.getElementById('avgMarketShare').textContent = avgMarketShare;
|
||
|
||
// Create filter buttons
|
||
const filterButtonsContainer = document.getElementById('filterButtons');
|
||
|
||
// Add "All" button
|
||
const allButton = document.createElement('button');
|
||
allButton.className = 'btn btn-outline-primary filter-btn active';
|
||
allButton.textContent = '全部';
|
||
allButton.setAttribute('data-category', 'all');
|
||
allButton.addEventListener('click', filterTable);
|
||
filterButtonsContainer.appendChild(allButton);
|
||
|
||
// Add category buttons
|
||
for (const category in categoryCounts) {
|
||
const button = document.createElement('button');
|
||
button.className = 'btn btn-outline-primary filter-btn';
|
||
button.textContent = category;
|
||
button.setAttribute('data-category', category);
|
||
button.addEventListener('click', filterTable);
|
||
filterButtonsContainer.appendChild(button);
|
||
}
|
||
|
||
// Populate table
|
||
const tableBody = document.getElementById('tableBody');
|
||
|
||
stocks.forEach(stock => {
|
||
const row = document.createElement('tr');
|
||
row.setAttribute('data-category', stock['分类']);
|
||
|
||
// Create category badge with different colors
|
||
const categoryColors = {
|
||
'湿电子化学品': 'bg-primary',
|
||
'光掩膜版': 'bg-success',
|
||
'溅射靶材': 'bg-info',
|
||
'抛光材料': 'bg-warning',
|
||
'硅片': 'bg-danger',
|
||
'光刻胶': 'bg-secondary',
|
||
'电子特气': 'bg-dark',
|
||
'封装基板': 'bg-purple',
|
||
'环氧塑封料': 'bg-pink'
|
||
};
|
||
|
||
const categoryColor = categoryColors[stock['分类']] || 'bg-secondary';
|
||
|
||
row.innerHTML = `
|
||
<td><strong>${stock['stock']}</strong></td>
|
||
<td><span class="badge ${categoryColor} badge-category">${stock['分类']}</span></td>
|
||
<td>${stock['项目'] || '-'}</td>
|
||
<td>${stock['市场占有率'] ? `<span class="market-share">${stock['市场占有率']}</span>` : '-'}</td>
|
||
<td>${stock['产业链'] || '-'}</td>
|
||
<td><small>${stock['reason']}</small></td>
|
||
`;
|
||
|
||
tableBody.appendChild(row);
|
||
});
|
||
|
||
// Filter table function
|
||
function filterTable(e) {
|
||
// Update active button
|
||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
e.target.classList.add('active');
|
||
|
||
const selectedCategory = e.target.getAttribute('data-category');
|
||
const rows = document.querySelectorAll('#tableBody tr');
|
||
|
||
rows.forEach(row => {
|
||
if (selectedCategory === 'all' || row.getAttribute('data-category') === selectedCategory) {
|
||
row.style.display = '';
|
||
} else {
|
||
row.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
|
||
这个HTML页面包含了以下特性：
|
||
|
||
1. **响应式设计**：使用Bootstrap框架，确保在移动设备和桌面设备上都能良好显示
|
||
2. **统计信息展示**：页面顶部展示了股票总数、材料分类数量、最多分类和平均市占率等关键指标
|
||
3. **分类筛选功能**：用户可以按材料分类筛选股票数据
|
||
4. **表格展示**：股票数据通过表格清晰呈现，包括股票名称、分类、项目、市场占有率、产业链和信息来源
|
||
5. **视觉设计**：
|
||
- 使用渐变色的hero区域增强视觉吸引力
|
||
- 不同材料分类使用不同颜色的徽章标识
|
||
- 市场占有率数据用红色突出显示
|
||
- 卡片式布局，带有阴影效果和悬停动画
|
||
6. **移动端优化**：
|
||
- 在小屏幕上字体大小和间距会自动调整
|
||
- 筛选按钮会适当缩小以适应屏幕
|
||
- 表格可以在水平方向滚动，但不会收缩窗口
|
||
|
||
页面完全基于提供的股票数据生成，没有使用窗口收缩滚动功能，而是采用了响应式设计来适应不同屏幕尺寸。 |