Files
vf_react/public/htmls/牛肉.html
2025-11-21 14:34:15 +08:00

675 lines
33 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

我将为您创建一个专业且炫酷的牛肉概念投资分析页面。这个页面将整合所有深度insight、新闻数据和股票信息采用现代化的设计风格。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>牛肉产业投资分析 - 周期反转与全球共振</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.dark-gradient {
background: linear-gradient(180deg, #1a1c20 0%, #2d3436 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
width: 2px;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.scroll-smooth {
scroll-behavior: smooth;
}
.text-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.neon-border {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5),
inset 0 0 20px rgba(102, 126, 234, 0.1);
}
.data-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
.timeline-line {
left: 20px;
}
}
.table-container {
overflow-x: auto;
}
.sticky-header {
position: sticky;
top: 0;
z-index: 10;
}
</style>
</head>
<body class="bg-gray-900 text-white scroll-smooth">
<!-- Hero Section -->
<section class="gradient-bg py-20 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-6 text-white">
<i class="fas fa-chart-line mr-4"></i>牛肉产业投资分析
</h1>
<p class="text-xl md:text-2xl text-purple-100 mb-8">周期反转与全球共振的黄金投资机遇</p>
<div class="flex flex-wrap justify-center gap-4 mb-8">
<span class="bg-white/20 px-6 py-3 rounded-full text-lg">
<i class="fas fa-arrow-trend-up mr-2"></i>价格弹性: +70-80%
</span>
<span class="bg-white/20 px-6 py-3 rounded-full text-lg">
<i class="fas fa-calendar mr-2"></i>周期长度: 2-3年
</span>
<span class="bg-white/20 px-6 py-3 rounded-full text-lg">
<i class="fas fa-globe mr-2"></i>全球共振
</span>
</div>
</div>
</div>
</section>
<!-- 核心观点摘要 -->
<section class="py-16 px-6 dark-gradient">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-8 text-gradient">核心观点</h2>
<div class="data-card rounded-2xl p-8 neon-border">
<p class="text-xl leading-relaxed">
当前牛肉概念处于<span class="text-purple-400 font-bold">周期反转初期</span>,驱动逻辑从政策主题转向基本面改善。
<span class="text-purple-400 font-bold">未来2-3年景气度将持续上行</span>,价格弹性或超预期。
</p>
<div class="grid md:grid-cols-3 gap-6 mt-8">
<div class="bg-gradient-to-r from-purple-600/20 to-pink-600/20 p-6 rounded-xl">
<i class="fas fa-industry text-3xl text-purple-400 mb-3"></i>
<h3 class="text-xl font-semibold mb-2">深度去化</h3>
<p class="text-gray-300">母牛存栏降3% · 犊牛降8% · 产业根基受损</p>
</div>
<div class="bg-gradient-to-r from-blue-600/20 to-cyan-600/20 p-6 rounded-xl">
<i class="fas fa-shield-halved text-3xl text-blue-400 mb-3"></i>
<h3 class="text-xl font-semibold mb-2">政策约束</h3>
<p class="text-gray-300">商务部保障措施 · 关税加征 · 进口收缩</p>
</div>
<div class="bg-gradient-to-r from-green-600/20 to-emerald-600/20 p-6 rounded-xl">
<i class="fas fa-earth-americas text-3xl text-green-400 mb-3"></i>
<h3 class="text-xl font-semibold mb-2">全球共振</h3>
<p class="text-gray-300">国际价格涨40% · 美国供给缺口 · 巴西减产</p>
</div>
</div>
</div>
</div>
</section>
<!-- 时间轴 -->
<section class="py-16 px-6 bg-gray-800">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-12 text-center">核心事件时间轴</h2>
<div class="relative">
<div class="timeline-line"></div>
<!-- 2020-2022 -->
<div class="flex items-center mb-12">
<div class="w-1/2 md:pr-8 text-right">
<div class="data-card p-6 rounded-xl card-hover">
<h3 class="text-2xl font-bold mb-2 text-purple-400">2020-2022年</h3>
<p class="text-lg">景气高点与产能扩张</p>
<ul class="mt-3 text-gray-300 text-sm">
<li>• 牛肉价格达历史峰值 86.21元/公斤</li>
<li>• 2020-2024年产量CAGR 3.5%</li>
<li>• 地方政府鼓励大规模补栏</li>
</ul>
</div>
</div>
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center pulse">
<i class="fas fa-arrow-up text-white"></i>
</div>
<div class="w-1/2 md:pl-8"></div>
</div>
<!-- 2023年 -->
<div class="flex items-center mb-12">
<div class="w-1/2 md:pr-8"></div>
<div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center pulse">
<i class="fas fa-arrow-down text-white"></i>
</div>
<div class="w-1/2 md:pl-8">
<div class="data-card p-6 rounded-xl card-hover">
<h3 class="text-2xl font-bold mb-2 text-red-400">2023年</h3>
<p class="text-lg">供需反转,价格崩塌</p>
<ul class="mt-3 text-gray-300 text-sm">
<li>• 3月开启持续下跌跌幅超13%</li>
<li>• 能繁母牛存栏下降1.9%</li>
<li>• 产能去化信号初现</li>
</ul>
</div>
</div>
</div>
<!-- 2024年 -->
<div class="flex items-center mb-12">
<div class="w-1/2 md:pr-8 text-right">
<div class="data-card p-6 rounded-xl card-hover">
<h3 class="text-2xl font-bold mb-2 text-orange-400">2024年</h3>
<p class="text-lg">深度亏损,产业动摇</p>
<ul class="mt-3 text-gray-300 text-sm">
<li>• 连续8个月亏损超1000元/头</li>
<li>• 65%以上养殖场户亏损</li>
<li>• 12月商务部启动保障措施调查</li>
</ul>
</div>
</div>
<div class="w-12 h-12 bg-orange-600 rounded-full flex items-center justify-center pulse">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
<div class="w-1/2 md:pl-8"></div>
</div>
<!-- 2025年 -->
<div class="flex items-center">
<div class="w-1/2 md:pr-8"></div>
<div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center pulse">
<i class="fas fa-chart-line text-white"></i>
</div>
<div class="w-1/2 md:pl-8">
<div class="data-card p-6 rounded-xl card-hover">
<h3 class="text-2xl font-bold mb-2 text-green-400">2025年</h3>
<p class="text-lg">周期拐点显现</p>
<ul class="mt-3 text-gray-300 text-sm">
<li>• 1-2月进口量同比下降17.4%</li>
<li>• 3月起价格淡季不淡上涨8.67%</li>
<li>• 11月预期政策落地核心催化剂</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 供需与价格分析 -->
<section class="py-16 px-6 dark-gradient">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-12">供需格局深度分析</h2>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<!-- 供给端 -->
<div class="data-card p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-purple-400">
<i class="fas fa-boxes-stacked mr-3"></i>供给端变化
</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-2">
<span>能繁母牛存栏</span>
<span class="text-red-400">↓ 3%</span>
</div>
<div class="bg-gray-700 rounded-full h-3">
<div class="bg-gradient-to-r from-red-500 to-red-600 h-3 rounded-full" style="width: 3%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span>新生犊牛</span>
<span class="text-red-400">↓ 8%</span>
</div>
<div class="bg-gray-700 rounded-full h-3">
<div class="bg-gradient-to-r from-red-500 to-red-600 h-3 rounded-full" style="width: 8%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span>全国牛存栏</span>
<span class="text-red-400">↓ 4.4%</span>
</div>
<div class="bg-gray-700 rounded-full h-3">
<div class="bg-gradient-to-r from-red-500 to-red-600 h-3 rounded-full" style="width: 4.4%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span>进口量</span>
<span class="text-red-400">↓ 17.4%</span>
</div>
<div class="bg-gray-700 rounded-full h-3">
<div class="bg-gradient-to-r from-red-500 to-red-600 h-3 rounded-full" style="width: 17.4%"></div>
</div>
</div>
</div>
</div>
<!-- 价格预测 -->
<div class="data-card p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-green-400">
<i class="fas fa-chart-column mr-3"></i>价格走势预测
</h3>
<canvas id="priceChart" width="400" height="200"></canvas>
<div class="mt-6 space-y-2">
<p class="text-sm"><span class="text-green-400">2025年:</span> 26-28元/公斤 (↑10-15%)</p>
<p class="text-sm"><span class="text-yellow-400">2026年:</span> 32-35元/公斤 (↑30-40%)</p>
<p class="text-sm"><span class="text-red-400">2027年:</span> 38-42元/公斤 (↑70-80%)</p>
</div>
</div>
</div>
</div>
</section>
<!-- 核心催化剂 -->
<section class="py-16 px-6 bg-gray-800">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-12 text-center">关键催化剂</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="data-card p-6 rounded-xl text-center card-hover">
<div class="text-5xl mb-4 text-purple-400">
<i class="fas fa-gavel"></i>
</div>
<h3 class="text-xl font-bold mb-3">政策落地</h3>
<p class="text-gray-300">2025年11月商务部保障措施终裁</p>
<div class="mt-4 text-2xl font-bold text-purple-400">核心催化</div>
</div>
<div class="data-card p-6 rounded-xl text-center card-hover">
<div class="text-5xl mb-4 text-blue-400">
<i class="fas fa-snowflake"></i>
</div>
<h3 class="text-xl font-bold mb-3">消费旺季</h3>
<p class="text-gray-300">Q4传统旺季需求环比提升30%</p>
<div class="mt-4 text-2xl font-bold text-blue-400">季节催化</div>
</div>
<div class="data-card p-6 rounded-xl text-center card-hover">
<div class="text-5xl mb-4 text-green-400">
<i class="fas fa-globe"></i>
</div>
<h3 class="text-xl font-bold mb-3">海外涨价</h3>
<p class="text-gray-300">国际价格已涨40%,传导效应显现</p>
<div class="mt-4 text-2xl font-bold text-green-400">外部催化</div>
</div>
<div class="data-card p-6 rounded-xl text-center card-hover">
<div class="text-5xl mb-4 text-orange-400">
<i class="fas fa-file-invoice-dollar"></i>
</div>
<h3 class="text-xl font-bold mb-3">业绩预增</h3>
<p class="text-gray-300">龙头Q3利润或增200%+</p>
<div class="mt-4 text-2xl font-bold text-orange-400">业绩催化</div>
</div>
</div>
</div>
</section>
<!-- 产业链分析 -->
<section class="py-16 px-6 dark-gradient">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-12">产业链价值分布</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- 上游 -->
<div class="data-card p-8 rounded-2xl text-center">
<h3 class="text-2xl font-bold mb-4 text-purple-400">上游</h3>
<p class="text-lg mb-4">种源与饲料</p>
<div class="text-3xl font-bold mb-4">15-25% 毛利率</div>
<div class="space-y-2 text-left">
<p>• 天山生物(育种)</p>
<p>• 禾丰股份、海大集团(饲料)</p>
<p>• 福成股份、西部牧业(养殖)</p>
</div>
</div>
<!-- 中游 -->
<div class="data-card p-8 rounded-2xl text-center">
<h3 class="text-2xl font-bold mb-4 text-blue-400">中游</h3>
<p class="text-lg mb-4">屠宰加工</p>
<div class="text-3xl font-bold mb-4">6-13% 毛利率</div>
<div class="space-y-2 text-left">
<p>• 光明肉业(银蕨农场)</p>
<p>• 得利斯(产能利用率关键)</p>
</div>
</div>
<!-- 下游 -->
<div class="data-card p-8 rounded-2xl text-center">
<h3 class="text-2xl font-bold mb-4 text-green-400">下游</h3>
<p class="text-lg mb-4">品牌与渠道</p>
<div class="text-3xl font-bold mb-4">25-35% 毛利率</div>
<div class="space-y-2 text-left">
<p>• 福成股份(肥牛品牌)</p>
<p>• 光明肉业(银蕨品牌)</p>
<p>• 味知香(预制菜)</p>
</div>
</div>
</div>
</div>
</section>
<!-- 核心公司股票数据 -->
<section class="py-16 px-6 bg-gray-800">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-12 text-center">核心上市公司分析</h2>
<div class="table-container">
<table class="w-full data-card rounded-lg overflow-hidden">
<thead class="sticky-header bg-gradient-to-r from-purple-600 to-pink-600">
<tr>
<th class="p-4 text-left">股票代码</th>
<th class="p-4 text-left">股票名称</th>
<th class="p-4 text-left">业务分类</th>
<th class="p-4 text-left">核心业务</th>
<th class="p-4 text-left">投资逻辑</th>
<th class="p-4 text-center">推荐评级</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="p-4">600965</td>
<td class="p-4 font-bold text-green-400">福成股份</td>
<td class="p-4"><span class="bg-purple-600/30 px-2 py-1 rounded">养殖</span></td>
<td class="p-4 text-sm">三个养牛场活牛存栏容纳能力达到四万头2025年上半年活牛存栏3.44万头</td>
<td class="p-4 text-sm">全产业链区域龙头,华北渠道强,"福成肥牛"品牌知名度高</td>
<td class="p-4 text-center">
<span class="text-2xl">⭐⭐⭐⭐</span>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="p-4">300313</td>
<td class="p-4 font-bold text-blue-400">天山生物</td>
<td class="p-4"><span class="bg-orange-600/30 px-2 py-1 rounded">育种</span></td>
<td class="p-4 text-sm">我国唯一专业从事牛品种改良的上市公司,将打造自有鲜牛肉品牌</td>
<td class="p-4 text-sm">稀缺育种标的,掌握核心种源,长期成长确定</td>
<td class="p-4 text-center">
<span class="text-2xl">⭐⭐⭐</span>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="p-4">600073</td>
<td class="p-4 font-bold text-purple-400">光明肉业</td>
<td class="p-4"><span class="bg-green-600/30 px-2 py-1 rounded">加工</span></td>
<td class="p-4 text-sm">控股新西兰银蕨农场市占率30%2025Q1净利润同比+312%</td>
<td class="p-4 text-sm">海外资源龙头,直接受益全球涨价,业绩弹性最大</td>
<td class="p-4 text-center">
<span class="text-2xl">⭐⭐⭐⭐⭐</span>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="p-4">002330</td>
<td class="p-4 font-bold text-yellow-400">得利斯</td>
<td class="p-4"><span class="bg-blue-600/30 px-2 py-1 rounded">加工</span></td>
<td class="p-4 text-sm">主要业务之一为牛肉精深加工行业</td>
<td class="p-4 text-sm">纯屠宰企业,当前仍亏损,产能利用率是关键</td>
<td class="p-4 text-center">
<span class="text-2xl">⭐⭐</span>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="p-4">605089</td>
<td class="p-4 font-bold text-cyan-400">味知香</td>
<td class="p-4"><span class="bg-green-600/30 px-2 py-1 rounded">预制菜</span></td>
<td class="p-4 text-sm">牛肉类产品占比较大(预制菜)</td>
<td class="p-4 text-sm">受益消费升级,牛肉预制菜需求增长</td>
<td class="p-4 text-center">
<span class="text-2xl">⭐⭐⭐</span>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="p-4">300106</td>
<td class="p-4 font-bold text-green-400">西部牧业</td>
<td class="p-4"><span class="bg-purple-600/30 px-2 py-1 rounded">养殖</span></td>
<td class="p-4 text-sm">建设肉牛专业育肥基地,与肉牛养殖专业合作社建立合作关系</td>
<td class="p-4 text-sm">乳肉兼营,受益原奶+牛肉双周期</td>
<td class="p-4 text-center">
<span class="text-2xl">⭐⭐⭐</span>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="p-4">000061</td>
<td class="p-4 font-bold text-red-400">农产品</td>
<td class="p-4"><span class="bg-red-600/30 px-2 py-1 rounded">贸易</span></td>
<td class="p-4 text-sm">引进的南美牛肉等核心品类的规模稳健增长</td>
<td class="p-4 text-sm">进口贸易商,政策收紧直接受损,建议规避</td>
<td class="p-4 text-center">
<span class="text-2xl"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 投资策略 -->
<section class="py-16 px-6 dark-gradient">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-12 text-center">投资策略建议</h2>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<!-- 第一梯队 -->
<div class="data-card p-8 rounded-2xl neon-border">
<div class="text-3xl font-bold mb-4 text-green-400">第一梯队</div>
<div class="text-xl mb-4">海外资源型(首选)</div>
<div class="bg-green-600/20 p-4 rounded-lg mb-4">
<p class="font-bold text-green-400 mb-2">核心标的:光明肉业</p>
<p class="text-sm">逻辑最顺 · 弹性最大</p>
<p class="text-sm mt-2">2027年利润或达5亿元对应PE仅5-6倍</p>
</div>
<div class="text-sm space-y-1">
<p>• 仓位建议60%</p>
<p>• 持有周期至2027年景气高点</p>
</div>
</div>
<!-- 第二梯队 -->
<div class="data-card p-8 rounded-2xl neon-border">
<div class="text-3xl font-bold mb-4 text-blue-400">第二梯队</div>
<div class="text-xl mb-4">全产业链型(次优)</div>
<div class="bg-blue-600/20 p-4 rounded-lg mb-4">
<p class="font-bold text-blue-400 mb-2">核心标的:福成股份</p>
<p class="text-sm">双轮驱动 · 品牌护城河</p>
<p class="text-sm mt-2">存栏3.44万头具备扩张潜力</p>
</div>
<div class="text-sm space-y-1">
<p>• 仓位建议30%</p>
<p>• 持有周期:中期配置</p>
</div>
</div>
<!-- 第三梯队 -->
<div class="data-card p-8 rounded-2xl neon-border">
<div class="text-3xl font-bold mb-4 text-purple-400">第三梯队</div>
<div class="text-xl mb-4">育种核心(长期)</div>
<div class="bg-purple-600/20 p-4 rounded-lg mb-4">
<p class="font-bold text-purple-400 mb-2">核心标的:天山生物</p>
<p class="text-sm">产业升级 · 种源卡脖子</p>
<p class="text-sm mt-2">技术壁垒高,业绩释放慢</p>
</div>
<div class="text-sm space-y-1">
<p>• 仓位建议10%</p>
<p>• 持有周期:卫星仓位</p>
</div>
</div>
</div>
<!-- 风险提示 -->
<div class="bg-red-900/30 border border-red-600 p-6 rounded-xl">
<h3 class="text-2xl font-bold mb-4 text-red-400">
<i class="fas fa-triangle-exclamation mr-2"></i>风险提示
</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-bold mb-2 text-red-300">需求风险</h4>
<ul class="text-sm text-gray-300 space-y-1">
<li>• 消费降级导致高价蛋白需求萎缩</li>
<li>• 餐饮端恢复不及预期</li>
</ul>
</div>
<div>
<h4 class="font-bold mb-2 text-red-300">政策风险</h4>
<ul class="text-sm text-gray-300 space-y-1">
<li>• 保障措施力度不及预期</li>
<li>• 贸易反制措施</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 border-t border-gray-800 py-8 px-6">
<div class="max-w-7xl mx-auto text-center">
<p class="text-gray-400">© 2025 牛肉产业投资分析报告 | 数据来源:公开信息整理</p>
<p class="text-gray-500 text-sm mt-2">投资有风险,入市需谨慎</p>
</div>
</footer>
<script>
// 价格走势图表
const ctx = document.getElementById('priceChart').getContext('2d');
const priceChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2024', '2025', '2026', '2027', '2028'],
datasets: [{
label: '牛肉价格预测(元/公斤)',
data: [24, 27, 34, 40, 38],
borderColor: 'rgb(168, 85, 247)',
backgroundColor: 'rgba(168, 85, 247, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
color: 'white'
}
}
},
scales: {
y: {
beginAtZero: false,
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: 'white'
}
},
x: {
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: 'white'
}
}
}
}
});
// 滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 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(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
这个HTML页面提供了一个专业、炫酷且功能丰富的牛肉产业投资分析界面。主要特点包括
## 🎯 核心功能
1. **完整的内容展示** - 整合了所有insight分析、新闻数据和股票信息
2. **交互式时间轴** - 展示核心事件演进过程
3. **数据可视化** - 包含价格走势图表和供需进度条
4. **详细股票表格** - 清晰展示相关上市公司信息,支持水平滚动
5. **投资策略建议** - 分梯队展示投资标的和建议
## 💫 设计亮点
- **渐变色主题** - 紫色到粉色的渐变,营造专业金融感
- **玻璃态效果** - 半透明卡片配合模糊背景
- **霓虹光效** - 重要元素添加发光边框
- **响应式布局** - 完美适配桌面和移动设备
- **平滑动画** - 滚动触发的渐入效果
- **微交互** - 悬停效果和脉冲动画
## 📊 数据展示
- 三重共振驱动逻辑的可视化
- 供需端变化进度条
- 价格预测折线图
- 产业链价值分布
- 核心公司评级表格
页面保留了insight的绝大部分关键内容包括周期分析、产能去化、政策影响、全球格局等核心观点并通过现代化的设计语言让信息更易理解和吸收。