523 lines
28 KiB
HTML
523 lines
28 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="corporate">
|
||
<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.19/dist/full.min.css" rel="stylesheet">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
.gradient-bg {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
.card-hover {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
|
||
}
|
||
.timeline-dot {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
|
||
70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
|
||
}
|
||
.stock-table {
|
||
font-size: 0.9rem;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.stock-table {
|
||
font-size: 0.8rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-base-200">
|
||
<!-- 头部导航 -->
|
||
<div class="navbar bg-base-100 shadow-lg sticky top-0 z-50">
|
||
<div class="flex-1">
|
||
<a class="btn btn-ghost text-xl">⚡ 毫秒用算概念板</a>
|
||
</div>
|
||
<div class="flex-none">
|
||
<div class="badge badge-primary badge-lg">2025.10.16 工信部专项行动</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 英雄区域 -->
|
||
<div class="hero min-h-[40vh] gradient-bg text-white">
|
||
<div class="hero-content text-center">
|
||
<div>
|
||
<h1 class="text-5xl font-bold mb-4">毫秒用算</h1>
|
||
<p class="text-xl mb-4">算力如电力，即插即用的新时代</p>
|
||
<div class="flex justify-center gap-4 flex-wrap">
|
||
<div class="stat bg-white/20 rounded-box">
|
||
<div class="stat-title text-white/80">目标时延</div>
|
||
<div class="stat-value text-white"><1ms</div>
|
||
</div>
|
||
<div class="stat bg-white/20 rounded-box">
|
||
<div class="stat-title text-white/80">覆盖目标</div>
|
||
<div class="stat-value text-white">70%</div>
|
||
</div>
|
||
<div class="stat bg-white/20 rounded-box">
|
||
<div class="stat-title text-white/80">市场规模</div>
|
||
<div class="stat-value text-white">万亿级</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心观点 -->
|
||
<div class="container mx-auto px-4 py-8">
|
||
<div class="card bg-base-100 shadow-xl mb-8">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-2xl mb-4">
|
||
<span class="badge badge-accent badge-lg">核心观点</span>
|
||
</h2>
|
||
<div class="alert alert-info">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||
<span>"毫秒用算"概念正处于<strong>政策强力驱动的产业化加速期</strong>，其核心是通过低时延网络基础设施建设，解决算力调度的"最后一公里"问题。预计2025-2027年将是基础设施建设高峰期。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 发展时间轴 -->
|
||
<div class="card bg-base-100 shadow-xl mb-8">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-2xl mb-6">发展时间轴</h2>
|
||
<ul class="timeline timeline-vertical lg:timeline-horizontal">
|
||
<li>
|
||
<div class="timeline-start timeline-box">2023年6月<br/>存算一体技术路演</div>
|
||
<div class="timeline-middle">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
|
||
</div>
|
||
<hr/>
|
||
</li>
|
||
<li>
|
||
<hr/>
|
||
<div class="timeline-middle">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
|
||
</div>
|
||
<div class="timeline-end timeline-box">2024年3-5月<br/>大湾区实现3-10ms时延</div>
|
||
<hr/>
|
||
</li>
|
||
<li>
|
||
<hr/>
|
||
<div class="timeline-start timeline-box">2024年9月<br/>湖北省5ms目标</div>
|
||
<div class="timeline-middle">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
|
||
</div>
|
||
<hr/>
|
||
</li>
|
||
<li>
|
||
<hr/>
|
||
<div class="timeline-middle timeline-dot">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-primary"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
|
||
</div>
|
||
<div class="timeline-end timeline-box bg-primary text-white">2025年10月16日<br/><strong>工信部正式发布专项行动</strong></div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 三大预期差 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
||
<div class="card bg-base-100 shadow-xl card-hover">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-lg">技术路径预期差</h3>
|
||
<p class="text-sm">市场关注光纤光缆，但<span class="text-primary font-bold">卫星互联网</span>可能成为破局者</p>
|
||
<div class="badge badge-outline">星链时延<20ms</div>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-base-100 shadow-xl card-hover">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-lg">商业模式预期差</h3>
|
||
<p class="text-sm">市场认为运营商主导，但<span class="text-primary font-bold">混合模式</span>可能成为主流</p>
|
||
<div class="badge badge-outline">运营商+政府+算力商</div>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-base-100 shadow-xl card-hover">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-lg">受益环节预期差</h3>
|
||
<p class="text-sm">市场聚焦硬件，忽视<span class="text-primary font-bold">软件调度平台</span>价值</p>
|
||
<div class="badge badge-outline">隐形冠军机会</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产业链图谱 -->
|
||
<div class="card bg-base-100 shadow-xl mb-8">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-2xl mb-4">产业链图谱</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="card bg-primary/10 border-2 border-primary">
|
||
<div class="card-body">
|
||
<h3 class="font-bold text-primary mb-2">上游：算力基础设施</h3>
|
||
<div class="space-y-2">
|
||
<div class="badge badge-ghost">服务器：中科曙光、紫光股份</div>
|
||
<div class="badge badge-ghost">IDC：润泽科技(800台H系列)</div>
|
||
<div class="badge badge-ghost">芯片：华为昇腾(80-90%份额)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-secondary/10 border-2 border-secondary">
|
||
<div class="card-body">
|
||
<h3 class="font-bold text-secondary mb-2">中游：网络连接层</h3>
|
||
<div class="space-y-2">
|
||
<div class="badge badge-ghost">光模块：中际旭创、天孚通信</div>
|
||
<div class="badge badge-ghost">交换机：紫光股份、锐捷网络</div>
|
||
<div class="badge badge-ghost">光纤：长飞光纤、亨通光电</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-accent/10 border-2 border-accent">
|
||
<div class="card-body">
|
||
<h3 class="font-bold text-accent mb-2">下游：调度与应用</h3>
|
||
<div class="space-y-2">
|
||
<div class="badge badge-ghost">调度：思特奇、青云科技</div>
|
||
<div class="badge badge-ghost">运营商：中国电信、中国移动</div>
|
||
<div class="badge badge-ghost">应用：工业互联、智慧医疗</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心股票池 -->
|
||
<div class="card bg-base-100 shadow-xl mb-8">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-2xl mb-4">
|
||
<span class="badge badge-success badge-lg">核心股票池</span>
|
||
<span class="text-sm text-gray-500 ml-2">共72只概念股</span>
|
||
</h2>
|
||
|
||
<!-- 分类标签 -->
|
||
<div class="tabs tabs-boxed mb-4">
|
||
<a class="tab tab-active" onclick="filterStocks('all')">全部</a>
|
||
<a class="tab" onclick="filterStocks('计算')">计算</a>
|
||
<a class="tab" onclick="filterStocks('连接')">连接</a>
|
||
<a class="tab" onclick="filterStocks('调度')">调度</a>
|
||
</div>
|
||
|
||
<!-- 股票表格 -->
|
||
<div class="overflow-x-auto">
|
||
<table class="table table-zebra stock-table w-full">
|
||
<thead>
|
||
<tr class="bg-base-300">
|
||
<th>股票代码</th>
|
||
<th>所属分类</th>
|
||
<th>细分领域</th>
|
||
<th>入选理由</th>
|
||
<th>推荐等级</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="stockTableBody">
|
||
<!-- 重点推荐 -->
|
||
<tr class="hover" data-category="连接">
|
||
<td class="font-bold text-primary">中际旭创</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>光模块</td>
|
||
<td>800G升级周期龙头</td>
|
||
<td>⭐⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td class="font-bold text-primary">紫光股份</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>服务器/交换机</td>
|
||
<td>全产业链布局</td>
|
||
<td>⭐⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="调度">
|
||
<td class="font-bold text-primary">思特奇</td>
|
||
<td><span class="badge badge-accent">调度</span></td>
|
||
<td>调度平台</td>
|
||
<td>算力操作系统潜力股</td>
|
||
<td>⭐⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td class="font-bold text-primary">润泽科技</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>其他IDC</td>
|
||
<td>万卡级算力领先</td>
|
||
<td>⭐⭐⭐⭐⭐</td>
|
||
</tr>
|
||
|
||
<!-- 计算类 -->
|
||
<tr class="hover" data-category="计算">
|
||
<td>中科曙光</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>服务器</td>
|
||
<td>国产服务器龙头</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td>中国长城</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>服务器</td>
|
||
<td>信创服务器</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td>神州数码</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>服务器</td>
|
||
<td>IT分销龙头</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td>中国电信</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>中央云</td>
|
||
<td>大湾区3ms时延领先</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td>中国移动</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>中央云</td>
|
||
<td>运营商龙头</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td>光环新网</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>第三方运营</td>
|
||
<td>北京区域IDC龙头</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td>宝信软件</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>第三方运营</td>
|
||
<td>宝钢旗下IDC</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td>数据港</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>第三方运营/IDC</td>
|
||
<td>定制化数据中心</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
|
||
<!-- 连接类 -->
|
||
<tr class="hover" data-category="连接">
|
||
<td>天孚通信</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>光模块</td>
|
||
<td>光器件平台龙头</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="连接">
|
||
<td>新易盛</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>光模块</td>
|
||
<td>高速光模块受益</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="连接">
|
||
<td>华工科技</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>光模块</td>
|
||
<td>激光+光通信双轮</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="连接">
|
||
<td>光迅科技</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>光模块</td>
|
||
<td>光器件老牌龙头</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="连接">
|
||
<td>锐捷网络</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>交换机</td>
|
||
<td>企业级网络设备</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="连接">
|
||
<td>中兴通讯</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>交换机</td>
|
||
<td>通信设备巨头</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="连接">
|
||
<td>长飞光纤</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>光纤光缆</td>
|
||
<td>光纤光缆龙头</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="连接">
|
||
<td>亨通光电</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>光纤光缆</td>
|
||
<td>海缆+光纤双龙头</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
|
||
<!-- 调度类 -->
|
||
<tr class="hover" data-category="调度">
|
||
<td>青云科技</td>
|
||
<td><span class="badge badge-accent">调度</span></td>
|
||
<td>调度平台</td>
|
||
<td>云原生技术领先</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="调度">
|
||
<td>首都在线</td>
|
||
<td><span class="badge badge-accent">调度</span></td>
|
||
<td>调度平台</td>
|
||
<td>云网融合服务商</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="调度">
|
||
<td>直真科技</td>
|
||
<td><span class="badge badge-accent">调度</span></td>
|
||
<td>调度平台</td>
|
||
<td>网络优化专家</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="调度">
|
||
<td>恒为科技</td>
|
||
<td><span class="badge badge-accent">调度</span></td>
|
||
<td>调度调优</td>
|
||
<td>网络可视化龙头</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
|
||
<!-- 其他重要股票 -->
|
||
<tr class="hover" data-category="计算">
|
||
<td>奥飞数据</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>其他IDC</td>
|
||
<td>华南IDC龙头</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="计算">
|
||
<td>科华数据</td>
|
||
<td><span class="badge badge-primary">计算</span></td>
|
||
<td>其他IDC</td>
|
||
<td>UPS+IDC双轮驱动</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="连接">
|
||
<td>中天科技</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>光纤光缆</td>
|
||
<td>海缆+光纤+储能</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
<tr class="hover" data-category="连接">
|
||
<td>烽火通信</td>
|
||
<td><span class="badge badge-secondary">连接</span></td>
|
||
<td>光纤光缆/服务器</td>
|
||
<td>通信设备综合商</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 投资建议 -->
|
||
<div class="card bg-gradient-to-r from-primary to-secondary text-white shadow-xl mb-8">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-2xl mb-4 text-white">投资建议</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="card bg-white/20">
|
||
<div class="card-body">
|
||
<h3 class="font-bold">短期关注</h3>
|
||
<p class="text-sm">光通信硬件投资机会</p>
|
||
<div class="badge badge-warning">确定性最高</div>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-white/20">
|
||
<div class="card-body">
|
||
<h3 class="font-bold">中期布局</h3>
|
||
<p class="text-sm">算力调度平台</p>
|
||
<div class="badge badge-info">弹性最大</div>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-white/20">
|
||
<div class="card-body">
|
||
<h3 class="font-bold">长期跟踪</h3>
|
||
<p class="text-sm">卫星互联网进展</p>
|
||
<div class="badge badge-success">想象空间大</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 风险提示 -->
|
||
<div class="alert alert-warning shadow-lg mb-8">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
||
<div>
|
||
<h3 class="font-bold">风险提示</h3>
|
||
<ul class="text-sm mt-2 space-y-1">
|
||
<li>• 技术瓶颈：Flash写延迟15毫秒，存储介质成为短板</li>
|
||
<li>• 商业化风险：基础设施投资回收期长达5-10年</li>
|
||
<li>• 政策执行：各地财政实力差异可能导致建设进度不一</li>
|
||
<li>• 国际竞争：英伟达等海外巨头技术领先，国产替代存在差距</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部 -->
|
||
<footer class="footer footer-center p-4 bg-base-300 text-base-content">
|
||
<div>
|
||
<p>© 2025 毫秒用算概念研究 | 数据更新时间：2025.10.16</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// 筛选股票功能
|
||
function filterStocks(category) {
|
||
const rows = document.querySelectorAll('#stockTableBody tr');
|
||
const tabs = document.querySelectorAll('.tab');
|
||
|
||
// 更新标签状态
|
||
tabs.forEach(tab => {
|
||
tab.classList.remove('tab-active');
|
||
if (tab.textContent.includes(category) || (category === 'all' && tab.textContent === '全部')) {
|
||
tab.classList.add('tab-active');
|
||
}
|
||
});
|
||
|
||
// 显示/隐藏行
|
||
rows.forEach(row => {
|
||
if (category === 'all') {
|
||
row.style.display = '';
|
||
} else {
|
||
const rowCategory = row.getAttribute('data-category');
|
||
row.style.display = rowCategory === category ? '' : 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
// 添加滚动动画
|
||
window.addEventListener('scroll', () => {
|
||
const cards = document.querySelectorAll('.card-hover');
|
||
cards.forEach(card => {
|
||
const rect = card.getBoundingClientRect();
|
||
if (rect.top < window.innerHeight && rect.bottom > 0) {
|
||
card.style.opacity = '1';
|
||
card.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|