vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay function

Browse Source
This commit is contained in:
zzlgreat
2025-11-21 14:34:15 +08:00
parent 0aa050b95f
commit 564caa08c2
10 changed files with 6355 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

675
public/htmls/牛肉.html Normal file
View File

@@ -0,0 +1,675 @@
我将为您创建一个专业且炫酷的牛肉概念投资分析页面。这个页面将整合所有深度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的绝大部分关键内容，包括周期分析、产能去化、政策影响、全球格局等核心观点，并通过现代化的设计语言让信息更易理解和吸收。