580 lines
29 KiB
HTML
580 lines
29 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>影视IP概念分析报告</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" 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/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
||
}
|
||
.gradient-bg {
|
||
background: linear-gradient(135deg, #1a2a6c, #2a4365, #3182ce);
|
||
}
|
||
.card-shadow {
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
}
|
||
.timeline-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
background-color: #4299e1;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: -6px;
|
||
top: 5px;
|
||
}
|
||
.timeline-line {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 17px;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background-color: #cbd5e0;
|
||
}
|
||
.highlight-text {
|
||
background: linear-gradient(120deg, #a78bfa 0%, #60a5fa 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-weight: 700;
|
||
}
|
||
.table-responsive {
|
||
overflow-x: auto;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.table-responsive {
|
||
overflow-x: scroll;
|
||
}
|
||
}
|
||
#particles-js {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<div id="particles-js"></div>
|
||
|
||
<div class="container mx-auto px-4 py-8 max-w-6xl relative z-10">
|
||
<!-- 标题部分 -->
|
||
<div class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">影视IP概念分析报告</h1>
|
||
<p class="text-xl text-gray-600">从"票房驱动"到"IP资产货币化"的产业升级</p>
|
||
</div>
|
||
|
||
<!-- 概念事件时间轴 -->
|
||
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<i class="fas fa-history text-blue-500 mr-3"></i>概念事件时间轴
|
||
</h2>
|
||
<div class="relative pl-8">
|
||
<div class="timeline-line"></div>
|
||
|
||
<div class="relative mb-8">
|
||
<div class="timeline-dot"></div>
|
||
<div class="bg-blue-50 rounded-lg p-4">
|
||
<h3 class="font-bold text-lg text-blue-700">2024年10月</h3>
|
||
<p class="text-gray-700">中共中央政治局集体学习"文化强国"，政策明确支持影视IP出海（浙江、湖南等地出台配套政策）</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative mb-8">
|
||
<div class="timeline-dot"></div>
|
||
<div class="bg-blue-50 rounded-lg p-4">
|
||
<h3 class="font-bold text-lg text-blue-700">2025年1月</h3>
|
||
<p class="text-gray-700">春节档《哪吒2》上映，<span class="highlight-text">票房突破149亿元</span>（猫眼预测160亿+），刷新国产动画全球纪录，衍生品首月销售额<span class="highlight-text">超3亿元</span>（淘宝数据）</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative mb-8">
|
||
<div class="timeline-dot"></div>
|
||
<div class="bg-blue-50 rounded-lg p-4">
|
||
<h3 class="font-bold text-lg text-blue-700">2025年2月</h3>
|
||
<p class="text-gray-700">光线传媒因《哪吒2》股价5天3板，影视IP板块集体走强（横店影视、上海电影等跟涨）</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<div class="timeline-dot"></div>
|
||
<div class="bg-blue-50 rounded-lg p-4">
|
||
<h3 class="font-bold text-lg text-blue-700">2025年3月</h3>
|
||
<p class="text-gray-700">天风证券提出"IP×衍生品×全球化"共振逻辑，布鲁可（国产积木）因"奥特曼×积木"单品销售破亿，验证IP商业化能力</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心观点摘要 -->
|
||
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl card-shadow p-6 mb-8 text-white">
|
||
<h2 class="text-2xl font-bold mb-4 flex items-center">
|
||
<i class="fas fa-lightbulb text-yellow-300 mr-3"></i>核心观点摘要
|
||
</h2>
|
||
<blockquote class="text-xl italic mb-4">
|
||
影视IP已从"票房驱动"升级为<span class="font-bold text-yellow-300">"IP资产货币化"</span>阶段，<span class="font-bold text-yellow-300">技术（AI+虚拟拍摄）+政策（文化出海）+消费（谷子经济）</span>三重共振下，头部公司正通过<span class="font-bold text-yellow-300">衍生品、游戏、出海</span>打开第二成长曲线。<span class="font-bold text-yellow-300">当前处于基本面兑现初期，预期差在于IP储备的深度变现能力</span>。
|
||
</blockquote>
|
||
</div>
|
||
|
||
<!-- 核心逻辑与市场认知分析 -->
|
||
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<i class="fas fa-brain text-purple-500 mr-3"></i>核心逻辑与市场认知分析
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||
<div class="bg-purple-50 rounded-lg p-5">
|
||
<h3 class="font-bold text-lg text-purple-700 mb-3">核心驱动力</h3>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-microchip text-purple-500 mt-1 mr-2"></i>
|
||
<span><strong>技术降本</strong>：AI缩短动画制作周期50%+（华策影视路演），虚拟拍摄降低实景成本30%（上海电影案例）</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-landmark text-purple-500 mt-1 mr-2"></i>
|
||
<span><strong>政策红利</strong>：2024年文化出海政策明确，《庆余年2》首次实现迪士尼同步更新（研报数据），验证国产IP全球竞争力</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-shopping-cart text-purple-500 mt-1 mr-2"></i>
|
||
<span><strong>消费场景扩容</strong>：谷子经济爆发，《哪吒2》衍生品首月GMV 3亿（泡泡玛特、卡游等参与），IP从"内容"升级为"消费品"</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-blue-50 rounded-lg p-5">
|
||
<h3 class="font-bold text-lg text-blue-700 mb-3">市场热度与情绪</h3>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-newspaper text-blue-500 mt-1 mr-2"></i>
|
||
<span><strong>新闻端</strong>：2025年2月"影视IP"关键词搜索量同比<span class="highlight-text">+340%</span>（百度指数），板块估值从23倍PE升至35倍（海通传媒数据）</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-exclamation-triangle text-blue-500 mt-1 mr-2"></i>
|
||
<span><strong>分歧点</strong>：市场过度关注票房，<span class="highlight-text">忽视衍生品毛利率（70%+）和出海授权的长期现金流</span>（上海电影IP授权GMV 10亿→目标100亿）</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-green-50 rounded-lg p-5">
|
||
<h3 class="font-bold text-lg text-green-700 mb-3">预期差分析</h3>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-chart-line text-green-500 mt-1 mr-2"></i>
|
||
<span><strong>IP储备变现率</strong>：上海电影60个经典IP中仅<span class="highlight-text"><20%</span>深度开发（路演数据），对比迪士尼IP利用率>60%</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-globe text-green-500 mt-1 mr-2"></i>
|
||
<span><strong>出海溢价</strong>：东南亚市场华语内容单价<span class="highlight-text">10万美元/集</span>（柠萌影视），但国产IP渗透率仅5%（研报数据）</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关键催化剂与未来发展路径 -->
|
||
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<i class="fas fa-rocket text-red-500 mr-3"></i>关键催化剂与未来发展路径
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div>
|
||
<h3 class="font-bold text-xl text-red-600 mb-4">近期催化剂（3-6个月）</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex items-start">
|
||
<div class="bg-red-100 rounded-full p-2 mr-3">
|
||
<i class="fas fa-film text-red-600"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-800">《中国奇谭2》定档2025暑期</h4>
|
||
<p class="text-gray-600">上海电影出品，AI技术赋能制作成本下降20%</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start">
|
||
<div class="bg-red-100 rounded-full p-2 mr-3">
|
||
<i class="fas fa-file-alt text-red-600"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-800">光线传媒《姜子牙2》备案通过</h4>
|
||
<p class="text-gray-600">国家电影局批准，动画IP续作预期差大</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start">
|
||
<div class="bg-red-100 rounded-full p-2 mr-3">
|
||
<i class="fas fa-store text-red-600"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-800">泡泡玛特海外门店破200家</h4>
|
||
<p class="text-gray-600">2025Q1目标，验证IP全球化渠道能力</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-bold text-xl text-red-600 mb-4">长期路径（2025-2027）</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex items-start">
|
||
<div class="bg-red-100 rounded-full p-2 mr-3">
|
||
<span class="font-bold text-red-600">阶段1</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-800">2025年：票房+衍生品双轮驱动</h4>
|
||
<p class="text-gray-600">头部IP衍生品收入占比提升至30%（当前<10%）</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start">
|
||
<div class="bg-red-100 rounded-full p-2 mr-3">
|
||
<span class="font-bold text-red-600">阶段2</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-800">2026-2027年：出海授权爆发</h4>
|
||
<p class="text-gray-600">东南亚/北美市场贡献收入占比达25%（当前<5%）</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start">
|
||
<div class="bg-red-100 rounded-full p-2 mr-3">
|
||
<span class="font-bold text-red-600">阶段3</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-800">2027年+：AI生成式IP</h4>
|
||
<p class="text-gray-600">虚拟偶像"哪吒"等打开元宇宙场景</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产业链与核心公司深度剖析 -->
|
||
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<i class="fas fa-project-diagram text-indigo-500 mr-3"></i>产业链与核心公司深度剖析
|
||
</h2>
|
||
|
||
<div class="mb-8">
|
||
<h3 class="font-bold text-xl text-indigo-600 mb-4">产业链图谱</h3>
|
||
<div class="flex flex-wrap justify-center gap-4">
|
||
<div class="bg-indigo-100 rounded-lg px-4 py-2 text-center">
|
||
<i class="fas fa-pen-fancy text-indigo-600 mb-1"></i>
|
||
<p class="font-bold text-indigo-800">上游</p>
|
||
<p class="text-sm text-indigo-700">IP创作</p>
|
||
<p class="text-xs text-gray-600">阅文集团、上海电影</p>
|
||
</div>
|
||
<div class="bg-indigo-200 rounded-lg px-4 py-2 text-center">
|
||
<i class="fas fa-video text-indigo-600 mb-1"></i>
|
||
<p class="font-bold text-indigo-800">中游</p>
|
||
<p class="text-sm text-indigo-700">影视制作</p>
|
||
<p class="text-xs text-gray-600">光线传媒、华策影视</p>
|
||
</div>
|
||
<div class="bg-indigo-300 rounded-lg px-4 py-2 text-center">
|
||
<i class="fas fa-shopping-bag text-indigo-600 mb-1"></i>
|
||
<p class="font-bold text-indigo-800">下游</p>
|
||
<p class="text-sm text-indigo-700">衍生品、游戏、出海</p>
|
||
<p class="text-xs text-gray-600">泡泡玛特、布鲁可、恺英网络、柠萌影视</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-bold text-xl text-indigo-600 mb-4">核心玩家对比</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full bg-white border border-gray-200">
|
||
<thead>
|
||
<tr class="bg-gray-100">
|
||
<th class="py-3 px-4 border-b text-left font-bold text-gray-700">公司</th>
|
||
<th class="py-3 px-4 border-b text-left font-bold text-gray-700">核心IP</th>
|
||
<th class="py-3 px-4 border-b text-left font-bold text-gray-700">2025催化事件</th>
|
||
<th class="py-3 px-4 border-b text-left font-bold text-gray-700">风险点</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="py-3 px-4 border-b font-bold text-gray-800">光线传媒</td>
|
||
<td class="py-3 px-4 border-b">《哪吒》《姜子牙》系列</td>
|
||
<td class="py-3 px-4 border-b">《姜子牙2》备案+衍生品补位</td>
|
||
<td class="py-3 px-4 border-b">过度依赖单IP票房</td>
|
||
</tr>
|
||
<tr class="bg-gray-50">
|
||
<td class="py-3 px-4 border-b font-bold text-gray-800">上海电影</td>
|
||
<td class="py-3 px-4 border-b">60个经典IP（葫芦兄弟等）</td>
|
||
<td class="py-3 px-4 border-b">《中国奇谭2》+AI模型落地</td>
|
||
<td class="py-3 px-4 border-b">IP授权进度不及预期</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="py-3 px-4 border-b font-bold text-gray-800">泡泡玛特</td>
|
||
<td class="py-3 px-4 border-b">自有IP+联名（哪吒）</td>
|
||
<td class="py-3 px-4 border-b">海外门店扩张至200家</td>
|
||
<td class="py-3 px-4 border-b">库存管理压力（盲盒模式）</td>
|
||
</tr>
|
||
<tr class="bg-gray-50">
|
||
<td class="py-3 px-4 border-b font-bold text-gray-800">布鲁可</td>
|
||
<td class="py-3 px-4 border-b">奥特曼×积木</td>
|
||
<td class="py-3 px-4 border-b">全球化渠道（TEMU/亚马逊）</td>
|
||
<td class="py-3 px-4 border-b">授权到期风险（2027年奥特曼）</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="bg-red-50 rounded-lg p-4">
|
||
<h4 class="font-bold text-red-700 mb-2">证伪信号</h4>
|
||
<p>若《中国奇谭2》豆瓣评分<8.0，则IP焕新逻辑受损</p>
|
||
</div>
|
||
<div class="bg-green-50 rounded-lg p-4">
|
||
<h4 class="font-bold text-green-700 mb-2">验证信号</h4>
|
||
<p>上海电影2025年IP授权GMV若<span class="highlight-text">>30亿</span>（当前10亿），则超预期</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 潜在风险与挑战 -->
|
||
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<i class="fas fa-exclamation-triangle text-yellow-500 mr-3"></i>潜在风险与挑战
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="bg-yellow-50 rounded-lg p-5">
|
||
<h3 class="font-bold text-lg text-yellow-700 mb-3 flex items-center">
|
||
<i class="fas fa-microchip text-yellow-600 mr-2"></i>技术风险
|
||
</h3>
|
||
<p class="text-gray-700">AI生成影视内容存在版权争议（如训练数据来源）</p>
|
||
</div>
|
||
|
||
<div class="bg-yellow-50 rounded-lg p-5">
|
||
<h3 class="font-bold text-lg text-yellow-700 mb-3 flex items-center">
|
||
<i class="fas fa-coins text-yellow-600 mr-2"></i>商业化风险
|
||
</h3>
|
||
<p class="text-gray-700">衍生品库存周转天数<span class="highlight-text">282天</span>（柠萌影视），若爆款不及预期将拖累现金流</p>
|
||
</div>
|
||
|
||
<div class="bg-yellow-50 rounded-lg p-5">
|
||
<h3 class="font-bold text-lg text-yellow-700 mb-3 flex items-center">
|
||
<i class="fas fa-landmark text-yellow-600 mr-2"></i>政策风险
|
||
</h3>
|
||
<p class="text-gray-700">进口片配额调整可能影响国产IP出海节奏（如《庆余年2》北美同步需配额）</p>
|
||
</div>
|
||
|
||
<div class="bg-yellow-50 rounded-lg p-5">
|
||
<h3 class="font-bold text-lg text-yellow-700 mb-3 flex items-center">
|
||
<i class="fas fa-info-circle text-yellow-600 mr-2"></i>信息矛盾
|
||
</h3>
|
||
<p class="text-gray-700">路演显示光线传媒衍生品滞后，但新闻称"首月3亿销售"，需跟踪实际分成比例</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 综合结论与投资启示 -->
|
||
<div class="bg-gradient-to-r from-green-600 to-teal-700 rounded-xl card-shadow p-6 mb-8 text-white">
|
||
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||
<i class="fas fa-chart-line text-yellow-300 mr-3"></i>综合结论与投资启示
|
||
</h2>
|
||
|
||
<div class="mb-6">
|
||
<h3 class="font-bold text-xl mb-3">阶段判断</h3>
|
||
<p class="text-lg">影视IP已从<span class="font-bold text-yellow-300">主题炒作（2023年AI概念）</span>进入<span class="font-bold text-yellow-300">基本面驱动（2025年衍生品兑现）</span></p>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h3 class="font-bold text-xl mb-3">高价值方向</h3>
|
||
<ol class="list-decimal pl-5 space-y-2">
|
||
<li><span class="font-bold text-yellow-300">IP储备变现</span>：上海电影（60个IP+AI技术）>光线传媒（单IP依赖）</li>
|
||
<li><span class="font-bold text-yellow-300">出海渠道</span>：泡泡玛特（海外门店）>布鲁可（授权模式）</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-bold text-xl mb-3">关键跟踪指标</h3>
|
||
<ul class="space-y-2">
|
||
<li><strong>上海电影</strong>：2025年IP授权GMV增速（季度环比>50%）</li>
|
||
<li><strong>光线传媒</strong>：《姜子牙2》备案进展+衍生品SKU数量（目标>100款）</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="mt-6 p-4 bg-white bg-opacity-20 rounded-lg">
|
||
<p class="text-xl font-bold text-center">影视IP的α来自<span class="text-yellow-300">"IP资产货币化能力"</span>，而非票房弹性。当前估值未充分反映衍生品和出海的长期现金流，<span class="text-yellow-300">建议超配IP储备深厚+技术赋能的龙头</span>。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关联股票数据表格 -->
|
||
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<i class="fas fa-table text-blue-500 mr-3"></i>关联股票数据
|
||
</h2>
|
||
|
||
<div class="table-responsive">
|
||
<table class="min-w-full bg-white border border-gray-200">
|
||
<thead>
|
||
<tr class="bg-gray-100">
|
||
<th class="py-3 px-4 border-b text-left font-bold text-gray-700">股票名称</th>
|
||
<th class="py-3 px-4 border-b text-left font-bold text-gray-700">行业</th>
|
||
<th class="py-3 px-4 border-b text-left font-bold text-gray-700">分类</th>
|
||
<th class="py-3 px-4 border-b text-left font-bold text-gray-700">原因</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="stockTableBody">
|
||
<!-- 股票数据将通过JavaScript动态填充 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
|
||
<script>
|
||
// 股票数据
|
||
const stockData = [{'影视IP(250213)': [{'stock': '博纳影业', '行业': '影视/IP', '分类': '电影-发行', '原因': '参与电影发行项目'}, {'stock': '万达电影', '行业': '影视/IP', '分类': '电影-发行', '原因': '参与电影发行项目'}, {'stock': '中国电影', '行业': '影视/IP', '分类': '电影-发行', '原因': '参与电影发行项目'}, {'stock': '上海电影', '行业': '影视/IP', '分类': '电影-发行', '原因': '参与电影发行项目'}, {'stock': '横店影视', '行业': '影视/IP', '分类': '电影-发行', '原因': '参与电影发行项目'}, {'stock': '北京文化', '行业': '影视/IP', '分类': '电影-发行', '原因': '参与电影发行项目'}, {'stock': '华谊兄弟', '行业': '影视/IP', '分类': '电影-发行', '原因': '参与电影发行项目'}, {'stock': '光线传媒', '行业': '影视/IP', '分类': '电影-发行', '原因': '参与电影发行项目'}, {'stock': '金逸影视', '行业': '影视/IP', '分类': '电影-院线', '原因': '院线运营'}, {'stock': '博纳影业', '行业': '影视/IP', '分类': '电影-院线', '原因': '院线运营'}, {'stock': '万达电影', '行业': '影视/IP', '分类': '电影-院线', '原因': '院线运营'}, {'stock': '横店影视', '行业': '影视/IP', '分类': '电影-院线', '原因': '院线运营'}, {'stock': '幸福蓝海', '行业': '影视/IP', '分类': '电影-院线', '原因': '院线运营'}, {'stock': '中国电影', '行业': '影视/IP', '分类': '电影-院线', '原因': '院线运营'}, {'stock': '上海电影', '行业': '影视/IP', '分类': '电影-院线', '原因': '院线运营'}, {'stock': '欢瑞世纪', '行业': '影视/IP', '分类': '电影-经纪方', '原因': '艺人经纪业务'}, {'stock': '华谊兄弟', '行业': '影视/IP', '分类': '电影-经纪方', '原因': '艺人经纪业务'}, {'stock': '华策影视', '行业': '影视/IP', '分类': '电影-经纪方', '原因': '艺人经纪业务'}, {'stock': '芒果超媒', '行业': '影视/IP', '分类': '电影-经纪方', '原因': '艺人经纪业务'}, {'stock': '北京文化', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '欢瑞世纪', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '慈文传媒', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '万达电影', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '浙文影业', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '华谊兄弟', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '华策影视', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '光线传媒', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '百纳千成', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '唐德影视', '行业': '影视/IP', '分类': '电视剧-发行', '原因': '电视剧发行项目'}, {'stock': '奥飞娱乐', '行业': '影视/IP', '分类': '动漫制作', '原因': '动漫制作业务'}, {'stock': '恒信东方', '行业': '影视/IP', '分类': '动漫制作', '原因': '动漫制作业务'}, {'stock': '光线传媒', '行业': '影视/IP', '分类': '动漫制作', '原因': '动漫制作业务'}, {'stock': '祥源文旅', '行业': '影视/IP', '分类': '动漫制作', '原因': '动漫制作业务'}, {'stock': '上海电影', '行业': '影视/IP', '分类': '动漫制作', '原因': '动漫制作业务'}, {'stock': '上海电影', '行业': '影视/IP', '分类': 'IP', '原因': 'IP开发与运营'}, {'stock': '游族网络', '行业': '影视/IP', '分类': 'IP', '原因': 'IP开发与运营'}, {'stock': '奥飞娱乐', '行业': '影视/IP', '分类': 'IP', '原因': 'IP开发与运营'}, {'stock': '华星创业', '行业': '影视/IP', '分类': 'IP', '原因': 'IP开发与运营'}, {'stock': '光线传媒', '行业': '影视/IP', '分类': 'IP', '原因': 'IP开发与运营'}, {'stock': '大丰实业', '行业': '影视/IP', '分类': 'IP', '原因': 'IP开发与运营'}]}];
|
||
|
||
// 填充股票数据表格
|
||
function populateStockTable() {
|
||
const tableBody = document.getElementById('stockTableBody');
|
||
const stocks = stockData[0]['影视IP(250213)'];
|
||
|
||
stocks.forEach((stock, index) => {
|
||
const row = document.createElement('tr');
|
||
if (index % 2 === 0) {
|
||
row.classList.add('bg-gray-50');
|
||
}
|
||
|
||
row.innerHTML = `
|
||
<td class="py-3 px-4 border-b font-medium text-gray-800">${stock.stock}</td>
|
||
<td class="py-3 px-4 border-b">${stock.行业}</td>
|
||
<td class="py-3 px-4 border-b">
|
||
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">${stock.分类}</span>
|
||
</td>
|
||
<td class="py-3 px-4 border-b">${stock.原因}</td>
|
||
`;
|
||
|
||
tableBody.appendChild(row);
|
||
});
|
||
}
|
||
|
||
// 初始化粒子背景
|
||
function initParticles() {
|
||
tsParticles.load("particles-js", {
|
||
particles: {
|
||
number: {
|
||
value: 80,
|
||
density: {
|
||
enable: true,
|
||
value_area: 800
|
||
}
|
||
},
|
||
color: {
|
||
value: "#3b82f6"
|
||
},
|
||
shape: {
|
||
type: "circle",
|
||
stroke: {
|
||
width: 0,
|
||
color: "#000000"
|
||
}
|
||
},
|
||
opacity: {
|
||
value: 0.5,
|
||
random: false,
|
||
anim: {
|
||
enable: false,
|
||
speed: 1,
|
||
opacity_min: 0.1,
|
||
sync: false
|
||
}
|
||
},
|
||
size: {
|
||
value: 3,
|
||
random: true,
|
||
anim: {
|
||
enable: false,
|
||
speed: 40,
|
||
size_min: 0.1,
|
||
sync: false
|
||
}
|
||
},
|
||
line_linked: {
|
||
enable: true,
|
||
distance: 150,
|
||
color: "#93c5fd",
|
||
opacity: 0.4,
|
||
width: 1
|
||
},
|
||
move: {
|
||
enable: true,
|
||
speed: 2,
|
||
direction: "none",
|
||
random: false,
|
||
straight: false,
|
||
out_mode: "out",
|
||
bounce: false,
|
||
attract: {
|
||
enable: false,
|
||
rotateX: 600,
|
||
rotateY: 1200
|
||
}
|
||
}
|
||
},
|
||
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
|
||
}
|
||
},
|
||
bubble: {
|
||
distance: 400,
|
||
size: 40,
|
||
duration: 2,
|
||
opacity: 8,
|
||
speed: 3
|
||
},
|
||
repulse: {
|
||
distance: 200,
|
||
duration: 0.4
|
||
},
|
||
push: {
|
||
particles_nb: 4
|
||
},
|
||
remove: {
|
||
particles_nb: 2
|
||
}
|
||
}
|
||
},
|
||
retina_detect: true
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
populateStockTable();
|
||
initParticles();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
``` |