493 lines
26 KiB
HTML
493 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.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.glass-effect {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.hero-gradient {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.card-hover {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.card-hover:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.timeline-line {
|
||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.pulse-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);
|
||
}
|
||
}
|
||
|
||
.table-container {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.stock-table {
|
||
min-width: 1000px;
|
||
}
|
||
|
||
.badge-custom {
|
||
font-size: 0.75rem;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 9999px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.insight-card {
|
||
border-left: 4px solid;
|
||
border-image: linear-gradient(180deg, #667eea 0%, #764ba2 100%) 1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Hero Section -->
|
||
<div class="hero-gradient text-white">
|
||
<div class="container mx-auto px-4 py-16">
|
||
<div class="flex flex-col lg:flex-row items-center justify-between">
|
||
<div class="lg:w-1/2 mb-8 lg:mb-0">
|
||
<div class="badge badge-warning text-black mb-4">
|
||
<i class="fas fa-fire mr-2"></i>国家战略新兴产业
|
||
</div>
|
||
<h1 class="text-5xl font-bold mb-6">深地经济</h1>
|
||
<p class="text-xl mb-4 text-gray-100">向地球深部要资源、要空间的国家战略</p>
|
||
<p class="text-lg mb-8 text-gray-200">围绕地球深部资源开发、深部空间利用形成的新兴产业链</p>
|
||
<div class="flex flex-wrap gap-4">
|
||
<div class="stat">
|
||
<div class="stat-title text-gray-200">政策催化</div>
|
||
<div class="stat-value text-3xl">"十五五"规划</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-title text-gray-200">核心目标</div>
|
||
<div class="stat-value text-3xl">1000米+</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lg:w-1/2 flex justify-center">
|
||
<div class="relative">
|
||
<div class="w-64 h-64 rounded-full glass-effect flex items-center justify-center">
|
||
<i class="fas fa-mountain text-8xl text-purple-600"></i>
|
||
</div>
|
||
<div class="absolute -top-4 -right-4 w-20 h-20 rounded-full bg-yellow-400 flex items-center justify-center pulse-dot">
|
||
<span class="text-black font-bold text-sm">HOT</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="container mx-auto px-4 py-12">
|
||
<!-- 概念定义 -->
|
||
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
|
||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||
<i class="fas fa-book-open mr-3 text-purple-600"></i>概念定义与背景
|
||
</h2>
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-6 rounded-xl">
|
||
<h3 class="text-xl font-semibold mb-3 text-purple-800">核心定义</h3>
|
||
<p class="text-gray-700">深地经济是围绕地球深部（通常指1000米以深）资源开发、深部空间利用等形成的经济活动及相关产业链的总称。</p>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-6 rounded-xl">
|
||
<h3 class="text-xl font-semibold mb-3 text-blue-800">三大板块</h3>
|
||
<ul class="space-y-2 text-gray-700">
|
||
<li><i class="fas fa-oil-can mr-2 text-blue-600"></i>深地资源开发</li>
|
||
<li><i class="fas fa-building mr-2 text-blue-600"></i>深部空间利用</li>
|
||
<li><i class="fas fa-cogs mr-2 text-blue-600"></i>技术研发与装备制造</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 时间线 -->
|
||
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
|
||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||
<i class="fas fa-clock mr-3 text-purple-600"></i>概念演进时间线
|
||
</h2>
|
||
<div class="relative">
|
||
<div class="timeline-line absolute left-8 top-0 bottom-0 w-1"></div>
|
||
<div class="space-y-8">
|
||
<div class="flex items-center">
|
||
<div class="w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold z-10">
|
||
2024
|
||
</div>
|
||
<div class="ml-6 flex-1 bg-white p-4 rounded-lg shadow">
|
||
<p class="font-semibold">2024年10月</p>
|
||
<p class="text-gray-600">广东省首次提及"深空深海深地"新赛道</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold z-10">
|
||
2025
|
||
</div>
|
||
<div class="ml-6 flex-1 bg-white p-4 rounded-lg shadow">
|
||
<p class="font-semibold">2025年9月</p>
|
||
<p class="text-gray-600">市场热议"深空经济"，营造氛围</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center text-white font-bold z-10 pulse-dot">
|
||
爆发
|
||
</div>
|
||
<div class="ml-6 flex-1 bg-red-50 p-4 rounded-lg shadow border-2 border-red-200">
|
||
<p class="font-semibold text-red-700">2025年10月21日</p>
|
||
<p class="text-gray-700">自然资源部表态，概念正式引爆，多股涨停</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心逻辑 -->
|
||
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
|
||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||
<i class="fas fa-lightbulb mr-3 text-purple-600"></i>核心逻辑分析
|
||
</h2>
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="insight-card p-6 bg-gradient-to-br from-red-50 to-orange-50 rounded-xl">
|
||
<div class="text-4xl mb-4">🎯</div>
|
||
<h3 class="text-xl font-semibold mb-3">战略安全驱动</h3>
|
||
<p class="text-gray-700">应对浅部资源枯竭，降低对外依存度，保障国家能源和资源安全底线</p>
|
||
</div>
|
||
<div class="insight-card p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl">
|
||
<div class="text-4xl mb-4">⚙️</div>
|
||
<h3 class="text-xl font-semibold mb-3">技术国产化</h3>
|
||
<p class="text-gray-700">已攻克钻井装备、破岩工具等核心技术，实现全链条国产化替代</p>
|
||
</div>
|
||
<div class="insight-card p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl">
|
||
<div class="text-4xl mb-4">📈</div>
|
||
<h3 class="text-xl font-semibold mb-3">政策预期强烈</h3>
|
||
<p class="text-gray-700">"十五五"规划纳入预期，顶层设计明确，政策催化持续性强</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产业链图谱 -->
|
||
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
|
||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||
<i class="fas fa-sitemap mr-3 text-purple-600"></i>产业链图谱
|
||
</h2>
|
||
<div class="overflow-x-auto">
|
||
<div class="min-w-[800px]">
|
||
<div class="grid grid-cols-3 gap-4">
|
||
<div class="bg-gradient-to-b from-yellow-100 to-yellow-50 p-6 rounded-xl text-center">
|
||
<h3 class="text-xl font-bold mb-4 text-yellow-800">上游：材料与核心部件</h3>
|
||
<div class="space-y-2">
|
||
<div class="badge badge-warning badge-custom">硬质合金/刀具</div>
|
||
<div class="badge badge-warning badge-custom">特种材料</div>
|
||
<div class="badge badge-warning badge-custom">核心组件</div>
|
||
</div>
|
||
<p class="mt-4 text-sm text-gray-600">代表：中钨高新、恒立钻具</p>
|
||
</div>
|
||
<div class="bg-gradient-to-b from-green-100 to-green-50 p-6 rounded-xl text-center">
|
||
<h3 class="text-xl font-bold mb-4 text-green-800">中游：设备制造</h3>
|
||
<div class="space-y-2">
|
||
<div class="badge badge-success badge-custom">资源开发设备</div>
|
||
<div class="badge badge-success badge-custom">空间利用设备</div>
|
||
<div class="badge badge-success badge-custom">工程装备</div>
|
||
</div>
|
||
<p class="mt-4 text-sm text-gray-600">代表：铁建重工、石化机械</p>
|
||
</div>
|
||
<div class="bg-gradient-to-b from-blue-100 to-blue-50 p-6 rounded-xl text-center">
|
||
<h3 class="text-xl font-bold mb-4 text-blue-800">下游：工程与服务</h3>
|
||
<div class="space-y-2">
|
||
<div class="badge badge-info badge-custom">工程建设</div>
|
||
<div class="badge badge-info badge-custom">勘探服务</div>
|
||
<div class="badge badge-info badge-custom">空间规划</div>
|
||
</div>
|
||
<p class="mt-4 text-sm text-gray-600">代表：中国铁建、深城交</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 股票数据表格 -->
|
||
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
|
||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||
<i class="fas fa-table mr-3 text-purple-600"></i>深地经济概念股全览
|
||
</h2>
|
||
<div class="table-container">
|
||
<table class="stock-table w-full">
|
||
<thead>
|
||
<tr class="bg-gradient-to-r from-purple-600 to-purple-700 text-white">
|
||
<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>
|
||
<th class="px-4 py-3 text-left">核心逻辑</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">神开股份</td>
|
||
<td class="px-4 py-3">神开股份</td>
|
||
<td class="px-4 py-3"><span class="badge badge-warning">油气资源</span></td>
|
||
<td class="px-4 py-3">勘探设备/钻采设备</td>
|
||
<td class="px-4 py-3 text-sm">油气勘探设备龙头，受益深地油气开发</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">石化机械</td>
|
||
<td class="px-4 py-3">石化机械</td>
|
||
<td class="px-4 py-3"><span class="badge badge-warning">油气资源</span></td>
|
||
<td class="px-4 py-3">钻采设备</td>
|
||
<td class="px-4 py-3 text-sm">钻采设备国家队，技术实力雄厚</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">铁建重工</td>
|
||
<td class="px-4 py-3">铁建重工</td>
|
||
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
|
||
<td class="px-4 py-3">隧道设备</td>
|
||
<td class="px-4 py-3 text-sm">TBM隧道掘进机龙头，最受益标的</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">中铁工业</td>
|
||
<td class="px-4 py-3">中铁工业</td>
|
||
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
|
||
<td class="px-4 py-3">隧道设备</td>
|
||
<td class="px-4 py-3 text-sm">盾构机制造龙头，业务协同性强</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">中钨高新</td>
|
||
<td class="px-4 py-3">中钨高新</td>
|
||
<td class="px-4 py-3"><span class="badge badge-warning">地下空间</span></td>
|
||
<td class="px-4 py-3">硬质合金</td>
|
||
<td class="px-4 py-3 text-sm">硬质合金龙头，高弹性标的，空间90%+</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">中国铁建</td>
|
||
<td class="px-4 py-3">中国铁建</td>
|
||
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
|
||
<td class="px-4 py-3">工程建设</td>
|
||
<td class="px-4 py-3 text-sm">深地空间总包商，牵头承担国家任务</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">德石股份</td>
|
||
<td class="px-4 py-3">德石股份</td>
|
||
<td class="px-4 py-3"><span class="badge badge-warning">油气资源</span></td>
|
||
<td class="px-4 py-3">钻采设备</td>
|
||
<td class="px-4 py-3 text-sm">钻采设备制造商，直接受益油气开发</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">恒立钻具</td>
|
||
<td class="px-4 py-3">恒立钻具</td>
|
||
<td class="px-4 py-3"><span class="badge badge-warning">地下空间</span></td>
|
||
<td class="px-4 py-3">硬质合金</td>
|
||
<td class="px-4 py-3 text-sm">工程钻具供应商，小而美细分龙头</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">深城交</td>
|
||
<td class="px-4 py-3">深城交</td>
|
||
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
|
||
<td class="px-4 py-3">空间规划</td>
|
||
<td class="px-4 py-3 text-sm">深圳地下空间规划龙头，区位优势明显</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||
<td class="px-4 py-3 font-medium">中化岩土</td>
|
||
<td class="px-4 py-3">中化岩土</td>
|
||
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
|
||
<td class="px-4 py-3">岩土工程</td>
|
||
<td class="px-4 py-3 text-sm">岩土工程专家，受益地下空间开发</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p class="mt-4 text-sm text-gray-600">
|
||
<i class="fas fa-info-circle mr-2"></i>
|
||
注：以上为部分重点标的，完整列表包含60+家公司
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 投资策略 -->
|
||
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
|
||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||
<i class="fas fa-chess mr-3 text-purple-600"></i>投资策略与建议
|
||
</h2>
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-xl">
|
||
<h3 class="text-xl font-semibold mb-4 text-green-800">
|
||
<i class="fas fa-thumbs-up mr-2"></i>重点关注方向
|
||
</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-600 mt-1 mr-3"></i>
|
||
<div>
|
||
<p class="font-semibold">核心设备商</p>
|
||
<p class="text-sm text-gray-600">铁建重工、石化机械 - 逻辑最纯粹的卖铲人</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-600 mt-1 mr-3"></i>
|
||
<div>
|
||
<p class="font-semibold">高弹性材料</p>
|
||
<p class="text-sm text-gray-600">中钨高新 - 需求侧强弹性，空间90%+</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-600 mt-1 mr-3"></i>
|
||
<div>
|
||
<p class="font-semibold">国家队总包</p>
|
||
<p class="text-sm text-gray-600">中国铁建 - 获取国家级项目能力最强</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-red-50 to-pink-50 p-6 rounded-xl">
|
||
<h3 class="text-xl font-semibold mb-4 text-red-800">
|
||
<i class="fas fa-exclamation-triangle mr-2"></i>风险提示
|
||
</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-times-circle text-red-600 mt-1 mr-3"></i>
|
||
<div>
|
||
<p class="font-semibold">技术风险</p>
|
||
<p class="text-sm text-gray-600">万米深井技术难度被市场低估</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-times-circle text-red-600 mt-1 mr-3"></i>
|
||
<div>
|
||
<p class="font-semibold">商业化风险</p>
|
||
<p class="text-sm text-gray-600">投资巨大，回报周期长</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-times-circle text-red-600 mt-1 mr-3"></i>
|
||
<div>
|
||
<p class="font-semibold">政策波动</p>
|
||
<p class="text-sm text-gray-600">高度依赖"十五五"规划落地力度</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关键跟踪指标 -->
|
||
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
|
||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||
<i class="fas fa-chart-line mr-3 text-purple-600"></i>关键跟踪指标
|
||
</h2>
|
||
<div class="grid md:grid-cols-4 gap-4">
|
||
<div class="bg-white p-4 rounded-lg shadow text-center">
|
||
<i class="fas fa-file-alt text-3xl text-purple-600 mb-3"></i>
|
||
<h4 class="font-semibold mb-2">政策指标</h4>
|
||
<p class="text-sm text-gray-600">"十五五"规划正式文本</p>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow text-center">
|
||
<i class="fas fa-clipboard-list text-3xl text-blue-600 mb-3"></i>
|
||
<h4 class="font-semibold mb-2">订单指标</h4>
|
||
<p class="text-sm text-gray-600">核心公司季度新签订单</p>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow text-center">
|
||
<i class="fas fa-hard-hat text-3xl text-green-600 mb-3"></i>
|
||
<h4 class="font-semibold mb-2">项目指标</h4>
|
||
<p class="text-sm text-gray-600">国家级项目立项开工</p>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow text-center">
|
||
<i class="fas fa-microscope text-3xl text-red-600 mb-3"></i>
|
||
<h4 class="font-semibold mb-2">技术指标</h4>
|
||
<p class="text-sm text-gray-600">关键设备技术突破</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页脚 -->
|
||
<div class="text-center py-8 mt-12">
|
||
<p class="text-gray-600">
|
||
<i class="fas fa-info-circle mr-2"></i>
|
||
本页面基于公开信息和专业分析生成，不构成投资建议。市场有风险，投资需谨慎。
|
||
</p>
|
||
<p class="text-sm text-gray-500 mt-2">
|
||
数据更新时间：2025年10月21日
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 添加滚动动画效果
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -100px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.card-hover').forEach(card => {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(20px)';
|
||
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||
observer.observe(card);
|
||
});
|
||
|
||
// 添加表格行点击高亮效果
|
||
document.querySelectorAll('tbody tr').forEach(row => {
|
||
row.addEventListener('click', function() {
|
||
// 移除其他行的高亮
|
||
document.querySelectorAll('tbody tr').forEach(r => {
|
||
r.classList.remove('bg-purple-50');
|
||
});
|
||
// 添加当前行高亮
|
||
this.classList.add('bg-purple-50');
|
||
});
|
||
});
|
||
|
||
// 添加脉冲动画效果
|
||
document.querySelectorAll('.pulse-dot').forEach(dot => {
|
||
setInterval(() => {
|
||
dot.style.transform = 'scale(1.1)';
|
||
setTimeout(() => {
|
||
dot.style.transform = 'scale(1)';
|
||
}, 500);
|
||
}, 2000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|