570 lines
25 KiB
HTML
570 lines
25 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<title>政策驱动分红预期 - 投资洞察报告</title>
|
||
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
|
||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', 'Inter', sans-serif;
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.gradient-bg {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.card-shadow {
|
||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.timeline-dot {
|
||
width: 16px;
|
||
height: 16px;
|
||
background-color: #667eea;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: -8px;
|
||
top: 5px;
|
||
}
|
||
|
||
.timeline-line {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 21px;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background-color: #e2e8f0;
|
||
}
|
||
|
||
.highlight-text {
|
||
background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
font-weight: 700;
|
||
}
|
||
|
||
#tsparticles {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.progress-bar {
|
||
transition: width 1s ease-in-out;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.card-container {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.table-container {
|
||
overflow-x: auto;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<div id="tsparticles"></div>
|
||
|
||
<div class="container mx-auto px-4 py-8 max-w-7xl">
|
||
<!-- 标题部分 -->
|
||
<div class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">政策驱动分红预期</h1>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">从"强制约束"到"鼓励引导+市值管理"，2025年成为政策红利兑现元年</p>
|
||
</div>
|
||
|
||
<!-- 概念概述卡片 -->
|
||
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-purple-100 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-chart-line text-purple-600 text-2xl"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold text-gray-800">概念概述</h2>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-4">
|
||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-lg">
|
||
<h3 class="font-semibold text-gray-700 mb-2">阶段判断</h3>
|
||
<p class="text-gray-600">政策驱动分红预期已进入"鼓励引导+市值管理"阶段，<span class="highlight-text">2025年成为政策红利兑现元年</span></p>
|
||
</div>
|
||
<div class="bg-gradient-to-br from-green-50 to-emerald-50 p-4 rounded-lg">
|
||
<h3 class="font-semibold text-gray-700 mb-2">核心驱动力</h3>
|
||
<p class="text-gray-600">政策+资金+盈利三重共振，高股息资产从防御工具升级为<span class="highlight-text">盈利增长载体</span></p>
|
||
</div>
|
||
<div class="bg-gradient-to-br from-amber-50 to-orange-50 p-4 rounded-lg">
|
||
<h3 class="font-semibold text-gray-700 mb-2">未来潜力</h3>
|
||
<p class="text-gray-600">低估值板块分红比例有望从30%提升至50%+，估值修复空间<span class="highlight-text">20%-40%</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 时间轴部分 -->
|
||
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
|
||
<div class="flex items-center mb-6">
|
||
<div class="bg-indigo-100 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-history text-indigo-600 text-2xl"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold text-gray-800">政策时间轴</h2>
|
||
</div>
|
||
<div class="relative pl-8">
|
||
<div class="timeline-line"></div>
|
||
|
||
<div class="relative mb-6">
|
||
<div class="timeline-dot"></div>
|
||
<div class="ml-4">
|
||
<h3 class="font-bold text-lg text-gray-800">2023年8月</h3>
|
||
<p class="text-gray-600">证监会提出"强化分红导向"，要求提升分红稳定性、持续增长性和可预期性</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative mb-6">
|
||
<div class="timeline-dot"></div>
|
||
<div class="ml-4">
|
||
<h3 class="font-bold text-lg text-gray-800">2024年1月</h3>
|
||
<p class="text-gray-600">国资委将市值管理纳入央企考核，明确鼓励现金分红</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative mb-6">
|
||
<div class="timeline-dot"></div>
|
||
<div class="ml-4">
|
||
<h3 class="font-bold text-lg text-gray-800">2024年4月</h3>
|
||
<p class="text-gray-600">国务院"新国九条"强化分红监管，推动上市公司提升投资价值</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative mb-6">
|
||
<div class="timeline-dot"></div>
|
||
<div class="ml-4">
|
||
<h3 class="font-bold text-lg text-gray-800">2024年12月</h3>
|
||
<p class="text-gray-600">中央经济工作会议定调"稳经济+防风险"，政策预期博弈下红利资产占优</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<div class="timeline-dot bg-green-500"></div>
|
||
<div class="ml-4">
|
||
<h3 class="font-bold text-lg text-gray-800">2025年6月</h3>
|
||
<p class="text-gray-600">319家上市公司发布2025年中期分红预案，<span class="text-green-600 font-semibold">"回报投资者"成为高频词</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心逻辑分析 -->
|
||
<div class="grid md:grid-cols-2 gap-8 mb-8">
|
||
<div class="card bg-white rounded-xl shadow-lg p-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-green-100 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-lightbulb text-green-600 text-2xl"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold text-gray-800">核心驱动力</h2>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="border-l-4 border-green-500 pl-4">
|
||
<h3 class="font-semibold text-gray-700">政策刚性约束</h3>
|
||
<p class="text-gray-600 text-sm">新"国九条"要求分红比例低于30%需披露原因，央企ROE考核挂钩分红率</p>
|
||
</div>
|
||
<div class="border-l-4 border-blue-500 pl-4">
|
||
<h3 class="font-semibold text-gray-700">现金流改善</h3>
|
||
<p class="text-gray-600 text-sm">垃圾焚烧行业C端付费理顺，水务行业水价市场化改革释放2.7万亿空间</p>
|
||
</div>
|
||
<div class="border-l-4 border-purple-500 pl-4">
|
||
<h3 class="font-semibold text-gray-700">资金配置需求</h3>
|
||
<p class="text-gray-600 text-sm">险资每年千亿增量资金，高股息资产（股息率4-7%）成为核心配置方向</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card bg-white rounded-xl shadow-lg p-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-amber-100 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-fire text-amber-600 text-2xl"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold text-gray-800">市场热度</h2>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-gray-700">新闻热度</span>
|
||
<div class="flex items-center">
|
||
<div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2">
|
||
<div class="bg-red-500 h-2.5 rounded-full progress-bar" style="width: 85%"></div>
|
||
</div>
|
||
<span class="text-sm text-gray-600">85%</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-gray-700">研报密集度</span>
|
||
<div class="flex items-center">
|
||
<div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2">
|
||
<div class="bg-orange-500 h-2.5 rounded-full progress-bar" style="width: 75%"></div>
|
||
</div>
|
||
<span class="text-sm text-gray-600">75%</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-gray-700">市场共识度</span>
|
||
<div class="flex items-center">
|
||
<div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2">
|
||
<div class="bg-green-500 h-2.5 rounded-full progress-bar" style="width: 90%"></div>
|
||
</div>
|
||
<span class="text-sm text-gray-600">90%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心公司对比 -->
|
||
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
|
||
<div class="flex items-center mb-6">
|
||
<div class="bg-blue-100 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-building text-blue-600 text-2xl"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold text-gray-800">核心公司对比</h2>
|
||
</div>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">行业</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2024年分红比例</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股息率</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">逻辑验证</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险点</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中国神华</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">煤炭</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">76%</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">6.5%</span>
|
||
</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">长协价+现金流稳定，政策强制分红受益</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">煤价波动</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">洪城环境</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">水务</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">50%+</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">4.2%</span>
|
||
</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">水价改革+管网投资2.7万亿空间</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">调价进度不及预期</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">招商银行</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">银行</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">33%</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">4.7%</span>
|
||
</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">地产风险缓释+零售业务复苏</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">净息差收窄</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">绿色动力</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">环保</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">71%</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">7.3%</span>
|
||
</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">垃圾处理费C端理顺+自由现金流转正</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">补贴政策退坡</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 风险分析 -->
|
||
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
|
||
<div class="flex items-center mb-6">
|
||
<div class="bg-red-100 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold text-gray-800">潜在风险与挑战</h2>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-4">
|
||
<div class="bg-red-50 p-4 rounded-lg border-l-4 border-red-500">
|
||
<h3 class="font-semibold text-gray-700 mb-2">政策风险</h3>
|
||
<p class="text-gray-600 text-sm">若经济复苏超预期，政策重心转向"促投资"，分红约束或放松</p>
|
||
</div>
|
||
<div class="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500">
|
||
<h3 class="font-semibold text-gray-700 mb-2">行业竞争</h3>
|
||
<p class="text-gray-600 text-sm">新能源替代可能压制煤炭长期盈利，分红可持续性存疑</p>
|
||
</div>
|
||
<div class="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-500">
|
||
<h3 class="font-semibold text-gray-700 mb-2">数据矛盾</h3>
|
||
<p class="text-gray-600 text-sm">部分城商行分红比例仅20%，低于行业均值；水价改革或遇舆论阻力</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 投资启示 -->
|
||
<div class="card bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-lg p-6 mb-8 text-white">
|
||
<div class="flex items-center mb-6">
|
||
<div class="bg-white bg-opacity-20 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-chart-pie text-white text-2xl"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold">综合结论与投资启示</h2>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-3">阶段判断</h3>
|
||
<p class="text-indigo-100">政策驱动分红预期已从"主题炒作"进入"基本面兑现"阶段，高股息资产具备3-5年配置价值</p>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-3">投资方向</h3>
|
||
<ul class="space-y-2 text-indigo-100">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<span><strong>高股息+低估值</strong>：煤炭（中国神华）、水务（洪城环境），股息率6%+且政策催化明确</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<span><strong>分红提升弹性</strong>：银行（招商银行），地产风险缓释后分红比例或从30%提升至40%</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关联股票数据 -->
|
||
<div class="card bg-white rounded-xl shadow-lg p-6">
|
||
<div class="flex items-center mb-6">
|
||
<div class="bg-teal-100 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-table text-teal-600 text-2xl"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold text-gray-800">关联股票数据</h2>
|
||
</div>
|
||
|
||
<!-- 中字头股票 -->
|
||
<div class="mb-8">
|
||
<h3 class="text-xl font-semibold text-gray-700 mb-4 flex items-center">
|
||
<span class="bg-red-500 w-3 h-3 rounded-full mr-2"></span>
|
||
中字头股票
|
||
</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股票名称</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">行业</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">原因</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中铁装配</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">建筑</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">归类于建筑行业，涉及基建领域</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中公高科</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">建筑</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">归类于建筑行业，涉及工程技术服务</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中国交建</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">建筑</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">归类于建筑行业，主营交通基础设施建设</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中国神华</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">能源</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">归类于能源行业，涉及煤炭生产与电力供应</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中国银行</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">金融</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">归类于金融行业，主营商业银行及国际业务</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中国移动</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">通信</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">归类于通信行业，主营移动通信服务</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 高分红预期股票 -->
|
||
<div>
|
||
<h3 class="text-xl font-semibold text-gray-700 mb-4 flex items-center">
|
||
<span class="bg-green-500 w-3 h-3 rounded-full mr-2"></span>
|
||
高分红预期股票
|
||
</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股票名称</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">行业</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">原因</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">宝鼎科技</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">工业</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">券商预计可能因新规而加大分红力度</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">秦川机床</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">工业</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">券商预计可能因新规而加大分红力度</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中通客车</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">汽车</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">券商预计可能因新规而加大分红力度</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">特力A</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">消费</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">券商预计可能因新规而加大分红力度</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">烽火电子</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">科技</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">券商预计可能因新规而加大分红力度</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">郑州银行</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">其他</td>
|
||
<td class="px-6 py-4 text-sm text-gray-500">券商预计可能因新规而加大分红力度</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 初始化粒子背景
|
||
tsParticles.load("tsparticles", {
|
||
particles: {
|
||
number: {
|
||
value: 80,
|
||
density: {
|
||
enable: true,
|
||
value_area: 800
|
||
}
|
||
},
|
||
color: {
|
||
value: "#667eea"
|
||
},
|
||
shape: {
|
||
type: "circle"
|
||
},
|
||
opacity: {
|
||
value: 0.5,
|
||
random: false
|
||
},
|
||
size: {
|
||
value: 3,
|
||
random: true
|
||
},
|
||
line_linked: {
|
||
enable: true,
|
||
distance: 150,
|
||
color: "#667eea",
|
||
opacity: 0.4,
|
||
width: 1
|
||
},
|
||
move: {
|
||
enable: true,
|
||
speed: 2,
|
||
direction: "none",
|
||
random: false,
|
||
straight: false,
|
||
out_mode: "out",
|
||
bounce: false
|
||
}
|
||
},
|
||
interactivity: {
|
||
detect_on: "canvas",
|
||
events: {
|
||
onhover: {
|
||
enable: true,
|
||
mode: "grab"
|
||
},
|
||
onclick: {
|
||
enable: true,
|
||
mode: "push"
|
||
},
|
||
resize: true
|
||
},
|
||
modes: {
|
||
grab: {
|
||
distance: 140,
|
||
line_linked: {
|
||
opacity: 1
|
||
}
|
||
},
|
||
push: {
|
||
particles_nb: 4
|
||
}
|
||
}
|
||
},
|
||
retina_detect: true
|
||
});
|
||
|
||
// 添加滚动动画
|
||
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').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);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
``` |