update pay ui
This commit is contained in:
@@ -1,523 +1,518 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="business">
|
||||
<html lang="zh-CN" data-theme="night">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>"马"字辈投资概念深度解析 - A股玄学与产业共振</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<title>深度投研报告：“马”字辈概念</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
:root {
|
||||
--fallback-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
--font-family: "Inter", var(--fallback-font);
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
||||
min-height: 100vh;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #000000;
|
||||
color: #E0E0E0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.bg-deep-space {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background: radial-gradient(ellipse at 50% 50%, rgba(20, 25, 60, 0.6) 0%, #010409 100%), #010409;
|
||||
animation: pulse-glow 20s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0% {
|
||||
background: radial-gradient(ellipse at 40% 60%, rgba(30, 35, 80, 0.7) 0%, #010409 100%), #010409;
|
||||
}
|
||||
100% {
|
||||
background: radial-gradient(ellipse at 60% 40%, rgba(40, 25, 70, 0.7) 0%, #010409 100%), #010409;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
|
||||
.glass-card {
|
||||
background: rgba(10, 12, 28, 0.5);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 2rem; /* 极致圆角 */
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(118, 143, 255, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
.grid-span-12 { grid-column: span 12; }
|
||||
.grid-span-8 { grid-column: span 12; }
|
||||
.grid-span-7 { grid-column: span 12; }
|
||||
.grid-span-6 { grid-column: span 12; }
|
||||
.grid-span-5 { grid-column: span 12; }
|
||||
.grid-span-4 { grid-column: span 12; }
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.grid-span-8 { grid-column: span 8; }
|
||||
.grid-span-7 { grid-column: span 7; }
|
||||
.grid-span-6 { grid-column: span 6; }
|
||||
.grid-span-5 { grid-column: span 5; }
|
||||
.grid-span-4 { grid-column: span 4; }
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
background: linear-gradient(90deg, #A8B5FF, #668CFF);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.fui-subtitle {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: #A8B5FF;
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
background: rgba(30, 41, 59, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(148, 163, 184, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
.highlight {
|
||||
color: #82aaff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-glow:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
.highlight-red {
|
||||
color: #ff8282;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-custom thead th {
|
||||
background-color: rgba(173, 186, 255, 0.05);
|
||||
color: #A8B5FF;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
animation: pulse 2s infinite;
|
||||
.table-custom tbody tr {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.table-custom tbody tr:hover {
|
||||
background-color: rgba(173, 186, 255, 0.03);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
.table-custom a {
|
||||
color: #82aaff;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.badge-glow {
|
||||
animation: glow 2s ease-in-out infinite;
|
||||
.table-custom a:hover {
|
||||
color: #adbeff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #cdd6f4;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% { box-shadow: 0 0 5px currentColor; }
|
||||
50% { box-shadow: 0 0 20px currentColor; }
|
||||
}
|
||||
|
||||
.stock-row:hover {
|
||||
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
|
||||
transform: scale(1.02);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.floating {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
.gradient-border {
|
||||
li {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 2px;
|
||||
border-radius: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.gradient-border > div {
|
||||
background: #0f172a;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #475569;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #64748b;
|
||||
|
||||
li::before {
|
||||
content: '>>';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #82aaff;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
top: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-100">
|
||||
<!-- Navigation -->
|
||||
<nav class="sticky top-0 z-50 bg-gray-900/95 backdrop-blur-md border-b border-gray-800">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center space-x-3">
|
||||
<i class="fas fa-horse text-2xl text-blue-500"></i>
|
||||
<span class="text-xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">马字辈投资概念</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-6">
|
||||
<a href="#timeline" class="hover:text-blue-400 transition">时间轴</a>
|
||||
<a href="#analysis" class="hover:text-blue-400 transition">深度分析</a>
|
||||
<a href="#stocks" class="hover:text-blue-400 transition">股票矩阵</a>
|
||||
<a href="#conclusion" class="hover:text-blue-400 transition">投资启示</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<body x-data="{}" x-init="
|
||||
$nextTick(() => {
|
||||
initTimelineChart();
|
||||
});
|
||||
">
|
||||
<div class="bg-deep-space"></div>
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden py-20 px-4">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-transparent to-purple-900/20"></div>
|
||||
<div class="container mx-auto relative z-10">
|
||||
<div class="text-center max-w-4xl mx-auto">
|
||||
<h1 class="text-5xl md:text-7xl font-black mb-6">
|
||||
<span class="hero-gradient">"马"字辈</span>
|
||||
</h1>
|
||||
<p class="text-2xl md:text-3xl text-gray-300 mb-4">A股市场的独特现象</p>
|
||||
<p class="text-xl text-gray-400 mb-8">玄学炒作 × 产业政策 × 基本面共振</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<span class="badge badge-info badge-lg badge-glow">25+ 核心标的</span>
|
||||
<span class="badge badge-success badge-lg badge-glow">多赛道覆盖</span>
|
||||
<span class="badge badge-warning badge-lg badge-glow">事件驱动</span>
|
||||
</div>
|
||||
<header class="text-center mb-16">
|
||||
<h1 class="text-4xl md:text-6xl font-bold tracking-tighter mb-4" style="background: linear-gradient(90deg, #FFFFFF, #A8B5FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
|
||||
深度投研报告: "马"字辈概念
|
||||
</h1>
|
||||
<p class="text-lg text-gray-400 max-w-3xl mx-auto">
|
||||
一个由市场情绪、资金偏好和“玄学”逻辑共同催生的事件驱动型主题分析
|
||||
</p>
|
||||
<div class="mt-6 text-xs text-gray-500 font-mono tracking-widest">
|
||||
<p>北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现</p>
|
||||
<p>本报告为AI合成数据，投资需谨慎</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floating absolute top-20 left-10 text-6xl text-blue-500/20">🐴</div>
|
||||
<div class="floating absolute bottom-20 right-10 text-6xl text-purple-500/20" style="animation-delay: 2s;">🐎</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<section id="timeline" class="py-16 px-4">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="fas fa-clock-rotate-left mr-3 text-blue-500"></i>
|
||||
概念演进时间轴
|
||||
</h2>
|
||||
<div class="relative">
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-blue-500 to-purple-500"></div>
|
||||
|
||||
<div class="space-y-12">
|
||||
<div class="flex items-center justify-end md:justify-start md:flex-row-reverse">
|
||||
<div class="w-full md:w-5/12 px-6">
|
||||
<div class="card-glow rounded-xl p-6">
|
||||
<div class="flex items-center mb-3">
|
||||
<span class="timeline-dot w-4 h-4 bg-blue-500 rounded-full mr-3"></span>
|
||||
<span class="text-blue-400 font-bold">2025年3月</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">理论奠基</h3>
|
||||
<p class="text-gray-400">首份深度分析报告提出"玄学与基本面共振逻辑"，以万马股份为例，结合生肖周期与新基建布局</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-start">
|
||||
<div class="w-full md:w-5/12 px-6">
|
||||
<div class="card-glow rounded-xl p-6">
|
||||
<div class="flex items-center mb-3">
|
||||
<span class="timeline-dot w-4 h-4 bg-green-500 rounded-full mr-3"></span>
|
||||
<span class="text-green-400 font-bold">2025年6月27日</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">首次爆发</h3>
|
||||
<p class="text-gray-400">"炒生肖行情"再现，玉马科技、云中马等近10只个股涨停，纯情绪驱动</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end md:justify-start md:flex-row-reverse">
|
||||
<div class="w-full md:w-5/12 px-6">
|
||||
<div class="card-glow rounded-xl p-6">
|
||||
<div class="flex items-center mb-3">
|
||||
<span class="timeline-dot w-4 h-4 bg-purple-500 rounded-full mr-3"></span>
|
||||
<span class="text-purple-400 font-bold">2025年9-10月</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">分化与深化</h3>
|
||||
<p class="text-gray-400">神马股份5000亿重组催化，概念向"事件驱动+基本面"双轮驱动转变</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<main class="bento-grid">
|
||||
|
||||
<!-- Core Analysis -->
|
||||
<section id="analysis" class="py-16 px-4 bg-gray-800/30">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="fas fa-chart-line mr-3 text-purple-500"></i>
|
||||
核心逻辑剖析
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<div class="gradient-border">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-4 text-blue-400">
|
||||
<i class="fas fa-magic mr-2"></i>表层逻辑：市场行为学
|
||||
</h3>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-sparkles text-yellow-400 mt-1 mr-3"></i>
|
||||
<span><strong>玄学叙事：</strong>"马到成功"、"万马奔腾"等美好寓意引发心理共鸣</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-sparkles text-yellow-400 mt-1 mr-3"></i>
|
||||
<span><strong>标签效应：</strong>简单易识别的标签快速聚集市场注意力</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-sparkles text-yellow-400 mt-1 mr-3"></i>
|
||||
<span><strong>生肖周期：</strong>十二年轮动与2025乙巳蛇年"马跃龙门"玄机</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gradient-border">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-4 text-purple-400">
|
||||
<i class="fas fa-industry mr-2"></i>深层逻辑：产业基本面
|
||||
</h3>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-microchip text-cyan-400 mt-1 mr-3"></i>
|
||||
<span><strong>时代偶然性：</strong>"马"字成为索引，指向产业升级转型企业</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-microchip text-cyan-400 mt-1 mr-3"></i>
|
||||
<span><strong>产业必然性：</strong>横跨机器人、新能源、AI、消费等热门赛道</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-microchip text-cyan-400 mt-1 mr-3"></i>
|
||||
<span><strong>政策契合：</strong>新基建、国企改革、人工智能+等国家战略</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 核心观点摘要 -->
|
||||
<div class="glass-card grid-span-12 p-8">
|
||||
<h2 class="fui-title text-2xl mb-4">核心观点摘要 (Core View)</h2>
|
||||
<p class="text-lg text-gray-300 leading-relaxed">
|
||||
“马”字辈是一个典型的<span class="highlight">A股事件驱动型主题投资概念</span>，其本质是基于“生肖玄学”和名称关联的<span class="highlight">情绪与叙事驱动</span>，而非统一的基本面逻辑。当前，该概念已从情绪高点回落，进入<span class="highlight-red">分化阶段</span>。其核心驱动力是市场游资的短期炒作偏好，未来潜力在于内部个股能否将“标签”转化为与自身主营业务相关的实质性催化，否则概念本身将随着市场情绪的转换而消散。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Market Sentiment -->
|
||||
<div class="card-glow rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-center">市场热度与情绪演变</h3>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="text-5xl font-bold text-green-400 mb-2">极度乐观</div>
|
||||
<div class="text-gray-400">2025年6月</div>
|
||||
<div class="text-sm mt-2 text-gray-500">纯生肖炒作</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-5xl font-bold text-yellow-400 mb-2">开始分化</div>
|
||||
<div class="text-gray-400">2025年9月</div>
|
||||
<div class="text-sm mt-2 text-gray-500">向基本面筛选</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-5xl font-bold text-purple-400 mb-2">价值发现</div>
|
||||
<div class="text-gray-400">当前阶段</div>
|
||||
<div class="text-sm mt-2 text-gray-500">真伪龙头分化</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stock Matrix Table -->
|
||||
<section id="stocks" class="py-16 px-4">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="fas fa-table mr-3 text-green-500"></i>
|
||||
"马"字辈股票全景矩阵
|
||||
</h2>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-gray-800 to-gray-700 text-left">
|
||||
<th class="p-4 font-bold">股票名称</th>
|
||||
<th class="p-4 font-bold">核心分类</th>
|
||||
<th class="p-4 font-bold">产业链/项目</th>
|
||||
<th class="p-4 font-bold">核心逻辑</th>
|
||||
<th class="p-4 font-bold">评级</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">万马股份</td>
|
||||
<td class="p-4"><span class="badge badge-info">机器人</span></td>
|
||||
<td class="p-4">机器人线缆、充电桩、数据中心</td>
|
||||
<td class="p-4 text-gray-300">双重逻辑融合典范，玄学+产业完美契合</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐⭐⭐⭐ 领导者</span></td>
|
||||
</tr>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">神马股份</td>
|
||||
<td class="p-4"><span class="badge badge-warning">基础化工</span></td>
|
||||
<td class="p-4">5000亿战略重组、尼龙66</td>
|
||||
<td class="p-4 text-gray-300">事件驱动龙头，国企改革预期强烈</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐⭐⭐ 事件驱动</span></td>
|
||||
</tr>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">福龙马</td>
|
||||
<td class="p-4"><span class="badge badge-success">环保</span></td>
|
||||
<td class="p-4">环卫机器人、移动充电</td>
|
||||
<td class="p-4 text-gray-300">小而美高弹性，新兴赛道先锋</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐⭐⭐ 高弹性</span></td>
|
||||
</tr>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">森马服饰</td>
|
||||
<td class="p-4"><span class="badge badge-secondary">消费</span></td>
|
||||
<td class="p-4">童装龙头、O2O渠道改革</td>
|
||||
<td class="p-4 text-gray-300">被低估的价值洼地，高分红+5%股息率</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐⭐ 价值股</span></td>
|
||||
</tr>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">德马科技</td>
|
||||
<td class="p-4"><span class="badge badge-primary">机械设备</span></td>
|
||||
<td class="p-4">智能物流分拣、锂电装备</td>
|
||||
<td class="p-4 text-gray-300">隐形冠军，国际化优势显著</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐⭐ 成长股</span></td>
|
||||
</tr>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">海马汽车</td>
|
||||
<td class="p-4"><span class="badge badge-error">汽车</span></td>
|
||||
<td class="p-4">无人驾驶、新能源车（海南）</td>
|
||||
<td class="p-4 text-gray-300">低价股，重组预期+自动驾驶概念</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐ 投机股</span></td>
|
||||
</tr>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">天亿马</td>
|
||||
<td class="p-4"><span class="badge badge-info">计算机</span></td>
|
||||
<td class="p-4">智慧城市、数据要素</td>
|
||||
<td class="p-4 text-gray-300">AI+数据要素，政策受益标的</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐⭐ 概念股</span></td>
|
||||
</tr>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">玉马遮阳</td>
|
||||
<td class="p-4"><span class="badge badge-secondary">轻工制造</span></td>
|
||||
<td class="p-4">功能性遮阳材料</td>
|
||||
<td class="p-4 text-gray-300">消费升级，产品差异化明显</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐⨩ 稳健股</span></td>
|
||||
</tr>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">汉马科技</td>
|
||||
<td class="p-4"><span class="badge badge-error">汽车</span></td>
|
||||
<td class="p-4">氢能源汽车、吉利入主</td>
|
||||
<td class="p-4 text-gray-300">新能源转型，存在不确定性</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐ 观望</span></td>
|
||||
</tr>
|
||||
<tr class="stock-row border-b border-gray-800">
|
||||
<td class="p-4 font-bold text-blue-400">马应龙</td>
|
||||
<td class="p-4"><span class="badge badge-accent">医药生物</span></td>
|
||||
<td class="p-4">中医药龙头、民营医院</td>
|
||||
<td class="p-4 text-gray-300">老字号，稳健增长+创新布局</td>
|
||||
<td class="p-4"><span class="text-yellow-400">⭐⭐⭐⭐ 防御股</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="card-glow rounded-lg p-4 text-center">
|
||||
<div class="text-3xl font-bold text-blue-400">25+</div>
|
||||
<div class="text-gray-400 text-sm">核心标的</div>
|
||||
</div>
|
||||
<div class="card-glow rounded-lg p-4 text-center">
|
||||
<div class="text-3xl font-bold text-green-400">8</div>
|
||||
<div class="text-gray-400 text-sm">核心赛道</div>
|
||||
</div>
|
||||
<div class="card-glow rounded-lg p-4 text-center">
|
||||
<div class="text-3xl font-bold text-purple-400">3</div>
|
||||
<div class="text-gray-400 text-sm">投资阶段</div>
|
||||
</div>
|
||||
<div class="card-glow rounded-lg p-4 text-center">
|
||||
<div class="text-3xl font-bold text-yellow-400">5000亿</div>
|
||||
<div class="text-gray-400 text-sm">重组规模</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Catalysts -->
|
||||
<section class="py-16 px-4 bg-gray-800/30">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="fas fa-rocket mr-3 text-red-500"></i>
|
||||
关键催化剂
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="card-glow rounded-xl p-6 text-center">
|
||||
<div class="text-6xl mb-4">⚡</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-red-400">神马重组落地</h3>
|
||||
<p class="text-gray-400 text-sm">5000亿资产整合方案、协同效应预估</p>
|
||||
</div>
|
||||
|
||||
<div class="card-glow rounded-xl p-6 text-center">
|
||||
<div class="text-6xl mb-4">📊</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-green-400">核心公司业绩</h3>
|
||||
<p class="text-gray-400 text-sm">万马充电桩订单、福龙马机器人交付</p>
|
||||
</div>
|
||||
|
||||
<div class="card-glow rounded-xl p-6 text-center">
|
||||
<div class="text-6xl mb-4">🏛️</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-blue-400">政策持续加码</h3>
|
||||
<p class="text-gray-400 text-sm">新质生产力、人工智能+新政策</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Investment Conclusion -->
|
||||
<section id="conclusion" class="py-16 px-4">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="fas fa-lightbulb mr-3 text-yellow-500"></i>
|
||||
投资启示与展望
|
||||
</h2>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="card-glow rounded-xl p-8 mb-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-center text-cyan-400">最终判断</h3>
|
||||
<p class="text-lg text-gray-300 leading-relaxed mb-6">
|
||||
"马"字辈概念正处于<strong class="text-blue-400">分水岭</strong>。告别纯名字炒作，向"事件+基本面"双轮驱动转变。这是一个典型的<strong class="text-purple-400">主题为表，产业为里</strong>的混合体。
|
||||
<!-- 核心逻辑与市场认知 -->
|
||||
<div class="glass-card grid-span-7 p-8">
|
||||
<h2 class="fui-title text-2xl mb-4">核心逻辑与市场认知 (Logic & Cognition)</h2>
|
||||
<div>
|
||||
<h3>驱动力分析</h3>
|
||||
<ul>
|
||||
<li><span class="fui-subtitle">“玄学”与文化叙事:</span> 最根本驱动力。新闻中<span class="highlight">“玄学炒作火热”、“马年马字辈妖股”</span>等表述直接印证了这一点，为投机行为提供了简单易懂的“剧本”。</li>
|
||||
<li><span class="fui-subtitle">热点概念“容器”:</span> 概念本身无产业逻辑，但其成分股广泛分布于无人驾驶、AI、机器人等热门赛道，成为一个易于识别的备选池。</li>
|
||||
<li><span class="fui-subtitle">龙头示范效应:</span> <span class="highlight">海马汽车 (10天6板)</span>、<span class="highlight">中马传动 (4板)</span> 等个股的强劲表现，形成强大的赚钱效应，吸引大量跟风资金。</li>
|
||||
</ul>
|
||||
<h3>市场热度与情绪</h3>
|
||||
<p class="text-gray-400 mt-4 leading-relaxed">
|
||||
市场表现出<span class="highlight">高度的投机热情和显著的波动性</span>。热度主要集中在二级市场交易层面，<span class="highlight-red">未得到机构研究层面的认可</span> (研报与路演数据中完全未提及此概念)，缺乏机构共识支撑。
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-gradient-to-br from-blue-900/30 to-purple-900/30 rounded-lg p-6">
|
||||
<h4 class="text-xl font-bold mb-4 text-blue-400">最具价值方向</h4>
|
||||
<ol class="space-y-2 text-gray-300">
|
||||
<li>1️⃣ <strong>万马股份</strong> - 双重逻辑典范</li>
|
||||
<li>2️⃣ <strong>森马服饰</strong> - 被错杀的价值洼地</li>
|
||||
<li>3️⃣ <strong>福龙马</strong> - 高弹性细分先锋</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 概念炒作时间轴 -->
|
||||
<div class="glass-card grid-span-5 p-8 flex flex-col">
|
||||
<h2 class="fui-title text-2xl mb-4">概念炒作时间轴 (Market Timeline)</h2>
|
||||
<div id="timeline-chart" class="flex-grow min-h-[300px]"></div>
|
||||
</div>
|
||||
|
||||
<!-- 预期差分析 -->
|
||||
<div class="glass-card grid-span-12 p-8">
|
||||
<h2 class="fui-title text-2xl mb-4">预期差分析 (Expectation Gap)</h2>
|
||||
<p class="text-gray-400 mb-6">该概念存在巨大预期差，是其最大风险与特征。市场叙事与公司现实严重脱节。</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="p-6 border border-dashed border-yellow-500/30 rounded-2xl bg-yellow-500/5">
|
||||
<h4 class="font-bold text-yellow-300 mb-2">市场叙事：集体狂欢</h4>
|
||||
<p class="text-gray-400">市场沉浸在“马”字辈集体上涨的宏大叙事中，将其视为一个具备联动效应的板块。</p>
|
||||
</div>
|
||||
<div class="p-6 border border-dashed border-red-500/30 rounded-2xl bg-red-500/5">
|
||||
<h4 class="font-bold text-red-300 mb-2">公司现实：各自为战</h4>
|
||||
<p class="text-gray-400">
|
||||
路演数据显示相关公司正专注于自身主业精细化运营：<br>
|
||||
- <span class="highlight">森马服饰:</span> 讨论SKU管理和单店坪效。<br>
|
||||
- <span class="highlight">玉马遮阳:</span> 讨论跨境电商与产能释放。<br>
|
||||
- <span class="highlight-red">德马科技:</span> 主业净利润同比<span class="font-mono font-bold">-38.3%</span>。<br>
|
||||
这些经营活动与“马”字辈的玄学炒作<span class="highlight-red font-bold">毫无关联</span>。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-sm text-gray-500 italic">
|
||||
<p>研报数据甚至提出批判性假设：“‘马’字辈可能为‘展望’（2024年展望）的笔误或特定指代”，从根本上动摇了该概念的严肃性。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 催化剂与未来发展 -->
|
||||
<div class="glass-card grid-span-6 p-8">
|
||||
<h2 class="fui-title text-2xl mb-4">催化剂与未来发展 (Catalysts & Future Path)</h2>
|
||||
<h3>近期催化剂 (3-6个月)</h3>
|
||||
<ul>
|
||||
<li><span class="fui-subtitle">情绪再次点燃:</span> 市场缺乏主线时，游资可能再次利用“马跃龙门”叙事发动行情。</li>
|
||||
<li><span class="fui-subtitle">个股独立催化:</span> 核心标的发布超预期业绩或重大合同，可能激活板块联想。</li>
|
||||
<li><span class="fui-subtitle">政策热点嫁接:</span> 与成分股主营业务（如机器人、无人驾驶）相关的重磅政策出台。</li>
|
||||
</ul>
|
||||
<h3>长期发展路径</h3>
|
||||
<p class="text-gray-400 mt-4 leading-relaxed">
|
||||
作为一个整体概念，其长期路径是<span class="highlight-red">必然走向分化和消亡</span>。它不具备持续创造价值的产业基础。最终，个股走势将完全回归其自身的基本面定价。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 产业链主题图谱 -->
|
||||
<div class="glass-card grid-span-6 p-8">
|
||||
<h2 class="fui-title text-2xl mb-4">产业链主题图谱 (Thematic Map)</h2>
|
||||
<p class="text-gray-400 mb-4">“马”字辈不存在传统产业链，而是一个基于“市场标签”的横跨多行业的主题组合。</p>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h4 class="fui-subtitle">AI与机器人</h4>
|
||||
<p class="text-sm text-gray-400">
|
||||
<span class="highlight">上游:</span> 神马股份 (尼龙), 万马股份 (线缆) <br>
|
||||
<span class="highlight">中游:</span> 福龙马 (环卫机器人), 德马科技 (物流机器人) <br>
|
||||
<span class="highlight">下游:</span> 天亿马 (数据要素), 创业黑马 (大模型)
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fui-subtitle">新能源与汽车</h4>
|
||||
<p class="text-sm text-gray-400">
|
||||
<span class="highlight">整车:</span> 海马汽车, 汉马科技 <br>
|
||||
<span class="highlight">零部件:</span> 中马传动 (减速器), 万马股份 (充电桩)
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fui-subtitle">大消费</h4>
|
||||
<p class="text-sm text-gray-400">
|
||||
森马服饰 (服饰), 天马科技 (预制菜), 马应龙 (医药)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 核心玩家对比与风险 -->
|
||||
<div class="glass-card grid-span-12 p-8">
|
||||
<h2 class="fui-title text-2xl mb-4">核心玩家对比与风险 (Key Players & Risks)</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3>核心玩家对比</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 rounded-lg bg-black/20">
|
||||
<p><span class="highlight">龙头 (投机): 海马汽车</span> - 小市值+多标签，游资偏好，但基本面未改善，持续性差。</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-black/20">
|
||||
<p><span class="highlight">中军 (逻辑): 万马股份</span> - 兼具新能源与机器人概念，历史共振基因，基本面叙事更扎实。</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-black/20">
|
||||
<p><span class="highlight">价值 (错杀): 森马服饰, 马应龙</span> - 基本面稳健，与概念无关，若因退潮被错杀可能存在机会。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-green-900/30 to-cyan-900/30 rounded-lg p-6">
|
||||
<h4 class="text-xl font-bold mb-4 text-green-400">关键跟踪指标</h4>
|
||||
<ul class="space-y-2 text-gray-300 text-sm">
|
||||
<li>• 万马充电桩中标公告</li>
|
||||
<li>• 神马重组方案进度</li>
|
||||
<li>• 森马同店增长率</li>
|
||||
<li>• 福龙马机器人订单</li>
|
||||
<h3 class="mt-6">验证与证伪</h3>
|
||||
<ul>
|
||||
<li><span class="fui-subtitle text-red-400">证伪案例: 德马科技</span> 市场炒作机器人概念，但路演数据显示<span class="highlight-red">主业净利润同比下滑38.3%</span>，逻辑与基本面背离。</li>
|
||||
<li><span class="fui-subtitle text-yellow-400">验证交叉点: 福龙马</span> 新闻与个股数据均指向其“环卫机器人龙头”地位，逻辑自洽，但仍需订单和盈利能力验证。</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3>潜在风险与挑战</h3>
|
||||
<div class="p-6 border-2 border-red-500/50 rounded-2xl bg-red-900/20">
|
||||
<ul>
|
||||
<li><span class="fui-subtitle text-red-300">叙事脆弱性:</span> 基于“玄学”的逻辑极易被新主题替代，资金会迅速撤离。新闻明确警示<span class="highlight-red">“个股炒作持续性不佳”</span>。</li>
|
||||
<li><span class="fui-subtitle text-red-300">伪板块效应:</span> 成分股无业务协同，龙头股崩盘会引发整个概念的情绪踩踏。</li>
|
||||
<li><span class="fui-subtitle text-red-300">信息交叉验证风险:</span> 新闻热度与公司基本面严重脱节。投资者若仅凭新闻热度入场将面临巨大基本面风险。研报亦指出市场流传数据存在偏差甚至错误。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="inline-block card-glow rounded-xl px-8 py-4">
|
||||
<div class="text-3xl font-bold hero-gradient mb-2">核心结论</div>
|
||||
<div class="text-xl text-gray-300">主题投资机会与深度价值挖掘并存</div>
|
||||
<div class="text-lg text-gray-400 mt-2">需穿透表象，聚焦产业本质</div>
|
||||
</div>
|
||||
|
||||
<!-- 综合结论与投资启示 -->
|
||||
<div class="glass-card grid-span-12 p-8">
|
||||
<h2 class="fui-title text-2xl mb-4">综合结论与投资启示 (Conclusion & Takeaways)</h2>
|
||||
<p class="mb-4 text-gray-300">
|
||||
“马”字辈概念 unequivocally 处于<span class="highlight">主题炒作阶段</span>，是一个“交易型”而非“投资型”概念，内在价值低，风险极高。价值不在于概念本身，而在于利用概念进行<span class="highlight">标的筛选和策略区分</span>。
|
||||
</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="p-6 rounded-2xl bg-blue-900/20">
|
||||
<h4 class="font-bold text-blue-300 mb-2">投机策略方向</h4>
|
||||
<p class="text-gray-400">关注板块内具备“小市值+多重热门标签+高换手率”特征的个股，如<span class="highlight">海马汽车、中马传动</span>。核心是跟踪市场情绪和资金流向。</p>
|
||||
</div>
|
||||
<div class="p-6 rounded-2xl bg-green-900/20">
|
||||
<h4 class="font-bold text-green-300 mb-2">价值策略方向</h4>
|
||||
<p class="text-gray-400">关注被错误划入概念、但自身基本面扎实的公司，如<span class="highlight">森马服饰、马应龙</span>。当市场炒作退潮导致其股价被错杀时，可能出现布局良机。</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="mt-6">需重点跟踪的关键指标</h3>
|
||||
<ul class="text-sm">
|
||||
<li><span class="fui-subtitle">投机标的:</span> 每日成交额、换手率、媒体提及频率、龙头股龙虎榜数据。</li>
|
||||
<li><span class="fui-subtitle">价值标的:</span>
|
||||
<span class="highlight">森马服饰</span>(同店增速、库存周转率)；
|
||||
<span class="highlight">马应龙</span>(核心产品终端零售价、市场份额)；
|
||||
<span class="highlight">万马股份</span>(机器人线缆、充电桩订单增长)。
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-8 px-4 bg-gray-900 border-t border-gray-800">
|
||||
<div class="container mx-auto text-center">
|
||||
<p class="text-gray-500 text-sm">
|
||||
<i class="fas fa-info-circle mr-2"></i>
|
||||
本页面仅供投资研究参考，不构成投资建议
|
||||
</p>
|
||||
<p class="text-gray-600 text-xs mt-2">
|
||||
数据来源：公开市场信息、公司财报、行业研究报告
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- 股票数据列表 -->
|
||||
<div class="glass-card grid-span-12 p-8">
|
||||
<h2 class="fui-title text-2xl mb-4">"马"字辈概念股全览 (Stock Universe)</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>股票名称</th>
|
||||
<th>代码</th>
|
||||
<th>核心概念</th>
|
||||
<th>市场标签</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Data will be injected here by JS -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
</main>
|
||||
</div>
|
||||
|
||||
// Add scroll animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
<script>
|
||||
const stockData = {
|
||||
"福龙马": { "code": "603686", "reason": "无人驾驶清扫机器人+电池回收+环卫服务", "tags": "无人驾驶, 100亿以上" },
|
||||
"三羊马": { "code": "001317", "reason": "无人驾驶+低空经济+统一大市场", "tags": "无人驾驶, 市值50亿以下" },
|
||||
"万马科技": { "code": "300698", "reason": "自动驾驶+英伟达+数据中心+车联网+医疗信息化", "tags": "无人驾驶, 50-100亿" },
|
||||
"海马汽车": { "code": "000572", "reason": "战略合作京东+汽车整车(海南)+无人驾驶", "tags": "无人驾驶, 100亿以上" },
|
||||
"皇马科技": { "code": "603181", "reason": "液冷上游+特种表面活性剂龙头+混凝土外加剂", "tags": "人工智能, 100亿以上" },
|
||||
"马钢股份": { "code": "600808", "reason": "钢铁+数据中心+高速车轮(高铁)", "tags": "人工智能, 100亿以上" },
|
||||
"天亿马": { "code": "301178", "reason": "数据要素+人工智能+半导体", "tags": "人工智能, 市值50亿以下" },
|
||||
"创业黑马": { "code": "300688", "reason": "合作阿里+大模型+战略合作智谱AI", "tags": "人工智能, 50-100亿" },
|
||||
"神马股份": { "code": "600810", "reason": "机器人材料(尼龙)+控股股东战略重组+润滑油+军工", "tags": "机器人, 100亿以上" },
|
||||
"万马股份": { "code": "002276", "reason": "机器人线缆+供货宇树+数据中心+充电桩", "tags": "机器人, 100亿以上" },
|
||||
"云中马": { "code": "603130", "reason": "人形机器人(腱绳材料)+纺织制造", "tags": "机器人, 50-100亿" },
|
||||
"玉马科技": { "code": "300993", "reason": "功能性遮阳材料+露营经济+智能物流", "tags": "消费, 50-100亿" },
|
||||
"森马服饰": { "code": "002563", "reason": "童装+社区团购", "tags": "消费, 100亿以上" },
|
||||
"天马科技": { "code": "603668", "reason": "预制菜+鳗鱼+水产饲料", "tags": "消费, 50-100亿" },
|
||||
"深天马A": { "code": "000050", "reason": "折叠手机+合作华为+合作小鹏+国企改革", "tags": "消费, 100亿以上" },
|
||||
"天马新材": { "code": "838971", "reason": "low-α射线球形氧化铝粉体+北交所+锂电池涂覆材料", "tags": "新能源产业链, 市值50亿以下" },
|
||||
"汉马科技": { "code": "600375", "reason": "吉利控股+氢能源汽车", "tags": "新能源产业链, 100亿以上" },
|
||||
"中马传动": { "code": "603767", "reason": "车载减速器+农机", "tags": "新能源产业链, 50-100亿" },
|
||||
"万里马": { "code": "300591", "reason": "防弹防护产品+军工+母婴产品", "tags": "军工, 市值50亿以下" },
|
||||
"野马电池": { "code": "605378", "reason": "固态电池(专利或可降低锰成本)+锌锰电池+外销", "tags": "军工, 50-100亿" },
|
||||
"威马农机": { "code": "301533", "reason": "农业机械+一带一路", "tags": "工程机械, 市值50亿以下" },
|
||||
"金马游乐": { "code": "300756", "reason": "游乐设施+VR", "tags": "工程机械, 50-100亿" },
|
||||
"马可波罗": { "code": "001386", "reason": "建筑陶瓷+家居家电+建筑幕墙", "tags": "地产, 100亿以上" },
|
||||
"四川双马": { "code": "000935", "reason": "水泥+四川建材+多肽原料药+CDMO+创投", "tags": "地产, 100亿以上" },
|
||||
"马应龙": { "code": "600993", "reason": "中医药+电商+民营医院", "tags": "医药, 100亿以上" },
|
||||
"通化金马": { "code": "000766", "reason": "阿尔茨海默病+医药", "tags": "医药, 100亿以上" },
|
||||
"飞马国际": { "code": "002210", "reason": "物流(深圳)+控股股东拟变更+环保", "tags": "物流, 100亿以上" },
|
||||
"德马科技": { "code": "688360", "reason": "物流分拣+机器人", "tags": "物流, 50-100亿" },
|
||||
"神马电力": { "code": "603530", "reason": "核电+绝缘子+海上光伏+出海", "tags": "核电, 100亿以上" },
|
||||
// Merge unique entries from the first dataset if any, though the second one seems comprehensive
|
||||
"玉马遮阳": { "code": "300993", "reason": "功能性遮阳材料+露营经济+智能物流", "tags": "消费, 50-100亿" } // Already exists as 玉马科技
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
// Populate the table
|
||||
const tableBody = document.querySelector('.table-custom tbody');
|
||||
// A bit of cleanup for duplicate names like 玉马科技/玉马遮阳
|
||||
const uniqueStocks = {};
|
||||
Object.entries(stockData).forEach(([name, data]) => {
|
||||
if(name === "玉马科技" || name === "玉马遮阳") {
|
||||
uniqueStocks['玉马科技/遮阳'] = { code: '300993', reason: data.reason, tags: data.tags };
|
||||
} else {
|
||||
uniqueStocks[name] = data;
|
||||
}
|
||||
});
|
||||
|
||||
Object.entries(uniqueStocks).forEach(([name, data]) => {
|
||||
const row = document.createElement('tr');
|
||||
const codeCell = data.code ? `<a href="https://valuefrontier.cn/company?scode=${data.code}" target="_blank">${data.code}</a>` : 'N/A';
|
||||
row.innerHTML = `
|
||||
<td class="font-semibold text-gray-200">${name}</td>
|
||||
<td class="font-mono">${codeCell}</td>
|
||||
<td class="text-gray-400 text-sm">${data.reason}</td>
|
||||
<td class="text-gray-400 text-sm">${data.tags.split(', ').map(tag => `<span class="inline-block bg-gray-700/50 text-gray-300 rounded-full px-2 py-1 text-xs mr-1 mb-1">${tag}</span>`).join('')}</td>
|
||||
`;
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
|
||||
// Initialize ECharts
|
||||
function initTimelineChart() {
|
||||
var chartDom = document.getElementById('timeline-chart');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b}: {c}',
|
||||
backgroundColor: 'rgba(10, 12, 28, 0.8)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
textStyle: { color: '#E0E0E0' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['6月27日', '9月3日', '9月23日', '10月21日', '11月4日', '11月11日', '11月13日', '11月后'],
|
||||
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.2)' } },
|
||||
axisLabel: { color: '#9ca3af' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '市场热度',
|
||||
nameTextStyle: { color: '#9ca3af' },
|
||||
axisLine: { show: true, lineStyle: { color: 'rgba(255, 255, 255, 0.2)' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)', type: 'dashed' } },
|
||||
axisLabel: { color: '#9ca3af' }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '事件',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#A8B5FF'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#8E9DFF' },
|
||||
{ offset: 1, color: '#668CFF' }
|
||||
])
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(130, 170, 255, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(130, 170, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: [
|
||||
{ value: 20, name: '炒生肖行情再现' },
|
||||
{ value: 40, name: '神马股份涨停，板块异动' },
|
||||
{ value: 60, name: '飞马国际触及涨停' },
|
||||
{ value: 50, name: '福龙马快速涨停' },
|
||||
{ value: 80, name: '海马汽车3连板' },
|
||||
{ value: 90, name: '神马股份、福龙马涨停' },
|
||||
{ value: 100, name: '海马汽车10天6板，炒作高潮' },
|
||||
{ value: 30, name: '龙头大跌，持续性不佳' }
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: '炒作顶峰' },
|
||||
{ type: 'min', name: '行情起点' }
|
||||
],
|
||||
symbolSize: [80, 40],
|
||||
label: {
|
||||
color: '#000',
|
||||
fontFamily: 'JetBrains Mono'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#A8B5FF'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', myChart.resize);
|
||||
}
|
||||
</script>
|
||||
|
||||
document.querySelectorAll('.card-glow').forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.6s ease';
|
||||
observer.observe(card);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user