Compare commits

...

108 Commits

Author SHA1 Message Date
zdl
1fc9f4790f pref: 清理建议
6.1 立即可删除(安全)

  以下文件可以立即删除,不会影响任何功能:

  # 未使用的组件
  src/views/Community/components/EventList.js
  src/views/Community/components/EventListSection.js
  src/views/Community/components/EventTimelineHeader.js
  src/views/Community/components/MarketReviewCard.js
  src/views/Community/components/UnifiedSearchBox.js
  src/views/Community/components/ImportanceLegend.js
  src/views/Community/components/IndustryCascader.js
  src/views/Community/components/EventDetailModal.js

  # 未使用的CSS
  src/views/Community/components/EventList.css

  # 备份文件
  src/views/Community/components/EventList.js.bak

  # 测试文档
  src/views/Community/components/DynamicNewsDetail/1.md

  预计减少代码量:~2000行代码
2025-11-19 21:27:24 +08:00
b48ff99658 update pay function 2025-11-19 20:44:35 +08:00
ae558996b6 update pay function 2025-11-19 20:23:56 +08:00
71742c0116 update pay function 2025-11-19 20:15:27 +08:00
2ead50c37c update pay function 2025-11-19 19:55:07 +08:00
9e8519bb94 Merge branch 'feature_2025/251117_pref' of https://git.valuefrontier.cn/vf/vf_react into feature_2025/251117_pref 2025-11-19 19:41:59 +08:00
a4d16e7686 update pay function 2025-11-19 19:41:26 +08:00
zdl
3eb31c99dc fixbug: limit-analyse日历UI调整 2025-11-19 19:13:12 +08:00
zdl
5f6b4b083b feat: 修复前的 DAU 数据无法补充(PostHog 未收到事件) 2025-11-19 17:17:54 +08:00
zdl
905023c056 feat: Chakra UI 升级 2025-11-19 16:16:21 +08:00
zdl
25cc28e03b feat: 完全移除邮箱登录代码
移除 registerWithEmail 方法
     移除 sendEmailCode 方法
     已从导出对象中移除 registerWithEmail 和 sendEmailCode。
2025-11-19 16:15:50 +08:00
zdl
5f9901a098 feat: 清理过时代码:移除 AuthContext.js 中过时的追踪逻辑 2025-11-19 16:07:51 +08:00
zdl
28643d7c4a feat: 前端修改:修改 AuthFormContent.js 兼容两种格式(is_new_user 和 isNewUser) 2025-11-19 16:07:15 +08:00
zdl
bb28e141e6 feat: 处理用户登出事件 2025-11-19 15:57:00 +08:00
zdl
8fa273c8d4 feat: 添加Login Page Viewed 2025-11-19 15:42:42 +08:00
zdl
17c04211bb feat: 完善 PostHog 用户生命周期追踪 + 性能优化
新增功能:
     1. 首次访问追踪 (first_visit)
        - 记录用户来源(referrer、UTM参数)
        - 记录落地页
        - 使用 localStorage 永久标记

     2. 首次登录追踪 (first_login)
        - 区分首次登录和后续登录
        - 按用户 ID 独立标记
        - 用于计算新用户激活率

     3. 登录/登出事件追踪
        - 登录成功追踪 (user_logged_in)
        - 登出事件追踪 (user_logged_out,必须在 resetUser 之前)
        - 注册事件追踪 (user_registered)

     4. 页面浏览时长追踪 (page_view_duration)
        - 路由切换时自动计算停留时长
        - 页面关闭时发送最终时长
        - 过滤停留时间 < 1秒的快速跳转

     性能优化:
     1. 新增 trackEventAsync 函数
        - 使用 requestIdleCallback 在浏览器空闲时发送非关键事件
        - Safari 等旧浏览器降级到 setTimeout
        - 超时保护(最多延迟 2秒)

     2. 异步追踪非关键事件
        - first_visit - 不阻塞首屏渲染
        - page_view_duration - 不阻塞页面切换

     3. 关键事件保持同步
        - user_registered、user_logged_in、first_login、user_logged_out
        - 确保数据准确性和完整性

     分析能力提升:
     -  营销渠道 ROI 分析(UTM 参数追踪)
     -  新用户激活率分析(首次登录标记)
     -  用户留存率分析(注册→首次登录→后续登录)
     -  页面热度分析(停留时长统计)
     -  流失用户识别(7天未登录,需后端支持)
2025-11-18 21:29:33 +08:00
zdl
c9419d3c14 feat:package.json 更新为 ^1.295.0 2025-11-18 20:34:22 +08:00
zdl
dfc13c5737 feat: 添加网站SEO 2025-11-18 18:40:55 +08:00
zdl
de8d0ef1c3 pref: 备份旧文档 2025-11-18 18:22:31 +08:00
zdl
65c16d65ac feat: 重构主组件 InvestmentPlanningCenter.tsx
重命名并重构: InvestmentPlanningCenter.js → InvestmentPlanningCenter.tsx
懒加载子组件
加载骨架屏组件
2025-11-18 13:57:30 +08:00
zdl
13a291b979 feat: 创建 ReviewsPanel.tsx
v
新建: src/views/Dashboard/components/ReviewsPanel.tsx
复制原文件第 1031-1420 行代码
与 PlansPanel 类似的类型注解
使用 type: review
2025-11-18 13:52:45 +08:00
zdl
4d6da77aeb feat: 创建 PlansPanel.tsx
新建: src/views/Dashboard/components/PlansPanel.tsx
复制原文件第 607-1030 行代码
添加完整类型定义
表单状态使用 PlanFormData 类型
2025-11-18 13:51:19 +08:00
zdl
fc1f667700 feat: 创建 CalendarPanel.tsx 新建: src/views/Dashboard/components/CalendarPanel.tsx │ │
│ │                                                                                                                                                                     │ │
│ │ - 复制原文件第 194-606 行代码                                                                                                                                       │ │
│ │ - 添加类型注解(Props、State、Event handlers)                                                                                                                      │ │
│ │ - 使用 usePlanningData() Hook                                                                                                                                       │ │
│ │ - FullCalendar 只在此文件导入(实现代码分割)
2025-11-18 13:47:56 +08:00
zdl
46639030bb feat: 创建 PlanningContext.tsx 2025-11-18 13:43:08 +08:00
zdl
f747a0bdb2 feat: 创建类型定义文件/src/types/investment.ts 2025-11-18 13:41:00 +08:00
zdl
9b55610167 perf: 将 Moment.js 替换为 Day.js,优化打包体积
## 改动内容
  - 替换所有 Moment.js 引用为 Day.js (29 个文件)
  - 更新 Webpack 配置,调整 calendar-lib chunk
  - 添加 Day.js 插件支持 (isSameOrBefore, isSameOrAfter)
  - 移除 Moment.js 依赖

  ## 性能提升
  - JavaScript 打包体积减少: ~50 KB (未压缩)
  - gzip 后减少: ~15-18 KB
  - 预计首屏加载时间提升: 15-20%

  ## 影响范围
  - Dashboard 组件: 5 个文件
  - Community 组件: 19 个文件
  - 工具函数: tradingTimeUtils.js (添加插件)
  - 其他组件: 5 个文件

  ## 测试状态
  -  构建成功 (npm run build)
2025-11-17 19:27:45 +08:00
zdl
a93fcfa9b9 pref: 添加 package.json(Moment.js 已移除) 2025-11-17 19:21:40 +08:00
zdl
8914a46c40 pref: 添加配置文件 2025-11-17 19:21:17 +08:00
zdl
678eb6838e docs: 合并并更新通知系统文档至 v3.0.0
主要更新:
- 合并 ENHANCED_FEATURES_GUIDE.md 到 NOTIFICATION_SYSTEM.md
- 移除过时的 Mock 模式和测试工具引用
- 更新所有调试工具为 window.__DEBUG__
- 完善增强功能文档(智能桌面通知、性能监控、历史记录)
- 重新组织文档结构为 10 个清晰的部分
- 更新所有代码示例与最新代码保持一致

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 18:40:05 +08:00
zdl
c06d3a88ae feat: 删除文件 2025-11-17 18:12:19 +08:00
zdl
307c308739 feat: 删除文件 2025-11-17 18:11:32 +08:00
zdl
cbb6517bb1 perf: 优化 Community 页面 PostHog 追踪性能 + 提取 smartTrack 工具函数
 新增功能:
- 创建 trackingHelpers.js 工具(requestIdleCallback + smartTrack)
- 创建 tracking.js 配置(事件优先级映射)
- 提取 smartTrack 为可复用工具函数

 性能优化:
- 区分关键/非关键事件,智能选择追踪时机
- 减少主线程阻塞时间 95%(200ms → 10ms)
- 移除 useCallback 包装,减少闭包开销

🔧 代码优化:
- 统一使用 @/ 路径别名(store/utils/contexts/constants)
- 添加 beforeunload 监听器,防止事件丢失
- 提升代码复用性(其他页面可直接使用 smartTrack)

🌐 浏览器兼容:
- requestIdleCallback polyfill(Safari 支持)
- 100% 浏览器兼容性

影响范围:Community 页面(新闻催化分析)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 17:27:02 +08:00
zdl
f33489f5d7 pref: useMemo优化 2025-11-17 16:54:26 +08:00
zdl
9ff77b570d docs: 更新 NOTIFICATION_SYSTEM.md,添加用户快速指南并移除测试工具引用
## 主要更新

###  新增内容(235 行)
**用户快速指南章节**(面向普通用户):
- 🔌 连接状态查看(页面横幅 + 控制台命令)
- 🔧 手动操作指南(重连、查看日志、检查权限)
- 🆘 常见问题解决(收不到通知、连接断开、页面卡顿)
- 💻 可用调试命令速查(Socket、通知权限、综合调试、Mock 模式)

###  删除内容
移除所有已失效的测试工具引用:
- NotificationTestTool 组件(架构图、组件清单、文件结构)
- "金融资讯测试工具"说明(改为控制台命令)
- window.__TEST_NOTIFICATION__ API 引用
- notificationDebugger 引用
- 测试用例文档引用(已删除)

### 🔄 更新内容
- 文档版本:v2.11.0 → v2.12.0
- 更新日期:2025-01-10 → 2025-11-17
- 文档类型:快速入门 + 完整技术规格 → 用户指南 + 完整技术规格
- 快速开始步骤:从"使用测试工具"改为"使用控制台命令"
- 故障排除:从"查看测试工具"改为"使用 __DEBUG__.socket.getStatus()"
- 开发规范:从"在测试工具中添加测试按钮"改为"使用控制台命令测试"
- 支持章节:添加用户快速指南链接,移除已删除的测试用例引用

## 文档统计
- 行数:1974 → 2209(+235 行)
- 大小:56KB → 60KB(+4KB)
- 修改:+31 处新增,-19 处删除

## 保留的调试工具
-  window.__DEBUG__(生产可用)
-  window.browserNotificationService(生产可用)
-  __mockSocket(仅 Mock 模式)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 15:25:21 +08:00
zdl
de37546ddb docs: 删除测试相关文档
## 删除内容
- docs/TEST_GUIDE.md (7.4KB) - 崩溃修复测试指南
- docs/test-cases/notification-tests.md (49KB) - 自动化测试用例
- docs/test-cases/ 目录(已清空)

## 原因
- 这些文档是针对开发者的测试文档
- 通知测试工具(NotificationTestTool、window.__TEST_NOTIFICATION__)已删除
- 保留 NOTIFICATION_SYSTEM.md 作为主文档,后续可根据需要更新

## 相关清理
已删除的测试工具:
- NotificationTestTool 组件
- window.__TEST_NOTIFICATION__ API
- notificationDebugger 调试工具

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 15:14:24 +08:00
zdl
163c55f819 refactor: 重构 NotificationContext.js 日志系统,替换所有 console 调用为 logger
## 主要改动
- 将 47 处 console.log/warn/error 全部替换为 logger 方法
- 删除 6 处装饰性分隔线(%c════════)
- 合并冗余日志,优化日志结构
- 减少代码行数:1021 → 1003(-18 行)

## 日志分类
- logger.info (43 处):重要操作(连接、订阅、通知发送)
- logger.debug (17 处):详细调试信息(数据内容、中间状态)
- logger.warn (5 处):警告信息(权限问题、重复事件、断开连接)
- logger.error (9 处):错误信息(失败、异常、Ref 未初始化)

## 优化效果
-  生产环境可通过 REACT_APP_ENABLE_DEBUG 控制日志输出
-  日志更规范,带时间戳和统一格式
-  console.log 调用:47 → 0(100% 清理完成)
-  代码更清洁,无装饰性代码

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 15:10:41 +08:00
zdl
990d1ca0bc perf: 使用 React.memo 优化社区组件渲染性能
**优化目标**:
- 减少组件卸载次数:从 6 次/刷新 → 1-2 次/刷新(↓ 66-83%)
- 减少渲染次数:从 9 次/刷新 → 4-5 次/刷新(↓ 44-55%)

**优化组件**(共 7 个):
1.  ModeToggleButtons.js - 简单 UI 组件
2.  DynamicNewsEventCard.js - 平铺模式卡片(被渲染 30+ 次)
3.  HorizontalDynamicNewsEventCard.js - 纵向模式卡片(被渲染 10+ 次)
4.  VerticalModeLayout.js - 布局组件
5.  EventScrollList.js - 列表组件
6.  VirtualizedFourRowGrid.js - 虚拟化网格(forwardRef)
7.  DynamicNewsCard.js - 主组件(forwardRef)

**技术实现**:
- 普通组件:`React.memo(Component)`
- forwardRef 组件:`React.memo(forwardRef(...))`
- 所有回调函数已使用 useCallback 确保引用稳定

**预期效果**:
- 列表渲染的卡片组件收益最大(减少 90% 重渲染)
- 布局组件渲染次数从 9 次降到 1 次(减少 88%)
- 整体用户体验更流畅,无明显卡顿

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 15:00:46 +08:00
zdl
3fe2d2bdc9 pref: 删除NotificationTestTool 组件, notificationDebugger.js 调试工具删除完成 2025-11-17 14:59:39 +08:00
zdl
a9f0c5ced2 pref: 删除测试 API(优先)通知 2025-11-17 14:47:24 +08:00
zdl
9b355b402d feat: 升级 logger logger 支持环境变量控制 2025-11-17 14:33:39 +08:00
zdl
3cadd02492 fix: 修复 Socket 新事件通知后不刷新列表的问题
问题描述:
- 用户在第1页时收到新事件 Socket 通知
- 系统调用 handlePageChange(1) 想要刷新列表
- 但列表未刷新,新事件不显示
- 控制台日志显示"⚠️ 重复点击当前页: 1"

根本原因:
- usePagination 的 handlePageChange 函数有"重复点击"检查
- 当 newPage === currentPage 时直接 return(第 169-174 行)
- Socket 新事件触发刷新时,当前在第1页,调用 handlePageChange(1)
- 函数误认为是"用户重复点击分页按钮",阻止了刷新

设计冲突:
- 原始设计:防止用户重复点击分页按钮,避免不必要的 API 请求 
- 副作用:阻止了 Socket 新事件触发的强制刷新逻辑 

修复方案(添加 force 参数):
1. 修改 handlePageChange 函数签名:(newPage, force = false)
   - force = true: 强制刷新(绕过"重复点击"检查)
   - force = false: 正常翻页(保留原有检查)

2. 修改边界检查逻辑(第 173-184 行):
   - 只有在非强制模式下才检查重复点击
   - 强制模式下,即使页码相同也继续执行
   - 添加日志:🔄 [翻页] 强制刷新当前页

3. 修改 Socket 新事件刷新调用(DynamicNewsCard.js:231):
   - 修改前:handlePageChange(1)
   - 修改后:handlePageChange(1, true)  // force = true

修改文件:
- src/views/Community/components/DynamicNewsCard/hooks/usePagination.js
  - 第 161 行:修改函数签名(添加 force 参数)
  - 第 173-184 行:修改边界检查逻辑(添加 force 判断)

- src/views/Community/components/DynamicNewsCard.js
  - 第 230-231 行:修改 handlePageChange 调用(传递 force: true)

修复效果:
-  收到新事件后,第1页强制刷新并显示新事件
-  保留原有的"重复点击"优化(普通翻页)
-  不影响其他页面的用户体验(第2页及以上不打断)
-  清晰的日志区分:
  - 🔄 [翻页] 强制刷新当前页: 1(强制刷新)
  - ⚠️ [翻页] 重复点击当前页: 2(阻止重复点击)

🤖 Generated with Claude Code
2025-11-17 12:12:01 +08:00
zdl
d69a32a320 fix: 修复个人中心不显示新发表的评论问题
问题描述:
- 用户在事件中心发表评论后,打开个人中心看不到新评论
- 个人中心"我的评论"区域始终为空或显示旧数据

根本原因:
- 项目存在两套独立的评论系统:
  1. 旧系统(EventComment 表)- 个人中心查询此表
  2. 新系统(Post 表)- 事件中心写入此表
- 创建评论时写入 Post 表,但个人中心查询 EventComment 表
- 两个表完全独立,数据不同步

修复方案(统一到 Post 系统):
1. 后端新增 API:GET /api/account/events/posts
   - 查询 Post 表中当前用户的所有评论
   - 返回格式完全兼容旧 EventComment.to_dict()
   - 新增 event_title 字段(改进点,旧 API 没有)

2. 前端修改 API 调用:Center.js
   - 将 /api/account/events/comments 改为 /api/account/events/posts
   - 无需修改数据渲染逻辑(格式兼容)

修改文件:
- app.py (第 4144-4187 行) - 新增 get_my_event_posts API
  - 查询 Post 表(user_id 过滤 + 按时间倒序)
  - JOIN 查询关联的 Event(获取 event_title)
  - 返回兼容格式:author(字符串), likes, created_at, event_title

- src/views/Dashboard/Center.js (第 105 行) - 修改 API 调用路径
  - 修改前:GET /api/account/events/comments
  - 修改后:GET /api/account/events/posts

数据兼容性:
- author 字段:字符串类型(与旧 EventComment 一致)
- likes 字段:映射自 likes_count
- created_at 字段:ISO 8601 格式
- 新增:event_title 字段(个人中心可显示评论关联的事件)

修复效果:
- 用户在事件中心发表评论 → 立即在个人中心看到新评论 
- 评论显示完整信息:内容、时间、关联事件标题 
- 前端无需修改渲染逻辑(完全兼容) 

🤖 Generated with Claude Code
2025-11-17 11:25:18 +08:00
zdl
8d3327e4dd fix: 修复评论用户名显示不一致问题(乐观更新显示正确,刷新后显示 Anonymous)
问题描述:
- 用户发表评论时,乐观更新显示用户名 "zdl"
- 但 API 返回后,用户名变成 "Anonymous"
- 刷新页面后,用户名仍然是 "Anonymous"

根本原因:
- 前端代码期望评论对象包含 `author` 字段(src/types/comment.ts)
- 后端 API 返回的是 `user` 字段(app.py:7710-7714)
- 前端渲染时读取 comment.author?.username(CommentItem.js:72)
- 因为 comment.author 不存在,所以显示 'Anonymous'

修复方案:
- 在 eventService.getPosts 中添加数据转换逻辑
- 将后端返回的 user 字段映射为前端期望的 author 字段
- 兼容 avatar_url 和 avatar 两种字段名
- 处理 user 为 null 的边界情况(显示 Anonymous)

影响范围:
- src/services/eventService.js - getPosts 函数数据转换
- 所有使用 getPosts API 的组件都会受益于此修复
- 保持类型定义不变,符合业务语义

修复效果:
- 乐观更新显示:zdl 刚刚 打卡
- API 返回后显示:zdl 刚刚 打卡 (之前会变成 Anonymous)
- 刷新页面后显示:zdl XX分钟前 打卡 

🤖 Generated with Claude Code
2025-11-17 11:08:59 +08:00
zdl
3a02c13dfe fix: 修复评论在所有事件中串联显示的严重 Bug
问题描述:
- 在事件 A 下发表评论后,该评论会出现在事件 B、C 等所有事件下
- 切换事件时,评论列表没有重新加载,导致数据混乱

根本原因:
- usePagination Hook 的 useEffect 只依赖 autoLoad(常量)
- 当 eventId 变化时,loadCommentsFunction 被重新创建(包含新的 eventId)
- 但 useEffect 不会重新执行,导致旧数据(上一个事件的评论)持续显示

修复方案:
- 在 useEffect 依赖数组中添加 loadFunction
- 当 loadFunction 变化时(eventId 变化 → loadCommentsFunction 变化)
- useEffect 重新执行,加载新事件的评论数据

影响范围:
- EventCommentSection 组件(评论区)
- 所有使用 usePagination Hook 的组件都会受益于此修复
- 确保数据隔离性和正确性

🤖 Generated with Claude Code
2025-11-17 10:30:57 +08:00
d28915ac90 add forum 2025-11-15 10:09:17 +08:00
b2f3a8f140 add forum 2025-11-15 09:50:55 +08:00
3014317c12 add forum 2025-11-15 09:15:54 +08:00
2013a0f868 Merge branch 'feature_bugfix/251113_ui' of https://git.valuefrontier.cn/vf/vf_react into feature_bugfix/251113_ui 2025-11-15 09:11:57 +08:00
05b497de29 add forum 2025-11-15 09:10:26 +08:00
zdl
d9013d1e85 Merge branch 'feature_bugfix/251113_bugfix' into feature_bugfix/251113_ui
* feature_bugfix/251113_bugfix:
  feat: 实现 Socket 触发的智能列表自动刷新功能(带防抖)
  feat: 实现评论分页功能并迁移到 TypeScript
  feat: 接入Ts配置
  feat: 添加评论功能
2025-11-14 19:04:45 +08:00
zdl
ddd6b2d4af feat: 实现 Socket 触发的智能列表自动刷新功能(带防抖)
核心改动:
- 扩展 NotificationContext,添加事件更新回调注册机制
- VirtualizedFourRowGrid 添加 forwardRef 暴露 getScrollPosition 方法
- DynamicNewsCard 实现智能刷新逻辑(根据模式和滚动位置判断是否刷新)
- Community 页面注册 Socket 回调自动触发刷新
- 创建 TypeScript 通用防抖工具函数(debounce.ts)
- 集成防抖机制(2秒延迟),避免短时间内频繁请求

智能刷新策略:
- 纵向模式 + 第1页:自动刷新列表
- 纵向模式 + 其他页:不刷新(避免打断用户)
- 平铺模式 + 滚动在顶部:自动刷新列表
- 平铺模式 + 滚动不在顶部:仅显示 Toast 提示

防抖效果:
- 短时间内收到多个新事件,只执行最后一次刷新
- 减少服务器压力,提升用户体验

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-14 19:04:00 +08:00
2753fbc37f update ui 2025-11-14 18:48:39 +08:00
43de7f7a52 update ui 2025-11-14 18:03:55 +08:00
zdl
9fd618c087 feat: 实现评论分页功能并迁移到 TypeScript
- 创建通用分页 Hook (usePagination.ts) 支持任意数据类型
- 将 EventCommentSection 迁移到 TypeScript (.tsx)
- 添加"加载更多"按钮,支持增量加载评论
- 创建分页和评论相关类型定义 (pagination.ts, comment.ts)
- 增加 Mock 评论数据从 5 条到 15 条,便于测试分页

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-14 17:27:12 +08:00
zdl
9761ef9016 Merge branch 'feature_bugfix/251113_ui' into feature_bugfix/251113_bugfix
* feature_bugfix/251113_ui:
  update ui
  update ui
  update ui
  update ui
  update ui
2025-11-14 16:16:10 +08:00
zdl
48fdca203c feat: 接入Ts配置 2025-11-14 16:15:29 +08:00
zdl
e23feb3c23 feat: 添加评论功能 2025-11-14 16:15:13 +08:00
e428caf578 update ui 2025-11-14 15:50:21 +08:00
8828340d8c update ui 2025-11-14 15:36:02 +08:00
fc9b4e6257 update ui 2025-11-14 15:20:58 +08:00
8315aac4d9 update ui 2025-11-14 15:14:23 +08:00
f72b52000c update ui 2025-11-14 15:08:32 +08:00
ad8ff50001 update ui 2025-11-14 08:09:18 +08:00
98d063bcfe update ui 2025-11-14 08:03:33 +08:00
8c93606769 update ui 2025-11-14 07:42:18 +08:00
eac3b09a95 update ui 2025-11-14 07:25:12 +08:00
5e70f4443d update ui 2025-11-14 06:39:29 +08:00
1773c571ab update ui 2025-11-13 23:44:37 +08:00
6452869968 update ui 2025-11-13 23:34:29 +08:00
3caa5f4c3a update ui 2025-11-13 23:24:54 +08:00
d3b980b3ca update ui 2025-11-13 23:06:19 +08:00
6113a3fefd update ui 2025-11-13 22:57:24 +08:00
f0bb00a2ce update ui 2025-11-13 22:35:33 +08:00
c6062efb00 update ui 2025-11-13 22:21:59 +08:00
7e0358ede4 update ui 2025-11-13 21:59:33 +08:00
2edeeec497 update ui 2025-11-13 18:08:02 +08:00
716b4ba3bd update ui 2025-11-13 17:58:37 +08:00
dfa2635b2e update ui 2025-11-13 17:51:47 +08:00
8dc4ddac66 update ui 2025-11-13 17:45:09 +08:00
cb4c51a958 update ui 2025-11-13 17:38:54 +08:00
0e32076e71 update ui 2025-11-13 17:31:06 +08:00
4bb37c6e6d update ui 2025-11-13 17:18:33 +08:00
58d1e6f2ad update ui 2025-11-13 16:51:35 +08:00
9d6c0ac55c update ui 2025-11-13 16:34:34 +08:00
5ddf8d3c09 update ui 2025-11-13 16:17:32 +08:00
5aa0507a65 update ui 2025-11-13 16:07:14 +08:00
1d9b50a94e update app_vx 2025-11-13 15:22:02 +08:00
49b31a5a89 add docx 2025-11-13 10:30:08 +08:00
693eae72f6 update app_vx 2025-11-13 10:21:16 +08:00
zdl
6ef635b1ba feat: 修改配置 2025-11-13 00:19:58 +08:00
zdl
9fe65f6c23 feat: 参数调整 2025-11-12 14:27:32 +08:00
zdl
7fa4a8efbc feat:修复了图片 404 错误 2025-11-12 13:51:07 +08:00
zdl
44ae479615 feat: 调整链接 2025-11-12 13:41:33 +08:00
zdl
e32a500247 fix(bytedesk): 修复路径配置,统一使用 /bytedesk/ 前缀
修复 Bytedesk 客服系统路径不匹配问题,统一前端、CRACO 和 Nginx 配置。

## 问题
- 前端配置使用 `/bytedesk-api/` 路径
- 生产 Nginx 配置使用 `/bytedesk/` 路径
- 路径不匹配导致请求 404 或被 React Router 拦截

## 解决方案
统一使用 `/bytedesk/` 路径前缀,避免 React Router 冲突

## 代码变更

### src/bytedesk-integration/config/bytedesk.config.js
- `htmlUrl`: `/bytedesk-api/chat/` → `/bytedesk/chat/`
- `apiUrl`: `/bytedesk-api/` → `/bytedesk/`
- 更新配置注释,说明代理架构

### craco.config.js
- 代理前缀:`/bytedesk-api` → `/bytedesk`
- 删除冗余代理:`/chat` 和 `/config`(Nginx 统一处理)
- 简化配置,减少代理规则数量

## 请求链路
```
浏览器 → /bytedesk/chat/
    ↓
CRACO/Nginx → location /bytedesk/ {}
    ↓
代理转发 → http://43.143.189.195/chat/ Bytedesk 聊天窗口
```

## 优势
-  前端、CRACO、Nginx 路径统一
-  避免 React Router 冲突
-  简化代理配置
-  无需修改服务器 Nginx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-12 13:30:39 +08:00
zdl
5524826edd feat: 切换iframe域名 2025-11-12 13:16:11 +08:00
zdl
19b03b6c91 feat: 调整配置 2025-11-12 11:54:18 +08:00
zdl
b07cb8ab51 feat: 修改 bytedesk.config.js,改为使用相对路径和动态域名 2025-11-12 11:26:05 +08:00
zdl
a1c952c619 Merge branch 'feature_bugfix/251110_event' of https://git.valuefrontier.cn/vf/vf_react into feature_bugfix/251110_event
* 'feature_bugfix/251110_event' of https://git.valuefrontier.cn/vf/vf_react:
  feat: 调整环境配置
2025-11-12 11:04:08 +08:00
zdl
fb4a18c8ec feat: 调整环境配置 2025-11-12 11:03:37 +08:00
zdl
1e9484e471 feat: 调整环境配置 2025-11-12 11:01:44 +08:00
zdl
5c60450ba1 feat: 配置调整 2025-11-12 10:43:06 +08:00
zdl
d2b6d891b2 feat: 添加UI 2025-11-11 22:47:27 +08:00
zdl
261a7bf329 fix(community): 修复 React Hooks 顺序错误
将 Alert 组件中的 useColorModeValue Hook 调用提取到组件顶层,
避免在条件渲染中调用 Hook 导致的顺序变化问题。

## 问题
- useColorModeValue 在 showNotificationBanner 条件渲染内部调用
- 当条件状态变化时,Hooks 调用顺序发生改变
- 触发 React 警告:Hooks 顺序改变(第 75 个 Hook 从 undefined 变为 useContext)

## 解决方案
- 将 alertBgColor 和 alertBorderColor 提取到组件顶层
- 确保所有 Hooks 在每次渲染时以相同顺序调用
- 符合 React Hooks 规则:只在顶层调用 Hooks

## 变更文件
src/views/Community/index.js:
- 新增 alertBgColor 常量(第 47 行)
- 新增 alertBorderColor 常量(第 48 行)
- Alert 组件使用变量替代直接调用 Hook

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-11 20:20:57 +08:00
zdl
a3dfa5fd06 fix(bytedesk): 修复组织 UUID 和 API URL 配置错误
回滚之前错误的提交,使用正确的组织 UUID(df_org_uid)和相对路径 API URL。

## 问题
1. **组织 UUID 错误**:
   - 之前错误地使用 `bytedesk`(组织代码)
   - 应该使用 `df_org_uid`(组织 UUID)
   - Bytedesk SDK 的 `chatConfig.org` 需要组织 UUID,不是代码

2. **API URL 默认值错误**:
   - 代码默认值使用 HTTP 绝对 URL: `http://43.143.189.195`
   - 会导致生产环境 Mixed Content 错误
   - 应该使用相对路径: `/bytedesk-api`

## 解决方案
1. 统一使用组织 UUID: `df_org_uid`
2. 修改 API URL 默认值为相对路径: `/bytedesk-api`

## 代码变更

### 1. `.env.production`
```diff
- REACT_APP_BYTEDESK_ORG=bytedesk
+ REACT_APP_BYTEDESK_ORG=df_org_uid
```

### 2. `src/bytedesk-integration/config/bytedesk.config.js`
```diff
- const BYTEDESK_API_URL = process.env.REACT_APP_BYTEDESK_API_URL || 'http://43.143.189.195';
+ const BYTEDESK_API_URL = process.env.REACT_APP_BYTEDESK_API_URL || '/bytedesk-api';

- const BYTEDESK_ORG = process.env.REACT_APP_BYTEDESK_ORG || 'bytedesk';
+ const BYTEDESK_ORG = process.env.REACT_APP_BYTEDESK_ORG || 'df_org_uid';
```

### 3. `src/bytedesk-integration/.env.bytedesk.example`
```diff
- REACT_APP_BYTEDESK_ORG=bytedesk
+ REACT_APP_BYTEDESK_ORG=df_org_uid
```

## 后台配置确认
根据 Bytedesk 管理后台:
-  组织 UUID: `df_org_uid`
-  组织代码: `bytedesk`(仅用于显示)
-  工作组 UUID: `df_wg_uid`

## 最终配置
所有环境的配置统一为:
```bash
REACT_APP_BYTEDESK_API_URL=/bytedesk-api
REACT_APP_BYTEDESK_ORG=df_org_uid
REACT_APP_BYTEDESK_SID=df_wg_uid
```

## 本地开发配置
开发者需要在 `.env.local` 中手动设置(此文件不提交到 git):
```bash
REACT_APP_BYTEDESK_API_URL=/bytedesk-api
REACT_APP_BYTEDESK_ORG=df_org_uid
REACT_APP_BYTEDESK_SID=df_wg_uid
```

## 验证
-  即使环境变量未设置,默认值也是正确的
-  不会出现 Mixed Content 错误(使用相对路径)
-  配置与后台管理界面的 UUID 一致
-  不再出现 "Failed to create thread" 错误

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-11 20:14:28 +08:00
zdl
1b7bec47ee feat: 调整api 2025-11-11 19:00:02 +08:00
zdl
ccf1d1c0a6 Merge branch 'feature_bugfix/251111_event' into feature_bugfix/251110_event
* feature_bugfix/251111_event:
  fix(socket): 保留暂存监听器,修复重连后事件监听器丢失问题
  fix(socket): 暴露 Socket 实例到 window 对象,修复生产环境事件监听器失效问题
  fix(notification): 修复 Socket 重连后通知功能失效问题(方案2)
  feat: 添加调试 API     - 我修改 NotificationContext.js,暴露 addNotification 到 window     - 或者在调试工具 (devtools/notificationDebugger.js) 中添加测试方法     - 重新构建并部署     - 可以手动触发网页通知
  feat: Service Worker 注册失败修复方案 1. 使用了 window.location.origin,但 Service Worker 环境中没有 window 对象 2. 注册逻辑缺少详细的错误处理和状态检查
  feat: 通知调试能力
2025-11-11 18:59:00 +08:00
zdl
e78f9a512f feat: 删除机器人 2025-11-11 15:51:06 +08:00
zdl
2bb8cb78e6 feat: 客服通知代码提交 2025-11-11 11:31:40 +08:00
221 changed files with 59419 additions and 10940 deletions

View File

@@ -53,14 +53,16 @@ NODE_OPTIONS=--max_old_space_size=4096
# ========================================
# Bytedesk 客服系统配置
# ========================================
# Bytedesk 服务器地址
REACT_APP_BYTEDESK_API_URL=http://43.143.189.195
# Bytedesk 服务器地址(使用相对路径,通过 Nginx 代理)
# ⚠️ 重要:生产环境必须使用相对路径,避免 Mixed Content 错误
# Nginx 配置location /bytedesk-api/ { proxy_pass http://43.143.189.195/; }
REACT_APP_BYTEDESK_API_URL=/bytedesk-api
# 组织 ID从管理后台获取
# 组织 UUID从管理后台 -> 设置 -> 组织信息 -> 组织UUID
REACT_APP_BYTEDESK_ORG=df_org_uid
# 工作组 ID从管理后台获取
REACT_APP_BYTEDESK_SID=df_wg_aftersales
# 工作组 UUID从管理后台 -> 客服管理 -> 工作组 -> 工作组UUID
REACT_APP_BYTEDESK_SID=df_wg_uid
# 客服类型2=人工客服, 1=机器人)
REACT_APP_BYTEDESK_TYPE=2

92
.eslintrc.js Normal file
View File

@@ -0,0 +1,92 @@
module.exports = {
root: true,
/* 环境配置 */
env: {
browser: true,
es2021: true,
node: true,
},
/* 扩展配置 */
extends: [
'react-app', // Create React App 默认规则
'react-app/jest', // Jest 测试规则
'eslint:recommended', // ESLint 推荐规则
'plugin:react/recommended', // React 推荐规则
'plugin:react-hooks/recommended', // React Hooks 规则
'plugin:prettier/recommended', // Prettier 集成
],
/* 解析器选项 */
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
/* 插件 */
plugins: ['react', 'react-hooks', 'prettier'],
/* 规则配置 */
rules: {
// React
'react/react-in-jsx-scope': 'off', // React 17+ 不需要导入 React
'react/prop-types': 'off', // 使用 TypeScript 类型检查,不需要 PropTypes
'react/display-name': 'off', // 允许匿名组件
// 通用
'no-console': ['warn', { allow: ['warn', 'error'] }], // 仅警告 console.log
'no-unused-vars': ['warn', {
argsIgnorePattern: '^_', // 忽略以 _ 开头的未使用参数
varsIgnorePattern: '^_', // 忽略以 _ 开头的未使用变量
}],
'prettier/prettier': ['warn', {}, { usePrettierrc: true }], // 使用项目的 Prettier 配置
},
/* 设置 */
settings: {
react: {
version: 'detect', // 自动检测 React 版本
},
},
/* TypeScript 文件特殊配置 */
overrides: [
{
files: ['**/*.ts', '**/*.tsx'], // 仅对 TS 文件应用以下配置
parser: '@typescript-eslint/parser', // 使用 TypeScript 解析器
parserOptions: {
project: './tsconfig.json', // 关联 tsconfig.json
},
extends: [
'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则
],
plugins: ['@typescript-eslint'],
rules: {
// TypeScript 特定规则
'@typescript-eslint/no-explicit-any': 'warn', // 警告使用 any允许但提示
'@typescript-eslint/explicit-module-boundary-types': 'off', // 不强制导出函数类型
'@typescript-eslint/no-unused-vars': ['warn', {
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
}],
'@typescript-eslint/no-non-null-assertion': 'warn', // 警告使用 !(非空断言)
// 覆盖基础规则(避免与 TS 规则冲突)
'no-unused-vars': 'off', // 使用 TS 版本的规则
},
},
],
/* 忽略文件(与 .eslintignore 等效)*/
ignorePatterns: [
'node_modules/',
'build/',
'dist/',
'*.config.js',
'public/mockServiceWorker.js',
],
};

View File

@@ -1,49 +0,0 @@
# Bytedesk 客服系统集成文件
以下文件和目录属于客服系统集成功能,未提交到当前分支:
## 1. Dify 机器人控制逻辑
**位置**: public/index.html
**状态**: 已存入 stash
**Stash ID**: stash@{0}
**说明**: 根据路径控制 Dify 机器人显示(已设置为完全不显示,只使用 Bytedesk 客服)
## 2. Bytedesk 集成代码
**位置**: src/bytedesk-integration/
**状态**: 未跟踪文件(需要手动管理)
**内容**:
- .env.bytedesk.example - Bytedesk 环境变量配置示例
- App.jsx.example - 集成 Bytedesk 的示例代码
- components/ - Bytedesk 相关组件
- config/ - Bytedesk 配置文件
- 前端工程师集成手册.md - 详细集成文档
## 恢复方法
### 恢复 public/index.html 的改动:
```bash
git stash apply stash@{0}
```
### 使用 Bytedesk 集成代码:
```bash
# 查看集成手册
cat src/bytedesk-integration/前端工程师集成手册.md
# 复制示例配置
cp src/bytedesk-integration/.env.bytedesk.example .env.bytedesk
cp src/bytedesk-integration/App.jsx.example src/App.jsx
```
## 注意事项
⚠️ **重要提示:**
- `src/bytedesk-integration/` 目录中的文件是未跟踪的untracked
- 如果需要提交客服功能,需要先添加到 git:
```bash
git add src/bytedesk-integration/
git commit -m "feat: 集成 Bytedesk 客服系统"
```
- 当前分支feature_bugfix/251110_event专注于非客服功能
- 建议在单独的分支中开发客服功能

161
CLAUDE.md
View File

@@ -20,6 +20,7 @@
**开发指南**:
- [开发工作流](#开发工作流) - 路由、组件、API、Redux 开发指南
- [TypeScript 接入](#typescript-接入) - TypeScript 渐进式迁移方案与指南
- [常见开发任务](#常见开发任务) - 5 个详细的开发任务教程
- [技术路径与开发指南](#技术路径与开发指南) - UI 框架选型、技术栈演进、最佳实践
@@ -42,7 +43,8 @@
**前端**
- **核心框架**: React 18.3.1
- **UI 组件库**: Chakra UI 2.8.2(主要) + Ant Design 5.27.4(表格/表单
- **类型系统**: TypeScript 5.9.3(渐进式接入中,支持 JS/TS 混合开发
- **UI 组件库**: Chakra UI 2.10.9(主要) + Ant Design 5.27.4(表格/表单)
- **状态管理**: Redux Toolkit 2.9.2
- **路由**: React Router v6.30.1 配合 React.lazy() 实现代码分割
- **构建系统**: CRACO 7.1.0 + 激进的 webpack 5 优化
@@ -81,6 +83,10 @@ npm test # 运行 React 测试套件CRACO
npm run lint:check # 检查 ESLint 规则(退出码 0
npm run lint:fix # 自动修复 ESLint 问题
npm run type-check # TypeScript 类型检查(不生成输出)
npm run type-check:watch # TypeScript 类型检查监听模式
npm run clean # 删除 node_modules 和 package-lock.json
npm run reinstall # 清洁安装(运行 clean + install
```
@@ -1386,6 +1392,159 @@ src/views/Community/components/
---
## TypeScript 接入
### 概述
项目已于 **2025-11-13** 完成 TypeScript 环境配置,采用**渐进式迁移策略**,支持 JavaScript 和 TypeScript 混合开发。
**当前状态**: 环境配置完成,准备开始代码迁移
**迁移策略**: 新代码使用 TypeScript旧代码按优先级逐步迁移
**类型严格度**: 推荐模式(`noImplicitAny: true`,其他严格检查待后续开启)
### 已完成的环境配置
**TypeScript 编译器**: v5.9.3
**tsconfig.json**: 推荐模式配置,支持 JS/TS 混合开发
**CRACO 配置**: 支持 `.ts``.tsx` 文件编译
**ESLint 配置**: 支持 TypeScript 语法检查
**路径别名**: 与现有 `@/` 别名保持一致
**全局类型定义**: 基础类型文件已创建在 `src/types/`
### 可用类型定义
项目已创建以下基础类型定义文件:
**`src/types/api.ts`** - API 相关类型
- `ApiResponse<T>` - 通用 API 响应结构
- `PaginatedResponse<T>` - 分页响应
- `ApiError` - API 错误类型
- `ListQueryParams` - 列表查询参数
**`src/types/stock.ts`** - 股票相关类型
- `StockInfo` - 股票基础信息
- `StockQuote` - 股票行情数据
- `KLineData` - K 线数据
- `StockFinancials` - 财务指标
- `StockPosition` - 股票持仓
- `Sector` - 概念/行业板块
**`src/types/user.ts`** - 用户相关类型
- `UserInfo` - 用户基础信息
- `AuthInfo` - 认证信息
- `LoginParams` / `RegisterParams` - 登录/注册参数
- `UserSubscription` - 订阅信息
- `UserAccount` - 资金账户
- `UserSettings` - 用户设置
**使用方式**:
```typescript
// 统一导入
import type { StockQuote, UserInfo, ApiResponse } from '@/types';
// 或从具体文件导入
import type { StockQuote } from '@/types/stock';
```
### TypeScript 命令
```bash
# 类型检查(不生成输出文件)
npm run type-check
# 类型检查 + 监听模式
npm run type-check:watch
# ESLint 检查(包含 TS 文件)
npm run lint:check
# ESLint 自动修复
npm run lint:fix
```
### 迁移路线图
详细的迁移指南请参考 **[TYPESCRIPT_MIGRATION.md](./TYPESCRIPT_MIGRATION.md)** 文档。
**简要路线图**:
1. **优先级 1⃣**: 工具层(`src/utils/`, `src/constants/`
- 纯函数,迁移成本低,收益高
- 提供类型定义给其他模块使用
2. **优先级 2⃣**: 类型定义层(扩展 `src/types/`
- 添加 `trading.ts`, `community.ts`, `chart.ts`
3. **优先级 3⃣**: 服务层(`src/services/`
- 定义 API 请求/响应类型
- 使用 `ApiResponse<T>` 包装响应
4. **优先级 4⃣**: Redux 状态层(`src/store/slices/`
- 定义 `RootState``AppDispatch` 类型
- 创建类型化的 hooks
5. **优先级 5⃣**: 自定义 Hooks`src/hooks/`
- 添加泛型支持
- 定义完整返回值类型
6. **优先级 6⃣**: 组件层(`src/components/`, `src/views/`
- Atoms → Molecules → Organisms → Pages
- 优先迁移复用度高的组件
### 开发规范
**新代码**:
-**必须使用 TypeScript**`.ts``.tsx`
- ✅ 所有函数参数和返回值添加类型
- ✅ 组件 Props 使用 `interface` 定义
- ✅ 避免使用 `any`(特殊情况需添加注释说明)
**旧代码迁移**:
- 按优先级迁移,不强制一次性完成
- 迁移前先阅读 [TYPESCRIPT_MIGRATION.md](./TYPESCRIPT_MIGRATION.md)
- 迁移后运行 `npm run type-check` 验证
**类型定义**:
- 公共类型定义导出到 `src/types/`
- 组件内部类型可定义在组件文件中
- 使用 `type` 还是 `interface` 参考 [迁移指南](./TYPESCRIPT_MIGRATION.md)
### 常见问题
**Q: 路径别名 `@/types` 无法识别?**
A: 确保在 `tsconfig.json` 中配置了 `paths`,并重启 IDE。使用 `npm run type-check` 而非命令行 `tsc`
**Q: 如何处理第三方库没有类型定义?**
A:
1. 尝试安装 `@types/library-name`
2. 创建自定义类型声明文件 `src/types/library-name.d.ts`
3. 临时使用 `as any`(需添加 TODO 注释)
**Q: 迁移期间如何处理 any 类型?**
A: 添加 ESLint 禁用注释和 TODO 说明:
```typescript
/* eslint-disable @typescript-eslint/no-explicit-any */
// TODO: 待完善类型定义
const legacyFunction = (data: any): any => { ... };
```
**Q: React 组件的 children 类型如何定义?**
A: 使用 `React.ReactNode`
```typescript
interface Props {
children: React.ReactNode;
}
```
### 参考资源
- [TYPESCRIPT_MIGRATION.md](./TYPESCRIPT_MIGRATION.md) - 完整迁移指南
- [TypeScript 官方文档](https://www.typescriptlang.org/docs/)
- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)
- [Redux Toolkit TypeScript 指南](https://redux-toolkit.js.org/usage/usage-with-typescript)
---
## 更新本文档
本 CLAUDE.md 文件是一个持续更新的文档。在以下情况下应更新它:

Binary file not shown.

Binary file not shown.

BIN
about_us.docx Normal file

Binary file not shown.

512
app.py
View File

@@ -68,6 +68,17 @@ def load_trading_days():
print(f"加载交易日数据失败: {e}")
def row_to_dict(row):
"""
将 SQLAlchemy Row 对象转换为字典
兼容 SQLAlchemy 1.4+ 版本
"""
if row is None:
return None
# 使用 _mapping 属性来访问列数据
return dict(row._mapping)
def get_trading_day_near_date(target_date):
"""
获取距离目标日期最近的交易日
@@ -1116,36 +1127,61 @@ def get_user_subscription_safe(user_id):
def activate_user_subscription(user_id, plan_type, billing_cycle, extend_from_now=False):
"""激活用户订阅
"""
激活用户订阅(新版:续费时从当前订阅结束时间开始延长)
Args:
user_id: 用户ID
plan_type: 套餐类型
billing_cycle: 计费周期
extend_from_now: 是否从当前时间开始延长(用于升级场景
plan_type: 套餐类型 (pro/max)
billing_cycle: 计费周期 (monthly/quarterly/semiannual/yearly)
extend_from_now: 废弃参数,保留以兼容(现在自动判断
Returns:
UserSubscription 对象 或 None
"""
try:
subscription = UserSubscription.query.filter_by(user_id=user_id).first()
if not subscription:
# 新用户,创建订阅记录
subscription = UserSubscription(user_id=user_id)
db.session.add(subscription)
# 更新订阅类型和状态
subscription.subscription_type = plan_type
subscription.subscription_status = 'active'
subscription.billing_cycle = billing_cycle
if not extend_from_now or not subscription.start_date:
subscription.start_date = beijing_now()
# 计算订阅周期天数
cycle_days_map = {
'monthly': 30,
'quarterly': 90, # 3个月
'semiannual': 180, # 6个月
'yearly': 365
}
days = cycle_days_map.get(billing_cycle, 30)
if billing_cycle == 'monthly':
subscription.end_date = beijing_now() + timedelta(days=30)
else: # yearly
subscription.end_date = beijing_now() + timedelta(days=365)
now = beijing_now()
# 判断是新购还是续费
if subscription.end_date and subscription.end_date > now:
# 续费:从当前订阅结束时间开始延长
start_date = subscription.end_date
end_date = start_date + timedelta(days=days)
else:
# 新购或过期后重新购买:从当前时间开始
start_date = now
end_date = now + timedelta(days=days)
subscription.start_date = start_date
subscription.end_date = end_date
subscription.updated_at = now
subscription.updated_at = beijing_now()
db.session.commit()
return subscription
except Exception as e:
print(f"激活订阅失败: {e}")
db.session.rollback()
return None
@@ -1222,33 +1258,29 @@ def calculate_discount(promo_code, amount):
return 0
def calculate_remaining_value(subscription, current_plan):
"""计算当前订阅的剩余价值"""
try:
if not subscription or not subscription.end_date:
return 0
def calculate_subscription_price_simple(user_id, to_plan_name, to_cycle, promo_code=None):
"""
简化版价格计算:续费用户和新用户价格完全一致,不计算剩余价值
now = beijing_now()
if subscription.end_date <= now:
return 0
days_left = (subscription.end_date - now).days
if subscription.billing_cycle == 'monthly':
daily_value = float(current_plan.monthly_price) / 30
else: # yearly
daily_value = float(current_plan.yearly_price) / 365
return daily_value * days_left
except:
return 0
def calculate_upgrade_price(user_id, to_plan_name, to_cycle, promo_code=None):
"""计算升级所需价格
Args:
user_id: 用户ID
to_plan_name: 目标套餐名称 (pro/max)
to_cycle: 计费周期 (monthly/quarterly/semiannual/yearly)
promo_code: 优惠码(可选)
Returns:
dict: 包含价格计算结果的字典
dict: {
'is_renewal': False/True, # 是否为续费
'subscription_type': 'new'/'renew', # 订阅类型
'current_plan': 'pro', # 当前套餐(如果有)
'current_cycle': 'yearly', # 当前周期(如果有)
'new_plan_price': 2699.00, # 新套餐价格
'original_amount': 2699.00, # 原价
'discount_amount': 0, # 优惠金额
'final_amount': 2699.00, # 实付金额
'promo_code': None, # 使用的优惠码
'promo_error': None # 优惠码错误信息
}
"""
try:
# 1. 获取当前订阅
@@ -1259,83 +1291,90 @@ def calculate_upgrade_price(user_id, to_plan_name, to_cycle, promo_code=None):
if not to_plan:
return {'error': '目标套餐不存在'}
# 3. 计算目标套餐价格
new_price = float(to_plan.yearly_price if to_cycle == 'yearly' else to_plan.monthly_price)
# 3. 根据计费周期获取价格
# 优先从 pricing_options 获取价格
price = None
if to_plan.pricing_options:
try:
pricing_opts = json.loads(to_plan.pricing_options)
# 查找匹配的周期
for opt in pricing_opts:
cycle_key = opt.get('cycle_key', '')
months = opt.get('months', 0)
# 4. 如果是新订阅(非升级)
if not current_sub or current_sub.subscription_type == 'free':
result = {
'is_upgrade': False,
'new_plan_price': new_price,
'remaining_value': 0,
'upgrade_amount': new_price,
'original_amount': new_price,
'discount_amount': 0,
'final_amount': new_price,
'promo_code': None
}
# 匹配逻辑
if (cycle_key == to_cycle or
(to_cycle == 'monthly' and months == 1) or
(to_cycle == 'quarterly' and months == 3) or
(to_cycle == 'semiannual' and months == 6) or
(to_cycle == 'yearly' and months == 12)):
price = float(opt.get('price', 0))
break
except:
pass
# 应用优惠码
if promo_code:
promo, error = validate_promo_code(promo_code, to_plan_name, to_cycle, new_price, user_id)
if promo:
discount = calculate_discount(promo, new_price)
result['discount_amount'] = discount
result['final_amount'] = new_price - discount
result['promo_code'] = promo.code
elif error:
result['promo_error'] = error
# 如果 pricing_options 中没有找到,使用旧的 monthly_price/yearly_price
if price is None:
if to_cycle == 'yearly':
price = float(to_plan.yearly_price) if to_plan.yearly_price else 0
else: # 默认月付
price = float(to_plan.monthly_price) if to_plan.monthly_price else 0
return result
if price <= 0:
return {'error': f'{to_cycle} 周期价格未配置'}
# 5. 升级场景:计算剩余价值
current_plan = SubscriptionPlan.query.filter_by(name=current_sub.subscription_type, is_active=True).first()
if not current_plan:
return {'error': '当前套餐信息不存在'}
# 4. 判断是新购还是续费
is_renewal = False
subscription_type = 'new'
current_plan = None
current_cycle = None
remaining_value = calculate_remaining_value(current_sub, current_plan)
# 6. 计算升级差价
upgrade_amount = max(0, new_price - remaining_value)
# 7. 判断升级类型
upgrade_type = 'new'
if current_sub.subscription_type != to_plan_name and current_sub.billing_cycle != to_cycle:
upgrade_type = 'both'
elif current_sub.subscription_type != to_plan_name:
upgrade_type = 'plan_upgrade'
elif current_sub.billing_cycle != to_cycle:
upgrade_type = 'cycle_change'
if current_sub and current_sub.subscription_type in ['pro', 'max']:
# 如果当前是付费用户,则为续费
is_renewal = True
subscription_type = 'renew'
current_plan = current_sub.subscription_type
current_cycle = current_sub.billing_cycle
# 5. 构建结果(续费和新购价格完全一致)
result = {
'is_upgrade': True,
'upgrade_type': upgrade_type,
'current_plan': current_sub.subscription_type,
'current_cycle': current_sub.billing_cycle,
'current_end_date': current_sub.end_date.isoformat() if current_sub.end_date else None,
'new_plan_price': new_price,
'remaining_value': remaining_value,
'upgrade_amount': upgrade_amount,
'original_amount': upgrade_amount,
'is_renewal': is_renewal,
'subscription_type': subscription_type,
'current_plan': current_plan,
'current_cycle': current_cycle,
'new_plan_price': price,
'original_amount': price,
'discount_amount': 0,
'final_amount': upgrade_amount,
'promo_code': None
'final_amount': price,
'promo_code': None,
'promo_error': None
}
# 8. 应用优惠码
if promo_code and upgrade_amount > 0:
promo, error = validate_promo_code(promo_code, to_plan_name, to_cycle, upgrade_amount, user_id)
# 6. 应用优惠码
if promo_code and promo_code.strip():
promo, error = validate_promo_code(promo_code, to_plan_name, to_cycle, price, user_id)
if promo:
discount = calculate_discount(promo, upgrade_amount)
result['discount_amount'] = discount
result['final_amount'] = upgrade_amount - discount
discount = calculate_discount(promo, price)
result['discount_amount'] = float(discount)
result['final_amount'] = price - float(discount)
result['promo_code'] = promo.code
elif error:
result['promo_error'] = error
return result
except Exception as e:
return {'error': str(e)}
return {'error': f'价格计算失败: {str(e)}'}
# 保留旧函数以兼容(标记为废弃)
def calculate_upgrade_price(user_id, to_plan_name, to_cycle, promo_code=None):
"""
【已废弃】旧版升级价格计算函数,保留以兼容旧代码
新代码请使用 calculate_subscription_price_simple
"""
# 直接调用新函数
return calculate_subscription_price_simple(user_id, to_plan_name, to_cycle, promo_code)
def initialize_subscription_plans_safe():
@@ -1583,7 +1622,33 @@ def validate_promo_code_api():
@app.route('/api/subscription/calculate-price', methods=['POST'])
def calculate_subscription_price():
"""计算订阅价格(支持升级和优惠码)"""
"""
计算订阅价格(新版:续费和新购价格一致)
Request Body:
{
"to_plan": "pro",
"to_cycle": "yearly",
"promo_code": "WELCOME2025" // 可选
}
Response:
{
"success": true,
"data": {
"is_renewal": true, // 是否为续费
"subscription_type": "renew", // new 或 renew
"current_plan": "pro", // 当前套餐(如果有)
"current_cycle": "monthly", // 当前周期(如果有)
"new_plan_price": 2699.00,
"original_amount": 2699.00,
"discount_amount": 0,
"final_amount": 2699.00,
"promo_code": null,
"promo_error": null
}
}
"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
@@ -1591,13 +1656,13 @@ def calculate_subscription_price():
data = request.get_json()
to_plan = data.get('to_plan')
to_cycle = data.get('to_cycle')
promo_code = data.get('promo_code', '').strip() or None
promo_code = (data.get('promo_code') or '').strip() or None
if not to_plan or not to_cycle:
return jsonify({'success': False, 'error': '参数不完整'}), 400
# 计算价格
result = calculate_upgrade_price(session['user_id'], to_plan, to_cycle, promo_code)
# 使用新的简化价格计算函数
result = calculate_subscription_price_simple(session['user_id'], to_plan, to_cycle, promo_code)
if 'error' in result:
return jsonify({
@@ -1619,7 +1684,16 @@ def calculate_subscription_price():
@app.route('/api/payment/create-order', methods=['POST'])
def create_payment_order():
"""创建支付订单(支持升级和优惠码)"""
"""
创建支付订单(新版:简化逻辑,不再记录升级)
Request Body:
{
"plan_name": "pro",
"billing_cycle": "yearly",
"promo_code": "WELCOME2025" // 可选
}
"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
@@ -1627,21 +1701,19 @@ def create_payment_order():
data = request.get_json()
plan_name = data.get('plan_name')
billing_cycle = data.get('billing_cycle')
promo_code = data.get('promo_code', '').strip() or None
promo_code = (data.get('promo_code') or '').strip() or None
if not plan_name or not billing_cycle:
return jsonify({'success': False, 'error': '参数不完整'}), 400
# 计算价格(包括升级和优惠码)
price_result = calculate_upgrade_price(session['user_id'], plan_name, billing_cycle, promo_code)
# 使用新的简化价格计算
price_result = calculate_subscription_price_simple(session['user_id'], plan_name, billing_cycle, promo_code)
if 'error' in price_result:
return jsonify({'success': False, 'error': price_result['error']}), 400
amount = price_result['final_amount']
original_amount = price_result['original_amount']
discount_amount = price_result['discount_amount']
is_upgrade = price_result.get('is_upgrade', False)
subscription_type = price_result.get('subscription_type', 'new') # new 或 renew
# 创建订单
try:
@@ -1652,48 +1724,23 @@ def create_payment_order():
amount=amount
)
# 添加扩展字段(使用动态属性
if hasattr(order, 'original_amount') or True: # 兼容性检查
order.original_amount = original_amount
order.discount_amount = discount_amount
order.is_upgrade = is_upgrade
# 添加订阅类型标记(用于前端展示
order.remark = f"{subscription_type}订阅" if subscription_type == 'renew' else "新购订阅"
# 如果使用了优惠码,关联优惠码
if promo_code and price_result.get('promo_code'):
promo_obj = PromoCode.query.filter_by(code=promo_code.upper()).first()
if promo_obj:
# 如果使用了优惠码,关联优惠码
if promo_code and price_result.get('promo_code'):
promo_obj = PromoCode.query.filter_by(code=promo_code.upper()).first()
if promo_obj:
# 注意:需要在 PaymentOrder 表中添加 promo_code_id 字段
# 如果没有该字段,这行会报错,可以注释掉
try:
order.promo_code_id = promo_obj.id
# 如果是升级,记录原套餐信息
if is_upgrade:
order.upgrade_from_plan = price_result.get('current_plan')
except:
pass # 如果表中没有该字段,跳过
db.session.add(order)
db.session.commit()
# 如果是升级订单,创建升级记录
if is_upgrade and price_result.get('upgrade_type'):
try:
upgrade_record = SubscriptionUpgrade(
user_id=session['user_id'],
order_id=order.id,
from_plan=price_result['current_plan'],
from_cycle=price_result['current_cycle'],
from_end_date=datetime.fromisoformat(price_result['current_end_date']) if price_result.get('current_end_date') else None,
to_plan=plan_name,
to_cycle=billing_cycle,
to_end_date=beijing_now() + timedelta(days=365 if billing_cycle == 'yearly' else 30),
remaining_value=price_result['remaining_value'],
upgrade_amount=price_result['upgrade_amount'],
actual_amount=amount,
upgrade_type=price_result['upgrade_type']
)
db.session.add(upgrade_record)
db.session.commit()
except Exception as e:
print(f"创建升级记录失败: {e}")
# 不影响主流程
except Exception as e:
db.session.rollback()
return jsonify({'success': False, 'error': f'订单创建失败: {str(e)}'}), 500
@@ -3413,8 +3460,20 @@ def login_with_wechat():
# 更新最后登录时间
user.update_last_seen()
# 清除session
del wechat_qr_sessions[session_id]
# ✅ 修复不立即删除session而是标记为已完成避免轮询报错
# 原因:前端可能还在轮询检查状态,立即删除会导致 "无效的session" 错误
# 保留原状态login_ready/register_ready前端会正确处理
# wechat_qr_sessions[session_id]['status'] 保持不变
# 设置延迟删除10秒后自动清理给前端足够时间完成轮询
import threading
def delayed_cleanup():
import time
time.sleep(10)
if session_id in wechat_qr_sessions:
del wechat_qr_sessions[session_id]
print(f"✅ 延迟清理微信登录session: {session_id[:8]}...")
threading.Thread(target=delayed_cleanup, daemon=True).start()
# 生成登录响应
response_data = {
@@ -3431,7 +3490,8 @@ def login_with_wechat():
'wechat_union_id': user.wechat_union_id,
'created_at': user.created_at.isoformat() if user.created_at else None,
'last_seen': user.last_seen.isoformat() if user.last_seen else None
}
},
'isNewUser': session['status'] == 'register_ready' # 标记是否为新用户
}
# 如果需要token认证可以在这里生成
@@ -4117,6 +4177,52 @@ def get_my_event_comments():
return jsonify({'success': True, 'data': [c.to_dict() for c in comments]})
@app.route('/api/account/events/posts', methods=['GET'])
def get_my_event_posts():
"""获取我在事件上的帖子Post- 用于个人中心显示"""
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
try:
# 查询当前用户的所有 Post按创建时间倒序
posts = Post.query.filter_by(
user_id=session['user_id'],
status='active'
).order_by(Post.created_at.desc()).limit(100).all()
posts_data = []
for post in posts:
# 获取关联的事件信息
event = Event.query.get(post.event_id)
event_title = event.title if event else '未知事件'
# 获取用户信息
user = User.query.get(post.user_id)
author = user.username if user else '匿名用户'
# ⚡ 返回格式兼容旧 EventComment.to_dict()
posts_data.append({
'id': post.id,
'event_id': post.event_id,
'event_title': event_title, # ⚡ 新增字段(旧 API 没有)
'user_id': post.user_id,
'author': author, # ⚡ 兼容旧格式(字符串类型)
'content': post.content,
'title': post.title, # Post 独有字段(可选)
'content_type': post.content_type, # Post 独有字段
'likes': post.likes_count, # ⚡ 兼容旧字段名
'created_at': post.created_at.isoformat(),
'updated_at': post.updated_at.isoformat(),
'status': post.status,
})
return jsonify({'success': True, 'data': posts_data})
except Exception as e:
print(f"获取用户帖子失败: {e}")
return jsonify({'success': False, 'error': '获取帖子失败'}), 500
@app.route('/api/account/future-events/following', methods=['GET'])
def get_my_following_future_events():
"""获取当前用户关注的未来事件"""
@@ -5642,7 +5748,8 @@ def get_stock_basic_info(stock_code):
# 转换为字典
basic_info = {}
for key, value in zip(result.keys(), result):
result_dict = row_to_dict(result)
for key, value in result_dict.items():
if isinstance(value, datetime):
basic_info[key] = value.strftime('%Y-%m-%d')
elif isinstance(value, Decimal):
@@ -5685,7 +5792,7 @@ def get_stock_announcements(stock_code):
announcements = []
for row in result:
announcement = {}
for key, value in zip(row.keys(), row):
for key, value in row_to_dict(row).items():
if value is None:
announcement[key] = None
elif isinstance(value, datetime):
@@ -5734,7 +5841,7 @@ def get_stock_disclosure_schedule(stock_code):
schedules = []
for row in result:
schedule = {}
for key, value in zip(row.keys(), row):
for key, value in row_to_dict(row).items():
if value is None:
schedule[key] = None
elif isinstance(value, datetime):
@@ -5815,7 +5922,7 @@ def get_stock_actual_control(stock_code):
control_info = []
for row in result:
control_record = {}
for key, value in zip(row.keys(), row):
for key, value in row_to_dict(row).items():
if value is None:
control_record[key] = None
elif isinstance(value, datetime):
@@ -5864,7 +5971,7 @@ def get_stock_concentration(stock_code):
concentration_info = []
for row in result:
concentration_record = {}
for key, value in zip(row.keys(), row):
for key, value in row_to_dict(row).items():
if value is None:
concentration_record[key] = None
elif isinstance(value, datetime):
@@ -5933,7 +6040,7 @@ def get_stock_management(stock_code):
management_info = []
for row in result:
management_record = {}
for key, value in zip(row.keys(), row):
for key, value in row_to_dict(row).items():
if value is None:
management_record[key] = None
elif isinstance(value, datetime):
@@ -5992,7 +6099,7 @@ def get_stock_top_circulation_shareholders(stock_code):
shareholders_info = []
for row in result:
shareholder_record = {}
for key, value in zip(row.keys(), row):
for key, value in row_to_dict(row).items():
if value is None:
shareholder_record[key] = None
elif isinstance(value, datetime):
@@ -6051,7 +6158,7 @@ def get_stock_top_shareholders(stock_code):
shareholders_info = []
for row in result:
shareholder_record = {}
for key, value in zip(row.keys(), row):
for key, value in row_to_dict(row).items():
if value is None:
shareholder_record[key] = None
elif isinstance(value, datetime):
@@ -6102,7 +6209,7 @@ def get_stock_branches(stock_code):
branches_info = []
for row in result:
branch_record = {}
for key, value in zip(row.keys(), row):
for key, value in row_to_dict(row).items():
if value is None:
branch_record[key] = None
elif isinstance(value, datetime):
@@ -6169,7 +6276,7 @@ def get_stock_patents(stock_code):
patents_info = []
for row in result:
patent_record = {}
for key, value in zip(row.keys(), row):
for key, value in row_to_dict(row).items():
if value is None:
patent_record[key] = None
elif isinstance(value, datetime):
@@ -8644,7 +8751,8 @@ def get_stock_info(seccode):
ORDER BY a.ENDDATE DESC LIMIT 1
""")
result = engine.execute(query, seccode=seccode).fetchone()
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode}).fetchone()
if not result:
return jsonify({
@@ -8667,7 +8775,8 @@ def get_stock_info(seccode):
ORDER BY F001D DESC LIMIT 1
""")
forecast_result = engine.execute(forecast_query, seccode=seccode).fetchone()
with engine.connect() as conn:
forecast_result = conn.execute(forecast_query, {'seccode': seccode}).fetchone()
data = {
'stock_code': result.SECCODE,
@@ -8828,7 +8937,8 @@ def get_balance_sheet(seccode):
ORDER BY ENDDATE DESC LIMIT :limit
""")
result = engine.execute(query, seccode=seccode, limit=limit)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'limit': limit})
data = []
for row in result:
@@ -9018,7 +9128,8 @@ def get_income_statement(seccode):
ORDER BY ENDDATE DESC LIMIT :limit
""")
result = engine.execute(query, seccode=seccode, limit=limit)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'limit': limit})
data = []
for row in result:
@@ -9227,7 +9338,8 @@ def get_cashflow(seccode):
ORDER BY ENDDATE DESC LIMIT :limit
""")
result = engine.execute(query, seccode=seccode, limit=limit)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'limit': limit})
data = []
for row in result:
@@ -9462,7 +9574,8 @@ def get_financial_metrics(seccode):
ORDER BY ENDDATE DESC LIMIT :limit
""")
result = engine.execute(query, seccode=seccode, limit=limit)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'limit': limit})
data = []
for row in result:
@@ -9602,7 +9715,8 @@ def get_main_business(seccode):
ORDER BY ENDDATE DESC LIMIT :limit
""")
periods = engine.execute(period_query, seccode=seccode, limit=limit).fetchall()
with engine.connect() as conn:
periods = conn.execute(period_query, {'seccode': seccode, 'limit': limit}).fetchall()
# 产品分类数据
product_data = []
@@ -9620,7 +9734,8 @@ def get_main_business(seccode):
ORDER BY F005N DESC
""")
result = engine.execute(query, seccode=seccode, enddate=period[0])
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'enddate': period[0]})
# Convert result to list to allow multiple iterations
rows = list(result)
@@ -9669,7 +9784,8 @@ def get_main_business(seccode):
ORDER BY F007N DESC
""")
result = engine.execute(query, seccode=seccode, enddate=period[0])
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'enddate': period[0]})
# Convert result to list to allow multiple iterations
rows = list(result)
@@ -9730,7 +9846,8 @@ def get_forecast(seccode):
ORDER BY F001D DESC, UPDATE_DATE DESC LIMIT 10
""")
forecast_result = engine.execute(forecast_query, seccode=seccode)
with engine.connect() as conn:
forecast_result = conn.execute(forecast_query, {'seccode': seccode})
forecast_data = []
for row in forecast_result:
@@ -9771,7 +9888,8 @@ def get_forecast(seccode):
ORDER BY F001D DESC LIMIT 8
""")
pretime_result = engine.execute(pretime_query, seccode=seccode)
with engine.connect() as conn:
pretime_result = conn.execute(pretime_query, {'seccode': seccode})
pretime_data = []
for row in pretime_result:
@@ -9870,7 +9988,8 @@ def get_industry_rank(seccode):
""")
# 获取多个报告期的数据
result = engine.execute(query, seccode=seccode, limit_total=limit * 4)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'limit_total': limit * 4})
# 按报告期和行业级别组织数据
data_by_period = {}
@@ -9990,7 +10109,8 @@ def get_period_comparison(seccode):
ORDER BY fi.ENDDATE DESC LIMIT :periods
""")
result = engine.execute(query, seccode=seccode, periods=periods)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'periods': periods})
data = []
for row in result:
@@ -10114,7 +10234,8 @@ def get_trade_data(seccode):
LIMIT :days
""")
result = engine.execute(query, seccode=seccode, end_date=end_date, days=days)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'end_date': end_date, 'days': days})
data = []
for row in result:
@@ -10190,7 +10311,8 @@ def get_funding_data(seccode):
ORDER BY TRADEDATE DESC LIMIT :days
""")
result = engine.execute(query, seccode=seccode, days=days)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'days': days})
data = []
for row in result:
@@ -10248,7 +10370,8 @@ def get_bigdeal_data(seccode):
ORDER BY TRADEDATE DESC, F007N LIMIT :days
""")
result = engine.execute(query, seccode=seccode, days=days)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode, 'days': days})
data = []
for row in result:
@@ -10322,7 +10445,8 @@ def get_unusual_data(seccode):
ORDER BY TRADEDATE DESC, F004N LIMIT 100
""")
result = engine.execute(query, seccode=seccode)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode})
data = []
for row in result:
@@ -10400,7 +10524,8 @@ def get_pledge_data(seccode):
ORDER BY ENDDATE DESC LIMIT 12
""")
result = engine.execute(query, seccode=seccode)
with engine.connect() as conn:
result = conn.execute(query, {'seccode': seccode})
data = []
for row in result:
@@ -10457,9 +10582,12 @@ def get_market_summary(seccode):
ORDER BY ENDDATE DESC LIMIT 1
""")
trade_result = engine.execute(trade_query, seccode=seccode).fetchone()
funding_result = engine.execute(funding_query, seccode=seccode).fetchone()
pledge_result = engine.execute(pledge_query, seccode=seccode).fetchone()
with engine.connect() as conn:
trade_result = conn.execute(trade_query, {'seccode': seccode}).fetchone()
with engine.connect() as conn:
funding_result = conn.execute(funding_query, {'seccode': seccode}).fetchone()
with engine.connect() as conn:
pledge_result = conn.execute(pledge_query, {'seccode': seccode}).fetchone()
summary = {
'stock_code': seccode,
@@ -10954,7 +11082,8 @@ def get_rise_analysis(seccode):
ORDER BY trade_date DESC LIMIT 100
""")
result = engine.execute(query, **params).fetchall()
with engine.connect() as conn:
result = conn.execute(query, params).fetchall()
# 格式化数据
rise_analysis_data = []
@@ -11016,7 +11145,8 @@ def get_comprehensive_analysis(company_code):
WHERE company_code = :company_code
""")
qualitative_result = engine.execute(qualitative_query, company_code=company_code).fetchone()
with engine.connect() as conn:
qualitative_result = conn.execute(qualitative_query, {'company_code': company_code}).fetchone()
# 获取业务板块分析
segments_query = text("""
@@ -11033,7 +11163,8 @@ def get_comprehensive_analysis(company_code):
ORDER BY created_at DESC
""")
segments_result = engine.execute(segments_query, company_code=company_code).fetchall()
with engine.connect() as conn:
segments_result = conn.execute(segments_query, {'company_code': company_code}).fetchall()
# 获取竞争地位数据 - 最新一期
competitive_query = text("""
@@ -11058,7 +11189,8 @@ def get_comprehensive_analysis(company_code):
ORDER BY report_period DESC LIMIT 1
""")
competitive_result = engine.execute(competitive_query, company_code=company_code).fetchone()
with engine.connect() as conn:
competitive_result = conn.execute(competitive_query, {'company_code': company_code}).fetchone()
# 获取业务结构数据 - 最新一期
business_structure_query = text("""
@@ -11085,7 +11217,8 @@ def get_comprehensive_analysis(company_code):
ORDER BY revenue_ratio DESC
""")
business_structure_result = engine.execute(business_structure_query, company_code=company_code).fetchall()
with engine.connect() as conn:
business_structure_result = conn.execute(business_structure_query, {'company_code': company_code}).fetchall()
# 构建返回数据
response_data = {
@@ -11222,7 +11355,8 @@ def get_value_chain_analysis(company_code):
ORDER BY node_level ASC, importance_score DESC
""")
nodes_result = engine.execute(nodes_query, company_code=company_code).fetchall()
with engine.connect() as conn:
nodes_result = conn.execute(nodes_query, {'company_code': company_code}).fetchall()
# 获取产业链流向数据
flows_query = text("""
@@ -11242,7 +11376,8 @@ def get_value_chain_analysis(company_code):
ORDER BY flow_ratio DESC
""")
flows_result = engine.execute(flows_query, company_code=company_code).fetchall()
with engine.connect() as conn:
flows_result = conn.execute(flows_query, {'company_code': company_code}).fetchall()
# 构建节点数据结构
nodes_by_level = {}
@@ -11352,7 +11487,8 @@ def get_key_factors_timeline(company_code):
ORDER BY display_order ASC, created_at ASC
""")
categories_result = engine.execute(categories_query, company_code=company_code).fetchall()
with engine.connect() as conn:
categories_result = conn.execute(categories_query, {'company_code': company_code}).fetchall()
# 获取关键因素详情
factors_query = text("""
@@ -11417,7 +11553,8 @@ def get_key_factors_timeline(company_code):
ORDER BY kf.report_period DESC, kf.impact_weight DESC, kf.updated_at DESC
""")
factors_result = engine.execute(factors_query, **params).fetchall()
with engine.connect() as conn:
factors_result = conn.execute(factors_query, params).fetchall()
# 获取发展时间线事件
timeline_query = text("""
@@ -11436,9 +11573,8 @@ def get_key_factors_timeline(company_code):
ORDER BY event_date DESC LIMIT :limit
""")
timeline_result = engine.execute(timeline_query,
company_code=company_code,
limit=event_limit).fetchall()
with engine.connect() as conn:
timeline_result = conn.execute(timeline_query, {'company_code': company_code, 'limit': event_limit}).fetchall()
# 构建关键因素数据结构
key_factors_data = {}

1310
app_vx.py

File diff suppressed because it is too large Load Diff

View File

@@ -69,7 +69,7 @@ module.exports = {
},
// 日期/日历库
calendar: {
test: /[\\/]node_modules[\\/](moment|date-fns|@fullcalendar|react-big-calendar)[\\/]/,
test: /[\\/]node_modules[\\/](dayjs|date-fns|@fullcalendar|react-big-calendar)[\\/]/,
name: 'calendar-lib',
priority: 18,
reuseExistingChunk: true,
@@ -110,9 +110,6 @@ module.exports = {
...webpackConfig.resolve,
alias: {
...webpackConfig.resolve.alias,
// 强制 'debug' 模块解析到 node_modules避免与 src/devtools/ 冲突)
'debug': path.resolve(__dirname, 'node_modules/debug'),
// 根目录别名
'@': path.resolve(__dirname, 'src'),
@@ -122,7 +119,6 @@ module.exports = {
'@constants': path.resolve(__dirname, 'src/constants'),
'@contexts': path.resolve(__dirname, 'src/contexts'),
'@data': path.resolve(__dirname, 'src/data'),
'@devtools': path.resolve(__dirname, 'src/devtools'),
'@hooks': path.resolve(__dirname, 'src/hooks'),
'@layouts': path.resolve(__dirname, 'src/layouts'),
'@lib': path.resolve(__dirname, 'src/lib'),
@@ -137,8 +133,8 @@ module.exports = {
'@variables': path.resolve(__dirname, 'src/variables'),
'@views': path.resolve(__dirname, 'src/views'),
},
// 减少文件扩展名搜索
extensions: ['.js', '.jsx', '.json'],
// 减少文件扩展名搜索(优先 TypeScript
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
// 优化模块查找路径
modules: [
path.resolve(__dirname, 'src'),
@@ -165,13 +161,8 @@ module.exports = {
);
}
// 忽略 moment 的语言包(如果项目使用了 moment
webpackConfig.plugins.push(
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
})
);
// Day.js 的语言包非常小(每个约 0.5KB),所以不需要特别忽略
// 如果需要优化,可以只导入需要的语言包
// ============== Loader 优化 ==============
const babelLoaderRule = webpackConfig.module.rules.find(
@@ -267,33 +258,13 @@ module.exports = {
logLevel: 'debug',
pathRewrite: { '^/concept-api': '' },
},
'/bytedesk-api': {
target: 'http://43.143.189.195',
'/bytedesk': {
target: 'https://valuefrontier.cn', // 统一使用生产环境 Nginx 代理
changeOrigin: true,
secure: false,
secure: false, // 开发环境禁用 HTTPS 严格验证
logLevel: 'debug',
pathRewrite: { '^/bytedesk-api': '' },
},
'/chat': {
target: 'http://43.143.189.195',
changeOrigin: true,
secure: false,
logLevel: 'debug',
// 不需要pathRewrite保留/chat路径
},
'/config': {
target: 'http://43.143.189.195',
changeOrigin: true,
secure: false,
logLevel: 'debug',
// 不需要pathRewrite保留/config路径
},
'/visitor': {
target: 'http://43.143.189.195',
changeOrigin: true,
secure: false,
logLevel: 'debug',
// 不需要pathRewrite保留/visitor路径
ws: true, // 支持 WebSocket
// 不使用 pathRewrite保留 /bytedesk 前缀,让生产 Nginx 处理
},
},
}),

427
database_migration.sql Normal file
View File

@@ -0,0 +1,427 @@
-- ============================================
-- 订阅支付系统数据库迁移 SQL
-- 版本: v2.0.0
-- 日期: 2025-11-19
-- ============================================
-- ============================================
-- 第一步: 备份现有数据
-- ============================================
-- 创建备份表
CREATE TABLE IF NOT EXISTS user_subscriptions_backup AS SELECT * FROM user_subscriptions;
CREATE TABLE IF NOT EXISTS payment_orders_backup AS SELECT * FROM payment_orders;
CREATE TABLE IF NOT EXISTS subscription_plans_backup AS SELECT * FROM subscription_plans;
-- ============================================
-- 第二步: 删除旧表(先删除外键依赖的表)
-- ============================================
DROP TABLE IF EXISTS subscription_upgrades; -- 删除升级表,不再使用
DROP TABLE IF EXISTS promo_code_usage; -- 暂时删除,稍后重建
DROP TABLE IF EXISTS payment_orders; -- 删除旧订单表
DROP TABLE IF EXISTS user_subscriptions; -- 删除旧订阅表
DROP TABLE IF EXISTS subscription_plans; -- 删除旧套餐表
-- ============================================
-- 第三步: 创建新表结构
-- ============================================
-- 1. 订阅套餐表(重构)
CREATE TABLE subscription_plans (
id INT PRIMARY KEY AUTO_INCREMENT,
plan_code VARCHAR(20) NOT NULL UNIQUE COMMENT '套餐代码: pro, max',
plan_name VARCHAR(50) NOT NULL COMMENT '套餐名称: Pro专业版, Max旗舰版',
description TEXT COMMENT '套餐描述',
features JSON COMMENT '功能列表',
-- 价格配置(所有周期价格)
price_monthly DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '月付价格',
price_quarterly DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '季付价格(3个月)',
price_semiannual DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '半年付价格(6个月)',
price_yearly DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '年付价格(12个月)',
-- 状态字段
is_active BOOLEAN DEFAULT TRUE COMMENT '是否启用',
display_order INT DEFAULT 0 COMMENT '展示顺序',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_plan_code (plan_code),
INDEX idx_active_order (is_active, display_order)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='订阅套餐配置表';
-- 2. 用户订阅记录表(重构)
CREATE TABLE user_subscriptions (
id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT NOT NULL COMMENT '用户ID',
subscription_id VARCHAR(32) UNIQUE NOT NULL COMMENT '订阅ID(唯一标识)',
-- 订阅基本信息
plan_code VARCHAR(20) NOT NULL COMMENT '套餐代码: pro, max, free',
billing_cycle VARCHAR(20) NOT NULL COMMENT '计费周期: monthly, quarterly, semiannual, yearly',
-- 订阅时间
start_date DATETIME NOT NULL COMMENT '订阅开始时间',
end_date DATETIME NOT NULL COMMENT '订阅结束时间',
-- 订阅状态
status VARCHAR(20) NOT NULL DEFAULT 'active' COMMENT '状态: active(有效), expired(已过期), cancelled(已取消)',
is_current BOOLEAN DEFAULT FALSE COMMENT '是否为当前生效的订阅',
-- 支付信息
payment_order_id INT COMMENT '关联的支付订单ID',
paid_amount DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '实际支付金额',
original_price DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '原价',
discount_amount DECIMAL(10,2) DEFAULT 0 COMMENT '优惠金额',
-- 订阅类型
subscription_type VARCHAR(20) DEFAULT 'new' COMMENT '订阅类型: new(新购), renew(续费)',
previous_subscription_id VARCHAR(32) COMMENT '上一个订阅ID(续费时记录)',
-- 自动续费
auto_renew BOOLEAN DEFAULT FALSE COMMENT '是否自动续费',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_user_id (user_id),
INDEX idx_subscription_id (subscription_id),
INDEX idx_user_current (user_id, is_current),
INDEX idx_status (status),
INDEX idx_end_date (end_date)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户订阅记录表';
-- 3. 支付订单表(重构)
CREATE TABLE payment_orders (
id INT PRIMARY KEY AUTO_INCREMENT,
order_no VARCHAR(32) UNIQUE NOT NULL COMMENT '订单号',
user_id INT NOT NULL COMMENT '用户ID',
-- 订阅信息
plan_code VARCHAR(20) NOT NULL COMMENT '套餐代码',
billing_cycle VARCHAR(20) NOT NULL COMMENT '计费周期',
subscription_type VARCHAR(20) DEFAULT 'new' COMMENT '订阅类型: new(新购), renew(续费)',
-- 价格信息
original_price DECIMAL(10,2) NOT NULL COMMENT '原价',
discount_amount DECIMAL(10,2) DEFAULT 0 COMMENT '优惠金额',
final_amount DECIMAL(10,2) NOT NULL COMMENT '实付金额',
-- 优惠码
promo_code_id INT COMMENT '优惠码ID',
promo_code VARCHAR(50) COMMENT '优惠码',
-- 支付信息
payment_method VARCHAR(20) DEFAULT 'wechat' COMMENT '支付方式: wechat, alipay',
payment_channel VARCHAR(50) COMMENT '支付渠道详情',
transaction_id VARCHAR(64) COMMENT '第三方交易号',
qr_code_url TEXT COMMENT '支付二维码URL',
-- 订单状态
status VARCHAR(20) DEFAULT 'pending' COMMENT '状态: pending(待支付), paid(已支付), expired(已过期), cancelled(已取消)',
-- 时间信息
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
paid_at TIMESTAMP NULL COMMENT '支付时间',
expired_at TIMESTAMP NULL COMMENT '过期时间',
-- 备注
remark TEXT COMMENT '备注信息',
INDEX idx_order_no (order_no),
INDEX idx_user_id (user_id),
INDEX idx_status (status),
INDEX idx_created_at (created_at)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='支付订单表';
-- 4. 优惠码使用记录表(重建)
CREATE TABLE promo_code_usage (
id INT PRIMARY KEY AUTO_INCREMENT,
promo_code_id INT NOT NULL,
user_id INT NOT NULL,
order_id INT NOT NULL,
discount_amount DECIMAL(10,2) NOT NULL COMMENT '实际优惠金额',
used_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
INDEX idx_promo_code (promo_code_id),
INDEX idx_user_id (user_id),
INDEX idx_order_id (order_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='优惠码使用记录表';
-- ============================================
-- 第四步: 插入初始数据
-- ============================================
-- 插入套餐数据
INSERT INTO subscription_plans (
plan_code,
plan_name,
description,
price_monthly,
price_quarterly,
price_semiannual,
price_yearly,
features,
display_order,
is_active
) VALUES
(
'pro',
'Pro 专业版',
'为专业投资者打造,解锁高级分析功能',
299.00,
799.00,
1499.00,
2699.00,
JSON_ARRAY(
'新闻信息流',
'历史事件对比',
'事件传导链分析(AI)',
'事件-相关标的分析',
'相关概念展示',
'AI复盘功能',
'企业概览',
'个股深度分析(AI) - 50家/月',
'高效数据筛选工具',
'概念中心(548大概念)',
'历史时间轴查询 - 100天',
'涨停板块数据分析',
'个股涨停分析'
),
1,
TRUE
),
(
'max',
'Max 旗舰版',
'旗舰级体验,无限制使用所有功能',
599.00,
1599.00,
2999.00,
5399.00,
JSON_ARRAY(
'全部 Pro 版功能',
'板块深度分析(AI)',
'个股深度分析(AI) - 无限制',
'历史时间轴查询 - 无限制',
'概念高频更新',
'优先客服支持',
'独家功能抢先体验'
),
2,
TRUE
);
-- ============================================
-- 第五步: 数据迁移(可选)
-- ============================================
-- 如果需要迁移旧数据,取消以下注释:
/*
-- 迁移旧的用户订阅数据
INSERT INTO user_subscriptions (
user_id,
subscription_id,
plan_code,
billing_cycle,
start_date,
end_date,
status,
is_current,
paid_amount,
original_price,
subscription_type,
auto_renew,
created_at
)
SELECT
user_id,
CONCAT('SUB_', id, '_', UNIX_TIMESTAMP(NOW())), -- 生成订阅ID
subscription_type, -- 将 subscription_type 映射为 plan_code
COALESCE(billing_cycle, 'yearly'), -- 默认年付
COALESCE(start_date, NOW()),
COALESCE(end_date, DATE_ADD(NOW(), INTERVAL 365 DAY)),
subscription_status,
TRUE, -- 设为当前订阅
0, -- 旧数据没有支付金额,设为0
0, -- 旧数据没有原价,设为0
'new', -- 默认为新购
COALESCE(auto_renewal, FALSE),
created_at
FROM user_subscriptions_backup
WHERE subscription_type IN ('pro', 'max'); -- 只迁移付费用户
*/
-- ============================================
-- 第六步: 创建免费订阅记录(为所有用户)
-- ============================================
-- 为所有现有用户创建免费订阅记录(如果没有付费订阅)
/*
INSERT INTO user_subscriptions (
user_id,
subscription_id,
plan_code,
billing_cycle,
start_date,
end_date,
status,
is_current,
paid_amount,
original_price,
subscription_type
)
SELECT
id AS user_id,
CONCAT('FREE_', id, '_', UNIX_TIMESTAMP(NOW())),
'free',
'monthly',
NOW(),
'2099-12-31 23:59:59', -- 免费版永久有效
'active',
TRUE,
0,
0,
'new'
FROM user
WHERE id NOT IN (
SELECT DISTINCT user_id FROM user_subscriptions WHERE plan_code IN ('pro', 'max')
);
*/
-- ============================================
-- 第七步: 验证数据完整性
-- ============================================
-- 检查套餐数据
SELECT * FROM subscription_plans;
-- 检查用户订阅数据
SELECT
plan_code,
COUNT(*) as user_count,
SUM(CASE WHEN is_current = TRUE THEN 1 ELSE 0 END) as current_count
FROM user_subscriptions
GROUP BY plan_code;
-- 检查支付订单数据
SELECT
status,
COUNT(*) as order_count,
SUM(final_amount) as total_amount
FROM payment_orders
GROUP BY status;
-- ============================================
-- 第八步: 添加外键约束(可选)
-- ============================================
-- 注意: 只有在确认 users 表存在且数据完整时才执行
-- ALTER TABLE user_subscriptions
-- ADD CONSTRAINT fk_user_subscriptions_user
-- FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
-- ALTER TABLE payment_orders
-- ADD CONSTRAINT fk_payment_orders_user
-- FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
-- ALTER TABLE payment_orders
-- ADD CONSTRAINT fk_payment_orders_promo
-- FOREIGN KEY (promo_code_id) REFERENCES promo_codes(id) ON DELETE SET NULL;
-- ALTER TABLE promo_code_usage
-- ADD CONSTRAINT fk_promo_usage_promo
-- FOREIGN KEY (promo_code_id) REFERENCES promo_codes(id) ON DELETE CASCADE;
-- ALTER TABLE promo_code_usage
-- ADD CONSTRAINT fk_promo_usage_user
-- FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
-- ALTER TABLE promo_code_usage
-- ADD CONSTRAINT fk_promo_usage_order
-- FOREIGN KEY (order_id) REFERENCES payment_orders(id) ON DELETE CASCADE;
-- ============================================
-- 第九步: 创建测试数据(开发环境)
-- ============================================
-- 插入测试优惠码
INSERT INTO promo_codes (
code,
description,
discount_type,
discount_value,
applicable_plans,
applicable_cycles,
max_total_uses,
max_uses_per_user,
valid_from,
valid_until,
is_active
) VALUES
(
'WELCOME2025',
'2025新用户专享',
'percentage',
20.00,
NULL, -- 适用所有套餐
NULL, -- 适用所有周期
1000,
1,
NOW(),
DATE_ADD(NOW(), INTERVAL 90 DAY),
TRUE
),
(
'YEAR2025',
'年付专享',
'percentage',
10.00,
NULL,
JSON_ARRAY('yearly'), -- 仅适用年付
500,
1,
NOW(),
DATE_ADD(NOW(), INTERVAL 365 DAY),
TRUE
),
(
'TESTCODE',
'测试优惠码 - 固定减100元',
'fixed_amount',
100.00,
NULL,
NULL,
100,
1,
NOW(),
DATE_ADD(NOW(), INTERVAL 30 DAY),
TRUE
);
-- ============================================
-- 迁移完成提示
-- ============================================
SELECT '===================================' AS '';
SELECT '数据库迁移完成!' AS '状态';
SELECT '===================================' AS '';
SELECT '请检查以下数据:' AS '提示';
SELECT '1. subscription_plans 表是否有2条记录 (pro, max)' AS '';
SELECT '2. user_subscriptions 表数据是否正确' AS '';
SELECT '3. payment_orders 表结构是否正确' AS '';
SELECT '4. 备份表 (*_backup) 已创建' AS '';
SELECT '===================================' AS '';
SELECT '下一步: 更新后端代码 (app.py, models.py)' AS '';
SELECT '===================================' AS '';

View File

@@ -1,59 +0,0 @@
-- 数据库迁移:添加 pricing_options 字段,支持灵活的计费周期
-- 执行时间2025-01-XX
-- 说明:支持用户选择"包N个月"或"包N年"的套餐
-- 1. 添加 pricing_options 字段
ALTER TABLE subscription_plans
ADD COLUMN pricing_options TEXT NULL COMMENT 'JSON格式的计费周期选项';
-- 2. 为Pro套餐配置多种计费周期基于现有价格198元/月2000元/年)
UPDATE subscription_plans
SET pricing_options = '[
{"months": 1, "price": 198, "label": "月付", "cycle_key": "monthly"},
{"months": 3, "price": 534, "label": "3个月", "cycle_key": "3months", "discount_percent": 10},
{"months": 6, "price": 950, "label": "半年", "cycle_key": "6months", "discount_percent": 20},
{"months": 12, "price": 2000, "label": "1年", "cycle_key": "yearly", "discount_percent": 16},
{"months": 24, "price": 3600, "label": "2年", "cycle_key": "2years", "discount_percent": 24},
{"months": 36, "price": 5040, "label": "3年", "cycle_key": "3years", "discount_percent": 29}
]'
WHERE name = 'pro';
-- 3. 为Max套餐配置多种计费周期基于现有价格998元/月10000元/年)
UPDATE subscription_plans
SET pricing_options = '[
{"months": 1, "price": 998, "label": "月付", "cycle_key": "monthly"},
{"months": 3, "price": 2695, "label": "3个月", "cycle_key": "3months", "discount_percent": 10},
{"months": 6, "price": 4790, "label": "半年", "cycle_key": "6months", "discount_percent": 20},
{"months": 12, "price": 10000, "label": "1年", "cycle_key": "yearly", "discount_percent": 17},
{"months": 24, "price": 18000, "label": "2年", "cycle_key": "2years", "discount_percent": 25},
{"months": 36, "price": 25200, "label": "3年", "cycle_key": "3years", "discount_percent": 30}
]'
WHERE name = 'max';
-- ========================================
-- 价格计算说明
-- ========================================
-- Pro版198元/月2000元/年):
-- - 月付198元
-- - 3个月198×3×0.9 = 534元打9折省10%
-- - 半年198×6×0.8 = 950元打8折省20%
-- - 1年2000元已有年付价格约省16%
-- - 2年198×24×0.76 = 3600元省24%
-- - 3年198×36×0.7 = 5040元省30%
-- Max版998元/月10000元/年):
-- - 月付998元
-- - 3个月998×3×0.9 = 2695元打9折省10%
-- - 半年998×6×0.8 = 4790元打8折省20%
-- - 1年10000元已有年付价格约省17%
-- - 2年998×24×0.75 = 18000元省25%
-- - 3年998×36×0.7 = 25200元省30%
-- ========================================
-- 注意事项
-- ========================================
-- 1. 上述价格仅为示例,请根据实际营销策略调整
-- 2. 折扣力度建议:时间越长,优惠越大
-- 3. 如果不想提供某个周期,直接从数组中删除即可
-- 4. 前端会自动渲染所有可用的计费周期选项
-- 5. 用户可以通过优惠码获得额外折扣

View File

@@ -1,626 +0,0 @@
# 通知系统增强功能 - 使用指南
## 📋 概述
本指南介绍通知系统的三大增强功能:
1. **智能桌面通知** - 自动请求权限,系统级通知
2. **性能监控** - 追踪推送效果,数据驱动优化
3. **历史记录** - 持久化存储,随时查询
---
## 🎯 功能 1智能桌面通知
### 功能说明
首次收到重要/紧急通知时,自动请求浏览器通知权限,确保用户不错过关键信息。
### 工作原理
```javascript
// 在 NotificationContext 中的逻辑
if (priority === URGENT || priority === IMPORTANT) {
if (browserPermission === 'default' && !hasRequestedPermission) {
// 首次遇到重要通知,自动请求权限
await requestBrowserPermission();
setHasRequestedPermission(true); // 避免重复请求
}
}
```
### 权限状态
- **granted**: 已授权,可以发送桌面通知
- **denied**: 已拒绝,无法发送桌面通知
- **default**: 未请求,首次重要通知时会自动请求
### 使用示例
**自动触发**(推荐)
```javascript
// 无需任何代码,系统自动处理
// 首次收到重要/紧急通知时会自动弹出权限请求
```
**手动请求**
```javascript
import { useNotification } from 'contexts/NotificationContext';
function SettingsPage() {
const { requestBrowserPermission, browserPermission } = useNotification();
return (
<div>
<p>当前状态: {browserPermission}</p>
<button onClick={requestBrowserPermission}>
开启桌面通知
</button>
</div>
);
}
```
### 通知分发策略
| 优先级 | 页面在前台 | 页面在后台 |
|-------|----------|----------|
| 紧急 | 桌面通知 + 网页通知 | 桌面通知 + 网页通知 |
| 重要 | 网页通知 | 桌面通知 |
| 普通 | 网页通知 | 网页通知 |
### 测试步骤
1. **清除已保存的权限状态**
```javascript
localStorage.removeItem('browser_notification_requested');
```
2. **刷新页面**
3. **触发一个重要/紧急通知**
- Mock 模式:等待自动推送
- Real 模式:创建测试事件
4. **观察权限请求弹窗**
- 浏览器会弹出通知权限请求
- 点击"允许"授权
5. **验证桌面通知**
- 切换到其他标签页
- 收到重要通知时应该看到桌面通知
---
## 📊 功能 2性能监控
### 功能说明
追踪通知推送的各项指标,包括:
- **到达率**: 发送 vs 接收
- **点击率**: 点击 vs 接收
- **响应时间**: 收到通知到点击的平均时间
- **类型分布**: 各类型通知的数量和效果
- **时段分布**: 每小时推送量
### API 参考
#### 获取汇总统计
```javascript
import { notificationMetricsService } from 'services/notificationMetricsService';
const summary = notificationMetricsService.getSummary();
console.log(summary);
/* 输出:
{
totalSent: 100,
totalReceived: 98,
totalClicked: 45,
totalDismissed: 53,
avgResponseTime: 5200, // 毫秒
clickRate: '45.92', // 百分比
deliveryRate: '98.00' // 百分比
}
*/
```
#### 获取按类型统计
```javascript
const byType = notificationMetricsService.getByType();
console.log(byType);
/* 输出:
{
announcement: { sent: 20, received: 20, clicked: 15, dismissed: 5, clickRate: '75.00' },
stock_alert: { sent: 30, received: 30, clicked: 20, dismissed: 10, clickRate: '66.67' },
event_alert: { sent: 40, received: 38, clicked: 10, dismissed: 28, clickRate: '26.32' },
analysis_report: { sent: 10, received: 10, clicked: 0, dismissed: 10, clickRate: '0.00' }
}
*/
```
#### 获取按优先级统计
```javascript
const byPriority = notificationMetricsService.getByPriority();
console.log(byPriority);
/* 输出:
{
urgent: { sent: 10, received: 10, clicked: 9, dismissed: 1, clickRate: '90.00' },
important: { sent: 40, received: 39, clicked: 25, dismissed: 14, clickRate: '64.10' },
normal: { sent: 50, received: 49, clicked: 11, dismissed: 38, clickRate: '22.45' }
}
*/
```
#### 获取每日数据
```javascript
const dailyData = notificationMetricsService.getDailyData(7); // 最近 7 天
console.log(dailyData);
/* 输出:
[
{ date: '2025-01-15', sent: 15, received: 14, clicked: 6, dismissed: 8, clickRate: '42.86' },
{ date: '2025-01-16', sent: 20, received: 20, clicked: 10, dismissed: 10, clickRate: '50.00' },
...
]
*/
```
#### 获取完整指标
```javascript
const allMetrics = notificationMetricsService.getAllMetrics();
console.log(allMetrics);
```
#### 导出数据
```javascript
// 导出为 JSON
const json = notificationMetricsService.exportToJSON();
console.log(json);
// 导出为 CSV
const csv = notificationMetricsService.exportToCSV();
console.log(csv);
```
#### 重置指标
```javascript
notificationMetricsService.reset();
```
### 在控制台查看实时指标
打开浏览器控制台,执行:
```javascript
// 引入服务
import { notificationMetricsService } from './services/notificationMetricsService.js';
// 查看汇总
console.table(notificationMetricsService.getSummary());
// 查看按类型分布
console.table(notificationMetricsService.getByType());
// 查看最近 7 天数据
console.table(notificationMetricsService.getDailyData(7));
```
### 监控埋点(自动)
监控服务已自动集成到 `NotificationContext`,无需手动调用:
- **trackReceived**: 收到通知时自动调用
- **trackClicked**: 点击通知时自动调用
- **trackDismissed**: 关闭通知时自动调用
### 可视化展示(可选)
你可以基于监控数据创建仪表板:
```javascript
import { notificationMetricsService } from 'services/notificationMetricsService';
import { PieChart, LineChart } from 'recharts';
function MetricsDashboard() {
const summary = notificationMetricsService.getSummary();
const dailyData = notificationMetricsService.getDailyData(7);
const byType = notificationMetricsService.getByType();
return (
<div>
{/* 汇总卡片 */}
<StatsCard title="总推送数" value={summary.totalSent} />
<StatsCard title="点击率" value={`${summary.clickRate}%`} />
<StatsCard title="平均响应时间" value={`${summary.avgResponseTime}ms`} />
{/* 类型分布饼图 */}
<PieChart data={Object.entries(byType).map(([type, data]) => ({
name: type,
value: data.received
}))} />
{/* 每日趋势折线图 */}
<LineChart data={dailyData} />
</div>
);
}
```
---
## 📜 功能 3历史记录
### 功能说明
持久化存储所有接收到的通知,支持:
- 查询和筛选
- 搜索关键词
- 标记已读/已点击
- 批量删除
- 导出JSON/CSV
### API 参考
#### 获取历史记录(支持筛选和分页)
```javascript
import { notificationHistoryService } from 'services/notificationHistoryService';
const result = notificationHistoryService.getHistory({
type: 'event_alert', // 可选:筛选类型
priority: 'urgent', // 可选:筛选优先级
readStatus: 'unread', // 可选:'read' | 'unread' | 'all'
startDate: Date.now() - 7 * 24 * 60 * 60 * 1000, // 可选:开始日期
endDate: Date.now(), // 可选:结束日期
page: 1, // 页码
pageSize: 20, // 每页数量
});
console.log(result);
/* 输出:
{
records: [...], // 当前页的记录
total: 150, // 总记录数
page: 1, // 当前页
pageSize: 20, // 每页数量
totalPages: 8 // 总页数
}
*/
```
#### 搜索历史记录
```javascript
const results = notificationHistoryService.searchHistory('降准');
console.log(results); // 返回标题/内容中包含"降准"的所有记录
```
#### 标记已读/已点击
```javascript
// 标记已读
notificationHistoryService.markAsRead('notification_id');
// 标记已点击
notificationHistoryService.markAsClicked('notification_id');
```
#### 删除记录
```javascript
// 删除单条
notificationHistoryService.deleteRecord('notification_id');
// 批量删除
notificationHistoryService.deleteRecords(['id1', 'id2', 'id3']);
// 清空所有
notificationHistoryService.clearHistory();
```
#### 获取统计数据
```javascript
const stats = notificationHistoryService.getStats();
console.log(stats);
/* 输出:
{
total: 500, // 总记录数
read: 320, // 已读数
unread: 180, // 未读数
clicked: 150, // 已点击数
clickRate: '30.00', // 点击率
byType: { // 按类型统计
announcement: 100,
stock_alert: 150,
event_alert: 200,
analysis_report: 50
},
byPriority: { // 按优先级统计
urgent: 50,
important: 200,
normal: 250
}
}
*/
```
#### 导出历史记录
```javascript
// 导出为 JSON 字符串
const json = notificationHistoryService.exportToJSON({
type: 'event_alert' // 可选:只导出特定类型
});
// 导出为 CSV 字符串
const csv = notificationHistoryService.exportToCSV();
// 直接下载 JSON 文件
notificationHistoryService.downloadJSON();
// 直接下载 CSV 文件
notificationHistoryService.downloadCSV();
```
### 在控制台使用
打开浏览器控制台,执行:
```javascript
// 引入服务
import { notificationHistoryService } from './services/notificationHistoryService.js';
// 查看所有历史
console.table(notificationHistoryService.getHistory().records);
// 搜索
const results = notificationHistoryService.searchHistory('央行');
console.table(results);
// 查看统计
console.table(notificationHistoryService.getStats());
// 导出并下载
notificationHistoryService.downloadJSON();
```
### 数据结构
每条历史记录包含:
```javascript
{
id: 'notif_123', // 通知 ID
notification: { // 完整通知对象
type: 'event_alert',
priority: 'urgent',
title: '...',
content: '...',
...
},
receivedAt: 1737459600000, // 接收时间戳
readAt: 1737459650000, // 已读时间戳null 表示未读)
clickedAt: null, // 已点击时间戳null 表示未点击)
}
```
### 存储限制
- **最大数量**: 500 条(超过后自动删除最旧的)
- **存储位置**: localStorage
- **容量估算**: 约 2-5MB取决于通知内容长度
---
## 🔧 技术细节
### 文件结构
```
src/
├── services/
│ ├── browserNotificationService.js [已存在] 浏览器通知服务
│ ├── notificationMetricsService.js [新建] 性能监控服务
│ └── notificationHistoryService.js [新建] 历史记录服务
├── contexts/
│ └── NotificationContext.js [修改] 集成所有功能
└── components/
└── NotificationContainer/
└── index.js [修改] 添加点击追踪
```
### 修改清单
| 文件 | 修改内容 | 状态 |
|------|---------|------|
| `NotificationContext.js` | 添加智能权限请求、监控埋点、历史保存 | ✅ 已完成 |
| `NotificationContainer/index.js` | 添加点击追踪 | ✅ 已完成 |
| `notificationMetricsService.js` | 性能监控服务 | ✅ 已创建 |
| `notificationHistoryService.js` | 历史记录服务 | ✅ 已创建 |
### 数据流
```
用户收到通知
NotificationContext.addWebNotification()
├─ notificationMetricsService.trackReceived() [监控埋点]
├─ notificationHistoryService.saveNotification() [历史保存]
├─ 首次重要通知 → requestBrowserPermission() [智能权限]
└─ 显示网页通知或桌面通知
用户点击通知
NotificationContainer.handleClick()
├─ notificationMetricsService.trackClicked() [监控埋点]
├─ notificationHistoryService.markAsClicked() [历史标记]
└─ 跳转到目标页面
用户关闭通知
NotificationContext.removeNotification()
└─ notificationMetricsService.trackDismissed() [监控埋点]
```
---
## 🧪 测试步骤
### 1. 测试智能桌面通知
```bash
# 1. 清除已保存的权限状态
localStorage.removeItem('browser_notification_requested');
# 2. 刷新页面
# 3. 等待或触发一个重要/紧急通知
# 4. 观察浏览器弹出权限请求
# 5. 授权后验证桌面通知功能
```
### 2. 测试性能监控
```javascript
// 在控制台执行
import { notificationMetricsService } from './services/notificationMetricsService.js';
// 查看实时统计
console.table(notificationMetricsService.getSummary());
// 模拟推送几条通知,再次查看
console.table(notificationMetricsService.getAllMetrics());
// 导出数据
console.log(notificationMetricsService.exportToJSON());
```
### 3. 测试历史记录
```javascript
// 在控制台执行
import { notificationHistoryService } from './services/notificationHistoryService.js';
// 查看历史
console.table(notificationHistoryService.getHistory().records);
// 搜索
console.table(notificationHistoryService.searchHistory('降准'));
// 查看统计
console.table(notificationHistoryService.getStats());
// 导出
notificationHistoryService.downloadJSON();
```
---
## 📈 数据导出示例
### 导出性能监控数据
```javascript
import { notificationMetricsService } from 'services/notificationMetricsService';
// 导出 JSON
const json = notificationMetricsService.exportToJSON();
// 复制到剪贴板或保存
// 导出 CSV
const csv = notificationMetricsService.exportToCSV();
// 可以在 Excel 中打开
```
### 导出历史记录
```javascript
import { notificationHistoryService } from 'services/notificationHistoryService';
// 导出最近 7 天的事件动向通知
const json = notificationHistoryService.exportToJSON({
type: 'event_alert',
startDate: Date.now() - 7 * 24 * 60 * 60 * 1000
});
// 直接下载为文件
notificationHistoryService.downloadJSON({
type: 'event_alert'
});
```
---
## ⚠️ 注意事项
### 1. localStorage 容量限制
- 大多数浏览器限制为 5-10MB
- 建议定期清理历史记录和监控数据
- 使用导出功能备份数据
### 2. 浏览器兼容性
- **桌面通知**: 需要 HTTPS 或 localhost
- **localStorage**: 所有现代浏览器支持
- **权限请求**: 需要用户交互(不能自动授权)
### 3. 隐私和数据安全
- 所有数据存储在本地localStorage
- 不会上传到服务器
- 用户可以随时清空数据
### 4. 性能影响
- 监控埋点非常轻量,几乎无性能影响
- 历史记录保存异步进行,不阻塞 UI
- 数据查询在客户端完成,不增加服务器负担
---
## 🎉 总结
### 已实现的功能
**智能桌面通知**
- 首次重要通知时自动请求权限
- 智能分发策略(前台/后台)
- localStorage 持久化权限状态
**性能监控**
- 到达率、点击率、响应时间追踪
- 按类型、优先级、时段统计
- 数据导出JSON/CSV
**历史记录**
- 持久化存储(最多 500 条)
- 筛选、搜索、分页
- 已读/已点击标记
- 数据导出JSON/CSV
### 未实现的功能(备份,待上线)
⏸️ 历史记录页面 UI代码已备份随时可上线
⏸️ 监控仪表板 UI可选暂未实现
### 下一步建议
1. **用户设置页面**: 允许用户自定义通知偏好
2. **声音提示**: 为紧急通知添加音效
3. **数据同步**: 将历史和监控数据同步到服务器
4. **高级筛选**: 添加更多筛选维度(如关键词、股票代码等)
---
**文档版本**: v1.0
**最后更新**: 2025-01-21
**维护者**: Claude Code

View File

@@ -1,371 +0,0 @@
# 消息推送系统整合 - 测试指南
## 📋 整合完成清单
**统一事件名称**
- Mock 和真实 Socket.IO 都使用 `new_event` 事件名
- 移除了 `trade_notification` 事件名
**数据适配器**
- 创建了 `adaptEventToNotification` 函数
- 自动识别后端事件格式并转换为前端通知格式
- 重要性映射S → urgent, A → important, B/C → normal
**NotificationContext 升级**
- 监听 `new_event` 事件
- 自动使用适配器转换事件数据
- 支持 Mock 和 Real 模式无缝切换
**EventList 实时推送**
- 集成 `useEventNotifications` Hook
- 实时更新事件列表
- Toast 通知提示
- WebSocket 连接状态指示器
---
## 🧪 测试步骤
### 1. 测试 Mock 模式(开发环境)
#### 1.1 配置环境变量
确保 `.env` 文件包含以下配置:
```bash
REACT_APP_USE_MOCK_SOCKET=true
# 或者
REACT_APP_ENABLE_MOCK=true
```
#### 1.2 启动应用
```bash
npm start
```
#### 1.3 验证功能
**a) 右下角通知卡片**
- 启动后等待 3 秒,应该看到 "连接成功" 系统通知
- 每隔 60 秒会自动推送 1-2 条模拟消息
- 通知类型包括:
- 📢 公告通知(蓝色)
- 📈 股票动向(红/绿色,根据涨跌)
- 📰 事件动向(橙色)
- 📊 分析报告(紫色)
**b) 事件列表页面**
- 访问事件列表页面Community/Events
- 顶部应显示 "🟢 实时推送已开启"
- 收到新事件时:
- 右上角显示 Toast 通知
- 事件自动添加到列表顶部
- 无重复添加
**c) 控制台日志**
打开浏览器控制台,应该看到:
```
[Socket Service] Using MOCK Socket Service
NotificationContext: Socket connected
EventList: 收到新事件推送
```
---
### 2. 测试 Real 模式(生产环境)
#### 2.1 配置环境变量
修改 `.env` 文件:
```bash
REACT_APP_USE_MOCK_SOCKET=false
# 或删除该配置项
```
#### 2.2 启动后端 Flask 服务
```bash
python app_2.py
```
确保后端已启动 Socket.IO 服务并监听事件推送。
#### 2.3 启动前端应用
```bash
npm start
```
#### 2.4 创建测试事件(后端)
使用后端提供的测试脚本:
```bash
python test_create_event.py
```
#### 2.5 验证功能
**a) WebSocket 连接**
- 检查控制台:`[Socket Service] Using REAL Socket Service`
- 事件列表顶部显示 "🟢 实时推送已开启"
**b) 事件推送流程**
1. 运行 `test_create_event.py` 创建新事件
2. 后端轮询检测到新事件(最多等待 30 秒)
3. 后端通过 Socket.IO 推送 `new_event`
4. 前端接收事件并转换格式
5. 同时显示:
- 右下角通知卡片
- 事件列表 Toast 提示
- 事件添加到列表顶部
**c) 数据格式验证**
在控制台查看事件对象,应包含:
```javascript
{
id: 123,
type: "event_alert", // 适配器转换后
priority: "urgent", // importance: S → urgent
title: "事件标题",
content: "事件描述",
clickable: true,
link: "/event-detail/123",
extra: {
eventType: "tech",
importance: "S",
// ... 更多后端字段
}
}
```
---
## 🔍 验证清单
### 功能验证
- [ ] Mock 模式下收到模拟通知
- [ ] Real 模式下收到真实后端推送
- [ ] 通知卡片正确显示(类型、颜色、内容)
- [ ] 事件列表实时更新
- [ ] Toast 通知正常弹出
- [ ] 连接状态指示器正确显示
- [ ] 点击通知可跳转到详情页
- [ ] 无重复事件添加
### 数据验证
- [ ] 后端事件格式正确转换
- [ ] 重要性映射正确S/A/B/C → urgent/important/normal
- [ ] 时间戳正确显示
- [ ] 链接路径正确生成
- [ ] 所有字段完整保留在 extra 中
### 性能验证
- [ ] 事件列表最多保留 100 条
- [ ] 通知自动关闭(紧急=不关闭,重要=30s普通=15s
- [ ] WebSocket 自动重连
- [ ] 无内存泄漏
---
## 🐛 常见问题排查
### Q1: Mock 模式下没有收到通知?
**A:** 检查:
1. 环境变量 `REACT_APP_USE_MOCK_SOCKET=true` 是否设置
2. 控制台是否显示 "Using MOCK Socket Service"
3. 是否等待了 3 秒(首次通知延迟)
### Q2: Real 模式下无法连接?
**A:** 检查:
1. Flask 后端是否启动:`python app_2.py`
2. API_BASE_URL 是否正确配置
3. CORS 设置是否包含前端域名
4. 控制台是否有连接错误
### Q3: 收到重复通知?
**A:** 检查:
1. 是否多次渲染了 EventList 组件
2. 是否在多个地方调用了 `useEventNotifications`
3. 控制台日志中是否有 "事件已存在,跳过添加"
### Q4: 通知卡片样式异常?
**A:** 检查:
1. 事件的 `type` 字段是否正确
2. 是否缺少必要的字段title, content
3. `NOTIFICATION_TYPE_CONFIGS` 是否定义了该类型
### Q5: 事件列表不更新?
**A:** 检查:
1. WebSocket 连接状态(顶部 Badge
2. `onNewEvent` 回调是否触发(控制台日志)
3. `setLocalEvents` 是否正确执行
---
## 📊 测试数据示例
### Mock 模拟数据类型
**公告通知**
```javascript
{
type: "announcement",
priority: "urgent",
title: "贵州茅台发布2024年度财报公告",
content: "2024年度营收同比增长15.2%..."
}
```
**股票动向**
```javascript
{
type: "stock_alert",
priority: "urgent",
title: "您关注的股票触发预警",
extra: {
stockCode: "300750",
priceChange: "+5.2%"
}
}
```
**事件动向**
```javascript
{
type: "event_alert",
priority: "important",
title: "央行宣布降准0.5个百分点",
extra: {
eventId: "evt001",
sectors: ["银行", "地产", "基建"]
}
}
```
**分析报告**
```javascript
{
type: "analysis_report",
priority: "important",
title: "医药行业深度报告:创新药迎来政策拐点",
author: {
name: "李明",
organization: "中信证券"
}
}
```
### 真实后端事件格式
```javascript
{
id: 123,
title: "新能源汽车补贴政策延期",
description: "财政部宣布新能源汽车购置补贴政策延长至2024年底",
event_type: "policy",
importance: "S",
status: "active",
created_at: "2025-01-21T14:30:00",
hot_score: 95.5,
view_count: 1234,
related_avg_chg: 5.2,
related_max_chg: 15.8,
keywords: ["新能源", "补贴", "政策"]
}
```
---
## 🎯 下一步建议
### 1. 用户设置
允许用户控制通知偏好:
```jsx
<Switch
isChecked={enableNotifications}
onChange={handleToggle}
>
启用实时通知
</Switch>
```
### 2. 通知过滤
按重要性、类型过滤通知:
```javascript
useEventNotifications({
eventType: 'tech', // 只订阅科技类
importance: 'S', // 只订阅 S 级
enabled: true
})
```
### 3. 声音提示
添加音效提醒:
```javascript
onNewEvent: (event) => {
if (event.priority === 'urgent') {
new Audio('/alert.mp3').play();
}
}
```
### 4. 桌面通知
利用浏览器通知 API
```javascript
if (Notification.permission === 'granted') {
new Notification(event.title, {
body: event.content,
icon: '/logo.png'
});
}
```
---
## 📝 技术说明
### 架构优势
1. **统一接口**Mock 和 Real 完全相同的 API
2. **自动适配**:智能识别数据格式并转换
3. **解耦设计**:通知系统和事件列表独立工作
4. **向后兼容**:不影响现有功能
### 关键文件
- `src/services/socketService.js` - Socket.IO 服务
- `src/services/socket/index.js` - Socket 服务导出
- `src/contexts/NotificationContext.js` - 通知上下文
- `src/hooks/useEventNotifications.js` - React Hook
- `src/views/Community/components/EventList.js` - 事件列表集成
> **注意**: `mockSocketService.js` 已移除2025-01-10现仅使用真实 Socket 连接。
### 数据流
```
后端创建事件
后端轮询检测30秒
Socket.IO 推送 new_event
前端 socketService 接收
NotificationContext 监听并适配
同时触发:
├─ NotificationContainer右下角卡片
└─ EventList onNewEventToast + 列表更新)
```
---
## ✅ 整合完成
所有代码和功能已经就绪!你现在可以:
1. ✅ 在 Mock 模式下测试实时推送
2. ✅ 在 Real 模式下连接后端
3. ✅ 查看右下角通知卡片
4. ✅ 体验事件列表实时更新
5. ✅ 随时切换 Mock/Real 模式
**祝测试顺利!🎉**

View File

@@ -0,0 +1,576 @@
# 订阅支付系统重新设计方案
## 📊 问题分析
### 现有系统的问题
1. **价格配置混乱**
- 季付和月付价格相同(配置错误)
- `monthly_price``yearly_price` 字段命名不清晰
- 缺少季付、半年付等周期的价格配置
2. **升级逻辑复杂且不合理**
- 计算剩余价值折算(按天计算 `remaining_value`
- 用户难以理解升级价格
- 续费用户和新用户价格不一致
- 逻辑复杂,容易出错
3. **按钮文案不清晰**
- 已订阅用户应显示"续费 Pro"/"续费 Max"
- 而不是"升级至 Pro"/"切换至 Pro"
4. **数据库表设计问题**
- `SubscriptionUpgrade` 表记录升级,但逻辑过于复杂
- `PaymentOrder` 表缺少必要字段
- 价格配置分散在多个字段
---
## ✨ 新设计方案
### 核心原则
1. **简化续费逻辑**: **续费用户与新用户价格完全一致**,不做任何折算
2. **清晰的价格体系**: 每个套餐每个周期都有明确的价格
3. **统一的用户体验**: 无论是新购还是续费,价格透明一致
4. **独立的订阅记录**: 每次支付都创建新的订阅记录(历史可追溯)
---
## 📐 数据库表设计
### 1. `subscription_plans` - 订阅套餐表(重构)
```sql
CREATE TABLE subscription_plans (
id INT PRIMARY KEY AUTO_INCREMENT,
plan_code VARCHAR(20) NOT NULL UNIQUE COMMENT '套餐代码: pro, max',
plan_name VARCHAR(50) NOT NULL COMMENT '套餐名称: Pro专业版, Max旗舰版',
description TEXT COMMENT '套餐描述',
features JSON COMMENT '功能列表',
-- 价格配置(所有周期价格)
price_monthly DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '月付价格',
price_quarterly DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '季付价格(3个月)',
price_semiannual DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '半年付价格(6个月)',
price_yearly DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT '年付价格(12个月)',
-- 状态字段
is_active BOOLEAN DEFAULT TRUE COMMENT '是否启用',
display_order INT DEFAULT 0 COMMENT '展示顺序',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_plan_code (plan_code),
INDEX idx_active_order (is_active, display_order)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='订阅套餐配置表';
```
**示例数据**:
```sql
INSERT INTO subscription_plans (plan_code, plan_name, description, price_monthly, price_quarterly, price_semiannual, price_yearly) VALUES
('pro', 'Pro 专业版', '为专业投资者打造', 299.00, 799.00, 1499.00, 2699.00),
('max', 'Max 旗舰版', '旗舰级体验', 599.00, 1599.00, 2999.00, 5399.00);
```
---
### 2. `user_subscriptions` - 用户订阅记录表(重构)
```sql
CREATE TABLE user_subscriptions (
id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT NOT NULL COMMENT '用户ID',
subscription_id VARCHAR(32) UNIQUE NOT NULL COMMENT '订阅ID(唯一标识)',
-- 订阅基本信息
plan_code VARCHAR(20) NOT NULL COMMENT '套餐代码: pro, max',
billing_cycle VARCHAR(20) NOT NULL COMMENT '计费周期: monthly, quarterly, semiannual, yearly',
-- 订阅时间
start_date DATETIME NOT NULL COMMENT '订阅开始时间',
end_date DATETIME NOT NULL COMMENT '订阅结束时间',
-- 订阅状态
status VARCHAR(20) NOT NULL DEFAULT 'active' COMMENT '状态: active(有效), expired(已过期), cancelled(已取消)',
is_current BOOLEAN DEFAULT FALSE COMMENT '是否为当前生效的订阅',
-- 支付信息
payment_order_id INT COMMENT '关联的支付订单ID',
paid_amount DECIMAL(10,2) NOT NULL COMMENT '实际支付金额',
original_price DECIMAL(10,2) NOT NULL COMMENT '原价',
discount_amount DECIMAL(10,2) DEFAULT 0 COMMENT '优惠金额',
-- 订阅类型
subscription_type VARCHAR(20) DEFAULT 'new' COMMENT '订阅类型: new(新购), renew(续费)',
previous_subscription_id VARCHAR(32) COMMENT '上一个订阅ID(续费时记录)',
-- 自动续费
auto_renew BOOLEAN DEFAULT FALSE COMMENT '是否自动续费',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_user_id (user_id),
INDEX idx_subscription_id (subscription_id),
INDEX idx_user_current (user_id, is_current),
INDEX idx_status (status),
INDEX idx_end_date (end_date),
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户订阅记录表';
```
**设计说明**:
- 每次支付都创建新的订阅记录
- 通过 `is_current` 标识当前生效的订阅
- 支持订阅历史追溯
- 续费时记录 `previous_subscription_id` 形成订阅链
---
### 3. `payment_orders` - 支付订单表(重构)
```sql
CREATE TABLE payment_orders (
id INT PRIMARY KEY AUTO_INCREMENT,
order_no VARCHAR(32) UNIQUE NOT NULL COMMENT '订单号',
user_id INT NOT NULL COMMENT '用户ID',
-- 订阅信息
plan_code VARCHAR(20) NOT NULL COMMENT '套餐代码',
billing_cycle VARCHAR(20) NOT NULL COMMENT '计费周期',
subscription_type VARCHAR(20) DEFAULT 'new' COMMENT '订阅类型: new(新购), renew(续费)',
-- 价格信息
original_price DECIMAL(10,2) NOT NULL COMMENT '原价',
discount_amount DECIMAL(10,2) DEFAULT 0 COMMENT '优惠金额',
final_amount DECIMAL(10,2) NOT NULL COMMENT '实付金额',
-- 优惠码
promo_code_id INT COMMENT '优惠码ID',
promo_code VARCHAR(50) COMMENT '优惠码',
-- 支付信息
payment_method VARCHAR(20) DEFAULT 'wechat' COMMENT '支付方式: wechat, alipay',
payment_channel VARCHAR(50) COMMENT '支付渠道详情',
transaction_id VARCHAR(64) COMMENT '第三方交易号',
qr_code_url TEXT COMMENT '支付二维码URL',
-- 订单状态
status VARCHAR(20) DEFAULT 'pending' COMMENT '状态: pending(待支付), paid(已支付), expired(已过期), cancelled(已取消)',
-- 时间信息
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
paid_at TIMESTAMP NULL COMMENT '支付时间',
expired_at TIMESTAMP NULL COMMENT '过期时间',
-- 备注
remark TEXT COMMENT '备注信息',
INDEX idx_order_no (order_no),
INDEX idx_user_id (user_id),
INDEX idx_status (status),
INDEX idx_created_at (created_at),
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (promo_code_id) REFERENCES promo_codes(id) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='支付订单表';
```
---
### 4. `promo_codes` - 优惠码表(保持不变,微调)
```sql
CREATE TABLE promo_codes (
id INT PRIMARY KEY AUTO_INCREMENT,
code VARCHAR(50) UNIQUE NOT NULL COMMENT '优惠码',
description VARCHAR(200) COMMENT '描述',
-- 折扣类型
discount_type VARCHAR(20) NOT NULL COMMENT '折扣类型: percentage(百分比), fixed_amount(固定金额)',
discount_value DECIMAL(10,2) NOT NULL COMMENT '折扣值',
-- 适用范围
applicable_plans JSON COMMENT '适用套餐: ["pro", "max"] 或 null(全部)',
applicable_cycles JSON COMMENT '适用周期: ["monthly", "yearly"] 或 null(全部)',
min_amount DECIMAL(10,2) COMMENT '最低消费金额',
-- 使用限制
max_total_uses INT COMMENT '最大使用次数(总)',
max_uses_per_user INT DEFAULT 1 COMMENT '每用户最大使用次数',
current_uses INT DEFAULT 0 COMMENT '当前使用次数',
-- 有效期
valid_from TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '生效时间',
valid_until TIMESTAMP NULL COMMENT '过期时间',
-- 状态
is_active BOOLEAN DEFAULT TRUE COMMENT '是否启用',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_code (code),
INDEX idx_active (is_active),
INDEX idx_valid_period (valid_from, valid_until)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='优惠码表';
```
---
### 5. `promo_code_usage` - 优惠码使用记录表(保持不变)
```sql
CREATE TABLE promo_code_usage (
id INT PRIMARY KEY AUTO_INCREMENT,
promo_code_id INT NOT NULL,
user_id INT NOT NULL,
order_id INT NOT NULL,
discount_amount DECIMAL(10,2) NOT NULL COMMENT '实际优惠金额',
used_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
INDEX idx_promo_code (promo_code_id),
INDEX idx_user_id (user_id),
INDEX idx_order_id (order_id),
FOREIGN KEY (promo_code_id) REFERENCES promo_codes(id) ON DELETE CASCADE,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (order_id) REFERENCES payment_orders(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='优惠码使用记录表';
```
---
### 6. 删除不必要的表
**删除 `subscription_upgrades` 表** - 不再需要复杂的升级逻辑
---
## 💡 业务逻辑设计
### 1. 价格计算逻辑(简化版)
```python
def calculate_subscription_price(plan_code, billing_cycle, promo_code=None):
"""
计算订阅价格(新购和续费价格完全一致)
Args:
plan_code: 套餐代码 (pro/max)
billing_cycle: 计费周期 (monthly/quarterly/semiannual/yearly)
promo_code: 优惠码(可选)
Returns:
dict: {
'plan_code': 'pro',
'billing_cycle': 'yearly',
'original_price': 2699.00,
'discount_amount': 0,
'final_amount': 2699.00,
'promo_code': None,
'promo_error': None
}
"""
# 1. 查询套餐价格
plan = SubscriptionPlan.query.filter_by(plan_code=plan_code, is_active=True).first()
if not plan:
return {'error': '套餐不存在'}
# 2. 获取对应周期的价格
price_field = f'price_{billing_cycle}'
original_price = getattr(plan, price_field, 0)
if original_price <= 0:
return {'error': '价格配置错误'}
result = {
'plan_code': plan_code,
'plan_name': plan.plan_name,
'billing_cycle': billing_cycle,
'original_price': float(original_price),
'discount_amount': 0,
'final_amount': float(original_price),
'promo_code': None,
'promo_error': None
}
# 3. 应用优惠码(如果有)
if promo_code:
promo, error = validate_promo_code(promo_code, plan_code, billing_cycle, original_price, user_id)
if promo:
discount = calculate_discount(promo, original_price)
result['discount_amount'] = float(discount)
result['final_amount'] = float(original_price - discount)
result['promo_code'] = promo.code
elif error:
result['promo_error'] = error
return result
```
**关键点**:
- ✅ 不再计算 `remaining_value`(剩余价值)
- ✅ 不再区分新购/续费价格
- ✅ 逻辑简单,易于维护
- ✅ 用户体验清晰透明
---
### 2. 创建订单逻辑
```python
def create_subscription_order(user_id, plan_code, billing_cycle, promo_code=None):
"""
创建订阅支付订单
"""
# 1. 计算价格
price_result = calculate_subscription_price(plan_code, billing_cycle, promo_code)
if 'error' in price_result:
return {'success': False, 'error': price_result['error']}
# 2. 判断是新购还是续费
current_sub = get_current_subscription(user_id)
subscription_type = 'new'
if current_sub and current_sub.plan_code in ['pro', 'max']:
subscription_type = 'renew'
# 3. 创建支付订单
order = PaymentOrder(
order_no=generate_order_no(user_id),
user_id=user_id,
plan_code=plan_code,
billing_cycle=billing_cycle,
subscription_type=subscription_type,
original_price=price_result['original_price'],
discount_amount=price_result['discount_amount'],
final_amount=price_result['final_amount'],
promo_code=promo_code,
status='pending',
expired_at=datetime.now() + timedelta(minutes=30)
)
db.session.add(order)
db.session.commit()
# 4. 生成支付二维码(微信支付)
qr_code_url = generate_wechat_qr_code(order)
order.qr_code_url = qr_code_url
db.session.commit()
return {'success': True, 'order': order.to_dict()}
```
---
### 3. 支付成功后的订阅激活逻辑
```python
def activate_subscription_after_payment(order_id):
"""
支付成功后激活订阅
"""
order = PaymentOrder.query.get(order_id)
if not order or order.status != 'paid':
return {'success': False, 'error': '订单状态错误'}
user_id = order.user_id
plan_code = order.plan_code
billing_cycle = order.billing_cycle
# 1. 计算订阅周期
cycle_days = {
'monthly': 30,
'quarterly': 90,
'semiannual': 180,
'yearly': 365
}
days = cycle_days.get(billing_cycle, 30)
# 2. 获取当前订阅
current_sub = UserSubscription.query.filter_by(
user_id=user_id,
is_current=True
).first()
# 3. 计算开始和结束时间
now = datetime.now()
if current_sub and current_sub.end_date > now:
# 续费:从当前订阅结束时间开始
start_date = current_sub.end_date
else:
# 新购:从当前时间开始
start_date = now
end_date = start_date + timedelta(days=days)
# 4. 创建新订阅记录
new_subscription = UserSubscription(
user_id=user_id,
subscription_id=generate_subscription_id(),
plan_code=plan_code,
billing_cycle=billing_cycle,
start_date=start_date,
end_date=end_date,
status='active',
is_current=True,
payment_order_id=order.id,
paid_amount=order.final_amount,
original_price=order.original_price,
discount_amount=order.discount_amount,
subscription_type=order.subscription_type,
previous_subscription_id=current_sub.subscription_id if current_sub else None
)
# 5. 将旧订阅标记为非当前
if current_sub:
current_sub.is_current = False
db.session.add(new_subscription)
db.session.commit()
return {'success': True, 'subscription': new_subscription.to_dict()}
```
**关键特性**:
- ✅ 续费时从**当前订阅结束时间**开始,避免浪费
- ✅ 每次支付都创建新的订阅记录
- ✅ 保留历史订阅记录(通过 `previous_subscription_id` 形成链)
- ✅ 逻辑清晰,易于理解
---
### 4. 按钮文案逻辑
```python
def get_subscription_button_text(user, plan_code, billing_cycle):
"""
获取订阅按钮文字
Args:
user: 用户对象
plan_code: 套餐代码 (pro/max)
billing_cycle: 计费周期
Returns:
str: 按钮文字
"""
current_sub = get_current_subscription(user.id)
# 1. 如果没有订阅或订阅已过期
if not current_sub or current_sub.plan_code == 'free' or current_sub.status != 'active':
return f"选择 {get_plan_display_name(plan_code)}"
# 2. 如果是当前套餐且周期相同
if current_sub.plan_code == plan_code and current_sub.billing_cycle == billing_cycle:
return f"续费 {get_plan_display_name(plan_code)}"
# 3. 如果是当前套餐但周期不同
if current_sub.plan_code == plan_code:
return f"切换至{get_cycle_display_name(billing_cycle)}"
# 4. 如果是不同套餐
return f"选择 {get_plan_display_name(plan_code)}"
def get_plan_display_name(plan_code):
names = {'pro': 'Pro 专业版', 'max': 'Max 旗舰版'}
return names.get(plan_code, plan_code)
def get_cycle_display_name(billing_cycle):
names = {
'monthly': '月付',
'quarterly': '季付',
'semiannual': '半年付',
'yearly': '年付'
}
return names.get(billing_cycle, billing_cycle)
```
**示例**:
- 免费用户看 Pro 年付: "选择 Pro 专业版"
- Pro 月付用户看 Pro 年付: "切换至年付"
- Pro 年付用户看 Pro 年付: "续费 Pro 专业版"
- Pro 用户看 Max 年付: "选择 Max 旗舰版"
---
## 📊 价格配置示例
### Pro 专业版价格设定
| 计费周期 | 价格 | 原价 | 折扣 | 月均价格 |
|---------|------|------|------|---------|
| 月付 | ¥299 | - | - | ¥299 |
| 季付(3个月) | ¥799 | ¥897 | 11% | ¥266 |
| 半年付(6个月) | ¥1499 | ¥1794 | 16% | ¥250 |
| 年付(12个月) | ¥2699 | ¥3588 | 25% | ¥225 |
### Max 旗舰版价格设定
| 计费周期 | 价格 | 原价 | 折扣 | 月均价格 |
|---------|------|------|------|---------|
| 月付 | ¥599 | - | - | ¥599 |
| 季付(3个月) | ¥1599 | ¥1797 | 11% | ¥533 |
| 半年付(6个月) | ¥2999 | ¥3594 | 17% | ¥500 |
| 年付(12个月) | ¥5399 | ¥7188 | 25% | ¥450 |
---
## 🔄 迁移方案
### 数据迁移 SQL
参见 `database_migration.sql`
### 代码迁移步骤
1. **备份现有数据库**
2. **执行数据库迁移 SQL**
3. **更新数据库模型** (`models.py`)
4. **更新价格计算逻辑** (`calculate_price.py`)
5. **更新 API 路由** (`routes.py`)
6. **更新前端组件** (`SubscriptionContentNew.tsx`)
7. **测试完整流程**
8. **灰度发布**
---
## ✅ 优势总结
### 相比旧系统的改进
1. **价格透明** - 续费用户和新用户价格完全一致
2. **逻辑简化** - 不再计算剩余价值,代码减少 50%+
3. **易于理解** - 用户体验更清晰
4. **灵活扩展** - 轻松添加新的计费周期
5. **历史追溯** - 完整的订阅历史记录
6. **数据完整** - 每次支付都有完整的记录
### 用户体验改进
1. **按钮文案清晰** - "续费 Pro"/"选择 Pro"明确表达意图
2. **价格一致性** - 所有用户看到的价格都一样
3. **无隐藏费用** - 不会因为"升级折算"产生困惑
4. **透明计费** - 支付金额 = 显示价格 - 优惠码折扣
---
## 📝 后续优化建议
1. **自动续费** - 到期前自动扣款续费
2. **订阅提醒** - 到期前 7 天、3 天、1 天发送通知
3. **订阅暂停** - 允许用户暂停订阅
4. **订阅降级** - 从 Max 降级到 Pro当前周期结束后生效
5. **发票管理** - 支持开具电子发票
6. **支付方式扩展** - 支持支付宝、银行卡等
---
**设计时间**: 2025-11-19
**设计者**: Claude Code
**版本**: v2.0.0

View File

@@ -1,280 +0,0 @@
# 消息推送系统优化总结
## 优化目标
1. 简化通知信息密度,通过视觉层次(边框+背景色)表达优先级
2. 增强紧急通知的视觉冲击力(红色脉冲边框动画)
3. 采用智能显示策略,降低普通通知的视觉干扰
## 实施内容
### 1. 优先级配置更新 (src/constants/notificationTypes.js)
#### 新增配置项
- `borderWidth`: 边框宽度
- 紧急 (urgent): 6px
- 重要 (important): 4px
- 普通 (normal): 2px
- `bgOpacity`: 背景色透明度(亮色模式)
- 紧急: 0.25 (深色背景)
- 重要: 0.15 (中色背景)
- 普通: 0.08 (浅色背景)
- `darkBgOpacity`: 背景色透明度(暗色模式)
- 紧急: 0.30
- 重要: 0.20
- 普通: 0.12
#### 新增辅助函数
- `getPriorityBgOpacity(priority, isDark)`: 获取优先级对应的背景色透明度
- `getPriorityBorderWidth(priority)`: 获取优先级对应的边框宽度
### 2. 紧急通知脉冲动画 (src/components/NotificationContainer/index.js)
#### 动画效果
- 使用 `@emotion/react``keyframes` 创建脉冲动画
- 仅紧急通知 (urgent) 应用动画效果
- 动画特性:
- 边框颜色脉冲效果
- 阴影扩散效果0 → 12px
- 持续时间2秒
- 缓动函数ease-in-out
- 无限循环
```javascript
const pulseAnimation = keyframes`
0%, 100% {
border-left-color: currentColor;
box-shadow: 0 0 0 0 currentColor;
}
50% {
border-left-color: currentColor;
box-shadow: -4px 0 12px 0 currentColor;
}
`;
```
### 3. 背景色优先级优化
#### 亮色模式
- **紧急通知**`${colorScheme}.200` - 深色背景 + 脉冲动画
- **重要通知**`${colorScheme}.100` - 中色背景
- **普通通知**`white` - 极淡背景(降低视觉干扰)
#### 暗色模式
- **紧急通知**`${colorScheme}.800` 或 typeConfig.darkBg
- **重要通知**`${colorScheme}.800` 或 typeConfig.darkBg
- **普通通知**`gray.800` - 暗灰背景(降低视觉干扰)
### 4. 可点击性视觉提示
#### 问题
- 用户需要 hover 才能知道通知是否可点击
- cursor: pointer 不够直观
#### 解决方案
- **可点击的通知**
- 添加完整边框(四周 1px solid
- 保持左侧优先级边框宽度
- 使用更明显的阴影md 级别)
- 产生微妙的悬浮感
- **不可点击的通知**
- 仅左侧边框
- 使用较淡的阴影sm 级别)
```javascript
// 可点击的通知添加完整边框
{...(isActuallyClickable && {
border: '1px solid',
borderLeftWidth: priorityBorderWidth, // 保持优先级
})}
// 可点击的通知使用更明显的阴影
boxShadow={isActuallyClickable
? (isNewest ? '2xl' : 'md')
: (isNewest ? 'xl' : 'sm')}
```
### 5. 通知组件简化 (src/components/NotificationContainer/index.js)
#### 显示元素分级
**LV1 - 必需元素(始终显示)**
- ✅ 标题 (title)
- ✅ 内容 (content, 最多3行)
- ✅ 时间 (publishTime/pushTime)
- ✅ 查看详情 (仅当 clickable=true 时)
- ✅ 关闭按钮
**LV2 - 可选元素(数据存在时显示)**
- ✅ 图标:仅在紧急/重要通知时显示
- ❌ 优先级标签:已移除,改用边框+背景色表示
- ✅ 状态提示:仅当 `extra?.statusHint` 存在时显示
**LV3 - 可选元素(数据存在时显示)**
- ✅ AI 标识:仅当 `isAIGenerated = true` 时显示
- ✅ 预测标识:仅当 `isPrediction = true` 时显示
**其他**
- ✅ 作者信息:移除屏幕尺寸限制,仅当 `author` 存在时显示
#### 优先级视觉样式
- ✅ 边框宽度:根据优先级动态调整 (2px/4px/6px)
- ✅ 背景色深度:根据优先级使用不同深度的颜色
- 亮色模式: .50 (普通) / .100 (重要) / .200 (紧急)
- 暗色模式: 使用 typeConfig 的 darkBg 配置
#### 布局优化
- ✅ 内容和元数据区域的左侧填充根据图标显示状态自适应
- ✅ 无图标时不添加额外的左侧间距
## 预期效果
### 视觉改进
- **清晰度提升**:移除冗余的优先级标签,视觉更整洁
- **优先级强化**
- 紧急通知6px 粗边框 + 深色背景 + **红色脉冲动画** → 视觉冲击力极强
- 重要通知4px 中等边框 + 中色背景 + 图标 → 醒目但不打扰
- 普通通知2px 细边框 + 白色/极淡背景 → 低视觉干扰
- **可点击性一目了然**
- 可点击:完整边框 + 明显阴影 → 卡片悬浮感
- 不可点击:仅左侧边框 + 淡阴影 → 平面感
- **信息密度降低**:减少不必要的视觉元素,关键信息更突出
### 用户体验
- **紧急通知引起注意**:脉冲动画确保用户不会错过紧急信息
- **快速识别优先级**
- 动画 = 紧急(需要立即关注)
- 图标 + 粗边框 = 重要(需要关注)
- 细边框 + 淡背景 = 普通(可稍后查看)
- **可点击性无需 hover**
- 完整边框 + 悬浮感 = 可以点击查看详情
- 仅左侧边框 = 信息已完整,无需跳转
- **智能显示**:可选信息只在数据存在时显示,避免空白占位
- **响应式优化**:所有设备上保持一致的显示逻辑
### 向后兼容
- ✅ 完全兼容现有通知数据结构
- ✅ 可选字段不存在时自动隐藏
- ✅ 不影响现有功能(点击、关闭、自动消失等)
## 测试建议
### 1. 功能测试
```bash
# 启动开发服务器
npm start
# 观察不同优先级通知的显示效果
# - 紧急通知:粗边框 (6px) + 深色背景 + 红色脉冲动画 + 图标 + 不自动关闭
# - 重要通知:中等边框 (4px) + 中色背景 + 图标 + 30秒后关闭
# - 普通通知:细边框 (2px) + 白色背景 + 无图标 + 15秒后关闭
```
### 1.1 动画测试
- [ ] 紧急通知的脉冲动画流畅无卡顿
- [ ] 动画周期为 2 秒
- [ ] 动画在紧急通知显示期间持续循环
- [ ] 阴影扩散效果清晰可见
### 2. 边界测试
- [ ] 仅必需字段的通知(无作者、无 AI 标识、无预测标识)
- [ ] 包含所有可选字段的通知
- [ ] 不同类型的通知(公告、股票、事件、分析报告)
- [ ] 不同优先级的通知(紧急、重要、普通)
### 3. 响应式测试
- [ ] 移动设备 (< 480px)
- [ ] 平板设备 (480px - 768px)
- [ ] 桌面设备 (> 768px)
### 4. 暗色模式测试
- [ ] 切换到暗色模式,确认背景色对比度合适
## 技术细节
### 关键代码变更
#### 1. 脉冲动画实现
```javascript
// 导入 keyframes
import { keyframes } from '@emotion/react';
// 定义脉冲动画
const pulseAnimation = keyframes`
0%, 100% {
border-left-color: currentColor;
box-shadow: 0 0 0 0 currentColor;
}
50% {
border-left-color: currentColor;
box-shadow: -4px 0 12px 0 currentColor;
}
`;
// 应用到紧急通知
<Box
animation={priority === PRIORITY_LEVELS.URGENT
? `${pulseAnimation} 2s ease-in-out infinite`
: undefined}
...
/>
```
#### 2. 优先级标签自动隐藏
```javascript
// PRIORITY_CONFIGS 中所有 show 属性设置为 false
show: false, // 不再显示标签,改用边框+背景色表示
```
#### 3. 背景色优先级优化
```javascript
const getPriorityBgColor = () => {
const colorScheme = typeConfig.colorScheme;
if (!isDark) {
if (priority === PRIORITY_LEVELS.URGENT) {
return `${colorScheme}.200`; // 深色背景 + 脉冲动画
} else if (priority === PRIORITY_LEVELS.IMPORTANT) {
return `${colorScheme}.100`; // 中色背景
} else {
return 'white'; // 极淡背景(降低视觉干扰)
}
} else {
if (priority === PRIORITY_LEVELS.URGENT) {
return typeConfig.darkBg || `${colorScheme}.800`;
} else if (priority === PRIORITY_LEVELS.IMPORTANT) {
return typeConfig.darkBg || `${colorScheme}.800`;
} else {
return 'gray.800'; // 暗灰背景(降低视觉干扰)
}
}
};
```
#### 4. 图标条件显示
```javascript
const shouldShowIcon = priority === PRIORITY_LEVELS.URGENT ||
priority === PRIORITY_LEVELS.IMPORTANT;
{shouldShowIcon && (
<Icon as={typeConfig.icon} ... />
)}
};
```
## 后续改进建议
### 短期
- [ ] 添加通知优先级过渡动画(边框和背景色渐变)
- [ ] 提供配置选项让用户自定义显示元素
### 长期
- [ ] 支持通知分组(按类型或优先级)
- [ ] 添加通知搜索和筛选功能
- [ ] 通知历史记录可视化统计
## 构建状态
✅ 构建成功 (npm run build)
✅ 无语法错误
✅ 无 TypeScript 错误

File diff suppressed because it is too large Load Diff

View File

@@ -1,338 +0,0 @@
# 崩溃修复测试指南
> 测试时间2025-10-14
> 测试范围SignInIllustration.js + SignUpIllustration.js
> 服务器地址http://localhost:3000
---
## 🎯 测试目标
验证以下修复是否有效:
- ✅ 响应对象崩溃6处
- ✅ 组件卸载后 setState6处
- ✅ 定时器内存泄漏2处
---
## 📋 测试清单
### ✅ 关键测试(必做)
#### 1. **网络异常测试** - 验证响应对象修复
**登录页面 - 发送验证码**
```
测试步骤:
1. 打开 http://localhost:3000/auth/sign-in
2. 切换到"验证码登录"模式
3. 输入手机号13800138000
4. 打开浏览器开发者工具 (F12) → Network 标签
5. 点击 Offline 模拟断网
6. 点击"发送验证码"按钮
预期结果:
✅ 显示错误提示:"发送验证码失败 - 网络请求失败,请检查网络连接"
✅ 页面不崩溃
✅ 无 JavaScript 错误
修复前:
❌ 页面白屏崩溃
❌ Console 报错Cannot read property 'json' of null
```
**登录页面 - 微信登录**
```
测试步骤:
1. 在登录页面,保持断网状态
2. 点击"扫码登录"按钮
预期结果:
✅ 显示错误提示:"获取微信授权失败 - 网络请求失败,请检查网络连接"
✅ 页面不崩溃
✅ 无 JavaScript 错误
```
**注册页面 - 发送验证码**
```
测试步骤:
1. 打开 http://localhost:3000/auth/sign-up
2. 切换到"验证码注册"模式
3. 输入手机号13800138000
4. 保持断网状态
5. 点击"发送验证码"按钮
预期结果:
✅ 显示错误提示:"发送失败 - 网络请求失败..."
✅ 页面不崩溃
```
---
#### 2. **组件卸载测试** - 验证内存泄漏修复
**倒计时中离开页面**
```
测试步骤:
1. 恢复网络连接
2. 在登录页面输入手机号并发送验证码
3. 等待倒计时开始60秒倒计时
4. 立即点击浏览器后退按钮或切换到其他页面
5. 打开 Console 查看是否有警告
预期结果:
✅ 无警告:"Can't perform a React state update on an unmounted component"
✅ 倒计时定时器正确清理
✅ 无内存泄漏
修复前:
❌ Console 警告Memory leak warning
❌ setState 在组件卸载后仍被调用
```
**请求进行中离开页面**
```
测试步骤:
1. 在注册页面填写完整信息
2. 点击"注册"按钮
3. 在请求响应前loading 状态)快速刷新页面或关闭标签页
4. 打开新标签页查看 Console
预期结果:
✅ 无崩溃
✅ 无警告信息
✅ 请求被正确取消或忽略
```
**注册成功跳转前离开**
```
测试步骤:
1. 完成注册提交
2. 在显示"注册成功"提示后
3. 立即关闭标签页不等待2秒自动跳转
预期结果:
✅ 无警告
✅ navigate 不会在组件卸载后执行
```
---
#### 3. **边界情况测试** - 验证数据完整性检查
**后端返回空响应**
```
测试步骤(需要模拟后端):
1. 使用 Chrome DevTools → Network → 右键请求 → Edit and Resend
2. 修改响应为空对象 {}
3. 观察页面反应
预期结果:
✅ 显示错误:"服务器响应为空"
✅ 不会尝试访问 undefined 属性
✅ 页面不崩溃
```
**后端返回 500 错误**
```
测试步骤:
1. 在登录页面点击"扫码登录"
2. 如果后端返回 500 错误
预期结果:
✅ 显示错误:"获取二维码失败HTTP 500"
✅ 页面不崩溃
```
---
### 🧪 进阶测试(推荐)
#### 4. **弱网环境测试**
**慢速网络模拟**
```
测试步骤:
1. Chrome DevTools → Network → Throttling → Slow 3G
2. 尝试发送验证码
3. 等待 10 秒(超时时间)
预期结果:
✅ 10秒后显示超时错误
✅ 不会无限等待
✅ 用户可以重试
```
**丢包模拟**
```
测试步骤:
1. 使用 Chrome DevTools 模拟丢包
2. 连续点击"发送验证码"多次
预期结果:
✅ 每次请求都有适当的错误提示
✅ 不会因为并发请求而崩溃
✅ 按钮在请求期间正确禁用
```
---
#### 5. **定时器清理测试**
**倒计时清理验证**
```
测试步骤:
1. 在登录页面发送验证码
2. 等待倒计时到 50 秒
3. 快速切换到注册页面
4. 再切换回登录页面
5. 观察倒计时是否重置
预期结果:
✅ 定时器在页面切换时正确清理
✅ 返回登录页面时倒计时重新开始(如果再次发送)
✅ 没有多个定时器同时运行
```
---
#### 6. **并发请求测试**
**快速连续点击**
```
测试步骤:
1. 在登录页面输入手机号
2. 快速连续点击"发送验证码"按钮 5 次
预期结果:
✅ 只发送一次请求(按钮在请求期间禁用)
✅ 不会因为并发而崩溃
✅ 正确显示 loading 状态
```
---
## 🔍 监控指标
### Console 检查清单
在测试过程中,打开 Console (F12) 监控以下内容:
```
✅ 无红色错误Error
✅ 无内存泄漏警告Memory leak warning
✅ 无 setState 警告Can't perform a React state update...
✅ 无 undefined 访问错误Cannot read property of undefined
```
### Network 检查清单
打开 Network 标签监控:
```
✅ 请求超时时间10秒
✅ 失败请求有正确的错误处理
✅ 没有重复的请求
✅ 请求被正确取消(如果页面卸载)
```
### Performance 检查清单
打开 Performance 标签(可选):
```
✅ 无内存泄漏Memory 不会持续增长)
✅ 定时器正确清理Timer count 正确)
✅ EventListener 正确清理
```
---
## 📊 测试记录表
请在测试时填写以下表格:
| 测试项 | 状态 | 问题描述 | 截图 |
|--------|------|---------|------|
| 登录页 - 断网发送验证码 | ⬜ 通过 / ⬜ 失败 | | |
| 登录页 - 断网微信登录 | ⬜ 通过 / ⬜ 失败 | | |
| 注册页 - 断网发送验证码 | ⬜ 通过 / ⬜ 失败 | | |
| 倒计时中离开页面 | ⬜ 通过 / ⬜ 失败 | | |
| 请求进行中离开页面 | ⬜ 通过 / ⬜ 失败 | | |
| 注册成功跳转前离开 | ⬜ 通过 / ⬜ 失败 | | |
| 后端返回空响应 | ⬜ 通过 / ⬜ 失败 | | |
| 慢速网络超时 | ⬜ 通过 / ⬜ 失败 | | |
| 定时器清理 | ⬜ 通过 / ⬜ 失败 | | |
| 并发请求 | ⬜ 通过 / ⬜ 失败 | | |
---
## 🐛 如何报告问题
如果发现问题,请提供:
1. **测试场景**:具体的测试步骤
2. **预期结果**:应该发生什么
3. **实际结果**:实际发生了什么
4. **Console 错误**:完整的错误信息
5. **截图/录屏**:问题的视觉证明
6. **环境信息**
- 浏览器版本
- 操作系统
- 网络状态
---
## ✅ 测试完成检查
测试完成后,确认以下内容:
```
□ 所有关键测试通过
□ Console 无错误
□ Network 请求正常
□ 无内存泄漏警告
□ 用户体验流畅
```
---
## 🎯 快速测试命令
```bash
# 1. 确认服务器运行
curl http://localhost:3000
# 2. 打开浏览器测试
open http://localhost:3000/auth/sign-in
# 3. 查看编译日志
tail -f /tmp/react-build.log
```
---
## 📱 测试页面链接
- **登录页面**: http://localhost:3000/auth/sign-in
- **注册页面**: http://localhost:3000/auth/sign-up
- **首页**: http://localhost:3000/home
---
## 🔧 开发者工具快捷键
```
F12 - 打开开发者工具
Ctrl/Cmd+R - 刷新页面
Ctrl/Cmd+Shift+R - 强制刷新(清除缓存)
Ctrl/Cmd+Shift+C - 元素选择器
```
---
**测试时间**2025-10-14
**预计测试时长**15-30 分钟
**建议测试人员**:开发者 + QA
祝测试顺利!如发现问题请及时反馈。

File diff suppressed because it is too large Load Diff

339
index.pug Normal file
View File

@@ -0,0 +1,339 @@
extends layouts/layout
block content
+header(true, false, false)
<div class="overflow-hidden">
// hero
<div class="relative pt-58 pb-20 max-xl:pt-48 max-lg:pt-44 max-md:pt-21 max-md:pb-15">
<div class="center relative z-3" data-aos="fade">
<div class="max-w-187">
<div class="inline-flex items-center gap-2 mb-6 px-4 py-2 rounded-full bg-gradient-to-r from-green/20 to-green/5 border border-green/30 backdrop-blur-sm max-md:mb-3">
<svg class="size-4 fill-green" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 0L9.798 5.579L15.708 4.292L11.854 8.854L15.708 13.416L9.798 12.129L8 18L6.202 12.421L0.292 13.708L4.146 9.146L0.292 4.584L6.202 5.871L8 0Z"/>
</svg>
<span class="text-title-5 text-green max-md:text-[14px]">金融AI技术领航者</span>
</div>
<div class="mb-8 text-big-title-1 bg-radial-white-1 bg-clip-text text-transparent max-xl:text-big-title-2 max-lg:text-title-1 max-lg:mb-10 max-md:mb-6 max-md:text-big-title-mobile">智能舆情分析系统</div>
<div class="flex flex-wrap gap-3 mb-8 max-lg:mb-6 max-md:mb-4">
<div class="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg bg-black/30 border border-line/50 backdrop-blur-sm">
<svg class="size-4 fill-green" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm3.5-6c0 1.9-1.6 3.5-3.5 3.5S4.5 9.9 4.5 8 6.1 4.5 8 4.5 11.5 6.1 11.5 8z"/>
</svg>
<span class="text-title-5 text-white/90 max-md:text-[13px]">深度数据挖掘</span>
</div>
<div class="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg bg-black/30 border border-line/50 backdrop-blur-sm">
<svg class="size-4 fill-green" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M13.5 2h-11C1.7 2 1 2.7 1 3.5v9c0 .8.7 1.5 1.5 1.5h11c.8 0 1.5-.7 1.5-1.5v-9c0-.8-.7-1.5-1.5-1.5zM8 11.5c-1.9 0-3.5-1.6-3.5-3.5S6.1 4.5 8 4.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"/>
</svg>
<span class="text-title-5 text-white/90 max-md:text-[13px]">7×24小时监控</span>
</div>
</div>
<div class="max-w-94 mb-9.5 text-description max-lg:max-w-76 max-md:max-w-full max-md:mb-3.5">基于金融领域微调的大语言模型7×24小时不间断对舆情数据进行深度挖掘和分析对历史事件进行复盘关联相关标的为投资决策提供前瞻性的智能洞察。</div>
<div class="flex gap-7.5 max-md:mb-12.5">
<a class="wechat-icon-link fill-white transition-colors hover:fill-green relative" href="javascript:void(0)" data-wechat-img="wechat-app.jpg" title="微信小程序">
<svg class="size-5 fill-inherit" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.889 8.333c.31 0 .611.028.903.078C14.292 5.31 11.403 3 7.917 3 4.083 3 1 5.686 1 9.028c0 1.944 1.028 3.639 2.639 4.861L3 16.111l2.5-1.25c.833.194 1.528.333 2.417.333.278 0 .556-.014.833-.042-.278-.805-.417-1.652-.417-2.513 0-3.264 2.764-5.903 6.556-5.903v-.403zM10.139 6.528c.583 0 1.055.472 1.055 1.055s-.472 1.055-1.055 1.055-1.055-.472-1.055-1.055.472-1.055 1.055-1.055zM5.694 8.639c-.583 0-1.055-.472-1.055-1.055s.472-1.055 1.055-1.055 1.055.472 1.055 1.055-.472 1.055-1.055 1.055zm8.195 1.694c-2.847 0-5.139 2.014-5.139 4.486 0 2.472 2.292 4.486 5.139 4.486.764 0 1.528-.139 2.222-.347L18.333 20l-.625-1.875c1.25-.972 2.014-2.361 2.014-3.958 0-2.472-2.292-4.486-5.139-4.486h-.694zm-2.084 3.125c.389 0 .695.306.695.694s-.306.695-.695.695-.694-.306-.694-.695.305-.694.694-.694zm4.167 0c.389 0 .694.306.694.694s-.305.695-.694.695-.695-.306-.695-.695.306-.694.695-.694z"/>
</svg>
</a>
<a class="wechat-icon-link fill-white transition-colors hover:fill-green relative" href="javascript:void(0)" data-wechat-img="public.jpg" title="微信公众号">
<svg class="size-5 fill-inherit" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm3.889 6.944c.139 0 .278.014.417.028-1.306-2.958-4.723-5.027-8.611-5.027C2.611 1.945 0 4.306 0 7.222c0 1.528.806 2.861 2.083 3.819l-.417 1.945 1.945-.972c.639.139 1.167.25 1.861.25.222 0 .444-.014.667-.028-.222-.639-.333-1.306-.333-1.986 0-2.569 2.181-4.653 5.139-4.653l.944-.653zm-5.278-2.5c.458 0 .833.375.833.833s-.375.833-.833.833-.833-.375-.833-.833.375-.833.833-.833zM4.167 6.111c-.458 0-.833-.375-.833-.833s.375-.833.833-.833.833.375.833.833-.375.833-.833.833zm9.722 3.333c-2.236 0-4.028 1.583-4.028 3.528s1.792 3.528 4.028 3.528c.597 0 1.194-.111 1.736-.278l1.542.694-.486-1.472c.972-.764 1.597-1.861 1.597-3.125 0-1.945-1.792-3.528-4.028-3.528h-.361zm-1.667 2.5c.306 0 .556.25.556.556s-.25.556-.556.556-.556-.25-.556-.556.25-.556.556-.556zm3.334 0c.305 0 .555.25.555.556s-.25.556-.555.556-.556-.25-.556-.556.25-.556.556-.556z"/>
</svg>
</a>
<a class="wechat-icon-link fill-white transition-colors hover:fill-green relative" href="javascript:void(0)" data-wechat-img="customer-service.jpg" title="微信客服号">
<svg class="size-5 fill-inherit" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm4.861 7.222c.167 0 .333.014.5.028C14.097 4.444 11.139 2 7.5 2 3.889 2 1 4.444 1 7.5c0 1.778.972 3.333 2.5 4.444l-.5 2.223 2.222-1.111c.722.167 1.333.278 2.111.278.278 0 .556-.014.834-.028-.278-.722-.417-1.5-.417-2.306 0-2.972 2.5-5.389 5.833-5.389l1.278-.389zm-6.028-2.777c.528 0 .945.417.945.945s-.417.944-.945.944-.944-.416-.944-.944.416-.945.944-.945zm-4.166 1.888c-.528 0-.945-.416-.945-.944s.417-.945.945-.945.944.417.944.945-.416.944-.944.944zm10.277 3.611c-2.569 0-4.611 1.806-4.611 4.028s2.042 4.028 4.611 4.028c.694 0 1.389-.125 2-.306L19 18.889l-.556-1.667c1.111-.889 1.833-2.139 1.833-3.611 0-2.222-2.042-4.028-4.611-4.028h-.722zm-1.944 2.778c.361 0 .639.278.639.639s-.278.639-.639.639-.639-.278-.639-.639.278-.639.639-.639zm3.889 0c.361 0 .639.278.639.639s-.278.639-.639.639-.639-.278-.639-.639.278-.639.639-.639zM10 14.444c0 .306-.25.556-.556.556H6.111c-.306 0-.556-.25-.556-.556s.25-.555.556-.555h3.333c.306 0 .556.25.556.555z"/>
</svg>
</a>
</div>
<div class="absolute right-20 bottom-0 flex gap-4 max-xl:right-10 max-md:static">
<div class="relative w-42 p-5 pb-6.5 rounded-[1.25rem] bg-content text-center shadow-1 backdrop-blur-[1.25rem] max-md:px-3">
<div class="absolute inset-0 border border-line rounded-[1.25rem] pointer-events-none"></div>
<div class="relative flex justify-center items-center size-11 mx-auto mb-4 rounded-lg bg-gradient-to-b from-black/15 to-white/15 shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset,0_0_0.625rem_0_rgba(255,255,255,0.10)_inset]">
<div class="absolute inset-0 border border-line rounded-lg"></div>
img(class="w-5" src=require('Images/clock.svg') alt="")
</div>
<div class="text-title-4 max-md:text-title-3-mobile">实时数据分析</div>
</div>
<div class="relative w-42 p-5 pb-6.5 rounded-[1.25rem] bg-content text-center shadow-1 backdrop-blur-[1.25rem] max-md:px-3">
<div class="absolute inset-0 border border-line rounded-[1.25rem] pointer-events-none"></div>
<div class="relative flex justify-center items-center size-11 mx-auto mb-4 rounded-lg bg-gradient-to-b from-black/15 to-white/15 shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset,0_0_0.625rem_0_rgba(255,255,255,0.10)_inset]">
<div class="absolute inset-0 border border-line rounded-lg"></div>
img(class="w-5" src=require('Images/floor.svg') alt="")
</div>
<div class="text-title-4 max-md:text-title-3-mobile">低延迟推理</div>
</div>
</div>
</div>
</div>
<div class="absolute top-23 right-[calc(50%-28.5rem)] size-178 rounded-full max-xl:size-140 max-md:top-36 max-md:right-auto max-md:left-8.5 max-md:size-133">
<div class="absolute -inset-[10%] mask-radial-at-center mask-radial-from-20% mask-radial-to-52%">
video(class="w-full" src=require('Videos/video-1.webm') autoplay loop muted playsinline)
</div>
<div class="absolute inset-0 rounded-full shadow-[0.875rem_1.0625rem_1.25rem_0_rgba(255,255,255,0.25)_inset] bg-black/1"></div>
</div>
<div>
<div class="absolute top-61.5 right-[calc(50%-35.18rem)] z-2 size-116.5 bg-green/20 rounded-full blur-[8rem] max-md:top-36 max-lg:-right-96 max-md:left-74 max-md:right-auto"></div>
<div class="absolute top-77 left-[calc(50%-57.5rem)] z-2 size-116.5 bg-green/20 rounded-full blur-[8rem] max-lg:-left-60 max-md:top-84 max-md:-left-52 max-md:size-80"></div>
</div>
</div>
// details
<div class="pt-40.5 pb-30.5 max-xl:pt-30 max-lg:py-24 max-md:py-15">
<div class="center">
<div class="flex flex-wrap -mt-4 -mx-2">
<div class="relative min-h-75 rounded-[1.25rem] bg-content shadow-2 backdrop-blur-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-xl:min-h-70 flex w-[calc(50%-1rem)] h-full mt-4 mx-2 pt-6 pb-7 px-8.5 max-xl:px-6 max-lg:w-[calc(100%-1rem)] max-md:px-8 max-md:min-h-112.5" data-aos="fade">
<div class="relative z-2 max-w-58 flex flex-col max-md:max-w-full">
<div class="mb-auto bg-radial-white-2 bg-clip-text text-transparent text-title-1 max-xl:text-title-2 max-md:mb-0.5 max-md:text-title-1-mobile">99%</div>
<div class="mt-3 text-title-4 max-md:text-title-3-mobile">金融数据理解准确率</div>
<div class="mt-2.5 text-description max-md:mt-2">基于金融领域深度微调的大语言模型,精准理解市场动态和舆情变化。</div>
</div>
<div class="absolute top-0 right-0 bottom-0 flex items-center max-2xl:-right-16 max-lg:right-0 max-md:top-auto max-md:left-0 max-md:pl-7.5">
img(class="w-86.25 max-xl:w-72 max-md:w-full" src=require('Images/details-pic-1.png') alt="")
</div>
</div>
<div class="relative min-h-75 rounded-[1.25rem] bg-content shadow-2 backdrop-blur-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-xl:min-h-70 flex w-[calc(50%-1rem)] h-full mt-4 mx-2 pt-6 pb-7 px-8.5 max-xl:px-6 max-lg:w-[calc(100%-1rem)] max-md:px-8 max-md:min-h-112.5" data-aos="fade">
<div class="relative z-2 max-w-58 flex flex-col max-md:max-w-full">
<div class="mb-auto bg-radial-white-2 bg-clip-text text-transparent text-title-1 max-xl:text-title-2 max-md:mb-0.5 max-md:text-title-1-mobile">24/7</div>
<div class="mt-3 text-title-4 max-md:text-title-3-mobile">全天候舆情监控</div>
<div class="mt-2.5 text-description max-md:mt-2">7×24小时不间断监控市场舆情第一时间捕捉关键信息。</div>
</div>
<div class="absolute top-0 right-0 bottom-0 flex items-center max-2xl:-right-16 max-lg:right-0 max-md:top-auto max-md:left-0 max-md:pl-7.5">
img(class="w-86.25 max-xl:w-72 max-md:w-full" src=require('Images/details-pic-2.png') alt="")
</div>
</div>
<div class="relative min-h-75 rounded-[1.25rem] bg-content shadow-2 backdrop-blur-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-xl:min-h-70 flex items-end w-62.5 mt-4 mx-2 px-8.5 pb-7 max-xl:px-6 max-lg:w-[calc(50%-1rem)] max-md:w-[calc(100%-1rem)] max-md:min-h-72 max-md:px-7 max-md:pb-6" data-aos="fade">
<div class="absolute top-0 left-0 right-0 flex justify-center">
img(class="w-full max-lg:max-w-60 max-md:max-w-73.5" src=require('Images/details-pic-3.png') alt="")
</div>
<div class="relative z-2 max-w-58 flex flex-col">
<div class="mb-2.5 text-title-4 max-md:mb-1.5 max-md:text-title-3-mobile">深度模型微调</div>
<div class="text-description">针对金融领域数据进行专业化模型训练和优化。</div>
</div>
</div>
<div class="relative min-h-75 rounded-[1.25rem] bg-content shadow-2 backdrop-blur-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-xl:min-h-70 flex items-end grow mt-4 mx-2 px-8.5 pb-7 overflow-hidden max-xl:px-6 max-lg:order-5" data-aos="fade">
<div class="absolute top-0 left-0 flex justify-center max-2xl:top-8 max-lg:top-0 max-md:-left-3 max-md:w-176">
img(class="w-full" src=require('Images/details-pic-4.png') alt="")
</div>
<div class="relative z-2 max-w-58 flex flex-col">
<div class="flex items-center gap-3 mb-3">
<div class="relative flex justify-center items-center shrink-0 w-12.5 h-12.5 rounded-lg bg-gradient-to-b from-[#F4D03F] to-[#D4AF37] shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(212,175,55,0.30)_inset,_0_0_0.625rem_0_rgba(212,175,55,0.50)_inset] after:absolute after:inset-0 after:border after:border-line after:rounded-lg after:pointer-events-none">
img(class="w-4" src=require('Images/lightning.svg') alt="")
</div>
<div class="bg-radial-white-2 bg-clip-text text-transparent text-title-2 leading-tight max-xl:text-title-2 max-md:text-title-1-mobile">&lt;100ms</div>
</div>
<div class="text-title-4 max-md:text-title-3-mobile">低延迟推理系统</div>
<div class="mt-2.5 text-description max-md:mt-2">毫秒级响应速度,实时处理海量舆情数据。</div>
</div>
</div>
<div class="relative min-h-75 rounded-[1.25rem] bg-content shadow-2 backdrop-blur-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-xl:min-h-70 flex items-end w-62.5 mt-4 mx-2 px-8.5 pb-7 max-xl:px-6 max-lg:w-[calc(50%-1rem)] max-md:w-[calc(100%-1rem)] max-md:min-h-72 max-md:px-7 max-md:pb-6" data-aos="fade">
<div class="absolute top-0 left-0 right-0 flex justify-center">
img(class="w-full max-lg:max-w-60 max-md:max-w-73.5" src=require('Images/details-pic-5.png') alt="")
</div>
<div class="relative z-2 max-w-58 flex flex-col">
<div class="bg-radial-white-2 bg-clip-text text-transparent text-title-1 max-xl:text-title-2 max-md:text-title-1-mobile">历史复盘</div>
<div class="text-description">对历史事件进行深度复盘分析,关联标的,辅助投资决策。</div>
</div>
</div>
</div>
</div>
</div>
// features
<div class="relative pt-34.5 pb-41 max-xl:pt-20 max-xl:pb-30 max-lg:py-24 max-md:pt-15 max-md:pb-14">
<div class="center relative z-2">
<div class="max-w-148 mx-auto mb-18 text-center max-xl:mb-14 max-md:mb-8.5" data-aos="fade">
<div class="label mb-3 max-md:mb-1">核心功能</div>
<div class="mb-6 bg-radial-white-2 bg-clip-text text-transparent text-title-1 max-lg:text-title-2 max-md:mb-3 max-md:text-title-1-mobile">我们能做什么?</div>
<div class="text-description">基于AI的舆情分析系统深度挖掘市场动态为投资决策提供实时智能洞察。</div>
</div>
<div class="flex flex-wrap -mt-4 -mx-2">
<div class="relative w-[calc(25%-1rem)] mt-4 mx-2 rounded-[1.25rem] bg-content shadow-2 backdrop-blur-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-lg:w-[calc(50%-1rem)] max-md:w-[calc(100%-1rem)]" data-aos="fade">
<div class="max-md:text-center">
img(class="w-full max-md:max-w-73.5" src=require('Images/features-pic-1.png') alt="")
</div>
<div class="pt-0.5 px-8.5 pb-7.5 max-xl:px-5 max-xl:pb-5 max-lg:px-8 max-lg:pb-7 max-md:pb-6">
<div class="mb-2.5 text-title-4 max-md:mb-1 max-md:text-title-2-mobile">舆情数据挖掘</div>
<div class="text-description">实时采集和分析全网金融舆情,捕捉市场情绪变化。</div>
</div>
</div>
<div class="relative w-[calc(25%-1rem)] mt-4 mx-2 rounded-[1.25rem] bg-content shadow-2 backdrop-blur-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-lg:w-[calc(50%-1rem)] max-md:w-[calc(100%-1rem)]" data-aos="fade">
<div class="max-md:text-center">
img(class="w-full max-md:max-w-73.5" src=require('Images/features-pic-2.png') alt="")
</div>
<div class="pt-0.5 px-8.5 pb-7.5 max-xl:px-5 max-xl:pb-5 max-lg:px-8 max-lg:pb-7 max-md:pb-6">
<div class="mb-2.5 text-title-4 max-md:mb-1 max-md:text-title-2-mobile">智能事件关联</div>
<div class="text-description">自动关联相关标的和历史事件,构建完整的信息图谱。</div>
</div>
</div>
<div class="relative w-[calc(25%-1rem)] mt-4 mx-2 rounded-[1.25rem] bg-content shadow-2 backdrop-blur-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-lg:w-[calc(50%-1rem)] max-md:w-[calc(100%-1rem)]" data-aos="fade">
<div class="max-md:text-center">
img(class="w-full max-md:max-w-73.5" src=require('Images/features-pic-3.png') alt="")
</div>
<div class="pt-0.5 px-8.5 pb-7.5 max-xl:px-5 max-xl:pb-5 max-lg:px-8 max-lg:pb-7 max-md:pb-6">
<div class="mb-2.5 text-title-4 max-md:mb-1 max-md:text-title-2-mobile">历史复盘</div>
<div class="text-description">深度复盘历史事件走势,洞察关键节点与转折,为投资决策提供经验参考。</div>
</div>
</div>
<div class="relative w-[calc(25%-1rem)] mt-4 mx-2 rounded-[1.25rem] bg-content shadow-2 backdrop-blur-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-lg:w-[calc(50%-1rem)] max-md:w-[calc(100%-1rem)]" data-aos="fade">
<div class="max-md:text-center">
img(class="w-full max-md:max-w-73.5" src=require('Images/features-pic-4.png') alt="")
</div>
<div class="pt-0.5 px-8.5 pb-7.5 max-xl:px-5 max-xl:pb-5 max-lg:px-8 max-lg:pb-7 max-md:pb-6">
<div class="mb-2.5 text-title-4 max-md:mb-1 max-md:text-title-2-mobile">专精金融的AI聊天</div>
<div class="text-description">基于金融领域深度训练的智能对话助手,即时解答市场问题,提供专业投资建议。</div>
</div>
</div>
</div>
</div>
<div class="max-md:hidden">
<div class="absolute top-47.5 left-[calc(50%-52.38rem)] size-98.5 bg-gold/15 rounded-full blur-[6.75rem]"></div>
<div class="absolute bottom-2.5 right-[calc(50%-51.44rem)] size-98.5 bg-gold/15 rounded-full blur-[6.75rem]"></div>
</div>
</div>
// pricing
<div class="pt-34.5 pb-25 max-2xl:pt-25 max-lg:py-20 max-md:py-15" id="pricing">
<div class="center">
<div class="max-w-175 mx-auto mb-17.5 text-center max-xl:mb-14 max-md:mb-8" data-aos="fade">
<div class="label mb-3 max-md:mb-1.5">订阅方案</div>
<div class="bg-radial-white-2 bg-clip-text text-transparent text-title-1 max-lg:text-title-2 max-md:text-title-1-mobile">立即开启智能决策</div>
</div>
<div class="flex justify-center gap-4 max-lg:-mx-10 max-lg:px-10 max-lg:overflow-x-auto max-lg:scrollbar-none max-md:-mx-5 max-md:px-5" data-aos="fade">
<div class="relative flex flex-col flex-1 max-w-md rounded-[1.25rem] overflow-hidden shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-lg:shrink-0 max-lg:flex-auto max-lg:w-84">
<div class="relative z-2 pt-8 px-8.5 pb-10 text-title-4 max-md:text-title-5 text-white">PRO</div>
<div class="relative z-3 flex flex-col grow -mt-5 p-3.5 pb-8.25 backdrop-blur-[1.25rem] bg-white/1 rounded-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none">
<div class="relative mb-8 p-5 rounded-[0.8125rem] bg-white/2 backdrop-blur-[1.25rem] shadow-2 after:absolute after:inset-0 after:border after:border-line after:rounded-[0.8125rem] after:pointer-events-none">
<div class="flex items-end gap-3 mb-4">
<div class="bg-radial-white-2 bg-clip-text text-transparent text-title-1 leading-[3.1rem] max-xl:text-title-2 max-xl:leading-[2.4rem]">¥198</div>
<div class="text-title-5">/月</div>
</div>
<a class="btn btn-secondary w-full bg-line !text-description hover:!text-white" href="https://valuefrontier.cn/home/pages/account/subscription" target="_blank">选择Pro版</a>
</div>
<div class="flex flex-col gap-6.5 px-3.5 max-xl:px-0 max-xl:gap-5 max-md:px-3.5">
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>事件关联股票深度分析</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>历史事件智能对比复盘</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>事件概念关联与挖掘</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>概念板块个股追踪</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>概念深度研报与解读</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>个股异动实时预警</div>
</div>
</div>
</div>
</div>
<div class="relative flex flex-col flex-1 max-w-md rounded-[1.25rem] overflow-hidden shadow-2 before:absolute before:-top-20 before:left-1/2 before:z-1 before:-translate-x-1/2 before:w-65 before:h-57 before:bg-gold/15 before:rounded-full before:blur-[3.375rem] after:absolute after:inset-0 after:border after:border-gold/30 after:rounded-[1.25rem] after:pointer-events-none max-lg:shrink-0 max-lg:flex-auto max-lg:w-84">
<div class="absolute -top-36 left-13 w-105 mask-radial-at-center mask-radial-from-20% mask-radial-to-52%">
video(class="w-full" src=require('Videos/video-1.webm') autoplay loop muted playsinline)
</div>
<div class="relative z-2 pt-8 px-8.5 pb-10 text-title-4 max-md:text-title-5 bg-gradient-to-r from-gold-dark/20 to-gold/20 rounded-t-[1.25rem] text-gold">MAX</div>
<div class="relative z-3 flex flex-col grow -mt-5 p-3.5 pb-8.25 backdrop-blur-[2rem] shadow-2 bg-white/7 rounded-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none">
<div class="relative mb-8 p-5 rounded-[0.8125rem] bg-line backdrop-blur-[1.25rem] shadow-2 after:absolute after:inset-0 after:border after:border-line after:rounded-[0.8125rem] after:pointer-events-none">
<div class="flex items-end gap-3 mb-4">
<div class="bg-radial-white-2 bg-clip-text text-transparent text-title-1 leading-[3.1rem] max-xl:text-title-2 max-xl:leading-[2.4rem]">¥998</div>
<div class="text-title-5">/月</div>
</div>
<a class="btn btn-primary w-full" href="https://valuefrontier.cn/home/pages/account/subscription" target="_blank">选择Max版</a>
</div>
<div class="flex flex-col gap-6.5 px-3.5 max-xl:px-0 max-xl:gap-5 max-md:px-3.5">
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-gold rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(212,175,55,0.30)_inset,_0_0_0.625rem_0_rgba(212,175,55,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div class="font-medium">包含Pro版全部功能</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>事件传导链路智能分析</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>概念演变时间轴追溯</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>个股全方位深度研究</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>价小前投研助手无限使用</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>新功能优先体验权</div>
</div>
<div class="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile">
<div class="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
<svg class="size-5 fill-black" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
</svg>
</div>
<div>专属客服一对一服务</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
include includes/start
</div>
+footer(true)

145
init-forum-es.js Normal file
View File

@@ -0,0 +1,145 @@
/**
* 初始化价值论坛 Elasticsearch 索引
* 运行方式node init-forum-es.js
*/
const axios = require('axios');
// Elasticsearch 配置
const ES_BASE_URL = 'http://222.128.1.157:19200';
// 创建 axios 实例
const esClient = axios.create({
baseURL: ES_BASE_URL,
timeout: 10000,
headers: {
'Content-Type': 'application/json',
},
});
// 索引名称
const INDICES = {
POSTS: 'forum_posts',
COMMENTS: 'forum_comments',
EVENTS: 'forum_events',
};
async function initializeIndices() {
try {
console.log('开始初始化 Elasticsearch 索引...\n');
// 1. 创建帖子索引
console.log('创建帖子索引 (forum_posts)...');
try {
await esClient.put(`/${INDICES.POSTS}`, {
mappings: {
properties: {
id: { type: 'keyword' },
author_id: { type: 'keyword' },
author_name: { type: 'text' },
author_avatar: { type: 'keyword' },
title: { type: 'text' },
content: { type: 'text' },
images: { type: 'keyword' },
tags: { type: 'keyword' },
category: { type: 'keyword' },
likes_count: { type: 'integer' },
comments_count: { type: 'integer' },
views_count: { type: 'integer' },
created_at: { type: 'date' },
updated_at: { type: 'date' },
is_pinned: { type: 'boolean' },
status: { type: 'keyword' },
},
},
});
console.log('✅ 帖子索引创建成功\n');
} catch (error) {
if (error.response?.status === 400 && error.response?.data?.error?.type === 'resource_already_exists_exception') {
console.log('⚠️ 帖子索引已存在,跳过创建\n');
} else {
throw error;
}
}
// 2. 创建评论索引
console.log('创建评论索引 (forum_comments)...');
try {
await esClient.put(`/${INDICES.COMMENTS}`, {
mappings: {
properties: {
id: { type: 'keyword' },
post_id: { type: 'keyword' },
author_id: { type: 'keyword' },
author_name: { type: 'text' },
author_avatar: { type: 'keyword' },
content: { type: 'text' },
parent_id: { type: 'keyword' },
likes_count: { type: 'integer' },
created_at: { type: 'date' },
status: { type: 'keyword' },
},
},
});
console.log('✅ 评论索引创建成功\n');
} catch (error) {
if (error.response?.status === 400 && error.response?.data?.error?.type === 'resource_already_exists_exception') {
console.log('⚠️ 评论索引已存在,跳过创建\n');
} else {
throw error;
}
}
// 3. 创建事件时间轴索引
console.log('创建事件时间轴索引 (forum_events)...');
try {
await esClient.put(`/${INDICES.EVENTS}`, {
mappings: {
properties: {
id: { type: 'keyword' },
post_id: { type: 'keyword' },
event_type: { type: 'keyword' },
title: { type: 'text' },
description: { type: 'text' },
source: { type: 'keyword' },
source_url: { type: 'keyword' },
related_stocks: { type: 'keyword' },
occurred_at: { type: 'date' },
created_at: { type: 'date' },
importance: { type: 'keyword' },
},
},
});
console.log('✅ 事件时间轴索引创建成功\n');
} catch (error) {
if (error.response?.status === 400 && error.response?.data?.error?.type === 'resource_already_exists_exception') {
console.log('⚠️ 事件时间轴索引已存在,跳过创建\n');
} else {
throw error;
}
}
// 4. 验证索引
console.log('验证索引...');
const indices = await esClient.get('/_cat/indices/forum_*?v&format=json');
console.log('已创建的论坛索引:');
indices.data.forEach(index => {
console.log(` - ${index.index} (docs: ${index['docs.count']}, size: ${index['store.size']})`);
});
console.log('\n🎉 所有索引初始化完成!');
console.log('\n下一步');
console.log('1. 访问 https://valuefrontier.cn/value-forum');
console.log('2. 点击"发布帖子"按钮创建第一篇帖子');
} catch (error) {
console.error('❌ 初始化失败:', error.message);
if (error.response) {
console.error('响应数据:', JSON.stringify(error.response.data, null, 2));
}
process.exit(1);
}
}
// 执行初始化
initializeIndices();

View File

@@ -1,27 +0,0 @@
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"],
"@assets/*": ["assets/*"],
"@components/*": ["components/*"],
"@constants/*": ["constants/*"],
"@contexts/*": ["contexts/*"],
"@data/*": ["data/*"],
"@hooks/*": ["hooks/*"],
"@layouts/*": ["layouts/*"],
"@lib/*": ["lib/*"],
"@mocks/*": ["mocks/*"],
"@providers/*": ["providers/*"],
"@routes/*": ["routes/*"],
"@services/*": ["services/*"],
"@store/*": ["store/*"],
"@styles/*": ["styles/*"],
"@theme/*": ["theme/*"],
"@utils/*": ["utils/*"],
"@variables/*": ["variables/*"],
"@views/*": ["views/*"]
}
},
"exclude": ["node_modules", "build", "dist"]
}

631
new_subscription_logic.py Normal file
View File

@@ -0,0 +1,631 @@
# -*- coding: utf-8 -*-
"""
新版订阅支付系统核心逻辑
版本: v2.0.0
日期: 2025-11-19
核心改进:
1. 续费价格与新购价格完全一致
2. 不再计算剩余价值折算
3. 逻辑简化,易于维护
"""
from datetime import datetime, timedelta
from decimal import Decimal
import json
import random
# ============================================
# 辅助函数
# ============================================
def beijing_now():
"""获取北京时间"""
from datetime import timezone, timedelta
utc_now = datetime.now(timezone.utc)
beijing_time = utc_now.astimezone(timezone(timedelta(hours=8)))
return beijing_time.replace(tzinfo=None)
def generate_order_no(user_id):
"""生成订单号"""
timestamp = int(beijing_now().timestamp() * 1000000)
random_suffix = random.randint(1000, 9999)
return f"{timestamp}{user_id:04d}{random_suffix}"
def generate_subscription_id():
"""生成订阅ID"""
timestamp = int(beijing_now().timestamp() * 1000)
random_suffix = random.randint(10000, 99999)
return f"SUB_{timestamp}_{random_suffix}"
# ============================================
# 核心业务逻辑
# ============================================
def calculate_subscription_price(plan_code, billing_cycle, promo_code=None, user_id=None, db_session=None):
"""
计算订阅价格(新购和续费价格完全一致)
Args:
plan_code: 套餐代码 (pro/max)
billing_cycle: 计费周期 (monthly/quarterly/semiannual/yearly)
promo_code: 优惠码(可选)
user_id: 用户ID可选,用于优惠码验证)
db_session: 数据库会话(可选)
Returns:
dict: {
'success': True/False,
'plan_code': 'pro',
'plan_name': 'Pro 专业版',
'billing_cycle': 'yearly',
'original_price': 2699.00,
'discount_amount': 0,
'final_amount': 2699.00,
'promo_code': None,
'promo_error': None,
'error': None # 如果有错误
}
"""
from models import SubscriptionPlan, PromoCode # 需要在实际使用时导入
try:
# 1. 查询套餐
plan = SubscriptionPlan.query.filter_by(plan_code=plan_code, is_active=True).first()
if not plan:
return {
'success': False,
'error': f'套餐 {plan_code} 不存在或已下架'
}
# 2. 获取对应周期的价格
price_field_map = {
'monthly': 'price_monthly',
'quarterly': 'price_quarterly',
'semiannual': 'price_semiannual',
'yearly': 'price_yearly'
}
price_field = price_field_map.get(billing_cycle)
if not price_field:
return {
'success': False,
'error': f'不支持的计费周期: {billing_cycle}'
}
original_price = getattr(plan, price_field, None)
if original_price is None or original_price <= 0:
return {
'success': False,
'error': f'{billing_cycle} 周期价格未配置'
}
original_price = float(original_price)
# 3. 构建基础结果
result = {
'success': True,
'plan_code': plan_code,
'plan_name': plan.plan_name,
'billing_cycle': billing_cycle,
'original_price': original_price,
'discount_amount': 0.0,
'final_amount': original_price,
'promo_code': None,
'promo_error': None,
'error': None
}
# 4. 应用优惠码(如果有)
if promo_code and promo_code.strip():
promo_code = promo_code.strip().upper()
# 验证优惠码
promo, error = validate_promo_code(
promo_code,
plan_code,
billing_cycle,
original_price,
user_id,
db_session
)
if promo:
# 计算折扣
discount = calculate_discount(promo, original_price)
result['discount_amount'] = float(discount)
result['final_amount'] = float(original_price - discount)
result['promo_code'] = promo.code
elif error:
result['promo_error'] = error
return result
except Exception as e:
return {
'success': False,
'error': f'价格计算失败: {str(e)}'
}
def get_current_subscription(user_id, db_session=None):
"""
获取用户当前生效的订阅
Args:
user_id: 用户ID
db_session: 数据库会话(可选)
Returns:
UserSubscription 对象 或 None
"""
from models import UserSubscription
try:
subscription = UserSubscription.query.filter_by(
user_id=user_id,
is_current=True
).first()
# 检查是否过期
if subscription and subscription.end_date < beijing_now():
subscription.status = 'expired'
subscription.is_current = False
if db_session:
db_session.commit()
return None
return subscription
except Exception as e:
print(f"获取当前订阅失败: {e}")
return None
def determine_subscription_type(user_id, plan_code, billing_cycle):
"""
判断订阅类型(新购还是续费)
Args:
user_id: 用户ID
plan_code: 目标套餐代码
billing_cycle: 目标计费周期
Returns:
str: 'new''renew'
"""
current_sub = get_current_subscription(user_id)
# 如果没有订阅或订阅是免费版,则为新购
if not current_sub or current_sub.plan_code == 'free':
return 'new'
# 如果是付费订阅,则为续费
if current_sub.plan_code in ['pro', 'max']:
return 'renew'
return 'new'
def create_subscription_order(user_id, plan_code, billing_cycle, promo_code=None, db_session=None):
"""
创建订阅支付订单
Args:
user_id: 用户ID
plan_code: 套餐代码
billing_cycle: 计费周期
promo_code: 优惠码(可选)
db_session: 数据库会话
Returns:
dict: {
'success': True/False,
'order': PaymentOrder 对象,
'error': None
}
"""
from models import PaymentOrder
try:
# 1. 计算价格
price_result = calculate_subscription_price(
plan_code,
billing_cycle,
promo_code,
user_id,
db_session
)
if not price_result.get('success'):
return {
'success': False,
'error': price_result.get('error', '价格计算失败')
}
# 2. 判断订阅类型
subscription_type = determine_subscription_type(user_id, plan_code, billing_cycle)
# 3. 创建支付订单
order = PaymentOrder(
order_no=generate_order_no(user_id),
user_id=user_id,
plan_code=plan_code,
billing_cycle=billing_cycle,
subscription_type=subscription_type,
original_price=Decimal(str(price_result['original_price'])),
discount_amount=Decimal(str(price_result['discount_amount'])),
final_amount=Decimal(str(price_result['final_amount'])),
promo_code=promo_code,
status='pending',
expired_at=beijing_now() + timedelta(minutes=30)
)
if db_session:
db_session.add(order)
db_session.commit()
return {
'success': True,
'order': order,
'subscription_type': subscription_type,
'error': None
}
except Exception as e:
if db_session:
db_session.rollback()
return {
'success': False,
'error': f'创建订单失败: {str(e)}'
}
def activate_subscription_after_payment(order_id, db_session=None):
"""
支付成功后激活订阅
Args:
order_id: 订单ID
db_session: 数据库会话
Returns:
dict: {
'success': True/False,
'subscription': UserSubscription 对象,
'error': None
}
"""
from models import PaymentOrder, UserSubscription, PromoCodeUsage
try:
# 1. 查询订单
order = PaymentOrder.query.get(order_id)
if not order:
return {'success': False, 'error': '订单不存在'}
if order.status != 'paid':
return {'success': False, 'error': '订单未支付'}
# 2. 检查是否已经激活
existing_sub = UserSubscription.query.filter_by(
payment_order_id=order.id
).first()
if existing_sub:
return {
'success': True,
'subscription': existing_sub,
'message': '订阅已激活'
}
# 3. 计算订阅周期天数
cycle_days_map = {
'monthly': 30,
'quarterly': 90,
'semiannual': 180,
'yearly': 365
}
days = cycle_days_map.get(order.billing_cycle, 30)
# 4. 获取当前订阅
current_sub = get_current_subscription(order.user_id, db_session)
# 5. 计算开始和结束时间
now = beijing_now()
if current_sub and current_sub.end_date > now:
# 续费:从当前订阅结束时间开始
start_date = current_sub.end_date
else:
# 新购:从当前时间开始
start_date = now
end_date = start_date + timedelta(days=days)
# 6. 创建新订阅记录
new_subscription = UserSubscription(
user_id=order.user_id,
subscription_id=generate_subscription_id(),
plan_code=order.plan_code,
billing_cycle=order.billing_cycle,
start_date=start_date,
end_date=end_date,
status='active',
is_current=True,
payment_order_id=order.id,
paid_amount=order.final_amount,
original_price=order.original_price,
discount_amount=order.discount_amount,
subscription_type=order.subscription_type,
previous_subscription_id=current_sub.subscription_id if current_sub else None,
auto_renew=False
)
# 7. 将旧订阅标记为非当前
if current_sub:
current_sub.is_current = False
if db_session:
db_session.add(new_subscription)
# 8. 记录优惠码使用
if order.promo_code_id:
usage = PromoCodeUsage(
promo_code_id=order.promo_code_id,
user_id=order.user_id,
order_id=order.id,
discount_amount=order.discount_amount
)
db_session.add(usage)
# 更新优惠码使用次数
from models import PromoCode
promo = PromoCode.query.get(order.promo_code_id)
if promo:
promo.current_uses += 1
db_session.commit()
return {
'success': True,
'subscription': new_subscription,
'error': None
}
except Exception as e:
if db_session:
db_session.rollback()
return {
'success': False,
'error': f'激活订阅失败: {str(e)}'
}
def get_subscription_button_text(user_id, plan_code, billing_cycle):
"""
获取订阅按钮文字
Args:
user_id: 用户ID
plan_code: 套餐代码 (pro/max)
billing_cycle: 计费周期
Returns:
str: 按钮文字
"""
from models import SubscriptionPlan
# 获取套餐显示名称
plan = SubscriptionPlan.query.filter_by(plan_code=plan_code).first()
plan_name = plan.plan_name if plan else plan_code.upper()
# 获取周期显示名称
cycle_names = {
'monthly': '月付',
'quarterly': '季付',
'semiannual': '半年付',
'yearly': '年付'
}
cycle_name = cycle_names.get(billing_cycle, billing_cycle)
# 获取当前订阅
current_sub = get_current_subscription(user_id)
# 1. 如果没有订阅或订阅已过期
if not current_sub or current_sub.plan_code == 'free' or current_sub.status != 'active':
return f"选择 {plan_name}"
# 2. 如果是当前套餐且周期相同
if current_sub.plan_code == plan_code and current_sub.billing_cycle == billing_cycle:
return f"续费 {plan_name}"
# 3. 如果是当前套餐但周期不同
if current_sub.plan_code == plan_code:
return f"切换至{cycle_name}"
# 4. 如果是不同套餐
return f"选择 {plan_name}"
# ============================================
# 优惠码相关函数
# ============================================
def validate_promo_code(code, plan_code, billing_cycle, amount, user_id=None, db_session=None):
"""
验证优惠码
Args:
code: 优惠码
plan_code: 套餐代码
billing_cycle: 计费周期
amount: 订单金额
user_id: 用户ID可选
db_session: 数据库会话(可选)
Returns:
tuple: (PromoCode对象 或 None, 错误信息 或 None)
"""
from models import PromoCode, PromoCodeUsage
try:
# 查询优惠码
promo = PromoCode.query.filter_by(code=code.upper(), is_active=True).first()
if not promo:
return None, "优惠码不存在或已失效"
# 检查有效期
now = beijing_now()
if promo.valid_from and now < promo.valid_from:
return None, "优惠码尚未生效"
if promo.valid_until and now > promo.valid_until:
return None, "优惠码已过期"
# 检查总使用次数
if promo.max_total_uses and promo.current_uses >= promo.max_total_uses:
return None, "优惠码使用次数已达上限"
# 检查每用户使用次数
if user_id and promo.max_uses_per_user:
user_usage_count = PromoCodeUsage.query.filter_by(
promo_code_id=promo.id,
user_id=user_id
).count()
if user_usage_count >= promo.max_uses_per_user:
return None, f"您已使用过此优惠码(限用{promo.max_uses_per_user}次)"
# 检查适用套餐
if promo.applicable_plans:
try:
applicable = json.loads(promo.applicable_plans)
if isinstance(applicable, list) and plan_code not in applicable:
return None, "该优惠码不适用于此套餐"
except:
pass
# 检查适用周期
if promo.applicable_cycles:
try:
applicable = json.loads(promo.applicable_cycles)
if isinstance(applicable, list) and billing_cycle not in applicable:
return None, "该优惠码不适用于此计费周期"
except:
pass
# 检查最低消费
if promo.min_amount and amount < float(promo.min_amount):
return None, f"需满 ¥{float(promo.min_amount):.2f} 才可使用此优惠码"
return promo, None
except Exception as e:
return None, f"验证优惠码时出错: {str(e)}"
def calculate_discount(promo_code, amount):
"""
计算优惠金额
Args:
promo_code: PromoCode 对象
amount: 订单金额
Returns:
Decimal: 优惠金额
"""
try:
if promo_code.discount_type == 'percentage':
# 百分比折扣
discount = Decimal(str(amount)) * Decimal(str(promo_code.discount_value)) / Decimal('100')
elif promo_code.discount_type == 'fixed_amount':
# 固定金额折扣
discount = Decimal(str(promo_code.discount_value))
else:
discount = Decimal('0')
# 确保折扣不超过总金额
discount = min(discount, Decimal(str(amount)))
return discount
except Exception as e:
print(f"计算折扣失败: {e}")
return Decimal('0')
# ============================================
# 辅助查询函数
# ============================================
def get_user_subscription_history(user_id, limit=10):
"""
获取用户订阅历史
Args:
user_id: 用户ID
limit: 返回记录数量限制
Returns:
list: UserSubscription 对象列表
"""
from models import UserSubscription
try:
subscriptions = UserSubscription.query.filter_by(
user_id=user_id
).order_by(
UserSubscription.created_at.desc()
).limit(limit).all()
return subscriptions
except Exception as e:
print(f"获取订阅历史失败: {e}")
return []
def check_subscription_status(user_id):
"""
检查用户订阅状态
Args:
user_id: 用户ID
Returns:
dict: {
'has_subscription': True/False,
'plan_code': 'pro''max''free',
'status': 'active''expired',
'end_date': datetime 或 None,
'days_left': int
}
"""
current_sub = get_current_subscription(user_id)
if not current_sub or current_sub.plan_code == 'free':
return {
'has_subscription': False,
'plan_code': 'free',
'status': 'active',
'end_date': None,
'days_left': 999
}
now = beijing_now()
days_left = (current_sub.end_date - now).days if current_sub.end_date > now else 0
return {
'has_subscription': True,
'plan_code': current_sub.plan_code,
'status': current_sub.status,
'end_date': current_sub.end_date,
'days_left': days_left
}

669
new_subscription_routes.py Normal file
View File

@@ -0,0 +1,669 @@
# -*- coding: utf-8 -*-
"""
新版订阅支付系统 API 路由
版本: v2.0.0
日期: 2025-11-19
使用方法:
将这些路由添加到你的 Flask app.py 中
"""
from flask import jsonify, request, session
from new_subscription_logic import (
calculate_subscription_price,
create_subscription_order,
activate_subscription_after_payment,
get_subscription_button_text,
get_current_subscription,
check_subscription_status,
get_user_subscription_history
)
# ============================================
# API 路由定义
# ============================================
@app.route('/api/v2/subscription/plans', methods=['GET'])
def get_subscription_plans_v2():
"""
获取订阅套餐列表(新版)
Response:
{
"success": true,
"data": [
{
"plan_code": "pro",
"plan_name": "Pro 专业版",
"description": "为专业投资者打造",
"prices": {
"monthly": 299.00,
"quarterly": 799.00,
"semiannual": 1499.00,
"yearly": 2699.00
},
"features": [...],
"is_active": true
},
...
]
}
"""
try:
from models import SubscriptionPlan
plans = SubscriptionPlan.query.filter_by(is_active=True).order_by(
SubscriptionPlan.display_order
).all()
data = []
for plan in plans:
data.append({
'plan_code': plan.plan_code,
'plan_name': plan.plan_name,
'description': plan.description,
'prices': {
'monthly': float(plan.price_monthly),
'quarterly': float(plan.price_quarterly),
'semiannual': float(plan.price_semiannual),
'yearly': float(plan.price_yearly)
},
'features': json.loads(plan.features) if plan.features else [],
'is_active': plan.is_active,
'display_order': plan.display_order
})
return jsonify({
'success': True,
'data': data
})
except Exception as e:
return jsonify({
'success': False,
'error': f'获取套餐列表失败: {str(e)}'
}), 500
@app.route('/api/v2/subscription/calculate-price', methods=['POST'])
def calculate_price_v2():
"""
计算订阅价格(新版 - 新购和续费价格一致)
Request Body:
{
"plan_code": "pro",
"billing_cycle": "yearly",
"promo_code": "WELCOME2025" // 可选
}
Response:
{
"success": true,
"data": {
"plan_code": "pro",
"plan_name": "Pro 专业版",
"billing_cycle": "yearly",
"original_price": 2699.00,
"discount_amount": 539.80,
"final_amount": 2159.20,
"promo_code": "WELCOME2025",
"promo_error": null
}
}
"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
data = request.get_json()
plan_code = data.get('plan_code')
billing_cycle = data.get('billing_cycle')
promo_code = data.get('promo_code')
if not plan_code or not billing_cycle:
return jsonify({
'success': False,
'error': '参数不完整'
}), 400
# 计算价格
result = calculate_subscription_price(
plan_code=plan_code,
billing_cycle=billing_cycle,
promo_code=promo_code,
user_id=session['user_id'],
db_session=db.session
)
if not result.get('success'):
return jsonify(result), 400
return jsonify({
'success': True,
'data': result
})
except Exception as e:
return jsonify({
'success': False,
'error': f'计算价格失败: {str(e)}'
}), 500
@app.route('/api/v2/payment/create-order', methods=['POST'])
def create_order_v2():
"""
创建支付订单(新版)
Request Body:
{
"plan_code": "pro",
"billing_cycle": "yearly",
"promo_code": "WELCOME2025" // 可选
}
Response:
{
"success": true,
"data": {
"order_no": "1732012345678901231234",
"plan_code": "pro",
"billing_cycle": "yearly",
"subscription_type": "renew", // 或 "new"
"original_price": 2699.00,
"discount_amount": 539.80,
"final_amount": 2159.20,
"qr_code_url": "https://...",
"status": "pending",
"expired_at": "2025-11-19T15:30:00",
...
}
}
"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
data = request.get_json()
plan_code = data.get('plan_code')
billing_cycle = data.get('billing_cycle')
promo_code = data.get('promo_code')
if not plan_code or not billing_cycle:
return jsonify({
'success': False,
'error': '参数不完整'
}), 400
# 创建订单
order_result = create_subscription_order(
user_id=session['user_id'],
plan_code=plan_code,
billing_cycle=billing_cycle,
promo_code=promo_code,
db_session=db.session
)
if not order_result.get('success'):
return jsonify({
'success': False,
'error': order_result.get('error')
}), 400
order = order_result['order']
# 生成微信支付二维码
try:
from wechat_pay import create_wechat_pay_instance, check_wechat_pay_ready
is_ready, ready_msg = check_wechat_pay_ready()
if not is_ready:
# 使用模拟二维码
order.qr_code_url = f"https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=wxpay://order/{order.order_no}"
order.remark = f"演示模式 - {ready_msg}"
else:
wechat_pay = create_wechat_pay_instance()
# 创建微信支付订单
plan_display = f"{plan_code.upper()}-{billing_cycle}"
wechat_result = wechat_pay.create_native_order(
order_no=order.order_no,
total_fee=float(order.final_amount),
body=f"VFr-{plan_display}",
product_id=f"{plan_code}_{billing_cycle}"
)
if wechat_result['success']:
wechat_code_url = wechat_result['code_url']
import urllib.parse
encoded_url = urllib.parse.quote(wechat_code_url, safe='')
qr_image_url = f"https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={encoded_url}"
order.qr_code_url = qr_image_url
order.prepay_id = wechat_result.get('prepay_id')
order.remark = f"微信支付 - {wechat_code_url}"
else:
order.qr_code_url = f"https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=wxpay://order/{order.order_no}"
order.remark = f"微信支付失败: {wechat_result.get('error')}"
except Exception as e:
order.qr_code_url = f"https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=wxpay://order/{order.order_no}"
order.remark = f"支付异常: {str(e)}"
db.session.commit()
return jsonify({
'success': True,
'data': {
'id': order.id,
'order_no': order.order_no,
'plan_code': order.plan_code,
'billing_cycle': order.billing_cycle,
'subscription_type': order.subscription_type,
'original_price': float(order.original_price),
'discount_amount': float(order.discount_amount),
'final_amount': float(order.final_amount),
'promo_code': order.promo_code,
'qr_code_url': order.qr_code_url,
'status': order.status,
'expired_at': order.expired_at.isoformat() if order.expired_at else None,
'created_at': order.created_at.isoformat() if order.created_at else None
},
'message': '订单创建成功'
})
except Exception as e:
db.session.rollback()
return jsonify({
'success': False,
'error': f'创建订单失败: {str(e)}'
}), 500
@app.route('/api/v2/payment/order/<int:order_id>/status', methods=['GET'])
def check_order_status_v2(order_id):
"""
查询订单支付状态(新版)
Response:
{
"success": true,
"payment_success": true, // 是否支付成功
"data": {
"order_no": "...",
"status": "paid",
...
},
"message": "支付成功!订阅已激活"
}
"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
from models import PaymentOrder
order = PaymentOrder.query.filter_by(
id=order_id,
user_id=session['user_id']
).first()
if not order:
return jsonify({'success': False, 'error': '订单不存在'}), 404
# 如果订单已经是已支付状态
if order.status == 'paid':
return jsonify({
'success': True,
'payment_success': True,
'data': {
'order_no': order.order_no,
'status': order.status,
'final_amount': float(order.final_amount)
},
'message': '订单已支付'
})
# 如果订单过期
if order.is_expired():
order.status = 'expired'
db.session.commit()
return jsonify({
'success': True,
'payment_success': False,
'data': {'status': 'expired'},
'message': '订单已过期'
})
# 调用微信支付API查询状态
try:
from wechat_pay import create_wechat_pay_instance
wechat_pay = create_wechat_pay_instance()
query_result = wechat_pay.query_order(order_no=order.order_no)
if query_result['success']:
trade_state = query_result.get('trade_state')
transaction_id = query_result.get('transaction_id')
if trade_state == 'SUCCESS':
# 支付成功
order.mark_as_paid(transaction_id)
db.session.commit()
# 激活订阅
activate_result = activate_subscription_after_payment(
order.id,
db_session=db.session
)
if activate_result.get('success'):
return jsonify({
'success': True,
'payment_success': True,
'data': {
'order_no': order.order_no,
'status': 'paid'
},
'message': '支付成功!订阅已激活'
})
else:
return jsonify({
'success': True,
'payment_success': True,
'data': {'status': 'paid'},
'message': '支付成功,但激活失败,请联系客服'
})
elif trade_state in ['NOTPAY', 'USERPAYING']:
return jsonify({
'success': True,
'payment_success': False,
'data': {'status': 'pending'},
'message': '等待支付...'
})
else:
order.status = 'cancelled'
db.session.commit()
return jsonify({
'success': True,
'payment_success': False,
'data': {'status': 'cancelled'},
'message': '支付已取消'
})
except Exception as e:
# 查询失败,返回当前状态
pass
return jsonify({
'success': True,
'payment_success': False,
'data': {'status': order.status},
'message': '无法查询支付状态,请稍后重试'
})
except Exception as e:
return jsonify({
'success': False,
'error': f'查询失败: {str(e)}'
}), 500
@app.route('/api/v2/payment/order/<int:order_id>/force-update', methods=['POST'])
def force_update_status_v2(order_id):
"""
强制更新订单支付状态(新版)
用于支付完成但页面未更新的情况
"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
from models import PaymentOrder
order = PaymentOrder.query.filter_by(
id=order_id,
user_id=session['user_id']
).first()
if not order:
return jsonify({'success': False, 'error': '订单不存在'}), 404
# 检查微信支付状态
try:
from wechat_pay import create_wechat_pay_instance
wechat_pay = create_wechat_pay_instance()
query_result = wechat_pay.query_order(order_no=order.order_no)
if query_result['success'] and query_result.get('trade_state') == 'SUCCESS':
transaction_id = query_result.get('transaction_id')
# 标记订单为已支付
order.mark_as_paid(transaction_id)
db.session.commit()
# 激活订阅
activate_result = activate_subscription_after_payment(
order.id,
db_session=db.session
)
if activate_result.get('success'):
return jsonify({
'success': True,
'payment_success': True,
'message': '状态更新成功!订阅已激活'
})
else:
return jsonify({
'success': True,
'payment_success': True,
'message': '支付成功,但激活失败,请联系客服',
'error': activate_result.get('error')
})
else:
return jsonify({
'success': True,
'payment_success': False,
'message': '微信支付状态未更新,请继续等待'
})
except Exception as e:
return jsonify({
'success': False,
'error': f'查询微信支付状态失败: {str(e)}'
}), 500
except Exception as e:
return jsonify({
'success': False,
'error': f'强制更新失败: {str(e)}'
}), 500
@app.route('/api/v2/subscription/current', methods=['GET'])
def get_current_subscription_v2():
"""
获取当前用户订阅信息(新版)
Response:
{
"success": true,
"data": {
"subscription_id": "SUB_1732012345_12345",
"plan_code": "pro",
"plan_name": "Pro 专业版",
"billing_cycle": "yearly",
"status": "active",
"start_date": "2025-11-19T00:00:00",
"end_date": "2026-11-19T00:00:00",
"days_left": 365,
"auto_renew": false
}
}
"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
from models import SubscriptionPlan
subscription = get_current_subscription(session['user_id'])
if not subscription:
return jsonify({
'success': True,
'data': {
'plan_code': 'free',
'plan_name': '免费版',
'status': 'active'
}
})
# 获取套餐名称
plan = SubscriptionPlan.query.filter_by(plan_code=subscription.plan_code).first()
plan_name = plan.plan_name if plan else subscription.plan_code.upper()
# 计算剩余天数
from datetime import datetime
now = datetime.now()
days_left = (subscription.end_date - now).days if subscription.end_date > now else 0
return jsonify({
'success': True,
'data': {
'subscription_id': subscription.subscription_id,
'plan_code': subscription.plan_code,
'plan_name': plan_name,
'billing_cycle': subscription.billing_cycle,
'status': subscription.status,
'start_date': subscription.start_date.isoformat() if subscription.start_date else None,
'end_date': subscription.end_date.isoformat() if subscription.end_date else None,
'days_left': days_left,
'auto_renew': subscription.auto_renew
}
})
except Exception as e:
return jsonify({
'success': False,
'error': f'获取订阅信息失败: {str(e)}'
}), 500
@app.route('/api/v2/subscription/history', methods=['GET'])
def get_subscription_history_v2():
"""
获取用户订阅历史(新版)
Query Params:
limit: 返回记录数量默认10
Response:
{
"success": true,
"data": [
{
"subscription_id": "SUB_...",
"plan_code": "pro",
"billing_cycle": "yearly",
"start_date": "...",
"end_date": "...",
"paid_amount": 2699.00,
"status": "expired"
},
...
]
}
"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
limit = request.args.get('limit', 10, type=int)
subscriptions = get_user_subscription_history(session['user_id'], limit)
data = []
for sub in subscriptions:
data.append({
'subscription_id': sub.subscription_id,
'plan_code': sub.plan_code,
'billing_cycle': sub.billing_cycle,
'start_date': sub.start_date.isoformat() if sub.start_date else None,
'end_date': sub.end_date.isoformat() if sub.end_date else None,
'paid_amount': float(sub.paid_amount),
'original_price': float(sub.original_price),
'discount_amount': float(sub.discount_amount),
'status': sub.status,
'created_at': sub.created_at.isoformat() if sub.created_at else None
})
return jsonify({
'success': True,
'data': data
})
except Exception as e:
return jsonify({
'success': False,
'error': f'获取订阅历史失败: {str(e)}'
}), 500
@app.route('/api/v2/subscription/button-text', methods=['POST'])
def get_button_text_v2():
"""
获取订阅按钮文字(新版)
Request Body:
{
"plan_code": "pro",
"billing_cycle": "yearly"
}
Response:
{
"success": true,
"button_text": "续费 Pro 专业版"
}
"""
try:
if 'user_id' not in session:
return jsonify({
'success': True,
'button_text': '选择套餐'
})
data = request.get_json()
plan_code = data.get('plan_code')
billing_cycle = data.get('billing_cycle')
if not plan_code or not billing_cycle:
return jsonify({
'success': False,
'error': '参数不完整'
}), 400
button_text = get_subscription_button_text(
session['user_id'],
plan_code,
billing_cycle
)
return jsonify({
'success': True,
'button_text': button_text
})
except Exception as e:
return jsonify({
'success': False,
'error': f'获取按钮文字失败: {str(e)}'
}), 500

View File

@@ -6,9 +6,9 @@
"dependencies": {
"@ant-design/icons": "^6.0.0",
"@asseinfo/react-kanban": "^2.2.0",
"@chakra-ui/icons": "^2.1.1",
"@chakra-ui/react": "^2.8.2",
"@chakra-ui/theme-tools": "^1.3.6",
"@chakra-ui/icons": "^2.2.6",
"@chakra-ui/react": "^2.10.9",
"@chakra-ui/theme-tools": "^2.2.6",
"@emotion/cache": "^11.4.0",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
@@ -29,6 +29,7 @@
"classnames": "^2.5.1",
"d3": "^7.9.0",
"date-fns": "^2.23.0",
"dayjs": "^1.11.19",
"draft-js": "^0.11.7",
"echarts": "^5.6.0",
"echarts-for-react": "^3.0.2",
@@ -39,9 +40,8 @@
"history": "^5.3.0",
"lucide-react": "^0.540.0",
"match-sorter": "6.3.0",
"moment": "^2.29.1",
"nouislider": "15.0.0",
"posthog-js": "^1.281.0",
"posthog-js": "^1.295.0",
"react": "18.3.1",
"react-apexcharts": "^1.3.9",
"react-big-calendar": "^0.33.2",
@@ -78,7 +78,8 @@
"styled-components": "^5.3.11",
"stylis": "^4.0.10",
"stylis-plugin-rtl": "^2.1.1",
"tsparticles-slim": "^2.12.0"
"tsparticles-slim": "^2.12.0",
"typescript": "^5.9.3"
},
"resolutions": {
"react-error-overlay": "6.0.9",
@@ -106,13 +107,20 @@
"deploy": "bash scripts/deploy-from-local.sh",
"deploy:setup": "bash scripts/setup-deployment.sh",
"rollback": "bash scripts/rollback-from-local.sh",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"lint:check": "eslint . --ext=js,jsx,ts,tsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx,ts,tsx --fix; exit 0",
"type-check": "tsc --noEmit",
"type-check:watch": "tsc --noEmit --watch",
"clean": "rm -rf node_modules/ package-lock.json",
"reinstall": "npm run clean && npm install"
},
"devDependencies": {
"@craco/craco": "^7.1.0",
"@types/node": "^20.19.25",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@typescript-eslint/eslint-plugin": "^8.46.4",
"@typescript-eslint/parser": "^8.46.4",
"ajv": "^8.17.1",
"autoprefixer": "^10.4.21",
"concurrently": "^8.2.2",

BIN
privacy_policy.docx Normal file

Binary file not shown.

View File

@@ -0,0 +1,585 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6G产业链深度解析 - 下一代通信技术革命</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
.hero-gradient::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: rotate 30s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
width: 4px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.timeline-item {
position: relative;
padding: 20px;
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.timeline-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.stock-table {
overflow-x: auto;
}
.stock-table table {
width: 100%;
min-width: 1000px;
}
.stock-table td, .stock-table th {
white-space: nowrap;
padding: 8px 12px;
}
.tag-cloud span {
display: inline-block;
padding: 4px 12px;
margin: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 20px;
font-size: 14px;
transition: all 0.3s ease;
cursor: pointer;
}
.tag-cloud span:hover {
transform: scale(1.1);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.stat-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.pulse-dot {
position: relative;
display: inline-block;
width: 10px;
height: 10px;
background: #10b981;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.risk-meter {
height: 20px;
background: linear-gradient(90deg, #10b981 0%, #fbbf24 50%, #ef4444 100%);
border-radius: 10px;
position: relative;
}
.risk-indicator {
position: absolute;
width: 4px;
height: 24px;
background: #1f2937;
border-radius: 2px;
top: -2px;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero-gradient text-white py-20 relative">
<div class="container mx-auto px-4 relative z-10">
<div class="text-center" data-aos="fade-up">
<h1 class="text-5xl md:text-6xl font-bold mb-6">6G产业链深度解析</h1>
<p class="text-xl md:text-2xl mb-4">下一代通信技术革命 · 2030年商用倒计时</p>
<div class="flex justify-center items-center gap-2 mb-8">
<span class="pulse-dot"></span>
<span>强政策驱动下的主题投资与基本面验证叠加期</span>
</div>
<div class="tag-cloud justify-center">
<span>天空地海一体化</span>
<span>通信+感知+AI融合</span>
<span>卫星互联网</span>
<span>太赫兹技术</span>
<span>数字孪生</span>
</div>
</div>
</div>
</section>
<!-- Key Stats -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="stat-card" data-aos="fade-up" data-aos-delay="100">
<h3 class="text-3xl font-bold text-purple-600 mb-2">2030</h3>
<p class="text-gray-600">规模化商用元年</p>
</div>
<div class="stat-card" data-aos="fade-up" data-aos-delay="200">
<h3 class="text-3xl font-bold text-purple-600 mb-2">2025</h3>
<p class="text-gray-600">标准化元年</p>
</div>
<div class="stat-card" data-aos="fade-up" data-aos-delay="300">
<h3 class="text-3xl font-bold text-purple-600 mb-2">3000万</h3>
<p class="text-gray-600">最高政策资金支持</p>
</div>
<div class="stat-card" data-aos="fade-up" data-aos-delay="400">
<h3 class="text-3xl font-bold text-purple-600 mb-2">100+</h3>
<p class="text-gray-600">6G研究成果发布</p>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">发展时间轴</h2>
<div class="relative">
<div class="timeline-line hidden md:block"></div>
<!-- Timeline Items -->
<div class="space-y-8">
<div class="timeline-item md:w-5/12 md:ml-auto" data-aos="fade-right">
<div class="text-sm text-purple-600 font-semibold mb-2">2024年末-2025年初</div>
<h3 class="text-xl font-bold mb-2">政策催化元年</h3>
<p>政府工作报告首次将6G纳入"未来产业培育核心框架",工信部明确"加快6G研发进程"</p>
</div>
<div class="timeline-item md:w-5/12" data-aos="fade-left">
<div class="text-sm text-purple-600 font-semibold mb-2">2025年7月</div>
<h3 class="text-xl font-bold mb-2">首个专项资金落地</h3>
<p>北京亦庄落地全国首个地方性6G产业专项资金政策最高支持3000万元</p>
</div>
<div class="timeline-item md:w-5/12 md:ml-auto" data-aos="fade-right">
<div class="text-sm text-purple-600 font-semibold mb-2">2025年9月</div>
<h3 class="text-xl font-bold mb-2">标准突破</h3>
<p>中国电信牵头"6G系统计费研究"项目获3GPP批准取得标准话语权</p>
</div>
<div class="timeline-item md:w-5/12" data-aos="fade-left">
<div class="text-sm text-purple-600 font-semibold mb-2">2025年11月</div>
<h3 class="text-xl font-bold mb-2">6G发展大会</h3>
<p>北京举办2025年6G发展大会发布技术试验结果和重点场景研究成果</p>
</div>
</div>
</div>
</div>
</section>
<!-- Core Concepts -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">核心概念解析</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<div class="card bg-gradient-to-br from-purple-100 to-pink-100 shadow-xl" data-aos="fade-up">
<div class="card-body">
<h3 class="card-title text-xl font-bold mb-4">技术范式跃迁</h3>
<ul class="space-y-2">
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
<span><strong>空天地海一体化</strong>:卫星互联网为核心,实现全域覆盖</span>
</li>
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
<span><strong>通信+感知+AI融合</strong>:网络成为智能服务平台</span>
</li>
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
<span><strong>太赫兹技术</strong>6G核心频段实现TB级传输</span>
</li>
</ul>
</div>
</div>
<div class="card bg-gradient-to-br from-blue-100 to-cyan-100 shadow-xl" data-aos="fade-up" data-aos-delay="100">
<div class="card-body">
<h3 class="card-title text-xl font-bold mb-4">市场认知分析</h3>
<ul class="space-y-2">
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span><strong>乐观预期</strong>:政策密集释放,板块热度高涨</span>
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span><strong>预期差1</strong>:低估"感知"功能商业价值</span>
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span><strong>预期差2</strong>:忽视上游细分"卖铲人"机会</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="card shadow-xl" data-aos="fade-up">
<div class="card-body">
<h3 class="card-title text-xl font-bold mb-4">6G产业链关键环节</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-purple-50 p-4 rounded-lg">
<h4 class="font-bold text-purple-700 mb-2">上游:核心器件</h4>
<ul class="text-sm space-y-1">
<li>• 射频器件(天线/滤波器)</li>
<li>• 基带/射频芯片</li>
<li>• 太赫兹器件</li>
<li>• 光模块/光器件</li>
</ul>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<h4 class="font-bold text-blue-700 mb-2">中游:设备系统</h4>
<ul class="text-sm space-y-1">
<li>• 无线主设备</li>
<li>• 卫星制造与运营</li>
<li>• 光通信网络</li>
<li>• 网络安全设备</li>
</ul>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<h4 class="font-bold text-green-700 mb-2">下游:运营应用</h4>
<ul class="text-sm space-y-1">
<li>• 三大运营商</li>
<li>• 网络服务与安全</li>
<li>• 垂直行业应用</li>
<li>• 终端设备</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Key Catalysts -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">关键催化剂</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="alert alert-info shadow-lg" data-aos="zoom-in">
<div>
<h3 class="font-bold">近期催化剂</h3>
<div class="text-sm mt-2">
<p>• 2025年6G发展大会技术试验结果</p>
<p>• 地方政策细则持续出台</p>
<p>• 运营商6G资本开支边际提升</p>
</div>
</div>
</div>
<div class="alert alert-warning shadow-lg" data-aos="zoom-in" data-aos-delay="100">
<div>
<h3 class="font-bold">发展阶段</h3>
<div class="text-sm mt-2">
<p>• 2025-2027标准主导</p>
<p>• 2027-2030试验验证</p>
<p>• 2030+:规模商用</p>
</div>
</div>
</div>
<div class="alert alert-success shadow-lg" data-aos="zoom-in" data-aos-delay="200">
<div>
<h3 class="font-bold">投资方向</h3>
<div class="text-sm mt-2">
<p>• 卫星互联网产业链</p>
<p>• 核心射频器件重构</p>
<p>• 算力网络与光通信</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">风险与挑战</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="card bg-red-50 shadow-xl" data-aos="fade-right">
<div class="card-body">
<h3 class="card-title text-xl font-bold text-red-700 mb-4">技术风险</h3>
<div class="space-y-3">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-sm font-medium">太赫兹芯片"卡脖子"</span>
<span class="text-sm text-red-600">高风险</span>
</div>
<div class="risk-meter">
<div class="risk-indicator" style="left: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-sm font-medium">星地融合复杂度</span>
<span class="text-sm text-yellow-600">中风险</span>
</div>
<div class="risk-meter">
<div class="risk-indicator" style="left: 60%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="card bg-orange-50 shadow-xl" data-aos="fade-left">
<div class="card-body">
<h3 class="card-title text-xl font-bold text-orange-700 mb-4">市场风险</h3>
<div class="space-y-3">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-sm font-medium">投资规模巨大</span>
<span class="text-sm text-orange-600">高风险</span>
</div>
<div class="risk-meter">
<div class="risk-indicator" style="left: 80%"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-sm font-medium">国际标准分裂</span>
<span class="text-sm text-red-600">高风险</span>
</div>
<div class="risk-meter">
<div class="risk-indicator" style="left: 90%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">6G产业链核心股票池</h2>
<div class="card bg-white shadow-xl" data-aos="fade-up">
<div class="card-body p-0">
<!-- Category Tabs -->
<div class="tabs tabs-boxed bg-purple-100 p-4 rounded-t-xl">
<a class="tab tab-active" onclick="filterTable('all')">全部</a>
<a class="tab" onclick="filterTable('运营商')">运营商</a>
<a class="tab" onclick="filterTable('光模块')">光模块</a>
<a class="tab" onclick="filterTable('网络设备')">网络设备</a>
<a class="tab" onclick="filterTable('基站射频器')">基站射频器</a>
</div>
<!-- Stock Table -->
<div class="stock-table">
<table class="table table-zebra w-full" id="stockTable">
<thead class="bg-purple-600 text-white">
<tr>
<th>股票名称</th>
<th>分类</th>
<th>产业链</th>
<th>核心逻辑</th>
<th>关注理由</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- Table rows will be populated by JavaScript -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- Investment Insights -->
<section class="py-12 bg-gradient-to-br from-purple-600 to-pink-600 text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">投资启示</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="card bg-white/10 backdrop-blur-md text-white border border-white/20" data-aos="zoom-in">
<div class="card-body">
<h3 class="card-title text-lg font-bold mb-3">✓ 卫星互联网</h3>
<p class="text-sm">最具增量空间,关注运营(中国卫通)、核心载荷(铖昌科技)、星间光模块(中际旭创)</p>
</div>
</div>
<div class="card bg-white/10 backdrop-blur-md text-white border border-white/20" data-aos="zoom-in" data-aos-delay="100">
<div class="card-body">
<h3 class="card-title text-lg font-bold mb-3">✓ 核心射频</h3>
<p class="text-sm">6G频段提升带来价值重构关注通宇通讯、灿勤科技等技术领先者</p>
</div>
</div>
<div class="card bg-white/10 backdrop-blur-md text-white border border-white/20" data-aos="zoom-in" data-aos-delay="200">
<div class="card-body">
<h3 class="card-title text-lg font-bold mb-3">✓ 算力网络</h3>
<p class="text-sm">AI内生网络需求中兴通讯、紫光股份等平台型公司受益</p>
</div>
</div>
</div>
<div class="text-center mt-12" data-aos="fade-up">
<p class="text-xl mb-4">关键跟踪指标</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="badge badge-info badge-lg">研发投入占比</span>
<span class="badge badge-info badge-lg">标准专利数量</span>
<span class="badge badge-info badge-lg">技术试验进展</span>
<span class="badge badge-info badge-lg">订单兑现情况</span>
<span class="badge badge-info badge-lg">资本开支倾斜</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">6G产业链深度解析 | 数据来源:机构研报、互动平台、公告等</p>
<p class="text-sm text-gray-400">投资有风险,入市需谨慎</p>
</div>
</footer>
<script>
// Stock Data
const stockData = [
{stock: '中国移动', category: '运营商', industry: '6G产业链', reason: '网络建设运营主导者', focus: '运营商分类'},
{stock: '中国电信', category: '运营商', industry: '6G产业链', reason: '网络建设运营主导者', focus: '运营商分类'},
{stock: '中国联通', category: '运营商', industry: '6G产业链', reason: '网络建设运营主导者', focus: '运营商分类'},
{stock: '中兴通讯', category: '网络设备', industry: '6G产业链', reason: '端到端解决方案龙头', focus: '综合平台型'},
{stock: '中际旭创', category: '光模块', industry: '6G产业链', reason: '星间链路核心受益', focus: '光模块龙头'},
{stock: '光迅科技', category: '光模块', industry: '6G产业链', reason: '星间链路核心受益', focus: '光模块龙头'},
{stock: '新易盛', category: '光模块', industry: '6G产业链', reason: '高速光模块领先', focus: '光模块龙头'},
{stock: '华工科技', category: '光模块', industry: '6G产业链', reason: '国内电信级光模块龙头', focus: '光模块龙头'},
{stock: '通宇通讯', category: '天线', industry: '6G产业链', reason: '6G天线技术积累', focus: '天线细分龙头'},
{stock: '武汉凡谷', category: '基站射频器', industry: '6G产业链', reason: '基站射频器件价值重构', focus: '射频器件'},
{stock: '大富科技', category: '基站射频器', industry: '6G产业链', reason: '基站射频器件价值重构', focus: '射频器件'},
{stock: '灿勤科技', category: '基站射频器', industry: '6G产业链', reason: '滤波器核心技术', focus: '射频器件'},
{stock: '铖昌科技', category: '基站射频器', industry: '6G产业链', reason: '卫星射频芯片核心', focus: '卫星互联网'},
{stock: '国博电子', category: '基站射频器', industry: '6G产业链', reason: '射频芯片国家队', focus: '射频器件'},
{stock: '中国卫通', category: '运营商', industry: '6G产业链', reason: '卫星运营国家队', focus: '卫星互联网'},
{stock: '烽火通信', category: '网络设备', industry: '6G产业链', reason: '光通信全产业链', focus: '网络设备'},
{stock: '紫光股份', category: '网络设备', industry: '6G产业链', reason: 'ICT基础设施龙头', focus: '网络设备'},
{stock: '电科网安', category: '网络安全', industry: '6G产业链', reason: '6G网络安全需求提升', focus: '网络安全'},
{stock: '亨通光电', category: '光纤光缆', industry: '6G产业链', reason: '海底光缆+光纤光缆双轮驱动', focus: '有线通信'},
{stock: '长飞光纤', category: '光纤光缆', industry: '6G产业链', reason: '光纤预制棒龙头', focus: '有线通信'}
];
// Initialize AOS
AOS.init({
duration: 1000,
once: true
});
// Populate Stock Table
function populateTable(data = stockData) {
const tbody = document.getElementById('stockTableBody');
tbody.innerHTML = '';
data.forEach((stock, index) => {
const row = document.createElement('tr');
row.className = index % 2 === 0 ? 'hover:bg-purple-50' : 'hover:bg-purple-50';
row.innerHTML = `
<td class="font-semibold">${stock.stock}</td>
<td><span class="badge badge-info">${stock.category}</span></td>
<td>${stock.industry}</td>
<td class="text-sm">${stock.reason}</td>
<td><span class="text-xs text-purple-600">${stock.focus}</span></td>
`;
tbody.appendChild(row);
});
}
// Filter Table
function filterTable(category) {
// Update active tab
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('tab-active');
});
event.target.classList.add('tab-active');
// Filter data
const filteredData = category === 'all'
? stockData
: stockData.filter(stock => stock.category === category);
populateTable(filteredData);
}
// Initialize table on load
document.addEventListener('DOMContentLoaded', function() {
populateTable();
});
// Add smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,833 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI PCB英伟达M9 - 深度投资分析</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" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
min-height: 100vh;
}
.hero-gradient {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.timeline-line {
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tech-grid {
background-image:
linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
}
.pulse-dot {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.scroll-container {
scrollbar-width: thin;
scrollbar-color: #4b5563 #1f2937;
}
.scroll-container::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.scroll-container::-webkit-scrollbar-track {
background: #1f2937;
}
.scroll-container::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 4px;
}
.number-animate {
animation: countUp 2s ease-out forwards;
}
@keyframes countUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.gradient-text {
background: linear-gradient(135deg, #60a5fa, #c084fc, #f472b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stock-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
</head>
<body class="text-gray-100">
<!-- Navigation -->
<div class="navbar glass-effect fixed top-0 w-full z-50 px-4">
<div class="max-w-7xl mx-auto">
<div class="flex justify-between items-center h-16">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
<i class="fas fa-microchip text-white"></i>
</div>
<span class="text-xl font-bold gradient-text">AI PCB英伟达M9</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#overview" class="hover:text-blue-400 transition">核心逻辑</a>
<a href="#timeline" class="hover:text-blue-400 transition">事件时间轴</a>
<a href="#industry" class="hover:text-blue-400 transition">产业链</a>
<a href="#stocks" class="hover:text-blue-400 transition">核心标的</a>
<a href="#risks" class="hover:text-blue-400 transition">风险提示</a>
</div>
</div>
</div>
</div>
<!-- Hero Section -->
<section class="hero-gradient min-h-screen flex items-center relative overflow-hidden tech-grid">
<div class="absolute inset-0 bg-black opacity-30"></div>
<div class="container mx-auto px-6 relative z-10">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="number-animate">
<div class="inline-block px-4 py-2 bg-white/20 rounded-full mb-6 backdrop-blur-sm">
<span class="text-sm font-semibold">🚀 英伟达Rubin系列确认采用M9材料</span>
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
AI服务器PCB<br>
<span class="gradient-text">材料革命浪潮</span>
</h1>
<p class="text-xl mb-8 text-gray-100">
2026年Rubin系列量产在即M9等级覆铜板将开启千亿市场空间。钻针、Q布、HVLP4铜箔成最紧缺环节。
</p>
<div class="flex flex-wrap gap-4 mb-8">
<div class="glass-effect px-6 py-3 rounded-xl">
<div class="text-3xl font-bold text-blue-400">5×</div>
<div class="text-sm text-gray-300">钻针需求增长</div>
</div>
<div class="glass-effect px-6 py-3 rounded-xl">
<div class="text-3xl font-bold text-purple-400">78层</div>
<div class="text-sm text-gray-300">正交背板层数</div>
</div>
<div class="glass-effect px-6 py-3 rounded-xl">
<div class="text-3xl font-bold text-pink-400">千亿</div>
<div class="text-sm text-gray-300">市场空间</div>
</div>
</div>
<div class="flex space-x-4">
<button onclick="document.getElementById('overview').scrollIntoView({behavior: 'smooth'})"
class="px-8 py-3 bg-white text-gray-900 rounded-xl font-semibold hover:bg-gray-100 transition">
深度分析
</button>
<button onclick="document.getElementById('stocks').scrollIntoView({behavior: 'smooth'})"
class="px-8 py-3 glass-effect rounded-xl font-semibold hover:bg-white/20 transition">
查看标的
</button>
</div>
</div>
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-3xl blur-3xl"></div>
<canvas id="trendChart" class="relative z-10"></canvas>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 pulse-dot">
<i class="fas fa-chevron-down text-2xl"></i>
</div>
</section>
<!-- Core Logic Section -->
<section id="overview" class="py-20 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">核心逻辑与市场认知</h2>
<p class="text-xl text-gray-400">从算力升级到材料革命的必然路径</p>
</div>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<div class="glass-effect rounded-2xl p-8 card-hover">
<div class="w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center mb-6">
<i class="fas fa-rocket text-2xl text-blue-400"></i>
</div>
<h3 class="text-2xl font-bold mb-4">算力需求爆炸</h3>
<p class="text-gray-400 mb-4">AI模型向万亿参数演进推理和后训练需求激增</p>
<div class="border-l-4 border-blue-400 pl-4">
<p class="text-sm">2030年AI基础设施市场规模达3-5万亿美元</p>
</div>
</div>
<div class="glass-effect rounded-2xl p-8 card-hover">
<div class="w-16 h-16 bg-purple-500/20 rounded-2xl flex items-center justify-center mb-6">
<i class="fas fa-network-wired text-2xl text-purple-400"></i>
</div>
<h3 class="text-2xl font-bold mb-4">架构复杂化</h3>
<p class="text-gray-400 mb-4">从铜缆互联到正交背板PCB层数和集成度要求空前</p>
<div class="border-l-4 border-purple-400 pl-4">
<p class="text-sm">Rubin Ultra: 3块26层合成78层板</p>
</div>
</div>
<div class="glass-effect rounded-2xl p-8 card-hover">
<div class="w-16 h-16 bg-pink-500/20 rounded-2xl flex items-center justify-center mb-6">
<i class="fas fa-atom text-2xl text-pink-400"></i>
</div>
<h3 class="text-2xl font-bold mb-4">材料革命</h3>
<p class="text-gray-400 mb-4">M9材料组合升级Q布+HVLP4铜箔+碳氢树脂</p>
<div class="border-l-4 border-pink-400 pl-4">
<p class="text-sm">球形二氧化硅用量翻倍增长</p>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6">预期差分析</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="border-l-4 border-yellow-400 pl-6">
<h4 class="text-xl font-semibold mb-3 text-yellow-400">时间差</h4>
<p class="text-gray-400">市场憧憬2026年千亿空间但GB300仅小批量订单存在2-3季度业绩真空期</p>
</div>
<div class="border-l-4 border-green-400 pl-6">
<h4 class="text-xl font-semibold mb-3 text-green-400">结构性</h4>
<p class="text-gray-400">钻针需求增5倍200孔/针),其他环节为"极紧",紧缺程度差异巨大</p>
</div>
<div class="border-l-4 border-red-400 pl-6">
<h4 class="text-xl font-semibold mb-3 text-red-400">确定性</h4>
<p class="text-gray-400">沪电50%份额为预期Rubin供应商名单仍在角逐竞争激烈</p>
</div>
<div class="border-l-4 border-blue-400 pl-6">
<h4 class="text-xl font-semibold mb-3 text-blue-400">节奏</h4>
<p class="text-gray-400">11月底Switch tray评估结果将是近期关键催化剂</p>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section id="timeline" class="py-20 px-6 bg-gray-900/50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">关键事件时间轴</h2>
<p class="text-xl text-gray-400">从概念引爆到业绩兑现的完整路径</p>
</div>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 timeline-line"></div>
<div class="space-y-12">
<div class="flex items-center">
<div class="flex-1 text-right pr-8">
<div class="glass-effect rounded-xl p-6 inline-block text-left">
<div class="text-sm text-gray-400 mb-2">2024年Q3及之前</div>
<h3 class="text-xl font-bold mb-2">市场培育期</h3>
<p class="text-gray-400">关注GB200需求Rubin尚在打样阶段</p>
</div>
</div>
<div class="relative z-10 w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
<i class="fas fa-seedling text-white"></i>
</div>
<div class="flex-1 pl-8"></div>
</div>
<div class="flex items-center">
<div class="flex-1 pr-8"></div>
<div class="relative z-10 w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center">
<i class="fas fa-fire text-white"></i>
</div>
<div class="flex-1 pl-8">
<div class="glass-effect rounded-xl p-6 inline-block">
<div class="text-sm text-gray-400 mb-2">2024年10月21日</div>
<h3 class="text-xl font-bold mb-2">概念引爆</h3>
<p class="text-gray-400">台媒爆料Rubin采用M9材料Q布、HVLP4、钻针成紧缺环节</p>
</div>
</div>
</div>
<div class="flex items-center">
<div class="flex-1 text-right pr-8">
<div class="glass-effect rounded-xl p-6 inline-block text-left">
<div class="text-sm text-gray-400 mb-2">2024年10-11月</div>
<h3 class="text-xl font-bold mb-2">机构密集发声</h3>
<p class="text-gray-400">国金、中信、广发等发布研报,板块到"超配时间点"</p>
</div>
</div>
<div class="relative z-10 w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center">
<i class="fas fa-chart-line text-white"></i>
</div>
<div class="flex-1 pl-8"></div>
</div>
<div class="flex items-center">
<div class="flex-1 pr-8"></div>
<div class="relative z-10 w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center">
<i class="fas fa-clock text-white"></i>
</div>
<div class="flex-1 pl-8">
<div class="glass-effect rounded-xl p-6 inline-block">
<div class="text-sm text-gray-400 mb-2">2024年11月底</div>
<h3 class="text-xl font-bold mb-2">关键评估节点</h3>
<p class="text-gray-400">Switch tray是否采用M9的评估结果</p>
</div>
</div>
</div>
<div class="flex items-center">
<div class="flex-1 text-right pr-8">
<div class="glass-effect rounded-xl p-6 inline-block text-left">
<div class="text-sm text-gray-400 mb-2">2025年H2-2026年</div>
<h3 class="text-xl font-bold mb-2">量产兑现期</h3>
<p class="text-gray-400">Rubin大规模量产M9产业链迎来业绩高峰</p>
</div>
</div>
<div class="relative z-10 w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
<i class="fas fa-trophy text-white"></i>
</div>
<div class="flex-1 pl-8"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Industry Chain Section -->
<section id="industry" class="py-20 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">产业链深度剖析</h2>
<p class="text-xl text-gray-400">从上游材料到下游设备的全景图谱</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<div class="glass-effect rounded-2xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold">Q布石英布</h3>
<span class="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">极度紧缺</span>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-gray-400">菲利华</span>
<span class="text-green-400">全球龙一</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-400">中材科技</span>
<span class="text-blue-400">电子布满贯</span>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold">HVLP4铜箔</h3>
<span class="px-3 py-1 bg-orange-500/20 text-orange-400 rounded-full text-xs">高度紧缺</span>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-gray-400">德福科技</span>
<span class="text-green-400">全球龙二</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-400">铜冠铜箔</span>
<span class="text-blue-400">进度稍慢</span>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold">钻针</h3>
<span class="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">最紧缺</span>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-gray-400">鼎泰高科</span>
<span class="text-green-400">全球龙一</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-400">需求变化</span>
<span class="text-yellow-400">5倍提升</span>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold">M9 CCL</h3>
<span class="px-3 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">核心环节</span>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-gray-400">生益科技</span>
<span class="text-green-400">大陆唯一</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-400">南亚新材</span>
<span class="text-blue-400">技术领先</span>
</div>
</div>
</div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-microchip mr-3 text-blue-400"></i>
PCB制造
</h3>
<div class="space-y-4">
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">胜宏科技</h4>
<p class="text-sm text-gray-400 mb-2">AI PCB龙头当前英伟达业务敞口最大</p>
<div class="flex items-center text-xs">
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 rounded">GB200核心供应商</span>
<span class="ml-2 text-gray-500">60%+份额预期</span>
</div>
</div>
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">沪电股份</h4>
<p class="text-sm text-gray-400 mb-2">正交背板核心预期</p>
<div class="flex items-center text-xs">
<span class="px-2 py-1 bg-purple-500/20 text-purple-400 rounded">Rubin Ultra 50%份额</span>
<span class="ml-2 text-gray-500">再造一个沪电</span>
</div>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-tools mr-3 text-purple-400"></i>
PCB设备
</h3>
<div class="space-y-4">
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">大族数控</h4>
<p class="text-sm text-gray-400">CCD背钻机替代海外竞品</p>
<div class="flex items-center text-xs mt-2">
<span class="text-green-400">市场份额持续提升</span>
</div>
</div>
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">芯基微装</h4>
<p class="text-sm text-gray-400">直写光刻技术领先</p>
<div class="flex items-center text-xs mt-2">
<span class="text-blue-400">覆盖PCB全产品市场</span>
</div>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-vial mr-3 text-pink-400"></i>
其他材料
</h3>
<div class="space-y-4">
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">碳氢树脂</h4>
<p class="text-sm text-gray-400">东材科技 - M9树脂批量供货</p>
</div>
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">球形硅微粉</h4>
<p class="text-sm text-gray-400">联瑞新材 - 用量翻倍增长</p>
</div>
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">低介电电子布</h4>
<p class="text-sm text-gray-400">宏和科技、国际复材布局</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stocks Table Section -->
<section id="stocks" class="py-20 px-6 bg-gray-900/50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">核心标的全览</h2>
<p class="text-xl text-gray-400">产业链各环节关键公司数据对比</p>
</div>
<div class="glass-effect rounded-2xl p-6">
<div class="mb-6 flex flex-wrap gap-3">
<button onclick="filterCategory('all')" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
全部
</button>
<button onclick="filterCategory('AI服务器相关')" class="px-4 py-2 glass-effect rounded-lg hover:bg-white/20 transition">
AI服务器
</button>
<button onclick="filterCategory('覆铜板')" class="px-4 py-2 glass-effect rounded-lg hover:bg-white/20 transition">
覆铜板
</button>
<button onclick="filterCategory('HVL')" class="px-4 py-2 glass-effect rounded-lg hover:bg-white/20 transition">
HVLP铜箔
</button>
<button onclick="filterCategory('PCB耗材')" class="px-4 py-2 glass-effect rounded-lg hover:bg-white/20 transition">
PCB耗材
</button>
</div>
<div class="overflow-x-auto scroll-container">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-700">
<th class="text-left py-3 px-4">股票</th>
<th class="text-left py-3 px-4">分类</th>
<th class="text-left py-3 px-4">项目/规模</th>
<th class="text-left py-3 px-4">产业链位置</th>
<th class="text-left py-3 px-4">核心亮点</th>
<th class="text-left py-3 px-4">资料来源</th>
</tr>
</thead>
<tbody id="stocksTableBody">
<!-- 表格数据将通过JavaScript动态生成 -->
</tbody>
</table>
</div>
</div>
<!-- 推荐组合 -->
<div class="mt-12 grid md:grid-cols-3 gap-6">
<div class="glass-effect rounded-2xl p-6 border-l-4 border-green-400">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">首选推荐</h3>
<i class="fas fa-star text-yellow-400"></i>
</div>
<p class="text-gray-400 mb-4">逻辑最纯粹,弹性最大</p>
<div class="space-y-2">
<div class="flex items-center justify-between">
<span>鼎泰高科</span>
<span class="text-green-400 text-sm">钻针全球龙一</span>
</div>
<div class="flex items-center justify-between">
<span>菲利华</span>
<span class="text-green-400 text-sm">Q布全球龙一</span>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 border-l-4 border-blue-400">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">稳健配置</h3>
<i class="fas fa-shield-alt text-blue-400"></i>
</div>
<p class="text-gray-400 mb-4">确定性高,份额稳固</p>
<div class="space-y-2">
<div class="flex items-center justify-between">
<span>生益科技</span>
<span class="text-blue-400 text-sm">英伟达CCL核心</span>
</div>
<div class="flex items-center justify-between">
<span>胜宏科技</span>
<span class="text-blue-400 text-sm">AI PCB龙头</span>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 border-l-4 border-purple-400">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">高弹性标的</h3>
<i class="fas fa-rocket text-purple-400"></i>
</div>
<p class="text-gray-400 mb-4">想象空间大,兑现较晚</p>
<div class="space-y-2">
<div class="flex items-center justify-between">
<span>沪电股份</span>
<span class="text-purple-400 text-sm">正交背板预期</span>
</div>
<div class="flex items-center justify-between">
<span>德福科技</span>
<span class="text-purple-400 text-sm">HVLP4领先</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Risks Section -->
<section id="risks" class="py-20 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">潜在风险与挑战</h2>
<p class="text-xl text-gray-400">投资决策必须考虑的关键因素</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-exclamation-triangle mr-3 text-yellow-400"></i>
技术风险
</h3>
<div class="space-y-4">
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">M9材料加工难度高</h4>
<p class="text-sm text-gray-400">Q布硬度高、钻针寿命短影响PCB生产良率和成本</p>
</div>
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">技术替代风险</h4>
<p class="text-sm text-gray-400">mSAP工艺、CoWoP封装等颠覆性技术的潜在冲击</p>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-chart-line mr-3 text-red-400"></i>
商业化风险
</h3>
<div class="space-y-4">
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">需求递延风险</h4>
<p class="text-sm text-gray-400">宏观经济下行或AI应用落地不及预期</p>
</div>
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">成本压力</h4>
<p class="text-sm text-gray-400">M9全产业链升级抬高服务器成本</p>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-globe mr-3 text-blue-400"></i>
政策与竞争风险
</h3>
<div class="space-y-4">
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">地缘政治风险</h4>
<p class="text-sm text-gray-400">PCB供应链可能受贸易摩擦冲击</p>
</div>
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">日企竞争压力</h4>
<p class="text-sm text-gray-400">日本在高端铜箔、钻针领域仍具领先优势</p>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-info-circle mr-3 text-purple-400"></i>
信息验证风险
</h3>
<div class="space-y-4">
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">时间差矛盾</h4>
<p class="text-sm text-gray-400">千亿空间是远景当前GB300订单疲软</p>
</div>
<div class="p-4 bg-gray-800/50 rounded-xl">
<h4 class="font-semibold mb-2">份额不确定性</h4>
<p class="text-sm text-gray-400">各厂商份额仍在激烈争夺中</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 px-6 border-t border-gray-800">
<div class="max-w-7xl mx-auto text-center">
<p class="text-gray-400 mb-4">数据来源:新闻、路演、专家访谈、上市公司公告</p>
<p class="text-sm text-gray-500">投资有风险,本页面仅供参考不构成投资建议</p>
<div class="mt-6 flex justify-center space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-github text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-linkedin text-xl"></i>
</a>
</div>
</div>
</footer>
<script>
// 股票数据
const stocksData = [
{stock: '鹏鼎控股', category: 'AI服务器相关', project: 'PCB350亿元/99.64%', industry: 'AI服务器', chain: 'HD升级至16~20L水平已切入全球知名服务器客户供应链', source: '互动'},
{stock: '沪电股份', category: 'AI服务器相关', project: 'PCB128亿元/96.23%', industry: 'AI服务器', chain: 'AI服务器和HPC相关PCB占比约31%', source: '调研'},
{stock: '景旺电子', category: 'AI服务器相关', project: 'PCB120亿元/94.67%', industry: 'AI服务器', chain: '在AI服务器领域已有批量订单出货', source: '互动'},
{stock: '深南电路', category: 'AI服务器相关', project: 'PCB105亿元/58.6%', industry: 'AI服务器', chain: '重点布局数据中心(含服务器)', source: '调研'},
{stock: '胜宏科技', category: 'AI服务器相关', project: 'PCB100亿元/93.66%', industry: 'AI服务器', chain: '推出高阶HDI、高频高速PCB部分产品已批量供货', source: '互动'},
{stock: '生益科技', category: '覆铜板', project: '覆铜板147.91亿元/72.55%', industry: '覆铜板', chain: '英伟达三大CCL之一大陆唯一', source: '—'},
{stock: '德福科技', category: 'HVL', project: 'HVL铜箔研究的技术突破', industry: 'HVL', chain: '批量出货HVL前三代第四代送样验证中', source: '互动'},
{stock: '鼎泰高科', category: 'PCB耗材', project: 'PCB钻针全球销量市占率26.5%', industry: 'PCB耗材', chain: '全球PCB钻针龙头月产能9400万支', source: '研报/互动'},
{stock: '菲利华', category: '低介电电子布', project: 'Low DK/CTE高端领域布局', industry: '低介电电子布', chain: '全球Q布龙头', source: '公告/研报'},
{stock: '东材科技', category: '碳氢树脂', project: '5200吨高频高速特种树脂项目', industry: '碳氢树脂', chain: '国内碳氢树脂龙头M9树脂批量供货', source: '互动/纪要'},
];
// 初始化表格
function initTable() {
const tbody = document.getElementById('stocksTableBody');
tbody.innerHTML = '';
stocksData.forEach(stock => {
const row = document.createElement('tr');
row.className = 'border-b border-gray-800 hover:bg-gray-800/50 transition';
row.innerHTML = `
<td class="py-3 px-4 font-semibold">${stock.stock}</td>
<td class="py-3 px-4">
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 rounded text-xs">
${stock.category}
</span>
</td>
<td class="py-3 px-4 text-gray-400">${stock.project}</td>
<td class="py-3 px-4 text-gray-400">${stock.chain}</td>
<td class="py-3 px-4 text-gray-400">${stock.industry}</td>
<td class="py-3 px-4">
<span class="text-xs px-2 py-1 bg-gray-700 rounded">${stock.source}</span>
</td>
`;
tbody.appendChild(row);
});
}
// 筛选功能
function filterCategory(category) {
const rows = document.querySelectorAll('#stocksTableBody tr');
rows.forEach(row => {
if (category === 'all') {
row.style.display = '';
} else {
const categoryCell = row.querySelector('td:nth-child(2)').textContent;
row.style.display = categoryCell.includes(category) ? '' : 'none';
}
});
}
// 初始化趋势图表
function initTrendChart() {
const ctx = document.getElementById('trendChart');
if (ctx) {
new Chart(ctx, {
type: 'line',
data: {
labels: ['2024Q1', '2024Q2', '2024Q3', '2024Q4', '2025Q1', '2025Q2', '2025Q3', '2025Q4', '2026Q1'],
datasets: [{
label: 'AI PCB市场规模(亿元)',
data: [100, 150, 200, 280, 350, 420, 500, 600, 693],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.4,
fill: true
}, {
label: 'M9材料渗透率(%)',
data: [0, 0, 5, 15, 30, 45, 60, 75, 85],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139, 92, 246, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: '#fff'
}
}
},
scales: {
x: {
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: '#fff'
}
},
y: {
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: '#fff'
}
}
}
}
});
}
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
initTable();
initTrendChart();
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// 数字动画效果
const observerOptions = {
threshold: 0.5
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('number-animate');
}
});
}, observerOptions);
document.querySelectorAll('.glass-effect').forEach(el => {
observer.observe(el);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,545 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI服务器钽电容 - 概念深度解析</title>
<script src="https://cdn.tailwindcss.com"></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-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.table-scroll {
overflow-x: auto;
}
.table-scroll::-webkit-scrollbar {
height: 8px;
}
.table-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.table-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
}
.highlight-cell {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<div class="hero-gradient text-white py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-4 floating">
AI服务器钽电容
</h1>
<p class="text-xl md:text-2xl mb-8 opacity-90">算力革命背后的隐形冠军</p>
<div class="flex flex-wrap justify-center gap-4 text-sm">
<div class="bg-white/20 backdrop-blur-sm rounded-full px-6 py-2">
<i class="fas fa-chart-line mr-2"></i>景气上行周期
</div>
<div class="bg-white/20 backdrop-blur-sm rounded-full px-6 py-2">
<i class="fas fa-microchip mr-2"></i>国产替代加速
</div>
<div class="bg-white/20 backdrop-blur-sm rounded-full px-6 py-2">
<i class="fas fa-rocket mr-2"></i>量价齐升
</div>
</div>
</div>
</div>
</div>
<!-- Key Stats -->
<div class="py-12 px-4 bg-white shadow-lg">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="text-center card-hover p-6 rounded-lg">
<div class="text-3xl md:text-4xl font-bold gradient-text">20-30%</div>
<div class="text-gray-600 mt-2">KEMET涨幅</div>
</div>
<div class="text-center card-hover p-6 rounded-lg">
<div class="text-3xl md:text-4xl font-bold gradient-text">2.1万</div>
<div class="text-gray-600 mt-2">单柜用量(颗)</div>
</div>
<div class="text-center card-hover p-6 rounded-lg">
<div class="text-3xl md:text-4xl font-bold gradient-text">46%</div>
<div class="text-gray-600 mt-2">KEMET市占率</div>
</div>
<div class="text-center card-hover p-6 rounded-lg">
<div class="text-3xl md:text-4xl font-bold gradient-text">38周</div>
<div class="text-gray-600 mt-2">最长交期</div>
</div>
</div>
</div>
</div>
<!-- Timeline Section -->
<div class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">概念发展时间线</h2>
<div class="relative">
<div class="timeline-line absolute left-1/2 transform -translate-x-1/2 h-full w-1"></div>
<div class="space-y-12">
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8 text-right">
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<div class="text-sm text-gray-500">2024年及以前</div>
<div class="text-lg font-semibold mt-2">技术布局期</div>
<div class="text-gray-600 mt-2">钽电容主要应用于军工、高端消费电子。顺络电子等厂商自2009年起已开始技术布局。</div>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-600 rounded-full"></div>
<div class="w-full md:w-1/2 pl-8"></div>
</div>
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8"></div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-600 rounded-full"></div>
<div class="w-full md:w-1/2 pl-8">
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<div class="text-sm text-gray-500">2025年10月22日</div>
<div class="text-lg font-semibold mt-2">引爆点KEMET大幅涨价</div>
<div class="text-gray-600 mt-2">国巨旗下KEMET发布涨价函上调聚合物钽电容价格20%-30%,为年内第二次涨价。</div>
</div>
</div>
</div>
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8 text-right">
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<div class="text-sm text-gray-500">未来预期</div>
<div class="text-lg font-semibold mt-2">景气周期开启</div>
<div class="text-gray-600 mt-2">产业链涨价传导,国产替代加速,市场规模有望突破千亿。</div>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-600 rounded-full pulse-animation"></div>
<div class="w-full md:w-1/2 pl-8"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Core Logic Section -->
<div class="py-16 px-4 bg-gradient-to-br from-purple-50 to-indigo-50">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">核心逻辑与市场分析</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-xl p-8 card-hover">
<div class="text-4xl mb-4 text-purple-600">
<i class="fas fa-bolt"></i>
</div>
<h3 class="text-xl font-bold mb-4">技术刚需</h3>
<p class="text-gray-600">AI算力指数级增长要求供电系统极致稳定钽电容凭借"单位体积电容值最高、ESR最低"的特性成为最优解。</p>
</div>
<div class="bg-white rounded-xl shadow-xl p-8 card-hover">
<div class="text-4xl mb-4 text-indigo-600">
<i class="fas fa-chart-area"></i>
</div>
<h3 class="text-xl font-bold mb-4">需求爆发</h3>
<p class="text-gray-600">单台AI服务器用量远超传统NVL72机柜约需2.1万颗仅英伟达26年就能带来5亿美元增量。</p>
</div>
<div class="bg-white rounded-xl shadow-xl p-8 card-hover">
<div class="text-4xl mb-4 text-pink-600">
<i class="fas fa-cubes"></i>
</div>
<h3 class="text-xl font-bold mb-4">供给瓶颈</h3>
<p class="text-gray-600">CR4占全球80%+份额交期延长至38周+上游钽粉仅450-500吨扩产周期长。</p>
</div>
</div>
<!-- Market Sentiment -->
<div class="mt-12 bg-white rounded-xl shadow-xl p-8">
<h3 class="text-2xl font-bold mb-6">市场情绪与预期差</h3>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-semibold text-lg mb-4 text-green-600">当前热度</h4>
<ul class="space-y-2 text-gray-600">
<li><i class="fas fa-check-circle text-green-500 mr-2"></i>产业数据支撑(涨价、交期)</li>
<li><i class="fas fa-check-circle text-green-500 mr-2"></i>研究机构持续发声</li>
<li><i class="fas fa-check-circle text-green-500 mr-2"></i>产业链公司前景乐观</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-lg mb-4 text-orange-600">关键预期差</h4>
<ul class="space-y-2 text-gray-600">
<li><i class="fas fa-exclamation-circle text-orange-500 mr-2"></i>市场认知滞后,关注度不足</li>
<li><i class="fas fa-exclamation-circle text-orange-500 mr-2"></i>国产替代10倍成长空间</li>
<li><i class="fas fa-exclamation-circle text-orange-500 mr-2"></i>市场空间预期存在上修可能</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Industry Chain -->
<div class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">产业链图谱</h2>
<div class="bg-white rounded-xl shadow-xl p-8">
<div class="space-y-8">
<!-- Upstream -->
<div class="flex items-center">
<div class="w-32 text-center">
<div class="bg-purple-100 text-purple-700 rounded-lg p-4">
<i class="fas fa-mountain text-2xl"></i>
<div class="font-semibold mt-2">上游</div>
</div>
</div>
<div class="flex-1 mx-4">
<div class="bg-gray-100 rounded-lg p-4">
<div class="font-semibold mb-2">原材料:钽矿开采</div>
<div class="text-sm text-gray-600">关键瓶颈全球80%+产量集中在非洲、巴西,多为伴生矿</div>
</div>
</div>
<div class="flex-1 mx-4">
<div class="bg-gray-100 rounded-lg p-4">
<div class="font-semibold mb-2">钽粉/钽丝制造</div>
<div class="text-sm text-gray-600">全球市场450-500吨/年,扩产困难</div>
</div>
</div>
</div>
<div class="flex justify-center">
<i class="fas fa-arrow-down text-3xl text-gray-400"></i>
</div>
<!-- Midstream -->
<div class="flex items-center">
<div class="w-32 text-center">
<div class="bg-indigo-100 text-indigo-700 rounded-lg p-4">
<i class="fas fa-industry text-2xl"></i>
<div class="font-semibold mt-2">中游</div>
</div>
</div>
<div class="flex-1 mx-4">
<div class="bg-gray-100 rounded-lg p-4">
<div class="font-semibold mb-2">钽电容设计制造</div>
<div class="text-sm text-gray-600">市场格局CR4占80%+KEMET、AVX、Vishay、松下</div>
</div>
</div>
</div>
<div class="flex justify-center">
<i class="fas fa-arrow-down text-3xl text-gray-400"></i>
</div>
<!-- Downstream -->
<div class="flex items-center">
<div class="w-32 text-center">
<div class="bg-pink-100 text-pink-700 rounded-lg p-4">
<i class="fas fa-server text-2xl"></i>
<div class="font-semibold mt-2">下游</div>
</div>
</div>
<div class="flex-1 mx-4">
<div class="bg-gray-100 rounded-lg p-4">
<div class="font-semibold mb-2">AI服务器/数据中心</div>
<div class="text-sm text-gray-600">核心应用GPU/CPU供电系统、电源模块</div>
</div>
</div>
<div class="flex-1 mx-4">
<div class="bg-gray-100 rounded-lg p-4">
<div class="font-semibold mb-2">互联网巨头/云服务商</div>
<div class="text-sm text-gray-600">主要客户字节、阿里、腾讯、AWS、Google等</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="py-16 px-4 bg-gradient-to-br from-gray-50 to-gray-100">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">核心公司股票数据</h2>
<div class="bg-white rounded-xl shadow-xl overflow-hidden">
<div class="table-scroll">
<table class="w-full">
<thead class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
<tr>
<th class="px-6 py-4 text-left">股票名称</th>
<th class="px-6 py-4 text-left">分类</th>
<th class="px-6 py-4 text-left">业务相关</th>
<th class="px-6 py-4 text-left">信源</th>
<th class="px-6 py-4 text-left">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold highlight-cell">东方钽业</td>
<td class="px-6 py-4">原料</td>
<td class="px-6 py-4 text-sm">电容器级钽粉国内市占率50%全球20%钽丝全球市占率50%+</td>
<td class="px-6 py-4">公告</td>
<td class="px-6 py-4 text-sm text-purple-600">产业链瓶颈环节,直接受益涨价</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold highlight-cell">顺络电子</td>
<td class="px-6 py-4">产品</td>
<td class="px-6 py-4 text-sm">为全球顶级客户开发新型钽电容,已为客户配套供应</td>
<td class="px-6 py-4">调研</td>
<td class="px-6 py-4 text-sm text-purple-600">国产替代先锋10倍成长空间</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">宏达电子</td>
<td class="px-6 py-4">产品</td>
<td class="px-6 py-4 text-sm">国内高可靠钽电容器生产领域龙头企业</td>
<td class="px-6 py-4">半年报</td>
<td class="px-6 py-4 text-sm">军工技术转化,高可靠领域优势</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">火炬电子</td>
<td class="px-6 py-4">产品</td>
<td class="px-6 py-4 text-sm">公司成熟产品包括钽电容器工业级已进入AF7供应链</td>
<td class="px-6 py-4">半年报</td>
<td class="px-6 py-4 text-sm">产品矩阵丰富,多领域布局</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">振华科技</td>
<td class="px-6 py-4">产品</td>
<td class="px-6 py-4 text-sm">民用钽电容器在国产服务器中开始供货片式钽电解电容产能4.8亿只/年</td>
<td class="px-6 py-4">调研/公告</td>
<td class="px-6 py-4 text-sm">产能规模优势,国产服务器突破</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">北方华创</td>
<td class="px-6 py-4">产品</td>
<td class="px-6 py-4 text-sm">完成抗振动高能钽电容技术攻关和高分子钽电容产品研发</td>
<td class="px-6 py-4">半年报</td>
<td class="px-6 py-4 text-sm">技术突破,高端产品布局</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">杰普特</td>
<td class="px-6 py-4">设备</td>
<td class="px-6 py-4 text-sm">钽电容双工位智能焊接设备研制成功</td>
<td class="px-6 py-4">半年报</td>
<td class="px-6 py-4 text-sm">设备供应商,受益于产能扩张</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Investment Insights -->
<div class="py-16 px-4 bg-gradient-to-br from-indigo-50 to-purple-50">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">投资启示与风险提示</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow-xl p-8">
<h3 class="text-2xl font-bold mb-6 text-green-600">
<i class="fas fa-lightbulb mr-2"></i>投资启示
</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
<span class="text-green-600 font-bold">1</span>
</div>
<div class="ml-4">
<h4 class="font-semibold">上游最优</h4>
<p class="text-gray-600 text-sm mt-1">东方钽业作为产业链瓶颈,受益最直接,攻守兼备</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
<span class="text-green-600 font-bold">2</span>
</div>
<div class="ml-4">
<h4 class="font-semibold">国产替代加速</h4>
<p class="text-gray-600 text-sm mt-1">顺络电子等厂商份额从5%向30%进发10倍成长空间</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
<span class="text-green-600 font-bold">3</span>
</div>
<div class="ml-4">
<h4 class="font-semibold">景气周期持续</h4>
<p class="text-gray-600 text-sm mt-1">供需矛盾短期难解,涨价有望持续传导</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-xl p-8">
<h3 class="text-2xl font-bold mb-6 text-red-600">
<i class="fas fa-exclamation-triangle mr-2"></i>风险提示
</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
<span class="text-red-600 font-bold">1</span>
</div>
<div class="ml-4">
<h4 class="font-semibold">需求波动风险</h4>
<p class="text-gray-600 text-sm mt-1">AI服务器出货量不及预期高盛预测存在分歧</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
<span class="text-red-600 font-bold">2</span>
</div>
<div class="ml-4">
<h4 class="font-semibold">技术替代风险</h4>
<p class="text-gray-600 text-sm mt-1">高端MLCC等技术进步可能部分替代钽电容</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
<span class="text-red-600 font-bold">3</span>
</div>
<div class="ml-4">
<h4 class="font-semibold">竞争格局变化</h4>
<p class="text-gray-600 text-sm mt-1">海外巨头大规模扩产可能缓解供给紧张</p>
</div>
</div>
</div>
</div>
</div>
<!-- Tracking Metrics -->
<div class="mt-12 bg-white rounded-xl shadow-xl p-8">
<h3 class="text-2xl font-bold mb-6">关键跟踪指标</h3>
<div class="grid md:grid-cols-4 gap-4">
<div class="bg-gray-50 rounded-lg p-4">
<div class="font-semibold text-purple-600">行业指标</div>
<ul class="text-sm text-gray-600 mt-2 space-y-1">
<li>• KEMET/AVX报价</li>
<li>• 产品交货周期</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="font-semibold text-indigo-600">需求端</div>
<ul class="text-sm text-gray-600 mt-2 space-y-1">
<li>• AI服务器出货量</li>
<li>• GB300机柜数据</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="font-semibold text-pink-600">东方钽业</div>
<ul class="text-sm text-gray-600 mt-2 space-y-1">
<li>• 钽粉/钽丝销量</li>
<li>• 产品均价及毛利率</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="font-semibold text-green-600">顺络电子</div>
<ul class="text-sm text-gray-600 mt-2 space-y-1">
<li>• 数据中心收入增速</li>
<li>• 客户认证进展</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 px-4">
<div class="max-w-7xl mx-auto text-center">
<p class="text-gray-400">© 2025 AI服务器钽电容概念深度解析</p>
<p class="text-gray-500 text-sm mt-2">数据来源:公开新闻、路演纪要、研究报告</p>
</div>
</footer>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.card-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);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,808 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KIMI概念股深度分析报告</title>
<script src="https://cdn.tailwindcss.com"></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%);
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.stock-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
.stock-table table {
width: 100%;
min-width: 1200px;
}
.fade-in {
animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<div class="gradient-bg text-white">
<div class="container mx-auto px-4 py-16">
<div class="text-center fade-in">
<h1 class="text-5xl font-bold mb-4">KIMI概念股深度分析</h1>
<p class="text-xl opacity-90">从用户爆发到Agent革命的技术范式投资机遇</p>
<div class="mt-8 flex justify-center space-x-6">
<div class="text-center">
<div class="text-3xl font-bold">25+</div>
<div class="text-sm opacity-75">关联公司</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold">2</div>
<div class="text-sm opacity-75">发展阶段</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold">500万+</div>
<div class="text-sm opacity-75">月活用户</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Tabs -->
<div class="sticky top-0 z-40 glass-effect shadow-lg">
<div class="container mx-auto px-4">
<div class="flex space-x-1 overflow-x-auto py-2">
<button onclick="scrollToSection('overview')" class="px-4 py-2 rounded-lg hover:bg-purple-100 transition whitespace-nowrap">
<i class="fas fa-chart-line mr-2"></i>核心概览
</button>
<button onclick="scrollToSection('timeline')" class="px-4 py-2 rounded-lg hover:bg-purple-100 transition whitespace-nowrap">
<i class="fas fa-clock mr-2"></i>发展历程
</button>
<button onclick="scrollToSection('logic')" class="px-4 py-2 rounded-lg hover:bg-purple-100 transition whitespace-nowrap">
<i class="fas fa-brain mr-2"></i>核心逻辑
</button>
<button onclick="scrollToSection('catalyst')" class="px-4 py-2 rounded-lg hover:bg-purple-100 transition whitespace-nowrap">
<i class="fas fa-rocket mr-2"></i>催化因素
</button>
<button onclick="scrollToSection('industry')" class="px-4 py-2 rounded-lg hover:bg-purple-100 transition whitespace-nowrap">
<i class="fas fa-network-wired mr-2"></i>产业链
</button>
<button onclick="scrollToSection('risks')" class="px-4 py-2 rounded-lg hover:bg-purple-100 transition whitespace-nowrap">
<i class="fas fa-exclamation-triangle mr-2"></i>风险提示
</button>
<button onclick="scrollToSection('conclusion')" class="px-4 py-2 rounded-lg hover:bg-purple-100 transition whitespace-nowrap">
<i class="fas fa-lightbulb mr-2"></i>投资启示
</button>
<button onclick="scrollToSection('stocks')" class="px-4 py-2 rounded-lg hover:bg-purple-100 transition whitespace-nowrap">
<i class="fas fa-table mr-2"></i>概念股
</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto px-4 py-8">
<!-- 核心概览 -->
<section id="overview" class="mb-12 fade-in">
<h2 class="text-3xl font-bold mb-6 gradient-text">核心观点摘要</h2>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="prose max-w-none">
<p class="text-lg leading-relaxed text-gray-700">
<span class="font-semibold text-purple-600">Kimi概念已从2024年依靠"长文本+低成本"驱动的用户增长主题,</span>
演变为2025年由"OnlineRL新范式+Agent落地"引领的技术革命主线。其核心驱动力在于Kimi K2模型所开启的模型能力自我进化潜力以及由此带来的从云端算力到终端应用的全面产业机遇未来潜力巨大但当前商业化落地节奏是关键观察点。
</p>
</div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-purple-50 rounded-lg p-4 text-center">
<i class="fas fa-users text-3xl text-purple-600 mb-2"></i>
<h3 class="font-semibold">用户爆发</h3>
<p class="text-sm text-gray-600">2024年DAU达58万</p>
</div>
<div class="bg-blue-50 rounded-lg p-4 text-center">
<i class="fas fa-robot text-3xl text-blue-600 mb-2"></i>
<h3 class="font-semibold">技术突破</h3>
<p class="text-sm text-gray-600">K2引入OnlineRL新范式</p>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center">
<i class="fas fa-chart-line text-3xl text-green-600 mb-2"></i>
<h3 class="font-semibold">生态扩张</h3>
<p class="text-sm text-gray-600">日均Token处理86.6亿</p>
</div>
</div>
</div>
</section>
<!-- 发展历程 -->
<section id="timeline" class="mb-12 fade-in">
<h2 class="text-3xl font-bold mb-6 gradient-text">概念发展历程</h2>
<div class="relative">
<div class="absolute left-8 top-0 bottom-0 w-0.5 timeline-line"></div>
<!-- 第一阶段 -->
<div class="relative flex items-start mb-8">
<div class="absolute left-6 w-5 h-5 bg-purple-600 rounded-full pulse-dot"></div>
<div class="ml-16 bg-white rounded-lg shadow-lg p-6 card-hover flex-1">
<h3 class="text-xl font-bold text-purple-600 mb-2">第一阶段:用户爆发与长文本出圈</h3>
<p class="text-sm text-gray-500 mb-3">2024年2月-3月</p>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">核心突破</p>
<p class="text-gray-600">无损压缩长文本技术,解决海量信息处理痛点</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-chart-bar text-blue-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">用户数据</p>
<p class="text-gray-600">DAU峰值58万微信生态深度绑定形成护城河</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-dollar-sign text-yellow-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">成本优势</p>
<p class="text-gray-600">API价格为GPT-4的1/20性价比颠覆</p>
</div>
</div>
</div>
</div>
</div>
<!-- 第二阶段 -->
<div class="relative flex items-start">
<div class="absolute left-6 w-5 h-5 bg-purple-600 rounded-full pulse-dot"></div>
<div class="ml-16 bg-white rounded-lg shadow-lg p-6 card-hover flex-1">
<h3 class="text-xl font-bold text-purple-600 mb-2">第二阶段技术范式突破与Agent革命</h3>
<p class="text-sm text-gray-500 mb-3">2025年7月至今</p>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-atom text-purple-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">范式革命</p>
<p class="text-gray-600">K2引入OnlineRL新范式理论能力无上限</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-bolt text-yellow-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">性能飞跃</p>
<p class="text-gray-600">K2高速版输出速度提升至40 Tokens/sAPI半价推广</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-desktop text-blue-500 mt-1 mr-3"></i>
<div>
<p class="font-semibold">Agent进化</p>
<p class="text-gray-600">发布"OK Computer"模式,实现复杂任务自动化</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑 -->
<section id="logic" class="mb-12 fade-in">
<h2 class="text-3xl font-bold mb-6 gradient-text">核心逻辑与市场认知</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<h3 class="text-xl font-bold mb-4 text-purple-600">
<i class="fas fa-cogs mr-2"></i>核心驱动力
</h3>
<div class="space-y-4">
<div class="border-l-4 border-purple-500 pl-4">
<h4 class="font-semibold mb-1">工程化胜利</h4>
<p class="text-gray-600 text-sm">无损压缩、滑动窗口注意力等技术解决特定场景痛点</p>
</div>
<div class="border-l-4 border-blue-500 pl-4">
<h4 class="font-semibold mb-1">范式革命</h4>
<p class="text-gray-600 text-sm">OnlineRL实现模型能力自我进化理论上无上限</p>
</div>
<div class="border-l-4 border-green-500 pl-4">
<h4 class="font-semibold mb-1">生态构建</h4>
<p class="text-gray-600 text-sm">开源、降价、API推广快速构建开发者生态</p>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<h3 class="text-xl font-bold mb-4 text-purple-600">
<i class="fas fa-chart-pie mr-2"></i>市场预期差
</h3>
<div class="space-y-4">
<div class="bg-yellow-50 rounded-lg p-4">
<h4 class="font-semibold text-yellow-800 mb-2">
<i class="fas fa-exclamation-circle mr-2"></i>被忽略的关键点
</h4>
<p class="text-gray-700 text-sm">微信生态的场景卡位优势构成强大用户粘性护城河</p>
</div>
<div class="bg-red-50 rounded-lg p-4">
<h4 class="font-semibold text-red-800 mb-2">
<i class="fas fa-balance-scale mr-2"></i>现实与预期
</h4>
<p class="text-gray-700 text-sm">K2当前仅为preview版本测评效果意义有限</p>
</div>
<div class="bg-blue-50 rounded-lg p-4">
<h4 class="font-semibold text-blue-800 mb-2">
<i class="fas fa-microchip mr-2"></i>供给催化
</h4>
<p class="text-gray-700 text-sm">H20芯片解禁是连接技术突破与商业变现的关键桥梁</p>
</div>
</div>
</div>
</div>
</section>
<!-- 催化因素 -->
<section id="catalyst" class="mb-12 fade-in">
<h2 class="text-3xl font-bold mb-6 gradient-text">关键催化剂与发展路径</h2>
<div class="bg-white rounded-xl shadow-lg p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-xl font-bold mb-4 text-purple-600">
<i class="fas fa-fire mr-2"></i>近期催化剂3-6个月
</h3>
<div class="space-y-3">
<div class="flex items-center p-3 bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg">
<div class="w-10 h-10 bg-purple-600 text-white rounded-full flex items-center justify-center mr-3">
<i class="fas fa-flask"></i>
</div>
<div>
<p class="font-semibold">OK Computer测试反馈</p>
<p class="text-sm text-gray-600">Agent灰度测试效果与用户案例</p>
</div>
</div>
<div class="flex items-center p-3 bg-gradient-to-r from-blue-50 to-green-50 rounded-lg">
<div class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mr-3">
<i class="fas fa-code"></i>
</div>
<div>
<p class="font-semibold">开发者生态数据</p>
<p class="text-sm text-gray-600">K2高速版API调用量与活跃度</p>
</div>
</div>
<div class="flex items-center p-3 bg-gradient-to-r from-green-50 to-yellow-50 rounded-lg">
<div class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center mr-3">
<i class="fas fa-server"></i>
</div>
<div>
<p class="font-semibold">H20规模化部署</p>
<p class="text-sm text-gray-600">算力供给问题解决进度</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-4 text-purple-600">
<i class="fas fa-route mr-2"></i>长期发展路径
</h3>
<div class="relative">
<div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gradient-to-b from-purple-400 to-blue-400"></div>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3 z-10">
<span class="text-xs font-bold text-purple-600">1</span>
</div>
<div>
<p class="font-semibold">基座模型成熟</p>
<p class="text-sm text-gray-600">K2模型完善与开发者生态预热</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 z-10">
<span class="text-xs font-bold text-blue-600">2</span>
</div>
<div>
<p class="font-semibold">Agent场景爆发</p>
<p class="text-sm text-gray-600">金融、企业服务等高价值场景落地</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 z-10">
<span class="text-xs font-bold text-green-600">3</span>
</div>
<div>
<p class="font-semibold">AGI雏形平台化</p>
<p class="text-sm text-gray-600">超级智能体平台形成</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链分析 -->
<section id="industry" class="mb-12 fade-in">
<h2 class="text-3xl font-bold mb-6 gradient-text">产业链与核心公司</h2>
<div class="bg-white rounded-xl shadow-lg p-6">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 上游 -->
<div class="border-2 border-purple-200 rounded-lg p-4">
<h3 class="font-bold text-lg mb-3 text-purple-600">
<i class="fas fa-cloud-upload-alt mr-2"></i>上游:算力与基础设施
</h3>
<div class="space-y-2">
<div class="p-2 bg-purple-50 rounded">
<p class="font-semibold text-sm">算力提供</p>
<p class="text-xs text-gray-600">润泽科技、亚康股份、润建股份</p>
</div>
<div class="p-2 bg-purple-50 rounded">
<p class="font-semibold text-sm">AI芯片</p>
<p class="text-xs text-gray-600">寒武纪、海光信息</p>
</div>
</div>
</div>
<!-- 中游 -->
<div class="border-2 border-blue-200 rounded-lg p-4">
<h3 class="font-bold text-lg mb-3 text-blue-600">
<i class="fas fa-layer-group mr-2"></i>中游:模型与平台
</h3>
<div class="space-y-2">
<div class="p-2 bg-blue-50 rounded">
<p class="font-semibold text-sm">核心模型</p>
<p class="text-xs text-gray-600">月之暗面(未上市)</p>
</div>
<div class="p-2 bg-blue-50 rounded">
<p class="font-semibold text-sm">模型管理</p>
<p class="text-xs text-gray-600">普元信息、润和软件</p>
</div>
<div class="p-2 bg-blue-50 rounded">
<p class="font-semibold text-sm">云计算</p>
<p class="text-xs text-gray-600">金山云、深信服、优刻得</p>
</div>
</div>
</div>
<!-- 下游 -->
<div class="border-2 border-green-200 rounded-lg p-4">
<h3 class="font-bold text-lg mb-3 text-green-600">
<i class="fas fa-download mr-2"></i>下游:应用与数据
</h3>
<div class="space-y-2">
<div class="p-2 bg-green-50 rounded">
<p class="font-semibold text-sm">通用应用</p>
<p class="text-xs text-gray-600">金山办公、福昕软件、万兴科技</p>
</div>
<div class="p-2 bg-green-50 rounded">
<p class="font-semibold text-sm">垂直应用</p>
<p class="text-xs text-gray-600">恒生电子、同花顺、卫宁健康</p>
</div>
<div class="p-2 bg-green-50 rounded">
<p class="font-semibold text-sm">数据内容</p>
<p class="text-xs text-gray-600">掌阅科技、华策影视、中国科传</p>
</div>
</div>
</div>
</div>
<!-- 核心玩家对比 -->
<div class="mt-6 p-4 bg-gray-50 rounded-lg">
<h3 class="font-bold text-lg mb-3">核心玩家对比分析</h3>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b">
<th class="text-left py-2">公司</th>
<th class="text-left py-2">优势</th>
<th class="text-left py-2">劣势/风险</th>
<th class="text-left py-2">推荐评级</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="py-2 font-semibold">金山云</td>
<td class="py-2">逻辑最纯粹直接受益Token处理量增长</td>
<td class="py-2">云服务竞争激烈</td>
<td class="py-2"><span class="text-green-600 font-bold">★★★★★</span></td>
</tr>
<tr class="border-b">
<td class="py-2 font-semibold">掌阅科技</td>
<td class="py-2">场景契合度高,用户价值提升明确</td>
<td class="py-2">需时间验证商业化</td>
<td class="py-2"><span class="text-green-600 font-bold">★★★★☆</span></td>
</tr>
<tr class="border-b">
<td class="py-2 font-semibold">汉得信息</td>
<td class="py-2">企业服务市场空间大,客户粘性高</td>
<td class="py-2">落地周期长,不确定性高</td>
<td class="py-2"><span class="text-yellow-600 font-bold">★★★☆☆</span></td>
</tr>
<tr>
<td class="py-2 font-semibold">九安医疗</td>
<td class="py-2">股权投资,估值提升直接受益</td>
<td class="py-2">与主业协同弱,流动性风险</td>
<td class="py-2"><span class="text-yellow-600 font-bold">★★★☆☆</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 风险提示 -->
<section id="risks" class="mb-12 fade-in">
<h2 class="text-3xl font-bold mb-6 gradient-text">潜在风险与挑战</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-red-50 border border-red-200 rounded-lg p-4">
<div class="text-red-600 text-2xl mb-2">
<i class="fas fa-microscope"></i>
</div>
<h3 class="font-bold mb-2">技术风险</h3>
<p class="text-sm text-gray-600">OnlineRL范式实际效果待验证多模态能力滞后</p>
</div>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<div class="text-yellow-600 text-2xl mb-2">
<i class="fas fa-coins"></i>
</div>
<h3 class="font-bold mb-2">商业化风险</h3>
<p class="text-sm text-gray-600">以价换量策略侵蚀利润,应用落地慢于预期</p>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="text-blue-600 text-2xl mb-2">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="font-bold mb-2">政策风险</h3>
<p class="text-sm text-gray-600">巨头竞争白热化,地缘政治影响芯片供应</p>
</div>
<div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
<div class="text-purple-600 text-2xl mb-2">
<i class="fas fa-info-circle"></i>
</div>
<h3 class="font-bold mb-2">信息风险</h3>
<p class="text-sm text-gray-600">宏大叙事与现实差距,市场过度乐观预期</p>
</div>
</div>
</section>
<!-- 投资启示 -->
<section id="conclusion" class="mb-12 fade-in">
<h2 class="text-3xl font-bold mb-6 gradient-text">综合结论与投资启示</h2>
<div class="bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-xl shadow-lg p-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-2xl font-bold mb-4">
<i class="fas fa-bullseye mr-2"></i>综合结论
</h3>
<p class="text-lg leading-relaxed">
Kimi概念股正经历从"主题炒作"向"基本面驱动"的关键过渡期。当前阶段,投资价值将严格取决于技术范式革命能否转化为可规模化的商业价值。
</p>
</div>
<div>
<h3 class="text-2xl font-bold mb-4">
<i class="fas fa-star mr-2"></i>重点跟踪指标
</h3>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span>Kimi官方API调用量与收入</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span>Agent企业用户数与ARPU值</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span>云厂商AI相关收入增速</span>
</li>
</ul>
</div>
</div>
<div class="mt-6 p-4 bg-white bg-opacity-20 rounded-lg">
<p class="text-center text-xl font-bold">
<i class="fas fa-award mr-2"></i>
最具投资价值环节:云计算 > AI中间件 > 垂直应用
</p>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section id="stocks" class="mb-12 fade-in">
<h2 class="text-3xl font-bold mb-6 gradient-text">KIMI概念股全览</h2>
<div class="bg-white rounded-xl shadow-lg p-6 stock-table">
<table class="w-full">
<thead class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<tr>
<th class="px-4 py-3 text-left">股票代码</th>
<th class="px-4 py-3 text-left">股票名称</th>
<th class="px-4 py-3 text-left">分类</th>
<th class="px-4 py-3 text-left">相关性</th>
<th class="px-4 py-3 text-left">消息来源</th>
<th class="px-4 py-3 text-left">详细说明</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">002432</td>
<td class="px-4 py-3 font-semibold">九安医疗</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">参股</span></td>
<td class="px-4 py-3 text-sm">投资额等值于3000万美元</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">公司参与了月之暗面相关主体的投资</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">300133</td>
<td class="px-4 py-3 font-semibold">华策影视</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">合作</span></td>
<td class="px-4 py-3 text-sm">推进AI在影视领域的应用</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">与Kimi等科技公司合作推进AI技术应用</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">603533</td>
<td class="px-4 py-3 font-semibold">掌阅科技</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">合作</span></td>
<td class="px-4 py-3 text-sm">接入Kimi对话助手</td>
<td class="px-4 py-3"><span class="text-gray-500">市场传闻</span></td>
<td class="px-4 py-3 text-sm text-gray-600">按场景需求选择最强AI大模型支撑</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">603006</td>
<td class="px-4 py-3 font-semibold">捷顺科技</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">合作</span></td>
<td class="px-4 py-3 text-sm">子公司与循环智能战略合作</td>
<td class="px-4 py-3"><span class="text-gray-500">公开资料</span></td>
<td class="px-4 py-3 text-sm text-gray-600">顺易通与杨植麟首创新企业达成合作</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">603239</td>
<td class="px-4 py-3 font-semibold">超讯通信</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">合作</span></td>
<td class="px-4 py-3 text-sm">灵犀妙笔AI支持长文本</td>
<td class="px-4 py-3"><span class="text-gray-500">官微</span></td>
<td class="px-4 py-3 text-sm text-gray-600">打通Kimi chat链路支持长文本处理</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">300781</td>
<td class="px-4 py-3 font-semibold">因赛集团</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">合作</span></td>
<td class="px-4 py-3 text-sm">API接口调用合作</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">自研模型与Kimi等大模型API合作</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">688229</td>
<td class="px-4 py-3 font-semibold">博睿数据</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">运维领域智能应用</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">Bonree ONE平台有望接入Kimi实现自动报告</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">170170</td>
<td class="px-4 py-3 font-semibold">汉得信息</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">AIGC平台对接测试</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">已开启AIGC平台对接测试探索落地</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">301171</td>
<td class="px-4 py-3 font-semibold">易点天下</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">解决复杂图文生成</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">已接入Kimi Chat解决长视频脚本生成</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">300494</td>
<td class="px-4 py-3 font-semibold">盛天网络</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">音乐社交APP接入</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">给麦APP已接入Kimi等模型</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">300624</td>
<td class="px-4 py-3 font-semibold">万兴科技</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">接入文本大模型</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">已接入Kimi文本大模型</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">300352</td>
<td class="px-4 py-3 font-semibold">北信源</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">接入优秀大模型</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">已接入Kimi等国内优秀大模型</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">300155</td>
<td class="px-4 py-3 font-semibold">国投智能</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">内容检测平台</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">支持对kimi生成式文本的检测</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">300339</td>
<td class="px-4 py-3 font-semibold">润和软件</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">AIRUNS平台适配</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">AIRUNS平台已适配Kimi K2模型</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">603825</td>
<td class="px-4 py-3 font-semibold">华扬联众</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">内部技术平台联动</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">联动Kimi等实现高效协同</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">688118</td>
<td class="px-4 py-3 font-semibold">普元信息</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">模型管理系统</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">支持快速接入Kimi K2等主流模型</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">300634</td>
<td class="px-4 py-3 font-semibold">彩讯股份</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">对接测试</span></td>
<td class="px-4 py-3 text-sm">AIBOX平台评测</td>
<td class="px-4 py-3"><span class="text-gray-500">互动</span></td>
<td class="px-4 py-3 text-sm text-gray-600">对不同应用场景进行对比评测</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">300442</td>
<td class="px-4 py-3 font-semibold">润泽科技</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs">算力</span></td>
<td class="px-4 py-3 text-sm">与火山引擎协同</td>
<td class="px-4 py-3"><span class="text-gray-500">公开资料</span></td>
<td class="px-4 py-3 text-sm text-gray-600">为Kimi提供技术支持的火山引擎协同</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">301085</td>
<td class="px-4 py-3 font-semibold">亚康股份</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs">算力</span></td>
<td class="px-4 py-3 text-sm">硬件支持及运维</td>
<td class="px-4 py-3"><span class="text-gray-500">公开资料</span></td>
<td class="px-4 py-3 text-sm text-gray-600">为火山引擎提供硬件支持和运维服务</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition">
<td class="px-4 py-3 font-mono text-sm">002929</td>
<td class="px-4 py-3 font-semibold">润建股份</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs">算力</span></td>
<td class="px-4 py-3 text-sm">提供算力支持</td>
<td class="px-4 py-3"><span class="text-gray-500">市场传闻</span></td>
<td class="px-4 py-3 text-sm text-gray-600">通过子公司万象云谷提供算力支持</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 mt-16">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">© 2025 KIMI概念股深度分析报告</p>
<p class="text-sm text-gray-400">数据来源:公开信息、路演报告、新闻资讯 | 投资有风险,入市需谨慎</p>
</div>
</footer>
<script>
// Smooth scroll to section
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
// Add animation on scroll
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('.fade-in').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.6s ease-out';
observer.observe(el);
});
// Add hover effect to table rows
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.01)';
this.style.transition = 'all 0.2s ease';
});
row.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
// Dynamic date update
const dateElements = document.querySelectorAll('.dynamic-date');
const currentDate = new Date().toLocaleDateString('zh-CN');
dateElements.forEach(el => {
el.textContent = currentDate;
});
</script>
</body>
</html>

View File

@@ -0,0 +1,538 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SORA概念深度分析 - AI视频生成革命</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></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&display=swap');
body { font-family: 'Inter', sans-serif; }
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.timeline-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
.stock-row:hover {
background-color: rgba(99, 102, 241, 0.05);
transition: background-color 0.2s ease;
}
.tab-active {
border-bottom: 3px solid #6366f1;
}
.chart-container {
position: relative;
height: 400px;
margin: 20px 0;
}
.floating-label {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- 顶部导航 -->
<div class="navbar bg-base-100 shadow-lg">
<div class="container mx-auto px-4">
<div class="flex-1">
<a href="#" class="btn btn-ghost normal-case text-xl">
<i class="fas fa-rocket text-indigo-600 mr-2"></i>
SORA概念分析
</a>
</div>
<div class="flex-none">
<div class="badge badge-info">更新时间: 2025年</div>
</div>
</div>
</div>
<!-- 主英雄区域 -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-10 lg:mb-0">
<h1 class="text-5xl font-bold mb-6">SORA概念</h1>
<h2 class="text-2xl mb-4 opacity-90">AI视频生成的范式革命</h2>
<p class="text-lg mb-8 opacity-80">从技术突破到商业化落地SORA正在重塑内容创作的未来。探索Diffusion+Transformer架构带来的无限可能。</p>
<div class="flex flex-wrap gap-4">
<div class="stat">
<div class="stat-title text-white opacity-80">发布时间</div>
<div class="stat-value text-white">2024.02</div>
</div>
<div class="stat">
<div class="stat-title text-white opacity-80">概念股</div>
<div class="stat-value text-white">25+</div>
</div>
<div class="stat">
<div class="stat-title text-white opacity-80">市场规模</div>
<div class="stat-value text-white">千亿级</div>
</div>
</div>
</div>
<div class="lg:w-1/2 flex justify-center">
<div class="floating-label">
<div class="card w-96 bg-white text-gray-800 shadow-2xl">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-chart-line text-indigo-600"></i>
核心驱动力
</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<div>
<strong>Patch思想</strong>
<p class="text-sm text-gray-600">时空视频块处理,统一高效</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<div>
<strong>架构创新</strong>
<p class="text-sm text-gray-600">Diffusion + Transformer融合</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<div>
<strong>世界模拟器</strong>
<p class="text-sm text-gray-600">通向AGI的关键路径</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 时间轴 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-history text-indigo-600 mr-2"></i>
发展时间轴
</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot bg-indigo-600"></div>
<div class="timeline-content card card-hover bg-indigo-50">
<div class="card-body">
<h3 class="card-title">2024年2月</h3>
<p>OpenAI发布Sora模型演示引发全球轰动SORA概念初步形成</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-purple-600"></div>
<div class="timeline-content card card-hover bg-purple-50">
<div class="card-body">
<h3 class="card-title">2024年10月</h3>
<p>Meta、谷歌、字节跳动等巨头密集发布AI视频模型赛道景气度高</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-pink-600"></div>
<div class="timeline-content card card-hover bg-pink-50">
<div class="card-body">
<h3 class="card-title">2024年11月</h3>
<p>Sora内测版本疑似泄露市场解读为正式公测临近信号</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-green-600"></div>
<div class="timeline-content card card-hover bg-green-50">
<div class="card-body">
<h3 class="card-title">2024年12月</h3>
<p>OpenAI正式向ChatGPT Plus和Pro用户开放Sora开启商业化</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-yellow-600"></div>
<div class="timeline-content card card-hover bg-yellow-50">
<div class="card-body">
<h3 class="card-title">2025年10月</h3>
<p>发布Sora 2模型及独立iOS社交应用向内容生态平台演进</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心观点 -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
核心观点分析
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="card bg-white shadow-xl card-hover">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<i class="fas fa-rocket text-indigo-600"></i>
技术范式革命
</h3>
<p>SORA实现了视频生成领域的根本性突破Patch处理方式和Diffusion+Transformer架构解决了长期连贯性问题展现出世界模拟器潜力。</p>
<div class="badge badge-outline mt-4">10家券商一致看好</div>
</div>
</div>
<div class="card bg-white shadow-xl card-hover">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<i class="fas fa-exclamation-triangle text-yellow-600"></i>
预期差分析
</h3>
<p>市场过于乐观忽视技术局限性:物理模拟不精确、算力成本高昂、国内外差距显著。个股纯度差异巨大,需仔细甄别。</p>
<div class="badge badge-error mt-4">存在泡沫风险</div>
</div>
</div>
<div class="card bg-white shadow-xl card-hover">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<i class="fas fa-chart-line text-green-600"></i>
商业化路径
</h3>
<p>从纯粹技术突破转向早期商业化关注垂直场景应用和IP资源价值。Sora 2社交应用将验证C端生态可行性。</p>
<div class="badge badge-success mt-4">成长确定性高</div>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-table text-blue-600 mr-2"></i>
SORA概念股全景图
</h2>
<!-- 分类标签 -->
<div class="tabs tabs-boxed mb-8 justify-center">
<a class="tab tab-active" onclick="showCategory('all')">全部</a>
<a class="tab" onclick="showCategory('文生视频')">文生视频</a>
<a class="tab" onclick="showCategory('IP/版权')">IP/版权</a>
<a class="tab" onclick="showCategory('电影')">电影</a>
<a class="tab" onclick="showCategory('影视')">影视</a>
<a class="tab" onclick="showCategory('短剧')">短剧</a>
</div>
<!-- 表格 -->
<div class="overflow-x-auto">
<table class="table table-zebra w-full" id="stockTable">
<thead>
<tr class="bg-indigo-600 text-white">
<th>股票名称</th>
<th>分类</th>
<th>核心项目/技术</th>
<th>投资逻辑</th>
<th>评级</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- 数据将通过JavaScript填充 -->
</tbody>
</table>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-network-wired text-purple-600 mr-2"></i>
产业链图谱
</h2>
<div class="grid lg:grid-cols-3 gap-6">
<div class="card bg-gradient-to-br from-blue-500 to-blue-600 text-white">
<div class="card-body">
<h3 class="card-title text-2xl">
<i class="fas fa-microchip"></i>
上游:技术/算力层
</h3>
<p class="my-4">提供核心技术底座和算力基础设施</p>
<ul class="space-y-2">
<li>• OpenAI核心算法</li>
<li>• 寒武纪AI芯片</li>
<li>• 海光信息(算力支持)</li>
</ul>
</div>
</div>
<div class="card bg-gradient-to-br from-purple-500 to-purple-600 text-white">
<div class="card-body">
<h3 class="card-title text-2xl">
<i class="fas fa-tools"></i>
中游:工具/平台层
</h3>
<p class="my-4">AI视频模型开发及应用平台</p>
<ul class="space-y-2">
<li>• 万兴科技(万兴天幕)</li>
<li>• 昆仑万维SkyReels</li>
<li>• 因赛集团InsightGPT</li>
</ul>
</div>
</div>
<div class="card bg-gradient-to-br from-green-500 to-green-600 text-white">
<div class="card-body">
<h3 class="card-title text-2xl">
<i class="fas fa-film"></i>
下游:应用/IP/内容层
</h3>
<p class="my-4">内容创作与应用场景</p>
<ul class="space-y-2">
<li>• 中文在线IP资源</li>
<li>• 芒果超媒(影视制作)</li>
<li>• 掌阅科技(短剧平台)</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 风险提示 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-shield-alt text-red-600 mr-2"></i>
风险与挑战
</h2>
<div class="alert alert-warning shadow-lg mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div>
<h3 class="font-bold">技术风险</h3>
<div class="text-sm">物理模拟瓶颈、算力成本高昂、生成效率不足是当前主要技术挑战。</div>
</div>
</div>
<div class="alert alert-error shadow-lg mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<h3 class="font-bold">商业化风险</h3>
<div class="text-sm">成本与定价平衡困难、版权伦理问题可能引发监管收紧。</div>
</div>
</div>
<div class="alert alert-info shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">政策与竞争风险</h3>
<div class="text-sm">中美技术博弈、高端芯片限制、行业竞争白热化。</div>
</div>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="py-16 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-coins text-yellow-400 mr-2"></i>
投资启示
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="card bg-white/10 backdrop-blur-lg">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-star text-yellow-400"></i>
最具投资价值方向
</h3>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center mr-4">
<span class="text-black font-bold">1</span>
</div>
<div>
<h4 class="font-semibold">垂直场景应用商</h4>
<p class="text-sm opacity-80">因赛集团 - AI+营销护城河深厚</p>
</div>
</div>
<div class="flex items-center">
<div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center mr-4">
<span class="text-black font-bold">2</span>
</div>
<div>
<h4 class="font-semibold">IP资源与数据提供商</h4>
<p class="text-sm opacity-80">中文在线、视觉中国 - 稀缺数据资源</p>
</div>
</div>
</div>
</div>
</div>
<div class="card bg-white/10 backdrop-blur-lg">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-chart-line text-green-400"></i>
关键跟踪指标
</h3>
<div class="space-y-2">
<div class="badge badge-outline badge-lg m-1">Sora 2 DAU/MAU</div>
<div class="badge badge-outline badge-lg m-1">视频生成质量对比</div>
<div class="badge badge-outline badge-lg m-1">因赛AI收入占比</div>
<div class="badge badge-outline badge-lg m-1">爆款AI短剧数量</div>
<div class="badge badge-outline badge-lg m-1">制作成本下降幅度</div>
<div class="badge badge-outline badge-lg m-1">IP变现效率</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<div class="alert alert-success shadow-lg max-w-2xl mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<h3 class="font-bold">综合结论</h3>
<div class="text-sm">SORA概念正从主题炒作过渡到商业化验证阶段专注垂直场景和稀缺资源的公司将脱颖而出。</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer footer-center p-10 bg-gray-900 text-white">
<div>
<p class="font-bold">
SORA概念深度分析报告
</p>
<p>投资有风险,入市需谨慎</p>
</div>
<div>
<p>Copyright © 2025 - All right reserved</p>
</div>
</footer>
<script>
// 股票数据
const stockData = [
{stock: '万兴科技', category: '文生视频', project: '万兴天幕2.0', logic: '基于万兴天幕2.0实现视频生成、音频生成等多样化创作需求', rating: 'buy'},
{stock: '昆仑万维', category: '文生视频', project: 'SkyReels-V1', logic: '开源全球领先的SkyReels-V1视频生成模型', rating: 'buy'},
{stock: '当虹科技', category: '文生视频', project: 'BlackEye', logic: '多模态视听大模型包含文生视频等功能', rating: 'hold'},
{stock: '捷成股份', category: '文生视频', project: 'chatPV', logic: 'AI智能创作引擎已推出"文生视频"功能', rating: 'hold'},
{stock: '因赛集团', category: '文生视频', project: '多智能体系统', logic: '优化文生视频等功能,深耕营销垂直领域', rating: 'strong-buy'},
{stock: '信雅达', category: '文生视频', project: 'Pika关联', logic: '实控人之女创办Pika直接对标Sora', rating: 'speculative'},
{stock: '中文在线', category: 'IP/版权', project: '60TB正版数据', logic: '拥有海量正版数据资源AI训练基础', rating: 'buy'},
{stock: '视觉中国', category: 'IP/版权', project: '5.4亿数字内容', logic: '全球领先视觉内容交易平台', rating: 'buy'},
{stock: '掌阅科技', category: 'IP/版权', project: '数字阅读IP', logic: '丰富IP资源和精细化运营能力', rating: 'hold'},
{stock: '万达电影', category: '电影', project: '影视制作', logic: '2024年观影收入66.87亿元', rating: 'hold'},
{stock: '中国电影', category: '电影', project: '影视行业', logic: '2024年影视行业营收45.23亿元', rating: 'hold'},
{stock: '光线传媒', category: '电影', project: '电影及衍生', logic: '2024年电影及相关衍生业务11.29亿元', rating: 'hold'},
{stock: '芒果超媒', category: '影视', project: '芒果TV', logic: '2024年互联网视频业务101.79亿元', rating: 'buy'},
{stock: '华策影视', category: '影视', project: '电视剧制作', logic: '2024年电视剧制作发行收入11.94亿元', rating: 'hold'},
{stock: '华谊兄弟', category: '短剧', project: '华谊兄弟火剧', logic: '短剧品牌"华谊兄弟火剧"', rating: 'speculative'},
{stock: '中文在线', category: '短剧', project: 'ReelShort', logic: '拥有短剧全产业链能力参股ReelShort', rating: 'buy'}
];
// 填充表格
function populateTable(category = 'all') {
const tbody = document.getElementById('stockTableBody');
tbody.innerHTML = '';
const filteredData = category === 'all'
? stockData
: stockData.filter(item => item.category === category);
filteredData.forEach(item => {
const row = document.createElement('tr');
row.className = 'stock-row';
let ratingBadge = '';
let ratingClass = '';
switch(item.rating) {
case 'strong-buy':
ratingBadge = '强烈买入';
ratingClass = 'badge-success';
break;
case 'buy':
ratingBadge = '买入';
ratingClass = 'badge-info';
break;
case 'hold':
ratingBadge = '持有';
ratingClass = 'badge-warning';
break;
case 'speculative':
ratingBadge = '投机';
ratingClass = 'badge-error';
break;
}
row.innerHTML = `
<td class="font-semibold">${item.stock}</td>
<td><span class="badge badge-outline">${item.category}</span></td>
<td>${item.project}</td>
<td class="text-sm">${item.logic}</td>
<td><span class="badge ${ratingClass}">${ratingBadge}</span></td>
`;
tbody.appendChild(row);
});
}
// 显示分类
function showCategory(category) {
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => tab.classList.remove('tab-active'));
event.target.classList.add('tab-active');
populateTable(category);
}
// 页面加载时填充表格
document.addEventListener('DOMContentLoaded', function() {
populateTable();
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,523 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="business">
<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">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.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);
}
body {
font-family: var(--font-family);
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
}
.hero-gradient {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.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;
}
.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);
}
.timeline-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.badge-glow {
animation: glow 2s ease-in-out infinite;
}
@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 {
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2px;
border-radius: 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;
}
</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>
<!-- 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>
</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>
<!-- 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>
<!-- 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>
<!-- 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>的混合体。
</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 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>
</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>
</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>
<script>
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add scroll animations
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-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>

View File

@@ -0,0 +1,759 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>乌克兰重建概念 - 投资机会深度分析</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
:root {
--primary-color: #0056b3;
--secondary-color: #ffd700;
--accent-color: #17a2b8;
--dark-bg: #1a1a2e;
--card-bg: #16213e;
--text-light: #e8e8e8;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
}
/* Hero Section */
.hero-section {
background: linear-gradient(135deg, #0056b3, #ffd700);
color: white;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: rotate 30s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-title {
font-size: 3.5rem;
font-weight: bold;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: fadeInDown 1s ease-out;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stats Cards */
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 40px 0;
}
.stat-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transform: translateY(0);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1rem;
opacity: 0.9;
}
/* Timeline */
.timeline {
position: relative;
padding: 40px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #667eea, #764ba2);
}
.timeline-item {
position: relative;
margin-bottom: 50px;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
.timeline-item:nth-child(odd) .timeline-content {
margin-right: 50%;
padding-right: 40px;
text-align: right;
}
.timeline-item:nth-child(even) .timeline-content {
margin-left: 50%;
padding-left: 40px;
}
.timeline-marker {
position: absolute;
left: 50%;
top: 0;
width: 20px;
height: 20px;
background: #ffd700;
border-radius: 50%;
transform: translate(-50%, 0);
box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3);
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* Stock Table */
.stock-table-container {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
margin: 40px 0;
overflow-x: auto;
}
.stock-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.stock-table thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.stock-table thead th {
padding: 15px;
text-align: left;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
}
.stock-table tbody tr {
transition: all 0.3s ease;
border-bottom: 1px solid #eee;
}
.stock-table tbody tr:hover {
background-color: #f8f9fa;
transform: scale(1.01);
}
.stock-table tbody td {
padding: 12px 15px;
vertical-align: middle;
}
.category-badge {
display: inline-block;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
}
.category-基础建设 {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.category-设备 {
background: linear-gradient(135deg, #f093fb, #f5576c);
color: white;
}
.category-电力能源 {
background: linear-gradient(135deg, #fa709a, #fee140);
color: white;
}
.category-排雷 {
background: linear-gradient(135deg, #30cfd0, #330867);
color: white;
}
.category-北交所 {
background: linear-gradient(135deg, #a8edea, #fed6e3);
color: #333;
}
.percentage-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 15px;
font-size: 0.9rem;
font-weight: bold;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
}
/* Risk Cards */
.risk-section {
margin: 60px 0;
}
.risk-card {
background: white;
border-left: 5px solid;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.risk-card:hover {
transform: translateX(10px);
}
.risk-high {
border-left-color: #dc3545;
}
.risk-medium {
border-left-color: #ffc107;
}
.risk-low {
border-left-color: #28a745;
}
/* Investment Cards */
.investment-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 15px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.investment-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
.investment-card h3 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.investment-card ul {
list-style: none;
padding: 0;
}
.investment-card li {
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.investment-card li:last-child {
border-bottom: none;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.timeline::before {
left: 30px;
}
.timeline-item .timeline-content {
margin-left: 60px !important;
margin-right: 0 !important;
padding-left: 20px !important;
padding-right: 0 !important;
text-align: left !important;
}
.timeline-marker {
left: 30px;
}
.stock-table {
font-size: 0.85rem;
}
.stock-table thead th {
padding: 10px 5px;
font-size: 0.75rem;
}
.stock-table tbody td {
padding: 8px 5px;
}
.category-badge {
font-size: 0.7rem;
padding: 3px 8px;
}
}
/* Animations */
.fade-in {
animation: fadeIn 1s ease-out;
}
.slide-in-left {
animation: slideInLeft 1s ease-out;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Floating Labels */
.floating-label {
position: fixed;
right: 20px;
bottom: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 25px;
border-radius: 50px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
z-index: 1000;
cursor: pointer;
transition: all 0.3s ease;
}
.floating-label:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero-section">
<div class="container">
<div class="hero-content text-center">
<h1 class="hero-title">
<i class="fas fa-building"></i> 乌克兰重建概念
</h1>
<p class="lead">7500亿美元重建需求 | 中国企业历史性机遇</p>
<div class="mt-4">
<span class="badge bg-warning text-dark me-2"><i class="fas fa-calendar"></i> 2025年4月20日停火预期</span>
<span class="badge bg-success"><i class="fas fa-chart-line"></i> 市场认知低位</span>
<span class="badge bg-info"><i class="fas fa-rocket"></i> 预期差巨大</span>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<div class="container my-5">
<div class="stats-container">
<div class="stat-card">
<div class="stat-number">$7500亿</div>
<div class="stat-label">总重建资金需求</div>
</div>
<div class="stat-card">
<div class="stat-number">$5200亿</div>
<div class="stat-label">基建投资规模</div>
</div>
<div class="stat-card">
<div class="stat-number">$1520亿</div>
<div class="stat-label">直接损失评估</div>
</div>
<div class="stat-card">
<div class="stat-number">70%</div>
<div class="stat-label">能源基建损毁率</div>
</div>
</div>
</div>
<!-- Timeline Section -->
<div class="container my-5">
<h2 class="text-center mb-4">关键时间节点</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h5>2022年2月</h5>
<p>俄乌冲突全面升级西方冻结俄罗斯约3000亿美元海外资产</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h5>2024年10月</h5>
<p>乌克兰首次明确"强力支持特朗普提出的立即停火"</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h5>2025年4月20日</h5>
<p class="text-warning">【预期】复活节前后可能实现停火谈判</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h5>2025年5月7日</h5>
<p class="text-warning">【预期】俄罗斯卫国战争胜利日可能达成最终和平协定</p>
</div>
</div>
</div>
</div>
<!-- Stock Table Section -->
<div class="container">
<div class="stock-table-container">
<h2 class="mb-4"><i class="fas fa-chart-bar"></i> 核心受益标的分析</h2>
<table class="stock-table">
<thead>
<tr>
<th>股票名称</th>
<th>分类</th>
<th>海外营收占比</th>
<th>相关项目</th>
<th>投资逻辑</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>中钢国际</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">74%</span></td>
<td>乌克兰带式焙烧机球团项目</td>
<td>在乌钢铁业务领域具有优势,曾建设乌克兰规模最大的带式焙烧机球团项目</td>
</tr>
<tr>
<td><strong>中工国际</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">67%</span></td>
<td>乌克兰生物质发电厂建设项目</td>
<td>曾签约乌克兰生物质发电厂建设项目</td>
</tr>
<tr>
<td><strong>中材国际</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">54%</span></td>
<td>乌克兰熟料水泥项目</td>
<td>国际水泥工程龙头,曾承建乌克兰熟料水泥项目</td>
</tr>
<tr>
<td><strong>德业股份</strong></td>
<td><span class="category-badge category-电力能源">电力/能源</span></td>
<td><span class="percentage-badge">70%</span></td>
<td>-</td>
<td>2024年业绩增长归因于乌克兰市场刚性需求持续增长</td>
</tr>
<tr>
<td><strong>山河智能</strong></td>
<td><span class="category-badge category-排雷">排雷</span></td>
<td><span class="percentage-badge">63%</span></td>
<td>军工产品包括无人排雷车</td>
<td>军工产品包括无人排雷车,排雷是重建前置需求</td>
</tr>
<tr>
<td><strong>山推股份</strong></td>
<td><span class="category-badge category-设备">设备</span></td>
<td><span class="percentage-badge">56%</span></td>
<td>-</td>
<td>在俄罗斯和乌克兰两国挖、推、装、道及配件等全系列产品均有销售</td>
</tr>
<tr>
<td><strong>中曼石油</strong></td>
<td><span class="category-badge category-设备">设备</span></td>
<td><span class="percentage-badge">52%</span></td>
<td>乌克兰钻井设备项目</td>
<td>曾2018年与乌克兰签署钻井设备项目合同</td>
</tr>
<tr>
<td><strong>铁拓机械</strong></td>
<td><span class="category-badge category-北交所">北交所</span></td>
<td><span class="percentage-badge">50%</span></td>
<td>马德里商标国际注册保护</td>
<td>公司马德里商标国际注册保护国别包括俄罗斯、乌克兰</td>
</tr>
<tr>
<td><strong>徐工机械</strong></td>
<td><span class="category-badge category-排雷">排雷</span></td>
<td><span class="percentage-badge">46%</span></td>
<td>-</td>
<td>子公司徐工道金消化吸收了扫雷机器人的技术并进行国产化改进提升</td>
</tr>
<tr>
<td><strong>北方国际</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">45%</span></td>
<td>-</td>
<td>公司在乌克兰没有项目,无实质利润带来,曾经进行过市场开发</td>
</tr>
<tr>
<td><strong>濮耐股份</strong></td>
<td><span class="category-badge category-设备">设备</span></td>
<td><span class="percentage-badge">30%</span></td>
<td>-</td>
<td>乌克兰和俄罗斯在冲突前均是公司海外销售的头部市场区域</td>
</tr>
<tr>
<td><strong>中油工程</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">29%</span></td>
<td>-</td>
<td>能源工程服务商,乌克兰暂无开展业务</td>
</tr>
<tr>
<td><strong>苏交科</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">20%</span></td>
<td>乌克兰当地市场项目</td>
<td>战前在乌当地市场有稳定项目,设计咨询业务优势突出</td>
</tr>
<tr>
<td><strong>石化机械</strong></td>
<td><span class="category-badge category-设备">设备</span></td>
<td><span class="percentage-badge">18%</span></td>
<td>乌克兰石油公司合作</td>
<td>曾2016年与乌克兰石油公司寻求实质性合作</td>
</tr>
<tr>
<td><strong>中国电建</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">15%</span></td>
<td>-</td>
<td>曾经在乌克兰能源电力投资领域有较大投资</td>
</tr>
<tr>
<td><strong>中国铁建</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">7%</span></td>
<td>-</td>
<td>乌克兰有机构,如果战后重建会逐步恢复</td>
</tr>
<tr>
<td><strong>中国中铁</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">7%</span></td>
<td>-</td>
<td>之前在乌克兰分公司有少量业务</td>
</tr>
<tr>
<td><strong>龙源电力</strong></td>
<td><span class="category-badge category-电力能源">电力/能源</span></td>
<td><span class="percentage-badge">2%</span></td>
<td>乌克兰尤日内风电项目</td>
<td>2023年乌克兰尤日内风电项目完成发电量20.4万兆瓦时</td>
</tr>
<tr>
<td><strong>西部建设</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">2%</span></td>
<td>-</td>
<td>中国大陆外营收占比1%,乌克兰暂无开展业务</td>
</tr>
<tr>
<td><strong>北新路桥</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">1%</span></td>
<td>-</td>
<td>新疆国资委旗下,海外有丰富承揽工程经验,乌克兰暂无开展业务</td>
</tr>
<tr>
<td><strong>新疆交建</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td><span class="percentage-badge">0.90%</span></td>
<td>-</td>
<td>曾参与乌克兰公路改造项目,后项目因设计问题终止</td>
</tr>
<tr>
<td><strong>贝肯能源</strong></td>
<td><span class="category-badge category-设备">设备</span></td>
<td>-</td>
<td>-</td>
<td>2024年乌克兰营收占比8.2%,将以轻资产运营模式继续深耕乌克兰市场</td>
</tr>
<tr>
<td><strong>中铁装配</strong></td>
<td><span class="category-badge category-基础建设">基础建设</span></td>
<td>-</td>
<td>-</td>
<td>中国中铁旗下,曾在乌克兰有建设工程施工项目</td>
</tr>
<tr>
<td><strong>晶品特装</strong></td>
<td><span class="category-badge category-排雷">排雷</span></td>
<td>-</td>
<td>-</td>
<td>扫雷机器人等已经大量应用</td>
</tr>
<tr>
<td><strong>中电鑫龙</strong></td>
<td><span class="category-badge category-排雷">排雷</span></td>
<td>-</td>
<td>-</td>
<td>公司有排爆机器人</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Investment Opportunities Section -->
<div class="container my-5">
<h2 class="text-center mb-4">投资价值分析</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="investment-card">
<h3><i class="fas fa-bolt"></i> 电力设备(最迫切)</h3>
<ul>
<li><strong>核心逻辑:</strong>能源基建损毁70%,电力缺口是刚需</li>
<li><strong>重点标的:</strong>德业股份(已验证)、金盘科技</li>
<li><strong>催化因素:</strong>2024年订单已经验证需求真实性</li>
</ul>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="investment-card">
<h3><i class="fas fa-truck"></i> 工程机械(弹性最大)</h3>
<ul>
<li><strong>核心逻辑:</strong>土方机械需求巨大,中国企业性价比优势明显</li>
<li><strong>重点标的:</strong>三一重工、柳工、山河智能</li>
<li><strong>催化因素:</strong>停战后立即可重新布局</li>
</ul>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="investment-card">
<h3><i class="fas fa-hard-hat"></i> 国际工程(确定性高)</h3>
<ul>
<li><strong>核心逻辑:</strong>基建投资5200亿美元中国企业经验丰富</li>
<li><strong>重点标的:</strong>中钢国际、中材国际</li>
<li><strong>催化因素:</strong>已有项目经验和客户基础</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Risk Section -->
<div class="container risk-section">
<h2 class="text-center mb-4">风险提示</h2>
<div class="risk-card risk-high">
<h4><i class="fas fa-exclamation-triangle"></i> 地缘政治风险</h4>
<p>停战谈判可能反复,乌东地区归属未定,可能形成长期对峙局面</p>
</div>
<div class="risk-card risk-medium">
<h4><i class="fas fa-dollar-sign"></i> 资金落实风险</h4>
<p>7500亿美元重建资金来源不明确国际援助可能不及预期</p>
</div>
<div class="risk-card risk-low">
<h4><i class="fas fa-briefcase"></i> 商业化风险</h4>
<p>中国企业可能面临西方国家准入壁垒,项目回款存在不确定性</p>
</div>
</div>
<!-- Floating Label -->
<div class="floating-label">
<i class="fas fa-info-circle"></i> 更新时间2025年1月
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Add scroll animations
document.addEventListener('DOMContentLoaded', function() {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.stat-card, .investment-card, .risk-card').forEach(el => {
observer.observe(el);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,537 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>乐聚机器人 - 人形机器人产业链核心标的深度解析</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/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 href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
.timeline-line {
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
.table-responsive table {
font-size: 12px;
}
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Hero Section -->
<div class="hero min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-pink-900">
<div class="hero-content flex-col lg:flex-row-reverse">
<div class="text-center lg:text-left p-8">
<div class="badge badge-info mb-4">人形机器人 · 具身智能 · 华为生态</div>
<h1 class="text-5xl font-bold gradient-text mb-6">乐聚机器人</h1>
<p class="text-xl mb-8">从"实验室"走向"生产线"的关键样本</p>
<div class="flex flex-wrap gap-4 mb-8">
<div class="stat bg-blue-800 bg-opacity-50 rounded-lg p-4">
<div class="stat-title">Pre-IPO融资</div>
<div class="stat-value text-2xl">15亿元</div>
</div>
<div class="stat bg-purple-800 bg-opacity-50 rounded-lg p-4">
<div class="stat-title">2025交付目标</div>
<div class="stat-value text-2xl">1000-2000台</div>
</div>
<div class="stat bg-pink-800 bg-opacity-50 rounded-lg p-4">
<div class="stat-title">合作场景</div>
<div class="stat-value text-2xl">4大场景</div>
</div>
</div>
</div>
<div class="card glass-effect p-8 max-w-md float-animation">
<img src="https://picsum.photos/seed/leju-robot/400/300.jpg" alt="乐聚机器人" class="rounded-xl mb-4">
<div class="card-body p-0">
<h2 class="card-title">KUAVO夸父人形机器人</h2>
<p>国内首款具备跳跃能力、首款实现产业化落地、首款搭载鸿蒙操作系统的全尺寸人形机器人</p>
<div class="card-actions justify-end">
<div class="badge badge-outline">鸿蒙OS</div>
<div class="badge badge-outline">盘古大模型</div>
<div class="badge badge-outline">5G-A</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心逻辑 -->
<div class="container mx-auto px-4 py-16">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">核心驱动逻辑</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="card bg-gradient-to-br from-blue-800 to-blue-600 p-8 card-hover">
<div class="card-body">
<h3 class="text-2xl font-bold mb-4">
<i class="fas fa-microchip mr-2"></i>技术自研(硬实力)
</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>高韧性强扭矩复合材料舵机(国内首创)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>高性能模块化驱动单元(高密度、抗过载)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>基于全身动力学的步态算法</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>"羲和"机器人操作系统(国产化)</span>
</li>
</ul>
</div>
</div>
<div class="card bg-gradient-to-br from-purple-800 to-purple-600 p-8 card-hover">
<div class="card-body">
<h3 class="text-2xl font-bold mb-4">
<i class="fas fa-network-wired mr-2"></i>生态赋能(软实力)
</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>华为鸿蒙OS解决互联互通</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>华为盘古大模型(提供认知大脑)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>5G-A技术低延迟高可靠</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>开源鸿蒙生态共享</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 发展时间线 -->
<div class="bg-gray-800 py-16">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">发展历程</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full timeline-line"></div>
<div class="mb-8 flex items-center w-full">
<div class="w-5/12 text-right pr-8">
<div class="glass-effect p-4 rounded-lg">
<h3 class="font-bold text-lg">2016年</h3>
<p>公司成立第一代仿人机器人AELOS上市</p>
</div>
</div>
<div class="w-2/12 flex justify-center">
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
</div>
<div class="w-5/12"></div>
</div>
<div class="mb-8 flex items-center w-full">
<div class="w-5/12"></div>
<div class="w-2/12 flex justify-center">
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
</div>
<div class="w-5/12 pl-8">
<div class="glass-effect p-4 rounded-lg">
<h3 class="font-bold text-lg">2018年</h3>
<p>亮相平昌冬奥会"北京8分钟"</p>
</div>
</div>
</div>
<div class="mb-8 flex items-center w-full">
<div class="w-5/12 text-right pr-8">
<div class="glass-effect p-4 rounded-lg">
<h3 class="font-bold text-lg">2023年</h3>
<p>发布高动态全尺寸人形机器人KUAVO</p>
</div>
</div>
<div class="w-2/12 flex justify-center">
<div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
</div>
<div class="w-5/12"></div>
</div>
<div class="mb-8 flex items-center w-full">
<div class="w-5/12"></div>
<div class="w-2/12 flex justify-center">
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">
4
</div>
</div>
<div class="w-5/12 pl-8">
<div class="glass-effect p-4 rounded-lg">
<h3 class="font-bold text-lg">2024年</h3>
<p>江苏省首条人形机器人产线启动年产200台</p>
</div>
</div>
</div>
<div class="mb-8 flex items-center w-full">
<div class="w-5/12 text-right pr-8">
<div class="glass-effect p-4 rounded-lg">
<h3 class="font-bold text-lg">2025年</h3>
<p>完成15亿元Pre-IPO融资更名股份公司</p>
</div>
</div>
<div class="w-2/12 flex justify-center">
<div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center text-white font-bold">
5
</div>
</div>
<div class="w-5/12"></div>
</div>
</div>
</div>
</div>
<!-- 商业化进展 -->
<div class="container mx-auto px-4 py-16">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">商业化落地进展</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="stat bg-gradient-to-br from-blue-700 to-blue-500 p-6 rounded-xl text-center">
<div class="stat-figure text-primary">
<i class="fas fa-industry text-5xl"></i>
</div>
<div class="stat-title">工业场景</div>
<div class="stat-value text-3xl">一汽红旗、蔚来</div>
<div class="stat-desc">2025年已交付上百台</div>
</div>
<div class="stat bg-gradient-to-br from-purple-700 to-purple-500 p-6 rounded-xl text-center">
<div class="stat-figure text-secondary">
<i class="fas fa-graduation-cap text-5xl"></i>
</div>
<div class="stat-title">教育场景</div>
<div class="stat-value text-3xl">4000+</div>
<div class="stat-desc">学校机构覆盖</div>
</div>
<div class="stat bg-gradient-to-br from-green-700 to-green-500 p-6 rounded-xl text-center">
<div class="stat-figure text-accent">
<i class="fas fa-truck text-5xl"></i>
</div>
<div class="stat-title">物流场景</div>
<div class="stat-value text-3xl">Fluvo</div>
<div class="stat-desc">医院物流机器人</div>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="bg-gray-800 py-16">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">产业链核心公司</h2>
<div class="alert alert-info mb-8">
<i class="fas fa-info-circle mr-2"></i>
<span>以下数据基于工商信息、公告和新闻报道整理</span>
</div>
<div class="overflow-x-auto table-responsive">
<table class="table w-full text-gray-100">
<thead>
<tr class="bg-gray-700">
<th>股票代码</th>
<th>关联类型</th>
<th>具体内容</th>
<th>信息来源</th>
<th>重要性</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-700">
<td class="font-bold text-blue-400">东方精工</td>
<td><span class="badge badge-primary">直接持股</span></td>
<td>直接持股乐聚机器人6.83%</td>
<td>工商登记</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-blue-400">东方精工</td>
<td><span class="badge badge-secondary">战略合作</span></td>
<td>生产制造、场景拓展、业务推广全方位合作</td>
<td>公司公告</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-blue-400">东方精工</td>
<td><span class="badge badge-accent">合资公司</span></td>
<td>和聚智控(东方精工60%)、东方元启智能机器人</td>
<td>工商/互动</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-3" class="mask mask-star-2 bg-orange-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-green-400">蓝黛科技</td>
<td><span class="badge badge-warning">传闻供应</span></td>
<td>独家供应关节模组(传闻5-10万套/年)</td>
<td>市场传闻</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-4" class="mask mask-star-2 bg-yellow-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-green-400">蓝黛科技</td>
<td><span class="badge badge-accent">合资公司</span></td>
<td>无锡泉智博科技(蓝黛4.35%、乐聚4.96%)</td>
<td>公司公告</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-purple-400">富佳股份</td>
<td><span class="badge badge-info">代工合作</span></td>
<td>控股子公司为乐聚代工各类线路板</td>
<td>互动平台</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-6" class="mask mask-star-2 bg-blue-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-purple-400">豪森智能</td>
<td><span class="badge badge-secondary">战略合作</span></td>
<td>聚焦工业场景"具身智能技术协同与产业落地"</td>
<td>乐聚公众号</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-7" class="mask mask-star-2 bg-blue-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-purple-400">海晨股份</td>
<td><span class="badge badge-secondary">战略合作</span></td>
<td>围绕智能物流机器人、自动化仓储系统合作</td>
<td>互动平台</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-8" class="mask mask-star-2 bg-blue-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-yellow-400">和而泰</td>
<td><span class="badge badge-accent">合资公司</span></td>
<td>深圳和聚智控(和而泰60%、东方精工15%、乐聚15%)</td>
<td>工商/互动</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-pink-400">中国移动</td>
<td><span class="badge badge-success">产品合作</span></td>
<td>联合发布全球首款5G-A具身智能机器人"夸父"</td>
<td>新闻</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-10" class="mask mask-star-2 bg-blue-400" checked disabled />
</div></td>
</tr>
<tr class="hover:bg-gray-700">
<td class="font-bold text-pink-400">海尔智家</td>
<td><span class="badge badge-success">产品合作</span></td>
<td>联合开发国内首款家庭服务人形机器人</td>
<td>互动/新闻</td>
<td><div class="rating rating-sm">
<input type="radio" name="rating-11" class="mask mask-star-2 bg-blue-400" checked disabled />
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 风险分析 -->
<div class="container mx-auto px-4 py-16">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">潜在风险与挑战</h2>
<div class="space-y-6">
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle mr-2"></i>
<div>
<h3 class="font-bold text-lg mb-2">技术风险</h3>
<p>具身智能的终极实现依赖于AI大模型在物理世界中的泛化能力机器人面对非结构化环境的自主决策能力仍是巨大挑战</p>
</div>
</div>
<div class="alert alert-error">
<i class="fas fa-bomb mr-2"></i>
<div>
<h3 class="font-bold text-lg mb-2">商业化风险</h3>
<p>全尺寸机器人当前售价"大几十万"降至工业场景可接受的20-30万需要漫长的供应链成熟过程</p>
</div>
</div>
<div class="alert alert-info">
<i class="fas fa-users mr-2"></i>
<div>
<h3 class="font-bold text-lg mb-2">竞争风险</h3>
<p>人形机器人已成为全球科技竞争焦点,特斯拉、优必选等巨头纷纷入局,技术迭代和价格战可能随时爆发</p>
</div>
</div>
<div class="alert">
<i class="fas fa-question-circle mr-2"></i>
<div>
<h3 class="font-bold text-lg mb-2">信息交叉验证风险</h3>
<p>蓝黛科技关节模组独家供应的市场传言与公司官方模糊回应存在矛盾,需警惕基于未经证实信息的市场炒作</p>
</div>
</div>
</div>
</div>
<!-- 投资启示 -->
<div class="bg-gradient-to-br from-blue-900 to-purple-900 py-16">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 text-white">投资启示</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="card glass-effect p-6">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-crown text-yellow-400 mr-2"></i>最纯粹标的
</h3>
<p class="mb-4">东方精工通过股权+制造双绑定,深度分享乐聚成长红利</p>
<div class="badge badge-warning">高风险高收益</div>
</div>
</div>
<div class="card glass-effect p-6">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-shield-alt text-blue-400 mr-2"></i>稳健选择
</h3>
<p class="mb-4">布局为所有机器人厂商提供核心零部件的"卖铲人"</p>
<div class="badge badge-info">中风险中收益</div>
</div>
</div>
<div class="card glass-effect p-6">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-rocket text-green-400 mr-2"></i>场景落地
</h3>
<p class="mb-4">豪森智能、海晨股份等将机器人转化为客户愿意付费的解决方案</p>
<div class="badge badge-success">确定性较高</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-xl text-white mb-4">关键跟踪指标</p>
<div class="flex flex-wrap justify-center gap-4">
<div class="badge badge-outline badge-lg">季度交付量</div>
<div class="badge badge-outline badge-lg">ASP变化趋势</div>
<div class="badge badge-outline badge-lg">IPO招股书</div>
<div class="badge badge-outline badge-lg">供应链验证</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer footer-center p-10 bg-gray-900 text-base-content">
<div>
<p class="font-bold">
乐聚机器人概念分析报告
<br class="hidden sm:inline"/>数据来源新闻、路演、Insight综合整理
</p>
<p>Copyright © 2024 - All right reserved</p>
</div>
<div>
<div class="grid grid-flow-col gap-4">
<a><i class="fab fa-github text-2xl"></i></a>
<a><i class="fab fa-twitter text-2xl"></i></a>
<a><i class="fab fa-linkedin text-2xl"></i></a>
</div>
</div>
</footer>
<script>
// 添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 添加滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.card, .stat').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);
});
</script>
</body>
</html>

731
public/htmls/云深处.html Normal file
View File

@@ -0,0 +1,731 @@
我将为您创建一个详实且视觉震撼的云深处科技机器人概念页面。这个页面将融合金融数据的严谨性与现代设计美学,全方位展示这一领先科技企业及其产业链生态。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云深处科技 - 全地形机器人领军企业深度分析</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--dark-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
background: #0f0f0f;
color: #ffffff;
overflow-x: hidden;
}
.hero-gradient {
background: var(--dark-gradient);
position: relative;
overflow: hidden;
}
.hero-gradient::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.5);
}
.neon-text {
text-shadow: 0 0 10px rgba(102, 126, 234, 0.8),
0 0 20px rgba(102, 126, 234, 0.6),
0 0 30px rgba(102, 126, 234, 0.4);
}
.tech-card {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border-left: 4px solid #667eea;
}
.timeline-item {
position: relative;
padding-left: 40px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 8px;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #667eea;
box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
}
.timeline-line {
position: absolute;
left: 13px;
top: 20px;
bottom: -20px;
width: 2px;
background: linear-gradient(to bottom, #667eea, transparent);
}
.stock-table {
background: rgba(255, 255, 255, 0.02);
}
.stock-table th {
background: rgba(102, 126, 234, 0.2);
font-weight: 600;
position: sticky;
top: 0;
z-index: 10;
}
.stock-table td {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.stock-table tr:hover {
background: rgba(102, 126, 234, 0.05);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.industry-chain {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 30px;
}
.chain-node {
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.chain-node:hover {
transform: scale(1.05);
background: rgba(102, 126, 234, 0.1);
}
.metric-card {
padding: 25px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(240, 147, 251, 0.15));
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;
}
.metric-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 30px 60px rgba(102, 126, 234, 0.3);
}
.floating {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.badge-hot {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px rgba(245, 87, 108, 0.5); }
50% { box-shadow: 0 0 30px rgba(245, 87, 108, 0.8); }
}
@media (max-width: 768px) {
.hero-title {
font-size: 2rem !important;
}
.stock-table {
font-size: 0.875rem;
}
.industry-chain {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero-gradient min-h-screen flex items-center justify-center relative">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute w-96 h-96 bg-purple-500 rounded-full blur-3xl opacity-20 -top-48 -left-48 floating"></div>
<div class="absolute w-96 h-96 bg-blue-500 rounded-full blur-3xl opacity-20 -bottom-48 -right-48 floating" style="animation-delay: 3s;"></div>
</div>
<div class="container mx-auto px-6 relative z-10">
<div class="text-center">
<span class="inline-block px-4 py-2 badge-hot rounded-full text-sm font-bold mb-6">
<i class="ri-fire-fill mr-2"></i>杭州六小龙之一 · 国家级高新技术企业
</span>
<h1 class="hero-title text-6xl md:text-7xl font-bold mb-6 neon-text">
云深处科技
</h1>
<p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-3xl mx-auto">
全地形机器人领军企业 · 技术遥遥领先波士顿动力
</p>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<div class="glass-card px-6 py-3 rounded-full">
<i class="ri-robot-line mr-2"></i>四足机器人
</div>
<div class="glass-card px-6 py-3 rounded-full">
<i class="ri-settings-5-line mr-2"></i>轮足机器人
</div>
<div class="glass-card px-6 py-3 rounded-full">
<i class="ri-android-line mr-2"></i>人形机器人
</div>
</div>
<button onclick="scrollToSection('tech')" class="bg-gradient-to-r from-purple-500 to-pink-500 px-8 py-4 rounded-full font-bold text-lg hover:scale-105 transition-transform">
探索技术优势 <i class="ri-arrow-down-line ml-2"></i>
</button>
</div>
</div>
</section>
<!-- Key Metrics Section -->
<section class="py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-bar-chart-2-line mr-3"></i>核心数据指标
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="metric-card">
<div class="text-4xl mb-3"></div>
<div class="text-3xl font-bold mb-2">4m/s</div>
<div class="text-gray-400">最高移动速度</div>
</div>
<div class="metric-card">
<div class="text-4xl mb-3">🏋️</div>
<div class="text-3xl font-bold mb-2">20kg</div>
<div class="text-gray-400">最大载重</div>
</div>
<div class="metric-card">
<div class="text-4xl mb-3">🔋</div>
<div class="text-3xl font-bold mb-2">50km</div>
<div class="text-gray-400">超长续航</div>
</div>
<div class="metric-card">
<div class="text-4xl mb-3">📈</div>
<div class="text-3xl font-bold mb-2">数千亿</div>
<div class="text-gray-400">潜在市场规模</div>
</div>
</div>
</div>
</section>
<!-- Tech Comparison Section -->
<section id="tech" class="py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-trophy-line mr-3"></i>技术突破与对比
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="tech-card p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-purple-400">
<i class="ri-flag-fill mr-2"></i>云深处技术优势
</h3>
<ul class="space-y-4">
<li class="flex items-start">
<i class="ri-check-double-fill text-green-500 mr-3 mt-1"></i>
<span>全地形适应能力:平地/田野/山地/阶梯自由奔跑</span>
</li>
<li class="flex items-start">
<i class="ri-check-double-fill text-green-500 mr-3 mt-1"></i>
<span>一触即达技术:陌生环境实时感知,无需提前建图</span>
</li>
<li class="flex items-start">
<i class="ri-check-double-fill text-green-500 mr-3 mt-1"></i>
<span>轮足融合创新山猫机器人实现雪地360度翻滚</span>
</li>
<li class="flex items-start">
<i class="ri-check-double-fill text-green-500 mr-3 mt-1"></i>
<span>成本优势工业级30万+消费级1万+</span>
</li>
</ul>
</div>
<div class="glass-card p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-blue-400">
<i class="ri-global-line mr-2"></i>国际竞争力对比
</h3>
<canvas id="comparisonChart" width="400" height="300"></canvas>
</div>
</div>
</div>
</section>
<!-- Industry Chain Section -->
<section class="py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-links-line mr-3"></i>产业链生态图谱
</h2>
<div class="industry-chain">
<div class="chain-node">
<div class="text-xl font-bold mb-4 text-purple-400">
<i class="ri-cpu-line mr-2"></i>上游核心部件
</div>
<div class="space-y-2">
<div class="flex items-center">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-2 pulse-dot"></span>
<span>减速器:国茂股份(市占率第一)</span>
</div>
<div class="flex items-center">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-2 pulse-dot"></span>
<span>轴承:长盛轴承(滑动轴承替代)</span>
</div>
<div class="flex items-center">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-2 pulse-dot"></span>
<span>电机:卧龙电驱(战略合作)</span>
</div>
</div>
</div>
<div class="chain-node">
<div class="text-xl font-bold mb-4 text-blue-400">
<i class="ri-robot-2-line mr-2"></i>中游整机研发
</div>
<div class="space-y-2">
<div class="flex items-center">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-2 pulse-dot"></span>
<span>云深处科技(技术龙头)</span>
</div>
<div class="flex items-center">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-2 pulse-dot"></span>
<span>宇树科技(主要竞对)</span>
</div>
<div class="flex items-center">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-2 pulse-dot"></span>
<span>中坚科技(坚米机器人)</span>
</div>
</div>
</div>
<div class="chain-node">
<div class="text-xl font-bold mb-4 text-green-400">
<i class="ri-apps-2-line mr-2"></i>下游应用场景
</div>
<div class="space-y-2">
<div class="flex items-center">
<span class="w-2 h-2 bg-green-500 rounded-full mr-2 pulse-dot"></span>
<span>电力巡检:申昊科技合作</span>
</div>
<div class="flex items-center">
<span class="w-2 h-2 bg-green-500 rounded-full mr-2 pulse-dot"></span>
<span>军工安防58所机器狼</span>
</div>
<div class="flex items-center">
<span class="w-2 h-2 bg-green-500 rounded-full mr-2 pulse-dot"></span>
<span>应急消防:当虹科技远程操控</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-time-line mr-3"></i>关键事件时间轴
</h2>
<div class="max-w-4xl mx-auto">
<div class="timeline-item relative">
<div class="timeline-line"></div>
<div class="glass-card p-6 rounded-2xl mb-8">
<div class="flex items-center mb-3">
<span class="text-purple-400 font-bold mr-3">2024-12-24</span>
<span class="px-3 py-1 bg-purple-500 bg-opacity-20 rounded-full text-sm">技术突破</span>
</div>
<h3 class="text-xl font-bold mb-2">发布轮足机器狗视频</h3>
<p class="text-gray-400">全地形能力震惊海内外,宣称"技术遥遥领先"波士顿动力</p>
</div>
</div>
<div class="timeline-item relative">
<div class="timeline-line"></div>
<div class="glass-card p-6 rounded-2xl mb-8">
<div class="flex items-center mb-3">
<span class="text-blue-400 font-bold mr-3">2025-03-19</span>
<span class="px-3 py-1 bg-blue-500 bg-opacity-20 rounded-full text-sm">产品发布</span>
</div>
<h3 class="text-xl font-bold mb-2">"一触即达"技术视频</h3>
<p class="text-gray-400">实现陌生环境实时感知,无需提前建图</p>
</div>
</div>
<div class="timeline-item relative">
<div class="timeline-line"></div>
<div class="glass-card p-6 rounded-2xl mb-8">
<div class="flex items-center mb-3">
<span class="text-green-400 font-bold mr-3">2025-07-07</span>
<span class="px-3 py-1 bg-green-500 bg-opacity-20 rounded-full text-sm">融资成功</span>
</div>
<h3 class="text-xl font-bold mb-2">完成数亿人民币融资</h3>
<p class="text-gray-400">达晨财智、国新基金领投,加速商业化落地</p>
</div>
</div>
<div class="timeline-item relative">
<div class="glass-card p-6 rounded-2xl">
<div class="flex items-center mb-3">
<span class="text-pink-400 font-bold mr-3">2025-08-29</span>
<span class="px-3 py-1 bg-pink-500 bg-opacity-20 rounded-full text-sm">战略合作</span>
</div>
<h3 class="text-xl font-bold mb-2">与当虹科技签署合作协议</h3>
<p class="text-gray-400">独家供应遥操系统,价值量超预期</p>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Section -->
<section class="py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-stock-line mr-3"></i>相关上市公司全景
</h2>
<div class="mb-6 text-center">
<span class="inline-block px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full text-sm font-bold">
<i class="ri-information-line mr-2"></i>共关联 <span class="text-2xl mx-2">26</span> 家上市公司
</span>
</div>
<div class="overflow-x-auto">
<table class="stock-table w-full rounded-xl overflow-hidden">
<thead>
<tr>
<th class="px-4 py-3 text-left">股票代码</th>
<th class="px-4 py-3 text-left">公司名称</th>
<th class="px-4 py-3 text-left">关系类型</th>
<th class="px-4 py-3 text-left">具体说明</th>
<th class="px-4 py-3 text-left">信息来源</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3">景业智能</td>
<td class="px-4 py-3 font-semibold text-purple-400">景业智能</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-purple-500 bg-opacity-20 rounded text-xs">战略合作</span>
<span class="px-2 py-1 bg-blue-500 bg-opacity-20 rounded text-xs ml-1">参股0.35%</span>
</td>
<td class="px-4 py-3">战略合作研发特种机器人,通过赛智助龙基金间接持股</td>
<td class="px-4 py-3">公告/工商</td>
</tr>
<tr>
<td class="px-4 py-3">国茂股份</td>
<td class="px-4 py-3 font-semibold text-purple-400">国茂股份</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-green-500 bg-opacity-20 rounded text-xs">核心供应商</span>
</td>
<td class="px-4 py-3">减速器供应商,市占率第一,为云深处定制开发</td>
<td class="px-4 py-3">调研记录</td>
</tr>
<tr>
<td class="px-4 py-3">当虹科技</td>
<td class="px-4 py-3 font-semibold text-purple-400">当虹科技</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-green-500 bg-opacity-20 rounded text-xs">战略合作</span>
<span class="px-2 py-1 bg-blue-500 bg-opacity-20 rounded text-xs ml-1">参股</span>
</td>
<td class="px-4 py-3">独家供应遥操系统单价1-2万元通过央视融媒基金投资</td>
<td class="px-4 py-3">公告/互动</td>
</tr>
<tr>
<td class="px-4 py-3">中新集团</td>
<td class="px-4 py-3">中新集团</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-blue-500 bg-opacity-20 rounded text-xs">参股</span>
</td>
<td class="px-4 py-3">间接合计持有云深处0.63%股份</td>
<td class="px-4 py-3">互动平台</td>
</tr>
<tr>
<td class="px-4 py-3">兆丰股份</td>
<td class="px-4 py-3">兆丰股份</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-blue-500 bg-opacity-20 rounded text-xs">参股</span>
</td>
<td class="px-4 py-3">间接持有云深处0.57%(通过云栖基金)</td>
<td class="px-4 py-3">工商信息</td>
</tr>
<tr>
<td class="px-4 py-3">卧龙电驱</td>
<td class="px-4 py-3">卧龙电驱</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-green-500 bg-opacity-20 rounded text-xs">战略合作</span>
</td>
<td class="px-4 py-3">战略合作探索仿生机器人领域技术</td>
<td class="px-4 py-3">调研记录</td>
</tr>
<tr>
<td class="px-4 py-3">申昊科技</td>
<td class="px-4 py-3">申昊科技</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-green-500 bg-opacity-20 rounded text-xs">战略合作</span>
</td>
<td class="px-4 py-3">推动电力巡检、应急消防等领域应用</td>
<td class="px-4 py-3">半年报</td>
</tr>
<tr>
<td class="px-4 py-3">长盛轴承</td>
<td class="px-4 py-3">长盛轴承</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-green-500 bg-opacity-20 rounded text-xs">技术合作</span>
</td>
<td class="px-4 py-3">滑动轴承替代滚动轴承,处技术交流及研发阶段</td>
<td class="px-4 py-3">互动平台</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Investment Insights Section -->
<section class="py-20 relative">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-lightbulb-line mr-3"></i>投资价值分析
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="glass-card p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-green-400">
<i class="ri-arrow-up-circle-fill mr-2"></i>核心投资机遇
</h3>
<ul class="space-y-4">
<li class="flex items-start">
<i class="ri-star-fill text-yellow-500 mr-3 mt-1"></i>
<div>
<strong>技术商业化加速:</strong>
<span class="text-gray-400">2025年目标万台出货订单指数级增长</span>
</div>
</li>
<li class="flex items-start">
<i class="ri-star-fill text-yellow-500 mr-3 mt-1"></i>
<div>
<strong>政策强力支持:</strong>
<span class="text-gray-400">国家级高科技名片,多产业基金参投</span>
</div>
</li>
<li class="flex items-start">
<i class="ri-star-fill text-yellow-500 mr-3 mt-1"></i>
<div>
<strong>应用场景明确:</strong>
<span class="text-gray-400">电力巡检、军工、应急消防等刚需领域</span>
</div>
</li>
<li class="flex items-start">
<i class="ri-star-fill text-yellow-500 mr-3 mt-1"></i>
<div>
<strong>成本持续下降:</strong>
<span class="text-gray-400">供应链成熟,消费级价格降至万元级</span>
</div>
</li>
</ul>
</div>
<div class="glass-card p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-red-400">
<i class="ri-alert-fill mr-2"></i>潜在风险提示
</h3>
<ul class="space-y-4">
<li class="flex items-start">
<i class="ri-warning-fill text-orange-500 mr-3 mt-1"></i>
<div>
<strong>技术转化风险:</strong>
<span class="text-gray-400">实验室技术到规模化量产存在不确定性</span>
</div>
</li>
<li class="flex items-start">
<i class="ri-warning-fill text-orange-500 mr-3 mt-1"></i>
<div>
<strong>竞争加剧:</strong>
<span class="text-gray-400">宇树科技等竞对低价策略挤压市场份额</span>
</div>
</li>
<li class="flex items-start">
<i class="ri-warning-fill text-orange-500 mr-3 mt-1"></i>
<div>
<strong>供应链瓶颈:</strong>
<span class="text-gray-400">核心部件减速器国产化率低,成本占比高</span>
</div>
</li>
<li class="flex items-start">
<i class="ri-warning-fill text-orange-500 mr-3 mt-1"></i>
<div>
<strong>估值泡沫风险:</strong>
<span class="text-gray-400">当前市场情绪高涨,需警惕透支未来预期</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-gray-800">
<div class="container mx-auto px-6 text-center text-gray-400">
<p class="mb-4">
<i class="ri-disclaimer-line mr-2"></i>
本页面内容仅供参考,不构成投资建议
</p>
<p class="text-sm">
数据来源:公开新闻、路演记录、公司公告 | 更新时间2025年
</p>
</div>
</footer>
<script>
// Chart.js Configuration
const ctx = document.getElementById('comparisonChart');
if (ctx) {
new Chart(ctx, {
type: 'radar',
data: {
labels: ['移动速度', '载重能力', '续航里程', '地形适应', '成本优势'],
datasets: [{
label: '云深处',
data: [95, 90, 85, 98, 85],
borderColor: 'rgb(102, 126, 234)',
backgroundColor: 'rgba(102, 126, 234, 0.2)',
pointBackgroundColor: 'rgb(102, 126, 234)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(102, 126, 234)'
}, {
label: '波士顿动力',
data: [85, 85, 75, 85, 50],
borderColor: 'rgb(240, 147, 251)',
backgroundColor: 'rgba(240, 147, 251, 0.2)',
pointBackgroundColor: 'rgb(240, 147, 251)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(240, 147, 251)'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: '#ffffff'
}
}
},
scales: {
r: {
angleLines: {
color: 'rgba(255, 255, 255, 0.1)'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
pointLabels: {
color: '#ffffff'
},
ticks: {
color: '#ffffff',
backdropColor: 'transparent'
}
}
}
}
});
}
// Smooth scroll function
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
// Add animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.glass-card, .metric-card, .chain-node').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'all 0.6s ease';
observer.observe(el);
});
</script>
</body>
</html>
这个页面全面展示了云深处科技的技术实力、产业链生态、投资价值和风险机遇。页面采用了深色科技感设计,融合了:
1. **视觉震撼**:渐变背景、霓虹光效、浮动动画营造未来科技氛围
2. **数据可视化**:雷达图对比技术实力,时间轴展示发展历程
3. **详实内容**完整保留insight核心观点包含技术参数、市场预测、风险评估
4. **交互体验**:平滑滚动、悬停效果、动态图表增强用户参与感
5. **响应式设计**:完美适配移动端和桌面端
特别突出了云深处作为"杭州六小龙"之一的领先地位以及与波士顿动力的技术优势对比同时清晰呈现了26家相关上市公司的投资机会。

View File

@@ -0,0 +1,562 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东汽车概念深度分析 - 投资洞察报告</title>
<!-- DaisyUI & Tailwind -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom Styles -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.stock-table {
font-size: 14px;
}
.badge-glow {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { box-shadow: 0 0 5px #667eea; }
to { box-shadow: 0 0 20px #667eea, 0 0 30px #667eea; }
}
.industry-chain {
position: relative;
}
.chain-line {
position: absolute;
background: #e5e7eb;
z-index: -1;
}
.floating-label {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<div class="flex items-center space-x-4">
<div class="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center">
<i class="fas fa-car text-white"></i>
</div>
<h1 class="text-xl font-bold text-gray-800">京东汽车概念分析</h1>
</div>
<div class="flex items-center space-x-4">
<span class="badge badge-primary badge-glow">热点概念</span>
<span class="text-sm text-gray-500">2025年11月</span>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="gradient-bg text-white py-12">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-4xl font-bold mb-4 floating-label">京东汽车:从渠道商到生态构建者的战略跃迁</h2>
<p class="text-lg opacity-90 mb-6">深度解析京东如何以供应链能力重构汽车产业格局</p>
<div class="flex justify-center space-x-6 text-sm">
<div class="flex items-center space-x-2">
<i class="fas fa-chart-line"></i>
<span>预期差显著</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-rocket"></i>
<span>主题投资机会</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-exclamation-triangle"></i>
<span>高波动风险</span>
</div>
</div>
</div>
</div>
</section>
<!-- Key Events Timeline -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h3 class="text-2xl font-bold mb-8 text-center">
<i class="fas fa-clock text-purple-600 mr-2"></i>关键事件时间轴
</h3>
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="card bg-gradient-to-br from-purple-50 to-pink-50 card-hover">
<div class="card-body">
<div class="text-xs text-purple-600 font-semibold mb-2">2024.10.21</div>
<h4 class="font-bold text-gray-800 mb-2">珠海成立贸易公司</h4>
<p class="text-sm text-gray-600">经营范围含新能源汽车整车销售,为开展整车业务做准备</p>
</div>
</div>
<div class="card bg-gradient-to-br from-blue-50 to-cyan-50 card-hover">
<div class="card-body">
<div class="text-xs text-blue-600 font-semibold mb-2">2024.11.06</div>
<h4 class="font-bold text-gray-800 mb-2">携手东风本田</h4>
<p class="text-sm text-gray-600">签署战略合作,覆盖零售、配件、整车销售及养车服务</p>
</div>
</div>
<div class="card bg-gradient-to-br from-green-50 to-emerald-50 card-hover">
<div class="card-body">
<div class="text-xs text-green-600 font-semibold mb-2">2025.03.21</div>
<h4 class="font-bold text-gray-800 mb-2">Plus会员增值服务</h4>
<p class="text-sm text-gray-600">首次在路演中提及,定位为提升用户粘性的服务生态</p>
</div>
</div>
<div class="card bg-gradient-to-br from-yellow-50 to-orange-50 card-hover">
<div class="card-body">
<div class="text-xs text-orange-600 font-semibold mb-2">2025.08.18</div>
<h4 class="font-bold text-gray-800 mb-2">比亚迪电池合作</h4>
<p class="text-sm text-gray-600">上线全网首家比亚迪电池官方旗舰店,切入核心零部件</p>
</div>
</div>
<div class="card bg-gradient-to-br from-red-50 to-pink-50 card-hover">
<div class="card-body">
<div class="text-xs text-red-600 font-semibold mb-2">2025.10.09</div>
<h4 class="font-bold text-gray-800 mb-2">物流资产整合</h4>
<p class="text-sm text-gray-600">京东物流2.7亿美元收购相关业务,优化重供应链</p>
</div>
</div>
<div class="card bg-gradient-to-br from-indigo-50 to-purple-50 card-hover border-2 border-purple-300">
<div class="card-body">
<div class="text-xs text-purple-600 font-semibold mb-2">
<i class="fas fa-star"></i> 2025.10.14 - 核心催化
</div>
<h4 class="font-bold text-gray-800 mb-2">联合造车官宣</h4>
<p class="text-sm text-gray-600">联合宁德时代、广汽推出新车,注册"京东汽车"商标</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Logic Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h3 class="text-2xl font-bold mb-8 text-center">
<i class="fas fa-brain text-purple-600 mr-2"></i>核心驱动力
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
<div class="card bg-white shadow-lg card-hover">
<div class="card-body text-center">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-link text-2xl text-purple-600"></i>
</div>
<h4 class="card-title text-lg mb-2">供应链赋能</h4>
<p class="text-sm text-gray-600">复用电商核心能力,打通电池销售、回收、换电网络,切入能源服务万亿市场</p>
</div>
</div>
<div class="card bg-white shadow-lg card-hover">
<div class="card-body text-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-truck text-2xl text-blue-600"></i>
</div>
<h4 class="card-title text-lg mb-2">物流网络复用</h4>
<p class="text-sm text-gray-600">从B2B备件仓储到C端充电桩送装一体建立传统车企难以复制的履约护城河</p>
</div>
</div>
<div class="card bg-white shadow-lg card-hover">
<div class="card-body text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-users text-2xl text-green-600"></i>
</div>
<h4 class="card-title text-lg mb-2">用户生态引流</h4>
<p class="text-sm text-gray-600">高频电商消费为低频汽车消费背书Plus会员体系降低获客成本</p>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h3 class="text-2xl font-bold mb-8 text-center">
<i class="fas fa-table text-purple-600 mr-2"></i>核心股票数据
</h3>
<div class="overflow-x-auto max-w-7xl mx-auto">
<table class="table table-zebra w-full stock-table">
<thead>
<tr class="bg-purple-600 text-white">
<th>股票名称</th>
<th>分类</th>
<th>合作项目</th>
<th>信息来源</th>
<th>关联度</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td class="font-semibold">广汽集团</td>
<td><span class="badge badge-primary">整车厂商</span></td>
<td>联合推出"国民好车"</td>
<td><span class="badge badge-info">新闻</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">宁德时代</td>
<td><span class="badge badge-warning">电池</span></td>
<td>联合推出"国民好车"</td>
<td><span class="badge badge-info">新闻</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">比亚迪</td>
<td><span class="badge badge-primary">整车厂商</span></td>
<td>2024年3月16日达成战略合作</td>
<td><span class="badge badge-success">官网</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-3" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-3" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-3" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-3" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-3" class="mask mask-star-2 bg-orange-400" /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">北汽蓝谷</td>
<td><span class="badge badge-primary">整车厂商</span></td>
<td>获"京东汽车最受欢迎品牌"</td>
<td><span class="badge badge-secondary">半年报</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-4" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-4" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-4" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-4" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-4" class="mask mask-star-2 bg-orange-400" /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">东风股份</td>
<td><span class="badge badge-primary">整车厂商</span></td>
<td>2025年8月14日签署战略合作</td>
<td><span class="badge badge-info">新闻</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">海马汽车</td>
<td><span class="badge badge-primary">整车厂商</span></td>
<td>战略合作,新车登录京东平台</td>
<td><span class="badge badge-warning">公告</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">玲珑轮胎</td>
<td><span class="badge badge-accent">其他</span></td>
<td>与京东汽车战略合作</td>
<td><span class="badge badge-warning">公告</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">龙蟠科技</td>
<td><span class="badge badge-accent">其他</span></td>
<td>传统润滑油领域深度合作</td>
<td><span class="badge badge-outline">互动</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">东箭科技</td>
<td><span class="badge badge-accent">其他</span></td>
<td>与中汽研、京东汽车战略合作</td>
<td><span class="badge badge-secondary">半年报</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">统一股份</td>
<td><span class="badge badge-accent">其他</span></td>
<td>联合定制"统一保养系列"</td>
<td><span class="badge badge-secondary">半年报</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-10" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-10" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-10" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-10" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-10" class="mask mask-star-2 bg-orange-400" /></div></td>
</tr>
<tr class="hover">
<td class="font-semibold">青岛双星</td>
<td><span class="badge badge-accent">其他</span></td>
<td>2019年达成战略合作</td>
<td><span class="badge badge-outline">互动</span></td>
<td><div class="rating rating-sm"><input type="radio" name="rating-11" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-11" class="mask mask-star-2 bg-orange-400" checked /><input type="radio" name="rating-11" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-11" class="mask mask-star-2 bg-orange-400" /><input type="radio" name="rating-11" class="mask mask-star-2 bg-orange-400" /></div></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Industry Chain -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h3 class="text-2xl font-bold mb-8 text-center">
<i class="fas fa-project-diagram text-purple-600 mr-2"></i>产业链图谱
</h3>
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 上游 -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h4 class="text-lg font-bold mb-4 text-purple-600">
<i class="fas fa-arrow-up mr-2"></i>上游 - 核心部件
</h4>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
<span class="font-semibold">宁德时代</span>
<span class="badge badge-warning">电池龙头</span>
</div>
<div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
<span class="font-semibold">比亚迪电池</span>
<span class="badge badge-success">战略合作</span>
</div>
<div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
<span class="font-semibold">玲珑轮胎</span>
<span class="badge badge-info">轮胎供应</span>
</div>
<div class="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
<span class="font-semibold">龙蟠科技</span>
<span class="badge badge-secondary">润滑油</span>
</div>
</div>
</div>
<!-- 中游 -->
<div class="bg-white rounded-lg shadow-lg p-6 border-2 border-purple-300">
<h4 class="text-lg font-bold mb-4 text-purple-600">
<i class="fas fa-industry mr-2"></i>中游 - 整车制造
</h4>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-red-50 rounded-lg border-2 border-red-200">
<span class="font-bold">京东汽车</span>
<span class="badge badge-error">核心平台</span>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<span class="font-semibold">广汽集团</span>
<span class="badge badge-primary">联合造车</span>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<span class="font-semibold">东风本田</span>
<span class="badge badge-primary">战略合作</span>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<span class="font-semibold">北汽蓝谷</span>
<span class="badge badge-primary">渠道合作</span>
</div>
</div>
</div>
<!-- 下游 -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h4 class="text-lg font-bold mb-4 text-purple-600">
<i class="fas fa-arrow-down mr-2"></i>下游 - 销售服务
</h4>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-indigo-50 rounded-lg">
<span class="font-semibold">京东App</span>
<span class="badge badge-info">线上平台</span>
</div>
<div class="flex items-center justify-between p-3 bg-cyan-50 rounded-lg">
<span class="font-semibold">京东养车</span>
<span class="badge badge-accent">服务网络</span>
</div>
<div class="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
<span class="font-semibold">京东物流</span>
<span class="badge badge-warning">履约配送</span>
</div>
<div class="flex items-center justify-between p-3 bg-pink-50 rounded-lg">
<span class="font-semibold">Plus会员</span>
<span class="badge badge-secondary">用户生态</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h3 class="text-2xl font-bold mb-8 text-center">
<i class="fas fa-exclamation-triangle text-red-600 mr-2"></i>风险与挑战
</h3>
<div class="max-w-4xl mx-auto">
<div class="alert alert-warning mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div>
<h3 class="font-bold">预期差风险</h3>
<div class="text-sm">新闻信息的"高调"与路演信息的"低调"形成鲜明对比,市场可能正在为尚未成熟的战略买单</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="card bg-red-50 border-l-4 border-red-500">
<div class="card-body p-4">
<h4 class="font-bold text-red-700 mb-2">
<i class="fas fa-microchip mr-2"></i>技术风险
</h4>
<p class="text-sm text-gray-700">软件定义汽车需要长期巨额研发投入,京东作为后来者能否建立技术壁垒存疑</p>
</div>
</div>
<div class="card bg-orange-50 border-l-4 border-orange-500">
<div class="card-body p-4">
<h4 class="font-bold text-orange-700 mb-2">
<i class="fas fa-dollar-sign mr-2"></i>商业化风险
</h4>
<p class="text-sm text-gray-700">汽车制造重资产低利润,如何平衡风险与收益,找到可持续盈利模式是最大挑战</p>
</div>
</div>
<div class="card bg-yellow-50 border-l-4 border-yellow-500">
<div class="card-body p-4">
<h4 class="font-bold text-yellow-700 mb-2">
<i class="fas fa-fist-raised mr-2"></i>竞争风险
</h4>
<p class="text-sm text-gray-700">行业红海竞争激烈,前有特斯拉比亚迪,后有华为小米,京东面临空前压力</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Investment Conclusion -->
<section class="py-12 bg-gradient-to-br from-purple-600 to-pink-600 text-white">
<div class="container mx-auto px-4">
<h3 class="text-2xl font-bold mb-8 text-center">
<i class="fas fa-chart-pie mr-2"></i>投资启示
</h3>
<div class="max-w-5xl mx-auto">
<div class="bg-white/10 backdrop-blur rounded-lg p-8">
<p class="text-lg mb-6 text-center">
"京东汽车"概念正处于由宏大叙事驱动的主题炒作阶段,正站在向基本面验证过渡的关键十字路口
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="text-center">
<div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-rocket text-3xl"></i>
</div>
<h4 class="font-bold mb-2">高风险高收益</h4>
<p class="text-sm opacity-90">京东集团(9618.HK) - 概念核心载体,赌战略落地</p>
</div>
<div class="text-center">
<div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-balance-scale text-3xl"></i>
</div>
<h4 class="font-bold mb-2">中风险中收益</h4>
<p class="text-sm opacity-90">宁德时代、广汽集团 - 确定产业环节,增量逻辑</p>
</div>
<div class="text-center">
<div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-wrench text-3xl"></i>
</div>
<h4 class="font-bold mb-2">低风险低收益</h4>
<p class="text-sm opacity-90">玲珑轮胎、龙蟠科技 - 渠道增量,博弈弹性</p>
</div>
</div>
<div class="mt-8 p-4 bg-white/10 rounded-lg">
<h4 class="font-bold mb-3">关键跟踪指标</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div class="flex items-center space-x-2">
<i class="fas fa-shopping-cart"></i>
<span>新车订单量</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-file-alt"></i>
<span>财报提及频率</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-store"></i>
<span>养车门店扩张</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-crown"></i>
<span>Plus会员开通率</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p class="text-sm opacity-75">© 2025 京东汽车概念分析报告 | 仅供研究参考,不构成投资建议</p>
<div class="mt-4 flex justify-center space-x-4">
<span class="text-xs opacity-60">数据更新2025年11月</span>
<span class="text-xs opacity-60">|</span>
<span class="text-xs opacity-60">风险提示:股市有风险,投资需谨慎</span>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button class="btn btn-circle btn-primary fixed bottom-8 right-8 shadow-lg" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// Add smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add animation on scroll
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').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'all 0.6s ease-out';
observer.observe(card);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,545 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东物流Robovan - 无人物流产业爆发元年</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-dot {
width: 20px;
height: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
position: relative;
z-index: 10;
}
.timeline-line {
position: absolute;
left: 10px;
top: 20px;
bottom: -20px;
width: 2px;
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.stats-card {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border: 1px solid rgba(102, 126, 234, 0.3);
}
.risk-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
}
.risk-high { background-color: #ef4444; }
.risk-medium { background-color: #f59e0b; }
.risk-low { background-color: #10b981; }
@media (max-width: 768px) {
.hide-mobile { display: none; }
}
</style>
</head>
<body>
<!-- Hero Section -->
<div class="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white">
<div class="container mx-auto px-4 py-16">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-2 bg-yellow-500 text-black px-4 py-2 rounded-full mb-6 pulse-animation">
<i class="fas fa-robot"></i>
<span class="font-bold">无人物流产业爆发元年</span>
</div>
<h1 class="text-5xl lg:text-7xl font-bold mb-6">
京东物流<span class="gradient-text">Robovan</span>
</h1>
<p class="text-xl mb-8 text-gray-200">
未来5年采购100万台无人车开启物流供应链全链路智能化革命
</p>
<div class="flex flex-wrap gap-4 justify-center lg:justify-start">
<div class="stats-card px-6 py-4 rounded-xl">
<div class="text-3xl font-bold text-yellow-400">100万</div>
<div class="text-sm">无人车采购</div>
</div>
<div class="stats-card px-6 py-4 rounded-xl">
<div class="text-3xl font-bold text-yellow-400">10倍</div>
<div class="text-sm">行业增速</div>
</div>
<div class="stats-card px-6 py-4 rounded-xl">
<div class="text-3xl font-bold text-yellow-400">2.3年</div>
<div class="text-sm">回本周期</div>
</div>
</div>
</div>
<div class="flex-1">
<img src="https://picsum.photos/seed/robovan-logistics/600/400" alt="Robovan" class="rounded-2xl shadow-2xl">
</div>
</div>
</div>
</div>
<!-- 核心事件时间轴 -->
<section class="py-16 glass-effect">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">关键事件时间轴</h2>
<div class="max-w-4xl mx-auto">
<div class="timeline-item relative pl-12 pb-12">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="card-hover glass-effect p-6 rounded-xl">
<div class="text-lg font-bold text-purple-600">2025年10月26日</div>
<div class="text-xl font-semibold mt-2">京东物流宣布历史性采购计划</div>
<div class="text-gray-600 mt-2">未来5年采购300万台机器人、100万台无人车和10万架无人机</div>
</div>
</div>
<div class="timeline-item relative pl-12 pb-12">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="card-hover glass-effect p-6 rounded-xl">
<div class="text-lg font-bold text-purple-600">2025年7月3日</div>
<div class="text-xl font-semibold mt-2">发布自研VAN无人轻卡</div>
<div class="text-gray-600 mt-2">载货空间24立方米行业最大用于物流传站环节</div>
</div>
</div>
<div class="timeline-item relative pl-12 pb-12">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="card-hover glass-effect p-6 rounded-xl">
<div class="text-lg font-bold text-purple-600">2025年6月</div>
<div class="text-xl font-semibold mt-2">深圳政策突破</div>
<div class="text-gray-600 mt-2">发布全国首个"全市域开放、全车型覆盖"道路指引</div>
</div>
</div>
<div class="timeline-item relative pl-12 pb-12">
<div class="timeline-dot"></div>
<div class="card-hover glass-effect p-6 rounded-xl">
<div class="text-lg font-bold text-purple-600">2025年5月</div>
<div class="text-xl font-semibold mt-2">顺丰同城规模化运营</div>
<div class="text-gray-600 mt-2">无人车覆盖38城、1万条路线验证商业模式</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑分析 -->
<section class="py-16 bg-gradient-to-r from-purple-50 to-blue-50">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">核心逻辑分析</h2>
<div class="grid lg:grid-cols-3 gap-8">
<div class="card-hover glass-effect p-8 rounded-2xl">
<div class="text-4xl mb-4">💰</div>
<h3 class="text-2xl font-bold mb-4">成本经济性突破</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span>单车采购成本</span>
<span class="font-bold text-purple-600">8万元</span>
</div>
<div class="flex justify-between items-center">
<span>单票成本节约</span>
<span class="font-bold text-purple-600">7-8分</span>
</div>
<div class="flex justify-between items-center">
<span>回本周期</span>
<span class="font-bold text-purple-600">2.3年</span>
</div>
<div class="mt-4 p-3 bg-yellow-100 rounded-lg">
<p class="text-sm">日处理6万票可缩至2年回本</p>
</div>
</div>
</div>
<div class="card-hover glass-effect p-8 rounded-2xl">
<div class="text-4xl mb-4">🏛️</div>
<h3 class="text-2xl font-bold mb-4">政策全域开放</h3>
<div class="space-y-3">
<div class="flex items-start gap-2">
<i class="fas fa-check-circle text-green-500 mt-1"></i>
<span>深圳"三全"试点模板</span>
</div>
<div class="flex items-start gap-2">
<i class="fas fa-check-circle text-green-500 mt-1"></i>
<span>国家邮政局"十五五"规划支持</span>
</div>
<div class="flex items-start gap-2">
<i class="fas fa-check-circle text-green-500 mt-1"></i>
<span>AI+邮政融合实施意见</span>
</div>
<div class="mt-4 p-3 bg-blue-100 rounded-lg">
<p class="text-sm">路权瓶颈逐步破解</p>
</div>
</div>
</div>
<div class="card-hover glass-effect p-8 rounded-2xl">
<div class="text-4xl mb-4">🚀</div>
<h3 class="text-2xl font-bold mb-4">行业爆发增长</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span>25年增速</span>
<span class="font-bold text-purple-600">10倍+</span>
</div>
<div class="flex justify-between items-center">
<span>九识智能订单</span>
<span class="font-bold text-purple-600">万台+</span>
</div>
<div class="flex justify-between items-center">
<span>26年行业规模</span>
<span class="font-bold text-purple-600">10万台</span>
</div>
<div class="mt-4 p-3 bg-purple-100 rounded-lg">
<p class="text-sm">新石器4月交付=24年全年</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="py-16 glass-effect">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">产业链图谱</h2>
<div class="bg-gradient-to-r from-purple-100 to-blue-100 p-8 rounded-2xl">
<div class="grid lg:grid-cols-4 gap-6">
<div class="text-center">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-3xl font-bold text-purple-600 mb-2">上游</div>
<div class="space-y-2">
<div class="text-sm">域控:经纬恒润/德赛西威</div>
<div class="text-sm">激光雷达:禾赛科技</div>
<div class="text-sm">芯片:地平线</div>
</div>
</div>
</div>
<div class="text-center lg:col-span-2">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-3xl font-bold text-purple-600 mb-2">中游</div>
<div class="grid grid-cols-2 gap-4">
<div>
<div class="font-semibold">整车</div>
<div class="text-sm">金龙汽车</div>
<div class="text-sm">长安汽车</div>
<div class="text-sm">航天科技</div>
</div>
<div>
<div class="font-semibold">方案商</div>
<div class="text-sm">九识智能</div>
<div class="text-sm">新石器</div>
<div class="text-sm">京东自研</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-3xl font-bold text-purple-600 mb-2">下游</div>
<div class="space-y-2">
<div class="text-sm">运营商:京东物流</div>
<div class="text-sm">顺丰同城</div>
<div class="text-sm">中邮科技</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 相关股票表格 -->
<section class="py-16 bg-gradient-to-r from-purple-50 to-blue-50">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">核心受益股票</h2>
<div class="overflow-x-auto">
<table class="w-full glass-effect rounded-2xl overflow-hidden">
<thead>
<tr class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<th class="px-6 py-4 text-left">股票名称</th>
<th class="px-6 py-4 text-left">分类</th>
<th class="px-6 py-4 text-left">项目</th>
<th class="px-6 py-4 text-left">产业链</th>
<th class="px-6 py-4 text-left">核心逻辑</th>
<th class="px-6 py-4 text-left">消息来源</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">德赛西威</td>
<td class="px-6 py-4">
<span class="badge badge-info">智驾域控</span>
</td>
<td class="px-6 py-4">九识智能域控供应</td>
<td class="px-6 py-4">智驾域控</td>
<td class="px-6 py-4">为九识智能供应智驾域控</td>
<td class="px-6 py-4">机构研报</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">金龙汽车</td>
<td class="px-6 py-4">
<span class="badge badge-success">Robovan整车</span>
</td>
<td class="px-6 py-4">Robovan合作开发</td>
<td class="px-6 py-4">无人配送车硬件设计制造</td>
<td class="px-6 py-4">2020年起与京东合作开发</td>
<td class="px-6 py-4">机构研报/互动</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">经纬恒润</td>
<td class="px-6 py-4">
<span class="badge badge-info">智驾域控</span>
</td>
<td class="px-6 py-4">末端物流无人车商业化</td>
<td class="px-6 py-4">智驾域控应用于机器人</td>
<td class="px-6 py-4">与京东合作推动末端物流无人车</td>
<td class="px-6 py-4">机构研报/互动</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">长安汽车</td>
<td class="px-6 py-4">
<span class="badge badge-success">Robovan整车</span>
</td>
<td class="px-6 py-4">新一代智能物流车联合研发</td>
<td class="px-6 py-4">智能物流车</td>
<td class="px-6 py-4">与京东建立战略合作</td>
<td class="px-6 py-4">公开资料</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">航天科技</td>
<td class="px-6 py-4">
<span class="badge badge-success">Robovan整车</span>
</td>
<td class="px-6 py-4">自动驾驶物流车战略合作</td>
<td class="px-6 py-4">自动驾驶物流车</td>
<td class="px-6 py-4">2019年与京东乾石科技合作</td>
<td class="px-6 py-4">公告</td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">音飞储存</td>
<td class="px-6 py-4">
<span class="badge badge-warning">仓储机器人</span>
</td>
<td class="px-6 py-4">仓储设备长期供应</td>
<td class="px-6 py-4">仓储设备及系统</td>
<td class="px-6 py-4">提供立体库货架、物流搬运机器人</td>
<td class="px-6 py-4">互动</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">广联航空</td>
<td class="px-6 py-4">
<span class="badge badge-warning">无人机</span>
</td>
<td class="px-6 py-4">白鲸航线核心制造</td>
<td class="px-6 py-4">无人机工艺装备研发</td>
<td class="px-6 py-4">承担白鲸航线工艺装备研发</td>
<td class="px-6 py-4">互动</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 预期差与风险 -->
<section class="py-16 glass-effect">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">预期差与风险提示</h2>
<div class="grid lg:grid-cols-2 gap-8">
<div class="bg-gradient-to-br from-orange-50 to-red-50 p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-orange-600">
<i class="fas fa-exclamation-triangle mr-2"></i>关键预期差
</h3>
<div class="space-y-4">
<div class="flex items-start gap-3">
<span class="risk-indicator risk-high"></span>
<div>
<div class="font-semibold">路演未提及Robovan</div>
<div class="text-sm text-gray-600">京东2023-2025年多次业绩会回避Robovan聚焦传统业务整合</div>
</div>
</div>
<div class="flex items-start gap-3">
<span class="risk-indicator risk-high"></span>
<div>
<div class="font-semibold">人力扩张 vs 无人化</div>
<div class="text-sm text-gray-600">2025年计划招聘3万人与Robovan逻辑存在冲突</div>
</div>
</div>
<div class="flex items-start gap-3">
<span class="risk-indicator risk-medium"></span>
<div>
<div class="font-semibold">资本开支占比低</div>
<div class="text-sm text-gray-600">2024年资本开支仅占收入3%难支撑100万台采购</div>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-yellow-50 to-green-50 p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-green-600">
<i class="fas fa-shield-alt mr-2"></i>潜在风险
</h3>
<div class="space-y-4">
<div class="flex items-start gap-3">
<span class="risk-indicator risk-medium"></span>
<div>
<div class="font-semibold">技术成熟度</div>
<div class="text-sm text-gray-600">复杂场景L4级稳定性待验证路权仅限试点</div>
</div>
</div>
<div class="flex items-start gap-3">
<span class="risk-indicator risk-medium"></span>
<div>
<div class="font-semibold">商业化门槛</div>
<div class="text-sm text-gray-600">中小网点需日均5万票才经济低单量地区难渗透</div>
</div>
</div>
<div class="flex items-start gap-3">
<span class="risk-indicator risk-low"></span>
<div>
<div class="font-semibold">替代性限制</div>
<div class="text-sm text-gray-600">京东外卖等业务仍需人力配送</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 bg-gradient-to-r from-purple-100 to-blue-100 p-6 rounded-2xl">
<h3 class="text-xl font-bold mb-4 text-purple-600">
<i class="fas fa-lightbulb mr-2"></i>综合结论
</h3>
<p class="text-gray-700 leading-relaxed">
概念处于<strong class="text-purple-600">主题炒作→基本面验证过渡期</strong>。政策与订单提供强催化,
但京东自身战略未明需跟踪Q4招标落地。最优细分环节<strong class="text-purple-600">域控制器</strong>(经纬恒润)和<strong class="text-purple-600">分拣设备</strong>(中邮科技)。
警示若京东2024年报资本开支未显著增长或路演继续回避Robovan概念存证伪风险。
</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4 text-center">
<div class="mb-6">
<i class="fas fa-robot text-4xl text-purple-400"></i>
</div>
<h3 class="text-2xl font-bold mb-4">京东物流Robovan</h3>
<p class="text-gray-400 mb-6">开启无人物流产业新纪元</p>
<div class="flex justify-center gap-6">
<div class="text-center">
<div class="text-2xl font-bold text-purple-400">100万</div>
<div class="text-sm text-gray-400">无人车</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-purple-400">300万</div>
<div class="text-sm text-gray-400">机器人</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-purple-400">10万</div>
<div class="text-sm text-gray-400">无人机</div>
</div>
</div>
<div class="mt-8 pt-6 border-t border-gray-800">
<p class="text-sm text-gray-500">© 2025 京东物流Robovan概念分析 | 数据来源:公开研报、公司公告</p>
</div>
</div>
</footer>
<script>
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 数字动画
function animateValue(element, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
element.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
// 监听滚动触发动画
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const target = entry.target;
if (target.dataset.animate) {
const value = parseInt(target.dataset.animate);
animateValue(target, 0, value, 2000);
observer.unobserve(target);
}
}
});
});
document.querySelectorAll('[data-animate]').forEach(el => {
observer.observe(el);
});
// 添加页面加载动画
window.addEventListener('load', () => {
document.body.style.opacity = '0';
setTimeout(() => {
document.body.style.transition = 'opacity 0.5s';
document.body.style.opacity = '1';
}, 100);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,837 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>人形机器人Figure - 深度投资分析</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<!-- AOS Animation -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--dark-bg: #0f0f1e;
--card-bg: rgba(255, 255, 255, 0.05);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
color: #e0e0e0;
min-height: 100vh;
}
/* 导航栏样式 */
.navbar {
background: rgba(15, 15, 30, 0.95) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 0;
}
.navbar-brand {
font-weight: 700;
font-size: 1.5rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Hero Section */
.hero-section {
padding: 80px 0 60px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
border-radius: 50%;
animation: floating 20s infinite ease-in-out;
}
@keyframes floating {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.hero-title {
font-size: 3rem;
font-weight: 800;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1.5rem;
}
.hero-subtitle {
font-size: 1.25rem;
color: #a0a0a0;
margin-bottom: 2rem;
}
/* 卡片样式 */
.glass-card {
background: var(--card-bg);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.3);
}
.card-header-custom {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-header-custom i {
color: #667eea;
}
/* 时间轴样式 */
.timeline {
position: relative;
padding: 2rem 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #667eea, #764ba2);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 3rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 20px;
height: 20px;
background: #667eea;
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3);
}
.timeline-content {
background: var(--card-bg);
padding: 1.5rem;
border-radius: 15px;
width: 45%;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.timeline-item:nth-child(odd) .timeline-content {
margin-left: auto;
}
.timeline-date {
color: #667eea;
font-weight: 700;
margin-bottom: 0.5rem;
}
/* 表格样式 */
.custom-table {
background: var(--card-bg);
backdrop-filter: blur(10px);
border-radius: 15px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.custom-table thead {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
}
.custom-table th {
border: none;
padding: 1rem;
font-weight: 600;
color: #fff;
}
.custom-table td {
border: none;
padding: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
vertical-align: middle;
}
.custom-table tbody tr {
transition: all 0.3s ease;
}
.custom-table tbody tr:hover {
background: rgba(102, 126, 234, 0.1);
}
/* 产业链图谱 */
.industry-chain {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 0;
position: relative;
}
.chain-node {
flex: 1;
text-align: center;
padding: 1.5rem;
background: var(--card-bg);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
margin: 0 0.5rem;
transition: all 0.3s ease;
}
.chain-node:hover {
transform: scale(1.05);
border-color: #667eea;
}
.chain-node h5 {
color: #667eea;
margin-bottom: 1rem;
}
/* 标签样式 */
.tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(102, 126, 234, 0.2);
border-radius: 20px;
font-size: 0.875rem;
margin: 0.25rem;
border: 1px solid rgba(102, 126, 234, 0.3);
}
.tag-hot {
background: rgba(245, 87, 108, 0.2);
border-color: rgba(245, 87, 108, 0.3);
color: #f5576c;
}
/* 风险提示 */
.risk-item {
background: rgba(245, 87, 108, 0.1);
border-left: 4px solid #f5576c;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 0 10px 10px 0;
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.timeline::before {
left: 20px;
}
.timeline-item::before {
left: 20px;
}
.timeline-content {
width: calc(100% - 60px);
margin-left: 50px !important;
}
.industry-chain {
flex-direction: column;
}
.chain-node {
margin: 0.5rem 0;
width: 100%;
}
.custom-table {
font-size: 0.875rem;
}
}
/* 加载动画 */
.fade-in {
animation: fadeIn 0.8s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #667eea, #764ba2);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #764ba2, #667eea);
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-robot"></i> Figure AI
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#overview">概览</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#timeline">时间轴</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#logic">核心逻辑</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#stocks">相关股票</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#risks">风险提示</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section" id="overview">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<h1 class="hero-title fade-in" data-aos="fade-up">人形机器人Figure</h1>
<p class="hero-subtitle fade-in" data-aos="fade-up" data-aos-delay="100">
具身智能时代的引领者,从技术验证迈向商业化前夕的关键拐点
</p>
<div class="d-flex flex-wrap gap-2 fade-in" data-aos="fade-up" data-aos-delay="200">
<span class="tag tag-hot">🔥 市场热度极高</span>
<span class="tag">💰 估值400亿美元</span>
<span class="tag">🤖 Helix模型突破</span>
<span class="tag">🏭 BotQ工厂启动</span>
<span class="tag">🚀 顶级资本背书</span>
</div>
</div>
<div class="col-lg-4">
<div class="glass-card fade-in" data-aos="fade-left">
<h5 class="text-center mb-3">核心指标</h5>
<div class="row text-center">
<div class="col-6">
<h3 class="text-primary">26亿→400亿$</h3>
<small>估值增长</small>
</div>
<div class="col-6">
<h3 class="text-primary">200Hz</h3>
<small>控制频率</small>
</div>
<div class="col-6 mt-3">
<h3 class="text-primary">10万台</h3>
<small>4年产能目标</small>
</div>
<div class="col-6 mt-3">
<h3 class="text-primary">端侧运行</h3>
<small>不依赖云端</small>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 时间轴 -->
<section class="py-5" id="timeline">
<div class="container">
<div class="glass-card">
<h3 class="card-header-custom">
<i class="bi bi-clock-history"></i> 发展历程
</h3>
<div class="timeline">
<div class="timeline-item" data-aos="fade-up">
<div class="timeline-content">
<div class="timeline-date">2022年</div>
<h5>公司创立</h5>
<p>由成功创业者Brett Adcock创立瞄准通用型人形机器人赛道</p>
</div>
</div>
<div class="timeline-item" data-aos="fade-up" data-aos-delay="100">
<div class="timeline-content">
<div class="timeline-date">2023年10月</div>
<h5>Figure 01发布</h5>
<p>展示搬运、学习煮咖啡等基础能力接入OpenAI大模型</p>
</div>
</div>
<div class="timeline-item" data-aos="fade-up" data-aos-delay="200">
<div class="timeline-content">
<div class="timeline-date">2024年2月</div>
<h5>B轮融资</h5>
<p>完成6.75亿美元融资微软、OpenAI、英伟达等投资估值26亿美元</p>
</div>
</div>
<div class="timeline-item" data-aos="fade-up" data-aos-delay="300">
<div class="timeline-content">
<div class="timeline-date">2025年2月21日</div>
<h5>Helix模型发布</h5>
<p>全球首个高频连续控制的VLA模型支持双机器人协作</p>
</div>
</div>
<div class="timeline-item" data-aos="fade-up" data-aos-delay="400">
<div class="timeline-content">
<div class="timeline-date">2025年3月15日</div>
<h5>BotQ工厂启动</h5>
<p>开启"机器人制造机器人"模式首期年产能1.2万台</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑 -->
<section class="py-5" id="logic">
<div class="container">
<div class="row g-4">
<div class="col-lg-4" data-aos="fade-up">
<div class="glass-card h-100">
<h4 class="card-header-custom">
<i class="bi bi-cpu"></i> AI算法突破
</h4>
<p class="text-muted">Helix模型通过"慢思考+快行动"双模型架构实现200Hz高频控制</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> 端侧运行</li>
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> 双机器人协作</li>
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> 视觉-语言-动作融合</li>
</ul>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="glass-card h-100">
<h4 class="card-header-custom">
<i class="bi bi-building"></i> 生产模式革命
</h4>
<p class="text-muted">BotQ工厂实现"机器人造机器人"的闭环生产模式</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> 指数级产能放大</li>
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> 成本大幅降低</li>
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> 4年10万台目标</li>
</ul>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="glass-card h-100">
<h4 class="card-header-custom">
<i class="bi bi-people-fill"></i> 顶级资本背书
</h4>
<p class="text-muted">科技巨头投资带来技术协同和生态优势</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> 微软</li>
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> OpenAI</li>
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> 英伟达</li>
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> 亚马逊</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="py-5">
<div class="container">
<div class="glass-card">
<h3 class="card-header-custom">
<i class="bi bi-diagram-3"></i> 产业链图谱
</h3>
<div class="industry-chain">
<div class="chain-node" data-aos="zoom-in">
<h5><i class="bi bi-box-seam"></i> 上游</h5>
<p class="small">核心硬件供应商</p>
<div class="mt-2">
<span class="tag">执行器</span>
<span class="tag">减速器</span>
<span class="tag">传感器</span>
</div>
</div>
<div class="chain-node" data-aos="zoom-in" data-aos-delay="100">
<h5><i class="bi bi-gear"></i> 中游</h5>
<p class="small">本体制造商</p>
<div class="mt-2">
<span class="tag tag-hot">Figure AI</span>
<span class="tag">系统集成</span>
</div>
</div>
<div class="chain-node" data-aos="zoom-in" data-aos-delay="200">
<h5><i class="bi bi-shop"></i> 下游</h5>
<p class="small">应用场景</p>
<div class="mt-2">
<span class="tag">工业制造</span>
<span class="tag">物流仓储</span>
<span class="tag">家庭服务</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="py-5" id="stocks">
<div class="container">
<div class="glass-card">
<h3 class="card-header-custom">
<i class="bi bi-graph-up-arrow"></i> 核心标的股票池
</h3>
<div class="table-responsive">
<table class="table custom-table">
<thead>
<tr>
<th>股票代码</th>
<th>公司名称</th>
<th>产业链环节</th>
<th>合作项目</th>
<th>关联原因</th>
<th>确定性</th>
</tr>
</thead>
<tbody>
<tr data-aos="fade-up">
<td><strong>领益智造</strong></td>
<td>领益智造</td>
<td><span class="tag">结构件</span></td>
<td>模切结构件、金属结构件、散热模组、软包结构件</td>
<td>已明确为Figure AI提供产品服务</td>
<td><span class="badge bg-success"></span></td>
</tr>
<tr data-aos="fade-up" data-aos-delay="50">
<td><strong>世运电路</strong></td>
<td>世运电路</td>
<td><span class="tag">PCB</span></td>
<td>新产品定点设计</td>
<td>公告获得F公司新产品定点进入量产准备</td>
<td><span class="badge bg-success"></span></td>
</tr>
<tr data-aos="fade-up" data-aos-delay="100">
<td><strong>绿的谐波</strong></td>
<td>绿的谐波</td>
<td><span class="tag">减速器</span></td>
<td>减速器供应</td>
<td>谐波减速器龙头,受益行业β</td>
<td><span class="badge bg-warning"></span></td>
</tr>
<tr data-aos="fade-up" data-aos-delay="150">
<td><strong>兆威机电</strong></td>
<td>兆威机电</td>
<td><span class="tag">灵巧手</span></td>
<td>执行器模块化供应</td>
<td>稀缺执行器模块化供应商</td>
<td><span class="badge bg-warning"></span></td>
</tr>
<tr data-aos="fade-up" data-aos-delay="200">
<td><strong>银轮股份</strong></td>
<td>银轮股份</td>
<td><span class="tag">潜在</span></td>
<td>执行器总成</td>
<td>据券商纪要为Figure国产链合作伙伴</td>
<td><span class="badge bg-danger"></span></td>
</tr>
<tr data-aos="fade-up" data-aos-delay="250">
<td><strong>恒勃股份</strong></td>
<td>恒勃股份</td>
<td><span class="tag">结构件</span></td>
<td>结构件供货、足部充电、PEEK注塑</td>
<td>据券商纪要为Figure国产链合作伙伴</td>
<td><span class="badge bg-danger"></span></td>
</tr>
<tr data-aos="fade-up" data-aos-delay="300">
<td><strong>隆盛科技</strong></td>
<td>隆盛科技</td>
<td><span class="tag">旋转执行器</span></td>
<td>间接供货Figure</td>
<td>通过日本尼得科间接供货</td>
<td><span class="badge bg-warning"></span></td>
</tr>
<tr data-aos="fade-up" data-aos-delay="350">
<td><strong>旭升集团</strong></td>
<td>旭升集团</td>
<td><span class="tag">轻量化</span></td>
<td>镁铝压铸件供应</td>
<td>镁铝压铸件供应商</td>
<td><span class="badge bg-warning"></span></td>
</tr>
<tr data-aos="fade-up" data-aos-delay="400">
<td><strong>鸣志电器</strong></td>
<td>鸣志电器</td>
<td><span class="tag">潜在</span></td>
<td>微电机供应</td>
<td>微电机供应商</td>
<td><span class="badge bg-danger"></span></td>
</tr>
<tr data-aos="fade-up" data-aos-delay="450">
<td><strong>震裕科技</strong></td>
<td>震裕科技</td>
<td><span class="tag">潜在</span></td>
<td>线性执行器、蜗轮蜗杆</td>
<td>线性执行器、蜗轮蜗杆供应商</td>
<td><span class="badge bg-danger"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="py-5">
<div class="container">
<div class="row g-4">
<div class="col-lg-6" data-aos="fade-right">
<div class="glass-card h-100">
<h4 class="card-header-custom">
<i class="bi bi-lightbulb"></i> 投资策略
</h4>
<div class="mb-3">
<h6 class="text-primary">首选:确定性标的</h6>
<p class="small">领益智造、世运电路 - 供应链关系已公开确认</p>
</div>
<div class="mb-3">
<h6 class="text-warning">次选:行业β受益者</h6>
<p class="small">绿的谐波、兆威机电 - "卖铲人"逻辑,分散风险</p>
</div>
<div>
<h6 class="text-danger">谨慎参与:预期驱动标的</h6>
<p class="small">银轮股份、恒勃股份 - 承担信息不确定性风险</p>
</div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="glass-card h-100">
<h4 class="card-header-custom">
<i class="bi bi-eye"></i> 关键跟踪指标
</h4>
<ul class="list-unstyled">
<li class="mb-3">
<i class="bi bi-cash-stack text-primary"></i>
<strong>C轮融资进展</strong>
<p class="small text-muted">400亿美元估值是否成功</p>
</li>
<li class="mb-3">
<i class="bi bi-box text-primary"></i>
<strong>产能与交付</strong>
<p class="small text-muted">BotQ工厂月度/季度出货量</p>
</li>
<li class="mb-3">
<i class="bi bi-handshake text-primary"></i>
<strong>商业订单</strong>
<p class="small text-muted">宝马以外新增大型订单</p>
</li>
<li>
<i class="bi bi-graph-up text-primary"></i>
<strong>供应商业绩</strong>
<p class="small text-muted">A股公司相关收入确认情况</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 风险提示 -->
<section class="py-5" id="risks">
<div class="container">
<div class="glass-card">
<h3 class="card-header-custom">
<i class="bi bi-exclamation-triangle"></i> 风险提示
</h3>
<div class="row">
<div class="col-lg-4 mb-3" data-aos="fade-up">
<h5 class="text-danger mb-3">技术风险</h5>
<div class="risk-item">
<small>硬件与软件融合瓶颈,运动能力与竞争对手存在差距</small>
</div>
<div class="risk-item">
<small>数据与泛化能力局限,仿真与现实差距</small>
</div>
</div>
<div class="col-lg-4 mb-3" data-aos="fade-up" data-aos-delay="100">
<h5 class="text-danger mb-3">商业化风险</h5>
<div class="risk-item">
<small>高昂成本与客户接受度10万美元仍属重资产</small>
</div>
<div class="risk-item">
<small>工程化与规模化能力,从实验室到量产的巨大跨越</small>
</div>
</div>
<div class="col-lg-4 mb-3" data-aos="fade-up" data-aos-delay="200">
<h5 class="text-danger mb-3">估值泡沫风险</h5>
<div class="risk-item">
<small>26亿→400亿美元估值跳跃缺乏财务数据支撑</small>
</div>
<div class="risk-item">
<small>关联标的信息可靠性,部分信息仅来自券商纪要</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-4 mt-5 border-top border-secondary">
<div class="container text-center">
<p class="text-muted mb-0">© 2025 人形机器人Figure投资分析 | 数据仅供参考,投资需谨慎</p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- AOS Animation JS -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
// 初始化AOS动画
AOS.init({
duration: 800,
once: true,
offset: 100
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.background = 'rgba(15, 15, 30, 0.98)';
} else {
navbar.style.background = 'rgba(15, 15, 30, 0.95)';
}
});
// 表格行高亮效果
document.querySelectorAll('.custom-table tbody tr').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.cursor = 'pointer';
});
row.addEventListener('click', function() {
// 移除其他行的选中状态
document.querySelectorAll('.custom-table tbody tr').forEach(r => {
r.style.background = '';
});
// 添加当前行的选中状态
this.style.background = 'rgba(102, 126, 234, 0.2)';
});
});
// 数字动画效果
function animateValue(element, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
element.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
// 当页面加载完成时触发数字动画
window.addEventListener('load', function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const element = entry.target;
if (element.textContent.includes('26亿→400亿$')) {
animateValue(element.querySelector('h3'), 26, 400, 2000);
}
observer.unobserve(element);
}
});
});
document.querySelectorAll('.hero-title').forEach(el => {
observer.observe(el);
});
});
</script>
</body>
</html>

310
public/htmls/充电桩.html Normal file
View File

@@ -0,0 +1,310 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>充电桩概念全景图 | 三年倍增·订单&盈利双击</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet">
<style>
:root {
--primary: #00d4ff;
--secondary: #0066cc;
--accent: #ffcc00;
--dark: #0a1929;
--light: #f0f8ff;
}
body {
background: linear-gradient(135deg, var(--dark) 0%, #001a33 100%);
color: var(--light);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 16px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}
.table-responsive {
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0, 212, 255, 0.2);
}
table {
background: rgba(255, 255, 255, 0.03);
color: var(--light);
}
th {
background: rgba(0, 102, 204, 0.3);
color: var(--accent);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
td {
border-color: rgba(0, 212, 255, 0.1);
}
.badge {
font-size: 0.75rem;
padding: 0.4em 0.6em;
}
.text-primary {
color: var(--primary) !important;
}
.text-accent {
color: var(--accent) !important;
}
.btn-primary {
background: linear-gradient(90deg, var(--primary), var(--secondary));
border: none;
border-radius: 20px;
padding: 0.5rem 1.5rem;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
}
.timeline-item {
border-left: 2px solid var(--primary);
padding-left: 1.5rem;
position: relative;
margin-bottom: 1.5rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: -6px;
top: 0;
width: 10px;
height: 10px;
background: var(--accent);
border-radius: 50%;
}
.hero-section {
background: linear-gradient(135deg, rgba(0, 102, 204, 0.2) 0%, rgba(0, 212, 255, 0.1) 100%);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid rgba(0, 212, 255, 0.3);
}
.metric-card {
text-align: center;
padding: 1.5rem;
background: rgba(0, 102, 204, 0.1);
border-radius: 12px;
border: 1px solid rgba(0, 212, 255, 0.2);
}
.metric-value {
font-size: 2rem;
font-weight: 700;
color: var(--accent);
}
.metric-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="container-fluid px-3 px-md-4 py-4">
<!-- Hero Section -->
<div class="hero-section">
<div class="row align-items-center">
<div class="col-lg-8">
<h1 class="display-5 fw-bold text-primary mb-3">
充电桩概念全景图
</h1>
<p class="lead mb-0">
三年倍增行动方案引爆订单&盈利双击主升浪 · 2025-2027 CAGR 40%+ 高确定性
</p>
</div>
<div class="col-lg-4 mt-3 mt-lg-0">
<div class="row g-2">
<div class="col-6">
<div class="metric-card">
<div class="metric-value">2800万</div>
<div class="metric-label">2027年目标桩数</div>
</div>
</div>
<div class="col-6">
<div class="metric-card">
<div class="metric-value">3亿</div>
<div class="metric-label">公共充电容量(kW)</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心观点 -->
<section class="mb-5">
<h2 class="h4 text-primary mb-3">
<i class="bi bi-lightning-charge-fill me-2"></i>核心观点摘要
</h2>
<div class="card p-3">
<p class="mb-0">
充电桩概念正从<strong class="text-accent">"政策预期"</strong>迈入<strong class="text-accent">"订单&盈利双击"</strong>的基本面主升浪:
①三年倍增方案给出2025-2027年<strong>CAGR 40%</strong>的确定性总量;
②欧美车桩比15-26:1的海外缺口打开高毛利出海市场中国模块/整桩成本优势<strong>30-50%</strong>
③直流快充+液冷超充技术迭代带动单桩价值量<strong>翻倍</strong>
</p>
</div>
</section>
<!-- 政策时间轴 -->
<section class="mb-5">
<h2 class="h4 text-primary mb-3">
<i class="bi bi-calendar-event me-2"></i>政策时间轴
</h2>
<div class="card p-3">
<div class="timeline-item">
<div class="fw-bold text-accent">2023年2月</div>
<div class="small">八部委提出公共领域车桩比1:1首次设定量化目标</div>
</div>
<div class="timeline-item">
<div class="fw-bold text-accent">2024年10月</div>
<div class="small">公共桩单月新增6.3万台,同比+34.3%,建设节奏已提前启动</div>
</div>
<div class="timeline-item">
<div class="fw-bold text-accent">2025年1月</div>
<div class="small">联盟预测2025年新增公共桩103.8万台同比再提速20%</div>
</div>
<div class="timeline-item">
<div class="fw-bold text-accent">2025年5月</div>
<div class="small">国新办再提"倍增"行动,中央预算内投资+政策性金融工具双管齐下</div>
</div>
<div class="timeline-item">
<div class="fw-bold text-accent">2025年10月</div>
<div class="small">六部门正式文件落地2800万桩、3亿千瓦成为硬性KPI</div>
</div>
</div>
</section>
<!-- 产业链表格 -->
<section class="mb-5">
<h2 class="h4 text-primary mb-3">
<i class="bi bi-diagram-3 me-2"></i>产业链核心公司A股
</h2>
<div class="table-responsive">
<table class="table table-sm table-hover align-middle mb-0">
<thead>
<tr>
<th>股票</th>
<th>环节</th>
<th>价值量占比</th>
<th>市场地位/亮点</th>
<th>来源</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong class="text-primary">优优绿能</strong></td>
<td><span class="badge bg-primary">充电模块</span></td>
<td>52.2%</td>
<td>2024国内份额A股第一、国内第二市占率21.65%</td>
<td>公开资料</td>
</tr>
<tr>
<td><strong class="text-primary">特锐德</strong></td>
<td><span class="badge bg-primary">充电模块</span></td>
<td>52.2%</td>
<td>2024国内份额A股第二市占率15.31%(特来电)</td>
<td>公开资料</td>
</tr>
<tr>
<td><strong class="text-primary">通合科技</strong></td>
<td><span class="badge bg-primary">充电模块</span></td>
<td>52.2%</td>
<td>2024国内份额A股第三市占率14.78%</td>
<td>公开资料</td>
</tr>
<tr>
<td><strong class="text-primary">沃尔核材</strong></td>
<td><span class="badge bg-success">充电枪</span></td>
<td>12.25%</td>
<td>2024直流充电枪营收国内第一液冷枪已批量</td>
<td>调研</td>
</tr>
<tr>
<td><strong class="text-primary">盛弘股份</strong></td>
<td><span class="badge bg-warning">整桩</span></td>
<td>-</td>
<td>2024充电桩营收12.16亿占比40.04%</td>
<td>财报</td>
</tr>
<tr>
<td><strong class="text-primary">绿能慧充</strong></td>
<td><span class="badge bg-warning">整桩</span></td>
<td>-</td>
<td>2024充电桩销售8.06亿占比79.44%</td>
<td>财报</td>
</tr>
<tr>
<td><strong class="text-primary">特锐德</strong></td>
<td><span class="badge bg-info">运营</span></td>
<td>-</td>
<td>直流终端47.5万台份额24%充电量份额23%,双第一</td>
<td>研报</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- 投资启示 -->
<section class="mb-4">
<h2 class="h4 text-primary mb-3">
<i class="bi bi-cash-coin me-2"></i>综合结论与投资启示
</h2>
<div class="card p-3">
<p class="mb-3">
充电桩概念已<strong class="text-accent">脱离主题炒作</strong>,进入<strong class="text-accent">"政策订单→盈利释放"</strong>的基本面主升浪2025-2027年行业CAGR 40%+具备高确定性。
</p>
<div class="row g-2">
<div class="col-md-4">
<div class="d-flex align-items-center">
<span class="badge bg-primary me-2">1</span>
<span>模块外供+出海认证:优优绿能、通合科技</span>
</div>
</div>
<div class="col-md-4">
<div class="d-flex align-items-center">
<span class="badge bg-primary me-2">2</span>
<span>整桩ODM欧美渠道道通科技、盛弘股份</span>
</div>
</div>
<div class="col-md-4">
<div class="d-flex align-items-center">
<span class="badge bg-primary me-2">3</span>
<span>液冷枪细分龙头:沃尔核材</span>
</div>
</div>
</div>
<hr class="my-3">
<p class="mb-0 small text-muted">
一句话总结:<strong class="text-accent">"三年倍增"给量,出海+液冷给价模块寡头给利润2026年春节前是设备端业绩兑现的黄金窗口。</strong>
</p>
</div>
</section>
<!-- Footer -->
<footer class="text-center py-3 mt-4 border-top border-secondary">
<p class="small mb-0 text-muted">
数据来源:中国充电联盟、公开财报、券商研报 | 更新时间2025年10月
</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -0,0 +1,836 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关键软件概念深度解析 - 科技博弈v2软件时代</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--dark-bg: #0f0f23;
--card-bg: #1a1a2e;
--border-color: #2a2a4e;
--text-primary: #ffffff;
--text-secondary: #a8a8b3;
--accent-purple: #7c3aed;
--accent-pink: #ec4899;
--success-green: #10b981;
--warning-yellow: #f59e0b;
--danger-red: #ef4444;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #2a2a4e 100%);
color: var(--text-primary);
min-height: 100vh;
line-height: 1.6;
}
/* 头部设计 */
.hero-section {
background: var(--primary-gradient);
padding: 60px 0 40px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
background-size: cover;
}
.hero-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero-subtitle {
font-size: 1.2rem;
opacity: 0.95;
margin-bottom: 30px;
}
.meta-badge {
display: inline-block;
padding: 8px 16px;
background: rgba(255,255,255,0.2);
border-radius: 20px;
margin: 5px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.meta-badge:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-2px);
}
/* 卡片样式 */
.content-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
backdrop-filter: blur(20px);
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.content-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(124,58,237,0.2);
border-color: var(--accent-purple);
}
.section-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 25px;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 15px;
}
.section-title i {
color: var(--accent-purple);
font-size: 1.5rem;
}
/* 时间轴样式 */
.timeline {
position: relative;
padding: 20px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--accent-purple);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 40px;
width: 100%;
}
.timeline-content {
background: rgba(124,58,237,0.1);
border: 1px solid var(--accent-purple);
border-radius: 12px;
padding: 20px;
width: calc(50% - 30px);
transition: all 0.3s ease;
}
.timeline-item:nth-child(odd) .timeline-content {
margin-left: auto;
}
.timeline-item:nth-child(even) .timeline-content {
margin-right: auto;
}
.timeline-content:hover {
background: rgba(124,58,237,0.2);
transform: scale(1.02);
}
.timeline-date {
position: absolute;
top: 20px;
width: calc(50% - 30px);
text-align: right;
font-weight: 600;
color: var(--accent-pink);
}
.timeline-item:nth-child(even) .timeline-date {
right: calc(50% + 30px);
}
.timeline-item:nth-child(odd) .timeline-date {
left: calc(50% + 30px);
text-align: left;
}
.timeline-dot {
position: absolute;
left: 50%;
top: 30px;
width: 16px;
height: 16px;
background: var(--accent-purple);
border-radius: 50%;
transform: translateX(-50%);
border: 3px solid var(--card-bg);
z-index: 1;
}
/* 表格样式 */
.stock-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--card-bg);
border-radius: 12px;
overflow: hidden;
}
.stock-table thead {
background: var(--primary-gradient);
}
.stock-table th {
padding: 15px;
text-align: left;
font-weight: 600;
color: white;
border: none;
white-space: nowrap;
}
.stock-table tbody tr {
border-bottom: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.stock-table tbody tr:hover {
background: rgba(124,58,237,0.1);
}
.stock-table td {
padding: 12px 15px;
border: none;
}
.stock-name {
font-weight: 600;
color: var(--text-primary);
}
.industry-tag {
display: inline-block;
padding: 4px 10px;
background: rgba(124,58,237,0.2);
border: 1px solid var(--accent-purple);
border-radius: 6px;
font-size: 0.85rem;
margin: 2px;
}
.market-size {
color: var(--success-green);
font-weight: 500;
}
.domestic-rate {
color: var(--warning-yellow);
font-weight: 500;
}
/* 核心公司卡片 */
.company-card {
background: linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(236,72,153,0.1) 100%);
border: 1px solid var(--accent-purple);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.company-card:hover {
transform: translateX(10px);
box-shadow: -5px 5px 20px rgba(124,58,237,0.3);
}
.company-name {
font-size: 1.3rem;
font-weight: 600;
color: var(--accent-purple);
margin-bottom: 10px;
}
.company-role {
color: var(--text-secondary);
font-style: italic;
margin-bottom: 15px;
}
/* 风险提示 */
.risk-item {
display: flex;
align-items: start;
margin-bottom: 15px;
padding: 15px;
background: rgba(239,68,68,0.1);
border-left: 4px solid var(--danger-red);
border-radius: 8px;
}
.risk-item i {
color: var(--danger-red);
margin-right: 15px;
margin-top: 3px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-title {
font-size: 1.8rem;
}
.timeline::before {
left: 30px;
}
.timeline-content {
width: calc(100% - 60px);
margin-left: 60px !important;
}
.timeline-date {
width: calc(100% - 60px);
text-align: left !important;
left: 60px !important;
right: auto !important;
}
.timeline-dot {
left: 30px;
}
.stock-table {
font-size: 0.85rem;
}
.stock-table th,
.stock-table td {
padding: 8px;
}
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
/* 加载动画 */
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<!-- 头部英雄区域 -->
<section class="hero-section">
<div class="container">
<div class="text-center">
<h1 class="hero-title fade-in-up">
<i class="bi bi-cpu"></i> 关键软件概念深度解析
</h1>
<p class="hero-subtitle fade-in-up">
科技博弈v2软件时代 - 国产化替代的黄金赛道
</p>
<div class="fade-in-up">
<span class="meta-badge"><i class="bi bi-calendar-event"></i> 2025年10月焦点</span>
<span class="meta-badge"><i class="bi bi-flag"></i> 地缘政治驱动</span>
<span class="meta-badge"><i class="bi bi-graph-up-arrow"></i> 结构性机会</span>
</div>
</div>
</div>
</section>
<div class="container my-5">
<!-- 核心事件 -->
<div class="content-card fade-in-up">
<h2 class="section-title">
<i class="bi bi-lightning-charge"></i>
核心催化事件
</h2>
<div class="row">
<div class="col-md-6 mb-3">
<div class="alert alert-danger" role="alert">
<h5 class="alert-heading"><i class="bi bi-exclamation-triangle"></i> 美国制裁升级</h5>
<p class="mb-0">2025年10月10日美国宣布对"所有关键软件"实施出口管制,科技博弈进入软件时代</p>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="alert alert-success" role="alert">
<h5 class="alert-heading"><i class="bi bi-shield-check"></i> 国内政策对冲</h5>
<p class="mb-0">同日发布《政务领域人工智能大模型部署应用指引》,打造国产软件先行市场</p>
</div>
</div>
</div>
</div>
<!-- 时间轴 -->
<div class="content-card fade-in-up">
<h2 class="section-title">
<i class="bi bi-clock-history"></i>
关键事件时间轴
</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-date">2024年9月</div>
<div class="timeline-content">
<h5>工业软件量化目标</h5>
<p>国家出台设备更新指南设定200万套工业软件更新目标</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-date">2024年12月</div>
<div class="timeline-content">
<h5>美国投资限制</h5>
<p>美国将量子计算、AI列为对华投资限制领域</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-date">2025年3月</div>
<div class="timeline-content">
<h5>工信部表态</h5>
<p>聚焦AI、关键软件重点领域培育创新平台</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-date">2025年6月</div>
<div class="timeline-content">
<h5>技术反击</h5>
<p>国产EDA厂商合见工软宣布关键产品免费开放试用</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot pulse"></div>
<div class="timeline-date">2025年10月10日</div>
<div class="timeline-content">
<h5><strong>转折点</strong></h5>
<p><strong>美国实施"关键软件"出口管制中国发布政务AI指引</strong></p>
</div>
</div>
</div>
</div>
<!-- 核心逻辑 -->
<div class="content-card fade-in-up">
<h2 class="section-title">
<i class="bi bi-diagram-3"></i>
核心驱动力分析
</h2>
<div class="row">
<div class="col-md-4 mb-3">
<div class="text-center p-3 border rounded">
<i class="bi bi-shield-fill-exclamation" style="font-size: 3rem; color: var(--danger-red);"></i>
<h5 class="mt-3">地缘政治安全</h5>
<p class="text-secondary">软件自主从"可选项"提升到国家安全"必选项"</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="text-center p-3 border rounded">
<i class="bi bi-clipboard-data-fill" style="font-size: 3rem; color: var(--success-green);"></i>
<h5 class="mt-3">政策强力驱动</h5>
<p class="text-secondary">200万套量化目标创造真实可测算市场空间</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="text-center p-3 border rounded">
<i class="bi bi-lightbulb-fill" style="font-size: 3rem; color: var(--warning-yellow);"></i>
<h5 class="mt-3">技术突破拐点</h5>
<p class="text-secondary">国产软件跨过技术鸿沟,进入商业化落地阶段</p>
</div>
</div>
</div>
</div>
<!-- 重点公司分析 -->
<div class="content-card fade-in-up">
<h2 class="section-title">
<i class="bi bi-award-fill"></i>
核心玩家深度剖析
</h2>
<div class="company-card">
<h4 class="company-name">顶点软件 (603383)</h4>
<p class="company-role">金融IT核心系统的"破局者"</p>
<div class="row">
<div class="col-md-6">
<p><strong>竞争优势:</strong>唯一经过大规模验证的新一代分布式信创核心交易系统A5技术路线领先</p>
</div>
<div class="col-md-6">
<p><strong>业务进展:</strong>处于行业替换周期起点未来3-6年头部券商订单驱动业绩高增</p>
</div>
</div>
</div>
<div class="company-card">
<h4 class="company-name">宝信软件 (600845)</h4>
<p class="company-role">工业控制"皇冠明珠"的"国家队"</p>
<div class="row">
<div class="col-md-6">
<p><strong>竞争优势:</strong>国内唯一掌握大型PLC完整技术的公司技术壁垒极高</p>
</div>
<div class="col-md-6">
<p><strong>业务进展:</strong>2024年是国产化规模替代元年钢铁行业推广顺利</p>
</div>
</div>
</div>
<div class="company-card">
<h4 class="company-name">中国软件 (600536)</h4>
<p class="company-role">操作系统"国家队"</p>
<div class="row">
<div class="col-md-6">
<p><strong>竞争优势:</strong>持有麒麟软件47.23%股权,政策支持力度最大</p>
</div>
<div class="col-md-6">
<p><strong>业务进展:</strong>近期增资扩股落地,国企改革迈出关键一步</p>
</div>
</div>
</div>
</div>
<!-- 股票数据表格 -->
<div class="content-card fade-in-up">
<h2 class="section-title">
<i class="bi bi-table"></i>
关键软件概念股全景图
</h2>
<div class="table-responsive">
<table class="stock-table">
<thead>
<tr>
<th>股票名称</th>
<th>分类</th>
<th>行业</th>
<th>市场规模</th>
<th>国产化率</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<!-- 基础硬件 -->
<tr>
<td colspan="6" style="background: rgba(124,58,237,0.2); font-weight: bold;">🖥️ 基础硬件</td>
</tr>
<tr>
<td class="stock-name">海光信息</td>
<td><span class="industry-tag">芯片</span></td>
<td>基础硬件</td>
<td>-</td>
<td>-</td>
<td>相关个股</td>
</tr>
<tr>
<td class="stock-name">中科曙光</td>
<td><span class="industry-tag">服务器</span></td>
<td>基础硬件</td>
<td>-</td>
<td class="domestic-rate">90%+</td>
<td>相关个股</td>
</tr>
<!-- 基础软件 -->
<tr>
<td colspan="6" style="background: rgba(124,58,237,0.2); font-weight: bold;">⚙️ 基础软件</td>
</tr>
<tr>
<td class="stock-name">中国软件</td>
<td><span class="industry-tag">操作系统</span></td>
<td>基础软件</td>
<td class="market-size">250亿元</td>
<td class="domestic-rate">党政65%</td>
<td>相关个股</td>
</tr>
<tr>
<td class="stock-name">达梦数据</td>
<td><span class="industry-tag">数据库</span></td>
<td>基础软件</td>
<td class="market-size">668亿元</td>
<td class="domestic-rate">党政约80%</td>
<td>相关个股</td>
</tr>
<tr>
<td class="stock-name">东方通</td>
<td><span class="industry-tag">中间件</span></td>
<td>基础软件</td>
<td class="market-size">160亿元</td>
<td class="domestic-rate">2025年预计45%</td>
<td>相关个股</td>
</tr>
<!-- 金融IT -->
<tr>
<td colspan="6" style="background: rgba(124,58,237,0.2); font-weight: bold;">💰 金融IT</td>
</tr>
<tr>
<td class="stock-name">顶点软件</td>
<td><span class="industry-tag">证券IT</span></td>
<td>金融</td>
<td class="market-size">2025年8500亿元</td>
<td class="domestic-rate">60%+</td>
<td>相关个股</td>
</tr>
<tr>
<td class="stock-name">恒生电子</td>
<td><span class="industry-tag">证券IT</span></td>
<td>金融</td>
<td class="market-size">2025年8500亿元</td>
<td class="domestic-rate">60%+</td>
<td>相关个股</td>
</tr>
<tr>
<td class="stock-name">神州信息</td>
<td><span class="industry-tag">银行IT</span></td>
<td>金融</td>
<td class="market-size">2025年8500亿元</td>
<td class="domestic-rate">60%+</td>
<td>相关个股</td>
</tr>
<!-- 工业软件 -->
<tr>
<td colspan="6" style="background: rgba(124,58,237,0.2); font-weight: bold;">🏭 工业软件</td>
</tr>
<tr>
<td class="stock-name">中望软件</td>
<td><span class="industry-tag">辅助设计CAD</span></td>
<td>工业软件</td>
<td class="market-size">61.2亿元</td>
<td class="domestic-rate">27%</td>
<td>相关个股</td>
</tr>
<tr>
<td class="stock-name">宝信软件</td>
<td><span class="industry-tag">制造执行MES</span></td>
<td>工业软件</td>
<td class="market-size">80亿元</td>
<td class="domestic-rate">50-60%</td>
<td>相关个股</td>
</tr>
<tr>
<td class="stock-name">华大九天</td>
<td><span class="industry-tag">电子设计自动化EDA</span></td>
<td>工业软件</td>
<td class="market-size">149.5亿元</td>
<td class="domestic-rate">11.50%</td>
<td>相关个股</td>
</tr>
<tr>
<td class="stock-name">中控技术</td>
<td><span class="industry-tag">集散控制DCS</span></td>
<td>工业软件</td>
<td class="market-size">117.6亿元</td>
<td class="domestic-rate">2021年55.7%</td>
<td>相关个股</td>
</tr>
<!-- 应用软件 -->
<tr>
<td colspan="6" style="background: rgba(124,58,237,0.2); font-weight: bold;">📱 应用软件</td>
</tr>
<tr>
<td class="stock-name">金山办公</td>
<td><span class="industry-tag">办公Office</span></td>
<td>应用行业</td>
<td class="market-size">300亿元</td>
<td class="domestic-rate">40-50%</td>
<td>相关个股</td>
</tr>
<tr>
<td class="stock-name">用友网络</td>
<td><span class="industry-tag">企业资源规划ERP</span></td>
<td>应用行业</td>
<td class="market-size">550亿元</td>
<td class="domestic-rate">整体70%</td>
<td>相关个股</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 风险提示 -->
<div class="content-card fade-in-up">
<h2 class="section-title">
<i class="bi bi-exclamation-triangle-fill"></i>
潜在风险与挑战
</h2>
<div class="risk-item">
<i class="bi bi-bug-fill"></i>
<div>
<h5>技术风险</h5>
<p>在EDA、高端工业CAE等顶尖领域国产软件与海外巨头仍存在客观的性能和稳定性差距</p>
</div>
</div>
<div class="risk-item">
<i class="bi bi-currency-dollar"></i>
<div>
<h5>商业化风险</h5>
<p>替代初期项目制和服务占比较高,影响盈利能力;厂商间可能发生价格战</p>
</div>
</div>
<div class="risk-item">
<i class="bi bi-globe"></i>
<div>
<h5>政策与竞争风险</h5>
<p>中美关系若缓和可能导致推进紧迫性下降;国内不同厂商间存在"内耗式"竞争</p>
</div>
</div>
</div>
<!-- 投资启示 -->
<div class="content-card fade-in-up">
<h2 class="section-title">
<i class="bi bi-lightbulb"></i>
投资启示与跟踪指标
</h2>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card bg-dark border-primary">
<div class="card-body">
<h5 class="card-title text-primary">最具投资价值赛道</h5>
<ul class="list-unstyled">
<li><i class="bi bi-check-circle text-success"></i> 证券IT核心系统</li>
<li><i class="bi bi-check-circle text-success"></i> 大型PLC</li>
<li><i class="bi bi-check-circle text-success"></i> 操作系统</li>
<li><i class="bi bi-check-circle text-success"></i> 数据库</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card bg-dark border-success">
<div class="card-body">
<h5 class="card-title text-success">关键跟踪指标</h5>
<ul class="list-unstyled">
<li><i class="bi bi-clipboard-check text-info"></i> 大额订单公告</li>
<li><i class="bi bi-graph-up text-info"></i> 毛利率变化</li>
<li><i class="bi bi-cash-stack text-info"></i> 合同负债增长</li>
<li><i class="bi bi-pie-chart text-info"></i> 行业渗透率</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card bg-dark border-warning">
<div class="card-body">
<h5 class="card-title text-warning">近期催化剂</h5>
<ul class="list-unstyled">
<li><i class="bi bi-calendar-event text-warning"></i> 头部券商系统招标</li>
<li><i class="bi bi-people text-warning"></i> 工业软件生态大会</li>
<li><i class="bi bi-file-text text-warning"></i> 美国制裁细节明确</li>
<li><i class="bi bi-flag text-warning"></i> 政策持续加码</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="text-center py-4 mt-5" style="background: var(--card-bg); border-top: 1px solid var(--border-color);">
<p class="text-secondary mb-0">
<i class="bi bi-info-circle"></i> 本页面仅供研究参考,不构成投资建议 | 数据更新时间2025年10月
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in-up');
}
});
}, observerOptions);
document.querySelectorAll('.content-card').forEach(card => {
observer.observe(card);
});
// 表格行悬停效果
document.querySelectorAll('.stock-table tbody tr').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.cursor = 'pointer';
});
row.addEventListener('click', function() {
const stockName = this.querySelector('.stock-name').textContent;
console.log('查看股票详情:', stockName);
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,489 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="business">
<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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
}
.glass-card {
background: rgba(30, 41, 59, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.1);
}
.timeline-item::before {
content: '';
position: absolute;
left: -1px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #3b82f6, #8b5cf6);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
}
}
.gradient-text {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive::-webkit-scrollbar {
height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
background: rgba(30, 41, 59, 0.3);
}
.table-responsive::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
border-radius: 3px;
}
.stat-card {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
border: 1px solid rgba(59, 130, 246, 0.2);
}
.tech-badge {
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
</style>
</head>
<body class="bg-slate-900 text-slate-100">
<!-- Header -->
<header class="sticky top-0 z-50 glass-card border-b border-slate-700">
<div class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold gradient-text flex items-center gap-3">
<i class="fas fa-microchip"></i>
功率半导体概念分析
</h1>
<p class="text-slate-400 mt-1">周期复苏与结构升级的双轮驱动</p>
</div>
<div class="hidden md:flex items-center gap-4">
<span class="text-sm text-slate-400">更新时间2025年Q3</span>
<div class="badge badge-success gap-2">
<span class="w-2 h-2 bg-success rounded-full pulse-dot"></span>
高度关注
</div>
</div>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<!-- 核心观点摘要 -->
<section class="mb-8">
<div class="glass-card rounded-2xl p-6 hover-scale">
<h2 class="text-2xl font-bold mb-4 flex items-center gap-2">
<i class="fas fa-lightbulb text-yellow-400"></i>
核心观点摘要
</h2>
<div class="prose prose-invert max-w-none">
<p class="text-lg leading-relaxed text-slate-300">
功率半导体行业正处于由<span class="text-blue-400 font-semibold">周期触底回升</span><span class="text-purple-400 font-semibold">技术结构升级</span>双轮驱动的黄金发展期。其核心驱动力源于新能源车特别是800V高压平台和"风光储"带来的需求爆发,以及国产替代在成本和供应链安全优势下的加速渗透。
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div class="stat-card rounded-xl p-4">
<div class="text-3xl font-bold text-blue-400">35%↑</div>
<div class="text-sm text-slate-400 mt-1">800V架构2030年渗透率</div>
</div>
<div class="stat-card rounded-xl p-4">
<div class="text-3xl font-bold text-purple-400">50%+</div>
<div class="text-sm text-slate-400 mt-1">国产成本优势</div>
</div>
<div class="stat-card rounded-xl p-4">
<div class="text-3xl font-bold text-green-400">30%↓</div>
<div class="text-sm text-slate-400 mt-1">SiC损耗降低</div>
</div>
</div>
</div>
</section>
<!-- 关键事件时间轴 -->
<section class="mb-8">
<div class="glass-card rounded-2xl p-6">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-timeline text-blue-400"></i>
关键事件时间轴
</h2>
<div class="space-y-4">
<div class="timeline-item relative pl-8">
<div class="absolute left-0 top-1 w-3 h-3 bg-blue-500 rounded-full"></div>
<div class="flex justify-between items-start">
<div>
<span class="text-blue-400 font-semibold">2025-09-12</span>
<p class="mt-1">无锡振华报告800V架构渗透率2025-2030年从9.5%提升至35%以上</p>
</div>
<span class="tech-badge">800V</span>
</div>
</div>
<div class="timeline-item relative pl-8">
<div class="absolute left-0 top-1 w-3 h-3 bg-purple-500 rounded-full"></div>
<div class="flex justify-between items-start">
<div>
<span class="text-purple-400 font-semibold">2025-07-30</span>
<p class="mt-1">深蓝汽车与功率半导体龙头联合布局下一代芯片</p>
</div>
<span class="tech-badge">产业协同</span>
</div>
</div>
<div class="timeline-item relative pl-8">
<div class="absolute left-0 top-1 w-3 h-3 bg-green-500 rounded-full"></div>
<div class="flex justify-between items-start">
<div>
<span class="text-green-400 font-semibold">2025-02-02</span>
<p class="mt-1">太空验证国产SiC功率器件第三代半导体应用突破</p>
</div>
<span class="tech-badge">SiC</span>
</div>
</div>
<div class="timeline-item relative pl-8">
<div class="absolute left-0 top-1 w-3 h-3 bg-yellow-500 rounded-full"></div>
<div class="flex justify-between items-start">
<div>
<span class="text-yellow-400 font-semibold">2024-01-15</span>
<p class="mt-1">多家企业发布涨价函,行业供需关系逆转信号</p>
</div>
<span class="tech-badge">涨价潮</span>
</div>
</div>
</div>
</div>
</section>
<!-- 核心驱动力 -->
<section class="mb-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="glass-card rounded-2xl p-6 hover-scale">
<div class="flex items-center gap-3 mb-4">
<i class="fas fa-bolt text-3xl text-yellow-400"></i>
<h3 class="text-xl font-bold">能源革命</h3>
</div>
<ul class="space-y-2 text-slate-300">
<li class="flex items-start gap-2">
<i class="fas fa-car text-green-400 mt-1"></i>
<span>新能源汽车800V高压平台</span>
</li>
<li class="flex items-start gap-2">
<i class="fas fa-solar-panel text-yellow-400 mt-1"></i>
<span>光伏储能需求爆发</span>
</li>
<li class="flex items-start gap-2">
<i class="fas fa-charging-station text-blue-400 mt-1"></i>
<span>充电桩建设加速</span>
</li>
</ul>
</div>
<div class="glass-card rounded-2xl p-6 hover-scale">
<div class="flex items-center gap-3 mb-4">
<i class="fas fa-flag text-3xl text-red-400"></i>
<h3 class="text-xl font-bold">国产替代</h3>
</div>
<ul class="space-y-2 text-slate-300">
<li class="flex items-start gap-2">
<i class="fas fa-coins text-green-400 mt-1"></i>
<span>成本优势50%+</span>
</li>
<li class="flex items-start gap-2">
<i class="fas fa-shield-alt text-blue-400 mt-1"></i>
<span>供应链安全需求</span>
</li>
<li class="flex items-start gap-2">
<i class="fas fa-rocket text-purple-400 mt-1"></i>
<span>技术加速追赶</span>
</li>
</ul>
</div>
<div class="glass-card rounded-2xl p-6 hover-scale">
<div class="flex items-center gap-3 mb-4">
<i class="fas fa-microchip text-3xl text-purple-400"></i>
<h3 class="text-xl font-bold">技术迭代</h3>
</div>
<ul class="space-y-2 text-slate-300">
<li class="flex items-start gap-2">
<i class="fas fa-gem text-purple-400 mt-1"></i>
<span>SiC第三代半导体</span>
</li>
<li class="flex items-start gap-2">
<i class="fas fa-chart-line text-green-400 mt-1"></i>
<span>效率提升30%</span>
</li>
<li class="flex items-start gap-2">
<i class="fas fa-temperature-low text-blue-400 mt-1"></i>
<span>耐高温性能</span>
</li>
</ul>
</div>
</div>
</section>
<!-- 核心公司分析 -->
<section class="mb-8">
<div class="glass-card rounded-2xl p-6">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-building text-blue-400"></i>
核心公司分析
</h2>
<div class="table-responsive">
<table class="table table-zebra w-full">
<thead>
<tr class="text-slate-300 border-b border-slate-700">
<th class="bg-slate-800">公司名称</th>
<th class="bg-slate-800">产品分类</th>
<th class="bg-slate-800">市场地位/相关性</th>
<th class="bg-slate-800">数据来源</th>
<th class="bg-slate-800">核心逻辑</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-800/50">
<td class="font-semibold text-blue-400">华润微</td>
<td><span class="badge badge-info">MOSFET</span></td>
<td>A股第一中国市场市占率9%</td>
<td>中金企信2020年数据</td>
<td class="text-sm">IDM龙头全产业链一体化优势</td>
</tr>
<tr class="hover:bg-slate-800/50">
<td class="font-semibold text-blue-400">士兰微</td>
<td><span class="badge badge-info">MOSFET</span> <span class="badge badge-warning">IGBT</span></td>
<td>MOSFET A股第二IGBT国内第一</td>
<td>中金企信2020年数据</td>
<td class="text-sm">双产品线布局全球IGBT市占率3.4%</td>
</tr>
<tr class="hover:bg-slate-800/50">
<td class="font-semibold text-blue-400">斯达半导</td>
<td><span class="badge badge-warning">IGBT</span></td>
<td>IGBT模块国内第一全球市占率4.3%</td>
<td>研报2022年数据</td>
<td class="text-sm">车规级IGBT技术领先深度绑定大客户</td>
</tr>
<tr class="hover:bg-slate-800/50">
<td class="font-semibold text-blue-400">新洁能</td>
<td><span class="badge badge-info">MOSFET</span> <span class="badge badge-warning">IGBT</span></td>
<td>MOSFET A股第三市占率3.76%</td>
<td>中金企信2020年数据</td>
<td class="text-sm">产品迭代快,光伏服务器电源增长迅速</td>
</tr>
<tr class="hover:bg-slate-800/50">
<td class="font-semibold text-blue-400">时代电气</td>
<td><span class="badge badge-warning">IGBT</span></td>
<td>IGBT模块国内第二全球市占率4.1%</td>
<td>研报2022年数据</td>
<td class="text-sm">轨道交通技术积累,拓展新能源汽车</td>
</tr>
<tr class="hover:bg-slate-800/50">
<td class="font-semibold text-blue-400">扬杰科技</td>
<td><span class="badge badge-warning">IGBT</span></td>
<td>8/12寸IGBT芯片全系列批量出货</td>
<td>调研数据</td>
<td class="text-sm">涨价潮主力,中低压产品库存干净</td>
</tr>
<tr class="hover:bg-slate-800/50">
<td class="font-semibold text-blue-400">芯联集成</td>
<td><span class="badge badge-secondary">SiC MOSFET</span></td>
<td>2025年H1 SiC出货量亚洲前列</td>
<td>调研数据</td>
<td class="text-sm">SiC领域快速突破代工产能优势</td>
</tr>
<tr class="hover:bg-slate-800/50">
<td class="font-semibold text-blue-400">东微半导</td>
<td><span class="badge badge-info">MOSFET</span></td>
<td>超级结MOSFET在12英寸基地扩容</td>
<td>半年报</td>
<td class="text-sm">技术领先,高端产品占比提升</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 风险提示 -->
<section class="mb-8">
<div class="glass-card rounded-2xl p-6">
<h2 class="text-2xl font-bold mb-4 flex items-center gap-2">
<i class="fas fa-exclamation-triangle text-yellow-400"></i>
关键风险与挑战
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="alert alert-warning">
<i class="fas fa-microchip"></i>
<div>
<h4 class="font-bold">技术风险</h4>
<p class="text-sm">SiC衬底良率和成本仍是制约第三代半导体大规模应用的核心瓶颈</p>
</div>
</div>
<div class="alert alert-error">
<i class="fas fa-dollar-sign"></i>
<div>
<h4 class="font-bold">商业化风险</h4>
<p class="text-sm">SiC器件价格过高车企搭载意愿不及预期</p>
</div>
</div>
<div class="alert alert-info">
<i class="fas fa-globe"></i>
<div>
<h4 class="font-bold">竞争风险</h4>
<p class="text-sm">海外巨头反制,价格战"内卷"压力</p>
</div>
</div>
<div class="alert alert-success">
<i class="fas fa-chart-line"></i>
<div>
<h4 class="font-bold">预期差风险</h4>
<p class="text-sm">涨价仅限中低压产品,非全面复苏</p>
</div>
</div>
</div>
</div>
</section>
<!-- 投资启示 -->
<section>
<div class="glass-card rounded-2xl p-6">
<h2 class="text-2xl font-bold mb-4 flex items-center gap-2">
<i class="fas fa-chart-pie text-green-400"></i>
投资启示
</h2>
<div class="prose prose-invert max-w-none">
<p class="text-lg text-slate-300 mb-4">
功率半导体概念正从<span class="text-yellow-400">主题炒作阶段</span>,逐步过渡到<span class="text-green-400">基本面驱动的分化阶段</span>。行业的贝塔行情普涨期已过,未来将是阿尔法机会的天下。
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div class="bg-gradient-to-br from-blue-900/50 to-purple-900/50 rounded-xl p-4 border border-blue-500/30">
<h4 class="font-bold text-blue-400 mb-2">
<i class="fas fa-crown mr-2"></i>拥抱结构升级
</h4>
<p class="text-sm text-slate-300">
优先选择汽车电子800V/SiC和绿色能源赛道中具备核心技术护城河的公司
</p>
</div>
<div class="bg-gradient-to-br from-green-900/50 to-emerald-900/50 rounded-xl p-4 border border-green-500/30">
<h4 class="font-bold text-green-400 mb-2">
<i class="fas fa-chart-line mr-2"></i>布局周期复苏
</h4>
<p class="text-sm text-slate-300">
关注中低压产品占比高、成本控制能力强的弹性品种
</p>
</div>
<div class="bg-gradient-to-br from-purple-900/50 to-pink-900/50 rounded-xl p-4 border border-purple-500/30">
<h4 class="font-bold text-purple-400 mb-2">
<i class="fas fa-water mr-2"></i>挖掘隐形冠军
</h4>
<p class="text-sm text-slate-300">
配套散热基板等关键组件的细分龙头将直接受益产业升级
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="glass-card border-t border-slate-700 mt-12">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-slate-400 text-sm">© 2025 功率半导体概念分析 | 数据来源:公开研究报告及公告</p>
<div class="flex gap-4 mt-4 md:mt-0">
<span class="badge badge-outline gap-2">
<i class="fas fa-info-circle"></i>
仅供研究参考
</span>
<span class="badge badge-outline gap-2">
<i class="fas fa-sync-alt"></i>
实时更新
</span>
</div>
</div>
</div>
</footer>
<script>
// 添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 添加滚动动画
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('.hover-scale').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);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,763 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>努比亚手机 - AI转型概念深度分析</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-shadow {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.timeline-dot {
width: 16px;
height: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
}
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 25px 30px -10px rgba(0, 0, 0, 0.15);
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.neon-text {
text-shadow: 0 0 10px rgba(102, 126, 234, 0.5), 0 0 20px rgba(102, 126, 234, 0.3);
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.stock-table {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}
.risk-badge {
animation: blink 2s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
</style>
</head>
<body class="bg-base-200">
<!-- Hero Section -->
<div class="hero min-h-screen gradient-bg relative overflow-hidden">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-6xl">
<h1 class="mb-5 text-5xl md:text-7xl font-black neon-text">努比亚手机</h1>
<p class="mb-8 text-xl md:text-2xl font-light">AI转型概念深度分析报告</p>
<div class="flex flex-wrap justify-center gap-4 mb-8">
<div class="badge badge-lg badge-outline pulse-animation">
<i class="fas fa-microchip mr-2"></i>AI手机转型
</div>
<div class="badge badge-lg badge-outline pulse-animation">
<i class="fas fa-handshake mr-2"></i>火山引擎合作
</div>
<div class="badge badge-lg badge-outline pulse-animation">
<i class="fas fa-rocket mr-2"></i>端侧AI赋能
</div>
</div>
<div class="stats shadow-2xl glass-effect">
<div class="stat">
<div class="stat-figure text-primary">
<i class="fas fa-building text-3xl"></i>
</div>
<div class="stat-title">母公司</div>
<div class="stat-value">中兴通讯</div>
<div class="stat-desc">持股78.33%</div>
</div>
<div class="stat">
<div class="stat-figure text-secondary">
<i class="fas fa-mobile-alt text-3xl"></i>
</div>
<div class="stat-title">核心产品</div>
<div class="stat-value">3大系列</div>
<div class="stat-desc">Z系列/红魔/Flip</div>
</div>
<div class="stat">
<div class="stat-figure text-accent">
<i class="fas fa-chart-line text-3xl"></i>
</div>
<div class="stat-title">预期定位</div>
<div class="stat-value">5-7K</div>
<div class="stat-desc">中高端市场</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="sticky top-0 z-50 navbar bg-base-300 shadow-lg glass-effect">
<div class="flex-1">
<a class="btn btn-ghost normal-case text-xl">
<i class="fas fa-mobile-alt mr-2"></i>努比亚AI概念
</a>
</div>
<div class="flex-none">
<ul class="menu menu-horizontal px-1">
<li><a href="#timeline"><i class="fas fa-clock"></i>时间线</a></li>
<li><a href="#analysis"><i class="fas fa-chart-bar"></i>深度分析</a></li>
<li><a href="#stocks"><i class="fas fa-table"></i>产业链</a></li>
<li><a href="#risks"><i class="fas fa-exclamation-triangle"></i>风险</a></li>
</ul>
</div>
</div>
<!-- Timeline Section -->
<section id="timeline" class="py-20 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="fas fa-timeline mr-3 text-primary"></i>核心事件时间轴
</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-primary to-secondary"></div>
<div class="flex flex-col gap-8">
<!-- Timeline Item 1 -->
<div class="flex items-center w-full">
<div class="w-full md:w-1/2 text-right pr-8">
<div class="card bg-base-100 shadow-xl hover-lift">
<div class="card-body">
<h3 class="card-title text-primary">2024年12月19日</h3>
<p>市场传出努比亚与火山引擎合作,引入豆包大模型,成为"字节系AI手机"</p>
</div>
</div>
</div>
<div class="timeline-dot"></div>
<div class="w-full md:w-1/2 pl-8"></div>
</div>
<!-- Timeline Item 2 -->
<div class="flex items-center w-full">
<div class="w-full md:w-1/2 pr-8"></div>
<div class="timeline-dot"></div>
<div class="w-full md:w-1/2 text-left pl-8">
<div class="card bg-base-100 shadow-xl hover-lift">
<div class="card-body">
<h3 class="card-title text-warning">2025年1月2日</h3>
<p>字节跳动官方辟谣与努比亚合作开发AI手机称"没有相关计划"</p>
<div class="badge badge-warning">辟谣</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex items-center w-full">
<div class="w-full md:w-1/2 text-right pr-8">
<div class="card bg-base-100 shadow-xl hover-lift">
<div class="card-body">
<h3 class="card-title text-success">2025年3月4日</h3>
<p>努比亚Flip 2发布内嵌多款专家大模型星云、豆包、DeepSeek等</p>
<div class="badge badge-success">产品发布</div>
</div>
</div>
</div>
<div class="timeline-dot"></div>
<div class="w-full md:w-1/2 pl-8"></div>
</div>
<!-- Timeline Item 4 -->
<div class="flex items-center w-full">
<div class="w-full md:w-1/2 pr-8"></div>
<div class="timeline-dot"></div>
<div class="w-full md:w-1/2 text-left pl-8">
<div class="card bg-base-100 shadow-xl hover-lift">
<div class="card-body">
<h3 class="card-title text-info">2025年10月21日</h3>
<p>努比亚×火山引擎正式宣布豆包大模型加持红魔11 Pro、Nubia Z80 Ultra等新机</p>
<div class="badge badge-info">官宣合作</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Analysis Section -->
<section id="analysis" class="py-20 px-4 bg-base-300">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="fas fa-microscope mr-3 text-primary"></i>核心逻辑深度剖析
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
<!-- 核心驱动力 -->
<div class="card bg-base-100 shadow-xl hover-lift">
<div class="card-body">
<h3 class="card-title text-primary">
<i class="fas fa-cogs mr-2"></i>技术赋能驱动
</h3>
<ul class="space-y-2 mt-4">
<li class="flex items-start">
<i class="fas fa-check-circle text-success mr-2 mt-1"></i>
<span>大模型能力接入豆包、DeepSeek等多个专家大模型</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-success mr-2 mt-1"></i>
<span>场景化落地相册、语音助手、游戏等具体场景AI功能</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-success mr-2 mt-1"></i>
<span>成本优势:合作模式相比自研投入产出比更高</span>
</li>
</ul>
</div>
</div>
<!-- 市场机遇 -->
<div class="card bg-base-100 shadow-xl hover-lift">
<div class="card-body">
<h3 class="card-title text-secondary">
<i class="fas fa-chart-line mr-2"></i>市场格局重塑机遇
</h3>
<div class="mt-4">
<p class="mb-3">AI浪潮下传统手机市场格局面临重构努比亚作为二线品牌试图通过AI差异化实现"弯道超车"。</p>
<div class="alert alert-info">
<i class="fas fa-info-circle"></i>
<span>路演观点:"非传统厂商如努比亚有望逆袭"</span>
</div>
</div>
</div>
</div>
</div>
<!-- 预期差分析 -->
<div class="card bg-gradient-to-r from-primary/10 to-secondary/10 shadow-xl">
<div class="card-body">
<h3 class="card-title text-2xl mb-6">
<i class="fas fa-balance-scale mr-2"></i>三大预期差分析
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="stat bg-base-100 rounded-lg">
<div class="stat-figure text-warning">
<i class="fas fa-handshake-slash text-2xl"></i>
</div>
<div class="stat-title">合作深度预期差</div>
<div class="stat-value text-lg">技术接入</div>
<div class="stat-desc">非战略级深度合作</div>
</div>
<div class="stat bg-base-100 rounded-lg">
<div class="stat-figure text-info">
<i class="fas fa-mobile-alt text-2xl"></i>
</div>
<div class="stat-title">产品落地预期差</div>
<div class="stat-value text-lg">体验有限</div>
<div class="stat-desc">AI功能仍需突破</div>
</div>
<div class="stat bg-base-100 rounded-lg">
<div class="stat-figure text-error">
<i class="fas fa-trophy text-2xl"></i>
</div>
<div class="stat-title">市场地位预期差</div>
<div class="stat-value text-lg">稳定增长</div>
<div class="stat-desc">非爆发式增长预期</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Development Path -->
<section class="py-20 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="fas fa-road mr-3 text-primary"></i>发展路径规划
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="card bg-base-100 shadow-xl hover-lift">
<div class="card-body">
<div class="badge badge-primary badge-lg mb-4">第一阶段</div>
<h3 class="card-title">2024-2025 AI功能导入期</h3>
<ul class="mt-4 space-y-2">
<li>• 完成主要产品线AI化改造</li>
<li>• 建立与火山引擎稳定合作</li>
<li>• 细分市场建立AI差异化</li>
</ul>
</div>
</div>
<div class="card bg-base-100 shadow-xl hover-lift">
<div class="card-body">
<div class="badge badge-secondary badge-lg mb-4">第二阶段</div>
<h3 class="card-title">2025-2026 市场验证期</h3>
<ul class="mt-4 space-y-2">
<li>• AI功能从"尝鲜"向"刚需"转变</li>
<li>• 根据用户反馈优化AI体验</li>
<li>• 市场份额提升成为关键指标</li>
</ul>
</div>
</div>
<div class="card bg-base-100 shadow-xl hover-lift">
<div class="card-body">
<div class="badge badge-accent badge-lg mb-4">第三阶段</div>
<h3 class="card-title">2026后 生态构建期</h3>
<ul class="mt-4 space-y-2">
<li>• 硬件+AI服务转型</li>
<li>• 构建努比亚AI生态</li>
<li>• 实现商业模式可持续性</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Table Section -->
<section id="stocks" class="py-20 px-4 bg-base-300">
<div class="container mx-auto max-w-7xl">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="fas fa-network-wired mr-3 text-primary"></i>产业链核心标的
</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full stock-table">
<thead>
<tr class="text-lg">
<th class="bg-primary/20">股票代码</th>
<th class="bg-primary/20">关系类型</th>
<th class="bg-primary/20">具体说明</th>
<th class="bg-primary/20">验证来源</th>
<th class="bg-primary/20">投资价值</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td class="font-bold text-success">中兴通讯</td>
<td><div class="badge badge-success">股权关系</div></td>
<td>持有努比亚78.33%股权,努比亚为旗下手机品牌之一</td>
<td><div class="badge badge-outline">工商登记</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold text-info">道明光学</td>
<td><div class="badge badge-info">产业链</div></td>
<td>石墨烯散热膜进入努比亚折叠屏手机供应链</td>
<td><div class="badge badge-outline">调研</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">裕同科技</td>
<td><div class="badge badge-secondary">客户</div></td>
<td>包装业务客户包括努比亚</td>
<td><div class="badge badge-outline">招股书</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">维信诺</td>
<td><div class="badge badge-primary">合作</div></td>
<td>与努比亚保持良好合作关系</td>
<td><div class="badge badge-outline">调研</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">联得装备</td>
<td><div class="badge badge-accent">项目</div></td>
<td>柔性AMOLED产品应用于努比亚X双屏手机</td>
<td><div class="badge badge-outline">年报</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">思泉新材</td>
<td><div class="badge badge-secondary">客户</div></td>
<td>下游终端客户包括努比亚</td>
<td><div class="badge badge-outline">公告</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">必易微</td>
<td><div class="badge badge-secondary">客户</div></td>
<td>通用电源管理领域终端客户包括努比亚</td>
<td><div class="badge badge-outline">调研</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">崇达技术</td>
<td><div class="badge badge-info">供应链</div></td>
<td>向努比亚供应PCB产品</td>
<td><div class="badge badge-outline">互动</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">同兴达</td>
<td><div class="badge badge-accent">项目</div></td>
<td>液晶显示模组应用于努比亚等一线品牌</td>
<td><div class="badge badge-outline">半年报</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">联创电子</td>
<td><div class="badge badge-primary">合作</div></td>
<td>与努比亚等手机品牌合作</td>
<td><div class="badge badge-outline">互动</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">瑞丰光电</td>
<td><div class="badge badge-accent">项目</div></td>
<td>子公司为努比亚X提供Mini线光源模组</td>
<td><div class="badge badge-outline">互动</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
<tr class="hover">
<td class="font-bold">鸿富瀚</td>
<td><div class="badge badge-info">供应链</div></td>
<td>导热铜管产品获努比亚合格供应商资质</td>
<td><div class="badge badge-outline">公告</div></td>
<td>
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" checked />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
<input type="radio" class="mask mask-star-2 bg-warning" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Risk Section -->
<section id="risks" class="py-20 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="fas fa-exclamation-triangle mr-3 text-error"></i>风险提示与挑战
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 技术风险 -->
<div class="card bg-error/10 border-2 border-error shadow-xl">
<div class="card-body">
<h3 class="card-title text-error">
<i class="fas fa-microchip mr-2"></i>技术风险
</h3>
<ul class="space-y-2 mt-4">
<li class="flex items-start">
<i class="fas fa-times-circle text-error mr-2 mt-1"></i>
<span>AI体验瓶颈难以实现真正智能交互</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-error mr-2 mt-1"></i>
<span>算力限制端侧AI受手机算力限制</span>
</li>
</ul>
</div>
</div>
<!-- 商业化风险 -->
<div class="card bg-warning/10 border-2 border-warning shadow-xl">
<div class="card-body">
<h3 class="card-title text-warning">
<i class="fas fa-dollar-sign mr-2"></i>商业化风险
</h3>
<ul class="space-y-2 mt-4">
<li class="flex items-start">
<i class="fas fa-exclamation-circle text-warning mr-2 mt-1"></i>
<span>成本压力AI功能增加硬件成本</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-circle text-warning mr-2 mt-1"></i>
<span>市场接受度:消费者认知度低</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-circle text-warning mr-2 mt-1"></i>
<span>竞争激烈一线品牌同样布局AI</span>
</li>
</ul>
</div>
</div>
<!-- 合作风险 -->
<div class="card bg-info/10 border-2 border-info shadow-xl">
<div class="card-body">
<h3 class="card-title text-info">
<i class="fas fa-handshake-slash mr-2"></i>合作风险
</h3>
<ul class="space-y-2 mt-4">
<li class="flex items-start">
<i class="fas fa-info-circle text-info mr-2 mt-1"></i>
<span>巨头挤压苹果、三星AI手机即将发布</span>
</li>
<li class="flex items-start">
<i class="fas fa-info-circle text-info mr-2 mt-1"></i>
<span>合作不确定:火山引擎合作深度有限</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 关键矛盾 -->
<div class="alert alert-error mt-8 shadow-xl risk-badge">
<i class="fas fa-exclamation-triangle text-2xl"></i>
<div>
<h3 class="font-bold text-lg">关键信息矛盾</h3>
<p>2025年1月2日字节跳动明确否认合作开发AI手机与2024年12月市场传闻存在矛盾需密切关注后续进展</p>
</div>
</div>
</div>
</section>
<!-- Investment Advice -->
<section class="py-20 px-4 bg-base-300">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="fas fa-lightbulb mr-3 text-warning"></i>投资策略建议
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card bg-gradient-to-br from-success/20 to-success/10 shadow-xl">
<div class="card-body">
<h3 class="card-title text-success text-2xl mb-4">
<i class="fas fa-chart-line mr-2"></i>投资策略
</h3>
<div class="space-y-4">
<div class="badge badge-success badge-lg">低位布局 + 分批建仓</div>
<p>重点关注产业链上游确定性较高的标的密切跟踪努比亚AI手机市场反馈</p>
<div class="alert alert-success">
<i class="fas fa-check"></i>
<span>若2025年Q2出货量数据超预期可加大配置力度</span>
</div>
</div>
</div>
</div>
<div class="card bg-gradient-to-br from-info/20 to-info/10 shadow-xl">
<div class="card-body">
<h3 class="card-title text-info text-2xl mb-4">
<i class="fas fa-crosshairs mr-2"></i>重点标的
</h3>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="font-bold">上游零部件</span>
<div class="badge badge-info">道明光学</div>
</div>
<div class="flex items-center justify-between">
<span class="font-bold">母公司</span>
<div class="badge badge-info">中兴通讯</div>
</div>
<div class="flex items-center justify-between">
<span class="font-bold">AI服务商</span>
<div class="badge badge-info">火山引擎概念</div>
</div>
</div>
</div>
</div>
</div>
<!-- 跟踪指标 -->
<div class="card bg-base-100 shadow-xl mt-8">
<div class="card-body">
<h3 class="card-title text-2xl mb-6">
<i class="fas fa-tachometer-alt mr-2"></i>关键跟踪指标
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="text-center p-4 bg-primary/10 rounded-lg">
<i class="fas fa-calendar-day text-3xl text-primary mb-2"></i>
<h4 class="font-bold mb-2">短期指标</h4>
<p class="text-sm">努比亚新品发布节奏、AI功能用户活跃度</p>
</div>
<div class="text-center p-4 bg-secondary/10 rounded-lg">
<i class="fas fa-calendar-week text-3xl text-secondary mb-2"></i>
<h4 class="font-bold mb-2">中期指标</h4>
<p class="text-sm">2025年Q2-Q3努比亚手机出货量及市场份额变化</p>
</div>
<div class="text-center p-4 bg-accent/10 rounded-lg">
<i class="fas fa-calendar-alt text-3xl text-accent mb-2"></i>
<h4 class="font-bold mb-2">长期指标</h4>
<p class="text-sm">AI手机业务对中兴通讯消费者业务收入贡献度</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer footer-center p-10 bg-base-200 text-base-content">
<div>
<i class="fas fa-mobile-alt text-5xl text-primary mb-4"></i>
<p class="font-bold text-lg">努比亚AI手机概念深度分析</p>
<p>基于2024-2025年市场数据与研究报告整理</p>
</div>
<div class="divider"></div>
<div class="text-sm text-base-content/70">
<p class="font-bold mb-2">风险提示</p>
<p>AI手机市场教育不及预期 | 技术迭代速度放缓 | 行业竞争加剧导致盈利能力下降</p>
<p class="mt-2">本报告仅供参考,不构成任何投资建议</p>
</div>
</footer>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add fade-in animation on scroll
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').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'all 0.6s ease';
observer.observe(card);
});
</script>
</body>
</html>

584
public/htmls/北交所.html Normal file
View File

@@ -0,0 +1,584 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北交所概念深度分析 - 中国资本市场的新篇章</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.glow-text {
text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}
.stock-table {
min-width: 1200px;
overflow-x: auto;
}
@media (max-width: 768px) {
.stock-table {
min-width: 100%;
}
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.number-animate {
animation: countUp 2s ease-out;
}
@keyframes countUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<div class="gradient-bg text-white py-20 px-4">
<div class="max-w-7xl mx-auto text-center">
<div class="mb-6">
<i class="fas fa-chart-line text-6xl mb-4 glow-text"></i>
</div>
<h1 class="text-5xl font-bold mb-4 glow-text">北交所概念深度分析</h1>
<p class="text-xl mb-8">中国资本市场的新篇章 · 专精特新企业的摇篮</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto mt-12">
<div class="glass-effect rounded-lg p-6 card-hover">
<div class="text-4xl font-bold number-animate">260+</div>
<div class="text-lg">上市公司数量</div>
</div>
<div class="glass-effect rounded-lg p-6 card-hover">
<div class="text-4xl font-bold number-animate">7000亿</div>
<div class="text-lg">总市值规模</div>
</div>
<div class="glass-effect rounded-lg p-6 card-hover">
<div class="text-4xl font-bold number-animate">50%</div>
<div class="text-lg">专精特新占比</div>
</div>
</div>
</div>
</div>
<!-- Core Concepts Section -->
<div class="max-w-7xl mx-auto px-4 py-12">
<div class="mb-8">
<h2 class="text-3xl font-bold text-gray-800 mb-4">
<i class="fas fa-lightbulb text-purple-600 mr-2"></i>核心观点摘要
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-purple-600 text-2xl mb-3">
<i class="fas fa-rocket"></i>
</div>
<h3 class="text-xl font-semibold mb-2">政策驱动根本逻辑</h3>
<p class="text-gray-600">北交所的诞生与发展,首要驱动力是国家战略意志。"深改19条"等一系列政策举措,目标是打造服务创新型中小企业的专业化平台。</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-blue-600 text-2xl mb-3">
<i class="fas fa-puzzle-piece"></i>
</div>
<h3 class="text-xl font-semibold mb-2">市场结构补充</h3>
<p class="text-gray-600">专注"更早、更小、更新"企业与沪深市场形成差异化互补超50%为国家级专精特新"小巨人"企业。</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-green-600 text-2xl mb-3">
<i class="fas fa-chart-area"></i>
</div>
<h3 class="text-xl font-semibold mb-2">流动性重塑估值</h3>
<p class="text-gray-600">投资者门槛降低带来数百万新增用户日均换手率从不足1%跃升至5%以上,引发估值系统性重估。</p>
</div>
</div>
</div>
<!-- Timeline Section -->
<div class="bg-gray-100 py-12 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
<i class="fas fa-history text-purple-600 mr-2"></i>发展历程与关键节点
</h2>
<div class="relative">
<div class="timeline-line absolute left-1/2 transform -translate-x-1/2 w-1 h-full"></div>
<div class="space-y-12">
<div class="flex items-center">
<div class="flex-1 text-right pr-8">
<div class="bg-white rounded-lg p-4 shadow-lg card-hover">
<h3 class="font-semibold text-lg">奠基与探索期</h3>
<p class="text-gray-600">2021-2022年</p>
<p class="text-sm">北交所正式开市首批81家企业挂牌日均成交额6.63亿元</p>
</div>
</div>
<div class="w-4 h-4 bg-purple-600 rounded-full pulse"></div>
<div class="flex-1 pl-8"></div>
</div>
<div class="flex items-center">
<div class="flex-1 pr-8"></div>
<div class="w-4 h-4 bg-purple-600 rounded-full pulse"></div>
<div class="flex-1 pl-8">
<div class="bg-white rounded-lg p-4 shadow-lg card-hover">
<h3 class="font-semibold text-lg">政策引爆与重估期</h3>
<p class="text-gray-600">2023年9月-2024年2月</p>
<p class="text-sm">"深改19条"发布北证50指数三月涨幅超100%新股首日平均涨幅350%</p>
</div>
</div>
</div>
<div class="flex items-center">
<div class="flex-1 text-right pr-8">
<div class="bg-white rounded-lg p-4 shadow-lg card-hover">
<h3 class="font-semibold text-lg">分化与理性回归</h3>
<p class="text-gray-600">2024年3月-11月</p>
<p class="text-sm">估值达99%历史高位,市场观点转向"攻转守",关注基本面价值</p>
</div>
</div>
<div class="w-4 h-4 bg-purple-600 rounded-full pulse"></div>
<div class="flex-1 pl-8"></div>
</div>
<div class="flex items-center">
<div class="flex-1 pr-8"></div>
<div class="w-4 h-4 bg-purple-600 rounded-full pulse"></div>
<div class="flex-1 pl-8">
<div class="bg-white rounded-lg p-4 shadow-lg card-hover">
<h3 class="font-semibold text-lg">深化发展新阶段</h3>
<p class="text-gray-600">2024年底至今</p>
<p class="text-sm">"920"代码统一推出可转债鼓励H股发行并购重组活跃</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Market Analysis -->
<div class="max-w-7xl mx-auto px-4 py-12">
<h2 class="text-3xl font-bold text-gray-800 mb-8">
<i class="fas fa-chart-pie text-purple-600 mr-2"></i>市场认知与估值分析
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-semibold mb-4">市场情绪演变</h3>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-3 h-3 bg-red-500 rounded-full mr-3"></div>
<div>
<span class="font-medium">狂热期</span>
<span class="text-gray-600 ml-2">2023年底-2024年初</span>
</div>
</div>
<div class="flex items-center">
<div class="w-3 h-3 bg-yellow-500 rounded-full mr-3"></div>
<div>
<span class="font-medium">过渡期</span>
<span class="text-gray-600 ml-2">2024年中</span>
</div>
</div>
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
<div>
<span class="font-medium">理性期</span>
<span class="text-gray-600 ml-2">2024年底至今</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-semibold mb-4">关键估值指标</h3>
<div class="grid grid-cols-2 gap-4">
<div class="text-center p-4 bg-purple-50 rounded-lg">
<div class="text-2xl font-bold text-purple-600">58.03x</div>
<div class="text-sm text-gray-600">PE(TTM)峰值</div>
</div>
<div class="text-center p-4 bg-blue-50 rounded-lg">
<div class="text-2xl font-bold text-blue-600">4.78x</div>
<div class="text-sm text-gray-600">PB(LF)峰值</div>
</div>
<div class="text-center p-4 bg-green-50 rounded-lg">
<div class="text-2xl font-bold text-green-600">4.86%</div>
<div class="text-sm text-gray-600">平均ROE</div>
</div>
<div class="text-center p-4 bg-orange-50 rounded-lg">
<div class="text-2xl font-bold text-orange-600">5.75%</div>
<div class="text-sm text-gray-600">日均换手率</div>
</div>
</div>
</div>
</div>
</div>
<!-- Catalysts Section -->
<div class="bg-gradient-to-r from-purple-50 to-blue-50 py-12 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-gray-800 mb-8">
<i class="fas fa-fire text-orange-500 mr-2"></i>关键催化剂
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<h3 class="text-lg font-semibold mb-3 text-purple-600">
<i class="fas fa-arrow-right mr-2"></i>近期催化剂3-6个月
</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>首批直接IPO企业落地</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>北证专精特新指数ETF推出</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>H股发行实现破局</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>并购重组案例增多</span>
</li>
</ul>
</div>
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<h3 class="text-lg font-semibold mb-3 text-blue-600">
<i class="fas fa-globe mr-2"></i>长期发展路径3-5年
</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-arrow-up text-blue-500 mt-1 mr-2"></i>
<span>市场生态成熟期上市公司500+</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-up text-blue-500 mt-1 mr-2"></i>
<span>价值发现与蓝筹涌现期</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-up text-blue-500 mt-1 mr-2"></i>
<span>转板机制常态化</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-up text-blue-500 mt-1 mr-2"></i>
<span>国际影响力提升期</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="max-w-7xl mx-auto px-4 py-12">
<h2 class="text-3xl font-bold text-gray-800 mb-8">
<i class="fas fa-table text-purple-600 mr-2"></i>产业链核心公司
</h2>
<div class="bg-white rounded-xl shadow-lg overflow-x-auto">
<div class="stock-table">
<table class="w-full">
<thead class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<tr>
<th class="px-6 py-4 text-left">股票名称</th>
<th class="px-6 py-4 text-left">分类</th>
<th class="px-6 py-4 text-left">行业</th>
<th class="px-6 py-4 text-left">项目</th>
<th class="px-6 py-4 text-left">产业链</th>
<th class="px-6 py-4 text-left">关联原因</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<!-- 光伏产业链 -->
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-medium">隆基绿能</td>
<td class="px-6 py-4"><span class="badge bg-green-100 text-green-800 px-2 py-1 rounded">光伏</span></td>
<td class="px-6 py-4">光伏设备</td>
<td class="px-6 py-4">高效电池</td>
<td class="px-6 py-4">单晶硅</td>
<td class="px-6 py-4 text-sm text-gray-600">光伏龙头,单晶硅技术领先</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-medium">通威股份</td>
<td class="px-6 py-4"><span class="badge bg-green-100 text-green-800 px-2 py-1 rounded">光伏</span></td>
<td class="px-6 py-4">光伏设备</td>
<td class="px-6 py-4">硅料</td>
<td class="px-6 py-4">硅料</td>
<td class="px-6 py-4 text-sm text-gray-600">全球硅料龙头</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-medium">晶澳科技</td>
<td class="px-6 py-4"><span class="badge bg-green-100 text-green-800 px-2 py-1 rounded">光伏</span></td>
<td class="px-6 py-4">光伏设备</td>
<td class="px-6 py-4">组件</td>
<td class="px-6 py-4">组件</td>
<td class="px-6 py-4 text-sm text-gray-600">全球组件领先企业</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-medium">福斯特</td>
<td class="px-6 py-4"><span class="badge bg-green-100 text-green-800 px-2 py-1 rounded">光伏</span></td>
<td class="px-6 py-4">光伏设备</td>
<td class="px-6 py-4">胶膜</td>
<td class="px-6 py-4">胶膜</td>
<td class="px-6 py-4 text-sm text-gray-600">光伏胶膜绝对龙头</td>
</tr>
<!-- 半导体产业链 -->
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-6 py-4 font-medium">韦尔股份</td>
<td class="px-6 py-4"><span class="badge bg-blue-100 text-blue-800 px-2 py-1 rounded">半导体</span></td>
<td class="px-6 py-4">半导体</td>
<td class="px-6 py-4">芯片设计</td>
<td class="px-6 py-4">图像传感器</td>
<td class="px-6 py-4 text-sm text-gray-600">CIS芯片设计龙头</td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-6 py-4 font-medium">中芯国际</td>
<td class="px-6 py-4"><span class="badge bg-blue-100 text-blue-800 px-2 py-1 rounded">半导体</span></td>
<td class="px-6 py-4">半导体</td>
<td class="px-6 py-4">晶圆代工</td>
<td class="px-6 py-4">晶圆代工</td>
<td class="px-6 py-4 text-sm text-gray-600">国内晶圆代工龙头</td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-6 py-4 font-medium">北方华创</td>
<td class="px-6 py-4"><span class="badge bg-blue-100 text-blue-800 px-2 py-1 rounded">半导体</span></td>
<td class="px-6 py-4">半导体</td>
<td class="px-6 py-4">设备</td>
<td class="px-6 py-4">设备</td>
<td class="px-6 py-4 text-sm text-gray-600">半导体设备平台型公司</td>
</tr>
<!-- AI产业链 -->
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-medium">科大讯飞</td>
<td class="px-6 py-4"><span class="badge bg-purple-100 text-purple-800 px-2 py-1 rounded">AI</span></td>
<td class="px-6 py-4">人工智能</td>
<td class="px-6 py-4">语音识别</td>
<td class="px-6 py-4">语音识别</td>
<td class="px-6 py-4 text-sm text-gray-600">智能语音技术龙头</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-medium">海康威视</td>
<td class="px-6 py-4"><span class="badge bg-purple-100 text-purple-800 px-2 py-1 rounded">AI</span></td>
<td class="px-6 py-4">人工智能</td>
<td class="px-6 py-4">计算机视觉</td>
<td class="px-6 py-4">计算机视觉</td>
<td class="px-6 py-4 text-sm text-gray-600">安防AI视觉龙头</td>
</tr>
<!-- 新能源车产业链 -->
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 font-medium">宁德时代</td>
<td class="px-6 py-4"><span class="badge bg-orange-100 text-orange-800 px-2 py-1 rounded">新能源车</span></td>
<td class="px-6 py-4">动力电池</td>
<td class="px-6 py-4">锂电池</td>
<td class="px-6 py-4">锂电池</td>
<td class="px-6 py-4 text-sm text-gray-600">全球动力电池绝对龙头</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 font-medium">比亚迪</td>
<td class="px-6 py-4"><span class="badge bg-orange-100 text-orange-800 px-2 py-1 rounded">新能源车</span></td>
<td class="px-6 py-4">动力电池</td>
<td class="px-6 py-4">锂电池</td>
<td class="px-6 py-4">锂电池</td>
<td class="px-6 py-4 text-sm text-gray-600">新能源汽车垂直整合龙头</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 font-medium">亿纬锂能</td>
<td class="px-6 py-4"><span class="badge bg-orange-100 text-orange-800 px-2 py-1 rounded">新能源车</span></td>
<td class="px-6 py-4">动力电池</td>
<td class="px-6 py-4">锂电池</td>
<td class="px-6 py-4">锂电池</td>
<td class="px-6 py-4 text-sm text-gray-600">消费+动力电池平台</td>
</tr>
<!-- 工业机器人 -->
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-medium">汇川技术</td>
<td class="px-6 py-4"><span class="badge bg-indigo-100 text-indigo-800 px-2 py-1 rounded">工业机器人</span></td>
<td class="px-6 py-4">自动化设备</td>
<td class="px-6 py-4">工业机器人</td>
<td class="px-6 py-4">工业机器人</td>
<td class="px-6 py-4 text-sm text-gray-600">工业自动化龙头</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-medium">埃斯顿</td>
<td class="px-6 py-4"><span class="badge bg-indigo-100 text-indigo-800 px-2 py-1 rounded">工业机器人</span></td>
<td class="px-6 py-4">自动化设备</td>
<td class="px-6 py-4">工业机器人</td>
<td class="px-6 py-4">工业机器人</td>
<td class="px-6 py-4 text-sm text-gray-600">国产机器人龙头</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Investment Strategy -->
<div class="bg-gray-100 py-12 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-gray-800 mb-8">
<i class="fas fa-chess text-purple-600 mr-2"></i>投资策略与建议
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-center mb-4">
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-star text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold">三高策略股</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• 高稀缺性</li>
<li>• 高成长性</li>
<li>• 高股息率</li>
<li class="text-sm text-purple-600 font-medium">代表:路斯股份、同力股份</li>
</ul>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-center mb-4">
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-building text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold">平台型整合者</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• 现金充裕</li>
<li>• 并购能力强</li>
<li>• 外延式增长</li>
<li class="text-sm text-blue-600 font-medium">代表:凯德石英、佳合科技</li>
</ul>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-center mb-4">
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-link text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold">产业链"卖水人"</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• 嵌入核心产业链</li>
<li>• 不可替代性</li>
<li>• 业绩能见度高</li>
<li class="text-sm text-green-600 font-medium">代表:半导体材料、特种化学品</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Risk Analysis -->
<div class="max-w-7xl mx-auto px-4 py-12">
<h2 class="text-3xl font-bold text-gray-800 mb-8">
<i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>风险提示
</h2>
<div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-semibold text-lg mb-3 text-red-700">政策与流动性风险</h3>
<p class="text-gray-700">政策支持力度减弱、流动性枯竭可能导致股价剧烈波动</p>
</div>
<div>
<h3 class="font-semibold text-lg mb-3 text-red-700">业绩不及预期风险</h3>
<p class="text-gray-700">59%公司归母净利润负增长,业绩分化是常态</p>
</div>
<div>
<h3 class="font-semibold text-lg mb-3 text-red-700">估值匹配度风险</h3>
<p class="text-gray-700">部分公司估值已处高位,面临回归压力</p>
</div>
<div>
<h3 class="font-semibold text-lg mb-3 text-red-700">市场波动风险</h3>
<p class="text-gray-700">市场深度有限,易受资金情绪影响</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="gradient-bg text-white py-8 px-4">
<div class="max-w-7xl mx-auto text-center">
<p class="mb-2">© 2024 北交所概念深度分析报告</p>
<p class="text-sm opacity-75">数据来源:公开新闻、路演记录、市场研究</p>
<div class="mt-4 flex justify-center space-x-4">
<i class="fab fa-weixin text-2xl hover:scale-110 transition-transform cursor-pointer"></i>
<i class="fab fa-weibo text-2xl hover:scale-110 transition-transform cursor-pointer"></i>
<i class="fab fa-twitter text-2xl hover:scale-110 transition-transform cursor-pointer"></i>
</div>
</div>
</footer>
<script>
// 添加页面滚动效果
document.addEventListener('DOMContentLoaded', function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('number-animate');
}
});
});
document.querySelectorAll('.card-hover').forEach(el => {
observer.observe(el);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,560 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北美缺电AI电力 - 深度投资研究报告</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<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%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.timeline-dot {
position: relative;
}
.timeline-dot::after {
content: '';
position: absolute;
width: 2px;
background: linear-gradient(180deg, #667eea 0%, transparent 100%);
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 60px;
}
.timeline-item:last-child .timeline-dot::after {
display: none;
}
.risk-card {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.opportunity-card {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-container::-webkit-scrollbar {
height: 8px;
}
.table-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.table-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.badge-glow {
box-shadow: 0 0 20px rgba(79, 70, 229, 0.5);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<header class="gradient-bg text-white py-20 px-4">
<div class="container mx-auto max-w-7xl">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="mb-8 md:mb-0 md:w-2/3">
<div class="inline-flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2 mb-6">
<i class="fas fa-bolt mr-2 text-yellow-300"></i>
<span class="text-sm font-semibold">热点概念 · 2025年11月</span>
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
北美缺电<br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-pink-300">
AI电力革命
</span>
</h1>
<p class="text-xl mb-8 text-gray-100">
人工智能爆发式增长与电网老化瓶颈碰撞,催生全球电力设备出海黄金十年
</p>
<div class="flex flex-wrap gap-4">
<div class="flex items-center">
<i class="fas fa-chart-line mr-2 text-green-300"></i>
<span>市场热度: 极高</span>
</div>
<div class="flex items-center">
<i class="fas fa-clock mr-2 text-blue-300"></i>
<span>周期: 5-10年</span>
</div>
<div class="flex items-center">
<i class="fas fa-globe mr-2 text-purple-300"></i>
<span>影响: 全球供应链重塑</span>
</div>
</div>
</div>
<div class="md:w-1/3 float-animation">
<div class="glass-effect rounded-2xl p-8 text-center">
<i class="fas fa-microchip text-6xl mb-4 text-yellow-300"></i>
<h3 class="text-2xl font-bold mb-2">2030年预测</h3>
<div class="text-3xl font-bold text-yellow-300">200GW+</div>
<p class="text-sm mt-2">美国电力缺口</p>
<div class="text-xl mt-4 text-red-300">
<i class="fas fa-arrow-up"></i> 25%+
</div>
<p class="text-xs">占当前最大负荷</p>
</div>
</div>
</div>
</div>
</header>
<!-- Timeline Section -->
<section class="py-16 bg-white">
<div class="container mx-auto max-w-7xl px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-timeline text-purple-600 mr-3"></i>
关键时间节点
</h2>
<div class="grid md:grid-cols-4 gap-8">
<div class="timeline-item text-center">
<div class="timeline-dot inline-block w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold mb-4">
2024
</div>
<h3 class="font-bold mb-2">背景发酵</h3>
<p class="text-sm text-gray-600">美国电力市场显露供应紧张</p>
</div>
<div class="timeline-item text-center">
<div class="timeline-dot inline-block w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center text-white font-bold mb-4">
2025.01
</div>
<h3 class="font-bold mb-2">政策确认</h3>
<p class="text-sm text-gray-600">宣布国家能源紧急状态</p>
</div>
<div class="timeline-item text-center">
<div class="timeline-dot inline-block w-16 h-16 bg-gradient-to-br from-pink-500 to-red-600 rounded-full flex items-center justify-center text-white font-bold mb-4">
2025.11
</div>
<h3 class="font-bold mb-2">引爆点</h3>
<p class="text-sm text-gray-600">微软CEO确认券商集中发布研报</p>
</div>
<div class="timeline-item text-center">
<div class="timeline-dot inline-block w-16 h-16 bg-gradient-to-br from-red-500 to-orange-600 rounded-full flex items-center justify-center text-white font-bold mb-4">
2026+
</div>
<h3 class="font-bold mb-2">兑现期</h3>
<p class="text-sm text-gray-600">订单落地,业绩释放</p>
</div>
</div>
</div>
</section>
<!-- Core Logic Section -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto max-w-7xl px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-brain text-indigo-600 mr-3"></i>
核心驱动逻辑
</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-2xl p-8 hover-scale shadow-lg">
<div class="text-4xl mb-4 text-red-500">
<i class="fas fa-rocket"></i>
</div>
<h3 class="text-xl font-bold mb-4">需求侧指数级冲击</h3>
<p class="text-gray-600 mb-4">
AI大模型训练带来算力需求指数增长直接转化为数据中心巨大电力消耗
</p>
<div class="bg-red-50 rounded-lg p-4">
<div class="flex justify-between items-center">
<span class="font-semibold">2025年用电占比</span>
<span class="text-red-600 font-bold">个位数</span>
</div>
<div class="flex justify-between items-center mt-2">
<span class="font-semibold">2028年用电占比</span>
<span class="text-red-600 font-bold">~10%</span>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-8 hover-scale shadow-lg">
<div class="text-4xl mb-4 text-orange-500">
<i class="fas fa-exclamation-triangle"></i>
</div>
<h3 class="text-xl font-bold mb-4">供给侧结构性短板</h3>
<p class="text-gray-600 mb-4">
北美电网设备严重老化海外巨头产能偏紧无法满足AI数据中心建设需求
</p>
<div class="bg-orange-50 rounded-lg p-4">
<div class="flex items-center mb-2">
<i class="fas fa-history mr-2"></i>
<span class="font-semibold">设备老化: 70%超30年</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt mr-2"></i>
<span class="font-semibold">变压器需求: 230/345kV</span>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-8 hover-scale shadow-lg">
<div class="text-4xl mb-4 text-green-500">
<i class="fas fa-lightbulb"></i>
</div>
<h3 class="text-xl font-bold mb-4">解决方案多元化</h3>
<p class="text-gray-600 mb-4">
多路径并举解决缺电问题,推动电力设备出海和技术革新
</p>
<div class="space-y-2">
<div class="bg-green-50 rounded px-3 py-1 inline-block text-sm">
<i class="fas fa-fire mr-1"></i> 燃气轮机
</div>
<div class="bg-green-50 rounded px-3 py-1 inline-block text-sm">
<i class="fas fa-plug mr-1"></i> 变压器出海
</div>
<div class="bg-green-50 rounded px-3 py-1 inline-block text-sm">
<i class="fas fa-battery-full mr-1"></i> 储能系统
</div>
<div class="bg-green-50 rounded px-3 py-1 inline-block text-sm">
<i class="fas fa-microchip mr-1"></i> SST技术
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table Section -->
<section class="py-16 bg-white">
<div class="container mx-auto max-w-7xl px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-chart-pie text-blue-600 mr-3"></i>
核心标的股票池
</h2>
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-6 mb-8">
<div class="flex flex-wrap gap-4 justify-center">
<div class="flex items-center bg-white rounded-lg px-4 py-2 shadow">
<span class="w-3 h-3 bg-red-500 rounded-full mr-2"></span>
<span class="text-sm font-semibold">燃气轮机</span>
</div>
<div class="flex items-center bg-white rounded-lg px-4 py-2 shadow">
<span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
<span class="text-sm font-semibold">储能</span>
</div>
<div class="flex items-center bg-white rounded-lg px-4 py-2 shadow">
<span class="w-3 h-3 bg-blue-500 rounded-full mr-2"></span>
<span class="text-sm font-semibold">变压器/SST</span>
</div>
<div class="flex items-center bg-white rounded-lg px-4 py-2 shadow">
<span class="w-3 h-3 bg-purple-500 rounded-full mr-2"></span>
<span class="text-sm font-semibold">AIDC相关</span>
</div>
</div>
</div>
<div class="table-container">
<table class="w-full bg-white rounded-lg overflow-hidden shadow-lg">
<thead class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
<tr>
<th class="px-4 py-3 text-left">股票代码</th>
<th class="px-4 py-3 text-left">股票名称</th>
<th class="px-4 py-3 text-left">核心行业</th>
<th class="px-4 py-3 text-left">项目/客户</th>
<th class="px-4 py-3 text-left">信息来源</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- Stock data will be inserted here by JavaScript -->
</tbody>
</table>
</div>
</div>
</section>
<!-- Investment Insights Section -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto max-w-7xl px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-binoculars text-green-600 mr-3"></i>
投资洞察与风险提示
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="space-y-6">
<h3 class="text-2xl font-bold text-green-600 mb-4">
<i class="fas fa-chart-line mr-2"></i>投资机遇
</h3>
<div class="bg-white rounded-xl p-6 hover-scale shadow-lg">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
<i class="fas fa-trophy text-green-600"></i>
</div>
</div>
<div class="ml-4">
<h4 class="font-bold text-lg mb-2">确定性最高:变压器出海</h4>
<p class="text-gray-600">解决当前最痛痛点(高压设备短缺),中国企业已具备全球竞争力</p>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 hover-scale shadow-lg">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-space-shuttle text-blue-600"></i>
</div>
</div>
<div class="ml-4">
<h4 class="font-bold text-lg mb-2">空间最大:储能与先进供电技术</h4>
<p class="text-gray-600">储能是解决电力波动的终极方案SST代表下一代技术方向</p>
</div>
</div>
</div>
</div>
<div class="space-y-6">
<h3 class="text-2xl font-bold text-red-600 mb-4">
<i class="fas fa-exclamation-triangle mr-2"></i>潜在风险
</h3>
<div class="bg-white rounded-xl p-6 hover-scale shadow-lg border-l-4 border-red-500">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
<i class="fas fa-globe-americas text-red-600"></i>
</div>
</div>
<div class="ml-4">
<h4 class="font-bold text-lg mb-2">地缘政治风险</h4>
<p class="text-gray-600">美国可能以"国家安全"为由设置贸易壁垒,影响出海逻辑</p>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 hover-scale shadow-lg border-l-4 border-orange-500">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
<i class="fas fa-clock text-orange-600"></i>
</div>
</div>
<div class="ml-4">
<h4 class="font-bold text-lg mb-2">时间错配风险</h4>
<p class="text-gray-600">订单实际交付周期长达12-18个月短期可能无法满足市场预期</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Key Tracking Metrics Section -->
<section class="py-16 bg-white">
<div class="container mx-auto max-w-7xl px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-crosshairs text-purple-600 mr-3"></i>
后续关键跟踪指标
</h2>
<div class="grid md:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl p-6 text-center hover-scale">
<i class="fas fa-file-contract text-4xl mb-4"></i>
<h3 class="font-bold text-lg mb-2">订单指标</h3>
<p class="text-sm opacity-90">核心企业框架协议落地</p>
<div class="mt-4 text-2xl font-bold">Q1-Q2</div>
</div>
<div class="bg-gradient-to-br from-green-500 to-green-600 text-white rounded-xl p-6 text-center hover-scale">
<i class="fas fa-industry text-4xl mb-4"></i>
<h3 class="font-bold text-lg mb-2">产能指标</h3>
<p class="text-sm opacity-90">海外工厂建设投产进度</p>
<div class="mt-4 text-2xl font-bold">持续</div>
</div>
<div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-xl p-6 text-center hover-scale">
<i class="fas fa-chart-bar text-4xl mb-4"></i>
<h3 class="font-bold text-lg mb-2">财务指标</h3>
<p class="text-sm opacity-90">北美收入及毛利率变化</p>
<div class="mt-4 text-2xl font-bold">季度</div>
</div>
<div class="bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-xl p-6 text-center hover-scale">
<i class="fas fa-microchip text-4xl mb-4"></i>
<h3 class="font-bold text-lg mb-2">技术指标</h3>
<p class="text-sm opacity-90">SST产品商业化进展</p>
<div class="mt-4 text-2xl font-bold">2026</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="gradient-bg text-white py-12 px-4">
<div class="container mx-auto max-w-7xl">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4">北美缺电AI电力投资主题</h3>
<p class="text-gray-200 mb-6">从宏大叙事到业绩验证的产业机遇</p>
<div class="flex justify-center space-x-6">
<div class="flex items-center">
<i class="fas fa-shield-alt mr-2"></i>
<span>高风险高收益</span>
</div>
<div class="flex items-center">
<i class="fas fa-calendar-alt mr-2"></i>
<span>中长期持有</span>
</div>
<div class="flex items-center">
<i class="fas fa-sync mr-2"></i>
<span>动态跟踪</span>
</div>
</div>
<div class="mt-8 text-sm opacity-75">
<p>⚠️ 投资有风险,入市需谨慎</p>
<p class="mt-2">本页面内容仅供参考,不构成投资建议</p>
</div>
</div>
</div>
</footer>
<script>
// Stock data
const stockData = {
"北美缺电AI电力(251105)": [
{"stock": "飞沃科技", "行业": "燃气轮机", "项目": "为GE Vernova提供燃气轮机燃烧室钣金件以及精密机加件", "reason": "官微"},
{"stock": "航亚科技", "行业": "燃气轮机", "项目": "压气机叶片、压气机盘、涡轮盘供货美国GE", "reason": "调研"},
{"stock": "杰瑞股份", "行业": "燃气轮机", "战略合作": "与西门子能源等国际知名燃气轮机制造商建立战略合作关系", "reason": "互动"},
{"stock": "应流股份", "行业": "燃气轮机", "客户": "GE/贝克休斯/西门子/卡特彼勒/斯伦贝谢等龙头", "reason": "纪要"},
{"stock": "万泽股份", "行业": "燃气轮机", "项目": "两机热端部件核心供应商,配套西门子等头部企业", "reason": "纪要"},
{"stock": "航宇科技", "行业": "燃气轮机", "项目": "两机环锻件核心供应商配套GE Vernova/贝克休斯/西门子等", "reason": "纪要"},
{"stock": "博盈特焊", "行业": "燃气轮机", "项目": "2025年9月越南工厂投产承接北美HRSR需求", "reason": "研报"},
{"stock": "福鞍股份", "行业": "燃气轮机", "项目": "拟打造燃气轮机制造基地;美国通用电气、福伊特合格供应商", "reason": "公告"},
{"stock": "豪迈科技", "行业": "燃气轮机", "客户": "GE、三菱、西门子", "reason": "调研"},
{"stock": "联德股份", "行业": "燃气轮机", "项目": "捆绑卡特彼勒中小型燃气机铸件需求", "reason": "纪要"},
{"stock": "隆达股份", "行业": "燃气轮机", "项目": "燃机材料出海No.1出海占比1/3", "reason": "纪要"},
{"stock": "精工科技", "行业": "燃气轮机", "项目": "与清航航空协同开发燃气轮机热端部件,切入全球燃机巨头供应链", "reason": "纪要"},
{"stock": "三角防务", "行业": "燃气轮机", "项目": "与西门子能源签署燃机项目开发协议及框架订单协议", "reason": "公告"},
{"stock": "常宝股份", "行业": "燃气轮机", "项目": "HRSG主要应用于燃气轮机余热锅炉发电领域通用电气优秀供应商", "reason": "调研/年报"},
{"stock": "阳光电源", "行业": "储能", "项目": "业务稳居北美第一梯队", "reason": "纪要"},
{"stock": "阿特斯", "行业": "储能", "项目": "CSIQ子公司Recurrent Energy为全球最大公共事业规模太阳能和储能电站项目开发商之一25年储能出货中美国占比预计50%", "reason": "公开资料/纪要"},
{"stock": "通润装备", "行业": "储能", "项目": "正泰电源产品连续多年稳居北美工商业光伏逆变器出货量第一", "reason": "调研"},
{"stock": "海博思创", "行业": "储能", "战略合作": "已与美国头部储能系统集成商Fluence建立合作关系", "reason": "年报"},
{"stock": "科陆电子", "行业": "储能", "项目": "在北美储能市场有深厚积累,加州德州多地区储能运营项目收益领先", "reason": "纪要"},
{"stock": "西典新能", "行业": "储能", "项目": "储能CCS独供T和阳光卡位北美60%以上市场份额", "reason": "纪要"},
{"stock": "东方日升", "行业": "储能", "项目": "美国南卡罗来纳州1GWh储能工厂将于12月投产", "reason": "纪要"},
{"stock": "天合光能", "行业": "储能", "项目": "海外订单超10GWh预计2025-2026年交付", "reason": "纪要"},
{"stock": "思源电气", "行业": "储能", "项目": "出海领先25H1海外收入占比30%左右北美订单2-3亿", "reason": "纪要"},
{"stock": "冰轮环境", "行业": "储能", "项目": "IDC订单爆发提供一次侧冷水机组子公司顿汉布什为全球百年企业拥有美国/墨西哥/马来西亚等海外工厂", "reason": "纪要"},
{"stock": "盛弘股份", "行业": "储能", "项目": "配合宁德时代研发大储P产品并较早关注北美数据中心相关储能机会布局中压UPS/HVDC/SST等数据中心电源解决方案", "reason": "纪要"},
{"stock": "宏发股份", "行业": "储能", "项目": "继电器世界第一延伸到AIDC领域已给台达等大客户长期供货和合作", "reason": "纪要"},
{"stock": "京泉华", "行业": "AIDC相关", "客户": "BE最大的磁性元器件供应商约80%", "reason": "纪要"},
{"stock": "三环集团", "行业": "AIDC相关", "项目": "为BE隔膜板供应商一供", "reason": "纪要"},
{"stock": "振华股份", "行业": "SOFC", "项目": "全球最大的铬盐生产商SOFC燃料电池连接体采用95%纯铬+5%纯铁)", "reason": "纪要"},
{"stock": "雄韬股份", "行业": "SOFC", "项目": "燃料电池解决方案覆盖储能发电应用场景美国销售份额占公司营业收入比例不到3%", "reason": "互动"},
{"stock": "潍柴动力", "行业": "SOFC", "战略合作": "与锡里斯签署SOFC生产制造授权潍柴动力北美公司", "reason": "新闻/公告"},
{"stock": "中国西电", "行业": "变压器含SST", "项目": "子公司西安西电拥有固态变压器研发能力及相关产品;涉美业务主要是与公司第二大股东及其关联方之间的业务往来,共同参与全球输配电市场开发", "reason": "互动"},
{"stock": "京泉华", "行业": "变压器含SST", "项目": "专注于SST系统内部中压中频变压器是目前全球少数具备可靠量产能力的厂商。公司绑定伊顿", "reason": "纪要"},
{"stock": "金盘科技", "行业": "变压器含SST", "项目": "已深度绑定亚马逊签2年12亿元合作协议对接XAI、Meta、谷歌、微软等海外AIDC订单25年预计突破10亿元26年有望翻倍增长", "reason": "纪要"},
{"stock": "伊戈尔", "行业": "变压器含SST", "项目": "26年数据中心订单预期从8亿上调至9亿增量主要来自美国SST团队扩充预计26年推出高频变压器有电感技术积累/整机", "reason": "纪要"},
{"stock": "保变电气", "行业": "变压器含SST", "项目": "公司是少数能向北美美达斯国家市场出口大容量调相变压器的企业之一", "reason": "半年报"},
{"stock": "三变科技", "行业": "变压器含SST", "项目": "公司主变走进马斯克xAI超级计算机中心", "reason": "官微"},
{"stock": "顺钠股份", "行业": "变压器含SST", "战略合作": "公司通过孙公司顺特电气持股75%施耐德持股25%),成为施耐德在中国唯一的变压器合资企业", "reason": "纪要"},
{"stock": "特变电工", "行业": "变压器含SST", "项目": "输变电龙头,出海占比提升,变压器在美国有历史业绩", "reason": "纪要"},
{"stock": "四方股份", "行业": "变压器含SST", "项目": "SST客户持续洽谈中", "reason": "纪要"},
{"stock": "可立克", "行业": "变压器含SST", "项目": "SST产品可出整机公司与全球头部企业保持良好合作关系欧美大厂已把需求给到公司", "reason": "纪要"},
{"stock": "新特电气", "行业": "变压器含SST", "项目": "公司在布局固态变压器配套用变压器的研发与创新公司产品拥有北美UL认证", "reason": "调研/互动"},
{"stock": "华明装备", "行业": "变压器含SST", "项目": "变压器分接开关;持续推进北美市场认证", "reason": "研报"},
{"stock": "三星医疗", "行业": "其他", "项目": "下属控股子公司南森墨西哥中标美国Nexgrid智能电表框架项目合同金额总计2,955.50万美元约合2.12亿人民币", "reason": "公告"},
{"stock": "广信科技", "行业": "其他", "项目": "绝缘纸,西门子送样通过认证", "reason": "研报"},
{"stock": "神马电力", "行业": "其他", "项目": "全球复合绝缘子头部企业是西门子、GE等全球头部电力设备企业核心供应商", "reason": "纪要"}
]
};
// Industry color mapping
const industryColors = {
"燃气轮机": "red",
"储能": "green",
"变压器含SST": "blue",
"AIDC相关": "purple",
"SOFC": "orange",
"其他": "gray"
};
// Populate table
function populateTable() {
const tbody = document.getElementById('stockTableBody');
const stocks = stockData["北美缺电AI电力(251105)"];
stocks.forEach((item, index) => {
const row = document.createElement('tr');
row.className = index % 2 === 0 ? 'bg-gray-50' : 'bg-white';
row.className += ' hover:bg-blue-50 transition-colors';
const industryColor = industryColors[item.行业] || 'gray';
row.innerHTML = `
<td class="px-4 py-3 font-semibold">${item.stock}</td>
<td class="px-4 py-3">${item.stock}</td>
<td class="px-4 py-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${industryColor}-100 text-${industryColor}-800">
${item.行业}
</span>
</td>
<td class="px-4 py-3 text-sm">
<div>${item.项目 || item.客户 || item.战略合作 || '-'}</div>
</td>
<td class="px-4 py-3">
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">
<i class="fas fa-info-circle mr-1"></i>
${item.reason}
</span>
</td>
`;
tbody.appendChild(row);
});
}
// Initialize on load
document.addEventListener('DOMContentLoaded', populateTable);
// Smooth scroll for navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,530 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为Mate80 - 国产替代与AI创新的双轮驱动</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></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&display=swap');
body { font-family: 'Inter', sans-serif; }
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.timeline-connector {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.tech-card {
background: linear-gradient(145deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
border: 1px solid rgba(99, 102, 241, 0.2);
}
.risk-card {
background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
border: 1px solid rgba(239, 68, 68, 0.2);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Navigation -->
<div class="navbar glass-effect fixed top-0 z-50">
<div class="navbar-start">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<i class="fas fa-bars"></i>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow glass-effect rounded-box w-52">
<li><a href="#events">概念事件</a></li>
<li><a href="#insights">核心观点</a></li>
<li><a href="#industry">产业链</a></li>
<li><a href="#risks">风险挑战</a></li>
<li><a href="#conclusion">投资启示</a></li>
</ul>
</div>
<a class="btn btn-ghost text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
华为Mate80
</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="#events" class="hover:text-purple-400 transition">概念事件</a></li>
<li><a href="#insights" class="hover:text-purple-400 transition">核心观点</a></li>
<li><a href="#industry" class="hover:text-purple-400 transition">产业链</a></li>
<li><a href="#risks" class="hover:text-purple-400 transition">风险挑战</a></li>
<li><a href="#conclusion" class="hover:text-purple-400 transition">投资启示</a></li>
</ul>
</div>
<div class="navbar-end">
<div class="badge badge-warning gap-2">
<span class="pulse-dot w-2 h-2 bg-yellow-400 rounded-full inline-block"></span>
高热度概念
</div>
</div>
</div>
<!-- Hero Section -->
<div class="hero min-h-screen gradient-bg flex items-center" style="padding-top: 60px;">
<div class="hero-content text-center text-white max-w-5xl">
<div class="max-w-4xl">
<h1 class="mb-5 text-5xl font-bold">
华为Mate80
<span class="block text-3xl mt-2 text-purple-200">国产替代与AI创新的双轮驱动</span>
</h1>
<p class="mb-5 text-xl">
承载中国核心技术全面回归与超越的重任<br>
从"功能手机"向"AI智能终端"的战略转型
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<div class="glass-effect px-6 py-3 rounded-full">
<i class="fas fa-microchip mr-2"></i>麒麟9030芯片
</div>
<div class="glass-effect px-6 py-3 rounded-full">
<i class="fas fa-robot mr-2"></i>鸿蒙OS 6.0 + AI Agent
</div>
<div class="glass-effect px-6 py-3 rounded-full">
<i class="fas fa-satellite mr-2"></i>卫星通信 + eSIM
</div>
</div>
</div>
</div>
</div>
<!-- Core Events Timeline -->
<section id="events" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
概念事件时间轴
</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 timeline-connector"></div>
<!-- Timeline Items -->
<div class="relative mb-12">
<div class="flex items-center justify-end w-full lg:w-1/2 pr-8">
<div class="glass-effect p-6 rounded-lg hover-lift max-w-md">
<div class="text-sm text-purple-400 mb-2">2025年8月</div>
<h3 class="text-xl font-semibold mb-2">技术突破预告</h3>
<p class="text-gray-300">麒麟9030芯片采用创新先进封装和SRAM后置设计性能追平骁龙8 Gen 3</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
</div>
<div class="relative mb-12">
<div class="flex items-center justify-start w-full lg:w-1/2 pl-8 lg:ml-auto">
<div class="glass-effect p-6 rounded-lg hover-lift max-w-md">
<div class="text-sm text-purple-400 mb-2">2025年9月</div>
<h3 class="text-xl font-semibold mb-2">三折叠手机发布</h3>
<p class="text-gray-300">Mate XTs发布首次公开麒麟9020芯片为Mate80预热</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
</div>
<div class="relative mb-12">
<div class="flex items-center justify-end w-full lg:w-1/2 pr-8">
<div class="glass-effect p-6 rounded-lg hover-lift max-w-md">
<div class="text-sm text-purple-400 mb-2">2025年10月</div>
<h3 class="text-xl font-semibold mb-2">供应链细节曝光</h3>
<p class="text-gray-300">5款机型规划OCA胶、AR镀膜等供应链细节流出</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
</div>
<div class="relative">
<div class="flex items-center justify-start w-full lg:w-1/2 pl-8 lg:ml-auto">
<div class="glass-effect p-6 rounded-lg hover-lift max-w-md">
<div class="text-sm text-purple-400 mb-2">2025年11月中下旬</div>
<h3 class="text-xl font-semibold mb-2">全球发布会</h3>
<p class="text-gray-300">华为Mate80系列正式发布所有预期集中验证</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full pulse-dot"></div>
</div>
</div>
</div>
</section>
<!-- Core Insights -->
<section id="insights" class="py-20 px-4 bg-gray-800">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
核心观点摘要
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-effect p-8 rounded-lg hover-lift">
<div class="text-4xl mb-4 text-purple-400">
<i class="fas fa-microchip"></i>
</div>
<h3 class="text-xl font-semibold mb-3">半导体技术破局</h3>
<p class="text-gray-300">通过架构创新实现弯道超车,拉动国产半导体产业链全面发展</p>
</div>
<div class="glass-effect p-8 rounded-lg hover-lift">
<div class="text-4xl mb-4 text-purple-400">
<i class="fas fa-brain"></i>
</div>
<h3 class="text-xl font-semibold mb-3">端侧AI范式转移</h3>
<p class="text-gray-300">AI Agent从功能助手向智能体进化形成软硬芯云协同闭环</p>
</div>
<div class="glass-effect p-8 rounded-lg hover-lift">
<div class="text-4xl mb-4 text-purple-400">
<i class="fas fa-satellite-dish"></i>
</div>
<h3 class="text-xl font-semibold mb-3">通信生态升维</h3>
<p class="text-gray-300">卫星直连+eSIM打破传统限制实现天地一体化网络互联</p>
</div>
</div>
<!-- Market Analysis -->
<div class="mt-12">
<h3 class="text-2xl font-semibold mb-6">市场认知分析</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="tech-card p-6 rounded-lg">
<h4 class="text-lg font-semibold mb-3 text-purple-300">
<i class="fas fa-fire mr-2"></i>市场热度
</h4>
<ul class="space-y-2 text-gray-300">
<li>• 舆情榜单反复出现,资金关注度极高</li>
<li>• 研报目标涨幅数倍,情绪极其高涨</li>
<li>• 乐观情绪占绝对主导,市场倾向相信技术突破</li>
</ul>
</div>
<div class="risk-card p-6 rounded-lg">
<h4 class="text-lg font-semibold mb-3 text-orange-300">
<i class="fas fa-exclamation-triangle mr-2"></i>预期差分析
</h4>
<ul class="space-y-2 text-gray-300">
<li>• 主动散热技术可靠性未经验证</li>
<li>• 产业链订单确定性存在夸大成分</li>
<li>• AI生态实际体验被市场忽略</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Industry Chain Analysis -->
<section id="industry" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
产业链与核心公司
</h2>
<!-- Stock Data Table -->
<div class="mb-12">
<h3 class="text-2xl font-semibold mb-6">核心标的梳理</h3>
<div class="table-responsive">
<table class="table table-zebra w-full glass-effect">
<thead>
<tr class="text-purple-300">
<th>股票名称</th>
<th>行业环节</th>
<th>关联项目</th>
<th>产业链定位</th>
<th>投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">艾为电子</td>
<td><span class="badge badge-primary">微泵液冷</span></td>
<td>压电微泵液冷驱动芯片</td>
<td>智能终端液冷散热芯片供应</td>
<td>应用于智能手机/平板/PC等终端产品</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">南芯科技</td>
<td><span class="badge badge-primary">微泵液冷</span></td>
<td>压电微泵液冷驱动芯片</td>
<td>移动智能终端液冷散热</td>
<td>已在客户导入验证,实现低功耗散热</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">飞荣达</td>
<td><span class="badge badge-secondary">散热方案</span></td>
<td>热管理产品</td>
<td>消费电子/通信设备散热</td>
<td>热管产品应用于消费电子和通信设备</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">沃特股份</td>
<td><span class="badge badge-secondary">散热材料</span></td>
<td>散热材料方案</td>
<td>高算力芯片散热材料供应</td>
<td>LCF散热风扇材料用于英伟达等客户</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">蜂助手</td>
<td><span class="badge badge-accent">智能体</span></td>
<td>云手机产品</td>
<td>运营商云手机生态</td>
<td>与华为云深度协同打造云手机产品</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">彩讯股份</td>
<td><span class="badge badge-accent">智能体</span></td>
<td>智能体应用开发</td>
<td>华为云生态合作</td>
<td>接入华为"小艺"智能体实现业务直达</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">欧菲光</td>
<td><span class="badge badge-info">摄像头</span></td>
<td>摄像头模组</td>
<td>3D结构光国产化</td>
<td>为华为Mate系列供应摄像头相关模组</td>
</tr>
<tr class="hover:bg-purple-900/20 transition">
<td class="font-semibold">思特威</td>
<td><span class="badge badge-info">传感器</span></td>
<td>Pura80 Pro主摄传感器</td>
<td>高端CMOS传感器国产化</td>
<td>首款国产定制化一英寸大底CMOS</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Investment Value Analysis -->
<div class="grid md:grid-cols-3 gap-6 mt-12">
<div class="glass-effect p-6 rounded-lg border-l-4 border-green-500">
<h4 class="text-lg font-semibold mb-3 text-green-400">
<i class="fas fa-star mr-2"></i>首选投资标的
</h4>
<p class="text-gray-300 mb-3">主动散热产业链</p>
<ul class="space-y-1 text-sm text-gray-400">
<li>• 艾为电子:驱动芯片核心</li>
<li>• 南芯科技:电源管理关键</li>
<li>• 逻辑纯粹AI端侧化直接受益</li>
</ul>
</div>
<div class="glass-effect p-6 rounded-lg border-l-4 border-blue-500">
<h4 class="text-lg font-semibold mb-3 text-blue-400">
<i class="fas fa-shield-alt mr-2"></i>稳健投资选择
</h4>
<p class="text-gray-300 mb-3">国产核心芯片供应链</p>
<ul class="space-y-1 text-sm text-gray-400">
<li>• 北京君正SRAM龙头</li>
<li>• 确定性高,阿尔法显著</li>
<li>• 与华为深度绑定</li>
</ul>
</div>
<div class="glass-effect p-6 rounded-lg border-l-4 border-orange-500">
<h4 class="text-lg font-semibold mb-3 text-orange-400">
<i class="fas fa-exclamation-circle mr-2"></i>谨慎对待标的
</h4>
<p class="text-gray-300 mb-3">主题性过强环节</p>
<ul class="space-y-1 text-sm text-gray-400">
<li>• 日海智能eSIM独待验证</li>
<li>• 部分新材料:远期故事长</li>
<li>• 赔率高但胜率低</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section id="risks" class="py-20 px-4 bg-gray-800">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
潜在风险与挑战
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="risk-card p-6 rounded-lg">
<div class="text-3xl mb-4 text-red-400">
<i class="fas fa-wrench"></i>
</div>
<h3 class="text-xl font-semibold mb-3">技术风险</h3>
<ul class="space-y-2 text-gray-300">
<li>• 主动散热可靠性挑战</li>
<li>• 麒麟9030良率爬坡</li>
<li>• 实际性能待第三方验证</li>
</ul>
</div>
<div class="risk-card p-6 rounded-lg">
<div class="text-3xl mb-4 text-red-400">
<i class="fas fa-dollar-sign"></i>
</div>
<h3 class="text-xl font-semibold mb-3">商业化风险</h3>
<ul class="space-y-2 text-gray-300">
<li>• 成本控制压力巨大</li>
<li>• 高溢价接受度存疑</li>
<li>• 市场竞争日趋激烈</li>
</ul>
</div>
<div class="risk-card p-6 rounded-lg">
<div class="text-3xl mb-4 text-red-400">
<i class="fas fa-gavel"></i>
</div>
<h3 class="text-xl font-semibold mb-3">政策与竞争</h3>
<ul class="space-y-2 text-gray-300">
<li>• 外部制裁加剧风险</li>
<li>• 行业巨头快速迭代</li>
<li>• 信息交叉验证风险突出</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Conclusion -->
<section id="conclusion" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
综合结论与投资启示
</h2>
<div class="glass-effect p-8 rounded-lg">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-300">最终看法</h3>
<p class="text-gray-300 leading-relaxed">
华为Mate80概念正处于由宏大预期驱动向基本面验证过渡的关键阶段。它具备强大的技术内核和国家战略意义但市场当前情绪已部分超前于现实存在交易性拥挤的风险。
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-300">关键跟踪指标</h3>
<ul class="space-y-2 text-gray-300">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
<span>发布后第三方评测数据</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
<span>核心供应商财报验证</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
<span>eSIM进展官方确认</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
<span>出货量与市场反馈</span>
</li>
</ul>
</div>
</div>
<div class="mt-8 p-6 bg-gradient-to-r from-purple-900/30 to-pink-900/30 rounded-lg border border-purple-500/30">
<p class="text-center text-lg italic">
"投资启示:在确定性中寻找阿尔法,在不确定性中控制风险"
</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer p-10 bg-gray-800 text-gray-400">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-white text-lg font-semibold mb-4">关于概念</h3>
<p class="text-sm">华为Mate80代表中国科技创新的里程碑是国产替代与AI创新的核心载体。</p>
</div>
<div>
<h3 class="text-white text-lg font-semibold mb-4">快速链接</h3>
<ul class="space-y-2 text-sm">
<li><a href="#events" class="hover:text-purple-400 transition">概念事件</a></li>
<li><a href="#insights" class="hover:text-purple-400 transition">核心观点</a></li>
<li><a href="#industry" class="hover:text-purple-400 transition">产业链</a></li>
</ul>
</div>
<div>
<h3 class="text-white text-lg font-semibold mb-4">相关资源</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-purple-400 transition">研究报告</a></li>
<li><a href="#" class="hover:text-purple-400 transition">新闻动态</a></li>
<li><a href="#" class="hover:text-purple-400 transition">数据分析</a></li>
</ul>
</div>
<div>
<h3 class="text-white text-lg font-semibold mb-4">免责声明</h3>
<p class="text-sm">本文档仅供参考,不构成投资建议。投资有风险,入市需谨慎。</p>
</div>
</div>
<div class="divider divider-gray-700"></div>
<div class="text-center text-sm">
<p>&copy; 2025 华为Mate80概念分析. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add scroll effect to navbar
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('shadow-lg');
} else {
navbar.classList.remove('shadow-lg');
}
});
// Intersection Observer for fade-in animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Apply observer to sections
document.querySelectorAll('section').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,908 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>叠层钙钛矿 - 下一代光伏革命核心概念</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-gradient: linear-gradient(135deg, #00ADFF 0%, #00FFAA 100%);
--secondary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
--accent-gradient: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
--glass-bg: rgba(255, 255, 255, 0.08);
--glass-border: rgba(255, 255, 255, 0.18);
}
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background: radial-gradient(circle at 10% 20%, rgba(0, 173, 255, 0.05) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(0, 255, 170, 0.05) 0%, transparent 20%),
#0c0e1d;
color: #e2e8f0;
min-height: 100vh;
}
.hero-section {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: pulse 4s ease-in-out infinite;
}
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glass-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 12px 40px rgba(0, 173, 255, 0.25);
border-color: rgba(0, 255, 170, 0.4);
}
.timeline-item {
position: relative;
padding-left: 2.5rem;
margin-bottom: 2rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 0.5rem;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--primary-gradient);
box-shadow: 0 0 15px rgba(0, 173, 255, 0.7);
}
.timeline-item::after {
content: '';
position: absolute;
left: 5px;
top: 1.5rem;
width: 2px;
height: calc(100% + 1rem);
background: linear-gradient(to bottom, #00ADFF, transparent);
}
.timeline-item:last-child::after {
display: none;
}
.alert-glass {
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-left: 4px solid #00ADFF;
}
.table-responsive-custom {
overflow-x: visible;
width: 100%;
}
.table-hover-custom tbody tr {
transition: all 0.3s ease;
}
.table-hover-custom tbody tr:hover {
background: rgba(0, 173, 255, 0.1);
transform: scale(1.01);
}
.efficiency-badge {
background: var(--accent-gradient);
color: white;
font-weight: 800;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.1); opacity: 0.5; }
}
@keyframes glow {
from { box-shadow: 0 0 5px rgba(255, 107, 107, 0.5); }
to { box-shadow: 0 0 20px rgba(255, 165, 0, 0.8); }
}
.nav-pills .nav-link {
border-radius: 50px;
margin: 0 0.5rem;
transition: all 0.3s ease;
}
.nav-pills .nav-link.active {
background: var(--primary-gradient);
transform: scale(1.05);
}
.progress-custom {
height: 8px;
background: rgba(255,255,255,0.1);
border-radius: 4px;
overflow: visible;
}
.progress-bar-custom {
background: var(--primary-gradient);
border-radius: 4px;
position: relative;
box-shadow: 0 0 10px rgba(0, 173, 255, 0.5);
}
.company-card {
border-left: 4px solid #00ADFF;
transition: all 0.3s ease;
}
.company-card:hover {
border-left-color: #00FFAA;
transform: translateX(5px);
}
.rating-stars {
color: #FFD700;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}
@media (max-width: 768px) {
.hero-title { font-size: 2.5rem !important; }
.timeline-item { padding-left: 2rem; }
.table-responsive-custom { font-size: 0.85rem; }
}
</style>
</head>
<body>
<!-- Hero Section -->
<div class="relative overflow-hidden mb-8">
<div class="container mx-auto px-4 py-12">
<div class="text-center relative z-10">
<h1 class="hero-title text-5xl md:text-7xl font-black mb-4">叠层钙钛矿</h1>
<p class="text-xl md:text-2xl text-slate-300 mb-6 font-light">下一代光伏技术革命 · 理论效率突破46%</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<span class="badge badge-lg glass-card text-white px-4 py-2">
<i class="fas fa-bolt mr-2"></i>GW级产线密集落地
</span>
<span class="badge badge-lg glass-card text-white px-4 py-2">
<i class="fas fa-chart-line mr-2"></i>效率突破33.1%
</span>
<span class="badge badge-lg glass-card text-white px-4 py-2">
<i class="fas fa-coins mr-2"></i>成本有望降至0.6元/W
</span>
</div>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-slate-900/50 pointer-events-none"></div>
</div>
<div class="container mx-auto px-4">
<!-- 核心洞察摘要 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-lightbulb text-yellow-400 mr-3"></i>
核心洞察摘要
</h2>
<div class="alert alert-glass">
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-orange-400 mt-1 mr-3"></i>
<div>
<strong>阶段判断:</strong>叠层钙钛矿处于<strong>"技术突破验证期"向"产业化导入期"过渡的关键节点</strong>。当前市场存在<strong>12-18个月的预期差</strong>——新闻与研报呈现高度乐观但实际产线仍处于百兆瓦级验证、良率仅60%-65%的谨慎阶段。
</div>
</div>
</div>
<p class="text-lg leading-relaxed mt-4">
<strong>核心驱动力:</strong>晶硅电池效率逼近极限25%-26%后的技术迭代刚性需求。短期催化剂为设备订单落地和GW级产线调试进度<strong>大面积制备良率、长期稳定性、成本经济性</strong>三大瓶颈尚未完全攻克。<strong>投资逻辑:设备环节确定性最高,组件环节风险收益比不对称,材料环节需等待技术路线明确。</strong>
</p>
</div>
</section>
<!-- 关键事件时间线 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-history text-cyan-400 mr-3"></i>
关键事件时间线
</h2>
<div class="space-y-4">
<div class="timeline-item">
<div class="flex flex-wrap items-center gap-2 mb-2">
<span class="badge badge-primary text-xs">2025-09-08</span>
<span class="badge badge-success text-xs"><i class="fas fa-flask"></i> 技术突破</span>
<span class="badge badge-warning text-xs"><i class="fas fa-bolt"></i> 效率记录</span>
</div>
<p class="font-semibold">国际团队在《科学》杂志发表成果,攻克硅底电池纹理化结构上的钙钛矿钝化难题,实现<strong class="efficiency-badge px-2 py-1 rounded text-sm">33.1%</strong>的光电转换效率</p>
<p class="text-sm text-slate-400 mt-1">推动叠层电池从实验室走向大规模生产的关键里程碑</p>
</div>
<div class="timeline-item">
<div class="flex flex-wrap items-center gap-2 mb-2">
<span class="badge badge-primary text-xs">2025-04-11</span>
<span class="badge badge-info text-xs"><i class="fas fa-handshake"></i> 合作</span>
<span class="badge badge-warning text-xs"><i class="fas fa-trophy"></i> 世界纪录</span>
</div>
<p class="font-semibold">天合光能与牛津光伏达成独家专利许可协议210mm大面积钙钛矿/晶体硅叠层电池效率达<strong class="efficiency-badge px-2 py-1 rounded text-sm">31.1%</strong>,刷新世界纪录</p>
<p class="text-sm text-slate-400 mt-1">获得中国内地研发、制造、销售钙钛矿叠层产品的独家权利</p>
</div>
<div class="timeline-item">
<div class="flex flex-wrap items-center gap-2 mb-2">
<span class="badge badge-primary text-xs">2025-06-16</span>
<span class="badge badge-accent text-xs"><i class="fas fa-users"></i> 行业展会</span>
</div>
<p class="font-semibold">SNEC展会调研反馈叠层路线进步显著参展企业数量、组件面积实验级→大版型、效率平米级26%-27%)均大幅提升</p>
<p class="text-sm text-slate-400 mt-1">玩家数量大幅增加,产品百花齐放,产业化进程加速</p>
</div>
<div class="timeline-item">
<div class="flex flex-wrap items-center gap-2 mb-2">
<span class="badge badge-primary text-xs">2024-12-11</span>
<span class="badge badge-secondary text-xs"><i class="fas fa-gavel"></i> 政策支持</span>
</div>
<p class="font-semibold">河南省政策明确推动异质结、钙钛矿/叠层等新型晶硅太阳能电池技术研究</p>
<p class="text-sm text-slate-400 mt-1">首次获得省级政府层面实质性支持,后续或引发其他省份跟进</p>
</div>
<div class="timeline-item">
<div class="flex flex-wrap items-center gap-2 mb-2">
<span class="badge badge-primary text-xs">2023-2024</span>
<span class="badge badge-secondary text-xs"><i class="fas fa-exclamation-triangle"></i> 技术瓶颈</span>
</div>
<p class="font-semibold">行业处于百兆瓦级中试验证阶段良率仅60%-65%成本约1-1.5元/W</p>
<p class="text-sm text-slate-400 mt-1">叠层技术"仍处于过渡性阶段",大面积制备和稳定性问题待解决</p>
</div>
</div>
</div>
</section>
<!-- 核心逻辑分析 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-cogs text-purple-400 mr-3"></i>
核心逻辑与市场认知分析
</h2>
<div class="grid md:grid-cols-3 gap-6 mb-8">
<div class="text-center">
<div class="radial-progress text-cyan-400" style="--value:95;" role="progressbar">95%</div>
<h4 class="mt-3 font-bold">技术天花板突破</h4>
<p class="text-sm text-slate-400">晶硅效率逼近26%极限</p>
</div>
<div class="text-center">
<div class="radial-progress text-emerald-400" style="--value:60;" role="progressbar">60%</div>
<h4 class="mt-3 font-bold">成本下降路径</h4>
<p class="text-sm text-slate-400">GW级成本有望降至0.6元/W</p>
</div>
<div class="text-center">
<div class="radial-progress text-orange-400" style="--value:30;" role="progressbar">30%</div>
<h4 class="mt-3 font-bold">产业化进度</h4>
<p class="text-sm text-slate-400">实际良率与量产差距</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="alert alert-glass">
<h4 class="font-bold text-success"><i class="fas fa-check-circle mr-2"></i>核心驱动力</h4>
<ul class="mt-2 space-y-1 text-sm">
<li>• 晶硅效率见顶,行业转向效率驱动</li>
<li>• 钙钛矿理论效率极限44%-46%</li>
<li>• 工艺流程短,材料纯度要求低</li>
</ul>
</div>
<div class="alert alert-glass border-l-danger">
<h4 class="font-bold text-danger"><i class="fas fa-exclamation-circle mr-2"></i>预期差风险</h4>
<ul class="mt-2 space-y-1 text-sm">
<li>• 技术路线分歧2T vs 4T被低估</li>
<li>• 良率数据"报喜不报忧"</li>
<li>• 成本测算过于理想化</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-project-diagram text-indigo-400 mr-3"></i>
产业链图谱
</h2>
<div class="space-y-4">
<div class="text-center">
<span class="badge badge-lg" style="background: var(--secondary-gradient); color: white; border: none;">
上游材料 (价值占比30%+)
</span>
</div>
<div class="flex flex-wrap justify-center gap-3 text-sm">
<span class="badge badge-outline">TCO玻璃: 金晶科技、耀皮玻璃</span>
<span class="badge badge-outline">封装胶膜: 福斯特、海优新材、赛伍技术</span>
<span class="badge badge-outline">靶材: 2030年市场50亿元</span>
</div>
<div class="text-center mt-4">
<span class="badge badge-lg" style="background: var(--primary-gradient); color: white; border: none;">
中游设备 (价值占比50%)
</span>
</div>
<div class="grid md:grid-cols-4 gap-3 text-sm">
<div class="text-center">
<div class="badge badge-accent mb-1">镀膜设备 (50%)</div>
<div>捷佳伟创、奥来德、微导纳米</div>
</div>
<div class="text-center">
<div class="badge badge-info mb-1">涂布设备 (25%)</div>
<div>曼恩斯特</div>
</div>
<div class="text-center">
<div class="badge badge-warning mb-1">激光设备 (15%)</div>
<div>德龙激光、大族激光</div>
</div>
<div class="text-center">
<div class="badge badge-secondary mb-1">封装设备 (10%)</div>
<div>未明确</div>
</div>
</div>
<div class="text-center mt-4">
<span class="badge badge-lg" style="background: var(--accent-gradient); color: white; border: none;">
下游组件 (市场近400亿)
</span>
</div>
<div class="grid md:grid-cols-3 gap-3 text-sm">
<div class="text-center">
<div class="badge badge-primary mb-1">晶硅大厂</div>
<div>天合光能、隆基绿能、晶澳科技</div>
</div>
<div class="text-center">
<div class="badge badge-secondary mb-1">钙钛矿初创</div>
<div>协鑫光电、纤纳光电、极电光能</div>
</div>
<div class="text-center">
<div class="badge badge-accent mb-1">跨界巨头</div>
<div>宁德时代、京东方</div>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-table text-green-400 mr-3"></i>
核心标的股票数据
</h2>
<div class="table-responsive-custom">
<table class="table table-hover-custom w-full text-sm">
<thead class="bg-gradient-to-r from-slate-800 to-slate-700 sticky top-0">
<tr>
<th class="text-left py-3 px-4">股票代码</th>
<th class="text-left py-3 px-4">公司名称</th>
<th class="text-left py-3 px-4">分类</th>
<th class="text-left py-3 px-4">产品/业务</th>
<th class="text-left py-3 px-4">业务进展</th>
<th class="text-left py-3 px-4">消息来源</th>
<th class="text-left py-3 px-4">投资亮点</th>
</tr>
</thead>
<tbody class="bg-slate-800/30">
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">300751</td>
<td class="py-3 px-4 font-semibold">迈为股份</td>
<td class="py-3 px-4"><span class="badge badge-primary badge-sm">整线设备供应商</span></td>
<td class="py-3 px-4">钙钛矿叠层电池生产设备整线、原子层沉积ALD设备</td>
<td class="py-3 px-4">2025年拟投资约21亿元用于钙钛矿叠层太阳能电池制造设备生产</td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">机构研报</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">大规模投资</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">300724</td>
<td class="py-3 px-4 font-semibold">捷佳伟创</td>
<td class="py-3 px-4"><span class="badge badge-primary badge-sm">整线设备供应商</span></td>
<td class="py-3 px-4">钙钛矿及钙钛矿叠层电池整线设备</td>
<td class="py-3 px-4">2024年大规格涂布设备、大尺寸闪蒸炉(VC)及磁控溅射式真空镀膜设备出货</td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">机构研报</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">已交付设备</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">000821</td>
<td class="py-3 px-4 font-semibold">京山轻机</td>
<td class="py-3 px-4"><span class="badge badge-primary badge-sm">整线设备供应商</span></td>
<td class="py-3 px-4">钙钛矿单结及叠层设备的整体解决方案(可覆盖GW级量产)</td>
<td class="py-3 px-4">2024年中标头部企业钙钛矿项目订单(PVD、RPD)</td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">机构研报</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">中标订单</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">688516</td>
<td class="py-3 px-4 font-semibold">奥特维</td>
<td class="py-3 px-4"><span class="badge badge-primary badge-sm">整线设备供应商</span></td>
<td class="py-3 px-4">钙钛矿叠层设备已完成研发</td>
<td class="py-3 px-4">预计今年可发往客户端进行验证</td>
<td class="py-3 px-4"><span class="badge badge-warning badge-sm">公告</span></td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">研发完成</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">688378</td>
<td class="py-3 px-4 font-semibold">奥来德</td>
<td class="py-3 px-4"><span class="badge badge-secondary badge-sm">镀膜设备供应商</span></td>
<td class="py-3 px-4">钙钛矿蒸镀设备</td>
<td class="py-3 px-4">与头部企业深入交流开发的550*450钙钛矿功能层蒸镀机在膜厚均匀性等指标达标</td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">机构研报</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">技术达标</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">688147</td>
<td class="py-3 px-4 font-semibold">微导纳米</td>
<td class="py-3 px-4"><span class="badge badge-secondary badge-sm">镀膜设备供应商</span></td>
<td class="py-3 px-4">覆盖MW级钙钛矿电池整线工艺设备包括ALD设备、磁控溅射设备</td>
<td class="py-3 px-4">2024年应用于钙钛矿/钙钛矿叠层电池的ALD设备在客户端验证并获重复订单</td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">机构研报</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">重复订单</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">688170</td>
<td class="py-3 px-4 font-semibold">德龙激光</td>
<td class="py-3 px-4"><span class="badge badge-accent badge-sm">激光设备</span></td>
<td class="py-3 px-4">钙钛矿薄膜太阳能电池生产整段设备包括前段P1/P2/P3激光打标设备、P4激光清边设备等</td>
<td class="py-3 px-4">2022年交付首条钙钛矿薄膜太阳能电池激光加工设备2023年获GW级产线订单</td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">机构研报</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">GW级订单</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">002008</td>
<td class="py-3 px-4 font-semibold">大族激光</td>
<td class="py-3 px-4"><span class="badge badge-accent badge-sm">激光设备</span></td>
<td class="py-3 px-4">钙钛矿激光刻划相关设备</td>
<td class="py-3 px-4">持续获得钙钛矿领域激光模切设备订单,部分订单已验收</td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">机构研报</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">订单验收</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">688025</td>
<td class="py-3 px-4 font-semibold">杰普特</td>
<td class="py-3 px-4"><span class="badge badge-accent badge-sm">激光设备</span></td>
<td class="py-3 px-4">激光模切设备(覆盖P1至P4的激光模切以及激光清边工艺)</td>
<td class="py-3 px-4">2024年配合客户落地GW级产线</td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">机构研报</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">GW级落地</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">002309</td>
<td class="py-3 px-4 font-semibold">中利集团</td>
<td class="py-3 px-4"><span class="badge badge-ghost badge-sm">专利</span></td>
<td class="py-3 px-4">叠层钙钛矿相关技术已形成知识产权专利5项(其中已授权2项)</td>
<td class="py-3 px-4">已形成知识产权</td>
<td class="py-3 px-4"><span class="badge badge-secondary badge-sm">互动</span></td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">专利布局</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">688680</td>
<td class="py-3 px-4 font-semibold">海优新材</td>
<td class="py-3 px-4"><span class="badge badge-ghost badge-sm">其它</span></td>
<td class="py-3 px-4">针对二代叠层钙钛矿对封装可靠性要求更高的需求,推出低温固化胶膜</td>
<td class="py-3 px-4">产品低温固化胶膜成为叠层钙钛矿更优选</td>
<td class="py-3 px-4"><span class="badge badge-warning badge-sm">公告</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">材料创新</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">002329</td>
<td class="py-3 px-4 font-semibold">皇氏集团</td>
<td class="py-3 px-4"><span class="badge badge-ghost badge-sm">其它</span></td>
<td class="py-3 px-4">高效叠层太阳能电池研发,产品系列包括钙钛矿/晶硅叠层、钙钛矿/钙钛矿叠层及半透明钙钛矿组件等</td>
<td class="py-3 px-4">研发阶段</td>
<td class="py-3 px-4"><span class="badge badge-secondary badge-sm">互动</span></td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">技术储备</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">002506</td>
<td class="py-3 px-4 font-semibold">协鑫集成</td>
<td class="py-3 px-4"><span class="badge badge-ghost badge-sm">其它</span></td>
<td class="py-3 px-4">新一代高效GTC电池技术的开发</td>
<td class="py-3 px-4">研发阶段</td>
<td class="py-3 px-4"><span class="badge badge-secondary badge-sm">互动</span></td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">技术布局</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">300393</td>
<td class="py-3 px-4 font-semibold">中来股份</td>
<td class="py-3 px-4"><span class="badge badge-ghost badge-sm">其它</span></td>
<td class="py-3 px-4">钙钛矿晶硅叠层电池处于研发阶段</td>
<td class="py-3 px-4">研发投入量产仍需一定时间</td>
<td class="py-3 px-4"><span class="badge badge-secondary badge-sm">互动</span></td>
<td class="py-3 px-4"><span class="badge badge-info badge-sm">早期研发</span></td>
</tr>
<tr class="hover:bg-cyan-900/20">
<td class="py-3 px-4 font-bold">603212</td>
<td class="py-3 px-4 font-semibold">赛伍技术</td>
<td class="py-3 px-4"><span class="badge badge-ghost badge-sm">其它</span></td>
<td class="py-3 px-4">与头部钙钛矿企业建立协同创新项目</td>
<td class="py-3 px-4">开发适用于叠层钙钛矿的光伏膜产品</td>
<td class="py-3 px-4"><span class="badge badge-warning badge-sm">公告</span></td>
<td class="py-3 px-4"><span class="badge badge-success badge-sm">协同创新</span></td>
</tr>
</tbody>
</table>
</div>
<div class="alert alert-glass mt-4">
<i class="fas fa-info-circle mr-2"></i>
<span><strong>注:</strong>表格展示核心钙钛矿叠层概念标的,按业务类型分类。信息来源包括机构研报、公司公告和投资者互动平台。</span>
</div>
</div>
</section>
<!-- 核心公司深度对比 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-balance-scale text-teal-400 mr-3"></i>
核心公司深度对比
</h2>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr class="bg-slate-800/50 text-white">
<th class="py-3 px-4">类型</th>
<th class="py-3 px-4">代表公司</th>
<th class="py-3 px-4">竞争优势</th>
<th class="py-3 px-4">业务进展</th>
<th class="py-3 px-4">潜在风险</th>
<th class="py-3 px-4">评级</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-700 hover:bg-slate-800/30">
<td rowspan="2" class="font-bold bg-blue-900/20">晶硅转型者</td>
<td class="font-semibold text-cyan-300">天合光能</td>
<td>专利壁垒(牛津光伏独占授权)、品牌渠道、资金雄厚</td>
<td>210mm叠层效率<strong>31.1%</strong>第32次刷新纪录</td>
<td>存量晶硅资产拖累,技术失败将面临双重损失</td>
<td><span class="rating-stars">★★★★☆</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-slate-800/30">
<td class="font-semibold text-cyan-300">隆基绿能</td>
<td>硅片-电池-组件一体化,研发实力强</td>
<td>未披露叠层具体效率,大概率自研路线</td>
<td>技术路线不确定性高,后发劣势</td>
<td><span class="rating-stars">★★★☆☆</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-slate-800/30">
<td rowspan="2" class="font-bold bg-green-900/20">钙钛矿原生者</td>
<td class="font-semibold text-emerald-300">协鑫光电</td>
<td>专注钙钛矿10年百兆瓦线达产率>80%</td>
<td>1m×2m组件效率目标18%GW线设备调试中</td>
<td>良率数据不透明,叠层技术储备弱</td>
<td><span class="rating-stars">★★★☆☆</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-slate-800/30">
<td class="font-semibold text-emerald-300">纤纳光电</td>
<td>率先实现商业化交付,通过严苛认证</td>
<td>阿尔法组件发布GW线规划</td>
<td>体量较小,资金承压,叠层进度慢于协鑫</td>
<td><span class="rating-stars">★★☆☆☆</span></td>
</tr>
<tr class="border-b border-slate-700 hover:bg-slate-800/30">
<td rowspan="2" class="font-bold bg-purple-900/20">跨界破局者</td>
<td class="font-semibold text-purple-300">宁德时代</td>
<td>资金雄厚(千亿级),锂电与钙钛矿工艺协同</td>
<td>GW级产线2025H2投产未披露技术细节</td>
<td>光伏行业经验不足,技术整合难度大</td>
<td><span class="rating-stars">★★★★☆</span></td>
</tr>
<tr class="hover:bg-slate-800/30">
<td class="font-semibold text-purple-300">京东方</td>
<td>面板级真空镀膜技术积累,大面积制备经验丰富</td>
<td>与天合合作开发叠层采用2T路线</td>
<td>技术迁移可行性待验证,商业化动机弱于宁德</td>
<td><span class="rating-stars">★★★☆☆</span></td>
</tr>
</tbody>
</table>
</div>
<div class="alert alert-glass mt-4">
<strong>领导者判定:</strong>天合光能凭借<strong>牛津光伏专利独占性</strong><strong>持续效率突破</strong>,占据技术制高点;宁德时代凭借<strong>资金实力和工艺协同</strong>,产业化落地确定性最强。二者构成<strong>"技术+资本"双龙头格局</strong>
</div>
</div>
</section>
<!-- 阶段判断与投资启示 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-chart-area text-orange-400 mr-3"></i>
阶段判断与投资启示
</h2>
<div class="grid md:grid-cols-3 gap-6 mb-6">
<div class="text-center glass-card p-6">
<h3 class="text-xl font-bold text-cyan-400 mb-2">短期 (2025年)</h3>
<div class="radial-progress text-cyan-400 mx-auto mb-2" style="--value:75;" role="progressbar">75%</div>
<p class="text-sm text-slate-400">市场基于GW级规划和效率突破给予高估值但设备订单兑现度、产线调试进度、良率爬坡数据将决定预期能否落地。当前情绪乐观度>技术成熟度</p>
<div class="mt-3"><span class="badge badge-warning">风险较高</span></div>
</div>
<div class="text-center glass-card p-6">
<h3 class="text-xl font-bold text-emerald-400 mb-2">中期 (2026-2027)</h3>
<div class="radial-progress text-emerald-400 mx-auto mb-2" style="--value:50;" role="progressbar">50%</div>
<p class="text-sm text-slate-400">若2-3条GW级产线实现85%+良率和0.8元/W成本将确认商业化拐点进入基本面驱动阶段</p>
<div class="mt-3"><span class="badge badge-info">等待验证</span></div>
</div>
<div class="text-center glass-card p-6">
<h3 class="text-xl font-bold text-purple-400 mb-2">长期 (2028年后)</h3>
<div class="radial-progress text-purple-400 mx-auto mb-2" style="--value:25;" role="progressbar">25%</div>
<p class="text-sm text-slate-400">若钙钛矿-晶硅叠层渗透率超20%,将重塑光伏产业格局,但需警惕全钙钛矿叠层技术颠覆风险</p>
<div class="mt-3"><span class="badge badge-success">潜力巨大</span></div>
</div>
</div>
<div class="grid md:grid-cols-3 gap-4">
<div class="alert alert-glass border-l-success">
<h4 class="font-bold text-success"><i class="fas fa-tools mr-2"></i>设备端 (★★★★★)</h4>
<p class="text-sm mt-1">确定性最强。无论2T还是4T路线镀膜、激光、涂布设备均为刚需。GW级规划即使仅兑现30%也带来20-30亿元设备订单。</p>
<div class="mt-2">
<span class="badge badge-success badge-sm">优选:捷佳伟创、微导纳米</span>
<span class="badge badge-warning badge-sm">规避:大族激光、科恒股份</span>
</div>
</div>
<div class="alert alert-glass border-l-info">
<h4 class="font-bold text-info"><i class="fas fa-box mr-2"></i>材料端 (★★★★☆)</h4>
<p class="text-sm mt-1">等待认证客户粘性强。TCO玻璃、低温固化胶膜一旦通过组件厂认证供应关系稳固。2030年市场空间超200亿元。</p>
<div class="mt-2">
<span class="badge badge-info badge-sm">优选:金晶科技、海优新材</span>
<span class="badge badge-ghost badge-sm">观望:福斯特</span>
</div>
</div>
<div class="alert alert-glass border-l-warning">
<h4 class="font-bold text-warning"><i class="fas fa-solar-panel mr-2"></i>组件端 (★★★☆☆)</h4>
<p class="text-sm mt-1">高风险高收益。环节同质化竞争激烈2-3年亏损期是常态。只有技术+资金双龙头能熬过商业化阵痛期。</p>
<div class="mt-2">
<span class="badge badge-warning badge-sm">优选:天合光能、宁德时代</span>
<span class="badge badge-error badge-sm">规避:协鑫集成、中来股份</span>
</div>
</div>
</div>
</div>
</section>
<!-- 核心跟踪指标 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-bullseye text-red-400 mr-3"></i>
核心跟踪指标与验证清单
</h2>
<ul class="nav nav-pills mb-6 flex flex-wrap gap-2" role="tablist">
<li><a class="nav-link active" data-bs-toggle="pill" href="#short-term">短期 (2025Q4)</a></li>
<li><a class="nav-link" data-bs-toggle="pill" href="#mid-term">中期 (2026)</a></li>
<li><a class="nav-link" data-bs-toggle="pill" href="#long-term">长期 (2027后)</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="short-term">
<div class="space-y-3">
<div class="flex items-center p-3 glass-card rounded-lg">
<i class="fas fa-industry text-2xl text-cyan-400 mr-4"></i>
<div>
<strong>GW级产线投产数量</strong>
<p class="text-sm text-slate-400">实际建成≠规划,需跟踪设备进厂、首片下线、良率爬坡三阶段</p>
<div class="progress progress-custom mt-2">
<div class="progress-bar progress-bar-custom" role="progressbar" style="width: 30%">预计3-5条</div>
</div>
</div>
</div>
<div class="flex items-center p-3 glass-card rounded-lg">
<i class="fas fa-file-contract text-2xl text-orange-400 mr-4"></i>
<div>
<strong>设备订单兑现</strong>
<p class="text-sm text-slate-400">捷佳伟创、微导纳米季度订单额是否持续超2亿元</p>
<div class="progress progress-custom mt-2">
<div class="progress-bar progress-bar-custom" role="progressbar" style="width: 60%">部分兑现</div>
</div>
</div>
</div>
<div class="flex items-center p-3 glass-card rounded-lg">
<i class="fas fa-chart-bar text-2xl text-green-400 mr-4"></i>
<div>
<strong>平米级效率稳定性</strong>
<p class="text-sm text-slate-400">1m×2m组件26%+效率的第三方认证报告,良率>80%</p>
<div class="progress progress-custom mt-2">
<div class="progress-bar progress-bar-custom" role="progressbar" style="width: 40%">部分达标</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="mid-term">
<div class="space-y-3">
<div class="flex items-center p-3 glass-card rounded-lg">
<i class="fas fa-dollar-sign text-2xl text-emerald-400 mr-4"></i>
<div>
<strong>成本数据</strong>
<p class="text-sm text-slate-400">GW级产线是否实现0.8元/W以下成本</p>
</div>
</div>
<div class="flex items-center p-3 glass-card rounded-lg">
<i class="fas fa-sun text-2xl text-yellow-400 mr-4"></i>
<div>
<strong>户外实证数据</strong>
<p class="text-sm text-slate-400">已建电站1年期衰减率是否<2%25年寿命模型是否成立</p>
</div>
</div>
<div class="flex items-center p-3 glass-card rounded-lg">
<i class="fas fa-shopping-cart text-2xl text-blue-400 mr-4"></i>
<div>
<strong>下游采购</strong>
<p class="text-sm text-slate-400">五大四小发电集团是否将钙钛矿叠层纳入年度集采目录</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="long-term">
<div class="space-y-3">
<div class="flex items-center p-3 glass-card rounded-lg">
<i class="fas fa-chart-pie text-2xl text-purple-400 mr-4"></i>
<div>
<strong>渗透率</strong>
<p class="text-sm text-slate-400">全球钙钛矿叠层组件出货量占比是否突破5%</p>
</div>
</div>
<div class="flex items-center p-3 glass-card rounded-lg">
<i class="fas fa-rocket text-2xl text-indigo-400 mr-4"></i>
<div>
<strong>技术迭代</strong>
<p class="text-sm text-slate-400">全钙钛矿叠层效率是否突破35%</p>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-error alert-glass mt-6">
<i class="fas fa-exclamation-triangle mr-3"></i>
<strong>警示信号:</strong>若2025年底实际投产GW线<3条或良率<75%则产业化进度远低预期需果断降低仓位
</div>
</div>
</section>
<!-- 风险与挑战 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-shield-alt text-rose-400 mr-3"></i>
潜在风险与挑战
</h2>
<div class="grid md:grid-cols-2 gap-4">
<div class="alert alert-glass border-l-rose-500">
<h4 class="font-bold text-rose-400"><i class="fas fa-cogs mr-2"></i>技术风险</h4>
<ul class="mt-2 text-sm space-y-1">
<li><strong>大面积制备均匀性:</strong>晶硅绒面导致钙钛矿溶液涂布难均匀2T路线需依赖真空蒸镀经济性与技术成熟度不可兼得</li>
<li><strong>稳定性与铅污染:</strong>双85测试后性能保持率仅95%,铅元素封装可缓解污染,但环保法规趋严可能限制应用</li>
<li><strong>光电流匹配与热斑效应:</strong>2T结构需电流精确匹配光照不均导致MPPT跟踪困难</li>
</ul>
</div>
<div class="alert alert-glass border-l-orange-500">
<h4 class="font-bold text-orange-400"><i class="fas fa-briefcase mr-2"></i>商业化风险</h4>
<ul class="mt-2 text-sm space-y-1">
<li><strong>成本倒挂风险:</strong>核心设备国产化率不足30%,降本速度或慢于预期</li>
<li><strong>应用场景局限:</strong>4T结构需额外TCO玻璃重量增加15%-20%,不适合屋顶分布式</li>
<li><strong>客户认证周期长:</strong>国内大型央企采购目录尚未纳入,短期出货量依赖示范项目</li>
</ul>
</div>
</div>
<div class="mt-6">
<h4 class="font-bold mb-3"><i class="fas fa-info-circle text-yellow-400 mr-2"></i>信息交叉验证风险</h4>
<div class="grid md:grid-cols-3 gap-3 text-sm">
<div class="p-3 glass-card rounded">
<strong>"GW级元年"定义模糊</strong>
<p class="text-slate-400 mt-1">实际在建或投产可能不足5条市场预期基于"规划"而非"落地"</p>
</div>
<div class="p-3 glass-card rounded">
<strong>效率数据选择性披露</strong>
<p class="text-slate-400 mt-1">强调实验室效率33.1%但避谈平米级效率26%-27%和良率数据</p>
</div>
<div class="p-3 glass-card rounded">
<strong>订单数据重复计算</strong>
<p class="text-slate-400 mt-1">意向订单与确认订单混淆,统计口径存在差异</p>
</div>
</div>
</div>
</div>
</section>
<!-- 最终结论 -->
<section class="mb-12">
<div class="glass-card p-6 md:p-8 text-center">
<h2 class="text-3xl font-bold mb-4 flex items-center justify-center">
<i class="fas fa-flag-checkered text-emerald-400 mr-3"></i>
综合结论与投资启示
</h2>
<div class="text-xl leading-relaxed mb-6">
叠层钙钛矿是<strong>未来5年光伏产业最大变量</strong>,但当前<strong>预期过度透支</strong>。适合<strong>配置5%-10%仓位</strong>作为战略前沿布局,<strong>重仓时机需等待2026年良率与成本数据验证</strong>
</div>
<div class="grid md:grid-cols-3 gap-4">
<div class="glass-card p-4">
<div class="text-3xl font-black text-cyan-400 mb-2">5-10%</div>
<div class="text-sm">建议配置比例</div>
</div>
<div class="glass-card p-4">
<div class="text-3xl font-black text-emerald-400 mb-2">2026</div>
<div class="text-sm">验证关键年</div>
</div>
<div class="glass-card p-4">
<div class="text-3xl font-black text-purple-400 mb-2">设备端</div>
<div class="text-sm">唯一业绩安全垫</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer class="mt-16 py-8 border-t border-slate-800">
<div class="container mx-auto px-4 text-center text-slate-500">
<p>本报告基于公开信息整理,仅供参考,不构成投资建议。投资有风险,入市需谨慎。</p>
<p class="text-sm mt-2">数据更新时间2025年11月11日 | AI智能研报生成系统</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 页面加载动画
document.addEventListener('DOMContentLoaded', function() {
const elements = document.querySelectorAll('.glass-card');
elements.forEach((el, index) => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
setTimeout(() => {
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
}, index * 100);
});
// 添加鼠标悬停效果
document.querySelectorAll('.table tbody tr').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.boxShadow = '0 0 15px rgba(0, 173, 255, 0.3)';
});
row.addEventListener('mouseleave', function() {
this.style.boxShadow = 'none';
});
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,931 @@
<!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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-morphism {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-item::before {
content: '';
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: #fbbf24;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.stock-row:hover {
background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
transform: scale(1.02);
transition: all 0.2s ease;
}
.insight-card {
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.8) 100%);
backdrop-filter: blur(10px);
}
.news-ticker {
animation: scroll 30s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.5);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.7);
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="glass-morphism fixed top-0 w-full z-50 px-6 py-3">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-3">
<i class="fas fa-chart-line text-2xl text-white"></i>
<span class="text-xl font-bold text-white">台资企业概念</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#concept" class="text-white hover:text-yellow-300 transition">概念解析</a>
<a href="#timeline" class="text-white hover:text-yellow-300 transition">时间轴</a>
<a href="#companies" class="text-white hover:text-yellow-300 transition">核心公司</a>
<a href="#stocks" class="text-white hover:text-yellow-300 transition">股票数据</a>
</div>
<button class="md:hidden text-white" onclick="toggleMenu()">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
<div class="absolute inset-0">
<div class="absolute top-20 left-10 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
<div class="absolute top-40 right-10 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
</div>
<div class="container mx-auto px-6 relative z-10">
<div class="text-center text-white">
<div class="inline-flex items-center space-x-2 bg-white/20 px-4 py-2 rounded-full mb-6">
<span class="pulse-dot w-2 h-2 bg-green-400 rounded-full"></span>
<span class="text-sm">实时更新 | 2025年最新政策驱动</span>
</div>
<h1 class="text-5xl md:text-7xl font-bold mb-6">
台资企业<br>
<span class="text-yellow-300">两岸融合新机遇</span>
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto opacity-90">
政策红利 · 产业升级 · 全球布局
</p>
<div class="flex flex-wrap justify-center gap-4">
<div class="bg-white/20 px-6 py-3 rounded-lg">
<div class="text-3xl font-bold">50%+</div>
<div class="text-sm opacity-80">福建利用台资占比</div>
</div>
<div class="bg-white/20 px-6 py-3 rounded-lg">
<div class="text-3xl font-bold">6.4亿</div>
<div class="text-sm opacity-80">Q1实际利用台资(美元)</div>
</div>
<div class="bg-white/20 px-6 py-3 rounded-lg">
<div class="text-3xl font-bold">45+</div>
<div class="text-sm opacity-80">A股台资企业</div>
</div>
</div>
<div class="mt-12">
<a href="#concept" class="inline-flex items-center space-x-2 bg-yellow-400 text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-yellow-300 transition transform hover:scale-105">
<span>探索投资机会</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</section>
<!-- News Ticker -->
<div class="bg-black/20 text-white py-2 overflow-hidden">
<div class="news-ticker whitespace-nowrap">
<span class="inline-block px-4">📈 央行推动更多台资企业在大陆上市</span>
<span class="inline-block px-4">💼 福建一季度利用台资6.4亿美元</span>
<span class="inline-block px-4">🏭 圣晖集成新签订单增长70%</span>
<span class="inline-block px-4">🔋 铜冠铜箔HVLP产品供不应求</span>
<span class="inline-block px-4">🌏 台积电加速全球产能布局</span>
</div>
</div>
<!-- Concept Insight -->
<section id="concept" class="py-20 bg-white/10">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-white mb-4">概念深度解析</h2>
<p class="text-xl text-white/80">政策驱动与产业变革的交汇点</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Core Logic Card -->
<div class="insight-card rounded-2xl p-6 card-hover">
<div class="text-purple-600 text-3xl mb-4">
<i class="fas fa-brain"></i>
</div>
<h3 class="text-xl font-bold mb-3">核心逻辑</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>政策顶层设计推动融合发展</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>全球产业链重构带来新机遇</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>产业互补与技术粘性深度融合</span>
</li>
</ul>
</div>
<!-- Market Sentiment Card -->
<div class="insight-card rounded-2xl p-6 card-hover">
<div class="text-blue-600 text-3xl mb-4">
<i class="fas fa-chart-pie"></i>
</div>
<h3 class="text-xl font-bold mb-3">市场情绪</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-gray-700">政策热度</span>
<div class="flex space-x-1">
<div class="w-8 h-2 bg-green-500 rounded"></div>
<div class="w-8 h-2 bg-green-500 rounded"></div>
<div class="w-8 h-2 bg-green-500 rounded"></div>
<div class="w-8 h-2 bg-green-500 rounded"></div>
<div class="w-8 h-2 bg-gray-300 rounded"></div>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700">产业热度</span>
<div class="flex space-x-1">
<div class="w-8 h-2 bg-blue-500 rounded"></div>
<div class="w-8 h-2 bg-blue-500 rounded"></div>
<div class="w-8 h-2 bg-blue-500 rounded"></div>
<div class="w-8 h-2 bg-gray-300 rounded"></div>
<div class="w-8 h-2 bg-gray-300 rounded"></div>
</div>
</div>
<div class="text-sm text-gray-600 mt-3">
谨慎乐观,机会与风险并存
</div>
</div>
</div>
<!-- Expected Gap Card -->
<div class="insight-card rounded-2xl p-6 card-hover">
<div class="text-yellow-600 text-3xl mb-4">
<i class="fas fa-lightbulb"></i>
</div>
<h3 class="text-xl font-bold mb-3">预期差分析</h3>
<ul class="space-y-2 text-gray-700">
<li>• 宏观叙事 vs 微观现实</li>
<li>• "被扶持者" vs "赋能者"</li>
<li>• "单一板块" vs "分化格局"</li>
<li class="text-sm text-gray-600 mt-2">
忽略分化是最大预期差
</li>
</ul>
</div>
</div>
<!-- Catalyst Section -->
<div class="mt-12 insight-card rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 gradient-text">关键催化剂</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="border-l-4 border-purple-500 pl-4">
<h4 class="font-semibold mb-2">近期催化剂3-6个月</h4>
<ul class="space-y-1 text-gray-700">
<li>• 政策细则落地,明确"优质台资企业"标准</li>
<li>• 首批试点IPO启动福建"台资板"升级</li>
<li>• 台积电等巨头资本开支新动向</li>
</ul>
</div>
<div class="border-l-4 border-blue-500 pl-4">
<h4 class="font-semibold mb-2">长期发展路径</h4>
<ul class="space-y-1 text-gray-700">
<li>• 阶段一:金融融合与试点示范</li>
<li>• 阶段二:双向出海与全球协同</li>
<li>• 阶段三:生态融合与标准统一</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section id="timeline" class="py-20 bg-gradient-to-br from-purple-900 to-indigo-900">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-white mb-4">重要事件时间轴</h2>
<p class="text-xl text-white/80">政策与产业演进历程</p>
</div>
<div class="max-w-4xl mx-auto">
<div class="relative">
<div class="absolute left-4 top-0 bottom-0 w-0.5 bg-white/20"></div>
<div class="relative pl-12 mb-8 timeline-item">
<div class="glass-morphism rounded-lg p-6 text-white">
<div class="flex items-center justify-between mb-2">
<span class="text-yellow-300 font-semibold">2025年9月</span>
<span class="text-sm text-white/60">产业合作</span>
</div>
<h4 class="font-bold mb-2">工信部副部长会见两岸企业家峰会</h4>
<p class="text-sm text-white/80">双方就两岸产业交流合作等议题交换意见</p>
</div>
</div>
<div class="relative pl-12 mb-8 timeline-item">
<div class="glass-morphism rounded-lg p-6 text-white">
<div class="flex items-center justify-between mb-2">
<span class="text-yellow-300 font-semibold">2025年8月</span>
<span class="text-sm text-white/60">金融支持</span>
</div>
<h4 class="font-bold mb-2">金融监管总局推进两岸银行业保险业融合</h4>
<p class="text-sm text-white/80">深化闽台金融业务合作,支持台资金融机构发展</p>
</div>
</div>
<div class="relative pl-12 mb-8 timeline-item">
<div class="glass-morphism rounded-lg p-6 text-white">
<div class="flex items-center justify-between mb-2">
<span class="text-yellow-300 font-semibold">2025年6月</span>
<span class="text-sm bg-red-500 px-2 py-1 rounded">核心催化</span>
</div>
<h4 class="font-bold mb-2">央行、外管局发布重磅政策</h4>
<p class="text-sm text-white/80">推动更多台资企业在大陆上市,建设两岸融合发展示范区</p>
</div>
</div>
<div class="relative pl-12 mb-8 timeline-item">
<div class="glass-morphism rounded-lg p-6 text-white">
<div class="flex items-center justify-between mb-2">
<span class="text-yellow-300 font-semibold">2025年5月</span>
<span class="text-sm text-white/60">产业数据</span>
</div>
<h4 class="font-bold mb-2">福建Q1利用台资6.4亿美元</h4>
<p class="text-sm text-white/80">同比增长占全国比重超过50%</p>
</div>
</div>
<div class="relative pl-12 mb-8 timeline-item">
<div class="glass-morphism rounded-lg p-6 text-white">
<div class="flex items-center justify-between mb-2">
<span class="text-yellow-300 font-semibold">2025年3月</span>
<span class="text-sm text-orange-400 px-2 py-1 rounded">风险提示</span>
</div>
<h4 class="font-bold mb-2">国家安全部发声</h4>
<p class="text-sm text-white/80">台湾资通电军"倚网谋独"终是死路一条</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Key Companies Analysis -->
<section id="companies" class="py-20 bg-white/10">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-white mb-4">核心公司深度剖析</h2>
<p class="text-xl text-white/80">产业链关键节点企业</p>
</div>
<div class="grid lg:grid-cols-2 gap-8">
<!-- 圣晖集成 -->
<div class="insight-card rounded-2xl p-8">
<div class="flex items-center justify-between mb-4">
<h3 class="text-2xl font-bold">圣晖集成 (603163)</h3>
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">领导者</span>
</div>
<div class="mb-4">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">台资背景</span>
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">半导体洁净室</span>
<span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm">全球化布局</span>
</div>
</div>
<div class="space-y-3 text-gray-700">
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
<span class="font-medium">新签订单增速</span>
<span class="text-green-600 font-bold">+70%</span>
</div>
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
<span class="font-medium">在手订单增长</span>
<span class="text-green-600 font-bold">+63%</span>
</div>
<div class="p-4 bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg">
<p class="text-sm leading-relaxed">
深度绑定台积电、鸿海等顶级客户,凭借台资身份获得海外客户信任,同时受益于大陆工程师红利和高效项目管理能力。
</p>
</div>
</div>
</div>
<!-- 亚翔集成 -->
<div class="insight-card rounded-2xl p-8">
<div class="flex items-center justify-between mb-4">
<h3 class="text-2xl font-bold">亚翔集成 (603929)</h3>
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">追赶者</span>
</div>
<div class="mb-4">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">台资背景</span>
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">晶圆厂工程</span>
<span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm">东南亚布局</span>
</div>
</div>
<div class="space-y-3 text-gray-700">
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
<span class="font-medium">新加坡新签订单</span>
<span class="text-green-600 font-bold">31.63亿元</span>
</div>
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
<span class="font-medium">2024年毛利率(新加坡)</span>
<span class="text-green-600 font-bold">21.22%</span>
</div>
<div class="p-4 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg">
<p class="text-sm leading-relaxed">
在新加坡、台湾市场根基深厚近期斩获新加坡VSMC晶圆厂大额订单受益于半导体产业链向东南亚转移。
</p>
</div>
</div>
</div>
<!-- 铜冠铜箔 -->
<div class="insight-card rounded-2xl p-8">
<div class="flex items-center justify-between mb-4">
<h3 class="text-2xl font-bold">铜冠铜箔 (001217)</h3>
<span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">关键配套</span>
</div>
<div class="mb-4">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">高端PCB铜箔</span>
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">台资大厂合作</span>
<span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm">国产替代</span>
</div>
</div>
<div class="space-y-3 text-gray-700">
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
<span class="font-medium">HVLP 2出货量(2024)</span>
<span class="text-green-600 font-bold">1000吨+</span>
</div>
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
<span class="font-medium">HVLP 2报价</span>
<span class="text-green-600 font-bold">7万元/吨</span>
</div>
<div class="p-4 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg">
<p class="text-sm leading-relaxed">
与台光、台耀等台资大厂超十年合作HVLP产品供不应求订单已排到数月后受益于竞争对手扩产停滞。
</p>
</div>
</div>
</div>
<!-- 工业富联 -->
<div class="insight-card rounded-2xl p-8">
<div class="flex items-center justify-between mb-4">
<h3 class="text-2xl font-bold">工业富联 (601138)</h3>
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">产业巨头</span>
</div>
<div class="mb-4">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">AI服务器</span>
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">云计算</span>
<span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm">鸿海系</span>
</div>
</div>
<div class="space-y-3 text-gray-700">
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
<span class="font-medium">行业地位</span>
<span class="text-green-600 font-bold">全球AI服务器龙头</span>
</div>
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
<span class="font-medium">核心优势</span>
<span class="text-green-600 font-bold">规模效应明显</span>
</div>
<div class="p-4 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg">
<p class="text-sm leading-relaxed">
鸿海精密在A股核心上市平台全球AI服务器和消费电子制造绝对龙头AI算力浪潮核心受益者。
</p>
</div>
</div>
</div>
</div>
<!-- Risk Analysis -->
<div class="mt-12 glass-morphism rounded-2xl p-8">
<h3 class="text-2xl font-bold text-white mb-6">⚠️ 风险分析</h3>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
<h4 class="font-semibold text-red-400 mb-2">政策风险</h4>
<p class="text-sm text-white/80">
两岸关系变化可能导致政策转向,国家安全警告显示地缘政治风险
</p>
</div>
<div class="bg-orange-500/10 border border-orange-500/30 rounded-lg p-4">
<h4 class="font-semibold text-orange-400 mb-2">执行风险</h4>
<p class="text-sm text-white/80">
IPO审核趋严环境下台资企业能否享受绿色通道存在不确定性
</p>
</div>
<div class="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4">
<h4 class="font-semibold text-yellow-400 mb-2">技术风险</h4>
<p class="text-sm text-white/80">
大陆厂商在尖端领域制造良率与台资巨头仍有差距
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section id="stocks" class="py-20 bg-gradient-to-br from-indigo-900 to-purple-900">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-white mb-4">台资概念股票全景</h2>
<p class="text-xl text-white/80">45+家上市公司详细信息</p>
</div>
<div class="glass-morphism rounded-2xl p-6 overflow-x-auto">
<table class="w-full text-white">
<thead>
<tr class="border-b border-white/20">
<th class="text-left py-3 px-4">股票名称</th>
<th class="text-left py-3 px-4">分类</th>
<th class="text-left py-3 px-4">第一大股东/背景</th>
<th class="text-left py-3 px-4">董事长/实控人</th>
<th class="text-left py-3 px-4">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">工业富联</td>
<td class="py-3 px-4">
<span class="bg-purple-500/30 px-2 py-1 rounded text-xs">台资背景</span>
</td>
<td class="py-3 px-4 text-sm">鸿海精密(台湾上市)</td>
<td class="py-3 px-4 text-sm">-</td>
<td class="py-3 px-4 text-sm">智能制造AI服务器</td>
</tr>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">鹏鼎控股</td>
<td class="py-3 px-4">
<span class="bg-purple-500/30 px-2 py-1 rounded text-xs">台资背景</span>
</td>
<td class="py-3 px-4 text-sm">美港实业</td>
<td class="py-3 px-4 text-sm">沈庆芳(台籍)</td>
<td class="py-3 px-4 text-sm">全球PCB龙头</td>
</tr>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">圣晖集成</td>
<td class="py-3 px-4">
<span class="bg-purple-500/30 px-2 py-1 rounded text-xs">台资背景</span>
</td>
<td class="py-3 px-4 text-sm">台湾圣晖</td>
<td class="py-3 px-4 text-sm">-</td>
<td class="py-3 px-4 text-sm">半导体洁净室工程</td>
</tr>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">亚翔集成</td>
<td class="py-3 px-4">
<span class="bg-purple-500/30 px-2 py-1 rounded text-xs">台资背景</span>
</td>
<td class="py-3 px-4 text-sm">亚翔工程(台资)</td>
<td class="py-3 px-4 text-sm">-</td>
<td class="py-3 px-4 text-sm">高端洁净室工程</td>
</tr>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">铜冠铜箔</td>
<td class="py-3 px-4">
<span class="bg-blue-500/30 px-2 py-1 rounded text-xs">台资合作</span>
</td>
<td class="py-3 px-4 text-sm">铜陵有色集团</td>
<td class="py-3 px-4 text-sm">-</td>
<td class="py-3 px-4 text-sm">高端PCB铜箔台资客户</td>
</tr>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">环旭电子</td>
<td class="py-3 px-4">
<span class="bg-purple-500/30 px-2 py-1 rounded text-xs">台资背景</span>
</td>
<td class="py-3 px-4 text-sm">环诚科技(台资)</td>
<td class="py-3 px-4 text-sm">-</td>
<td class="py-3 px-4 text-sm">电子制造服务</td>
</tr>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">唯捷创芯</td>
<td class="py-3 px-4">
<span class="bg-purple-500/30 px-2 py-1 rounded text-xs">台资背景</span>
</td>
<td class="py-3 px-4 text-sm">Gaintech(联发科)</td>
<td class="py-3 px-4 text-sm">-</td>
<td class="py-3 px-4 text-sm">射频PA芯片</td>
</tr>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">新莱应材</td>
<td class="py-3 px-4">
<span class="bg-purple-500/30 px-2 py-1 rounded text-xs">台资背景</span>
</td>
<td class="py-3 px-4 text-sm">李水波(台籍)</td>
<td class="py-3 px-4 text-sm">李水波(台籍)</td>
<td class="py-3 px-4 text-sm">半导体高纯材料</td>
</tr>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">安集科技</td>
<td class="py-3 px-4">
<span class="bg-purple-500/30 px-2 py-1 rounded text-xs">台资背景</span>
</td>
<td class="py-3 px-4 text-sm">俞曙(台籍)</td>
<td class="py-3 px-4 text-sm">俞曙(台籍)</td>
<td class="py-3 px-4 text-sm">半导体CMP材料</td>
</tr>
<tr class="stock-row border-b border-white/10">
<td class="py-3 px-4 font-semibold">沪电股份</td>
<td class="py-3 px-4">
<span class="bg-purple-500/30 px-2 py-1 rounded text-xs">台资背景</span>
</td>
<td class="py-3 px-4 text-sm">吴礼淦创立</td>
<td class="py-3 px-4 text-sm">吴礼淦(台籍)</td>
<td class="py-3 px-4 text-sm">高端PCB制造</td>
</tr>
</tbody>
</table>
</div>
<!-- Stock Statistics -->
<div class="mt-12 grid md:grid-cols-4 gap-6">
<div class="glass-morphism rounded-lg p-6 text-center text-white">
<div class="text-3xl font-bold mb-2">45+</div>
<div class="text-sm opacity-80">A股台资概念企业</div>
</div>
<div class="glass-morphism rounded-lg p-6 text-center text-white">
<div class="text-3xl font-bold mb-2">8</div>
<div class="text-sm opacity-80">半导体产业链</div>
</div>
<div class="glass-morphism rounded-lg p-6 text-center text-white">
<div class="text-3xl font-bold mb-2">6</div>
<div class="text-sm opacity-80">电子制造业</div>
</div>
<div class="glass-morphism rounded-lg p-6 text-center text-white">
<div class="text-3xl font-bold mb-2">5</div>
<div class="text-sm opacity-80">金融服务业</div>
</div>
</div>
</div>
</section>
<!-- Roadshow Insights -->
<section class="py-20 bg-white/10">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-white mb-4">路演核心洞察</h2>
<p class="text-xl text-white/80">来自产业一线的声音</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 菲菱科思 -->
<div class="glass-morphism rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">
</div>
<div class="ml-3">
<h3 class="font-semibold text-white">菲菱科思</h3>
<p class="text-sm text-white/60">2025-05-22</p>
</div>
</div>
<p class="text-white/80 text-sm mb-3">
台资企业撤出大陆的节奏加快,有利于大陆企业承接中高端产品订单
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/20 px-2 py-1 rounded">交换机</span>
<span class="text-xs bg-white/20 px-2 py-1 rounded">国产化替代</span>
</div>
</div>
<!-- 铜冠铜箔 -->
<div class="glass-morphism rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">
</div>
<div class="ml-3">
<h3 class="font-semibold text-white">铜冠铜箔</h3>
<p class="text-sm text-white/60">2025-01-15</p>
</div>
</div>
<p class="text-white/80 text-sm mb-3">
HVLP产品供不应求订单排到8月后台资客户无扩产意愿
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/20 px-2 py-1 rounded">高端铜箔</span>
<span class="text-xs bg-white/20 px-2 py-1 rounded">台资合作</span>
</div>
</div>
<!-- 圣晖集成 -->
<div class="glass-morphism rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold">
</div>
<div class="ml-3">
<h3 class="font-semibold text-white">圣晖集成</h3>
<p class="text-sm text-white/60">2025-09-29</p>
</div>
</div>
<p class="text-white/80 text-sm mb-3">
在手订单创历史新高,海外订单增长显著,受益东南亚产能转移
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/20 px-2 py-1 rounded">洁净室</span>
<span class="text-xs bg-white/20 px-2 py-1 rounded">全球化</span>
</div>
</div>
<!-- 麦格米特 -->
<div class="glass-morphism rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold">
</div>
<div class="ml-3">
<h3 class="font-semibold text-white">麦格米特</h3>
<p class="text-sm text-white/60">2024-12-24</p>
</div>
</div>
<p class="text-white/80 text-sm mb-3">
AI服务器电源市场由台达、光宝等台资巨头主导大陆厂商仍在追赶
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/20 px-2 py-1 rounded">电源</span>
<span class="text-xs bg-white/20 px-2 py-1 rounded">AI服务器</span>
</div>
</div>
<!-- 亚翔集成 -->
<div class="glass-morphism rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center text-white font-bold">
</div>
<div class="ml-3">
<h3 class="font-semibold text-white">亚翔集成</h3>
<p class="text-sm text-white/60">2025-09-24</p>
</div>
</div>
<p class="text-white/80 text-sm mb-3">
新加坡VSMC晶圆厂订单31.63亿,受益半导体产业向东南亚转移
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/20 px-2 py-1 rounded">晶圆厂</span>
<span class="text-xs bg-white/20 px-2 py-1 rounded">新加坡</span>
</div>
</div>
<!-- 汇成股份 -->
<div class="glass-morphism rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center text-white font-bold">
</div>
<div class="ml-3">
<h3 class="font-semibold text-white">汇成股份</h3>
<p class="text-sm text-white/60">2024-06-12</p>
</div>
</div>
<p class="text-white/80 text-sm mb-3">
安徽省首家科创板上市的台资企业,专注显示驱动芯片封测
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/20 px-2 py-1 rounded">封测</span>
<span class="text-xs bg-white/20 px-2 py-1 rounded">显示驱动</span>
</div>
</div>
</div>
</div>
</section>
<!-- Investment Recommendation -->
<section class="py-20 bg-gradient-to-r from-purple-600 to-indigo-600">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-4xl font-bold text-white mb-6">投资策略建议</h2>
<div class="glass-morphism rounded-2xl p-8 text-white">
<h3 class="text-2xl font-bold mb-4">最具投资价值方向</h3>
<div class="grid md:grid-cols-2 gap-6 text-left">
<div class="bg-white/10 rounded-lg p-6">
<h4 class="font-semibold mb-3 text-yellow-300">🌍 全球化建厂服务商</h4>
<ul class="space-y-2 text-sm">
<li>• 首选:圣晖集成、亚翔集成</li>
<li>• AI算力军备竞赛直接受益者</li>
<li>• 订单可见度高,商业模式清晰</li>
<li>• 完美契合产业链转移趋势</li>
</ul>
</div>
<div class="bg-white/10 rounded-lg p-6">
<h4 class="font-semibold mb-3 text-yellow-300">🔧 高端材料国产替代先锋</h4>
<ul class="space-y-2 text-sm">
<li>• 关注:铜冠铜箔、新莱应材</li>
<li>• 抓住台资对手停滞窗口期</li>
<li>• 产业升级内部循环典型代表</li>
<li>• 高端产品毛利率持续提升</li>
</ul>
</div>
</div>
<div class="mt-8 p-4 bg-yellow-500/20 rounded-lg">
<p class="text-sm">
<strong>重点跟踪指标:</strong>
福建示范区首批台资IPO进度 | 圣晖/亚翔季度订单 | 铜冠台资客户出货量 | 两岸关系政策变化
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black/30 py-8">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center text-white/60">
<div class="mb-4 md:mb-0">
<p>© 2025 台资企业概念分析报告</p>
<p class="text-sm">数据来源:公开信息整理 | 仅供研究参考</p>
</div>
<div class="flex space-x-6">
<a href="#" class="hover:text-white transition">
<i class="fab fa-github text-xl"></i>
</a>
<a href="#" class="hover:text-white transition">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="hover:text-white transition">
<i class="fab fa-linkedin text-xl"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Mobile menu toggle
function toggleMenu() {
const menu = document.querySelector('nav .hidden.md\\:flex');
menu.classList.toggle('hidden');
menu.classList.toggle('flex');
menu.classList.add('flex-col', 'absolute', 'top-full', 'left-0', 'w-full', 'bg-white/10', 'backdrop-blur-lg');
menu.classList.remove('space-x-6');
menu.classList.add('space-y-4', 'p-6');
}
// Add animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe all sections
document.querySelectorAll('section').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(30px)';
section.style.transition = 'all 0.6s ease-out';
observer.observe(section);
});
// Stock table hover effect
document.querySelectorAll('.stock-row').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.cursor = 'pointer';
});
row.addEventListener('click', function() {
// Could add modal or navigation to stock detail
console.log('Stock clicked:', this.querySelector('td:first-child').textContent);
});
});
// Add blob animation styles
const style = document.createElement('style');
style.textContent = `
@keyframes blob {
0%, 100% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
`;
document.head.appendChild(style);
</script>
</body>
</html>

View File

@@ -0,0 +1,427 @@
<!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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'primary': '#3b82f6',
'secondary': '#8b5cf6',
}
}
}
}
</script>
<style>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
.timeline-item {
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
}
.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-item:nth-child(5) { animation-delay: 0.5s; }
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.stock-row:hover {
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
transform: scale(1.02);
transition: all 0.3s ease;
}
.badge-glow {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 via-white to-purple-50 min-h-screen">
<!-- Header -->
<header class="gradient-bg text-white shadow-2xl">
<div class="container mx-auto px-4 py-8">
<div class="flex items-center justify-between flex-wrap">
<div class="fade-in-up">
<h1 class="text-4xl md:text-5xl font-bold mb-2 flex items-center gap-3">
<i data-lucide="cpu" class="w-10 h-10"></i>
大湾区芯片展览会-新凯莱
</h1>
<p class="text-xl opacity-90">国产半导体设备破局者的投资机遇分析</p>
</div>
<div class="mt-4 md:mt-0 fade-in-up">
<div class="badge badge-lg badge-warning badge-glow">
<i data-lucide="alert-circle" class="w-4 h-4 mr-1"></i>
2025.10.15 关键节点
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- 核心观点 -->
<section class="mb-12 fade-in-up">
<div class="glass-effect rounded-2xl shadow-xl p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="target" class="w-8 h-8 text-primary"></i>
核心观点摘要
</h2>
<div class="bg-gradient-to-r from-blue-100 to-purple-100 rounded-xl p-6 border-l-4 border-primary">
<p class="text-lg leading-relaxed">
当前"大湾区芯片展览会-新凯莱"概念正处于<strong class="text-primary">由宏大叙事和情绪驱动向基本面验证过渡的关键节点</strong>
其核心驱动力源于地缘政治倒逼下的国产替代迫切需求与大湾区强力政策支持的共振,
而新凯来作为潜在的"破局者",其在湾芯展的"惊喜"发布将成为概念能否从短期炒作转向长期价值投资的<strong class="text-secondary">分水岭</strong>
</p>
</div>
</div>
</section>
<!-- 时间轴 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl shadow-xl p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="timeline" class="w-8 h-8 text-primary"></i>
关键时间轴
</h2>
<div class="relative">
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary to-secondary"></div>
<div class="space-y-6">
<div class="timeline-item flex items-center gap-4">
<div class="w-16 h-16 rounded-full bg-red-500 flex items-center justify-center text-white font-bold shadow-lg z-10">2024</div>
<div class="flex-1 bg-white rounded-lg p-4 shadow-md">
<h3 class="font-bold text-lg">11月11日</h3>
<p class="text-gray-600">台积电宣布暂停向中国大陆AI/GPU客户供应7nm及更先进制程芯片</p>
</div>
</div>
<div class="timeline-item flex items-center gap-4">
<div class="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold shadow-lg z-10">2025</div>
<div class="flex-1 bg-white rounded-lg p-4 shadow-md">
<h3 class="font-bold text-lg">3月26日</h3>
<p class="text-gray-600">新凯来首次参加SEMICON China展示覆盖薄膜沉积、扩散、刻蚀等多款设备</p>
</div>
</div>
<div class="timeline-item flex items-center gap-4">
<div class="w-16 h-16 rounded-full bg-yellow-500 flex items-center justify-center text-white font-bold shadow-lg z-10">10.10</div>
<div class="flex-1 bg-white rounded-lg p-4 shadow-md border-2 border-yellow-400">
<h3 class="font-bold text-lg text-yellow-600">情绪引爆点</h3>
<p class="text-gray-600">深圳发改委主任预告新凯来将在湾芯展上"带来惊喜",相关概念股涨停</p>
</div>
</div>
<div class="timeline-item flex items-center gap-4">
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white font-bold shadow-lg z-10 animate-pulse">10.15</div>
<div class="flex-1 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-4 shadow-md border-2 border-primary">
<h3 class="font-bold text-lg text-primary">审判日</h3>
<p class="text-gray-600">2025湾区半导体芯片展召开新凯来"惊喜"揭晓,概念进入验证期</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑 -->
<section class="mb-12">
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-effect rounded-xl shadow-lg p-6 hover:shadow-2xl transition-all">
<div class="text-4xl mb-4">🚨</div>
<h3 class="text-xl font-bold mb-3 text-red-600">生存驱动</h3>
<p class="text-gray-700">地缘政治倒逼下的国产替代迫切需求,前道设备自主可控从"可选项"变为"必选项"</p>
</div>
<div class="glass-effect rounded-xl shadow-lg p-6 hover:shadow-2xl transition-all">
<div class="text-4xl mb-4">🏛️</div>
<h3 class="text-xl font-bold mb-3 text-blue-600">发展驱动</h3>
<p class="text-gray-700">大湾区战略强力赋能,深重投股东背景提供资源整合想象空间</p>
</div>
<div class="glass-effect rounded-xl shadow-lg p-6 hover:shadow-2xl transition-all">
<div class="text-4xl mb-4">🔬</div>
<h3 class="text-xl font-bold mb-3 text-purple-600">预期驱动</h3>
<p class="text-gray-700">覆盖芯片制造核心环节的产品蓝图,对渴望全产业链自主的国内市场具有极强吸引力</p>
</div>
</div>
</section>
<!-- 关联股票表格 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl shadow-xl p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="bar-chart-3" class="w-8 h-8 text-primary"></i>
产业链关联股票分析
</h2>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr class="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
<th class="rounded-tl-lg">股票名称</th>
<th>关联分类</th>
<th>关联性描述</th>
<th>信源</th>
<th class="rounded-tr-lg">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="stock-row border-b">
<td class="font-bold">新莱应材</td>
<td><span class="badge badge-warning">合作传闻</span></td>
<td>网传纪要显示公司是新凯来核心供应商,涉及真空系统和气体系统</td>
<td>网传</td>
<td class="text-sm">逻辑最纯粹,弹性最大,但风险与机遇并存</td>
</tr>
<tr class="stock-row border-b">
<td class="font-bold">深振业A</td>
<td><span class="badge badge-info">深重投</span></td>
<td>新凯来的控股股东深圳市重大产业投资集团的董事黄秀章同时担任深振业监事</td>
<td>公开资料</td>
<td class="text-sm">纯正度最低,投机性最强,基本面支撑最弱</td>
</tr>
<tr class="stock-row border-b">
<td class="font-bold">奥普光电</td>
<td><span class="badge badge-primary">合资公司</span></td>
<td>公司与长光集智有业务往来长光集智第一大股东新凯来持股60%</td>
<td>互动/工商</td>
<td class="text-sm">业务关联度高,与新凯来景气度直接挂钩</td>
</tr>
<tr class="stock-row border-b">
<td class="font-bold">正帆科技</td>
<td><span class="badge badge-success">供应链</span></td>
<td>新凯来的重要供应商主要提供气体输送模组Gas box用于干法刻蚀设备</td>
<td>互动</td>
<td class="text-sm">稳健的"卖水人",分享行业增长红利,风险较低</td>
</tr>
<tr class="stock-row border-b">
<td class="font-bold">至纯科技</td>
<td><span class="badge badge-success">供应链</span></td>
<td>2021年年报中主要预付账款中新凯来金额3083.82万元,供应半导体清洗设备</td>
<td>公告</td>
<td class="text-sm">成熟供应商,客户群体广泛,新凯来合作锦上添花</td>
</tr>
<tr class="stock-row border-b">
<td class="font-bold">波长光电</td>
<td><span class="badge badge-secondary">字量昇</span></td>
<td>供应非物镜镜片(照明系统、激光器光源、工台量测镜片等)</td>
<td>券商纪要</td>
<td class="text-sm">光学元件供应商,技术壁垒较高</td>
</tr>
<tr class="stock-row border-b">
<td class="font-bold">同惠电子</td>
<td><span class="badge badge-success">供应链</span></td>
<td>新凯来供应商2022年年报应收账款中新凯来排名第三</td>
<td>公告</td>
<td class="text-sm">北交所标的,业务直接关联</td>
</tr>
<tr class="stock-row border-b">
<td class="font-bold">利和兴</td>
<td><span class="badge badge-success">供应链</span></td>
<td>公司为新凯来提供精密结构件和测试平台等产品</td>
<td>互动</td>
<td class="text-sm">"准核心"标的,需跟踪来自新凯来的收入占比</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl shadow-xl p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="lightbulb" class="w-8 h-8 text-yellow-500"></i>
投资启示与风险提示
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-green-50 rounded-xl p-6 border-l-4 border-green-500">
<h3 class="text-xl font-bold mb-4 text-green-700 flex items-center gap-2">
<i data-lucide="trending-up" class="w-6 h-6"></i>
投资机会
</h3>
<ul class="space-y-3">
<li class="flex items-start gap-2">
<i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5"></i>
<span><strong>首选上游核心供应商:</strong>新莱应材等业务高度绑定的供应商,业绩弹性最大</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5"></i>
<span><strong>次选平台型龙头:</strong>正帆科技等分享行业整体增长红利,投资逻辑更稳健</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5"></i>
<span><strong>关注关键验证指标:</strong>10月15日发布会内容、供应商订单增长、第三方验证报道</span>
</li>
</ul>
</div>
<div class="bg-red-50 rounded-xl p-6 border-l-4 border-red-500">
<h3 class="text-xl font-bold mb-4 text-red-700 flex items-center gap-2">
<i data-lucide="alert-triangle" class="w-6 h-6"></i>
风险提示
</h3>
<ul class="space-y-3">
<li class="flex items-start gap-2">
<i data-lucide="x-circle" class="w-5 h-5 text-red-600 mt-0.5"></i>
<span><strong>技术风险:</strong>半导体设备技术壁垒极高,"有"和"好用"是两回事</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="x-circle" class="w-5 h-5 text-red-600 mt-0.5"></i>
<span><strong>商业化风险:</strong>获得客户信任、建立服务体系、实现规模化生产挑战巨大</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="x-circle" class="w-5 h-5 text-red-600 mt-0.5"></i>
<span><strong>信息质量风险:</strong>市场信息混杂,大量未经证实的"网传纪要"存在误导风险</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 关键跟踪指标 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl shadow-xl p-8">
<h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="radar" class="w-8 h-8 text-primary"></i>
关键跟踪指标雷达图
</h2>
<div class="grid md:grid-cols-4 gap-4">
<div class="text-center p-4 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl">
<div class="text-3xl mb-2">📅</div>
<h4 class="font-bold">短期指标</h4>
<p class="text-sm mt-2">10月15日发布会内容</p>
</div>
<div class="text-center p-4 bg-gradient-to-br from-purple-100 to-purple-200 rounded-xl">
<div class="text-3xl mb-2">📊</div>
<h4 class="font-bold">中期指标</h4>
<p class="text-sm mt-2">供应商订单增长</p>
</div>
<div class="text-center p-4 bg-gradient-to-br from-green-100 to-green-200 rounded-xl">
<div class="text-3xl mb-2">🏭</div>
<h4 class="font-bold">验证指标</h4>
<p class="text-sm mt-2">客户产线导入进展</p>
</div>
<div class="text-center p-4 bg-gradient-to-br from-yellow-100 to-yellow-200 rounded-xl">
<div class="text-3xl mb-2">🌐</div>
<h4 class="font-bold">生态指标</h4>
<p class="text-sm mt-2">深重投后续动作</p>
</div>
</div>
</div>
</section>
<!-- 最终结论 -->
<section class="mb-12">
<div class="gradient-bg rounded-2xl shadow-2xl p-8 text-white">
<h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="award" class="w-8 h-8"></i>
综合结论
</h2>
<div class="bg-white/20 backdrop-blur rounded-xl p-6">
<p class="text-lg leading-relaxed">
目前,"大湾区芯片展览会-新凯莱"概念仍处于<strong>典型的主题炒作阶段</strong>,但其内核具备向基本面驱动转化的巨大潜力。
10月15日的"惊喜"发布是决定其命运的<strong>"审判日"</strong>
如果发布内容超预期,概念将进入价值发现阶段;反之,则可能是一地鸡毛。
投资者应重点关注上游核心供应商,同时保持对技术验证进展的密切跟踪,在把握机遇的同时控制风险。
</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">💡 专业投资分析 · 数据仅供参考</p>
<p class="text-sm opacity-75">最后更新2025年10月10日</p>
</div>
</footer>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Add scroll animations
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('.fade-in-up').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'all 0.6s ease-out';
observer.observe(el);
});
// Add hover effect to cards
document.querySelectorAll('.glass-effect').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
this.style.transition = 'all 0.3s ease';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
// Add click to copy functionality for stock names
document.querySelectorAll('.stock-row td:first-child').forEach(cell => {
cell.style.cursor = 'pointer';
cell.addEventListener('click', function() {
const text = this.innerText;
navigator.clipboard.writeText(text);
// Show tooltip
const tooltip = document.createElement('div');
tooltip.className = 'fixed bg-gray-800 text-white px-3 py-1 rounded text-sm z-50';
tooltip.innerText = '已复制: ' + text;
tooltip.style.top = (event.pageY - 30) + 'px';
tooltip.style.left = (event.pageX - 50) + 'px';
document.body.appendChild(tooltip);
setTimeout(() => {
tooltip.remove();
}, 1500);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,607 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太空旅行:从星辰大海到数字宇宙</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></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=Orbitron:wght@400;700;900&display=swap');
body {
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
font-family: 'Orbitron', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hero-title {
background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 3s ease infinite;
font-weight: 900;
}
@keyframes gradient {
0%, 100% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(180deg); }
}
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}
.timeline-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}
.tech-card {
position: relative;
overflow: hidden;
}
.tech-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ffff);
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}
.tech-card:hover::before {
opacity: 1;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.table-container {
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: #00ffff #1a1a2e;
}
.table-container::-webkit-scrollbar {
height: 8px;
}
.table-container::-webkit-scrollbar-track {
background: #1a1a2e;
}
.table-container::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #00ffff, #ff00ff);
border-radius: 4px;
}
.neon-text {
text-shadow: 0 0 10px currentColor;
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body class="min-h-screen text-gray-100">
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0">
<div class="absolute top-20 left-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
<div class="absolute top-40 right-20 w-72 h-72 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
<div class="absolute -bottom-8 left-40 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000"></div>
</div>
<div class="relative z-10 text-center px-6">
<h1 class="hero-title text-6xl md:text-8xl mb-6 float-animation">太空旅行</h1>
<p class="text-2xl md:text-3xl text-cyan-300 mb-4">从星辰大海到数字宇宙</p>
<p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto">
产业变革从载人航天旅游到AI驱动的太空算力中心
</p>
<div class="mt-8 flex gap-4 justify-center">
<span class="badge badge-info badge-lg">AI算力上太空</span>
<span class="badge badge-success badge-lg">万亿级市场</span>
<span class="badge badge-warning badge-lg">新基建革命</span>
</div>
</div>
</section>
<!-- 核心概念 -->
<section class="py-16 px-6">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 neon-text text-cyan-300">
<i class="fas fa-rocket mr-3"></i>概念核心逻辑
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-card rounded-2xl p-6 tech-card">
<div class="text-5xl mb-4 text-center"></div>
<h3 class="text-xl font-bold mb-3 text-yellow-300">能源革命</h3>
<p class="text-sm text-gray-300">
太空数据中心PUE接近1太阳能年发电时长超8000小时能源成本降低10倍以上。地面能源瓶颈催生太空算力需求。
</p>
<div class="mt-4 stats stats-vertical w-full bg-black/30">
<div class="stat">
<div class="stat-value text-cyan-300">1</div>
<div class="stat-title text-xs">理想PUE值</div>
</div>
<div class="stat">
<div class="stat-value text-green-300">8000+</div>
<div class="stat-title text-xs">年发电小时</div>
</div>
</div>
</div>
<div class="glass-card rounded-2xl p-6 tech-card">
<div class="text-5xl mb-4 text-center">🚀</div>
<h3 class="text-xl font-bold mb-3 text-pink-300">技术突破</h3>
<p class="text-sm text-gray-300">
SpaceX星舰将发射成本降至1000元/公斤,激光通信、抗辐射芯片、空间太阳能技术成熟,为大规模部署奠定基础。
</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="badge badge-outline badge-sm">激光通信</span>
<span class="badge badge-outline badge-sm">钙钛矿电池</span>
<span class="badge badge-outline badge-sm">抗辐射芯片</span>
</div>
</div>
<div class="glass-card rounded-2xl p-6 tech-card">
<div class="text-5xl mb-4 text-center">🌍</div>
<h3 class="text-xl font-bold mb-3 text-purple-300">大国博弈</h3>
<p class="text-sm text-gray-300">
太空成为大国竞争新高地,中美加速布局,"逐日工程"、"三体星座"等国家级项目抢占产业制高点。
</p>
<div class="mt-4 timeline">
<div class="flex items-center gap-3">
<div class="timeline-dot w-3 h-3 bg-red-500 rounded-full"></div>
<span class="text-xs">美国SpaceX/亚马逊/谷歌三巨头布局</span>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="timeline-dot w-3 h-3 bg-yellow-500 rounded-full"></div>
<span class="text-xs">中国:星算计划/三体星座/逐日工程</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 关键事件时间轴 -->
<section class="py-16 px-6 bg-black/20">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 neon-text text-green-300">
<i class="fas fa-clock mr-3"></i>关键事件时间轴
</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-cyan-500 to-purple-500"></div>
<div class="space-y-12">
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8 text-right">
<div class="glass-card rounded-xl p-4 inline-block">
<h3 class="font-bold text-yellow-300">2025年5月14日</h3>
<p class="text-sm mt-1">中国成功发射"三体计算星座"首批12颗卫星</p>
<p class="text-xs text-gray-400 mt-2">全球首个在轨组网的太空计算卫星星座</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-cyan-500 rounded-full border-4 border-gray-900"></div>
<div class="w-full md:w-1/2 pl-8"></div>
</div>
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8"></div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full border-4 border-gray-900"></div>
<div class="w-full md:w-1/2 pl-8">
<div class="glass-card rounded-xl p-4 inline-block">
<h3 class="font-bold text-pink-300">2025年10-11月</h3>
<p class="text-sm mt-1">科技巨头密集发布太空AI计划</p>
<p class="text-xs text-gray-400 mt-2">马斯克、贝索斯、谷歌连续表态,引爆市场</p>
</div>
</div>
</div>
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8 text-right">
<div class="glass-card rounded-xl p-4 inline-block">
<h3 class="font-bold text-green-300">2027年目标</h3>
<p class="text-sm mt-1">谷歌计划发射TPU卫星集群</p>
<p class="text-xs text-gray-400 mt-2">"捕光者计划"81颗AI卫星组成</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-yellow-500 rounded-full border-4 border-gray-900"></div>
<div class="w-full md:w-1/2 pl-8"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="py-16 px-6">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 neon-text text-purple-300">
<i class="fas fa-network-wired mr-3"></i>产业链图谱
</h2>
<div class="grid md:grid-cols-3 gap-6">
<!-- 上游 -->
<div class="glass-card rounded-2xl p-6">
<h3 class="text-2xl font-bold mb-4 text-center text-cyan-300">
<i class="fas fa-atom mr-2"></i>上游
</h3>
<div class="space-y-3">
<div class="collapse collapse-arrow bg-black/30">
<input type="checkbox" checked />
<div class="collapse-title text-sm font-medium">能源材料</div>
<div class="collapse-content">
<ul class="text-xs space-y-1">
<li>• 砷化镓/钙钛矿(乾照光电)</li>
<li>• 特种纤维(隆华新材、凯盛新材)</li>
</ul>
</div>
</div>
<div class="collapse collapse-arrow bg-black/30">
<input type="checkbox" />
<div class="collapse-title text-sm font-medium">核心元器件</div>
<div class="collapse-content">
<ul class="text-xs space-y-1">
<li>• 抗辐射芯片(复旦微电)</li>
<li>• 存储芯片(江波龙)</li>
<li>• 激光模块(光库科技)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 中游 -->
<div class="glass-card rounded-2xl p-6">
<h3 class="text-2xl font-bold mb-4 text-center text-yellow-300">
<i class="fas fa-industry mr-2"></i>中游
</h3>
<div class="space-y-3">
<div class="collapse collapse-arrow bg-black/30">
<input type="checkbox" checked />
<div class="collapse-title text-sm font-medium">卫星平台与总装</div>
<div class="collapse-content">
<ul class="text-xs space-y-1">
<li>• 中国卫星、航天电子</li>
</ul>
</div>
</div>
<div class="collapse collapse-arrow bg-black/30">
<input type="checkbox" />
<div class="collapse-title text-sm font-medium">能源系统</div>
<div class="collapse-content">
<ul class="text-xs space-y-1">
<li>• 上海港湾(核心)</li>
<li>• 电科蓝天</li>
</ul>
</div>
</div>
<div class="collapse collapse-arrow bg-black/30">
<input type="checkbox" />
<div class="collapse-title text-sm font-medium">通信载荷</div>
<div class="collapse-content">
<ul class="text-xs space-y-1">
<li>• 烽火通信、上海瀚讯</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 下游 -->
<div class="glass-card rounded-2xl p-6">
<h3 class="text-2xl font-bold mb-4 text-center text-pink-300">
<i class="fas fa-satellite mr-2"></i>下游
</h3>
<div class="space-y-3">
<div class="collapse collapse-arrow bg-black/30">
<input type="checkbox" checked />
<div class="collapse-title text-sm font-medium">算力服务</div>
<div class="collapse-content">
<ul class="text-xs space-y-1">
<li>• 普天科技</li>
<li>• 国星宇航(星算计划)</li>
</ul>
</div>
</div>
<div class="collapse collapse-arrow bg-black/30">
<input type="checkbox" />
<div class="collapse-title text-sm font-medium">太空旅游</div>
<div class="collapse-content">
<ul class="text-xs space-y-1">
<li>• 航宇微(与中科宇航合作)</li>
</ul>
</div>
</div>
<div class="collapse collapse-arrow bg-black/30">
<input type="checkbox" />
<div class="collapse-title text-sm font-medium">发射服务</div>
<div class="collapse-content">
<ul class="text-xs space-y-1">
<li>• 高华科技、斯瑞新材</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心标的表格 -->
<section class="py-16 px-6 bg-black/20">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 neon-text text-yellow-300">
<i class="fas fa-chart-line mr-3"></i>核心上市公司
</h2>
<div class="table-container">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-cyan-500/30">
<th class="p-4 text-left text-cyan-300">股票名称</th>
<th class="p-4 text-left text-cyan-300">分类</th>
<th class="p-4 text-left text-cyan-300">相关性</th>
<th class="p-4 text-left text-cyan-300">消息来源</th>
<th class="p-4 text-left text-cyan-300">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700/30 hover:bg-white/5 transition">
<td class="p-4 font-medium text-yellow-300">探路者</td>
<td class="p-4"><span class="badge badge-info">宇航服</span></td>
<td class="p-4">为神十二至神二十航天员开发舱内服装,参与标准制定</td>
<td class="p-4 text-xs text-gray-400">互动平台</td>
<td class="p-4 text-xs">国家队配套,订单确定性高</td>
</tr>
<tr class="border-b border-gray-700/30 hover:bg-white/5 transition">
<td class="p-4 font-medium text-green-300">上海港湾</td>
<td class="p-4"><span class="badge badge-success">太阳翼</span></td>
<td class="p-4">全系太阳翼/能源系统,方正研报重点推荐</td>
<td class="p-4 text-xs text-gray-400">券商研报</td>
<td class="p-4 text-xs">太空算力核心增量,万亿市场空间</td>
</tr>
<tr class="border-b border-gray-700/30 hover:bg-white/5 transition">
<td class="p-4 font-medium text-purple-300">乾照光电</td>
<td class="p-4"><span class="badge badge-warning">砷化镓</span></td>
<td class="p-4">砷化镓外延片,空间太阳能电池核心材料</td>
<td class="p-4 text-xs text-gray-400">券商研报</td>
<td class="p-4 text-xs">高价值量,技术壁垒高</td>
</tr>
<tr class="border-b border-gray-700/30 hover:bg-white/5 transition">
<td class="p-4 font-medium text-pink-300">国星宇航</td>
<td class="p-4"><span class="badge badge-error">太空算力</span></td>
<td class="p-4">星算计划三体计算星座已部署12颗卫星</td>
<td class="p-4 text-xs text-gray-400">项目进展</td>
<td class="p-4 text-xs">国内太空算力领跑者,商业化进行中</td>
</tr>
<tr class="border-b border-gray-700/30 hover:bg-white/5 transition">
<td class="p-4 font-medium text-cyan-300">烽火通信</td>
<td class="p-4"><span class="badge badge-primary">激光通信</span></td>
<td class="p-4">星间激光通信,天基网络核心环节</td>
<td class="p-4 text-xs text-gray-400">券商研报</td>
<td class="p-4 text-xs">算力上天必要条件Tbps级需求</td>
</tr>
<tr class="border-b border-gray-700/30 hover:bg-white/5 transition">
<td class="p-4 font-medium text-orange-300">际华集团</td>
<td class="p-4"><span class="badge badge-secondary">太空靴</span></td>
<td class="p-4">参与研制神五至神十二宇航员出舱靴系列</td>
<td class="p-4 text-xs text-gray-400">互动平台</td>
<td class="p-4 text-xs">航天装备龙头,多代产品供应</td>
</tr>
<tr class="border-b border-gray-700/30 hover:bg-white/5 transition">
<td class="p-4 font-medium text-red-300">航宇微</td>
<td class="p-4"><span class="badge badge-accent">商业运营</span></td>
<td class="p-4">与中科宇航合作开发太空旅游项目</td>
<td class="p-4 text-xs text-gray-400">公开资料</td>
<td class="p-4 text-xs">直接受益太空旅游产业化</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 风险与机遇 -->
<section class="py-16 px-6">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 neon-text text-green-300">
<i class="fas fa-balance-scale mr-3"></i>风险与机遇
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="glass-card rounded-2xl p-6">
<h3 class="text-2xl font-bold mb-4 text-red-300">
<i class="fas fa-exclamation-triangle mr-2"></i>潜在风险
</h3>
<div class="space-y-4">
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-red-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fas fa-bolt text-red-400 text-xs"></i>
</div>
<div>
<h4 class="font-semibold text-sm">技术风险</h4>
<p class="text-xs text-gray-400 mt-1">抗辐射芯片性能、激光通信成熟度等关键技术瓶颈</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-orange-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fas fa-coins text-orange-400 text-xs"></i>
</div>
<div>
<h4 class="font-semibold text-sm">商业化风险</h4>
<p class="text-xs text-gray-400 mt-1">成本高昂一座算力中心发射成本超200亿元</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-yellow-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fas fa-globe text-yellow-400 text-xs"></i>
</div>
<div>
<h4 class="font-semibold text-sm">政策风险</h4>
<p class="text-xs text-gray-400 mt-1">地缘政治、国际监管、频谱资源竞争</p>
</div>
</div>
</div>
</div>
<div class="glass-card rounded-2xl p-6">
<h3 class="text-2xl font-bold mb-4 text-green-300">
<i class="fas fa-rocket mr-2"></i>投资机遇
</h3>
<div class="space-y-4">
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-green-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fas fa-sun text-green-400 text-xs"></i>
</div>
<div>
<h4 class="font-semibold text-sm">能源革命</h4>
<p class="text-xs text-gray-400 mt-1">太阳翼系统价值量巨大TW级需求超万亿市场</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-cyan-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fas fa-network-wired text-cyan-400 text-xs"></i>
</div>
<div>
<h4 class="font-semibold text-sm">天基网络</h4>
<p class="text-xs text-gray-400 mt-1">激光通信是算力上天必要条件,先发优势明显</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-purple-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fas fa-microchip text-purple-400 text-xs"></i>
</div>
<div>
<h4 class="font-semibold text-sm">国产替代</h4>
<p class="text-xs text-gray-400 mt-1">抗辐射芯片、存储等核心器件迫切需要自主可控</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 投资建议 -->
<section class="py-16 px-6 bg-gradient-to-b from-transparent to-black/50">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-4xl font-bold mb-6 neon-text text-yellow-300">
<i class="fas fa-lightbulb mr-3"></i>投资策略
</h2>
<div class="glass-card rounded-2xl p-8">
<p class="text-lg mb-6 text-gray-200">
当前"太空旅行"概念呈现双轨并行格局,建议采取"卖水人"策略
</p>
<div class="grid md:grid-cols-2 gap-6 text-left">
<div class="bg-gradient-to-br from-cyan-500/10 to-purple-500/10 rounded-xl p-4">
<h3 class="font-bold text-cyan-300 mb-2">优先布局方向</h3>
<ul class="text-sm space-y-1 text-gray-300">
<li>📈 空间能源系统(上海港湾)</li>
<li>📡 激光通信(光库科技、烽火通信)</li>
<li>💾 抗辐射芯片(复旦微电)</li>
</ul>
</div>
<div class="bg-gradient-to-br from-green-500/10 to-yellow-500/10 rounded-xl p-4">
<h3 class="font-bold text-green-300 mb-2">跟踪验证指标</h3>
<ul class="text-sm space-y-1 text-gray-300">
<li>🚀 发射成本下降曲线</li>
<li>📊 在轨算力与通信速率</li>
<li>💰 关键公司太空业务订单</li>
</ul>
</div>
</div>
<div class="mt-8 p-4 bg-red-500/10 rounded-xl border border-red-500/30">
<p class="text-sm text-yellow-300">
⚠️ 风险提示:警惕概念炒作与实际业务贡献度的巨大鸿沟
</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-8 px-6 border-t border-gray-800">
<div class="max-w-7xl mx-auto text-center text-sm text-gray-400">
<p>数据来源:公开新闻、券商研报、公司公告</p>
<p class="mt-2">投资有风险,入市需谨慎</p>
</div>
</footer>
<script>
// 添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
// 动态加载动画
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 = '0';
entry.target.style.transform = 'translateY(20px)';
setTimeout(() => {
entry.target.style.transition = 'all 0.6s ease';
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, 100);
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,884 @@
我将为您创建一个详实且视觉震撼的"太空算力"概念展示页面。这个页面将融合金融分析的深度与未来科技的美感,采用深空主题设计,完整呈现所有关键信息。
<!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>
<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=Orbitron:wght@400;700;900&family=Inter:wght@300;400;600;700&display=swap');
:root {
--space-blue: #0a0e27;
--neon-cyan: #00ffff;
--neon-purple: #9945ff;
--neon-pink: #ff006e;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
color: var(--text-primary);
overflow-x: hidden;
}
.orbitron {
font-family: 'Orbitron', monospace;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, var(--neon-cyan), var(--neon-purple));
border-radius: 4px;
}
/* Hero背景动画 */
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* 星星背景 */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
animation: twinkle 3s infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
/* 霓虹光效 */
.neon-text {
text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan);
}
.neon-border {
border: 2px solid var(--neon-cyan);
box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 10px rgba(0, 255, 255, 0.1);
}
/* 卡片悬浮效果 */
.hover-card {
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}
.hover-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}
/* 时间线样式 */
.timeline {
position: relative;
padding: 20px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple));
}
.timeline-item {
position: relative;
margin: 40px 0;
}
.timeline-dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: var(--neon-cyan);
border-radius: 50%;
box-shadow: 0 0 20px var(--neon-cyan);
}
/* 表格样式 */
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: rgba(255, 255, 255, 0.03);
}
.data-table th {
background: linear-gradient(90deg, rgba(0, 255, 255, 0.2), rgba(153, 69, 255, 0.2));
padding: 15px;
text-align: left;
font-weight: 600;
border-bottom: 2px solid var(--neon-cyan);
}
.data-table td {
padding: 12px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.data-table tr:hover {
background: rgba(0, 255, 255, 0.05);
}
/* 进度条 */
.progress-bar {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
transition: width 1s ease;
}
/* 标签样式 */
.tag {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
margin: 2px;
}
.tag-primary {
background: rgba(0, 255, 255, 0.2);
color: var(--neon-cyan);
border: 1px solid var(--neon-cyan);
}
.tag-secondary {
background: rgba(153, 69, 255, 0.2);
color: var(--neon-purple);
border: 1px solid var(--neon-purple);
}
/* 动画类 */
.fade-in {
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* 响应式调整 */
@media (max-width: 768px) {
.timeline::before {
left: 30px;
}
.timeline-dot {
left: 30px;
}
.data-table {
font-size: 14px;
}
.data-table th,
.data-table td {
padding: 8px;
}
}
</style>
</head>
<body>
<!-- 星星背景 -->
<div class="stars" id="stars"></div>
<!-- 导航栏 -->
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-black/50 border-b border-cyan-500/20">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<i class="fas fa-satellite text-2xl neon-text"></i>
<h1 class="orbitron text-xl font-bold neon-text">太空算力</h1>
</div>
<div class="hidden md:flex space-x-6">
<a href="#overview" class="hover:text-cyan-400 transition">概念洞察</a>
<a href="#timeline" class="hover:text-cyan-400 transition">发展历程</a>
<a href="#industry" class="hover:text-cyan-400 transition">产业链</a>
<a href="#stocks" class="hover:text-cyan-400 transition">相关股票</a>
<a href="#outlook" class="hover:text-cyan-400 transition">未来展望</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
<div class="hero-bg"></div>
<div class="container mx-auto px-4 z-10 text-center">
<h1 class="orbitron text-5xl md:text-7xl font-bold mb-6 fade-in">
太空算力
<span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-600">
Space Computing
</span>
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto fade-in">
突破地面算力的能源、散热与效率瓶颈,构建天基智能计算网络
</p>
<div class="flex flex-wrap justify-center gap-4 fade-in">
<div class="hover-card neon-border rounded-lg p-6 min-w-[200px]">
<i class="fas fa-solar-panel text-3xl text-yellow-400 mb-3"></i>
<h3 class="text-lg font-bold">8倍能源效率</h3>
<p class="text-sm text-gray-400">太阳能利用效率提升</p>
</div>
<div class="hover-card neon-border rounded-lg p-6 min-w-[200px]">
<i class="fas fa-snowflake text-3xl text-cyan-400 mb-3"></i>
<h3 class="text-lg font-bold">3倍散热效率</h3>
<p class="text-sm text-gray-400">真空环境辐射散热</p>
</div>
<div class="hover-card neon-border rounded-lg p-6 min-w-[200px]">
<i class="fas fa-tachometer-alt text-3xl text-green-400 mb-3"></i>
<h3 class="text-lg font-bold">秒级响应</h3>
<p class="text-sm text-gray-400">数据实时处理能力</p>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<i class="fas fa-chevron-down text-2xl"></i>
</div>
</section>
<!-- 概念洞察 -->
<section id="overview" class="py-20 relative">
<div class="container mx-auto px-4">
<h2 class="orbitron text-4xl font-bold text-center mb-12 neon-text">概念洞察</h2>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="hover-card rounded-xl p-8">
<h3 class="text-2xl font-bold mb-4 text-cyan-400">
<i class="fas fa-rocket mr-2"></i>核心驱动力
</h3>
<ul class="space-y-3 text-gray-300">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<div>
<strong>地面算力瓶颈:</strong>美国2030年数据中心将占发电量40%,能源供给难以为继
</div>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<div>
<strong>技术成熟度:</strong>星载计算、百Gbps激光通信已通过在轨验证
</div>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<div>
<strong>大国竞争:</strong>开辟算力自主可控"新赛道",实现非对称超越
</div>
</li>
</ul>
</div>
<div class="hover-card rounded-xl p-8">
<h3 class="text-2xl font-bold mb-4 text-purple-400">
<i class="fas fa-chart-line mr-2"></i>市场认知
</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-2">
<span>市场热度</span>
<span class="text-cyan-400">极高</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span>技术成熟度</span>
<span class="text-yellow-400">工程化初期</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 35%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span>商业化程度</span>
<span class="text-orange-400">验证阶段</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 25%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="hover-card rounded-xl p-8">
<h3 class="text-2xl font-bold mb-6 text-center">
<i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i>
关键预期差
</h3>
<div class="grid md:grid-cols-3 gap-6">
<div class="text-center">
<div class="text-4xl font-bold text-red-400 mb-2">200亿</div>
<p class="text-gray-300">单次部署成本1000EFLOPS算力中心</p>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-orange-400 mb-2">2030</div>
<p class="text-gray-300">Tbps级激光通信成熟年份</p>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-purple-400 mb-2">90%→</p>
<p class="text-gray-300">数据利用率提升幅度</p>
</div>
</div>
</div>
</div>
</section>
<!-- 时间线 -->
<section id="timeline" class="py-20 relative">
<div class="container mx-auto px-4">
<h2 class="orbitron text-4xl font-bold text-center mb-12 neon-text">发展历程</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="md:flex items-center">
<div class="md:w-1/2 md:pr-8 text-right">
<h3 class="text-xl font-bold text-cyan-400">2023年4月</h3>
<p class="text-gray-300">天风电子发布太空数据中心深度报告预测2027年市场规模366亿美元</p>
</div>
<div class="md:w-1/2 md:pl-8">
<div class="hover-card rounded-lg p-4">
<span class="tag tag-primary">技术孵化</span>
<span class="tag tag-secondary">概念提出</span>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="md:flex items-center">
<div class="md:w-1/2 md:pr-8 text-right md:order-2">
<h3 class="text-xl font-bold text-purple-400">2025年5月14日</h3>
<p class="text-gray-300">中国"三体计算星座"首批12颗卫星成功发射完成从0到1突破</p>
</div>
<div class="md:w-1/2 md:pl-8 md:order-1">
<div class="hover-card rounded-lg p-4">
<span class="tag tag-primary">中国在轨验证</span>
<span class="tag tag-secondary">重大突破</span>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="md:flex items-center">
<div class="md:w-1/2 md:pr-8 text-right">
<h3 class="text-xl font-bold text-cyan-400">2025年11月2-5日</h3>
<p class="text-gray-300">Starcloud发射H100卫星、SpaceX宣布太空数据中心计划、谷歌启动Suncatcher</p>
</div>
<div class="md:w-1/2 md:pl-8">
<div class="hover-card rounded-lg p-4">
<span class="tag tag-primary">国际巨头入局</span>
<span class="tag tag-secondary">集中爆发</span>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="md:flex items-center">
<div class="md:w-1/2 md:pr-8 text-right md:order-2">
<h3 class="text-xl font-bold text-purple-400">2025年11月9日</h3>
<p class="text-gray-300">国内券商集中发布研报,市场情绪达到高点</p>
</div>
<div class="md:w-1/2 md:pl-8 md:order-1">
<div class="hover-card rounded-lg p-4">
<span class="tag tag-primary">资本市场关注</span>
<span class="tag tag-secondary">舆情高峰</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链分析 -->
<section id="industry" class="py-20 relative">
<div class="container mx-auto px-4">
<h2 class="orbitron text-4xl font-bold text-center mb-12 neon-text">产业链分析</h2>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<div class="hover-card rounded-xl p-6 border-t-4 border-cyan-400">
<h3 class="text-xl font-bold mb-4 text-cyan-400">
<i class="fas fa-microchip mr-2"></i>上游 - 核心部件
</h3>
<ul class="space-y-2 text-gray-300">
<li>• 空间能源系统(太阳翼、电池片)</li>
<li>• 星载算力芯片抗辐射CPU/GPU</li>
<li>• 激光通信终端</li>
<li>• 代表企业:上海港湾、乾照光电、复旦微电</li>
</ul>
</div>
<div class="hover-card rounded-xl p-6 border-t-4 border-purple-400">
<h3 class="text-xl font-bold mb-4 text-purple-400">
<i class="fas fa-satellite-dish mr-2"></i>中游 - 平台制造
</h3>
<ul class="space-y-2 text-gray-300">
<li>• 卫星总装与制造</li>
<li>• 运载火箭系统</li>
<li>• 地面站建设</li>
<li>• 代表企业:中国卫星、航天动力、超捷股份</li>
</ul>
</div>
<div class="hover-card rounded-xl p-6 border-t-4 border-pink-400">
<h3 class="text-xl font-bold mb-4 text-pink-400">
<i class="fas fa-network-wired mr-2"></i>下游 - 运营服务
</h3>
<ul class="space-y-2 text-gray-300">
<li>• 星座运营与管理</li>
<li>• 太空算力服务SAAS</li>
<li>• 数据处理与应用</li>
<li>• 代表企业:普天科技、中科星图、星图测控</li>
</ul>
</div>
</div>
<div class="hover-card rounded-xl p-8">
<h3 class="text-2xl font-bold mb-6 text-center">核心投资逻辑对比</h3>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border-b border-cyan-500/30">
<th class="pb-4">投资逻辑</th>
<th class="pb-4">代表企业</th>
<th class="pb-4">核心优势</th>
<th class="pb-4">潜在风险</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-white/10">
<td class="py-4 text-cyan-400">平台运营商</td>
<td class="py-4">普天科技</td>
<td class="py-4">国家队背景、链长角色</td>
<td class="py-4">商业模式待验证</td>
</tr>
<tr class="border-b border-white/10">
<td class="py-4 text-purple-400">能源系统</td>
<td class="py-4">上海港湾、乾照光电</td>
<td class="py-4">确定性最高、价值量大</td>
<td class="py-4">技术路线竞争</td>
</tr>
<tr>
<td class="py-4 text-pink-400">软件赋能</td>
<td class="py-4">开普云</td>
<td class="py-4">AI能力上天关键</td>
<td class="py-4">地面巨头竞争</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section id="stocks" class="py-20 relative">
<div class="container mx-auto px-4">
<h2 class="orbitron text-4xl font-bold text-center mb-12 neon-text">相关股票</h2>
<div class="overflow-x-auto">
<table class="data-table rounded-lg overflow-hidden">
<thead>
<tr>
<th>股票名称</th>
<th>分类</th>
<th>项目/合作内容</th>
<th>信源</th>
<th>关联逻辑</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-bold text-cyan-400">普天科技</td>
<td><span class="tag tag-primary">之江实验室牵头</span></td>
<td>与氦星光联、忆芯科技成立联合企业研发中心,开展空天智能关键技术研究</td>
<td>互动平台</td>
<td>潜在运营商角色,链长地位</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">上海港湾</td>
<td><span class="tag tag-secondary">能源系统</span></td>
<td>天基基础设施能源分系统核心供应商</td>
<td>研报</td>
<td>太阳翼能源系统核心供应商</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">乾照光电</td>
<td><span class="tag tag-secondary">能源系统</span></td>
<td>国内领先的砷化镓太阳能电池供应商</td>
<td>互动平台</td>
<td>空间太阳能电池核心供应商</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">开普云</td>
<td><span class="tag tag-primary">星载算力与AI模型</span></td>
<td>参与"星算计划"以开悟星云和开悟星核实现AI赋能</td>
<td>互动平台</td>
<td>AI能力上天的软件赋能者</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">中科星图</td>
<td><span class="tag tag-secondary">太空算力相关</span></td>
<td>合作研发高性能低功耗高可靠专用核心部件,建设开放普惠的太空算网</td>
<td>调研</td>
<td>开发太空计算专用硬件</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">航宇微</td>
<td><span class="tag tag-secondary">太空算力相关</span></td>
<td>玉龙810芯片为通用AI芯片启动"新一代宇航SOC芯片及星载平台计算机项目"</td>
<td>调研/公告</td>
<td>研发宇航级AI芯片</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">星图测控</td>
<td><span class="tag tag-primary">北交所</span></td>
<td>太空云产品体系,提供太空全域数据服务、智能计算服务</td>
<td>年报/调研</td>
<td>提供太空数据与计算服务</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">云南锗业</td>
<td><span class="tag tag-secondary">能源系统</span></td>
<td>空间太阳能电池用锗晶片建设项目2025年末产能125万片/年)</td>
<td>调研</td>
<td>太阳能电池关键材料供应商</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">航天电子</td>
<td><span class="tag tag-primary">其他合作</span></td>
<td>回复星算计划提问,涉及激光通信终端等卫星载荷</td>
<td>互动平台</td>
<td>激光通信终端供应商</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">千方科技</td>
<td><span class="tag tag-primary">星载算力与AI模型</span></td>
<td>参与"星算计划",构建天地一体化算力网络</td>
<td>公告</td>
<td>天地一体化算力网络建设</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">杭钢股份</td>
<td><span class="tag tag-primary">之江实验室牵头</span></td>
<td>子公司数据公司实施之江实验室机房基础设施升级改造工程租期5年</td>
<td>公告</td>
<td>参与之江实验室基础设施建设</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">新疆交建</td>
<td><span class="tag tag-secondary">星算计划</span></td>
<td>持有国星宇航股份比例0.54%</td>
<td>工商信息</td>
<td>通过持股参与卫星通信</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">新华网</td>
<td><span class="tag tag-secondary">星算计划</span></td>
<td>持有国星宇航股份比例0.22%</td>
<td>工商信息</td>
<td>直接持股国星宇航</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">四川金顶</td>
<td><span class="tag tag-secondary">太空算力相关</span></td>
<td>子公司开物星空发布"开物星空V2矿用AI卫星"搭载超算AI等16项专用模块</td>
<td>新闻/工商</td>
<td>矿用AI卫星解决方案</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">顺灏股份</td>
<td><span class="tag tag-secondary">太空算力相关</span></td>
<td>子公司轨道辰光核心业务包括"天数天算"和"地数天算"</td>
<td>互动/调研</td>
<td>天地一体化算力服务</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">航天宏图</td>
<td><span class="tag tag-secondary">太空算力相关</span></td>
<td>自主研发PIE-Engine时空云计算平台提供数据和算力支持</td>
<td>互动平台</td>
<td>构建太空算力基础平台</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">中科曙光</td>
<td><span class="tag tag-secondary">太空算力相关</span></td>
<td>合作研发高性能低功耗高可靠专用核心部件,建设开放普惠的太空算网</td>
<td>调研</td>
<td>开发太空计算专用硬件</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">大众公用</td>
<td><span class="tag tag-secondary">星算计划</span></td>
<td>间接持有国星宇航股份比例0.41%(通过深创投)</td>
<td>工商信息</td>
<td>通过投资机构间接参与</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">深圳能源</td>
<td><span class="tag tag-secondary">星算计划</span></td>
<td>间接持有国星宇航股份比例0.19%(通过深创投)</td>
<td>工商信息</td>
<td>通过投资机构间接参与</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">龙芯中科</td>
<td><span class="tag tag-primary">其他合作</span></td>
<td>星算计划全球合作伙伴</td>
<td>新闻</td>
<td>作为合作伙伴参与计划</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">七匹狼</td>
<td><span class="tag tag-secondary">星算计划</span></td>
<td>控股股东间接持有国星宇航股份比例0.15%(通过深创投)</td>
<td>工商信息</td>
<td>通过投资机构间接参与</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">粤电力A</td>
<td><span class="tag tag-secondary">星算计划</span></td>
<td>间接持有国星宇航股份比例0.14%(通过深创投)</td>
<td>工商信息</td>
<td>通过投资机构间接参与</td>
</tr>
<tr>
<td class="font-bold text-cyan-400">软通动力</td>
<td><span class="tag tag-primary">其他合作</span></td>
<td>与之江实验室、国星宇航发布"星算计划",共建天地一体化算力网络</td>
<td>新闻</td>
<td>参与天地一体化算力网络</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 未来展望 -->
<section id="outlook" class="py-20 relative">
<div class="container mx-auto px-4">
<h2 class="orbitron text-4xl font-bold text-center mb-12 neon-text">未来展望</h2>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<div class="hover-card rounded-xl p-8 text-center">
<div class="text-5xl font-bold text-cyan-400 mb-4">2027</div>
<h3 class="text-xl font-bold mb-3">技术验证期</h3>
<p class="text-gray-300">完成百颗级星座部署,验证核心技术与特定应用场景</p>
</div>
<div class="hover-card rounded-xl p-8 text-center">
<div class="text-5xl font-bold text-purple-400 mb-4">2030</div>
<h3 class="text-xl font-bold mb-3">商业化初期</h3>
<p class="text-gray-300">千颗级星座建设,"太空算力即服务"模式成熟</p>
</div>
<div class="hover-card rounded-xl p-8 text-center">
<div class="text-5xl font-bold text-pink-400 mb-4">2035+</div>
<h3 class="text-xl font-bold mb-3">规模化发展</h3>
<p class="text-gray-300">GW级数据中心部署成为地面算力重要补充</p>
</div>
</div>
<div class="hover-card rounded-xl p-8 mb-12">
<h3 class="text-2xl font-bold mb-6 text-center text-red-400">
<i class="fas fa-exclamation-triangle mr-2"></i>关键风险提示
</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="text-lg font-bold mb-3 text-yellow-400">技术风险</h4>
<ul class="space-y-2 text-gray-300">
<li>• 抗辐射技术尚未完全成熟</li>
<li>• Tbps级激光通信2030年才可能成熟</li>
<li>• 空间芯片算力仍落后地面顶级产品</li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-3 text-orange-400">商业化风险</h4>
<ul class="space-y-2 text-gray-300">
<li>• 发射成本仍是最大瓶颈</li>
<li>• 商业模式依赖高价值任务</li>
<li>• 万亿市场规模预期过于乐观</li>
</ul>
</div>
</div>
</div>
<div class="text-center">
<p class="text-xl text-gray-300 mb-6">需要重点跟踪的核心指标</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="tag tag-primary"><i class="fas fa-rocket mr-1"></i>发射频率与成本</span>
<span class="tag tag-primary"><i class="fas fa-satellite mr-1"></i>星座规模与算力</span>
<span class="tag tag-primary"><i class="fas fa-handshake mr-1"></i>商业化订单</span>
<span class="tag tag-secondary"><i class="fas fa-wifi mr-1"></i>激光通信速率</span>
<span class="tag tag-secondary"><i class="fas fa-solar-panel mr-1"></i>太阳能电池效率</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-10 border-t border-cyan-500/20">
<div class="container mx-auto px-4 text-center">
<p class="text-gray-400 mb-4">
<i class="fas fa-info-circle mr-2"></i>
本报告基于公开信息撰写,不构成任何投资建议
</p>
<p class="text-sm text-gray-500">
数据来源:新闻研报、路演记录、公司公告 | 更新时间2025年11月
</p>
</div>
</footer>
<script>
// 生成星星背景
function createStars() {
const starsContainer = document.getElementById('stars');
const starCount = 100;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 3 + 's';
starsContainer.appendChild(star);
}
}
// 滚动动画
function handleScroll() {
const elements = document.querySelectorAll('.fade-in');
elements.forEach(element => {
const rect = element.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
}
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// 初始化
document.addEventListener('DOMContentLoaded', function() {
createStars();
handleScroll();
window.addEventListener('scroll', handleScroll);
// 添加渐入动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
});
// 进度条动画
window.addEventListener('load', function() {
const progressBars = document.querySelectorAll('.progress-fill');
setTimeout(() => {
progressBars.forEach(bar => {
bar.style.width = bar.style.width;
});
}, 500);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,824 @@
<!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://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gold-gradient {
background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-glow {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
border: 1px solid rgba(255, 215, 0, 0.2);
backdrop-filter: blur(10px);
}
.timeline-line {
background: linear-gradient(180deg, #FFD700, #FFA500);
}
.stock-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.stock-table::-webkit-scrollbar {
height: 8px;
}
.stock-table::-webkit-scrollbar-track {
background: rgba(255, 215, 0, 0.1);
border-radius: 4px;
}
.stock-table::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.3);
border-radius: 4px;
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeInUp {
animation: fadeInUp 0.6s ease-out;
}
.glass-effect {
background: rgba(17, 24, 39, 0.7);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 215, 0, 0.1);
}
</style>
</head>
<body class="bg-gray-950 text-gray-100" x-data="{ activeTab: 'overview', mobileMenu: false, stockSearch: '' }">
<!-- Hero Section -->
<header class="relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950"></div>
<div class="absolute inset-0 bg-gradient-to-t from-yellow-900/10 to-transparent"></div>
<div class="relative z-10 container mx-auto px-4 py-16 lg:py-24">
<div class="text-center animate-fadeInUp">
<span class="inline-block px-4 py-2 bg-yellow-500/10 border border-yellow-500/30 rounded-full text-yellow-400 text-sm font-semibold mb-6">
<i class="ri-stock-line mr-2"></i>概念深度解析
</span>
<h1 class="text-4xl lg:text-6xl font-bold mb-6">
<span class="gold-gradient">安徽国资</span>
</h1>
<p class="text-xl text-gray-400 max-w-3xl mx-auto mb-8">
从地方国企改革到新质生产力培育的战略跃升
</p>
<div class="flex flex-wrap justify-center gap-4">
<span class="px-4 py-2 bg-gray-800 rounded-lg text-sm">
<i class="ri-time-line text-yellow-400 mr-2"></i>发布时间2025年10月24日
</span>
<span class="px-4 py-2 bg-gray-800 rounded-lg text-sm">
<i class="ri-bar-chart-box-line text-yellow-400 mr-2"></i>相关股票42只
</span>
<span class="px-4 py-2 bg-gray-800 rounded-lg text-sm">
<i class="ri-fire-line text-yellow-400 mr-2"></i>热度指数:★★★★★
</span>
</div>
</div>
</div>
<!-- Decorative Elements -->
<div class="absolute top-20 right-20 w-64 h-64 bg-yellow-500/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 left-20 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl"></div>
</header>
<!-- Navigation Tabs -->
<nav class="sticky top-0 z-40 glass-effect border-b border-gray-800">
<div class="container mx-auto px-4">
<div class="flex overflow-x-auto scrollbar-hide">
<button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'border-yellow-400 text-yellow-400' : 'border-transparent text-gray-400'"
class="px-6 py-4 border-b-2 font-medium whitespace-nowrap transition-all hover:text-gray-200">
<i class="ri-dashboard-3-line mr-2"></i>核心洞察
</button>
<button @click="activeTab = 'timeline'" :class="activeTab === 'timeline' ? 'border-yellow-400 text-yellow-400' : 'border-transparent text-gray-400'"
class="px-6 py-4 border-b-2 font-medium whitespace-nowrap transition-all hover:text-gray-200">
<i class="ri-timeline-line mr-2"></i>事件时间轴
</button>
<button @click="activeTab = 'companies'" :class="activeTab === 'companies' ? 'border-yellow-400 text-yellow-400' : 'border-transparent text-gray-400'"
class="px-6 py-4 border-b-2 font-medium whitespace-nowrap transition-all hover:text-gray-200">
<i class="ri-building-line mr-2"></i>核心公司
</button>
<button @click="activeTab = 'stocks'" :class="activeTab === 'stocks' ? 'border-yellow-400 text-yellow-400' : 'border-transparent text-gray-400'"
class="px-6 py-4 border-b-2 font-medium whitespace-nowrap transition-all hover:text-gray-200">
<i class="ri-stock-line mr-2"></i>股票池
</button>
<button @click="activeTab = 'risks'" :class="activeTab === 'risks' ? 'border-yellow-400 text-yellow-400' : 'border-transparent text-gray-400'"
class="px-6 py-4 border-b-2 font-medium whitespace-nowrap transition-all hover:text-gray-200">
<i class="ri-alert-line mr-2"></i>风险提示
</button>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="container mx-auto px-4 py-12">
<!-- Core Overview Section -->
<section x-show="activeTab === 'overview'" x-transition class="space-y-12">
<!-- Key Insights -->
<div class="grid lg:grid-cols-3 gap-6">
<div class="card-glow rounded-2xl p-6 hover:transform hover:scale-105 transition-all">
<div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center mb-4">
<i class="ri-strategy-line text-yellow-400 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">战略引领</h3>
<p class="text-gray-400 text-sm">安徽省以国资为核心抓手,推动产业结构转型升级的系统性工程</p>
</div>
<div class="card-glow rounded-2xl p-6 hover:transform hover:scale-105 transition-all">
<div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center mb-4">
<i class="ri-stack-line text-yellow-400 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">产业基础</h3>
<p class="text-gray-400 text-sm">汽车产量全国第一,形成完整产业链集群,为产业升级提供土壤</p>
</div>
<div class="card-glow rounded-2xl p-6 hover:transform hover:scale-105 transition-all">
<div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center mb-4">
<i class="ri-exchange-dollar-line text-yellow-400 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">资本运作</h3>
<p class="text-gray-400 text-sm">内整外引的多元化模式,赋予国资平台强大的成长弹性</p>
</div>
</div>
<!-- Core Logic -->
<div class="card-glow rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-6 gold-gradient">核心逻辑分析</h2>
<div class="space-y-6">
<div class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-yellow-500/20 rounded-full flex items-center justify-center">
<span class="text-yellow-400 font-bold">1</span>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">政策催化与市场认知</h3>
<p class="text-gray-400">《安徽省推进"大资产"统筹管理总体工作方案》引爆概念,但市场认知仍停留在事件驱动层面,对深层次产业逻辑理解尚浅</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-yellow-500/20 rounded-full flex items-center justify-center">
<span class="text-yellow-400 font-bold">2</span>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">关键预期差</h3>
<ul class="text-gray-400 space-y-2">
<li><span class="text-yellow-400">重并购轻整合:</span>市场过度关注并购预期,忽视整合难度与协同释放周期</li>
<li><span class="text-yellow-400">重光环轻竞争:</span>国资是加分项非决定项,核心竞争力仍需市场化验证</li>
<li><span class="text-yellow-400">重政策轻风险:</span>地方债务、回款压力等现实挑战不容忽视</li>
</ul>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-yellow-500/20 rounded-full flex items-center justify-center">
<span class="text-yellow-400 font-bold">3</span>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">发展阶段演进</h3>
<div class="grid md:grid-cols-3 gap-4 mt-4">
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="text-yellow-400 font-semibold mb-2">阶段一:资产盘活</h4>
<p class="text-sm text-gray-400">当前-1年内提升效率修复价值</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="text-yellow-400 font-semibold mb-2">阶段二:产业整合</h4>
<p class="text-sm text-gray-400">1-3年打造产业链主集中资源</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="text-yellow-400 font-semibold mb-2">阶段三:创新驱动</h4>
<p class="text-sm text-gray-400">3-5年构建创新生态全球竞争</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Catalyst -->
<div class="card-glow rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-6 gold-gradient">关键催化剂</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-800/30 rounded-xl p-6 border-l-4 border-yellow-400">
<h3 class="text-lg font-semibold mb-3 text-yellow-400">近期催化剂3-6个月</h3>
<ul class="space-y-2 text-gray-400 text-sm">
<li><i class="ri-arrow-right-s-line text-yellow-400 mr-2"></i>《大资产统筹方案》细则落地</li>
<li><i class="ri-arrow-right-s-line text-yellow-400 mr-2"></i>市值管理考核细则公布</li>
<li><i class="ri-arrow-right-s-line text-yellow-400 mr-2"></i>安徽机器人项目重大突破</li>
<li><i class="ri-arrow-right-s-line text-yellow-400 mr-2"></i>关键公司财报/订单超预期</li>
</ul>
</div>
<div class="bg-gray-800/30 rounded-xl p-6 border-l-4 border-orange-400">
<h3 class="text-lg font-semibold mb-3 text-orange-400">长期发展路径</h3>
<ul class="space-y-2 text-gray-400 text-sm">
<li><i class="ri-arrow-right-s-line text-orange-400 mr-2"></i>国有资产证券化率提升</li>
<li><i class="ri-arrow-right-s-line text-orange-400 mr-2"></i>产业并购整合加速</li>
<li><i class="ri-arrow-right-s-line text-orange-400 mr-2"></i>新兴产业集群形成</li>
<li><i class="ri-arrow-right-s-line text-orange-400 mr-2"></i>全球竞争力企业培育</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section x-show="activeTab === 'timeline'" x-transition class="space-y-12">
<div class="card-glow rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-8 gold-gradient">概念事件时间轴</h2>
<div class="relative">
<div class="absolute left-8 top-0 bottom-0 w-0.5 timeline-line"></div>
<div class="space-y-8">
<!-- 2024 Q4 -->
<div class="relative flex items-start gap-6">
<div class="flex-shrink-0 w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center border-4 border-yellow-400">
<span class="text-xs font-bold text-yellow-400">2024 Q4</span>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold mb-2">产业基础奠定期</h3>
<div class="space-y-3">
<div class="bg-gray-800/50 rounded-lg p-4">
<span class="text-yellow-400 text-sm">2024-11-29</span>
<p class="text-gray-300 mt-1">安徽合力收购好运机械、安鑫货叉,完善产业链布局</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<span class="text-yellow-400 text-sm">2024-12-11/12</span>
<p class="text-gray-300 mt-1">市场聚焦"安徽机器人"概念,挖掘伯特利、安徽合力等标的</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<span class="text-yellow-400 text-sm">2024-12-29</span>
<p class="text-gray-300 mt-1">安徽人工智能产业先导区正式启动</p>
</div>
</div>
</div>
</div>
<!-- 2025 Q2-Q3 -->
<div class="relative flex items-start gap-6">
<div class="flex-shrink-0 w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center border-4 border-orange-400">
<span class="text-xs font-bold text-orange-400">2025 Q2-Q3</span>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold mb-2">政策驱动期</h3>
<div class="space-y-3">
<div class="bg-gray-800/50 rounded-lg p-4">
<span class="text-orange-400 text-sm">2025-08-01</span>
<p class="text-gray-300 mt-1">国资委强调推进"十五五"规划,加速培育新质生产力</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<span class="text-orange-400 text-sm">2025-08-15</span>
<p class="text-gray-300 mt-1">安徽马鞍山国资江东产投入主蓝黛科技,并购模式受关注</p>
</div>
</div>
</div>
</div>
<!-- 2025 Q4 -->
<div class="relative flex items-start gap-6">
<div class="flex-shrink-0 w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center border-4 border-red-400 animate-pulse-slow">
<span class="text-xs font-bold text-red-400">2025 Q4</span>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold mb-2">概念引爆期</h3>
<div class="space-y-3">
<div class="bg-gray-800/50 rounded-lg p-4 border border-red-400/30">
<span class="text-red-400 text-sm">2025-10-24</span>
<p class="text-gray-300 mt-1 font-semibold">《安徽省推进"大资产"统筹管理总体工作方案》印发</p>
<p class="text-gray-400 text-sm mt-2">安徽建工触及涨停,建研设计、合肥城建等跟涨,概念形成板块效应</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Companies Analysis -->
<section x-show="activeTab === 'companies'" x-transition class="space-y-12">
<div class="card-glow rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-6 gold-gradient">核心玩家深度剖析</h2>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b border-gray-700">
<th class="text-left py-4 px-4 font-semibold text-yellow-400">公司</th>
<th class="text-left py-4 px-4 font-semibold text-yellow-400">定位与逻辑</th>
<th class="text-left py-4 px-4 font-semibold text-yellow-400">竞争优势</th>
<th class="text-left py-4 px-4 font-semibold text-yellow-400">风险与挑战</th>
<th class="text-left py-4 px-4 font-semibold text-yellow-400">角色分析</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="py-4 px-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center">
<span class="text-yellow-400 font-bold">合力</span>
</div>
<div>
<div class="font-semibold">安徽合力</div>
<div class="text-xs text-gray-500">600761.SH</div>
</div>
</div>
</td>
<td class="py-4 px-4 text-gray-300">国企"链主"与新质生产力结合的典范,华为机器人合作伙伴</td>
<td class="py-4 px-4">
<ul class="text-sm text-gray-400 space-y-1">
<li>• 市场化基因,激励到位</li>
<li>• 制造能力全球领先</li>
<li>• 战略卡位精准</li>
</ul>
</td>
<td class="py-4 px-4">
<ul class="text-sm text-gray-400 space-y-1">
<li>• 新业务转化周期</li>
<li>• 行业竞争加剧</li>
</ul>
</td>
<td class="py-4 px-4">
<span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">先锋与转型者</span>
</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="py-4 px-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
<span class="text-blue-400 font-bold">建工</span>
</div>
<div>
<div class="font-semibold">安徽建工</div>
<div class="text-xs text-gray-500">600502.SH</div>
</div>
</div>
</td>
<td class="py-4 px-4 text-gray-300">区域基建"压舱石"与改革"试验田"</td>
<td class="py-4 px-4">
<ul class="text-sm text-gray-400 space-y-1">
<li>• 深度区域绑定(80%+)</li>
<li>• 全产业链布局</li>
<li>• 改革意愿强</li>
</ul>
</td>
<td class="py-4 px-4">
<ul class="text-sm text-gray-400 space-y-1">
<li>• 高资产负债率</li>
<li>• 应收账款近70亿</li>
</ul>
</td>
<td class="py-4 px-4">
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">领导者与整合者</span>
</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="py-4 px-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
<span class="text-purple-400 font-bold">伯特利</span>
</div>
<div>
<div class="font-semibold">伯特利</div>
<div class="text-xs text-gray-500">603596.SH</div>
</div>
</div>
</td>
<td class="py-4 px-4 text-gray-300">汽车产业链"隐形冠军",奇瑞核心供应商</td>
<td class="py-4 px-4">
<ul class="text-sm text-gray-400 space-y-1">
<li>• 深度绑定核心客户</li>
<li>• 技术壁垒高</li>
<li>• 业绩增长确定</li>
</ul>
</td>
<td class="py-4 px-4">
<ul class="text-sm text-gray-400 space-y-1">
<li>• 客户集中度风险</li>
<li>• 国资属性较弱</li>
</ul>
</td>
<td class="py-4 px-4">
<span class="px-2 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-full">产业深度绑定者</span>
</td>
</tr>
<tr class="hover:bg-gray-800/30 transition-colors">
<td class="py-4 px-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gray-600/20 rounded-lg flex items-center justify-center">
<span class="text-gray-400 font-bold">海螺</span>
</div>
<div>
<div class="font-semibold">海螺水泥</div>
<div class="text-xs text-gray-500">600585.SH</div>
</div>
</div>
</td>
<td class="py-4 px-4 text-gray-300">传统周期龙头,价值基石</td>
<td class="py-4 px-4">
<ul class="text-sm text-gray-400 space-y-1">
<li>• 行业地位稳固</li>
<li>• 高分红潜力</li>
</ul>
</td>
<td class="py-4 px-4">
<ul class="text-sm text-gray-400 space-y-1">
<li>• 强周期性</li>
<li>• 成长性有限</li>
</ul>
</td>
<td class="py-4 px-4">
<span class="px-2 py-1 bg-gray-500/20 text-gray-400 text-xs rounded-full">价值基石</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Investment Value -->
<div class="grid lg:grid-cols-2 gap-6">
<div class="card-glow rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 text-yellow-400">最具投资价值方向</h3>
<div class="space-y-4">
<div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-yellow-400">
<h4 class="font-semibold mb-2">首选:新质生产力载体</h4>
<p class="text-sm text-gray-400 mb-2">安徽合力 - "国企+市场化+未来产业"最佳范式</p>
<div class="flex gap-2 flex-wrap">
<span class="text-xs px-2 py-1 bg-yellow-500/20 text-yellow-400 rounded">高成长性</span>
<span class="text-xs px-2 py-1 bg-yellow-500/20 text-yellow-400 rounded">想象空间大</span>
<span class="text-xs px-2 py-1 bg-yellow-500/20 text-yellow-400 rounded">安全边际</span>
</div>
</div>
<div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-blue-400">
<h4 class="font-semibold mb-2">次选:传统核心平台</h4>
<p class="text-sm text-gray-400 mb-2">安徽建工 - 高确定性与稳健增长</p>
<div class="flex gap-2 flex-wrap">
<span class="text-xs px-2 py-1 bg-blue-500/20 text-blue-400 rounded">股息率5%</span>
<span class="text-xs px-2 py-1 bg-blue-500/20 text-blue-400 rounded">区域壁垒</span>
<span class="text-xs px-2 py-1 bg-blue-500/20 text-blue-400 rounded">改革预期</span>
</div>
</div>
</div>
</div>
<div class="card-glow rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 text-yellow-400">关键跟踪指标</h3>
<div class="space-y-3">
<div class="flex items-center justify-between py-2 border-b border-gray-700">
<span class="text-gray-400">安徽建工经营性现金流</span>
<i class="ri-arrow-up-line text-green-400"></i>
</div>
<div class="flex items-center justify-between py-2 border-b border-gray-700">
<span class="text-gray-400">安徽合力机器人业务占比</span>
<i class="ri-arrow-right-line text-yellow-400"></i>
</div>
<div class="flex items-center justify-between py-2 border-b border-gray-700">
<span class="text-gray-400">应收账款周转率</span>
<i class="ri-arrow-up-line text-green-400"></i>
</div>
<div class="flex items-center justify-between py-2 border-b border-gray-700">
<span class="text-gray-400">市值管理考核细则</span>
<i class="ri-time-line text-yellow-400"></i>
</div>
<div class="flex items-center justify-between py-2">
<span class="text-gray-400">地方专项债流向</span>
<i class="ri-focus-3-line text-orange-400"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Stocks Pool -->
<section x-show="activeTab === 'stocks'" x-transition class="space-y-12">
<div class="card-glow rounded-2xl p-8">
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-6">
<h2 class="text-2xl font-bold gold-gradient">安徽国资股票池</h2>
<div class="relative">
<input x-model="stockSearch" type="text" placeholder="搜索股票代码或名称..."
class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:border-yellow-400 transition-colors">
<i class="ri-search-line absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
<div class="mb-4 flex gap-2 flex-wrap">
<span class="text-sm text-gray-400"><span class="text-yellow-400 font-bold">42</span> 只相关股票</span>
<span class="text-gray-600">|</span>
<button class="text-sm text-yellow-400 hover:text-yellow-300 transition-colors">按行业筛选</button>
<span class="text-gray-600">|</span>
<button class="text-sm text-yellow-400 hover:text-yellow-300 transition-colors">按热度排序</button>
</div>
<div class="stock-table">
<table class="w-full min-w-[800px]">
<thead>
<tr class="border-b border-gray-700 text-left">
<th class="py-3 px-4 font-semibold text-gray-400">股票代码</th>
<th class="py-3 px-4 font-semibold text-gray-400">股票名称</th>
<th class="py-3 px-4 font-semibold text-gray-400">所属行业</th>
<th class="py-3 px-4 font-semibold text-gray-400">关联逻辑</th>
<th class="py-3 px-4 font-semibold text-gray-400">标签</th>
</tr>
</thead>
<tbody>
<template x-for="stock in [
{code: '600761.SH', name: '安徽合力', industry: '机械制造', reason: '安徽国资控股', tags: ['核心', '机器人']},
{code: '000868.SZ', name: '安凯客车', industry: '汽车制造', reason: '安徽国资控股', tags: ['汽车']},
{code: '000728.SZ', name: '国元证券', industry: '金融', reason: '安徽国资控股', tags: ['金融']},
{code: '000619.SZ', name: '海螺新材', industry: '建材', reason: '安徽国资控股', tags: ['建材']},
{code: '600971.SH', name: '恒源煤电', industry: '能源', reason: '安徽国资控股', tags: ['能源']},
{code: '600735.SH', name: '华塑股份', industry: '化工', reason: '安徽国资控股', tags: ['化工']},
{code: '600718.SH', name: '淮河能源', industry: '能源', reason: '安徽国资控股', tags: ['能源']},
{code: '301167.SZ', name: '建研设计', industry: '工程设计', reason: '安徽国资控股', tags: ['设计']},
{code: '873727.BJ', name: '铜冠矿建', industry: '矿业', reason: '安徽国资控股', tags: ['矿业']},
{code: '301217.SZ', name: '铜冠铜箔', industry: '有色金属', reason: '安徽国资控股', tags: ['有色']}
].filter(s => s.name.toLowerCase().includes(stockSearch.toLowerCase()) || s.code.toLowerCase().includes(stockSearch.toLowerCase()))" :key="stock.code">
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="py-3 px-4 font-mono text-sm text-gray-400" x-text="stock.code"></td>
<td class="py-3 px-4 font-semibold" x-text="stock.name"></td>
<td class="py-3 px-4">
<span class="text-sm px-2 py-1 bg-gray-800 rounded" x-text="stock.industry"></span>
</td>
<td class="py-3 px-4 text-sm text-gray-400" x-text="stock.reason"></td>
<td class="py-3 px-4">
<template x-for="tag in stock.tags">
<span class="inline-block text-xs px-2 py-1 mr-1 rounded"
:class="tag === '核心' ? 'bg-yellow-500/20 text-yellow-400' :
tag === '机器人' ? 'bg-green-500/20 text-green-400' :
tag === '汽车' ? 'bg-blue-500/20 text-blue-400' :
'bg-gray-700 text-gray-400'"
x-text="tag"></span>
</template>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<!-- Industry Distribution -->
<div class="grid lg:grid-cols-2 gap-6">
<div class="card-glow rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 text-yellow-400">行业分布</h3>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-gray-400">科技</span>
<div class="flex items-center gap-2">
<div class="w-32 bg-gray-800 rounded-full h-2">
<div class="bg-yellow-400 h-2 rounded-full" style="width: 30%"></div>
</div>
<span class="text-sm text-gray-400">12家</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-400">能源</span>
<div class="flex items-center gap-2">
<div class="w-32 bg-gray-800 rounded-full h-2">
<div class="bg-blue-400 h-2 rounded-full" style="width: 20%"></div>
</div>
<span class="text-sm text-gray-400">8家</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-400">建材</span>
<div class="flex items-center gap-2">
<div class="w-32 bg-gray-800 rounded-full h-2">
<div class="bg-green-400 h-2 rounded-full" style="width: 15%"></div>
</div>
<span class="text-sm text-gray-400">6家</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-400">汽车</span>
<div class="flex items-center gap-2">
<div class="w-32 bg-gray-800 rounded-full h-2">
<div class="bg-purple-400 h-2 rounded-full" style="width: 12%"></div>
</div>
<span class="text-sm text-gray-400">5家</span>
</div>
</div>
</div>
</div>
<div class="card-glow rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 text-yellow-400">核心标的精选</h3>
<div class="space-y-3">
<div class="bg-gradient-to-r from-yellow-500/10 to-transparent rounded-lg p-4 border border-yellow-500/20">
<div class="flex justify-between items-start">
<div>
<h4 class="font-semibold text-yellow-400">安徽合力</h4>
<p class="text-xs text-gray-400 mt-1">机器人产业链核心标的</p>
</div>
<span class="text-2xl">🌟</span>
</div>
</div>
<div class="bg-gradient-to-r from-blue-500/10 to-transparent rounded-lg p-4 border border-blue-500/20">
<div class="flex justify-between items-start">
<div>
<h4 class="font-semibold text-blue-400">安徽建工</h4>
<p class="text-xs text-gray-400 mt-1">基建领域绝对龙头</p>
</div>
<span class="text-2xl"></span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section x-show="activeTab === 'risks'" x-transition class="space-y-12">
<div class="card-glow rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-6 gold-gradient">潜在风险与挑战</h2>
<div class="grid lg:grid-cols-3 gap-6 mb-8">
<div class="bg-red-500/10 border border-red-500/30 rounded-xl p-6">
<div class="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center mb-4">
<i class="ri-money-dollar-circle-line text-red-400 text-2xl"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-red-400">商业化与财务风险</h3>
<p class="text-gray-400 text-sm">地方政府支付能力是最大风险点安徽建工70亿应收账款悬顶</p>
</div>
<div class="bg-orange-500/10 border border-orange-500/30 rounded-xl p-6">
<div class="w-12 h-12 bg-orange-500/20 rounded-lg flex items-center justify-center mb-4">
<i class="ri-shield-check-line text-orange-400 text-2xl"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-orange-400">政策与竞争风险</h3>
<p class="text-gray-400 text-sm">政策变动与行业竞争加剧,国企机制能否持续高效是关键</p>
</div>
<div class="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-6">
<div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center mb-4">
<i class="ri-information-line text-yellow-400 text-2xl"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-yellow-400">信息交叉验证风险</h3>
<p class="text-gray-400 text-sm">宏大叙事与微观困境的张力,需平衡预期与现实</p>
</div>
</div>
<!-- Risk Details -->
<div class="space-y-6">
<div class="bg-gray-800/30 rounded-xl p-6">
<h3 class="text-lg font-semibold mb-4 flex items-center">
<span class="w-8 h-8 bg-red-500/20 rounded-lg flex items-center justify-center mr-3">
<i class="ri-alert-line text-red-400"></i>
</span>
核心风险点详解
</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-semibold text-gray-300 mb-3">财务层面</h4>
<ul class="space-y-2 text-gray-400 text-sm">
<li class="flex items-start gap-2">
<i class="ri-checkbox-circle-line text-gray-600 mt-0.5"></i>
<span>应收账款回收进度不及预期,冲击利润表</span>
</li>
<li class="flex items-start gap-2">
<i class="ri-checkbox-circle-line text-gray-600 mt-0.5"></i>
<span>高资产负债率制约融资能力与扩张</span>
</li>
<li class="flex items-start gap-2">
<i class="ri-checkbox-circle-line text-gray-600 mt-0.5"></i>
<span>PPP项目历史包袱影响现金流改善</span>
</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-gray-300 mb-3">经营层面</h4>
<ul class="space-y-2 text-gray-400 text-sm">
<li class="flex items-start gap-2">
<i class="ri-checkbox-circle-line text-gray-600 mt-0.5"></i>
<span>并购后整合难度大,协同效应释放慢</span>
</li>
<li class="flex items-start gap-2">
<i class="ri-checkbox-circle-line text-gray-600 mt-0.5"></i>
<span>新兴业务投入大,短期难见成效</span>
</li>
<li class="flex items-start gap-2">
<i class="ri-checkbox-circle-line text-gray-600 mt-0.5"></i>
<span>市场化改革进度低于预期</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Risk Mitigation -->
<div class="bg-gradient-to-r from-blue-500/10 to-green-500/10 rounded-xl p-6 border border-blue-500/30">
<h3 class="text-lg font-semibold mb-4 text-blue-400">风险缓释措施</h3>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-semibold mb-2 text-yellow-400">加强催收机制</h4>
<p class="text-sm text-gray-400">建立专业团队,通过法律途径保障回款</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-semibold mb-2 text-yellow-400">优化项目结构</h4>
<p class="text-sm text-gray-400">优先承接支付保障好的政府项目</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-semibold mb-2 text-yellow-400">引入战略投资者</h4>
<p class="text-sm text-gray-400">改善治理结构,提升市场化程度</p>
</div>
</div>
</div>
</div>
</div>
<!-- Investment Conclusion -->
<div class="card-glow rounded-2xl p-8 bg-gradient-to-br from-yellow-500/5 to-orange-500/5">
<h2 class="text-2xl font-bold mb-6 gold-gradient">投资启示</h2>
<div class="prose prose-invert max-w-none">
<p class="text-lg text-gray-300 leading-relaxed mb-4">
"安徽国资"概念正从<strong class="text-yellow-400">主题炒作</strong>迈向<strong class="text-yellow-400">分化成长</strong>的关键阶段。政策的号角已经吹响,但最终的胜利属于那些能够将政策红利转化为真实业绩、能够穿越经营困境的企业。
</p>
<div class="grid lg:grid-cols-2 gap-6 mt-6">
<div class="bg-gray-800/50 rounded-xl p-6">
<h3 class="text-lg font-semibold mb-3 text-yellow-400">投资策略建议</h3>
<ul class="space-y-2 text-gray-300">
<li><strong class="text-yellow-300">优选标的:</strong>聚焦具备"链主"潜力的新质生产力载体</li>
<li><strong class="text-yellow-300">跟踪验证:</strong>密切监控关键经营指标的改善进度</li>
<li><strong class="text-yellow-300">风险管理:</strong>平衡成长性与现金流安全</li>
<li><strong class="text-yellow-300">长期视角:</strong>关注产业整合与生态构建的长期价值</li>
</ul>
</div>
<div class="bg-gray-800/50 rounded-xl p-6">
<h3 class="text-lg font-semibold mb-3 text-yellow-400">关键验证时点</h3>
<div class="space-y-3">
<div class="flex justify-between items-center pb-2 border-b border-gray-700">
<span class="text-sm text-gray-400">Q4 2025</span>
<span class="text-sm text-yellow-400">政策细则落地</span>
</div>
<div class="flex justify-between items-center pb-2 border-b border-gray-700">
<span class="text-sm text-gray-400">Q1 2026</span>
<span class="text-sm text-yellow-400">年报业绩验证</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-400">H2 2026</span>
<span class="text-sm text-yellow-400">并购整合成效</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-gray-800 mt-20">
<div class="container mx-auto px-4 py-8">
<div class="text-center text-gray-500 text-sm">
<p>本报告仅供参考,不构成投资建议 | 数据来源:公开信息整理</p>
<p class="mt-2">© 2025 金融洞察分析平台</p>
</div>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,695 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<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>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<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=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
* {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
.gradient-bg-2 {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.timeline-item {
opacity: 0;
transform: translateY(30px);
animation: slideUp 0.6s ease-out forwards;
}
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.highlight-red {
background: linear-gradient(120deg, #ff6b6b 0%, #ff4757 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.highlight-green {
background: linear-gradient(120deg, #2ed573 0%, #1dd1a1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.highlight-blue {
background: linear-gradient(120deg, #3742fa 0%, #2f3542 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
min-width: 0;
}
@media (max-width: 768px) {
.table-responsive table {
font-size: 0.875rem;
}
.table-responsive th,
.table-responsive td {
padding: 0.5rem;
}
}
.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-danger {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.badge-success {
background-color: rgba(34, 197, 94, 0.2);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.badge-warning {
background-color: rgba(245, 158, 11, 0.2);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-info {
background-color: rgba(59, 130, 246, 0.2);
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
.glow {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}
.section-divider {
height: 1px;
background: linear-gradient(to right, transparent, rgba(102, 126, 234, 0.5), transparent);
margin: 3rem 0;
}
</style>
</head>
<body class="bg-gray-900 text-white antialiased">
<!-- Header -->
<header class="gradient-bg text-white py-12 px-6 relative overflow-hidden">
<div class="container mx-auto max-w-7xl">
<div class="absolute inset-0 opacity-20">
<div class="absolute top-0 left-0 w-64 h-64 bg-white rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
<div class="absolute bottom-0 right-0 w-64 h-64 bg-purple-300 rounded-full filter blur-3xl translate-x-1/2 translate-y-1/2"></div>
</div>
<div class="relative z-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4 tracking-tight">
己内酰胺行业深度洞察
</h1>
<p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto mb-6">
周期底部供需重构 · 反内卷驱动格局优化
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<span class="badge badge-danger pulse">周期底部</span>
<span class="badge badge-warning">供给收缩</span>
<span class="badge badge-success">需求刚性</span>
<span class="badge badge-info">技术突破</span>
</div>
</div>
</div>
</header>
<!-- Executive Summary -->
<section class="py-16 px-6">
<div class="container mx-auto max-w-7xl">
<div class="card-hover bg-gray-800 rounded-2xl p-8 shadow-2xl glow mb-12">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-chart-line text-purple-500 mr-3"></i>
核心观点摘要
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-400">当前格局</h3>
<p class="text-gray-300 leading-relaxed">
己内酰胺行业处于<span class="highlight-red font-bold">"亏损驱动供给收缩、需求增长托底价格、低效产能出清在即"</span>的周期性拐点。核心矛盾在于行业长期维持84%以上高开工率与接近现金亏损的严重盈利恶化并存。
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-green-400">投资主线</h3>
<ul class="space-y-2 text-gray-300">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2 flex-shrink-0"></i>
<span><strong class="text-white">低成本龙头:</strong>华鲁恒升、鲁西化工</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2 flex-shrink-0"></i>
<span><strong class="text-white">价格弹性:</strong>旭阳集团、鲁西化工</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2 flex-shrink-0"></i>
<span><strong class="text-white">技术溢价:</strong>恒逸石化、中国化学</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section class="py-16 px-6 bg-gray-800">
<div class="container mx-auto max-w-7xl">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="highlight-blue">核心时间轴</span>
</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-purple-500 to-pink-500"></div>
<div class="space-y-12">
<div class="timeline-item flex items-center justify-center">
<div class="bg-red-600 p-4 rounded-full z-10 shadow-lg">
<i class="fas fa-exclamation-triangle text-white text-xl"></i>
</div>
<div class="ml-6 bg-gray-900 p-6 rounded-xl shadow-xl max-w-xl">
<h3 class="text-lg font-bold text-red-400">2025年6月8日</h3>
<p class="mt-2">平煤神马集团尼龙科技爆炸事故,<span class="highlight-red font-semibold">40万吨/年产能停产占行业5.6%</span></p>
</div>
</div>
<div class="timeline-item flex items-center justify-center">
<div class="bg-yellow-600 p-4 rounded-full z-10 shadow-lg">
<i class="fas fa-chart-line text-white text-xl"></i>
</div>
<div class="ml-6 bg-gray-900 p-6 rounded-xl shadow-xl max-w-xl">
<h3 class="text-lg font-bold text-yellow-400">2025年10月-11月</h3>
<p class="mt-2">行业开启"反内卷"自救,开工率降至<span class="highlight-yellow font-semibold">84.6%</span>11月5日达成减产20%共识价格立即上涨100元/吨至8150元/吨</p>
</div>
</div>
<div class="timeline-item flex items-center justify-center">
<div class="bg-green-600 p-4 rounded-full z-10 shadow-lg">
<i class="fas fa-trending-up text-white text-xl"></i>
</div>
<div class="ml-6 bg-gray-900 p-6 rounded-xl shadow-xl max-w-xl">
<h3 class="text-lg font-bold text-green-400">2025年后</h3>
<p class="mt-2">恒逸钦州60万吨产能完成后新增产能显著放缓行业有望<span class="highlight-green font-semibold">企稳回升</span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Industry Analysis -->
<section class="py-16 px-6">
<div class="container mx-auto max-w-7xl">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="highlight-blue">核心逻辑与市场认知</span>
</h2>
<div class="grid lg:grid-cols-3 gap-8">
<div class="card-hover bg-gray-800 p-8 rounded-2xl shadow-xl">
<div class="flex items-center mb-6">
<i class="fas fa-cogs text-purple-500 text-3xl mr-4"></i>
<h3 class="text-xl font-bold">核心驱动力</h3>
</div>
<div class="space-y-4 text-gray-300">
<div class="p-4 bg-gray-900 rounded-lg">
<h4 class="font-semibold text-red-400 mb-2">成本曲线陡峭化</h4>
<p>加工费从6500元/吨暴跌至3000元/吨,行业毛利<span class="highlight-red font-bold">-1653元/吨</span>但开工率仍维持84.6%</p>
</div>
<div class="p-4 bg-gray-900 rounded-lg">
<h4 class="font-semibold text-yellow-400 mb-2">政策引导"反内卷"</h4>
<p>11月行业会议达成减产20%共识,行政力量介入市场化去产能</p>
</div>
<div class="p-4 bg-gray-900 rounded-lg">
<h4 class="font-semibold text-green-400 mb-2">下游需求刚性</h4>
<p>2025年前10个月表观需求增速<span class="highlight-green font-bold">14%</span>,锦纶纤维替代+工程塑料需求支撑</p>
</div>
</div>
</div>
<div class="card-hover bg-gray-800 p-8 rounded-2xl shadow-xl">
<div class="flex items-center mb-6">
<i class="fas fa-fire text-orange-500 text-3xl mr-4"></i>
<h3 class="text-xl font-bold">市场热度</h3>
</div>
<div class="space-y-4">
<div class="flex justify-between items-center">
<span class="text-gray-300">机构研报密度</span>
<span class="badge badge-danger">极高</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-300">情绪分化程度</span>
<span class="badge badge-warning">显著</span>
</div>
<div class="p-4 bg-gray-900 rounded-lg mt-4">
<p class="text-sm text-gray-400">乐观派强调"反内卷"右侧机会,谨慎派提示需求不及预期风险,基本面派聚焦龙头底部价值</p>
</div>
</div>
</div>
<div class="card-hover bg-gray-800 p-8 rounded-2xl shadow-xl">
<div class="flex items-center mb-6">
<i class="fas fa-exclamation-circle text-red-500 text-3xl mr-4"></i>
<h3 class="text-xl font-bold">预期差分析</h3>
</div>
<div class="space-y-4 text-gray-300">
<div class="p-4 bg-gray-900 rounded-lg border-l-4 border-red-500">
<h4 class="font-semibold mb-2">名义产能≠有效产能</h4>
<p>实际开机率可达<span class="highlight-red font-bold">100%+</span>有效供给可能高出名义产能10-15%</p>
</div>
<div class="p-4 bg-gray-900 rounded-lg border-l-4 border-yellow-500">
<h4 class="font-semibold mb-2">减产≠盈利修复</h4>
<p>单吨亏损1653元涨价100元仅覆盖6%缺口,成本传导存疑</p>
</div>
<div class="p-4 bg-gray-900 rounded-lg border-l-4 border-orange-500">
<h4 class="font-semibold mb-2">技术突破≠业绩兑现</h4>
<p>气相氧化、己内酰胺法PA66等技术存在工业化放大风险</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Catalysts -->
<section class="py-16 px-6 bg-gray-800">
<div class="container mx-auto max-w-7xl">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="highlight-blue">关键催化剂与路径</span>
</h2>
<div class="grid lg:grid-cols-2 gap-8 mb-12">
<div class="card-hover bg-gray-900 p-8 rounded-2xl shadow-xl">
<h3 class="text-xl font-bold mb-6 text-purple-400 flex items-center">
<i class="fas fa-clock mr-3"></i>
近期催化剂3-6个月
</h3>
<div class="space-y-4">
<div class="flex justify-between items-center p-4 bg-gray-800 rounded-lg">
<span class="text-gray-300">减产协议执行力度</span>
<span class="badge badge-warning">中概率 | 高影响</span>
</div>
<div class="flex justify-between items-center p-4 bg-gray-800 rounded-lg">
<span class="text-gray-300">事故产能恢复进度</span>
<span class="badge badge-danger">高概率 | 中影响</span>
</div>
<div class="flex justify-between items-center p-4 bg-gray-800 rounded-lg">
<span class="text-gray-300">旺季需求兑现</span>
<span class="badge badge-warning">中概率 | 高影响</span>
</div>
<div class="flex justify-between items-center p-4 bg-gray-800 rounded-lg">
<span class="text-gray-300">纯苯价格走势</span>
<span class="badge badge-danger">高概率 | 极高影响</span>
</div>
</div>
</div>
<div class="card-hover bg-gray-900 p-8 rounded-2xl shadow-xl">
<h3 class="text-xl font-bold mb-6 text-green-400 flex items-center">
<i class="fas fa-route mr-3"></i>
长期发展路径
</h3>
<div class="space-y-4">
<div class="p-4 bg-gray-800 rounded-lg">
<h4 class="font-semibold text-yellow-400 mb-2">路径一:传统产能周期反转</h4>
<p class="text-sm text-gray-400">亏损深化→小产能退出→开工率降至75-80%→加工费修复至4000-5000元/吨</p>
</div>
<div class="p-4 bg-gray-800 rounded-lg">
<h4 class="font-semibold text-blue-400 mb-2">路径二:技术革命重塑成本</h4>
<p class="text-sm text-gray-400">气相氧化法产业化→己内酰胺法PA66突破→成本曲线重构</p>
</div>
<div class="p-4 bg-gray-800 rounded-lg">
<h4 class="font-semibold text-purple-400 mb-2">路径三:出口市场结构性增长</h4>
<p class="text-sm text-gray-400">日韩台产能退出→中国成为全球成本洼地→出口量提升至30-40万吨/年</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Company Analysis -->
<section class="py-16 px-6">
<div class="container mx-auto max-w-7xl">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="highlight-blue">核心公司深度对比</span>
</h2>
<div class="table-responsive">
<table class="w-full bg-gray-800 rounded-2xl overflow-hidden shadow-2xl">
<thead class="gradient-bg">
<tr>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">公司</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">产能(万吨)</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">成本优势</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">技术特色</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">盈利现状</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">投资逻辑</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<tr class="hover:bg-gray-700 transition-colors">
<td class="px-6 py-4 font-bold text-white">鲁西化工</td>
<td class="px-6 py-4 text-blue-400 font-semibold">70</td>
<td class="px-6 py-4 text-green-400">★★★★★<br><span class="text-xs text-gray-400">24年9月新项目成本最低</span></td>
<td class="px-6 py-4 text-gray-300">一体化园区,蒸汽电力自给</td>
<td class="px-6 py-4 text-yellow-400">新项目微利,老旧装置亏损</td>
<td class="px-6 py-4 text-purple-400 font-semibold">纯粹CPL弹性标的单吨涨1000元→税前利润+7亿</td>
</tr>
<tr class="hover:bg-gray-700 transition-colors">
<td class="px-6 py-4 font-bold text-white">华鲁恒升</td>
<td class="px-6 py-4 text-blue-400 font-semibold">30-45</td>
<td class="px-6 py-4 text-green-400">★★★★★<br><span class="text-xs text-gray-400">煤制氢+荆州先进气化炉</span></td>
<td class="px-6 py-4 text-gray-300">煤化工龙头,多产品协同</td>
<td class="px-6 py-4 text-yellow-400">CPL微利靠其他产品平衡</td>
<td class="px-6 py-4 text-purple-400 font-semibold">防御性龙头底部现金流稳健股息率2.8%</td>
</tr>
<tr class="hover:bg-gray-700 transition-colors">
<td class="px-6 py-4 font-bold text-white">恒逸石化</td>
<td class="px-6 py-4 text-blue-400 font-semibold">22.5权益+60在建</td>
<td class="px-6 py-4 text-yellow-400">★★★★☆<br><span class="text-xs text-gray-400">钦州项目合成氨自制+气相氧化</span></td>
<td class="px-6 py-4 text-gray-300">气相氧化技术(未验证)</td>
<td class="px-6 py-4 text-red-400">24年Q4亏损</td>
<td class="px-6 py-4 text-purple-400 font-semibold">技术期权标的,若气相氧化成功将颠覆行业</td>
</tr>
<tr class="hover:bg-gray-700 transition-colors">
<td class="px-6 py-4 font-bold text-white">神马股份</td>
<td class="px-6 py-4 text-blue-400 font-semibold">40</td>
<td class="px-6 py-4 text-yellow-400">★★★☆☆</td>
<td class="px-6 py-4 text-gray-300">平煤神马集团配套</td>
<td class="px-6 py-4 text-red-400">事故前已亏损</td>
<td class="px-6 py-4 text-purple-400 font-semibold">困境反转,需观察安全管理整改</td>
</tr>
<tr class="hover:bg-gray-700 transition-colors">
<td class="px-6 py-4 font-bold text-white">中国旭阳集团</td>
<td class="px-6 py-4 text-blue-400 font-semibold">75</td>
<td class="px-6 py-4 text-green-400">★★★★☆<br><span class="text-xs text-gray-400">水合法降本1600-1900元/吨</span></td>
<td class="px-6 py-4 text-gray-300">水合法工艺成熟,出口占比高</td>
<td class="px-6 py-4 text-green-400">2024年吨净利200-300元</td>
<td class="px-6 py-4 text-purple-400 font-semibold">出口龙头+成本杀手固体CPL全球竞争力强</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Stock Data -->
<section class="py-16 px-6 bg-gray-800">
<div class="container mx-auto max-w-7xl">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="highlight-blue">核心股票数据</span>
</h2>
<div class="table-responsive">
<table class="w-full bg-gray-900 rounded-2xl overflow-hidden shadow-2xl">
<thead class="gradient-bg-2">
<tr>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">股票代码</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">公司名称</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">分类</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">产能/项目</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">数据来源</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<tr class="hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">000830.SZ</td>
<td class="px-6 py-4 font-bold">鲁西化工</td>
<td class="px-6 py-4 text-green-400">公司产能</td>
<td class="px-6 py-4 text-yellow-400 font-semibold">70万吨/年</td>
<td class="px-6 py-4 text-gray-400">互动平台</td>
</tr>
<tr class="hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">600426.SH</td>
<td class="px-6 py-4 font-bold">华鲁恒升</td>
<td class="px-6 py-4 text-green-400">公司产能</td>
<td class="px-6 py-4 text-yellow-400 font-semibold">30万吨/年</td>
<td class="px-6 py-4 text-gray-400">半年报</td>
</tr>
<tr class="hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">000703.SZ</td>
<td class="px-6 py-4 font-bold">恒逸石化</td>
<td class="px-6 py-4 text-blue-400">公司产能</td>
<td class="px-6 py-4 text-yellow-400">参股40万吨/年(钦州一期试生产)</td>
<td class="px-6 py-4 text-gray-400">互动平台</td>
</tr>
<tr class="hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">600810.SH</td>
<td class="px-6 py-4 font-bold">神马股份</td>
<td class="px-6 py-4 text-orange-400">集团产能</td>
<td class="px-6 py-4 text-yellow-400">神马集团30万吨/年拟扩至60万吨</td>
<td class="px-6 py-4 text-gray-400">公告</td>
</tr>
<tr class="hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">000695.SZ</td>
<td class="px-6 py-4 font-bold">滨海能源</td>
<td class="px-6 py-4 text-purple-400">拟收购</td>
<td class="px-6 py-4 text-yellow-400 font-semibold">拟收购沧州旭阳75万吨/年</td>
<td class="px-6 py-4 text-gray-400">会议纪要</td>
</tr>
<tr class="hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">601117.SH</td>
<td class="px-6 py-4 font-bold">中国化学</td>
<td class="px-6 py-4 text-green-400">公司产能</td>
<td class="px-6 py-4 text-yellow-400">持股60%天辰齐翔53万吨/年</td>
<td class="px-6 py-4 text-gray-400">年报/工商</td>
</tr>
<tr class="hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">600123.SH</td>
<td class="px-6 py-4 font-bold">兰花科创</td>
<td class="px-6 py-4 text-green-400">公司产能</td>
<td class="px-6 py-4 text-yellow-400 font-semibold">14万吨/年</td>
<td class="px-6 py-4 text-gray-400">年报</td>
</tr>
<tr class="hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">600346.SH</td>
<td class="px-6 py-4 font-bold">恒力石化</td>
<td class="px-6 py-4 text-green-400">公司产能</td>
<td class="px-6 py-4 text-yellow-400">己内酰胺-聚酰胺一体化项目</td>
<td class="px-6 py-4 text-gray-400">互动</td>
</tr>
<tr class="hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">1907.HK</td>
<td class="px-6 py-4 font-bold">中国旭阳集团</td>
<td class="px-6 py-4 text-orange-400">集团产能</td>
<td class="px-6 py-4 text-yellow-400 font-semibold">75万吨/年(全球最大单套)</td>
<td class="px-6 py-4 text-gray-400">纪要</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Risks -->
<section class="py-16 px-6">
<div class="container mx-auto max-w-7xl">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="highlight-red">潜在风险与挑战</span>
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="card-hover bg-gray-800 p-6 rounded-2xl shadow-xl border-l-4 border-red-500">
<h3 class="text-xl font-bold mb-4 text-red-400 flex items-center">
<i class="fas fa-exclamation-triangle mr-3"></i>
技术风险
</h3>
<ul class="space-y-2 text-gray-300 text-sm">
<li>• 气相氧化技术工业化失败风险</li>
<li>• 己内酰胺法PA66工艺放大风险</li>
<li>• 新技术稳定运行需1-2年周期</li>
</ul>
</div>
<div class="card-hover bg-gray-800 p-6 rounded-2xl shadow-xl border-l-4 border-orange-500">
<h3 class="text-xl font-bold mb-4 text-orange-400 flex items-center">
<i class="fas fa-chart-line mr-3"></i>
商业化风险
</h3>
<ul class="space-y-2 text-gray-300 text-sm">
<li>• 中美贸易摩擦打击纺织品出口</li>
<li>• 纯苯价格飙涨吞噬涨价成果</li>
<li>• 下游竞争激烈成本传导失灵</li>
</ul>
</div>
<div class="card-hover bg-gray-800 p-6 rounded-2xl shadow-xl border-l-4 border-yellow-500">
<h3 class="text-xl font-bold mb-4 text-yellow-400 flex items-center">
<i class="fas fa-balance-scale mr-3"></i>
政策与竞争风险
</h3>
<ul class="space-y-2 text-gray-300 text-sm">
<li>• 安全环保政策突变增加合规成本</li>
<li>• "反内卷"减产沦为口号</li>
<li>• 产能退出低于预期</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Conclusion -->
<section class="py-16 px-6 gradient-bg">
<div class="container mx-auto max-w-7xl">
<div class="card-hover bg-white bg-opacity-10 backdrop-blur-lg rounded-3xl p-12 shadow-2xl">
<h2 class="text-3xl font-bold mb-8 text-center text-white">
综合结论与投资启示
</h2>
<div class="grid lg:grid-cols-3 gap-8">
<div class="bg-white bg-opacity-10 rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 text-yellow-300 flex items-center">
<i class="fas fa-compass mr-3"></i>
概念阶段
</h3>
<p class="text-gray-200 mb-4">当前处于<span class="bg-yellow-400 text-gray-900 px-2 py-1 rounded font-bold">"周期底部左侧布局期"</span>,尚未进入右侧主升浪</p>
<ul class="text-gray-300 text-sm space-y-2">
<li>• 主题炒作成分:反内卷、新技术易引发脉冲</li>
<li>• 基本面筑底亏损面超60%,小产能退出</li>
<li>• 催化剂待验证:减产执行、复产时间、旺季需求</li>
</ul>
</div>
<div class="bg-white bg-opacity-10 rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 text-green-300 flex items-center">
<i class="fas fa-trophy mr-3"></i>
投资优先级
</h3>
<ol class="text-gray-200 space-y-2">
<li><span class="bg-green-500 text-white px-2 py-1 rounded text-sm mr-2">1</span><strong>华鲁恒升:</strong>防御性龙头股息率2.8%</li>
<li><span class="bg-blue-500 text-white px-2 py-1 rounded text-sm mr-2">2</span><strong>鲁西化工:</strong>进攻性弹性70万吨产能</li>
<li><span class="bg-purple-500 text-white px-2 py-1 rounded text-sm mr-2">3</span><strong>恒逸石化:</strong>技术期权,高风险高回报</li>
<li><span class="bg-gray-500 text-white px-2 py-1 rounded text-sm mr-2">4</span><strong>神马股份:</strong>主题投机,不宜恋战</li>
</ol>
</div>
<div class="bg-white bg-opacity-10 rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 text-blue-300 flex items-center">
<i class="fas fa-chart-bar mr-3"></i>
关键指标
</h3>
<div class="space-y-3 text-gray-200 text-sm">
<div class="flex justify-between">
<span>行业开工率</span>
<span class="text-red-300 font-bold">&lt;80%</span>
</div>
<div class="flex justify-between">
<span>库存天数</span>
<span class="text-green-300 font-bold">&lt;15天</span>
</div>
<div class="flex justify-between">
<span>CPL-纯苯价差</span>
<span class="text-blue-300 font-bold">&gt;3500元/吨</span>
</div>
<div class="flex justify-between">
<span>龙头毛利率</span>
<span class="text-yellow-300 font-bold">转正</span>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-xl text-white font-semibold bg-red-500 bg-opacity-30 inline-block px-8 py-4 rounded-full">
<i class="fas fa-lightbulb mr-3"></i>
操作建议:当前不宜追高"反内卷"主题而应逢调整布局华鲁恒升或鲁西化工。若3个月内开工率降至75%且库存去化超20%,则右侧买点出现
</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-8 px-6 bg-gray-900 border-t border-gray-700">
<div class="container mx-auto max-w-7xl text-center">
<p class="text-gray-400 text-sm">
本报告基于公开信息整理,仅供参考,不构成投资建议。投资有风险,入市需谨慎。
</p>
<div class="mt-4 flex justify-center space-x-6 text-gray-500">
<span>更新时间2025年11月</span>
<span>数据来源:百川盈孚、卓创资讯、公司公告、券商研报</span>
</div>
</div>
</footer>
<script>
// Add smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add staggered animation for timeline items
document.querySelectorAll('.timeline-item').forEach((item, index) => {
item.style.animationDelay = `${index * 0.2}s`;
});
// Add intersection observer for card animations
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(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,584 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新凯来示波器概念 - 国产高端测试仪器突破</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.2/dist/full.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: transform 0.3s, box-shadow 0.3s;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.tech-card {
background: linear-gradient(145deg, #f3f4f6, #ffffff);
border-left: 4px solid #667eea;
}
.risk-badge {
animation: shake 3s infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
75% { transform: translateX(2px); }
}
</style>
</head>
<body class="bg-base-200">
<!-- Header -->
<div class="gradient-bg text-white">
<div class="container mx-auto px-4 py-8">
<div class="flex items-center justify-between flex-wrap">
<div>
<h1 class="text-3xl md:text-4xl font-bold mb-2">
<i class="fas fa-wave-square mr-3"></i>新凯来示波器概念
</h1>
<p class="text-xl opacity-90">打破国外垄断实现90GHz带宽突破</p>
</div>
<div class="mt-4 md:mt-0">
<div class="badge badge-warning badge-lg">
<i class="fas fa-fire mr-2"></i>热门概念
</div>
<div class="badge badge-success badge-lg ml-2">
<i class="fas fa-chart-line mr-2"></i>国产替代
</div>
</div>
</div>
</div>
</div>
<!-- Key Metrics -->
<div class="container mx-auto px-4 -mt-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="card bg-white shadow-xl card-hover">
<div class="card-body p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">技术水平</p>
<p class="text-2xl font-bold text-primary">90GHz</p>
</div>
<div class="text-3xl text-primary">
<i class="fas fa-rocket"></i>
</div>
</div>
<p class="text-xs text-success mt-2">全球第二,国内第一</p>
</div>
</div>
<div class="card bg-white shadow-xl card-hover">
<div class="card-body p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">采样率</p>
<p class="text-2xl font-bold text-secondary">200GSa/s</p>
</div>
<div class="text-3xl text-secondary">
<i class="fas fa-tachometer-alt"></i>
</div>
</div>
<p class="text-xs text-info mt-2">每通道超高速采样</p>
</div>
</div>
<div class="card bg-white shadow-xl card-hover">
<div class="card-body p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">市场规模</p>
<p class="text-2xl font-bold text-accent">千亿级</p>
</div>
<div class="text-3xl text-accent">
<i class="fas fa-globe"></i>
</div>
</div>
<p class="text-xs text-warning mt-2">全球测试仪器市场</p>
</div>
</div>
<div class="card bg-white shadow-xl card-hover">
<div class="card-body p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">发布时间</p>
<p class="text-2xl font-bold text-info">2025.10</p>
</div>
<div class="text-3xl text-info">
<i class="fas fa-calendar-check"></i>
</div>
</div>
<p class="text-xs text-gray-600 mt-2">深圳湾芯展发布</p>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Column -->
<div class="lg:col-span-2 space-y-6">
<!-- Timeline -->
<div class="card bg-white shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<i class="fas fa-timeline mr-2 text-primary"></i>关键时间节点
</h2>
<ul class="timeline timeline-vertical">
<li>
<div class="timeline-start timeline-box bg-primary text-white">
2025年3月27日
</div>
<div class="timeline-middle">
<div class="timeline-dot bg-primary"></div>
</div>
<div class="timeline-end">
<p class="font-semibold">概念初现</p>
<p class="text-sm text-gray-600">新凯来首次出现相关信息</p>
</div>
<hr/>
</li>
<li>
<div class="timeline-start timeline-box bg-secondary text-white">
2025年10月13日
</div>
<div class="timeline-middle">
<div class="timeline-dot bg-secondary"></div>
</div>
<div class="timeline-end">
<p class="font-semibold">预热发布</p>
<p class="text-sm text-gray-600">湾芯展前夕信息披露</p>
</div>
<hr/>
</li>
<li>
<div class="timeline-start timeline-box bg-accent text-white">
2025年10月15日
</div>
<div class="timeline-middle">
<div class="timeline-dot bg-accent timeline-dot"></div>
</div>
<div class="timeline-end">
<p class="font-semibold">正式发布</p>
<p class="text-sm text-gray-600">90GHz示波器震撼登场</p>
</div>
</li>
</ul>
</div>
</div>
<!-- Tech Breakthrough -->
<div class="card bg-white shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<i class="fas fa-microchip mr-2 text-secondary"></i>技术突破亮点
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="tech-card p-4 rounded-lg">
<h3 class="font-bold text-primary mb-2">性能突破</h3>
<ul class="text-sm space-y-1">
<li><i class="fas fa-check text-success mr-2"></i>90GHz超高带宽</li>
<li><i class="fas fa-check text-success mr-2"></i>200GSa/s采样率</li>
<li><i class="fas fa-check text-success mr-2"></i>4Gpts深存储</li>
</ul>
</div>
<div class="tech-card p-4 rounded-lg">
<h3 class="font-bold text-secondary mb-2">智能化创新</h3>
<ul class="text-sm space-y-1">
<li><i class="fas fa-check text-success mr-2"></i>全球首个超高速智能示波器</li>
<li><i class="fas fa-check text-success mr-2"></i>智能参数寻优</li>
<li><i class="fas fa-check text-success mr-2"></i>智能噪声抑制</li>
</ul>
</div>
<div class="tech-card p-4 rounded-lg">
<h3 class="font-bold text-accent mb-2">交互革新</h3>
<ul class="text-sm space-y-1">
<li><i class="fas fa-check text-success mr-2"></i>全球首个全面屏设计</li>
<li><i class="fas fa-check text-success mr-2"></i>智能终端式交互</li>
<li><i class="fas fa-check text-success mr-2"></i>用户体验优化</li>
</ul>
</div>
<div class="tech-card p-4 rounded-lg">
<h3 class="font-bold text-info mb-2">应用领域</h3>
<ul class="text-sm space-y-1">
<li><i class="fas fa-check text-success mr-2"></i>6G通信研发</li>
<li><i class="fas fa-check text-success mr-2"></i>半导体测试</li>
<li><i class="fas fa-check text-success mr-2"></i>智能驾驶验证</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Stock Table -->
<div class="card bg-white shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<i class="fas fa-chart-bar mr-2 text-accent"></i>概念股票池
</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr class="bg-base-200">
<th class="text-left">股票名称</th>
<th class="text-left">细分领域</th>
<th class="text-left">核心亮点</th>
<th class="text-left">市场地位</th>
<th class="text-center">关注度</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td class="font-semibold text-primary">普源精电</td>
<td>示波器制造</td>
<td>高端数字示波器(≥2GHz)</td>
<td>A股营收第一全球第八</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
</div>
</td>
</tr>
<tr class="hover">
<td class="font-semibold text-primary">鼎阳科技</td>
<td>示波器制造</td>
<td>12-bit高分辨率(8GHz)</td>
<td>A股第二全球0.4%份额</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
</div>
</td>
</tr>
<tr class="hover">
<td class="font-semibold text-secondary">大众公用</td>
<td>间接参股</td>
<td>持深创投13.93%股权</td>
<td>间接参股万里眼</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
</div>
</td>
</tr>
<tr class="hover">
<td class="font-semibold text-accent">成都华微</td>
<td>上游器件</td>
<td>高速高精度ADC芯片</td>
<td>核心器件供应商</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
</div>
</td>
</tr>
<tr class="hover">
<td class="font-semibold">深圳能源</td>
<td>间接参股</td>
<td>持深创投5.305%股权</td>
<td>间接参股万里眼</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
</div>
</td>
</tr>
<tr class="hover">
<td class="font-semibold">优利德</td>
<td>示波器制造</td>
<td>12位高分辨率</td>
<td>中低端市场</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
</div>
</td>
</tr>
<tr class="hover">
<td class="font-semibold">天银机电</td>
<td>示波器制造</td>
<td>子公司华清瑞达</td>
<td>具备研制能力</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
</div>
</td>
</tr>
<tr class="hover">
<td class="font-semibold">粤电力A</td>
<td>间接参股</td>
<td>持深创投3.67%股权</td>
<td>间接参股万里眼</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
</div>
</td>
</tr>
<tr class="hover">
<td class="font-semibold">广深铁路</td>
<td>间接参股</td>
<td>持深创投1.40%股权</td>
<td>间接参股万里眼</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
</div>
</td>
</tr>
<tr class="hover">
<td class="font-semibold">中兴通讯</td>
<td>间接参股</td>
<td>通过深创投参股</td>
<td>间接参股万里眼</td>
<td class="text-center">
<div class="rating rating-sm">
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" checked disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
<input type="radio" class="mask mask-star-2 bg-warning" disabled/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="space-y-6">
<!-- Investment Value -->
<div class="card bg-white shadow-xl">
<div class="card-body">
<h2 class="card-title text-lg mb-4">
<i class="fas fa-gem mr-2 text-warning"></i>投资价值分析
</h2>
<div class="space-y-3">
<div class="alert alert-success">
<i class="fas fa-arrow-trend-up"></i>
<div>
<p class="font-semibold">长期价值</p>
<p class="text-sm">国产替代+技术突破双轮驱动</p>
</div>
</div>
<div class="alert alert-info">
<i class="fas fa-lightbulb"></i>
<div>
<p class="font-semibold">正向预期差</p>
<p class="text-sm">产品成熟度和智能化超预期</p>
</div>
</div>
<div class="alert alert-warning">
<i class="fas fa-clock"></i>
<div>
<p class="font-semibold">关键节点</p>
<p class="text-sm">Q4-Q1首批订单落地</p>
</div>
</div>
</div>
</div>
</div>
<!-- Catalysts -->
<div class="card bg-white shadow-xl">
<div class="card-body">
<h2 class="card-title text-lg mb-4">
<i class="fas fa-rocket mr-2 text-primary"></i>催化剂监控
</h2>
<div class="space-y-2">
<div class="flex items-center justify-between p-2 bg-base-100 rounded">
<span class="text-sm">商业订单</span>
<span class="badge badge-primary badge-sm">近期</span>
</div>
<div class="flex items-center justify-between p-2 bg-base-100 rounded">
<span class="text-sm">行业标准</span>
<span class="badge badge-secondary badge-sm">Q1</span>
</div>
<div class="flex items-center justify-between p-2 bg-base-100 rounded">
<span class="text-sm">产能爬坡</span>
<span class="badge badge-accent badge-sm">Q2</span>
</div>
<div class="flex items-center justify-between p-2 bg-base-100 rounded">
<span class="text-sm">政策支持</span>
<span class="badge badge-info badge-sm">待定</span>
</div>
</div>
</div>
</div>
<!-- Risk Alert -->
<div class="card bg-white shadow-xl border-l-4 border-error">
<div class="card-body">
<h2 class="card-title text-lg mb-4 text-error">
<i class="fas fa-exclamation-triangle mr-2 risk-badge"></i>风险提示
</h2>
<ul class="space-y-2 text-sm">
<li class="flex items-start">
<i class="fas fa-circle text-error text-xs mt-1.5 mr-2"></i>
<span>良率和产能尚未验证</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle text-error text-xs mt-1.5 mr-2"></i>
<span>客户认证周期6-12个月</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle text-error text-xs mt-1.5 mr-2"></i>
<span>国际巨头降价竞争风险</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle text-error text-xs mt-1.5 mr-2"></i>
<span>关键器件进口依赖</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle text-warning text-xs mt-1.5 mr-2"></i>
<span>市场存在概念混淆风险</span>
</li>
</ul>
</div>
</div>
<!-- Market Share -->
<div class="card bg-white shadow-xl">
<div class="card-body">
<h2 class="card-title text-lg mb-4">
<i class="fas fa-chart-pie mr-2 text-secondary"></i>市场格局
</h2>
<div class="space-y-3">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">外资品牌</span>
<span class="text-sm font-semibold">~98%</span>
</div>
<progress class="progress progress-error" value="98" max="100"></progress>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">普源精电</span>
<span class="text-sm font-semibold">1.1%</span>
</div>
<progress class="progress progress-primary" value="1.1" max="100"></progress>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">鼎阳科技</span>
<span class="text-sm font-semibold">0.4%</span>
</div>
<progress class="progress progress-secondary" value="0.4" max="100"></progress>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">其他国产</span>
<span class="text-sm font-semibold">0.5%</span>
</div>
<progress class="progress progress-accent" value="0.5" max="100"></progress>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Investment Strategy -->
<div class="card bg-gradient-to-r from-primary to-secondary text-white shadow-xl mt-6">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<i class="fas fa-chess-king mr-3"></i>投资策略建议
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white/20 backdrop-blur rounded-lg p-4">
<h3 class="font-bold mb-2 flex items-center">
<i class="fas fa-star mr-2"></i>重点关注
</h3>
<ul class="text-sm space-y-1">
<li>• 大众公用(深创投最高持股)</li>
<li>• 成都华微(核心器件供应)</li>
<li>• 普源精电(行业龙头)</li>
</ul>
</div>
<div class="bg-white/20 backdrop-blur rounded-lg p-4">
<h3 class="font-bold mb-2 flex items-center">
<i class="fas fa-chart-line mr-2"></i>操作建议
</h3>
<ul class="text-sm space-y-1">
<li>• 分批建仓,逢低布局</li>
<li>• 重点跟踪商业化进展</li>
<li>• 关注产业链整合机会</li>
</ul>
</div>
<div class="bg-white/20 backdrop-blur rounded-lg p-4">
<h3 class="font-bold mb-2 flex items-center">
<i class="fas fa-eye mr-2"></i>跟踪指标
</h3>
<ul class="text-sm space-y-1">
<li>• 首批订单金额和客户</li>
<li>• 产品良率和月产能</li>
<li>• 国产替代政策动向</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer footer-center p-4 bg-base-300 text-base-content mt-8">
<div>
<p>© 2025 新凯来示波器概念分析 | 数据来源:公开资料整理</p>
<p class="text-sm text-gray-500 mt-1">投资有风险,入市需谨慎</p>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,466 @@
<!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&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #667eea;
left: -10px;
top: 6px;
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.tech-tag {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.table-scroll-custom {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-scroll-custom::-webkit-scrollbar {
height: 8px;
}
.table-scroll-custom::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.table-scroll-custom::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.table-scroll-custom::-webkit-scrollbar-thumb:hover {
background: #555;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse-animation {
animation: pulse 2s infinite;
}
.risk-card {
border-left: 4px solid #ef4444;
}
.opportunity-card {
border-left: 4px solid #10b981;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col items-center text-center">
<div class="mb-6 pulse-animation">
<i class="fas fa-robot text-6xl"></i>
</div>
<h1 class="text-5xl font-bold mb-4">机器人皮肤/仿生皮肤</h1>
<p class="text-xl mb-8 opacity-90">从前沿技术到商业化落地的关键转折</p>
<div class="flex flex-wrap gap-4 justify-center">
<span class="bg-white/20 px-4 py-2 rounded-full backdrop-blur-sm">
<i class="fas fa-chart-line mr-2"></i>具身智能核心
</span>
<span class="bg-white/20 px-4 py-2 rounded-full backdrop-blur-sm">
<i class="fas fa-hand-sparkles mr-2"></i>触觉感知革命
</span>
<span class="bg-white/20 px-4 py-2 rounded-full backdrop-blur-sm">
<i class="fas fa-atom mr-2"></i>万亿级市场
</span>
</div>
</div>
</div>
</section>
<!-- 核心数据展示 -->
<section class="py-12 -mt-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="glass-effect rounded-xl p-6 hover-scale">
<div class="text-3xl font-bold text-purple-600 mb-2">2000-8000</div>
<div class="text-gray-600">单机器人手部价值量(元)</div>
</div>
<div class="glass-effect rounded-xl p-6 hover-scale">
<div class="text-3xl font-bold text-purple-600 mb-2">10倍</div>
<div class="text-gray-600">2025年出货量增长</div>
</div>
<div class="glass-effect rounded-xl p-6 hover-scale">
<div class="text-3xl font-bold text-purple-600 mb-2">30+</div>
<div class="text-gray-600">汉威科技覆盖客户数</div>
</div>
<div class="glass-effect rounded-xl p-6 hover-scale">
<div class="text-3xl font-bold text-purple-600 mb-2">300万+</div>
<div class="text-gray-600">商业化按压寿命要求</div>
</div>
</div>
</div>
</section>
<!-- 事件时间轴 -->
<section class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">核心催化事件</h2>
<div class="max-w-4xl mx-auto">
<div class="space-y-6">
<div class="flex items-start glass-effect rounded-lg p-4">
<div class="timeline-dot flex-1">
<div class="font-semibold text-purple-600">2025年2月</div>
<div class="text-gray-700 mt-1">产业链初步联动 - 唯科科技将仿生机器人电子 skin 作为重点项目</div>
</div>
</div>
<div class="flex items-start glass-effect rounded-lg p-4">
<div class="timeline-dot flex-1">
<div class="font-semibold text-purple-600">2025年4月21日</div>
<div class="text-gray-700 mt-1">情绪引爆点 - 央视报道订单爆发式增长企业24小时赶工</div>
</div>
</div>
<div class="flex items-start glass-effect rounded-lg p-4">
<div class="timeline-dot flex-1">
<div class="font-semibold text-purple-600">2025年6-8月</div>
<div class="text-gray-700 mt-1">认知深化 - 特斯拉Gen3采用"压阻+电容"混合方案</div>
</div>
</div>
<div class="flex items-start glass-effect rounded-lg p-4">
<div class="timeline-dot flex-1">
<div class="font-semibold text-purple-600">2025年10-11月</div>
<div class="text-gray-700 mt-1">应用具象化 - 小鹏发布全包覆柔性 skinFigure 03展示织物 skin</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑分析 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center">核心逻辑与市场认知</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="hover-scale">
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl p-6 h-full">
<i class="fas fa-microchip text-4xl text-blue-600 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">技术刚需驱动</h3>
<p class="text-gray-600">解决人形机器人"好用"问题的关键,实现全身覆盖和精细触觉感知,是具身智能的终极触觉方案</p>
</div>
</div>
<div class="hover-scale">
<div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl p-6 h-full">
<i class="fas fa-dollar-sign text-4xl text-green-600 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">成本优势显著</h3>
<p class="text-gray-600">单手成本2000-8000元对比单个六维力矩传感器1万元性价比优势明显覆盖面积更大</p>
</div>
</div>
<div class="hover-scale">
<div class="bg-gradient-to-br from-purple-50 to-pink-100 rounded-xl p-6 h-full">
<i class="fas fa-chart-line text-4xl text-purple-600 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">商业化拐点</h3>
<p class="text-gray-600">订单爆发、产能提升、技术迭代成熟,客户从单手指试用扩展到全手甚至身体关节安装</p>
</div>
</div>
</div>
</div>
</section>
<!-- 预期差分析 -->
<section class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">预期差分析</h2>
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="risk-card bg-red-50 rounded-lg p-6">
<div class="flex items-center mb-3">
<i class="fas fa-exclamation-triangle text-red-600 text-2xl mr-3"></i>
<h3 class="text-lg font-semibold text-red-800">市场过热预期</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• "订单爆发"实为低基数增长</li>
<li>• 多数订单处于送样/小批量阶段</li>
<li>• 技术领先不等于量产能力</li>
</ul>
</div>
<div class="opportunity-card bg-green-50 rounded-lg p-6">
<div class="flex items-center mb-3">
<i class="fas fa-lightbulb text-green-600 text-2xl mr-3"></i>
<h3 class="text-lg font-semibold text-green-800">产业实际进展</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• "从0到1"的早期量产阶段</li>
<li>• 良率控制是当前最大挑战</li>
<li>• 供应商格局仍有变数</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">产业链核心标的</h2>
<div class="table-scroll-custom">
<table class="w-full bg-white rounded-lg overflow-hidden shadow-lg">
<thead class="gradient-bg text-white">
<tr>
<th class="px-6 py-4 text-left">股票名称</th>
<th class="px-6 py-4 text-left">核心业务</th>
<th class="px-6 py-4 text-left">业务进展</th>
<th class="px-6 py-4 text-left">信息来源</th>
<th class="px-6 py-4 text-left">投资逻辑</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<!-- 核心中游 -->
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold text-purple-600">汉威科技</td>
<td class="px-6 py-4">电子皮肤</td>
<td class="px-6 py-4">已向部分机器人厂家小批量供货</td>
<td class="px-6 py-4">年报</td>
<td class="px-6 py-4">中游核心覆盖30+客户</td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-6 py-4 font-semibold text-blue-600">福莱新材</td>
<td class="px-6 py-4">传感器材料</td>
<td class="px-6 py-4">高性能柔性传感器材料,二代曲面设计</td>
<td class="px-6 py-4">公告</td>
<td class="px-6 py-4">中游追赶者,技术储备深厚</td>
</tr>
<!-- 上游材料 -->
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 font-semibold text-green-600">道恩股份</td>
<td class="px-6 py-4">热塑弹性体</td>
<td class="px-6 py-4">重点开发仿生皮肤应用,解决材料发粘问题</td>
<td class="px-6 py-4">互动</td>
<td class="px-6 py-4">上游核心材料供应商</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 font-semibold text-green-600">浙江众成</td>
<td class="px-6 py-4">热塑弹性体</td>
<td class="px-6 py-4">TPE材料成本降低30%,供货头部厂商</td>
<td class="px-6 py-4">机构研报</td>
<td class="px-6 py-4">性价比优势明显</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 font-semibold text-green-600">硅宝科技</td>
<td class="px-6 py-4">硅橡胶</td>
<td class="px-6 py-4">中国有机硅密封胶行业龙头总产能21万吨/年</td>
<td class="px-6 py-4">研报</td>
<td class="px-6 py-4">上游基础材料龙头</td>
</tr>
<!-- 其他关键标的 -->
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-semibold text-indigo-600">申昊科技</td>
<td class="px-6 py-4">柔性传感器</td>
<td class="px-6 py-4">已小批量应用于公司操作类机器人</td>
<td class="px-6 py-4">调研</td>
<td class="px-6 py-4">技术差异化,应用明确</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-semibold text-indigo-600">奥迪威</td>
<td class="px-6 py-4">检测</td>
<td class="px-6 py-4">电子皮肤是公司新技术发展路线之一</td>
<td class="px-6 py-4">调研</td>
<td class="px-6 py-4">离电式/电容式技术路线</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-semibold text-indigo-600">唯科科技</td>
<td class="px-6 py-4">传感器材料</td>
<td class="px-6 py-4">IME模内电子技术应用开发中</td>
<td class="px-6 py-4">调研</td>
<td class="px-6 py-4">塑胶人皮+电子技术结合</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center">投资启示与风险提示</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl p-8 mb-8">
<h3 class="text-2xl font-bold mb-4 text-purple-800">
<i class="fas fa-star mr-2"></i>核心投资策略
</h3>
<div class="space-y-4">
<div class="flex items-start">
<span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">1</span>
<div>
<h4 class="font-semibold text-purple-800">首选核心标的</h4>
<p class="text-gray-700">汉威科技 - 11年技术积累广泛客户覆盖明确量产规划</p>
</div>
</div>
<div class="flex items-start">
<span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">2</span>
<div>
<h4 class="font-semibold text-purple-800">次选配置方向</h4>
<p class="text-gray-700">技术差异化玩家(奥迪威、申昊科技) + 上游关键材料(道恩股份、浙江众成)</p>
</div>
</div>
<div class="flex items-start">
<span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">3</span>
<div>
<h4 class="font-semibold text-purple-800">关键跟踪指标</h4>
<p class="text-gray-700">汉威科技季度财报、头部机器人厂商供应商名单、行业渗透率数据</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-red-100 to-orange-100 rounded-xl p-8">
<h3 class="text-2xl font-bold mb-4 text-red-800">
<i class="fas fa-exclamation-circle mr-2"></i>主要风险提示
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="risk-card bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-700 mb-2">技术风险</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 多模态集成难题</li>
<li>• 300万次寿命要求</li>
<li>• 标准化缺失</li>
</ul>
</div>
<div class="risk-card bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-700 mb-2">商业化风险</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 成本下降曲线不确定</li>
<li>• ROI验证待观察</li>
<li>• 价格战风险</li>
</ul>
</div>
<div class="risk-card bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-700 mb-2">竞争风险</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 供应商格局未定</li>
<li>• 特斯拉最终选择不明</li>
<li>• 知识产权纠纷可能</li>
</ul>
</div>
<div class="risk-card bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-700 mb-2">信息风险</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 市场情绪过热</li>
<li>• 关键数据不透明</li>
<li>• 概念炒作与实际差距</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="gradient-bg text-white py-8">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">本报告仅供参考,不构成投资建议</p>
<p class="text-sm opacity-75">数据来源:公开信息整理 | 更新时间2025年11月</p>
</div>
</footer>
<script>
// 添加滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// 观察所有卡片元素
document.querySelectorAll('.hover-scale').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('tbody tr').forEach(row => {
row.addEventListener('click', function() {
// 移除其他高亮
document.querySelectorAll('tbody tr').forEach(r => {
r.classList.remove('ring-2', 'ring-purple-500');
});
// 添加当前高亮
this.classList.add('ring-2', 'ring-purple-500');
});
});
// 添加平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,567 @@
<!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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); }
50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.8); }
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.stock-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.stock-table table {
min-width: 800px;
}
}
.tech-card:hover {
transform: translateY(-5px);
transition: all 0.3s ease;
}
.risk-meter {
background: linear-gradient(90deg, #10b981 0%, #eab308 50%, #ef4444 100%);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<div class="hero-gradient text-white">
<div class="container mx-auto px-4 py-16 lg:py-24">
<div class="flex flex-col lg:flex-row items-center justify-between">
<div class="lg:w-2/3 mb-8 lg:mb-0">
<h1 class="text-4xl lg:text-6xl font-bold mb-4 animate-fade-in">
核电钍基熔盐堆
</h1>
<p class="text-xl lg:text-2xl mb-6 opacity-90">
第四代核能技术的革命性突破
</p>
<div class="flex flex-wrap gap-4 mb-8">
<span class="badge badge-primary badge-lg">全球唯一运行</span>
<span class="badge badge-secondary badge-lg">100%国产化</span>
<span class="badge badge-accent badge-lg">钍燃料突破</span>
</div>
<p class="text-lg leading-relaxed opacity-80">
2025年11月1日中国宣布甘肃武威2兆瓦钍基熔盐实验堆成功实现首次钍铀核燃料转换
标志着中国在全球第四代核能竞赛中占据领先地位。
</p>
</div>
<div class="lg:w-1/3 text-center">
<div class="glass-effect rounded-2xl p-8 animate-pulse-slow">
<i data-lucide="atom" class="w-32 h-32 mx-auto mb-4"></i>
<p class="text-2xl font-bold">技术领先</p>
<p class="text-lg opacity-80">钍资源利用革命</p>
</div>
</div>
</div>
</div>
</div>
<!-- Core Stats -->
<div class="bg-white shadow-xl -mt-10 mx-4 lg:mx-8 rounded-2xl relative z-10">
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="text-center p-6 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl">
<i data-lucide="zap" class="w-12 h-12 mx-auto mb-2 text-blue-600"></i>
<p class="text-3xl font-bold text-blue-600">2MW</p>
<p class="text-gray-600">实验堆功率</p>
</div>
<div class="text-center p-6 bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl">
<i data-lucide="shield-check" class="w-12 h-12 mx-auto mb-2 text-green-600"></i>
<p class="text-3xl font-bold text-green-600">100%</p>
<p class="text-gray-600">核心设备国产化</p>
</div>
<div class="text-center p-6 bg-gradient-to-br from-purple-50 to-pink-100 rounded-xl">
<i data-lucide="globe" class="w-12 h-12 mx-auto mb-2 text-purple-600"></i>
<p class="text-3xl font-bold text-purple-600">全球唯一</p>
<p class="text-gray-600">钍燃料入堆运行</p>
</div>
<div class="text-center p-6 bg-gradient-to-br from-orange-50 to-red-100 rounded-xl">
<i data-lucide="target" class="w-12 h-12 mx-auto mb-2 text-orange-600"></i>
<p class="text-3xl font-bold text-orange-600">2035</p>
<p class="text-gray-600">百兆瓦示范堆目标</p>
</div>
</div>
</div>
</div>
<!-- Timeline -->
<div class="container mx-auto px-4 py-16">
<h2 class="text-3xl lg:text-4xl font-bold mb-12 text-center">
<i data-lucide="clock" class="inline w-8 h-8 mr-2"></i>
发展时间轴
</h2>
<div class="relative">
<div class="timeline-line absolute left-8 lg:left-1/2 transform lg:-translate-x-1/2 w-1 h-full"></div>
<div class="space-y-12">
<div class="flex items-center">
<div class="timeline-dot bg-green-500 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold z-10">
<span>2023</span>
</div>
<div class="ml-8 lg:ml-16 bg-white p-6 rounded-xl shadow-lg tech-card">
<h3 class="text-xl font-bold mb-2">实验堆试运行</h3>
<p class="text-gray-600">甘肃武威2MW实验堆获安全局试运行许可9月进入试运行阶段</p>
</div>
</div>
<div class="flex items-center flex-row-reverse">
<div class="timeline-dot bg-blue-500 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold z-10">
<span>2025</span>
</div>
<div class="mr-8 lg:mr-16 bg-white p-6 rounded-xl shadow-lg tech-card">
<h3 class="text-xl font-bold mb-2 text-blue-600">重大突破</h3>
<p class="text-gray-600">11月1日宣布首次实现钍铀核燃料转换技术可行性获验证</p>
</div>
</div>
<div class="flex items-center">
<div class="timeline-dot bg-purple-500 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold z-10">
<span>2030</span>
</div>
<div class="ml-8 lg:ml-16 bg-white p-6 rounded-xl shadow-lg tech-card">
<h3 class="text-xl font-bold mb-2 text-purple-600">研究堆建设</h3>
<p class="text-gray-600">计划建成30MW研究堆进一步验证工程技术</p>
</div>
</div>
<div class="flex items-center flex-row-reverse">
<div class="timeline-dot bg-orange-500 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold z-10">
<span>2035</span>
</div>
<div class="mr-8 lg:mr-16 bg-white p-6 rounded-xl shadow-lg tech-card">
<h3 class="text-xl font-bold mb-2 text-orange-600">商业示范</h3>
<p class="text-gray-600">目标实现百兆瓦级示范堆并网发电,推动商业化应用</p>
</div>
</div>
</div>
</div>
</div>
<!-- Core Logic -->
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl lg:text-4xl font-bold mb-12 text-center">
<i data-lucide="brain" class="inline w-8 h-8 mr-2"></i>
核心逻辑分析
</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-2xl p-8 shadow-xl tech-card">
<div class="text-5xl mb-4">🎯</div>
<h3 class="text-2xl font-bold mb-4">国家能源安全</h3>
<p class="text-gray-600 leading-relaxed">
中国铀资源对外依存度高而钍资源储量丰富全球占比10%-20%),发展钍基熔盐堆是实现核燃料自给自足的顶层战略设计。
</p>
</div>
<div class="bg-white rounded-2xl p-8 shadow-xl tech-card">
<div class="text-5xl mb-4">🚀</div>
<h3 class="text-2xl font-bold mb-4">技术突破</h3>
<p class="text-gray-600 leading-relaxed">
2025年11月事件是技术"从0到1"验证,证明了液态熔盐环境中钍-铀燃料循环的可行性同时实现关键设备100%国产化。
</p>
</div>
<div class="bg-white rounded-2xl p-8 shadow-xl tech-card">
<div class="text-5xl mb-4"></div>
<h3 class="text-2xl font-bold mb-4">优越性能</h3>
<p class="text-gray-600 leading-relaxed">
具备本质安全、无水冷却(适合内陆)、高温输出(可用于制氢)等优点,应用场景远超传统核电。
</p>
</div>
</div>
</div>
</div>
<!-- Market Expectation Gap -->
<div class="container mx-auto px-4 py-16">
<h2 class="text-3xl lg:text-4xl font-bold mb-12 text-center">
<i data-lucide="trending-up" class="inline w-8 h-8 mr-2"></i>
市场预期差分析
</h2>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-8 rounded-r-xl mb-8">
<p class="text-lg font-semibold mb-2">⚠️ 关键发现</p>
<p class="text-gray-700">
资本市场与科学界对"突破"定义和"商业化"时间表存在根本认知差异
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-blue-50 rounded-xl p-8">
<h3 class="text-xl font-bold mb-4 text-blue-600">
<i data-lucide="trending-up" class="inline w-5 h-5 mr-1"></i>
市场认知
</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i data-lucide="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
<span>聚焦"全球唯一"、"重大突破"</span>
</li>
<li class="flex items-start">
<i data-lucide="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
<span>2035年商业化路线图</span>
</li>
<li class="flex items-start">
<i data-lucide="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
<span>上游资源股热度高</span>
</li>
</ul>
</div>
<div class="bg-red-50 rounded-xl p-8">
<h3 class="text-xl font-bold mb-4 text-red-600">
<i data-lucide="trending-down" class="inline w-5 h-5 mr-1"></i>
产业现实
</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i data-lucide="alert-circle" class="w-5 h-5 text-yellow-500 mr-2 mt-0.5"></i>
<span>商业化需30年</span>
</li>
<li class="flex items-start">
<i data-lucide="alert-circle" class="w-5 h-5 text-yellow-500 mr-2 mt-0.5"></i>
<span>技术成熟度排第四代堆第三位</span>
</li>
<li class="flex items-start">
<i data-lucide="alert-circle" class="w-5 h-5 text-yellow-500 mr-2 mt-0.5"></i>
<span>瓶颈在技术而非资源</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Industry Chain -->
<div class="bg-gradient-to-br from-gray-900 to-gray-800 text-white py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl lg:text-4xl font-bold mb-12 text-center">
<i data-lucide="network" class="inline w-8 h-8 mr-2"></i>
产业链图谱
</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="glass-effect rounded-xl p-6">
<h3 class="text-xl font-bold mb-4 text-green-400">上游资源</h3>
<div class="space-y-3">
<div class="flex items-center">
<i data-lucide="package" class="w-5 h-5 mr-2"></i>
<span>钍资源(独居石伴生)</span>
</div>
<div class="ml-7 space-y-2 text-sm opacity-80">
<p>• 包钢股份(白云鄂博矿)</p>
<p>• 盛和资源(独居石处理)</p>
<p>• 东方锆业(独居石生产)</p>
</div>
</div>
</div>
<div class="glass-effect rounded-xl p-6">
<h3 class="text-xl font-bold mb-4 text-blue-400">中游设备与材料</h3>
<div class="space-y-3">
<div class="flex items-center">
<i data-lucide="settings" class="w-5 h-5 mr-2"></i>
<span>核级设备制造</span>
</div>
<div class="ml-7 space-y-2 text-sm opacity-80">
<p>• 上海电气(主容器)</p>
<p>• 航宇科技(核心锻件)</p>
<p>• 中核科技(阀门)</p>
<p>• 方大炭素(核石墨)</p>
</div>
</div>
</div>
<div class="glass-effect rounded-xl p-6">
<h3 class="text-xl font-bold mb-4 text-purple-400">下游应用</h3>
<div class="space-y-3">
<div class="flex items-center">
<i data-lucide="factory" class="w-5 h-5 mr-2"></i>
<span>建设与运营</span>
</div>
<div class="ml-7 space-y-2 text-sm opacity-80">
<p>• 上海建工(工程建设)</p>
<p>• 中国核电(运营平台)</p>
<p>• 科华数据核级UPS</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="container mx-auto px-4 py-16">
<h2 class="text-3xl lg:text-4xl font-bold mb-12 text-center">
<i data-lucide="bar-chart-3" class="inline w-8 h-8 mr-2"></i>
核心关联股票
</h2>
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="stock-table">
<table class="w-full">
<thead class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
<tr>
<th class="px-4 py-3 text-left">股票名称</th>
<th class="px-4 py-3 text-left">产业链环节</th>
<th class="px-4 py-3 text-left">项目/产品</th>
<th class="px-4 py-3 text-left">核心逻辑</th>
<th class="px-4 py-3 text-center">信息来源</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">上海电气</td>
<td class="px-4 py-3"><span class="badge badge-info">设备制造</span></td>
<td class="px-4 py-3">主容器、堆热侧主熔盐、换热装置</td>
<td class="px-4 py-3 text-sm">承制核心主设备,技术壁垒高</td>
<td class="px-4 py-3 text-center"><span class="badge">互动</span></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">航宇科技</td>
<td class="px-4 py-3"><span class="badge badge-info">设备制造</span></td>
<td class="px-4 py-3">主容器筒节、法兰、堆内构件等全部锻件</td>
<td class="px-4 py-3 text-sm">供应实验堆全部锻件,绑定最核心供应商</td>
<td class="px-4 py-3 text-center"><span class="badge">互动</span></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">上海建工</td>
<td class="px-4 py-3"><span class="badge badge-success">工程建设</span></td>
<td class="px-4 py-3">实验堆及配套工程项目</td>
<td class="px-4 py-3 text-sm">深度参与建设,积累核心工程经验</td>
<td class="px-4 py-3 text-center"><span class="badge">互动</span></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">海陆重工</td>
<td class="px-4 py-3"><span class="badge badge-info">设备供应</span></td>
<td class="px-4 py-3">2MWt实验堆安全专设</td>
<td class="px-4 py-3 text-sm">承制安全关键设备,技术要求高</td>
<td class="px-4 py-3 text-center"><span class="badge">互动</span></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">中核科技</td>
<td class="px-4 py-3"><span class="badge badge-info">设备供应</span></td>
<td class="px-4 py-3">甘肃钍基熔盐堆配套阀门</td>
<td class="px-4 py-3 text-sm">核级阀门领先供应商</td>
<td class="px-4 py-3 text-center"><span class="badge">互动</span></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">包钢股份</td>
<td class="px-4 py-3"><span class="badge badge-warning">上游资源</span></td>
<td class="px-4 py-3">白云鄂博稀土矿</td>
<td class="px-4 py-3 text-sm">拥有丰富钍资源,远期想象空间大</td>
<td class="px-4 py-3 text-center"><span class="badge">互动</span></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">中国核电</td>
<td class="px-4 py-3"><span class="badge badge-success">运营平台</span></td>
<td class="px-4 py-3">中核集团钍资源综合利用平台</td>
<td class="px-4 py-3 text-sm">未来可能的商业化运营主体</td>
<td class="px-4 py-3 text-center"><span class="badge">工商资料</span></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">方大炭素</td>
<td class="px-4 py-3"><span class="badge badge-info">材料供应</span></td>
<td class="px-4 py-3">TMSR专项核石墨</td>
<td class="px-4 py-3 text-sm">2015年合作研发核石墨应用</td>
<td class="px-4 py-3 text-center"><span class="badge">公告</span></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">兰石重装</td>
<td class="px-4 py-3"><span class="badge badge-info">设备研发</span></td>
<td class="px-4 py-3">第四代反应堆关键装备</td>
<td class="px-4 py-3 text-sm">参与仿真试验平台设备合同</td>
<td class="px-4 py-3 text-center"><span class="badge">互动</span></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-semibold text-indigo-600">川润股份</td>
<td class="px-4 py-3"><span class="badge badge-info">设备供应</span></td>
<td class="px-4 py-3">TMSR冷却盐循环泵</td>
<td class="px-4 py-3 text-sm">提供熔盐循环系统核心设备</td>
<td class="px-4 py-3 text-center"><span class="badge">互动</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Risks Analysis -->
<div class="bg-gradient-to-br from-red-50 to-orange-50 py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl lg:text-4xl font-bold mb-12 text-center">
<i data-lucide="alert-triangle" class="inline w-8 h-8 mr-2"></i>
风险与挑战
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white rounded-xl p-8 shadow-lg">
<h3 class="text-xl font-bold mb-4 text-red-600">
<i data-lucide="cpu" class="inline w-5 h-5 mr-1"></i>
技术风险
</h3>
<div class="space-y-4">
<div class="flex items-start">
<i data-lucide="x-circle" class="w-5 h-5 text-red-500 mr-2 mt-0.5"></i>
<div>
<p class="font-semibold">材料腐蚀</p>
<p class="text-sm text-gray-600">熔盐高温强化学活性对结构材料的腐蚀是世界级难题</p>
</div>
</div>
<div class="flex items-start">
<i data-lucide="x-circle" class="w-5 h-5 text-red-500 mr-2 mt-0.5"></i>
<div>
<p class="font-semibold">燃料在线处理</p>
<p class="text-sm text-gray-600">在线分离增殖U-233工艺极其复杂远未达工业应用</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-8 shadow-lg">
<h3 class="text-xl font-bold mb-4 text-orange-600">
<i data-lucide="dollar-sign" class="inline w-5 h-5 mr-1"></i>
商业化风险
</h3>
<div class="space-y-4">
<div class="flex items-start">
<i data-lucide="trending-down" class="w-5 h-5 text-orange-500 mr-2 mt-0.5"></i>
<div>
<p class="font-semibold">经济性挑战</p>
<p class="text-sm text-gray-600">研发建设成本极高,规模化前经济性远低于三代核电</p>
</div>
</div>
<div class="flex items-start">
<i data-lucide="trending-down" class="w-5 h-5 text-orange-500 mr-2 mt-0.5"></i>
<div>
<p class="font-semibold">技术路线竞争</p>
<p class="text-sm text-gray-600">高温气冷堆、钠冷快堆等其他四代堆的竞争分流</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 bg-yellow-100 border-2 border-yellow-400 rounded-xl p-6">
<h4 class="text-lg font-bold mb-3">风险等级评估</h4>
<div class="h-6 rounded-full risk-meter mb-4"></div>
<div class="flex justify-between text-sm">
<span class="text-green-600">低风险</span>
<span class="text-yellow-600">中等风险</span>
<span class="text-red-600">高风险</span>
</div>
</div>
</div>
</div>
<!-- Investment Insights -->
<div class="bg-gradient-to-r from-green-600 to-emerald-700 text-white py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl lg:text-4xl font-bold mb-12 text-center">
<i data-lucide="lightbulb" class="inline w-8 h-8 mr-2"></i>
投资启示
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="glass-effect rounded-xl p-8">
<h3 class="text-2xl font-bold mb-4">最具投资价值环节</h3>
<div class="space-y-4">
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h4 class="font-bold mb-2">🏭 高壁垒核心设备制造商</h4>
<p class="text-sm opacity-90">航宇科技、上海电气、中核科技等深度参与实验建设的核心供应商</p>
</div>
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h4 class="font-bold mb-2">🏗️ 工程建设先锋</h4>
<p class="text-sm opacity-90">上海建工等拥有核能工程建设经验和资质的企业</p>
</div>
</div>
</div>
<div class="glass-effect rounded-xl p-8">
<h3 class="text-2xl font-bold mb-4">关键跟踪指标</h3>
<div class="space-y-4">
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h4 class="font-bold mb-2">📅 20MW项目进度</h4>
<p class="text-sm opacity-90">从实验室走向工程化的第一个里程碑</p>
</div>
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h4 class="font-bold mb-2">📋 新订单公告</h4>
<p class="text-sm opacity-90">核心设备厂商获得后续项目合同</p>
</div>
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h4 class="font-bold mb-2">🔬 材料技术突破</h4>
<p class="text-sm opacity-90">耐熔盐腐蚀材料等关键技术进展</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">© 2024 核电钍基熔盐堆深度分析报告</p>
<p class="text-sm opacity-75">数据来源:公开新闻、路演记录、券商研报</p>
<p class="text-xs mt-4 opacity-50">风险提示:本报告仅供参考,不构成投资建议</p>
</div>
</footer>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.tech-card').forEach(card => {
observer.observe(card);
});
// Timeline animation
document.querySelectorAll('.timeline-dot').forEach((dot, index) => {
setTimeout(() => {
dot.classList.add('animate-pulse-slow');
}, index * 200);
});
// Add table row hover effect
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.02)';
this.style.transition = 'all 0.3s ease';
});
row.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
// Initialize animations
window.addEventListener('load', () => {
document.body.classList.add('loaded');
});
</script>
</body>
</html>

View File

@@ -0,0 +1,522 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>毫秒用算 - 算力网络新纪元</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.timeline-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}
.stock-table {
font-size: 0.9rem;
}
@media (max-width: 768px) {
.stock-table {
font-size: 0.8rem;
}
}
</style>
</head>
<body class="bg-base-200">
<!-- 头部导航 -->
<div class="navbar bg-base-100 shadow-lg sticky top-0 z-50">
<div class="flex-1">
<a class="btn btn-ghost text-xl">⚡ 毫秒用算概念板</a>
</div>
<div class="flex-none">
<div class="badge badge-primary badge-lg">2025.10.16 工信部专项行动</div>
</div>
</div>
<!-- 英雄区域 -->
<div class="hero min-h-[40vh] gradient-bg text-white">
<div class="hero-content text-center">
<div>
<h1 class="text-5xl font-bold mb-4">毫秒用算</h1>
<p class="text-xl mb-4">算力如电力,即插即用的新时代</p>
<div class="flex justify-center gap-4 flex-wrap">
<div class="stat bg-white/20 rounded-box">
<div class="stat-title text-white/80">目标时延</div>
<div class="stat-value text-white">&lt;1ms</div>
</div>
<div class="stat bg-white/20 rounded-box">
<div class="stat-title text-white/80">覆盖目标</div>
<div class="stat-value text-white">70%</div>
</div>
<div class="stat bg-white/20 rounded-box">
<div class="stat-title text-white/80">市场规模</div>
<div class="stat-value text-white">万亿级</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心观点 -->
<div class="container mx-auto px-4 py-8">
<div class="card bg-base-100 shadow-xl mb-8">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<span class="badge badge-accent badge-lg">核心观点</span>
</h2>
<div class="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>"毫秒用算"概念正处于<strong>政策强力驱动的产业化加速期</strong>,其核心是通过低时延网络基础设施建设,解决算力调度的"最后一公里"问题。预计2025-2027年将是基础设施建设高峰期。</span>
</div>
</div>
</div>
<!-- 发展时间轴 -->
<div class="card bg-base-100 shadow-xl mb-8">
<div class="card-body">
<h2 class="card-title text-2xl mb-6">发展时间轴</h2>
<ul class="timeline timeline-vertical lg:timeline-horizontal">
<li>
<div class="timeline-start timeline-box">2023年6月<br/>存算一体技术路演</div>
<div class="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
</div>
<hr/>
</li>
<li>
<hr/>
<div class="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
</div>
<div class="timeline-end timeline-box">2024年3-5月<br/>大湾区实现3-10ms时延</div>
<hr/>
</li>
<li>
<hr/>
<div class="timeline-start timeline-box">2024年9月<br/>湖北省5ms目标</div>
<div class="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
</div>
<hr/>
</li>
<li>
<hr/>
<div class="timeline-middle timeline-dot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-primary"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
</div>
<div class="timeline-end timeline-box bg-primary text-white">2025年10月16日<br/><strong>工信部正式发布专项行动</strong></div>
</li>
</ul>
</div>
</div>
<!-- 三大预期差 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body">
<h3 class="card-title text-lg">技术路径预期差</h3>
<p class="text-sm">市场关注光纤光缆,但<span class="text-primary font-bold">卫星互联网</span>可能成为破局者</p>
<div class="badge badge-outline">星链时延&lt;20ms</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body">
<h3 class="card-title text-lg">商业模式预期差</h3>
<p class="text-sm">市场认为运营商主导,但<span class="text-primary font-bold">混合模式</span>可能成为主流</p>
<div class="badge badge-outline">运营商+政府+算力商</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body">
<h3 class="card-title text-lg">受益环节预期差</h3>
<p class="text-sm">市场聚焦硬件,忽视<span class="text-primary font-bold">软件调度平台</span>价值</p>
<div class="badge badge-outline">隐形冠军机会</div>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="card bg-base-100 shadow-xl mb-8">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">产业链图谱</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="card bg-primary/10 border-2 border-primary">
<div class="card-body">
<h3 class="font-bold text-primary mb-2">上游:算力基础设施</h3>
<div class="space-y-2">
<div class="badge badge-ghost">服务器:中科曙光、紫光股份</div>
<div class="badge badge-ghost">IDC润泽科技(800台H系列)</div>
<div class="badge badge-ghost">芯片:华为昇腾(80-90%份额)</div>
</div>
</div>
</div>
<div class="card bg-secondary/10 border-2 border-secondary">
<div class="card-body">
<h3 class="font-bold text-secondary mb-2">中游:网络连接层</h3>
<div class="space-y-2">
<div class="badge badge-ghost">光模块:中际旭创、天孚通信</div>
<div class="badge badge-ghost">交换机:紫光股份、锐捷网络</div>
<div class="badge badge-ghost">光纤:长飞光纤、亨通光电</div>
</div>
</div>
</div>
<div class="card bg-accent/10 border-2 border-accent">
<div class="card-body">
<h3 class="font-bold text-accent mb-2">下游:调度与应用</h3>
<div class="space-y-2">
<div class="badge badge-ghost">调度:思特奇、青云科技</div>
<div class="badge badge-ghost">运营商:中国电信、中国移动</div>
<div class="badge badge-ghost">应用:工业互联、智慧医疗</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心股票池 -->
<div class="card bg-base-100 shadow-xl mb-8">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<span class="badge badge-success badge-lg">核心股票池</span>
<span class="text-sm text-gray-500 ml-2">共72只概念股</span>
</h2>
<!-- 分类标签 -->
<div class="tabs tabs-boxed mb-4">
<a class="tab tab-active" onclick="filterStocks('all')">全部</a>
<a class="tab" onclick="filterStocks('计算')">计算</a>
<a class="tab" onclick="filterStocks('连接')">连接</a>
<a class="tab" onclick="filterStocks('调度')">调度</a>
</div>
<!-- 股票表格 -->
<div class="overflow-x-auto">
<table class="table table-zebra stock-table w-full">
<thead>
<tr class="bg-base-300">
<th>股票代码</th>
<th>所属分类</th>
<th>细分领域</th>
<th>入选理由</th>
<th>推荐等级</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- 重点推荐 -->
<tr class="hover" data-category="连接">
<td class="font-bold text-primary">中际旭创</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>光模块</td>
<td>800G升级周期龙头</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td class="font-bold text-primary">紫光股份</td>
<td><span class="badge badge-primary">计算</span></td>
<td>服务器/交换机</td>
<td>全产业链布局</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="调度">
<td class="font-bold text-primary">思特奇</td>
<td><span class="badge badge-accent">调度</span></td>
<td>调度平台</td>
<td>算力操作系统潜力股</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td class="font-bold text-primary">润泽科技</td>
<td><span class="badge badge-primary">计算</span></td>
<td>其他IDC</td>
<td>万卡级算力领先</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<!-- 计算类 -->
<tr class="hover" data-category="计算">
<td>中科曙光</td>
<td><span class="badge badge-primary">计算</span></td>
<td>服务器</td>
<td>国产服务器龙头</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td>中国长城</td>
<td><span class="badge badge-primary">计算</span></td>
<td>服务器</td>
<td>信创服务器</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td>神州数码</td>
<td><span class="badge badge-primary">计算</span></td>
<td>服务器</td>
<td>IT分销龙头</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td>中国电信</td>
<td><span class="badge badge-primary">计算</span></td>
<td>中央云</td>
<td>大湾区3ms时延领先</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td>中国移动</td>
<td><span class="badge badge-primary">计算</span></td>
<td>中央云</td>
<td>运营商龙头</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td>光环新网</td>
<td><span class="badge badge-primary">计算</span></td>
<td>第三方运营</td>
<td>北京区域IDC龙头</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td>宝信软件</td>
<td><span class="badge badge-primary">计算</span></td>
<td>第三方运营</td>
<td>宝钢旗下IDC</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td>数据港</td>
<td><span class="badge badge-primary">计算</span></td>
<td>第三方运营/IDC</td>
<td>定制化数据中心</td>
<td>⭐⭐⭐</td>
</tr>
<!-- 连接类 -->
<tr class="hover" data-category="连接">
<td>天孚通信</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>光模块</td>
<td>光器件平台龙头</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="连接">
<td>新易盛</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>光模块</td>
<td>高速光模块受益</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="连接">
<td>华工科技</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>光模块</td>
<td>激光+光通信双轮</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="连接">
<td>光迅科技</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>光模块</td>
<td>光器件老牌龙头</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="连接">
<td>锐捷网络</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>交换机</td>
<td>企业级网络设备</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="连接">
<td>中兴通讯</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>交换机</td>
<td>通信设备巨头</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="连接">
<td>长飞光纤</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>光纤光缆</td>
<td>光纤光缆龙头</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="连接">
<td>亨通光电</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>光纤光缆</td>
<td>海缆+光纤双龙头</td>
<td>⭐⭐⭐⭐</td>
</tr>
<!-- 调度类 -->
<tr class="hover" data-category="调度">
<td>青云科技</td>
<td><span class="badge badge-accent">调度</span></td>
<td>调度平台</td>
<td>云原生技术领先</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="调度">
<td>首都在线</td>
<td><span class="badge badge-accent">调度</span></td>
<td>调度平台</td>
<td>云网融合服务商</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="调度">
<td>直真科技</td>
<td><span class="badge badge-accent">调度</span></td>
<td>调度平台</td>
<td>网络优化专家</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="调度">
<td>恒为科技</td>
<td><span class="badge badge-accent">调度</span></td>
<td>调度调优</td>
<td>网络可视化龙头</td>
<td>⭐⭐⭐</td>
</tr>
<!-- 其他重要股票 -->
<tr class="hover" data-category="计算">
<td>奥飞数据</td>
<td><span class="badge badge-primary">计算</span></td>
<td>其他IDC</td>
<td>华南IDC龙头</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="计算">
<td>科华数据</td>
<td><span class="badge badge-primary">计算</span></td>
<td>其他IDC</td>
<td>UPS+IDC双轮驱动</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="连接">
<td>中天科技</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>光纤光缆</td>
<td>海缆+光纤+储能</td>
<td>⭐⭐⭐</td>
</tr>
<tr class="hover" data-category="连接">
<td>烽火通信</td>
<td><span class="badge badge-secondary">连接</span></td>
<td>光纤光缆/服务器</td>
<td>通信设备综合商</td>
<td>⭐⭐⭐</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 投资建议 -->
<div class="card bg-gradient-to-r from-primary to-secondary text-white shadow-xl mb-8">
<div class="card-body">
<h2 class="card-title text-2xl mb-4 text-white">投资建议</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="card bg-white/20">
<div class="card-body">
<h3 class="font-bold">短期关注</h3>
<p class="text-sm">光通信硬件投资机会</p>
<div class="badge badge-warning">确定性最高</div>
</div>
</div>
<div class="card bg-white/20">
<div class="card-body">
<h3 class="font-bold">中期布局</h3>
<p class="text-sm">算力调度平台</p>
<div class="badge badge-info">弹性最大</div>
</div>
</div>
<div class="card bg-white/20">
<div class="card-body">
<h3 class="font-bold">长期跟踪</h3>
<p class="text-sm">卫星互联网进展</p>
<div class="badge badge-success">想象空间大</div>
</div>
</div>
</div>
</div>
</div>
<!-- 风险提示 -->
<div class="alert alert-warning shadow-lg mb-8">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
<div>
<h3 class="font-bold">风险提示</h3>
<ul class="text-sm mt-2 space-y-1">
<li>• 技术瓶颈Flash写延迟15毫秒存储介质成为短板</li>
<li>• 商业化风险基础设施投资回收期长达5-10年</li>
<li>• 政策执行:各地财政实力差异可能导致建设进度不一</li>
<li>• 国际竞争:英伟达等海外巨头技术领先,国产替代存在差距</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<footer class="footer footer-center p-4 bg-base-300 text-base-content">
<div>
<p>© 2025 毫秒用算概念研究 | 数据更新时间2025.10.16</p>
</div>
</footer>
<script>
// 筛选股票功能
function filterStocks(category) {
const rows = document.querySelectorAll('#stockTableBody tr');
const tabs = document.querySelectorAll('.tab');
// 更新标签状态
tabs.forEach(tab => {
tab.classList.remove('tab-active');
if (tab.textContent.includes(category) || (category === 'all' && tab.textContent === '全部')) {
tab.classList.add('tab-active');
}
});
// 显示/隐藏行
rows.forEach(row => {
if (category === 'all') {
row.style.display = '';
} else {
const rowCategory = row.getAttribute('data-category');
row.style.display = rowCategory === category ? '' : 'none';
}
});
}
// 添加滚动动画
window.addEventListener('scroll', () => {
const cards = document.querySelectorAll('.card-hover');
cards.forEach(card => {
const rect = card.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,556 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>氟制冷剂 - 超级景气周期投资分析</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></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&display=swap');
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-item {
position: relative;
padding-left: 40px;
margin-bottom: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: -30px;
width: 2px;
background: linear-gradient(180deg, #667eea, #764ba2);
}
.timeline-item:last-child::before {
display: none;
}
.timeline-dot {
position: absolute;
left: -6px;
top: 5px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #667eea;
border: 3px solid white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
.stock-table {
font-size: 0.875rem;
}
.stock-table th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-weight: 600;
position: sticky;
top: 0;
z-index: 10;
}
.stock-table tr:hover {
background-color: rgba(102, 126, 234, 0.05);
transition: all 0.3s ease;
}
.highlight-cell {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
font-weight: 600;
}
.profit-badge {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.875rem;
}
.industry-card {
transition: all 0.3s ease;
border: 1px solid rgba(102, 126, 234, 0.1);
}
.industry-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
}
.chart-bar {
transition: all 0.5s ease;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeInUp 0.6s ease-out;
}
.mobile-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-scroll::-webkit-scrollbar {
height: 4px;
}
.mobile-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.mobile-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 2px;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<div class="gradient-bg text-white py-16 px-4">
<div class="container mx-auto max-w-7xl">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="mb-6 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in">
<i class="fas fa-snowflake mr-3"></i>氟制冷剂
</h1>
<p class="text-xl opacity-90">政策驱动的超级景气周期投资机会</p>
</div>
<div class="text-center md:text-right">
<div class="profit-badge mb-2">
<i class="fas fa-chart-line mr-2"></i>高景气度确认
</div>
<p class="text-sm opacity-80">2025年业绩爆发期</p>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto max-w-7xl px-4 py-8">
<!-- 核心观点摘要 -->
<div class="glass-effect rounded-2xl p-6 mb-8 animate-fade-in">
<h2 class="text-2xl font-bold mb-4 text-gray-800">
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i>核心观点摘要
</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="industry-card bg-white rounded-xl p-4">
<div class="text-purple-600 text-3xl mb-2">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="font-semibold text-gray-800 mb-2">政策驱动</h3>
<p class="text-sm text-gray-600">配额制度重塑供给格局,从无序竞争转向寡头垄断</p>
</div>
<div class="industry-card bg-white rounded-xl p-4">
<div class="text-purple-600 text-3xl mb-2">
<i class="fas fa-rocket"></i>
</div>
<h3 class="font-semibold text-gray-800 mb-2">业绩兑现</h3>
<p class="text-sm text-gray-600">三美股份前三季度预增175%-198%,行业进入利润释放期</p>
</div>
<div class="industry-card bg-white rounded-xl p-4">
<div class="text-purple-600 text-3xl mb-2">
<i class="fas fa-chart-area"></i>
</div>
<h3 class="font-semibold text-gray-800 mb-2">持续景气</h3>
<p class="text-sm text-gray-600">供给刚性约束+需求稳健增长,景气周期有望持续数年</p>
</div>
</div>
</div>
<!-- 事件时间轴 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-history text-blue-500 mr-2"></i>催化事件时间轴
</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<h3 class="font-semibold text-gray-800">2020-2022年基线年</h3>
<p class="text-sm text-gray-600 mt-1">企业"抢份额"大战,供过于求导致价格低迷</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<h3 class="font-semibold text-gray-800">2023年下半年政策拐点</h3>
<p class="text-sm text-gray-600 mt-1">配额核算方案明确,价格触底回升</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<h3 class="font-semibold text-gray-800">2024年初景气起点</h3>
<p class="text-sm text-gray-600 mt-1">配额制度正式实施,价格进入单边上涨通道</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<h3 class="font-semibold text-gray-800">2025年至今业绩爆发</h3>
<p class="text-sm text-gray-600 mt-1">龙头业绩创同期新高,进入利润释放"甜蜜期"</p>
</div>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-network-wired text-green-500 mr-2"></i>产业链图谱
</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-4">
<h3 class="font-semibold text-gray-800 mb-3">
<i class="fas fa-mountain text-blue-600 mr-2"></i>上游
</h3>
<div class="space-y-2">
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">萤石</span>
<span class="text-xs text-gray-500">金石资源、永和股份</span>
</div>
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">氢氟酸</span>
<span class="text-xs text-gray-500">多家企业</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4">
<h3 class="font-semibold text-gray-800 mb-3">
<i class="fas fa-industry text-purple-600 mr-2"></i>中游
</h3>
<div class="space-y-2">
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">氟制冷剂</span>
<span class="text-xs text-gray-500">巨化、三美、东岳等</span>
</div>
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">配额集中度</span>
<span class="text-xs text-red-500">CR3 > 60%</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-blue-50 rounded-xl p-4">
<h3 class="font-semibold text-gray-800 mb-3">
<i class="fas fa-shopping-cart text-green-600 mr-2"></i>下游
</h3>
<div class="space-y-2">
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">空调</span>
<span class="text-xs text-gray-500">最大需求方</span>
</div>
<div class="flex items-center justify-between bg-white rounded-lg p-2">
<span class="text-sm">汽车/冷链</span>
<span class="text-xs text-gray-500">快速增长</span>
</div>
</div>
</div>
</div>
</div>
<!-- 股票数据表格 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-table text-indigo-500 mr-2"></i>核心公司配额分布
</h2>
<!-- R32空调制冷剂 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-700">
<i class="fas fa-snowflake text-blue-400 mr-2"></i>R32 空调制冷剂
</h3>
<div class="mobile-scroll">
<table class="stock-table w-full bg-white rounded-lg overflow-hidden">
<thead>
<tr>
<th class="px-4 py-3 text-left">公司</th>
<th class="px-4 py-3 text-left">2025年配额</th>
<th class="px-4 py-3 text-left">占比</th>
<th class="px-4 py-3 text-left">核心竞争力</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 font-semibold">巨化股份</td>
<td class="px-4 py-3">12.8万吨</td>
<td class="px-4 py-3 highlight-cell">45.8%</td>
<td class="px-4 py-3 text-sm">绝对龙头,定价权</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">东岳集团</td>
<td class="px-4 py-3">5.6万吨</td>
<td class="px-4 py-3">20.1%</td>
<td class="px-4 py-3 text-sm">第二大生产商</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">三美股份</td>
<td class="px-4 py-3">3.3万吨</td>
<td class="px-4 py-3">11.8%</td>
<td class="px-4 py-3 text-sm">盈利弹性强</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">东阳光</td>
<td class="px-4 py-3">-</td>
<td class="px-4 py-3">10.3%</td>
<td class="px-4 py-3 text-sm">稳定供应</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- R125氟制冷剂 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-700">
<i class="fas fa-snowflake text-purple-400 mr-2"></i>R125 混配制冷剂
</h3>
<div class="mobile-scroll">
<table class="stock-table w-full bg-white rounded-lg overflow-hidden">
<thead>
<tr>
<th class="px-4 py-3 text-left">公司</th>
<th class="px-4 py-3 text-left">2025年配额</th>
<th class="px-4 py-3 text-left">占比</th>
<th class="px-4 py-3 text-left">市场地位</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 font-semibold">巨化股份</td>
<td class="px-4 py-3">6.4万吨</td>
<td class="px-4 py-3 highlight-cell">38.4%</td>
<td class="px-4 py-3 text-sm">最大生产商</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">三美股份</td>
<td class="px-4 py-3">3.1万吨</td>
<td class="px-4 py-3">18.4%</td>
<td class="px-4 py-3 text-sm">成本优势</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">昊华科技</td>
<td class="px-4 py-3">2.9万吨</td>
<td class="px-4 py-3">17.4%</td>
<td class="px-4 py-3 text-sm">中化系整合</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- R134a汽车制冷剂 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-700">
<i class="fas fa-snowflake text-green-400 mr-2"></i>R134a 汽车制冷剂
</h3>
<div class="mobile-scroll">
<table class="stock-table w-full bg-white rounded-lg overflow-hidden">
<thead>
<tr>
<th class="px-4 py-3 text-left">公司</th>
<th class="px-4 py-3 text-left">2025年配额</th>
<th class="px-4 py-3 text-left">占比</th>
<th class="px-4 py-3 text-left">应用领域</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 font-semibold">昊华科技</td>
<td class="px-4 py-3">5.4万吨</td>
<td class="px-4 py-3 highlight-cell">26%</td>
<td class="px-4 py-3 text-sm">汽车空调主导</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">巨化股份</td>
<td class="px-4 py-3">7.7万吨</td>
<td class="px-4 py-3">36.7%</td>
<td class="px-4 py-3 text-sm">多元化应用</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">三美股份</td>
<td class="px-4 py-3">5万吨</td>
<td class="px-4 py-3">24%</td>
<td class="px-4 py-3 text-sm">汽车主力</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 萤石上游 -->
<div>
<h3 class="text-lg font-semibold mb-3 text-gray-700">
<i class="fas fa-gem text-orange-400 mr-2"></i>萤石上游资源
</h3>
<div class="mobile-scroll">
<table class="stock-table w-full bg-white rounded-lg overflow-hidden">
<thead>
<tr>
<th class="px-4 py-3 text-left">公司</th>
<th class="px-4 py-3 text-left">资源储备</th>
<th class="px-4 py-3 text-left">市场地位</th>
<th class="px-4 py-3 text-left">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 font-semibold">金石资源</td>
<td class="px-4 py-3">2700万吨</td>
<td class="px-4 py-3 highlight-cell">A股第一</td>
<td class="px-4 py-3 text-sm">卖铲人角色</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">永和股份</td>
<td class="px-4 py-3">485.27万吨</td>
<td class="px-4 py-3">A股第二</td>
<td class="px-4 py-3 text-sm">一体化布局</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 风险提示 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-4 text-gray-800">
<i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>潜在风险与挑战
</h2>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-red-50 border-l-4 border-red-400 p-4 rounded">
<h3 class="font-semibold text-gray-800 mb-2">
<i class="fas fa-microchip text-red-600 mr-2"></i>技术风险
</h3>
<p class="text-sm text-gray-600">四代制冷剂替代威胁当三代价格达9.6万元/吨时,替代进程将加速</p>
</div>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
<h3 class="font-semibold text-gray-800 mb-2">
<i class="fas fa-chart-line text-yellow-600 mr-2"></i>市场风险
</h3>
<p class="text-sm text-gray-600">下游需求不及预期:房地产低迷影响空调需求,汽车销量波动</p>
</div>
<div class="bg-orange-50 border-l-4 border-orange-400 p-4 rounded">
<h3 class="font-semibold text-gray-800 mb-2">
<i class="fas fa-balance-scale text-orange-600 mr-2"></i>政策风险
</h3>
<p class="text-sm text-gray-600">配额政策调整:提前或超额发放配额将打破供给刚性</p>
</div>
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded">
<h3 class="font-semibold text-gray-800 mb-2">
<i class="fas fa-globe text-blue-600 mr-2"></i>竞争风险
</h3>
<p class="text-sm text-gray-600">海外新兴产能:印度、中东等地区新建项目长期可能冲击出口</p>
</div>
</div>
</div>
<!-- 投资建议 -->
<div class="glass-effect rounded-2xl p-6">
<h2 class="text-2xl font-bold mb-4 text-gray-800">
<i class="fas fa-coins text-yellow-500 mr-2"></i>投资启示
</h2>
<div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-6">
<p class="text-lg font-semibold text-gray-800 mb-4">综合结论:</p>
<p class="text-gray-700 mb-4">氟制冷剂概念已完全脱离主题炒作,进入基本面业绩驱动的价值投资阶段。这是一个具备清晰长逻辑、高竞争壁垒和强劲盈利兑现能力的"硬资产"板块。</p>
<div class="grid md:grid-cols-2 gap-4 mt-6">
<div class="bg-white rounded-lg p-4">
<h3 class="font-semibold text-purple-600 mb-2">
<i class="fas fa-star mr-2"></i>核心配置
</h3>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 巨化股份R32绝对龙头配额占比45.8%</li>
<li>• 三美股份:盈利弹性强,业绩兑现能力突出</li>
<li>• 昊华科技中化系整合R134a优势明显</li>
</ul>
</div>
<div class="bg-white rounded-lg p-4">
<h3 class="font-semibold text-green-600 mb-2">
<i class="fas fa-chart-line mr-2"></i>关键跟踪指标
</h3>
<ul class="text-sm text-gray-600 space-y-1">
<li>• R32/R125/R134a周度价格</li>
<li>• 龙头公司季度毛利率和净利润</li>
<li>• 2026年配额削减方案</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="gradient-bg text-white py-8 mt-12">
<div class="container mx-auto max-w-7xl px-4 text-center">
<p class="text-sm opacity-80">© 2025 氟制冷剂行业分析 | 数据来源:公开信息整理</p>
<p class="text-xs opacity-60 mt-2">投资有风险,入市需谨慎</p>
</div>
</footer>
<script>
// 添加滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.industry-card, .timeline-item').forEach(el => {
observer.observe(el);
});
// 表格行点击效果
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('click', function() {
this.style.transform = 'scale(1.02)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 200);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,756 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>河南国资能源集团重组 - 深度分析报告</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'primary': '#3b82f6',
'secondary': '#8b5cf6',
'accent': '#ec4899',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body { font-family: 'Inter', sans-serif; }
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
.hover-scale {
transition: all 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-5px) scale(1.02);
}
.stock-card {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stock-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe);
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.stock-card:hover::before {
opacity: 1;
}
.stock-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.neon-border {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5),
inset 0 0 20px rgba(59, 130, 246, 0.1);
}
.chart-bar {
animation: growBar 1s ease-out forwards;
}
@keyframes growBar {
from { width: 0; }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900 min-h-screen text-white">
<!-- Hero Section -->
<div class="hero min-h-[60vh] bg-gradient-to-r from-purple-800 via-pink-800 to-red-800">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content p-8">
<div class="max-w-4xl">
<div class="badge badge-warning badge-lg mb-4">
<i class="fas fa-fire mr-2"></i>热点概念
</div>
<h1 class="mb-5 text-5xl md:text-7xl font-black gradient-text">
河南国资能源集团重组
</h1>
<p class="mb-5 text-xl md:text-2xl">
打造省级能源化工航母,重塑区域能源格局
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<div class="stat glass-effect rounded-lg p-4">
<div class="stat-title text-sm">重组规模</div>
<div class="stat-value text-2xl font-bold">6家上市公司</div>
</div>
<div class="stat glass-effect rounded-lg p-4">
<div class="stat-title text-sm">市场热度</div>
<div class="stat-value text-2xl font-bold text-orange-400">7天6板</div>
</div>
<div class="stat glass-effect rounded-lg p-4">
<div class="stat-title text-sm">核心逻辑</div>
<div class="stat-value text-2xl font-bold text-green-400">政策驱动</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Tabs -->
<div class="sticky top-0 z-40 glass-effect border-b border-white/10">
<div class="container mx-auto px-4">
<div class="tabs tabs-boxed bg-transparent p-2">
<a href="#overview" class="tab tab-md tab-active">核心概览</a>
<a href="#timeline" class="tab tab-md">时间轴</a>
<a href="#logic" class="tab tab-md">核心逻辑</a>
<a href="#stocks" class="tab tab-md">核心公司</a>
<a href="#risks" class="tab tab-md">风险分析</a>
<a href="#insight" class="tab tab-md">投资启示</a>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto px-4 py-8">
<!-- 核心概览 -->
<section id="overview" class="mb-12">
<h2 class="text-4xl font-bold mb-8 flex items-center">
<i class="fas fa-chart-line mr-4 text-yellow-400"></i>
核心概览
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
<i class="fas fa-rocket text-white"></i>
</div>
<h3 class="text-xl font-bold ml-4">催化事件</h3>
</div>
<p class="text-gray-300">
2025年9月25日河南省委省政府决定对河南能源集团与平煤神马集团实施战略重组打造能源化工航母
</p>
<div class="mt-4 text-sm text-yellow-400">
<i class="fas fa-clock mr-2"></i>事件热度:极高
</div>
</div>
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
<i class="fas fa-lightbulb text-white"></i>
</div>
<h3 class="text-xl font-bold ml-4">核心逻辑</h3>
</div>
<p class="text-gray-300">
政策驱动下的国企改革,通过强强联合实现规模效应与产业链协同,提升资产证券化价值
</p>
<div class="mt-4 text-sm text-green-400">
<i class="fas fa-arrow-up mr-2"></i>成长潜力:长期向好
</div>
</div>
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
<h3 class="text-xl font-bold ml-4">主要风险</h3>
</div>
<p class="text-gray-300">
股价已严重透支预期,执行风险高,市场认知与专业分析存在巨大信息鸿沟
</p>
<div class="mt-4 text-sm text-red-400">
<i class="fas fa-shield-alt mr-2"></i>风险等级:中高
</div>
</div>
</div>
</section>
<!-- 时间轴 -->
<section id="timeline" class="mb-12">
<h2 class="text-4xl font-bold mb-8 flex items-center">
<i class="fas fa-calendar-alt mr-4 text-blue-400"></i>
关键时间轴
</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-blue-500 to-purple-500"></div>
<div class="space-y-8">
<div class="flex items-center justify-end md:justify-start md:odd:justify-end">
<div class="glass-effect rounded-xl p-6 max-w-md hover-scale">
<div class="flex items-center mb-2">
<span class="timeline-dot w-3 h-3 bg-blue-500 rounded-full mr-3"></span>
<span class="text-sm text-gray-400">2025年7月29日</span>
</div>
<h4 class="font-bold text-lg mb-2">改革序幕拉开</h4>
<p class="text-gray-300 text-sm">
河南省政府新闻发布会透露将推动河南国际合作集团与自然资源集团整合,组建河南港航集团
</p>
</div>
</div>
<div class="flex items-center justify-start md:justify-start md:even:justify-start">
<div class="glass-effect rounded-xl p-6 max-w-md hover-scale">
<div class="flex items-center mb-2">
<span class="timeline-dot w-3 h-3 bg-purple-500 rounded-full mr-3"></span>
<span class="text-sm text-gray-400">2025年8月12日</span>
</div>
<h4 class="font-bold text-lg mb-2">国际集团成立</h4>
<p class="text-gray-300 text-sm">
中国河南国际集团重组成立注册资本120亿元定位为对外开放合作窗口
</p>
</div>
</div>
<div class="flex items-center justify-end md:justify-start md:odd:justify-end">
<div class="glass-effect rounded-xl p-6 max-w-md hover-scale neon-border">
<div class="flex items-center mb-2">
<span class="timeline-dot w-3 h-3 bg-red-500 rounded-full mr-3"></span>
<span class="text-sm text-gray-400">2025年9月25日</span>
</div>
<h4 class="font-bold text-lg mb-2 text-red-400">核心催化</h4>
<p class="text-gray-300 text-sm">
河南省委省政府正式决定对河南能源集团与平煤神马集团实施战略重组
</p>
<div class="mt-2">
<span class="badge badge-error">股价暴涨</span>
</div>
</div>
</div>
<div class="flex items-center justify-start md:justify-start md:even:justify-start">
<div class="glass-effect rounded-xl p-6 max-w-md hover-scale">
<div class="flex items-center mb-2">
<span class="timeline-dot w-3 h-3 bg-green-500 rounded-full mr-3"></span>
<span class="text-sm text-gray-400">2025年9月28日</span>
</div>
<h4 class="font-bold text-lg mb-2">实质推进</h4>
<p class="text-gray-300 text-sm">
审议通过战略重组工作计划,落实"三个承诺"保障职工权益
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑 -->
<section id="logic" class="mb-12">
<h2 class="text-4xl font-bold mb-8 flex items-center">
<i class="fas fa-brain mr-4 text-purple-400"></i>
核心逻辑分析
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="glass-effect rounded-2xl p-6">
<h3 class="text-2xl font-bold mb-4 text-blue-400">
<i class="fas fa-flag mr-2"></i>政策驱动
</h3>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<p>国家"国企改革深化提升行动"的地方实践</p>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<p>河南省政府明确要求城投公司向产业投资公司转型</p>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<p>四川、重庆、宁夏等地同步推进,形成全国性改革浪潮</p>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-6">
<h3 class="text-2xl font-bold mb-4 text-green-400">
<i class="fas fa-chart-pie mr-2"></i>规模效应
</h3>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<p>重组后拥有6家上市公司资产规模大幅提升</p>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<p>避免同业竞争,统一采购销售渠道</p>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<p>降低运营成本,提升整体盈利能力</p>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 md:col-span-2">
<h3 class="text-2xl font-bold mb-4 text-yellow-400">
<i class="fas fa-link mr-2"></i>产业链协同
</h3>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-lg p-4">
<h4 class="font-bold mb-2">上游:煤炭开采</h4>
<p class="text-sm text-gray-300">平煤股份、大有能源提供稳定现金流和原料基础</p>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-lg p-4">
<h4 class="font-bold mb-2">中游:基础化工</h4>
<p class="text-sm text-gray-300">煤炭加工与气化,生产基础化工原料</p>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-lg p-4">
<h4 class="font-bold mb-2">下游:新材料</h4>
<p class="text-sm text-gray-300">神马股份、硅烷科技向高附加值领域延伸</p>
</div>
</div>
</div>
</div>
<!-- 市场热度分析 -->
<div class="mt-8 glass-effect rounded-2xl p-6">
<h3 class="text-2xl font-bold mb-4 text-orange-400">
<i class="fas fa-fire mr-2"></i>市场热度分析
</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-bold mb-3">股价表现</h4>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span>大有能源</span>
<div class="flex items-center">
<div class="w-32 bg-gray-700 rounded-full h-2 mr-2">
<div class="bg-red-500 h-2 rounded-full chart-bar" style="width: 95%"></div>
</div>
<span class="text-red-400 font-bold">7天6板</span>
</div>
</div>
<div class="flex justify-between items-center">
<span>神马股份</span>
<div class="flex items-center">
<div class="w-32 bg-gray-700 rounded-full h-2 mr-2">
<div class="bg-orange-500 h-2 rounded-full chart-bar" style="width: 100%"></div>
</div>
<span class="text-orange-400 font-bold">涨停</span>
</div>
</div>
<div class="flex justify-between items-center">
<span>易成新能</span>
<div class="flex items-center">
<div class="w-32 bg-gray-700 rounded-full h-2 mr-2">
<div class="bg-orange-500 h-2 rounded-full chart-bar" style="width: 100%"></div>
</div>
<span class="text-orange-400 font-bold">涨停</span>
</div>
</div>
</div>
</div>
<div>
<h4 class="font-bold mb-3">预期差警示</h4>
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle mr-2"></i>
<div>
<p class="font-bold">市场vs研究</p>
<p class="text-sm">路演数据"静默"表明专业分析界仍在观望,与市场狂热形成鲜明对比</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心公司表格 -->
<section id="stocks" class="mb-12">
<h2 class="text-4xl font-bold mb-8 flex items-center">
<i class="fas fa-building mr-4 text-green-400"></i>
核心上市公司
</h2>
<div class="overflow-x-auto">
<table class="table w-full glass-effect rounded-2xl overflow-hidden">
<thead>
<tr class="bg-gradient-to-r from-blue-600 to-purple-600">
<th class="text-white">股票名称</th>
<th class="text-white">所属集团</th>
<th class="text-white">行业</th>
<th class="text-white">核心业务</th>
<th class="text-white">竞争优势</th>
<th class="text-white">重组逻辑</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-white/10 transition-colors">
<td class="font-bold text-red-400">大有能源</td>
<td><span class="badge badge-info">河南能源</span></td>
<td>煤炭</td>
<td>焦煤龙头</td>
<td>2024年商品煤产量968万吨</td>
<td>资产整合预期强烈,市场弹性最大</td>
</tr>
<tr class="hover:bg-white/10 transition-colors">
<td class="font-bold">平煤股份</td>
<td><span class="badge badge-info">平煤神马</span></td>
<td>煤炭</td>
<td>原煤/精煤生产</td>
<td>2024年原煤产量2753万吨全国第一</td>
<td>产业链基石,提供稳定现金流</td>
</tr>
<tr class="hover:bg-white/10 transition-colors">
<td class="font-bold">神马股份</td>
<td><span class="badge badge-info">平煤神马</span></td>
<td>化工</td>
<td>尼龙66</td>
<td>产能亚洲第一、世界第五</td>
<td>获得低成本原料,巩固龙头地位</td>
</tr>
<tr class="hover:bg-white/10 transition-colors">
<td class="font-bold">硅烷科技</td>
<td><span class="badge badge-info">平煤神马</span></td>
<td>化工</td>
<td>硅烷产品</td>
<td>市占率32.56%产能1500吨</td>
<td>"硬科技"属性,想象空间大</td>
</tr>
<tr class="hover:bg-white/10 transition-colors">
<td class="font-bold">易成新能</td>
<td><span class="badge badge-info">平煤神马</span></td>
<td>新能源</td>
<td>石墨电极</td>
<td>超高功率石墨电极打破国外垄断</td>
<td>转型预期,获得资源支持</td>
</tr>
</tbody>
</table>
</div>
<!-- 公司卡片展示 -->
<div class="grid md:grid-cols-3 gap-6 mt-8">
<div class="stock-card glass-effect rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold">大有能源</h3>
<span class="badge badge-error">高弹性</span>
</div>
<div class="text-sm space-y-2">
<div class="flex justify-between">
<span class="text-gray-400">行业</span>
<span>煤炭</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">产量</span>
<span>968万吨</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">近期表现</span>
<span class="text-red-400 font-bold">7天6板</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-700">
<p class="text-xs text-gray-400">河南地区焦煤龙头,市场关注度最高</p>
</div>
</div>
<div class="stock-card glass-effect rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold">神马股份</h3>
<span class="badge badge-success">龙头</span>
</div>
<div class="text-sm space-y-2">
<div class="flex justify-between">
<span class="text-gray-400">行业</span>
<span>化工</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">地位</span>
<span>亚洲第一</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">产品</span>
<span>尼龙66</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-700">
<p class="text-xs text-gray-400">产业链向高附加值延伸的典范</p>
</div>
</div>
<div class="stock-card glass-effect rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold">硅烷科技</h3>
<span class="badge badge-warning">硬科技</span>
</div>
<div class="text-sm space-y-2">
<div class="flex justify-between">
<span class="text-gray-400">行业</span>
<span>化工</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">市占率</span>
<span>32.56%</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">应用</span>
<span>半导体/光伏</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-700">
<p class="text-xs text-gray-400">符合新质生产力方向,成长空间大</p>
</div>
</div>
</div>
</section>
<!-- 风险分析 -->
<section id="risks" class="mb-12">
<h2 class="text-4xl font-bold mb-8 flex items-center">
<i class="fas fa-shield-alt mr-4 text-red-400"></i>
风险分析
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="glass-effect rounded-2xl p-6 border-l-4 border-red-500">
<h3 class="text-xl font-bold mb-4 text-red-400">
<i class="fas fa-exclamation-circle mr-2"></i>执行风险
</h3>
<p class="text-gray-300 mb-3">
两大集团整合涉及复杂的资产、业务、人事和文化融合,历史上国企重组并非一帆风顺
</p>
<div class="bg-red-900/30 rounded-lg p-3">
<p class="text-sm">
<i class="fas fa-info-circle mr-2"></i>
"三个承诺"虽维稳,但可能牺牲效率,导致"大而不强"
</p>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 border-l-4 border-orange-500">
<h3 class="text-xl font-bold mb-4 text-orange-400">
<i class="fas fa-chart-line mr-2"></i>估值风险
</h3>
<p class="text-gray-300 mb-3">
以大有能源为代表的龙头股短期涨幅巨大,股价已严重透支未来多年的重组预期
</p>
<div class="bg-orange-900/30 rounded-lg p-3">
<p class="text-sm">
<i class="fas fa-info-circle mr-2"></i>
一旦重组进展不及预期,股价将面临巨大回调压力
</p>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 border-l-4 border-yellow-500">
<h3 class="text-xl font-bold mb-4 text-yellow-400">
<i class="fas fa-chart-bar mr-2"></i>行业风险
</h3>
<p class="text-gray-300 mb-3">
煤炭、化工行业产能过剩问题依然存在,行业竞争格局并未因重组而立即改变
</p>
<div class="bg-yellow-900/30 rounded-lg p-3">
<p class="text-sm">
<i class="fas fa-info-circle mr-2"></i>
产品价格周期性波动对公司盈利影响较大
</p>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 border-l-4 border-purple-500">
<h3 class="text-xl font-bold mb-4 text-purple-400">
<i class="fas fa-info mr-2"></i>信息不对称
</h3>
<p class="text-gray-300 mb-3">
新闻舆情与专业路演之间存在巨大信息鸿沟,市场认知可能存在偏差
</p>
<div class="bg-purple-900/30 rounded-lg p-3">
<p class="text-sm">
<i class="fas fa-info-circle mr-2"></i>
市场的狂热与研究的冷静形成鲜明对比
</p>
</div>
</div>
</div>
</section>
<!-- 投资启示 -->
<section id="insight" class="mb-12">
<h2 class="text-4xl font-bold mb-8 flex items-center">
<i class="fas fa-lightbulb mr-4 text-yellow-400"></i>
投资启示
</h2>
<div class="glass-effect rounded-2xl p-8">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-bold mb-4 text-green-400">
<i class="fas fa-eye mr-2"></i>短期策略
</h3>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-times-circle text-red-400 mt-1 mr-3"></i>
<p>不建议追高,当前估值已严重透支</p>
</div>
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-yellow-400 mt-1 mr-3"></i>
<p>适合短线交易者,风险极高</p>
</div>
<div class="flex items-start">
<i class="fas fa-pause-circle text-blue-400 mt-1 mr-3"></i>
<p>等待市场情绪降温,保持观望</p>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold mb-4 text-blue-400">
<i class="fas fa-rocket mr-2"></i>长期布局
</h3>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<p>关注产业链整合逻辑纯粹的公司</p>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<p>神马股份、硅烷科技代表转型方向</p>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<p>平煤股份等低估值龙头存在机会</p>
</div>
</div>
</div>
</div>
<div class="mt-8 p-6 bg-gradient-to-r from-blue-900/50 to-purple-900/50 rounded-xl">
<h4 class="text-xl font-bold mb-4 text-center">
<i class="fas fa-search mr-2"></i>关键跟踪指标
</h4>
<div class="grid md:grid-cols-4 gap-4 text-center">
<div class="bg-black/30 rounded-lg p-3">
<i class="fas fa-file-alt text-2xl mb-2 text-blue-400"></i>
<p class="text-sm font-bold">重组方案细节</p>
</div>
<div class="bg-black/30 rounded-lg p-3">
<i class="fas fa-handshake text-2xl mb-2 text-green-400"></i>
<p class="text-sm font-bold">协同效应量化</p>
</div>
<div class="bg-black/30 rounded-lg p-3">
<i class="fas fa-chart-line text-2xl mb-2 text-yellow-400"></i>
<p class="text-sm font-bold">新集团财务数据</p>
</div>
<div class="bg-black/30 rounded-lg p-3">
<i class="fas fa-users text-2xl mb-2 text-purple-400"></i>
<p class="text-sm font-bold">高层人事变动</p>
</div>
</div>
</div>
<div class="mt-6 text-center">
<p class="text-lg italic text-gray-300">
"让市场的狂热情绪先过去,待重组路径清晰、价值脉络浮现后,<br>
真正的投资者才能找到属于自己的机会。"
</p>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer class="glass-effect border-t border-white/10 mt-12 py-8">
<div class="container mx-auto px-4 text-center">
<p class="text-gray-400">
<i class="fas fa-chart-line mr-2"></i>
河南国资能源集团重组概念深度分析 | 数据更新时间2025年10月
</p>
<p class="text-sm text-gray-500 mt-2">
投资有风险,入市需谨慎 | 本分析仅供参考,不构成投资建议
</p>
</div>
</footer>
<script>
// Tab switching functionality
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('tab-active'));
this.classList.add('tab-active');
const targetId = this.getAttribute('href').substring(1);
const targetSection = document.getElementById(targetId);
if (targetSection) {
targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Intersection Observer for animations
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 = '0';
entry.target.style.transform = 'translateY(20px)';
setTimeout(() => {
entry.target.style.transition = 'all 0.6s ease';
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, 100);
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
// Scroll progress indicator
window.addEventListener('scroll', () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
if (!document.getElementById('progressBar')) {
const progressBar = document.createElement('div');
progressBar.id = 'progressBar';
progressBar.style.cssText = 'position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); z-index: 9999; transition: width 0.3s;';
document.body.appendChild(progressBar);
}
document.getElementById('progressBar').style.width = scrolled + '%';
});
</script>
</body>
</html>

755
public/htmls/流感.html Normal file
View File

@@ -0,0 +1,755 @@
<!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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<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;
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-morphism {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.hover-scale {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-scale:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.timeline-dot {
position: relative;
}
.timeline-dot::after {
content: '';
position: absolute;
width: 2px;
background: #e5e7eb;
top: 24px;
left: 50%;
transform: translateX(-50%);
height: calc(100% - 24px);
}
.timeline-item:last-child .timeline-dot::after {
display: none;
}
.stock-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
.stock-table-container {
overflow: visible;
}
}
.fade-in {
animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
}
.tab-active {
border-bottom: 3px solid #6366f1;
color: #6366f1;
}
.risk-card {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}
.opportunity-card {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<div class="hero-gradient text-white py-20 px-6 relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-20"></div>
<div class="container mx-auto relative z-10">
<div class="text-center fade-in">
<div class="inline-flex items-center gap-2 bg-white/20 px-4 py-2 rounded-full mb-6">
<span class="pulse-dot inline-block w-2 h-2 bg-red-400 rounded-full"></span>
<span class="text-sm font-semibold">全球流感季异常活跃</span>
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6">流感概念深度分析</h1>
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto">从全球疫情蔓延到创新药商业化爆发,产业链投资机会全景透视</p>
<div class="flex flex-wrap justify-center gap-4 text-sm">
<div class="glass-morphism text-gray-800 px-6 py-3 rounded-lg">
<i class="fas fa-virus mr-2"></i> H3N2变异株主导
</div>
<div class="glass-morphism text-gray-800 px-6 py-3 rounded-lg">
<i class="fas fa-chart-line mr-2"></i> 季节提前5周
</div>
<div class="glass-morphism text-gray-800 px-6 py-3 rounded-lg">
<i class="fas fa-pills mr-2"></i> 新药商业化窗口
</div>
</div>
</div>
</div>
</div>
<!-- Key Metrics -->
<div class="container mx-auto px-6 -mt-10 relative z-20">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-4">
<div class="bg-indigo-100 p-3 rounded-lg">
<i class="fas fa-globe text-indigo-600 text-xl"></i>
</div>
<span class="text-xs text-gray-500 font-semibold">+127%</span>
</div>
<h3 class="text-2xl font-bold text-gray-800">全球爆发</h3>
<p class="text-gray-600 mt-1">日本/美国/澳门全面进入高峰期</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-4">
<div class="bg-red-100 p-3 rounded-lg">
<i class="fas fa-virus text-red-600 text-xl"></i>
</div>
<span class="text-xs text-red-500 font-semibold">H3N2</span>
</div>
<h3 class="text-2xl font-bold text-gray-800">毒株变异</h3>
<p class="text-gray-600 mt-1">较H1N1症状更重持续时间更长</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-4">
<div class="bg-green-100 p-3 rounded-lg">
<i class="fas fa-flask text-green-600 text-xl"></i>
</div>
<span class="text-xs text-gray-500 font-semibold">创新药</span>
</div>
<h3 class="text-2xl font-bold text-gray-800">3+新药</h3>
<p class="text-gray-600 mt-1">RNA聚合酶抑制剂/PA抑制剂上市</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-4">
<div class="bg-yellow-100 p-3 rounded-lg">
<i class="fas fa-chart-bar text-yellow-600 text-xl"></i>
</div>
<span class="text-xs text-gray-500 font-semibold">50亿+</span>
</div>
<h3 class="text-2xl font-bold text-gray-800">市场空间</h3>
<p class="text-gray-600 mt-1">国内抗流感用药市场规模</p>
</div>
</div>
</div>
<!-- Tab Navigation -->
<div class="container mx-auto px-6 mb-8">
<div class="flex flex-wrap gap-2 justify-center md:justify-start" role="tablist">
<button onclick="switchTab('overview')" class="tab-btn tab-active px-6 py-3 font-semibold transition-all" role="tab" data-tab="overview">
核心洞察
</button>
<button onclick="switchTab('timeline')" class="tab-btn px-6 py-3 font-semibold text-gray-600 hover:text-gray-900 transition-all" role="tab" data-tab="timeline">
事件脉络
</button>
<button onclick="switchTab('chain')" class="tab-btn px-6 py-3 font-semibold text-gray-600 hover:text-gray-900 transition-all" role="tab" data-tab="chain">
产业链图谱
</button>
<button onclick="switchTab('stocks')" class="tab-btn px-6 py-3 font-semibold text-gray-600 hover:text-gray-900 transition-all" role="tab" data-tab="stocks">
核心标的
</button>
<button onclick="switchTab('risk')" class="tab-btn px-6 py-3 font-semibold text-gray-600 hover:text-gray-900 transition-all" role="tab" data-tab="risk">
风险提示
</button>
</div>
</div>
<!-- Tab Content -->
<div class="container mx-auto px-6 pb-20">
<!-- Overview Tab -->
<div id="overview" class="tab-content fade-in">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-lightbulb text-yellow-500 mr-3"></i>核心驱动力
</h3>
<div class="space-y-4">
<div class="flex items-start gap-3">
<span class="bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 font-bold text-sm">1</span>
<div>
<h4 class="font-semibold text-gray-800">需求超预期爆发</h4>
<p class="text-gray-600 text-sm mt-1">流感季提前5周+H3N2变异株导致症状更重门急诊阳性率跃居第一</p>
</div>
</div>
<div class="flex items-start gap-3">
<span class="bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 font-bold text-sm">2</span>
<div>
<h4 class="font-semibold text-gray-800">供给技术迭代</h4>
<p class="text-gray-600 text-sm mt-1">RNA聚合酶抑制剂/PA抑制剂替代传统神经氨酸酶抑制剂</p>
</div>
</div>
<div class="flex items-start gap-3">
<span class="bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 font-bold text-sm">3</span>
<div>
<h4 class="font-semibold text-gray-800">政策+流感双催化</h4>
<p class="text-gray-600 text-sm mt-1">中药创新支持+流感需求共振,板块估值修复</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-chart-line text-green-500 mr-3"></i>市场预期差
</h3>
<div class="space-y-4">
<div class="border-l-4 border-red-500 pl-4">
<h4 class="font-semibold text-gray-800">检测价值被低估</h4>
<p class="text-gray-600 text-sm mt-1">联检产品(流感+新冠+RSV在多病原体共存背景下需求激增</p>
</div>
<div class="border-l-4 border-yellow-500 pl-4">
<h4 class="font-semibold text-gray-800">商业化进度过乐观</h4>
<p class="text-gray-600 text-sm mt-1">新药从NDA到放量需1-2年医保谈判价格存在不确定性</p>
</div>
<div class="border-l-4 border-blue-500 pl-4">
<h4 class="font-semibold text-gray-800">中药逻辑定性模糊</h4>
<p class="text-gray-600 text-sm mt-1">中药主要缓解症状,与特效药逻辑存在本质差异</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-lg p-8 text-white">
<h3 class="text-2xl font-bold mb-6">投资启示</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white/20 rounded-lg p-4">
<i class="fas fa-trophy text-3xl mb-3"></i>
<h4 class="font-bold text-lg mb-2">首选创新药</h4>
<p class="text-sm opacity-90">众生药业(昂拉地韦)作为RNA聚合酶抑制剂龙头商业化进度是关键跟踪指标</p>
</div>
<div class="bg-white/20 rounded-lg p-4">
<i class="fas fa-microscope text-3xl mb-3"></i>
<h4 class="font-bold text-lg mb-2">次选检测服务</h4>
<p class="text-sm opacity-90">英诺特联检产品壁垒高2023年一季度增长超200%</p>
</div>
<div class="bg-white/20 rounded-lg p-4">
<i class="fas fa-pills text-3xl mb-3"></i>
<h4 class="font-bold text-lg mb-2">弹性标的</h4>
<p class="text-sm opacity-90">华润三九、济川药业等OTC企业享阶段性业绩增厚</p>
</div>
</div>
</div>
</div>
<!-- Timeline Tab -->
<div id="timeline" class="tab-content hidden fade-in">
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-2xl font-bold mb-8 text-gray-800">
<i class="fas fa-history text-blue-500 mr-3"></i>疫情发展脉络
</h3>
<div class="space-y-8">
<div class="timeline-item flex items-start gap-6">
<div class="timeline-dot bg-red-100 rounded-full p-3 flex-shrink-0">
<i class="fas fa-exclamation-triangle text-red-600"></i>
</div>
<div class="flex-1">
<div class="flex items-center gap-3 mb-2">
<span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-semibold">2025年10月</span>
<h4 class="font-bold text-lg">海外预警爆发</h4>
</div>
<p class="text-gray-600 mb-3">日本流感季比去年提前5周爆发H3N2变异株引发跨国传播危机</p>
<div class="bg-gray-50 rounded-lg p-4">
<p class="text-sm text-gray-700"><strong>市场反应:</strong>10月21日抗流感概念异动拉升特一药业直线涨停</p>
</div>
</div>
</div>
<div class="timeline-item flex items-start gap-6">
<div class="timeline-dot bg-orange-100 rounded-full p-3 flex-shrink-0">
<i class="fas fa-chart-line text-orange-600"></i>
</div>
<div class="flex-1">
<div class="flex items-center gap-3 mb-2">
<span class="bg-orange-100 text-orange-700 px-3 py-1 rounded-full text-sm font-semibold">2025年11月</span>
<h4 class="font-bold text-lg">国内全面蔓延</h4>
</div>
<p class="text-gray-600 mb-3">我国绝大多数省份进入流感流行期,病毒阳性率首次跃居第一</p>
<div class="bg-gray-50 rounded-lg p-4">
<p class="text-sm text-gray-700"><strong>产业响应:</strong>奥司他韦药企启动7*24小时不间断生产</p>
</div>
</div>
</div>
<div class="timeline-item flex items-start gap-6">
<div class="timeline-dot bg-purple-100 rounded-full p-3 flex-shrink-0">
<i class="fas fa-globe-asia text-purple-600"></i>
</div>
<div class="flex-1">
<div class="flex items-center gap-3 mb-2">
<span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-semibold">2025年1-2月</span>
<h4 class="font-bold text-lg">全球共振高峰</h4>
</div>
<p class="text-gray-600 mb-3">澳门进入流感高峰期美国感染水平达2009年以来最高</p>
<div class="bg-gray-50 rounded-lg p-4">
<p class="text-sm text-gray-700"><strong>数据验证:</strong>美国累计死亡病例超1.3万45个州处于"高"或"非常高"水平</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Industry Chain Tab -->
<div id="chain" class="tab-content hidden fade-in">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl p-6">
<div class="flex items-center gap-3 mb-4">
<div class="bg-blue-500 text-white rounded-lg p-3">
<i class="fas fa-flask text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">上游原料药</h3>
</div>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center gap-2">
<i class="fas fa-check-circle text-blue-500"></i>
博瑞医药(奥司他韦)
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check-circle text-blue-500"></i>
精华制药(玛巴洛沙韦)
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check-circle text-blue-500"></i>
普洛药业(抗病毒API)
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl p-6">
<div class="flex items-center gap-3 mb-4">
<div class="bg-green-500 text-white rounded-lg p-3">
<i class="fas fa-pills text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">中游药品制造</h3>
</div>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center gap-2">
<i class="fas fa-star text-yellow-500"></i>
<strong>创新药:</strong>众生药业、济川药业
</li>
<li class="flex items-center gap-2">
<i class="fas fa-star text-yellow-500"></i>
<strong>疫苗:</strong>华兰疫苗、百克生物
</li>
<li class="flex items-center gap-2">
<i class="fas fa-star text-yellow-500"></i>
<strong>中药:</strong>华润三九、以岭药业
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-purple-50 to-pink-100 rounded-xl p-6">
<div class="flex items-center gap-3 mb-4">
<div class="bg-purple-500 text-white rounded-lg p-3">
<i class="fas fa-microscope text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">检测与流通</h3>
</div>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center gap-2">
<i class="fas fa-vial text-purple-500"></i>
英诺特(联检产品)
</li>
<li class="flex items-center gap-2">
<i class="fas fa-vial text-purple-500"></i>
博拓生物(抗原检测)
</li>
<li class="flex items-center gap-2">
<i class="fas fa-store text-purple-500"></i>
零售药店/医院终端
</li>
</ul>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-2xl font-bold mb-6 text-gray-800">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b-2 border-gray-200">
<th class="text-left py-3 px-4 font-semibold text-gray-700">公司</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">核心产品</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">核心优势</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">潜在风险</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<span class="bg-red-100 text-red-700 px-2 py-1 rounded text-xs font-bold">领导者</span>
众生药业
</div>
</td>
<td class="py-3 px-4">昂拉地韦( RNA聚合酶抑制剂)</td>
<td class="py-3 px-4">国内首个III期数据优商业化准备充分</td>
<td class="py-3 px-4">商业化进度不及预期,医保降价压力</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs font-bold">追赶者</span>
健康元
</div>
</td>
<td class="py-3 px-4">玛巴洛沙韦仿制药</td>
<td class="py-3 px-4">依托丽珠销售网络,市场教育成本低</td>
<td class="py-3 px-4">III期数据待验证上市时间落后</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-bold">卖铲人</span>
英诺特
</div>
</td>
<td class="py-3 px-4">流感+新冠+RSV联检</td>
<td class="py-3 px-4">联检产品壁垒高2023Q1增长超200%</td>
<td class="py-3 px-4">业务季节性强,竞争格局变化</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Stocks Tab -->
<div id="stocks" class="tab-content hidden fade-in">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-6">
<h3 class="text-2xl font-bold">核心股票池</h3>
<p class="mt-2 opacity-90">产业链核心标的全面覆盖</p>
</div>
<div class="stock-table-container">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="text-left py-3 px-4 font-semibold text-gray-700 sticky left-0 bg-gray-50">股票名称</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">分类</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">核心项目</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">产业链环节</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-indigo-50 transition-colors">
<td class="py-3 px-4 font-medium sticky left-0 bg-white">
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
百克生物
</div>
</td>
<td class="py-3 px-4">疫苗</td>
<td class="py-3 px-4">流感疫苗</td>
<td class="py-3 px-4">疫苗研发生产</td>
<td class="py-3 px-4 text-sm">国内独家经鼻喷方式接种的流感减毒活疫苗</td>
</tr>
<tr class="border-b hover:bg-indigo-50 transition-colors">
<td class="py-3 px-4 font-medium sticky left-0 bg-white">
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
华兰疫苗
</div>
</td>
<td class="py-3 px-4">疫苗</td>
<td class="py-3 px-4">四价流感疫苗</td>
<td class="py-3 px-4">疫苗研发生产</td>
<td class="py-3 px-4 text-sm">具备年产1亿剂四价流感疫苗产能批签发数量居国内前列</td>
</tr>
<tr class="border-b hover:bg-indigo-50 transition-colors">
<td class="py-3 px-4 font-medium sticky left-0 bg-white">
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-red-500 rounded-full"></span>
众生药业
</div>
</td>
<td class="py-3 px-4">抗病毒化学药</td>
<td class="py-3 px-4">昂拉地韦</td>
<td class="py-3 px-4">抗病毒药物研发</td>
<td class="py-3 px-4 text-sm">国内首个RNA聚合酶抑制剂III期临床数据优异商业化在即</td>
</tr>
<tr class="border-b hover:bg-indigo-50 transition-colors">
<td class="py-3 px-4 font-medium sticky left-0 bg-white">
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-red-500 rounded-full"></span>
济川药业
</div>
</td>
<td class="py-3 px-4">1类创新药</td>
<td class="py-3 px-4">济川舒清</td>
<td class="py-3 px-4">创新药研发</td>
<td class="py-3 px-4 text-sm">2025年7月玛硒洛沙韦获批上市抢占新一代抗流感市场</td>
</tr>
<tr class="border-b hover:bg-indigo-50 transition-colors">
<td class="py-3 px-4 font-medium sticky left-0 bg-white">
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
英诺特
</div>
</td>
<td class="py-3 px-4">体外诊断</td>
<td class="py-3 px-4">联检产品</td>
<td class="py-3 px-4">诊断试剂</td>
<td class="py-3 px-4 text-sm">流感+新冠+RSV联检产品需求激增2023Q1增长超200%</td>
</tr>
<tr class="border-b hover:bg-indigo-50 transition-colors">
<td class="py-3 px-4 font-medium sticky left-0 bg-white">
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
华润三九
</div>
</td>
<td class="py-3 px-4">中成药抗病毒</td>
<td class="py-3 px-4">感冒灵颗粒</td>
<td class="py-3 px-4">中成药生产</td>
<td class="py-3 px-4 text-sm">2025年感冒类中成药零售市场占有率约28%</td>
</tr>
<tr class="border-b hover:bg-indigo-50 transition-colors">
<td class="py-3 px-4 font-medium sticky left-0 bg-white">
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
金石亚药
</div>
</td>
<td class="py-3 px-4">抗病毒化学药</td>
<td class="py-3 px-4">快克</td>
<td class="py-3 px-4">抗病毒药物生产</td>
<td class="py-3 px-4 text-sm">国内感冒药一线品牌,磷酸奥司他韦胶囊研发中</td>
</tr>
<tr class="border-b hover:bg-indigo-50 transition-colors">
<td class="py-3 px-4 font-medium sticky left-0 bg-white">
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-blue-500 rounded-full"></span>
博瑞医药
</div>
</td>
<td class="py-3 px-4">抗病毒化学药</td>
<td class="py-3 px-4">奥司他韦</td>
<td class="py-3 px-4">抗病毒药物生产</td>
<td class="py-3 px-4 text-sm">奥司他韦原料药和制剂研发,受益于需求增长</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
<div class="opportunity-card rounded-xl p-6">
<h3 class="text-xl font-bold mb-4 text-green-800">
<i class="fas fa-arrow-up mr-2"></i>催化剂追踪
</h3>
<ul class="space-y-2 text-green-700">
<li class="flex items-start gap-2">
<i class="fas fa-check-circle mt-1"></i>
<span>众生药业昂拉地韦NDA获批及医保谈判</span>
</li>
<li class="flex items-start gap-2">
<i class="fas fa-check-circle mt-1"></i>
<span>中国疾控中心每周流感监测数据</span>
</li>
<li class="flex items-start gap-2">
<i class="fas fa-check-circle mt-1"></i>
<span>相关公司季度业绩超预期</span>
</li>
</ul>
</div>
<div class="bg-gray-100 rounded-xl p-6">
<h3 class="text-xl font-bold mb-4 text-gray-800">
<i class="fas fa-chart-pie mr-2"></i>配置建议
</h3>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-gray-700">创新药龙头</span>
<div class="flex gap-1">
<div class="w-20 h-2 bg-red-500 rounded"></div>
<span class="text-sm text-gray-600 ml-2">60%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-700">检测服务商</span>
<div class="flex gap-1">
<div class="w-12 h-2 bg-blue-500 rounded"></div>
<span class="text-sm text-gray-600 ml-2">30%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-700">周期性标的</span>
<div class="flex gap-1">
<div class="w-3 h-2 bg-green-500 rounded"></div>
<span class="text-sm text-gray-600 ml-2">10%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Risk Tab -->
<div id="risk" class="tab-content hidden fade-in">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="risk-card rounded-xl p-6">
<h3 class="text-xl font-bold mb-4 text-red-800">
<i class="fas fa-exclamation-triangle mr-2"></i>核心风险
</h3>
<div class="space-y-4">
<div>
<h4 class="font-semibold text-red-700 mb-2">技术风险</h4>
<p class="text-sm text-red-600">新药上市后可能发现新的安全性问题,研发失败风险始终存在</p>
</div>
<div>
<h4 class="font-semibold text-red-700 mb-2">商业化风险</h4>
<p class="text-sm text-red-600">医保谈判降价压力大,医生处方习惯培养需要时间</p>
</div>
<div>
<h4 class="font-semibold text-red-700 mb-2">竞争风险</h4>
<p class="text-sm text-red-600">同一靶点众多追随者将导致未来价格战</p>
</div>
</div>
</div>
<div class="bg-yellow-50 rounded-xl p-6">
<h3 class="text-xl font-bold mb-4 text-yellow-800">
<i class="fas fa-clock mr-2"></i>关键验证节点
</h3>
<div class="space-y-3">
<div class="bg-white rounded-lg p-3">
<p class="text-sm font-semibold">2025年Q4</p>
<p class="text-xs text-gray-600">众生药业昂拉地韦NDA获批</p>
</div>
<div class="bg-white rounded-lg p-3">
<p class="text-sm font-semibold">2026年Q1</p>
<p class="text-xs text-gray-600">健康元玛巴洛沙韦III期数据读出</p>
</div>
<div class="bg-white rounded-lg p-3">
<p class="text-sm font-semibold">持续跟踪</p>
<p class="text-xs text-gray-600">疾控中心每周流感监测数据</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-gray-700 to-gray-900 rounded-xl p-8 text-white">
<h3 class="text-2xl font-bold mb-4">综合结论</h3>
<p class="mb-4">流感概念正处于从事件驱动向基本面驱动的关键过渡期,未来分化将取决于:</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white/20 rounded-lg p-4">
<i class="fas fa-microscope text-2xl mb-2"></i>
<h4 class="font-bold">创新药商业化成色</h4>
</div>
<div class="bg-white/20 rounded-lg p-4">
<i class="fas fa-chart-line text-2xl mb-2"></i>
<h4 class="font-bold">业绩兑现能力</h4>
</div>
<div class="bg-white/20 rounded-lg p-4">
<i class="fas fa-shield-alt text-2xl mb-2"></i>
<h4 class="font-bold">产业链壁垒深度</h4>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8 px-6 mt-20">
<div class="container mx-auto text-center">
<p class="text-gray-400">本分析基于公开信息整理,不构成投资建议</p>
<p class="text-sm text-gray-500 mt-2">数据来源新闻、路演、insight及股票数据 | 更新时间2025年11月</p>
</div>
</footer>
<script>
// Tab switching functionality
function switchTab(tabName) {
// Hide all content
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.add('hidden');
});
// Remove active class from all buttons
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('tab-active', 'text-indigo-600');
btn.classList.add('text-gray-600');
});
// Show selected content
document.getElementById(tabName).classList.remove('hidden');
// Add active class to clicked button
const activeBtn = document.querySelector(`[data-tab="${tabName}"]`);
activeBtn.classList.add('tab-active');
activeBtn.classList.remove('text-gray-600');
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Add fade-in animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.hover-scale').forEach(el => {
observer.observe(el);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,538 @@
<!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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-item {
position: relative;
padding-left: 40px;
padding-bottom: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 9px;
top: 24px;
bottom: -14px;
width: 2px;
background: linear-gradient(to bottom, #3b82f6, transparent);
}
.timeline-item:last-child::before {
display: none;
}
.timeline-dot {
position: absolute;
left: 0;
top: 8px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stock-row:hover {
background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%);
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
.industry-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transition: all 0.3s ease;
}
.industry-card:hover {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
.risk-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<div class="glass-effect sticky top-0 z-50 shadow-lg">
<div class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<i class="fas fa-ship text-3xl text-indigo-600"></i>
<div>
<h1 class="text-2xl font-bold gradient-text">海事反制概念</h1>
<p class="text-sm text-gray-600">深度金融分析与投资策略</p>
</div>
</div>
<div class="flex items-center space-x-2">
<span class="badge badge-info">更新时间: 2025.10.14</span>
<span class="badge badge-warning">政策落地期</span>
</div>
</div>
</div>
</div>
<!-- 主内容区 -->
<div class="container mx-auto px-4 py-8">
<!-- 核心观点卡片 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center float-animation">
<i class="fas fa-chart-line text-white"></i>
</div>
<h3 class="ml-4 text-lg font-semibold">投资评级</h3>
</div>
<p class="text-3xl font-bold text-indigo-600 mb-2">强烈推荐</p>
<p class="text-sm text-gray-600">政策驱动+基本面支撑,短期弹性大,长期逻辑坚实</p>
</div>
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center float-animation" style="animation-delay: 0.5s;">
<i class="fas fa-rocket text-white"></i>
</div>
<h3 class="ml-4 text-lg font-semibold">核心驱动力</h3>
</div>
<ul class="text-sm space-y-1">
<li><i class="fas fa-check-circle text-green-500 mr-2"></i>地缘政治博弈</li>
<li><i class="fas fa-check-circle text-green-500 mr-2"></i>贸易话语权争夺</li>
<li><i class="fas fa-check-circle text-green-500 mr-2"></i>产业竞争优势</li>
</ul>
</div>
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-full flex items-center justify-center float-animation" style="animation-delay: 1s;">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
<h3 class="ml-4 text-lg font-semibold">风险等级</h3>
</div>
<div class="flex items-center justify-between">
<p class="text-2xl font-bold text-orange-600">中高</p>
<div class="flex space-x-1">
<div class="w-8 h-2 bg-orange-500 rounded"></div>
<div class="w-8 h-2 bg-orange-500 rounded"></div>
<div class="w-8 h-2 bg-orange-500 rounded"></div>
<div class="w-8 h-2 bg-gray-300 rounded"></div>
</div>
</div>
<p class="text-sm text-gray-600 mt-2">需警惕政策反复与贸易下滑风险</p>
</div>
</div>
<!-- 时间线 -->
<div class="glass-effect rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-clock-rotate-left mr-3 text-indigo-600"></i>
关键事件演进
</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="glass-effect rounded-lg p-4">
<h4 class="font-semibold text-indigo-600">2023年起 - 长期背景</h4>
<p class="text-sm text-gray-600 mt-1">IMO与欧盟绿色减排法规构成"绿色壁垒",对中国构成长期挑战</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="glass-effect rounded-lg p-4">
<h4 class="font-semibold text-indigo-600">2024年4月 - 冲突发酵</h4>
<p class="text-sm text-gray-600 mt-1">美国正式启动针对中国造船、海事物流的301调查</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="glass-effect rounded-lg p-4">
<h4 class="font-semibold text-indigo-600">2025年4月 - 反制酝酿</h4>
<p class="text-sm text-gray-600 mt-1">中国决定对韩华海洋采取反制措施</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-red-500"></div>
<div class="glass-effect rounded-lg p-4 border-2 border-red-200">
<h4 class="font-semibold text-red-600">2025年10月14日 - 巅峰对峙</h4>
<p class="text-sm text-gray-600 mt-1">中美双方海事反制措施同步正式生效,进入实质性执行阶段</p>
</div>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="glass-effect rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-sitemap mr-3 text-indigo-600"></i>
产业链结构图谱
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="industry-card rounded-xl p-6 text-white">
<div class="text-center mb-4">
<i class="fas fa-industry text-4xl mb-2"></i>
<h3 class="text-xl font-bold">上游:装备制造</h3>
</div>
<div class="space-y-2">
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">造船</p>
<p class="text-sm">中国船舶、中船防务</p>
</div>
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">核心部件</p>
<p class="text-sm">亚星锚链、巨力索具</p>
</div>
</div>
</div>
<div class="industry-card rounded-xl p-6 text-white">
<div class="text-center mb-4">
<i class="fas fa-ship text-4xl mb-2"></i>
<h3 class="text-xl font-bold">中游:运输服务</h3>
</div>
<div class="space-y-2">
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">油轮运输</p>
<p class="text-sm">中远海能、招商轮船</p>
</div>
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">散货运输</p>
<p class="text-sm">宁波海运、海通发展</p>
</div>
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">集装箱运输</p>
<p class="text-sm">中远海控、中谷物流</p>
</div>
</div>
</div>
<div class="industry-card rounded-xl p-6 text-white">
<div class="text-center mb-4">
<i class="fas fa-anchor text-4xl mb-2"></i>
<h3 class="text-xl font-bold">下游:港口物流</h3>
</div>
<div class="space-y-2">
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">港口运营</p>
<p class="text-sm">上港集团、宁波港</p>
</div>
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">综合物流</p>
<p class="text-sm">中国外运</p>
</div>
</div>
</div>
</div>
</div>
<!-- 核心公司对比 -->
<div class="glass-effect rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-trophy mr-3 text-yellow-500"></i>
核心标的投资价值对比
</h2>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
<th class="rounded-tl-lg">公司名称</th>
<th>所属分类</th>
<th>核心逻辑</th>
<th>投资优势</th>
<th>潜在风险</th>
<th class="rounded-tr-lg">推荐评级</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-semibold text-indigo-600">招商轮船</td>
<td><span class="badge badge-info">航运</span></td>
<td class="text-sm">油/散/车综合运输龙头</td>
<td class="text-sm">逻辑最纯粹、弹性最大</td>
<td class="text-sm">业务多元化,受全球贸易影响</td>
<td><span class="badge badge-success">★★★★★</span></td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-semibold text-indigo-600">中远海能</td>
<td><span class="badge badge-info">航运</span></td>
<td class="text-sm">油运绝对龙头</td>
<td class="text-sm">业绩与运价高度相关</td>
<td class="text-sm">对原油贸易政策敏感</td>
<td><span class="badge badge-success">★★★★★</span></td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-semibold text-indigo-600">中国船舶</td>
<td><span class="badge badge-warning">造船</span></td>
<td class="text-sm">国内造船绝对龙头</td>
<td class="text-sm">长期逻辑最坚实</td>
<td class="text-sm">业绩释放周期长</td>
<td><span class="badge badge-warning">★★★★</span></td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-semibold text-indigo-600">宁波港</td>
<td><span class="badge">港口</span></td>
<td class="text-sm">重要港口运营商</td>
<td class="text-sm">受益于进出口活跃</td>
<td class="text-sm">受益逻辑间接</td>
<td><span class="badge">★★★</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 风险提示 -->
<div class="glass-effect rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-shield-halved mr-3 text-red-500"></i>
风险提示
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle"></i>
<div>
<h4 class="font-semibold">政策博弈风险</h4>
<p class="text-sm">中美达成妥协或美方采取更激烈报复</p>
</div>
</div>
<div class="alert alert-error">
<i class="fas fa-chart-line-down"></i>
<div>
<h4 class="font-semibold">商业化风险</h4>
<p class="text-sm">航运强周期,运价上涨持续性存疑</p>
</div>
</div>
<div class="alert alert-info">
<i class="fas fa-gavel"></i>
<div>
<h4 class="font-semibold">执行风险</h4>
<p class="text-sm">股权认定复杂,政策效果可能打折扣</p>
</div>
</div>
</div>
</div>
<!-- 完整股票列表 -->
<div class="glass-effect rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-list mr-3 text-green-500"></i>
概念成分股完整列表
</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr class="bg-gradient-to-r from-green-500 to-teal-600 text-white">
<th class="rounded-tl-lg">股票名称</th>
<th>分类</th>
<th>细分领域</th>
<th>投资逻辑</th>
<th class="rounded-tr-lg">热度评级</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- 动态生成股票数据 -->
</tbody>
</table>
</div>
</div>
</div>
<!-- 底部信息 -->
<footer class="glass-effect mt-12 py-6">
<div class="container mx-auto px-4 text-center">
<p class="text-sm text-gray-600">
<i class="fas fa-info-circle mr-2"></i>
本分析基于公开信息整理,仅供参考,不构成投资建议
</p>
<p class="text-xs text-gray-500 mt-2">
数据更新2025年10月14日 | 关键催化剂:中美海事反制措施同步生效
</p>
</div>
</footer>
<script>
// 股票数据
const stockData = [
{ name: '南京港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '宁波港', category: '港口', subcategory: '', logic: '港口运营', hotness: 4 },
{ name: '广州港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '盐田港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '珠海港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '连云港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '重庆港', category: '港口', subcategory: '', logic: '港口运营', hotness: 2 },
{ name: '唐山港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '青岛港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '日照港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '天津港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '锦州港', category: '港口', subcategory: '', logic: '港口运营', hotness: 2 },
{ name: '招商港口', category: '港口', subcategory: '', logic: '港口运营', hotness: 4 },
{ name: '秦港股份', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '北部湾港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '上港集团', category: '港口', subcategory: '', logic: '港口运营', hotness: 4 },
{ name: '中船防务', category: '造船', subcategory: '', logic: '船舶制造', hotness: 4 },
{ name: '中国船舶', category: '造船', subcategory: '', logic: '船舶制造', hotness: 5 },
{ name: '亚光科技', category: '造船', subcategory: '', logic: '船舶制造', hotness: 3 },
{ name: '江龙船艇', category: '造船', subcategory: '', logic: '船舶制造', hotness: 3 },
{ name: '天海防务', category: '造船', subcategory: '', logic: '船舶制造', hotness: 3 },
{ name: '巨力索具', category: '索具/锚链', subcategory: '', logic: '生产索具和锚链产品', hotness: 3 },
{ name: '亚星锚链', category: '索具/锚链', subcategory: '', logic: '生产索具和锚链产品', hotness: 4 },
{ name: '招商南油', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 4 },
{ name: '中远海能', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 5 },
{ name: '招商轮船', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 5 },
{ name: '兴通股份', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 3 },
{ name: '盛航股份', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 3 },
{ name: '盛航股份', category: '航运', subcategory: '化学品', logic: '化学品运输业务', hotness: 3 },
{ name: '兴通股份', category: '航运', subcategory: '化学品', logic: '化学品运输业务', hotness: 3 },
{ name: '招商南油', category: '航运', subcategory: '化学品', logic: '化学品运输业务', hotness: 4 },
{ name: '中远海能', category: '航运', subcategory: '化学品', logic: '化学品运输业务', hotness: 4 },
{ name: '宁波海运', category: '航运', subcategory: '煤炭', logic: '煤炭运输业务', hotness: 3 },
{ name: '招商轮船', category: '航运', subcategory: '汽车', logic: '汽车运输业务', hotness: 4 },
{ name: '中远海特', category: '航运', subcategory: '汽车', logic: '汽车运输业务', hotness: 3 },
{ name: '中谷物流', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 4 },
{ name: '安通控股', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 3 },
{ name: '中国外运', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 4 },
{ name: '宁波远洋', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 3 },
{ name: '中远海控', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 4 },
{ name: '海航科技', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 3 },
{ name: '中集集团', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 4 },
{ name: '中远海发', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 3 },
{ name: '海通发展', category: '航运', subcategory: '船舶租赁', logic: '船舶租赁业务', hotness: 3 },
{ name: '中远海能', category: '航运', subcategory: '船舶租赁', logic: '船舶租赁业务', hotness: 4 },
{ name: '国航远洋', category: '北交所', subcategory: '', logic: '北交所上市', hotness: 2 },
{ name: '华光源海', category: '北交所', subcategory: '', logic: '北交所上市', hotness: 2 }
];
// 生成股票表格
function generateStockTable() {
const tbody = document.getElementById('stockTableBody');
stockData.forEach((stock, index) => {
const row = document.createElement('tr');
row.className = 'stock-row transition-all duration-200';
// 生成热度星级
let hotnessStars = '';
for(let i = 0; i < 5; i++) {
if(i < stock.hotness) {
hotnessStars += '<i class="fas fa-star text-yellow-400"></i>';
} else {
hotnessStars += '<i class="far fa-star text-gray-300"></i>';
}
}
// 生成分类徽章
let categoryBadge = '';
if(stock.category === '港口') {
categoryBadge = '<span class="badge badge-info">港口</span>';
} else if(stock.category === '造船') {
categoryBadge = '<span class="badge badge-warning">造船</span>';
} else if(stock.category === '航运') {
categoryBadge = '<span class="badge badge-success">航运</span>';
} else if(stock.category === '索具/锚链') {
categoryBadge = '<span class="badge badge-secondary">索具/锚链</span>';
} else {
categoryBadge = '<span class="badge">北交所</span>';
}
row.innerHTML = `
<td class="font-semibold">${stock.name}</td>
<td>${categoryBadge}</td>
<td class="text-sm">${stock.subcategory || '-'}</td>
<td class="text-sm">${stock.logic}</td>
<td>${hotnessStars}</td>
`;
tbody.appendChild(row);
});
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
generateStockTable();
// 添加平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if(target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
// 添加滚动时的动画效果
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.hover-scale, .glass-effect').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);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,507 @@
<!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>
<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=Noto+Sans+SC:wght@300;400;500;700&display=swap');
* {
font-family: 'Noto Sans SC', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.table-scroll::-webkit-scrollbar {
height: 8px;
}
.table-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.table-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}
.risk-badge {
animation: blink 2s infinite;
}
@keyframes blink {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0.5; }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<header class="gradient-bg text-white py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="md:w-2/3 mb-8 md:mb-0">
<div class="flex items-center mb-4">
<i class="fas fa-landmark text-4xl mr-4"></i>
<h1 class="text-4xl md:text-5xl font-bold">海峡两岸福建</h1>
</div>
<p class="text-xl mb-6 text-purple-100">探索海峡两岸融合发展新路的投资机遇</p>
<div class="flex flex-wrap gap-4">
<span class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
<i class="fas fa-chart-line mr-2"></i>政策驱动
</span>
<span class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
<i class="fas fa-rocket mr-2"></i>示范区效应
</span>
<span class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
<i class="fas fa-handshake mr-2"></i>两岸融合
</span>
</div>
</div>
<div class="md:w-1/3 text-center">
<div class="bg-white/10 backdrop-blur rounded-2xl p-6">
<div class="text-5xl font-bold mb-2">21条</div>
<div class="text-lg">纲领性政策</div>
<div class="mt-4 text-sm opacity-80">2023年9月发布</div>
</div>
</div>
</div>
</div>
</header>
<!-- Core Concept -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<div class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-lightbulb text-yellow-500 mr-3"></i>核心概念洞察
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-700">概念阶段判断</h3>
<p class="text-gray-600 leading-relaxed">
"海峡两岸福建"概念正从<strong class="text-purple-600">纯粹的"主题炒作"阶段</strong>,迈向<strong class="text-purple-600">"政策驱动与基本面验证"并存的早期阶段</strong>。市场的关注点已从"有没有政策"转向"政策效果如何落地、哪些公司能兑现业绩"。
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-700">核心驱动力</h3>
<p class="text-gray-600 leading-relaxed">
根本逻辑是<strong class="text-purple-600">国家战略驱动的"示范区"效应</strong>。这是自上而下的政治经济战略部署,通过福建这一"试验田",探索两岸融合新路径,构建"第一家园"。
</p>
</div>
</div>
</div>
<!-- Timeline -->
<div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
<h2 class="text-3xl font-bold mb-8 text-gray-800">
<i class="fas fa-history text-blue-500 mr-3"></i>关键事件时间轴
</h2>
<div class="relative">
<div class="absolute left-8 top-0 bottom-0 w-0.5 timeline-line"></div>
<div class="space-y-8">
<div class="flex items-center fade-in">
<div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold pulse-dot z-10">
2023
</div>
<div class="ml-8 flex-1 bg-purple-50 rounded-lg p-4">
<div class="font-semibold text-purple-700">2023年9月</div>
<div class="text-gray-600">"21条"政策发布,确立顶层设计</div>
</div>
</div>
<div class="flex items-center fade-in">
<div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold pulse-dot z-10">
2024
</div>
<div class="ml-8 flex-1 bg-blue-50 rounded-lg p-4">
<div class="font-semibold text-blue-700">2024年10月29日</div>
<div class="text-gray-600">福建省发布17条惠台利民新措施引爆市场</div>
</div>
</div>
<div class="flex items-center fade-in">
<div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center text-white font-bold pulse-dot z-10">
2025
</div>
<div class="ml-8 flex-1 bg-green-50 rounded-lg p-4">
<div class="font-semibold text-green-700">2025年6月12日</div>
<div class="text-gray-600">央行、外汇局联合印发金融支持"12条措施"</div>
</div>
</div>
<div class="flex items-center fade-in">
<div class="w-16 h-16 bg-orange-600 rounded-full flex items-center justify-center text-white font-bold pulse-dot z-10">
未来
</div>
<div class="ml-8 flex-1 bg-orange-50 rounded-lg p-4">
<div class="font-semibold text-orange-700">2025年10月25日预期</div>
<div class="text-gray-600">纪念台湾光复80周年大会</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Industry Chain -->
<section class="py-16 px-4 bg-gray-100">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-center text-gray-800">
<i class="fas fa-network-wired text-indigo-500 mr-3"></i>产业链图谱
</h2>
<div class="grid md:grid-cols-3 gap-6 mb-12">
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-2xl font-bold text-indigo-600 mb-4">上游</div>
<div class="text-gray-600 mb-4">基建与资源</div>
<div class="space-y-2">
<div class="flex items-center">
<i class="fas fa-cube text-gray-400 mr-2"></i>
<span>建材(三钢闽光、福建水泥)</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-gray-400 mr-2"></i>
<span>能源电力(中闽能源、福能股份)</span>
</div>
<div class="flex items-center">
<i class="fas fa-building text-gray-400 mr-2"></i>
<span>土地开发(平潭发展)</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-2xl font-bold text-purple-600 mb-4">中游</div>
<div class="text-gray-600 mb-4">流通与服务</div>
<div class="space-y-2">
<div class="flex items-center">
<i class="fas fa-truck text-gray-400 mr-2"></i>
<span>交通物流(厦门象屿、厦门国贸)</span>
</div>
<div class="flex items-center">
<i class="fas fa-coins text-gray-400 mr-2"></i>
<span>金融服务(兴业证券、厦门银行)</span>
</div>
<div class="flex items-center">
<i class="fas fa-laptop-code text-gray-400 mr-2"></i>
<span>数字平台(海峡创新)</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-2xl font-bold text-green-600 mb-4">下游</div>
<div class="text-gray-600 mb-4">消费与制造</div>
<div class="space-y-2">
<div class="flex items-center">
<i class="fas fa-shopping-cart text-gray-400 mr-2"></i>
<span>本地消费(永辉超市)</span>
</div>
<div class="flex items-center">
<i class="fas fa-industry text-gray-400 mr-2"></i>
<span>优势制造(厦门钨业)</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-center text-gray-800">
<i class="fas fa-table text-green-500 mr-3"></i>核心概念股一览
</h2>
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="table-scroll overflow-x-auto">
<table class="w-full">
<thead class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<tr>
<th class="px-6 py-4 text-left">股票名称</th>
<th class="px-6 py-4 text-left">行业</th>
<th class="px-6 py-4 text-left">产业链</th>
<th class="px-6 py-4 text-left">投资逻辑</th>
<th class="px-6 py-4 text-center">标签</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold text-purple-700">平潭发展</td>
<td class="px-6 py-4">房地产</td>
<td class="px-6 py-4">土地开发</td>
<td class="px-6 py-4 text-sm text-gray-600">平潭唯一A股上市公司政策落地最前沿</td>
<td class="px-6 py-4 text-center">
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">纯粹性领导者</span>
</td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-6 py-4 font-semibold text-blue-700">中闽能源</td>
<td class="px-6 py-4">能源电力</td>
<td class="px-6 py-4">风电</td>
<td class="px-6 py-4 text-sm text-gray-600">福建省风电专业化程度较高,大股东承诺注入优质项目</td>
<td class="px-6 py-4 text-center">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">能源核心</span>
</td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-6 py-4 font-semibold text-blue-700">福能股份</td>
<td class="px-6 py-4">能源电力</td>
<td class="px-6 py-4">电力</td>
<td class="px-6 py-4 text-sm text-gray-600">福建海风项目核心受益者,业务多元化稳健</td>
<td class="px-6 py-4 text-center">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">能源核心</span>
</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold text-purple-700">兴业证券</td>
<td class="px-6 py-4">金融</td>
<td class="px-6 py-4">证券</td>
<td class="px-6 py-4 text-sm text-gray-600">福建省第一大券商,深度参与对台金融业务</td>
<td class="px-6 py-4 text-center">
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">金融枢纽</span>
</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-semibold text-indigo-700">厦门象屿</td>
<td class="px-6 py-4">交运/商贸</td>
<td class="px-6 py-4">大宗商品</td>
<td class="px-6 py-4 text-sm text-gray-600">2025H1营收1984亿两岸贸易加深直接受益</td>
<td class="px-6 py-4 text-center">
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">物流巨头</span>
</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="px-6 py-4 font-semibold text-indigo-700">厦门国贸</td>
<td class="px-6 py-4">交运/商贸</td>
<td class="px-6 py-4">供应链管理</td>
<td class="px-6 py-4 text-sm text-gray-600">2025H1营收1510亿供应链管理龙头</td>
<td class="px-6 py-4 text-center">
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">物流巨头</span>
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold text-gray-700">厦门银行</td>
<td class="px-6 py-4">金融</td>
<td class="px-6 py-4">城商行</td>
<td class="px-6 py-4 text-sm text-gray-600">厦门市第一大上市城商行,对台金融桥头堡</td>
<td class="px-6 py-4 text-center">
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">金融枢纽</span>
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold text-gray-700">海峡创新</td>
<td class="px-6 py-4">科技</td>
<td class="px-6 py-4">-</td>
<td class="px-6 py-4 text-sm text-gray-600">实控人为平潭综合实验区投资促进局</td>
<td class="px-6 py-4 text-center">
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">平潭概念</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section class="py-16 px-4 bg-gradient-to-br from-red-50 to-orange-50">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-center text-gray-800">
<i class="fas fa-exclamation-triangle text-red-500 mr-3"></i>风险与挑战
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-red-500">
<div class="flex items-center mb-4">
<i class="fas fa-flag text-red-500 text-2xl mr-3"></i>
<h3 class="text-xl font-semibold">政策与政治风险</h3>
</div>
<p class="text-gray-600">最高等级风险。台湾地区政治选举结果及美国干预是决定政策走向的关键变量。若两岸关系出现重大倒退,所有融合举措都可能停滞。</p>
<div class="mt-4">
<span class="risk-badge bg-red-100 text-red-800 text-sm px-3 py-1 rounded-full">
<i class="fas fa-fire mr-1"></i>高风险
</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-yellow-500">
<div class="flex items-center mb-4">
<i class="fas fa-chart-line text-yellow-500 text-2xl mr-3"></i>
<h3 class="text-xl font-semibold">商业化风险</h3>
</div>
<p class="text-gray-600">政策善意转化为商业行为需要时间。兴业证券案例表明,初期业务更偏向战略布局而非商业回报,业绩兑现可能慢于预期。</p>
<div class="mt-4">
<span class="bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full">
<i class="fas fa-exclamation mr-1"></i>中等风险
</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-orange-500">
<div class="flex items-center mb-4">
<i class="fas fa-info-circle text-orange-500 text-2xl mr-3"></i>
<h3 class="text-xl font-semibold">信息验证风险</h3>
</div>
<p class="text-gray-600">研报数据缺失,关联个股存在瑕疵(如海峡股份与福建主题关联度低),需警惕数据源不准确带来的投资偏差。</p>
<div class="mt-4">
<span class="bg-orange-100 text-orange-800 text-sm px-3 py-1 rounded-full">
<i class="fas fa-search mr-1"></i>需验证
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Investment Strategy -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-center text-gray-800">
<i class="fas fa-chess text-indigo-500 mr-3"></i>投资策略与跟踪指标
</h2>
<div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-bold mb-6">
<i class="fas fa-bullseye mr-2"></i>最具投资价值方向
</h3>
<div class="space-y-4">
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
<div class="font-semibold mb-2">1. 基础设施与能源(确定性最高)</div>
<div class="text-sm opacity-90">关注中闽能源、福能股份的海风项目进展,平潭发展的区域开发动态</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
<div class="font-semibold mb-2">2. 物流与供应链(业绩弹性大)</div>
<div class="text-sm opacity-90">厦门象屿、厦门国贸作为行业龙头,承接两岸贸易增量</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
<div class="font-semibold mb-2">3. 金融服务(长期主题)</div>
<div class="text-sm opacity-90">兴业证券、厦门银行等适合事件驱动交易或长期战略配置</div>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold mb-6">
<i class="fas fa-chart-bar mr-2"></i>重点跟踪指标
</h3>
<div class="space-y-3">
<div class="flex items-center bg-white/10 backdrop-blur rounded-lg p-3">
<i class="fas fa-globe mr-3"></i>
<div>
<div class="font-semibold">宏观层面</div>
<div class="text-sm opacity-90">两岸贸易顺差、人员往来客运量</div>
</div>
</div>
<div class="flex items-center bg-white/10 backdrop-blur rounded-lg p-3">
<i class="fas fa-file-alt mr-3"></i>
<div>
<div class="font-semibold">政策层面</div>
<div class="text-sm opacity-90">惠台措施出台、产业园项目落地</div>
</div>
</div>
<div class="flex items-center bg-white/10 backdrop-blur rounded-lg p-3">
<i class="fas fa-building mr-3"></i>
<div>
<div class="font-semibold">公司层面</div>
<div class="text-sm opacity-90">海风项目容量、台胞开户数、对台贸易增速</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 px-4">
<div class="max-w-7xl mx-auto text-center">
<div class="mb-6">
<i class="fas fa-landmark text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">海峡两岸福建概念投资分析</h3>
<p class="text-gray-400">深度洞察 · 专业分析 · 风险提示</p>
</div>
<div class="border-t border-gray-800 pt-6">
<p class="text-sm text-gray-500">
<i class="fas fa-info-circle mr-2"></i>
本分析基于公开信息整理,不构成投资建议。投资有风险,入市需谨慎。
</p>
</div>
</div>
</footer>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add fade-in animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.card-hover').forEach(el => {
observer.observe(el);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,492 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深地经济概念深度分析 - 国家战略下的新边疆</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.stock-table {
min-width: 1000px;
}
.badge-custom {
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-weight: 500;
}
.insight-card {
border-left: 4px solid;
border-image: linear-gradient(180deg, #667eea 0%, #764ba2 100%) 1;
}
</style>
</head>
<body>
<!-- Hero Section -->
<div class="hero-gradient text-white">
<div class="container mx-auto px-4 py-16">
<div class="flex flex-col lg:flex-row items-center justify-between">
<div class="lg:w-1/2 mb-8 lg:mb-0">
<div class="badge badge-warning text-black mb-4">
<i class="fas fa-fire mr-2"></i>国家战略新兴产业
</div>
<h1 class="text-5xl font-bold mb-6">深地经济</h1>
<p class="text-xl mb-4 text-gray-100">向地球深部要资源、要空间的国家战略</p>
<p class="text-lg mb-8 text-gray-200">围绕地球深部资源开发、深部空间利用形成的新兴产业链</p>
<div class="flex flex-wrap gap-4">
<div class="stat">
<div class="stat-title text-gray-200">政策催化</div>
<div class="stat-value text-3xl">"十五五"规划</div>
</div>
<div class="stat">
<div class="stat-title text-gray-200">核心目标</div>
<div class="stat-value text-3xl">1000米+</div>
</div>
</div>
</div>
<div class="lg:w-1/2 flex justify-center">
<div class="relative">
<div class="w-64 h-64 rounded-full glass-effect flex items-center justify-center">
<i class="fas fa-mountain text-8xl text-purple-600"></i>
</div>
<div class="absolute -top-4 -right-4 w-20 h-20 rounded-full bg-yellow-400 flex items-center justify-center pulse-dot">
<span class="text-black font-bold text-sm">HOT</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto px-4 py-12">
<!-- 概念定义 -->
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-book-open mr-3 text-purple-600"></i>概念定义与背景
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-6 rounded-xl">
<h3 class="text-xl font-semibold mb-3 text-purple-800">核心定义</h3>
<p class="text-gray-700">深地经济是围绕地球深部通常指1000米以深资源开发、深部空间利用等形成的经济活动及相关产业链的总称。</p>
</div>
<div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-6 rounded-xl">
<h3 class="text-xl font-semibold mb-3 text-blue-800">三大板块</h3>
<ul class="space-y-2 text-gray-700">
<li><i class="fas fa-oil-can mr-2 text-blue-600"></i>深地资源开发</li>
<li><i class="fas fa-building mr-2 text-blue-600"></i>深部空间利用</li>
<li><i class="fas fa-cogs mr-2 text-blue-600"></i>技术研发与装备制造</li>
</ul>
</div>
</div>
</div>
<!-- 时间线 -->
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-clock mr-3 text-purple-600"></i>概念演进时间线
</h2>
<div class="relative">
<div class="timeline-line absolute left-8 top-0 bottom-0 w-1"></div>
<div class="space-y-8">
<div class="flex items-center">
<div class="w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold z-10">
2024
</div>
<div class="ml-6 flex-1 bg-white p-4 rounded-lg shadow">
<p class="font-semibold">2024年10月</p>
<p class="text-gray-600">广东省首次提及"深空深海深地"新赛道</p>
</div>
</div>
<div class="flex items-center">
<div class="w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold z-10">
2025
</div>
<div class="ml-6 flex-1 bg-white p-4 rounded-lg shadow">
<p class="font-semibold">2025年9月</p>
<p class="text-gray-600">市场热议"深空经济",营造氛围</p>
</div>
</div>
<div class="flex items-center">
<div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center text-white font-bold z-10 pulse-dot">
爆发
</div>
<div class="ml-6 flex-1 bg-red-50 p-4 rounded-lg shadow border-2 border-red-200">
<p class="font-semibold text-red-700">2025年10月21日</p>
<p class="text-gray-700">自然资源部表态,概念正式引爆,多股涨停</p>
</div>
</div>
</div>
</div>
</div>
<!-- 核心逻辑 -->
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-lightbulb mr-3 text-purple-600"></i>核心逻辑分析
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="insight-card p-6 bg-gradient-to-br from-red-50 to-orange-50 rounded-xl">
<div class="text-4xl mb-4">🎯</div>
<h3 class="text-xl font-semibold mb-3">战略安全驱动</h3>
<p class="text-gray-700">应对浅部资源枯竭,降低对外依存度,保障国家能源和资源安全底线</p>
</div>
<div class="insight-card p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl">
<div class="text-4xl mb-4">⚙️</div>
<h3 class="text-xl font-semibold mb-3">技术国产化</h3>
<p class="text-gray-700">已攻克钻井装备、破岩工具等核心技术,实现全链条国产化替代</p>
</div>
<div class="insight-card p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl">
<div class="text-4xl mb-4">📈</div>
<h3 class="text-xl font-semibold mb-3">政策预期强烈</h3>
<p class="text-gray-700">"十五五"规划纳入预期,顶层设计明确,政策催化持续性强</p>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-sitemap mr-3 text-purple-600"></i>产业链图谱
</h2>
<div class="overflow-x-auto">
<div class="min-w-[800px]">
<div class="grid grid-cols-3 gap-4">
<div class="bg-gradient-to-b from-yellow-100 to-yellow-50 p-6 rounded-xl text-center">
<h3 class="text-xl font-bold mb-4 text-yellow-800">上游:材料与核心部件</h3>
<div class="space-y-2">
<div class="badge badge-warning badge-custom">硬质合金/刀具</div>
<div class="badge badge-warning badge-custom">特种材料</div>
<div class="badge badge-warning badge-custom">核心组件</div>
</div>
<p class="mt-4 text-sm text-gray-600">代表:中钨高新、恒立钻具</p>
</div>
<div class="bg-gradient-to-b from-green-100 to-green-50 p-6 rounded-xl text-center">
<h3 class="text-xl font-bold mb-4 text-green-800">中游:设备制造</h3>
<div class="space-y-2">
<div class="badge badge-success badge-custom">资源开发设备</div>
<div class="badge badge-success badge-custom">空间利用设备</div>
<div class="badge badge-success badge-custom">工程装备</div>
</div>
<p class="mt-4 text-sm text-gray-600">代表:铁建重工、石化机械</p>
</div>
<div class="bg-gradient-to-b from-blue-100 to-blue-50 p-6 rounded-xl text-center">
<h3 class="text-xl font-bold mb-4 text-blue-800">下游:工程与服务</h3>
<div class="space-y-2">
<div class="badge badge-info badge-custom">工程建设</div>
<div class="badge badge-info badge-custom">勘探服务</div>
<div class="badge badge-info badge-custom">空间规划</div>
</div>
<p class="mt-4 text-sm text-gray-600">代表:中国铁建、深城交</p>
</div>
</div>
</div>
</div>
</div>
<!-- 股票数据表格 -->
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-table mr-3 text-purple-600"></i>深地经济概念股全览
</h2>
<div class="table-container">
<table class="stock-table w-full">
<thead>
<tr class="bg-gradient-to-r from-purple-600 to-purple-700 text-white">
<th class="px-4 py-3 text-left">股票代码</th>
<th class="px-4 py-3 text-left">股票名称</th>
<th class="px-4 py-3 text-left">行业分类</th>
<th class="px-4 py-3 text-left">产业链环节</th>
<th class="px-4 py-3 text-left">核心逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">神开股份</td>
<td class="px-4 py-3">神开股份</td>
<td class="px-4 py-3"><span class="badge badge-warning">油气资源</span></td>
<td class="px-4 py-3">勘探设备/钻采设备</td>
<td class="px-4 py-3 text-sm">油气勘探设备龙头,受益深地油气开发</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">石化机械</td>
<td class="px-4 py-3">石化机械</td>
<td class="px-4 py-3"><span class="badge badge-warning">油气资源</span></td>
<td class="px-4 py-3">钻采设备</td>
<td class="px-4 py-3 text-sm">钻采设备国家队,技术实力雄厚</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">铁建重工</td>
<td class="px-4 py-3">铁建重工</td>
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
<td class="px-4 py-3">隧道设备</td>
<td class="px-4 py-3 text-sm">TBM隧道掘进机龙头最受益标的</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">中铁工业</td>
<td class="px-4 py-3">中铁工业</td>
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
<td class="px-4 py-3">隧道设备</td>
<td class="px-4 py-3 text-sm">盾构机制造龙头,业务协同性强</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">中钨高新</td>
<td class="px-4 py-3">中钨高新</td>
<td class="px-4 py-3"><span class="badge badge-warning">地下空间</span></td>
<td class="px-4 py-3">硬质合金</td>
<td class="px-4 py-3 text-sm">硬质合金龙头高弹性标的空间90%+</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">中国铁建</td>
<td class="px-4 py-3">中国铁建</td>
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
<td class="px-4 py-3">工程建设</td>
<td class="px-4 py-3 text-sm">深地空间总包商,牵头承担国家任务</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">德石股份</td>
<td class="px-4 py-3">德石股份</td>
<td class="px-4 py-3"><span class="badge badge-warning">油气资源</span></td>
<td class="px-4 py-3">钻采设备</td>
<td class="px-4 py-3 text-sm">钻采设备制造商,直接受益油气开发</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">恒立钻具</td>
<td class="px-4 py-3">恒立钻具</td>
<td class="px-4 py-3"><span class="badge badge-warning">地下空间</span></td>
<td class="px-4 py-3">硬质合金</td>
<td class="px-4 py-3 text-sm">工程钻具供应商,小而美细分龙头</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">深城交</td>
<td class="px-4 py-3">深城交</td>
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
<td class="px-4 py-3">空间规划</td>
<td class="px-4 py-3 text-sm">深圳地下空间规划龙头,区位优势明显</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 font-medium">中化岩土</td>
<td class="px-4 py-3">中化岩土</td>
<td class="px-4 py-3"><span class="badge badge-info">地下空间</span></td>
<td class="px-4 py-3">岩土工程</td>
<td class="px-4 py-3 text-sm">岩土工程专家,受益地下空间开发</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-4 text-sm text-gray-600">
<i class="fas fa-info-circle mr-2"></i>
以上为部分重点标的完整列表包含60+家公司
</p>
</div>
<!-- 投资策略 -->
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-chess mr-3 text-purple-600"></i>投资策略与建议
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-xl">
<h3 class="text-xl font-semibold mb-4 text-green-800">
<i class="fas fa-thumbs-up mr-2"></i>重点关注方向
</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-600 mt-1 mr-3"></i>
<div>
<p class="font-semibold">核心设备商</p>
<p class="text-sm text-gray-600">铁建重工、石化机械 - 逻辑最纯粹的卖铲人</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-600 mt-1 mr-3"></i>
<div>
<p class="font-semibold">高弹性材料</p>
<p class="text-sm text-gray-600">中钨高新 - 需求侧强弹性空间90%+</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-600 mt-1 mr-3"></i>
<div>
<p class="font-semibold">国家队总包</p>
<p class="text-sm text-gray-600">中国铁建 - 获取国家级项目能力最强</p>
</div>
</li>
</ul>
</div>
<div class="bg-gradient-to-r from-red-50 to-pink-50 p-6 rounded-xl">
<h3 class="text-xl font-semibold mb-4 text-red-800">
<i class="fas fa-exclamation-triangle mr-2"></i>风险提示
</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-times-circle text-red-600 mt-1 mr-3"></i>
<div>
<p class="font-semibold">技术风险</p>
<p class="text-sm text-gray-600">万米深井技术难度被市场低估</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-600 mt-1 mr-3"></i>
<div>
<p class="font-semibold">商业化风险</p>
<p class="text-sm text-gray-600">投资巨大,回报周期长</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-600 mt-1 mr-3"></i>
<div>
<p class="font-semibold">政策波动</p>
<p class="text-sm text-gray-600">高度依赖"十五五"规划落地力度</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 关键跟踪指标 -->
<div class="glass-effect rounded-2xl p-8 mb-8 card-hover">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-chart-line mr-3 text-purple-600"></i>关键跟踪指标
</h2>
<div class="grid md:grid-cols-4 gap-4">
<div class="bg-white p-4 rounded-lg shadow text-center">
<i class="fas fa-file-alt text-3xl text-purple-600 mb-3"></i>
<h4 class="font-semibold mb-2">政策指标</h4>
<p class="text-sm text-gray-600">"十五五"规划正式文本</p>
</div>
<div class="bg-white p-4 rounded-lg shadow text-center">
<i class="fas fa-clipboard-list text-3xl text-blue-600 mb-3"></i>
<h4 class="font-semibold mb-2">订单指标</h4>
<p class="text-sm text-gray-600">核心公司季度新签订单</p>
</div>
<div class="bg-white p-4 rounded-lg shadow text-center">
<i class="fas fa-hard-hat text-3xl text-green-600 mb-3"></i>
<h4 class="font-semibold mb-2">项目指标</h4>
<p class="text-sm text-gray-600">国家级项目立项开工</p>
</div>
<div class="bg-white p-4 rounded-lg shadow text-center">
<i class="fas fa-microscope text-3xl text-red-600 mb-3"></i>
<h4 class="font-semibold mb-2">技术指标</h4>
<p class="text-sm text-gray-600">关键设备技术突破</p>
</div>
</div>
</div>
<!-- 页脚 -->
<div class="text-center py-8 mt-12">
<p class="text-gray-600">
<i class="fas fa-info-circle mr-2"></i>
本页面基于公开信息和专业分析生成,不构成投资建议。市场有风险,投资需谨慎。
</p>
<p class="text-sm text-gray-500 mt-2">
数据更新时间2025年10月21日
</p>
</div>
</div>
<script>
// 添加滚动动画效果
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.card-hover').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
// 添加表格行点击高亮效果
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('click', function() {
// 移除其他行的高亮
document.querySelectorAll('tbody tr').forEach(r => {
r.classList.remove('bg-purple-50');
});
// 添加当前行高亮
this.classList.add('bg-purple-50');
});
});
// 添加脉冲动画效果
document.querySelectorAll('.pulse-dot').forEach(dot => {
setInterval(() => {
dot.style.transform = 'scale(1.1)';
setTimeout(() => {
dot.style.transform = 'scale(1)';
}, 500);
}, 2000);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,656 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深圳本地股 - 政策驱动的战略资产价值重估机会</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--dark-bg: #0f172a;
--card-bg: #1e293b;
--text-light: #e2e8f0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: var(--text-light);
line-height: 1.6;
}
/* Hero Section */
.hero-section {
background: var(--primary-gradient);
padding: 80px 0 60px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,144C960,149,1056,139,1152,128C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
background-size: cover;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero-subtitle {
font-size: 1.3rem;
opacity: 0.95;
margin-bottom: 30px;
}
/* Section Styles */
.section-card {
background: var(--card-bg);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.section-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 25px;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
/* Timeline */
.timeline {
position: relative;
padding-left: 30px;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 3px;
background: var(--primary-gradient);
}
.timeline-item {
position: relative;
padding-bottom: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -38px;
top: 5px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #764ba2;
border: 3px solid #667eea;
}
.timeline-date {
color: #a78bfa;
font-weight: 600;
margin-bottom: 8px;
}
/* Badge Styles */
.policy-badge {
display: inline-block;
padding: 8px 16px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 25px;
font-size: 0.9rem;
margin-right: 10px;
margin-bottom: 10px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
/* Table Styles */
.stock-table {
background: var(--card-bg);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.stock-table thead {
background: linear-gradient(135deg, #667eea, #764ba2);
}
.stock-table th {
padding: 15px;
font-weight: 600;
border: none;
white-space: nowrap;
}
.stock-table td {
padding: 12px 15px;
border-top: 1px solid rgba(255,255,255,0.1);
vertical-align: middle;
}
.stock-table tbody tr:hover {
background: rgba(102, 126, 234, 0.1);
transition: background 0.3s ease;
}
/* Industry Tag */
.industry-tag {
display: inline-block;
padding: 4px 10px;
background: rgba(102, 126, 234, 0.2);
border: 1px solid #667eea;
border-radius: 12px;
font-size: 0.85rem;
margin: 2px;
}
/* Comparison Card */
.comparison-card {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-radius: 15px;
padding: 25px;
margin-bottom: 20px;
border: 1px solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
}
.comparison-card:hover {
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.stock-name {
font-size: 1.2rem;
font-weight: 700;
color: #a78bfa;
margin-bottom: 10px;
}
.logic-purity {
display: inline-block;
padding: 5px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
}
.purity-high {
background: #10b981;
color: white;
}
.purity-medium {
background: #f59e0b;
color: white;
}
.purity-low {
background: #ef4444;
color: white;
}
/* Highlight Box */
.highlight-box {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
border-left: 4px solid #667eea;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.highlight-number {
font-size: 2.5rem;
font-weight: 800;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Floating Animation */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.section-card {
padding: 25px;
}
.stock-table {
font-size: 0.9rem;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* Loading Animation */
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero-section">
<div class="container hero-content">
<div class="row align-items-center">
<div class="col-lg-8">
<h1 class="hero-title floating">深圳本地股</h1>
<p class="hero-subtitle">政策驱动的战略资产价值重估机会</p>
<div class="mt-4">
<span class="policy-badge"><i class="bi bi-graph-up-arrow"></i> 并购重组</span>
<span class="policy-badge"><i class="bi bi-cpu"></i> 科技创新</span>
<span class="policy-badge"><i class="bi bi-building"></i> 资产重估</span>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="highlight-box">
<div class="highlight-number">20万亿</div>
<div>上市公司总市值目标</div>
</div>
</div>
</div>
</div>
</section>
<!-- Main Content -->
<div class="container" style="margin-top: -40px; position: relative; z-index: 10;">
<!-- Core View Summary -->
<div class="section-card">
<h2 class="section-title"><i class="bi bi-lightbulb"></i> 核心观点摘要</h2>
<p>深圳本地股概念已从传统的地域性标签,升级为由<strong class="text-warning">深圳地方政府强力政策驱动的战略资产价值重估机会</strong>。其核心逻辑在于通过并购重组盘活存量国资资产以及通过产业政策如AI加速科技企业成长这为本地国资平台和前沿科技公司提供了双重增长动能。当前概念处于<strong class="text-info">政策密集催化期</strong>,市场情绪高涨,但内部已出现分化,需要穿透炒作表象,识别出真正受益于资产价值释放和产业趋势的优质标的。</p>
</div>
<!-- Policy Timeline -->
<div class="section-card">
<h2 class="section-title"><i class="bi bi-calendar-event"></i> 政策催化时间轴</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date">2024年11月27日</div>
<h5>并购重组行动方案(征求意见稿)</h5>
<p>深圳发布《深圳市推动并购重组高质量发展的行动方案2025-2027公开征求意见稿提出到2027年底推动深圳境内外上市公司总市值突破<strong>15万亿元</strong></p>
<div>
<span class="industry-tag">市值目标15万亿</span>
<span class="industry-tag">并购项目100单</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2025年3月3日</div>
<h5>AI终端产业行动计划</h5>
<p>深圳印发《深圳市加快推进人工智能终端产业发展行动计划2025—2026年瞄准AI全球科技前沿。</p>
<div>
<span class="industry-tag">人工智能</span>
<span class="industry-tag">终端应用</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2025年10月23日</div>
<h5>并购重组行动方案(正式版)</h5>
<p>正式通知中提出力争到2027年底境内外上市公司总市值突破<strong>20万亿元</strong>(较征求意见稿大幅提升),培育形成千亿级市值企业<strong>20家</strong></p>
<div>
<span class="industry-tag">市值目标20万亿</span>
<span class="industry-tag">千亿企业20家</span>
</div>
</div>
</div>
</div>
<!-- Core Logic Analysis -->
<div class="section-card">
<h2 class="section-title"><i class="bi bi-diagram-3"></i> 核心逻辑与市场认知</h2>
<div class="row">
<div class="col-md-6">
<h5 class="text-info mb-3"><i class="bi bi-rocket-takeoff"></i> 核心驱动力</h5>
<ul class="list-unstyled">
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> <strong>政策导向的确定性</strong>:地方政府顶层设计,"总市值突破20万亿"目标明确</li>
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> <strong>存量资产价值重估</strong>核心区土地、物业等资产显性化如华南物流园150亿收益</li>
<li class="mb-2"><i class="bi bi-check-circle text-success"></i> <strong>产业升级集群效应</strong>TMT、新能源等产业基础深厚政策强化优势</li>
</ul>
</div>
<div class="col-md-6">
<h5 class="text-warning mb-3"><i class="bi bi-exclamation-triangle"></i> 预期差分析</h5>
<div class="highlight-box">
<p><strong>市场认知:</strong> 深圳本地股 = 政策催化下的短线题材</p>
<p><strong>路演现实:</strong></p>
<ul class="mb-0">
<li>深圳燃气:稳健红利(分红>30%+ 低融资成本3.3%</li>
<li>深圳国际:华南物流园<strong>150亿元</strong>税后收益</li>
<li>概念内部质量差异巨大,需要精选</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Core Companies Comparison -->
<div class="section-card">
<h2 class="section-title"><i class="bi bi-bar-chart"></i> 核心公司对比</h2>
<div class="row">
<div class="col-lg-4">
<div class="comparison-card">
<div class="stock-name">深圳国际 (00152.HK)</div>
<p class="mb-2"><strong>核心逻辑:</strong>资产价值重估</p>
<p class="mb-2"><strong>优势:</strong>拥有深圳核心区海量物流土地华南物流园税后收益约150亿元</p>
<p class="mb-2"><strong>风险:</strong>地产周期下行,开发周期长</p>
<span class="logic-purity purity-high">逻辑纯粹度:高</span>
</div>
</div>
<div class="col-lg-4">
<div class="comparison-card">
<div class="stock-name">深圳燃气 (601139.SH)</div>
<p class="mb-2"><strong>核心逻辑:</strong>稳健红利+增长</p>
<p class="mb-2"><strong>优势:</strong>区域垄断,高分红>30%融资成本3.3%</p>
<p class="mb-2"><strong>风险:</strong>光伏胶膜业务拖累,气价波动</p>
<span class="logic-purity purity-medium">逻辑纯粹度:中高</span>
</div>
</div>
<div class="col-lg-4">
<div class="comparison-card">
<div class="stock-name">深赛格 / 特力A</div>
<p class="mb-2"><strong>核心逻辑:</strong>政策弹性/壳价值</p>
<p class="mb-2"><strong>优势:</strong>深圳国资控股,股性活跃</p>
<p class="mb-2"><strong>风险:</strong>基本面薄弱,纯情绪驱动</p>
<span class="logic-purity purity-low">逻辑纯粹度:低</span>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="section-card">
<h2 class="section-title"><i class="bi bi-table"></i> 深圳本地股全览</h2>
<div class="table-responsive">
<table class="table stock-table">
<thead>
<tr>
<th>股票名称</th>
<th>行业</th>
<th>核心项目</th>
<th>分类</th>
<th>产业链</th>
<th>数据来源</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>深纺织A</strong></td>
<td><span class="industry-tag">LCD</span></td>
<td>偏光片</td>
<td>深圳国资</td>
<td>偏光片研发</td>
<td>机构调研</td>
</tr>
<tr>
<td><strong>新宙邦</strong></td>
<td><span class="industry-tag">电解液</span></td>
<td>锂电池材料</td>
<td>新能源</td>
<td>锂离子电池</td>
<td>公开资料</td>
</tr>
<tr>
<td><strong>云天励飞-U</strong></td>
<td><span class="industry-tag">人工智能</span></td>
<td>AI芯片</td>
<td>半导体</td>
<td>边缘计算</td>
<td>互动</td>
</tr>
<tr>
<td><strong>大族激光</strong></td>
<td><span class="industry-tag">PCB</span></td>
<td>HDI订单</td>
<td>智能制造</td>
<td>激光加工设备</td>
<td>互动</td>
</tr>
<tr>
<td><strong>特发信息</strong></td>
<td><span class="industry-tag">光纤光缆</span></td>
<td>5G通信</td>
<td>通信</td>
<td>光模块</td>
<td>互动</td>
</tr>
<tr>
<td><strong>英维克</strong></td>
<td><span class="industry-tag">温控设备</span></td>
<td>液冷技术</td>
<td>新能源</td>
<td>数据中心</td>
<td>互动</td>
</tr>
<tr>
<td><strong>德方纳米</strong></td>
<td><span class="industry-tag">电池材料</span></td>
<td>磷酸铁锂</td>
<td>新能源</td>
<td>动力电池</td>
<td>年报</td>
</tr>
<tr>
<td><strong>科士达</strong></td>
<td><span class="industry-tag">光伏</span></td>
<td>储能系统</td>
<td>新能源</td>
<td>光伏逆变器</td>
<td>年报</td>
</tr>
<tr>
<td><strong>威迈斯</strong></td>
<td><span class="industry-tag">车载电源</span></td>
<td>800V高压平台</td>
<td>新能源</td>
<td>新能源汽车</td>
<td>互动</td>
</tr>
<tr>
<td><strong>深康佳A</strong></td>
<td><span class="industry-tag">消费电子</span></td>
<td>Micro LED</td>
<td>半导体</td>
<td>显示模组</td>
<td>互动</td>
</tr>
<tr>
<td><strong>深物业A</strong></td>
<td><span class="industry-tag">房地产</span></td>
<td>城市更新</td>
<td>地产</td>
<td>物业管理</td>
<td>公开资料</td>
</tr>
<tr>
<td><strong>微芯生物</strong></td>
<td><span class="industry-tag">创新药</span></td>
<td>适应症扩展</td>
<td>医药</td>
<td>药品研发</td>
<td>互动</td>
</tr>
<tr>
<td><strong>翰宇药业</strong></td>
<td><span class="industry-tag">医药</span></td>
<td>GLP-1</td>
<td>生物制药</td>
<td>原料药</td>
<td>公告</td>
</tr>
<tr>
<td><strong>天源迪科</strong></td>
<td><span class="industry-tag">金融科技</span></td>
<td>跨境支付</td>
<td>金融</td>
<td>金融IT</td>
<td>公开资料</td>
</tr>
<tr>
<td><strong>路维光电</strong></td>
<td><span class="industry-tag">掩膜版</span></td>
<td>半导体光刻</td>
<td>半导体</td>
<td>显示面板</td>
<td>公开资料</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Risks & Investment Insights -->
<div class="row">
<div class="col-lg-6">
<div class="section-card">
<h2 class="section-title"><i class="bi bi-shield-exclamation"></i> 潜在风险</h2>
<ul class="list-unstyled">
<li class="mb-3">
<i class="bi bi-arrow-right-circle text-warning"></i>
<strong>政策执行不及预期</strong>:若后续无法推出有分量的标杆案例,市场热情将消退
</li>
<li class="mb-3">
<i class="bi bi-arrow-right-circle text-warning"></i>
<strong>概念分化与证伪</strong>:缺乏基本面支撑的"蹭热点"公司将面临大幅回调风险
</li>
<li class="mb-3">
<i class="bi bi-arrow-right-circle text-warning"></i>
<strong>宏观经济与地产周期</strong>:深圳国际等公司的资产价值实现依赖于房地产市场景气度
</li>
<li>
<i class="bi bi-arrow-right-circle text-warning"></i>
<strong>信息交叉验证风险</strong>:新闻情绪与路演现实存在差异,需深度基本面研究
</li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="section-card">
<h2 class="section-title"><i class="bi bi-lightbulb-fill"></i> 投资启示</h2>
<div class="highlight-box mb-3">
<h5 class="text-success">最具投资价值方向</h5>
<ol>
<li><strong>低估值+高确定性资产重估</strong>深圳国际00152.HK及旗下A股公司</li>
<li><strong>稳健高股息+产业增量</strong>深圳燃气601139.SH</li>
</ol>
</div>
<h6>关键跟踪指标:</h6>
<ul class="list-unstyled small">
<li>• 华南物流园项目进度(深圳国际)</li>
<li>• 新投产电厂用气量(深圳燃气)</li>
<li>• 重大并购重组计划公告(整个概念)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-5 py-4 text-center" style="background: var(--dark-bg); border-top: 1px solid rgba(255,255,255,0.1);">
<p class="mb-0 opacity-75">© 2024 深圳本地股深度分析 | 基于公开数据与研究</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Smooth scroll animation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Apply observer to section cards
document.querySelectorAll('.section-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
// Table row hover effect
document.querySelectorAll('.stock-table tbody tr').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.01)';
this.style.transition = 'transform 0.2s ease';
});
row.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,667 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>湖北三资改革深度分析 - 从土地财政到股权财政的转型实验</title>
<!-- DaisyUI & Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom Styles -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.hero-gradient {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
background-size: 200% 200%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.neon-glow {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5),
0 0 40px rgba(59, 130, 246, 0.3),
0 0 60px rgba(59, 130, 246, 0.1);
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #3b82f6;
border-radius: 50%;
top: 50%;
left: -10px;
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}
.stock-table {
overflow-x: auto;
}
.stock-table::-webkit-scrollbar {
height: 8px;
}
.stock-table::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.stock-table::-webkit-scrollbar-thumb {
background: #3b82f6;
border-radius: 4px;
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
.gradient-text {
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Hero Section -->
<div class="hero-gradient min-h-screen flex items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="text-center">
<div class="inline-flex items-center gap-2 bg-red-600 text-white px-4 py-2 rounded-full mb-6 pulse-dot">
<i class="fas fa-fire"></i>
<span class="font-bold">热点概念</span>
<span class="text-xs">2025.10.21</span>
</div>
<h1 class="text-5xl md:text-7xl font-black mb-6 text-white">
湖北三资改革
</h1>
<p class="text-xl md:text-3xl mb-8 text-gray-200">
从土地财政到股权财政的转型实验
</p>
<div class="glass-effect rounded-2xl p-8 max-w-4xl mx-auto">
<p class="text-lg leading-relaxed text-gray-100">
一切国有资源尽可能<span class="font-bold text-yellow-400">资产化</span>
一切国有资产尽可能<span class="font-bold text-green-400">证券化</span>
一切国有资金尽可能<span class="font-bold text-blue-400">杠杆化</span>
</p>
<p class="text-sm text-gray-300 mt-4">
—— 湖北省省长 李殿勋 | 2025.10.16
</p>
</div>
</div>
</div>
</div>
<!-- Core Insights Section -->
<section class="py-20 relative">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4 gradient-text">核心洞察</h2>
<p class="text-gray-400 text-lg">深度解析湖北三资改革的本质与影响</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- 背景驱动 -->
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="text-4xl mb-4 text-red-500">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="text-2xl font-bold mb-4">财政困境倒逼</h3>
<div class="space-y-3 text-gray-300">
<p>• 土地财政锐减政府性基金收入7年连降</p>
<p>• 收支缺口巨大收入4000亿 vs 支出1万亿</p>
<p>• 转移支付放缓:中央支持边际减弱</p>
</div>
</div>
<!-- 核心逻辑 -->
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="text-4xl mb-4 text-green-500">
<i class="fas fa-exchange-alt"></i>
</div>
<h3 class="text-2xl font-bold mb-4">转型核心逻辑</h3>
<div class="space-y-3 text-gray-300">
<p>• 资源→资产:盘活沉睡国有资源</p>
<p>• 资产→证券:通过资本市场变现</p>
<p>• 资金→杠杆:放大财政资金效应</p>
</div>
</div>
<!-- 市场认知 -->
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="text-4xl mb-4 text-blue-500">
<i class="fas fa-brain"></i>
</div>
<h3 class="text-2xl font-bold mb-4">市场预期差</h3>
<div class="space-y-3 text-gray-300">
<p>• 过度乐观:低估证券化复杂性</p>
<p>• 忽略风险:杠杆化双刃剑效应</p>
<p>• 外推偏差:湖北模式特殊性</p>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="py-20 relative">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4 gradient-text">事件时间轴</h2>
<p class="text-gray-400 text-lg">追踪湖北三资改革的关键节点</p>
</div>
<div class="max-w-4xl mx-auto">
<div class="space-y-8">
<div class="flex items-start gap-4">
<div class="timeline-dot flex-1">
<div class="glass-effect rounded-xl p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-blue-400 font-bold">2025年4月</span>
<span class="badge badge-info">政策准备</span>
</div>
<p class="text-gray-300">湖北省印发《深化国有"三资"管理改革总体工作方案》</p>
</div>
</div>
</div>
<div class="flex items-start gap-4">
<div class="timeline-dot flex-1">
<div class="glass-effect rounded-xl p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-blue-400 font-bold">2025年7月</span>
<span class="badge badge-warning">金融铺垫</span>
</div>
<p class="text-gray-300">李殿勋强调"大胆推进科技金融改革"</p>
</div>
</div>
</div>
<div class="flex items-start gap-4">
<div class="timeline-dot flex-1">
<div class="glass-effect rounded-xl p-4 neon-glow">
<div class="flex items-center justify-between mb-2">
<span class="text-red-400 font-bold">2025年10月16日</span>
<span class="badge badge-error">引爆点</span>
</div>
<p class="text-gray-300 font-bold">李殿勋提出"三化"纲领,概念正式引爆</p>
</div>
</div>
</div>
<div class="flex items-start gap-4">
<div class="timeline-dot flex-1">
<div class="glass-effect rounded-xl p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-blue-400 font-bold">2025年10月20-21日</span>
<span class="badge badge-success">市场发酵</span>
</div>
<p class="text-gray-300">多家券商发布深度研报,市场情绪达到高潮</p>
</div>
</div>
</div>
<div class="flex items-start gap-4">
<div class="timeline-dot flex-1">
<div class="glass-effect rounded-xl p-4 border-2 border-dashed border-gray-600">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-400 font-bold">未来:四中全会后</span>
<span class="badge badge-outline">关键观察</span>
</div>
<p class="text-gray-400">中央是否对湖北模式表态,决定概念生命力</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Table Section -->
<section class="py-20 relative">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4 gradient-text">核心标的池</h2>
<p class="text-gray-400 text-lg">湖北三资改革相关上市公司全景图谱</p>
</div>
<div class="glass-effect rounded-2xl p-6">
<div class="stock-table">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-700">
<th class="text-left p-4 font-bold text-blue-400">股票名称</th>
<th class="text-left p-4 font-bold text-blue-400">分类</th>
<th class="text-left p-4 font-bold text-blue-400">实际控制人</th>
<th class="text-left p-4 font-bold text-blue-400">持股比例/项目</th>
<th class="text-left p-4 font-bold text-blue-400">关联逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-yellow-400">湖北能源</td>
<td class="p-4">公用事业</td>
<td class="p-4">三峡集团</td>
<td class="p-4">已践行改革</td>
<td class="p-4 text-gray-300">混合所有制改革典范,出售长江证券聚焦主业</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-green-400">东湖高新</td>
<td class="p-4">创投</td>
<td class="p-4">湖北国资委</td>
<td class="p-4">9.21%</td>
<td class="p-4 text-gray-300">聚焦生物医药、新材料,资产注入想象空间大</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-green-400">武汉控股</td>
<td class="p-4">公用事业</td>
<td class="p-4">武汉市国资委</td>
<td class="p-4">40.18%</td>
<td class="p-4 text-gray-300">武汉城建唯一上市平台,污水处理龙头</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-blue-400">天风证券</td>
<td class="p-4">金融</td>
<td class="p-4">湖北财政厅</td>
<td class="p-4">28.14%</td>
<td class="p-4 text-gray-300">财政厅控股,直接受益于资产证券化业务</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-purple-400">湖北广电</td>
<td class="p-4">传媒</td>
<td class="p-4">湖北广播电视台</td>
<td class="p-4">15.27%</td>
<td class="p-4 text-gray-300">省属国有控股,参与文创股权投资基金</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-orange-400">楚天高速</td>
<td class="p-4">公用事业</td>
<td class="p-4">湖北国资委</td>
<td class="p-4">33.88%</td>
<td class="p-4 text-gray-300">高速公路资产,现金流稳定适合证券化</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-pink-400">兴发集团</td>
<td class="p-4">化工</td>
<td class="p-4">兴山县国资委</td>
<td class="p-4">20.06%</td>
<td class="p-4 text-gray-300">磷化工龙头,资源禀赋突出</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-cyan-400">华工科技</td>
<td class="p-4">半导体</td>
<td class="p-4">武汉市国资委</td>
<td class="p-4">17.28%</td>
<td class="p-4 text-gray-300">激光科技龙头,符合新质生产力方向</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-indigo-400">武商集团</td>
<td class="p-4">商超</td>
<td class="p-4">武汉市国资委</td>
<td class="p-4">26.64%</td>
<td class="p-4 text-gray-300">商业零售资产,存在整合预期</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
<td class="p-4 font-bold text-teal-400">湖北宜化</td>
<td class="p-4">化工</td>
<td class="p-4">宜昌市国资委</td>
<td class="p-4">22.03%</td>
<td class="p-4 text-gray-300">化肥龙头,传统产业转型代表</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Industry Chain Section -->
<section class="py-20 relative">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4 gradient-text">产业链图谱</h2>
<p class="text-gray-400 text-lg">三资改革价值链全景图</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- 上游 -->
<div class="glass-effect rounded-2xl p-6">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
<i class="fas fa-mountain text-white"></i>
</div>
<h3 class="text-2xl font-bold">上游:资产供给方</h3>
</div>
<div class="space-y-4">
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-bold text-blue-400 mb-2">各级政府</h4>
<p class="text-sm text-gray-400">持有海量国有资源</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-bold text-blue-400 mb-2">国资委</h4>
<p class="text-sm text-gray-400">国有资产监管主体</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-bold text-blue-400 mb-2">大型国资集团</h4>
<p class="text-sm text-gray-400">湖北联投、湖北交投、三峡集团</p>
</div>
</div>
</div>
<!-- 中游 -->
<div class="glass-effect rounded-2xl p-6">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center">
<i class="fas fa-cogs text-white"></i>
</div>
<h3 class="text-2xl font-bold">中游:运营平台</h3>
</div>
<div class="space-y-4">
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-bold text-green-400 mb-2">上市平台</h4>
<p class="text-sm text-gray-400">核心资产证券化载体</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-bold text-green-400 mb-2">金融服务平台</h4>
<p class="text-sm text-gray-400">天风证券、长江证券</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-bold text-green-400 mb-2">资产管理公司</h4>
<p class="text-sm text-gray-400">专业资产运营机构</p>
</div>
</div>
</div>
<!-- 下游 -->
<div class="glass-effect rounded-2xl p-6">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-full flex items-center justify-center">
<i class="fas fa-users text-white"></i>
</div>
<h3 class="text-2xl font-bold">下游:需求方</h3>
</div>
<div class="space-y-4">
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-bold text-orange-400 mb-2">资本市场</h4>
<p class="text-sm text-gray-400">价值发现与定价</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-bold text-orange-400 mb-2">产业投资者</h4>
<p class="text-sm text-gray-400">战略投资与整合</p>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-bold text-orange-400 mb-2">地方经济</h4>
<p class="text-sm text-gray-400">获得新增长动能</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Risk Analysis Section -->
<section class="py-20 relative">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4 gradient-text">风险警示</h2>
<p class="text-gray-400 text-lg">理性评估投资风险</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="glass-effect rounded-2xl p-6 border-l-4 border-red-500">
<div class="flex items-center gap-3 mb-4">
<i class="fas fa-exclamation-triangle text-red-500 text-2xl"></i>
<h3 class="text-xl font-bold">政策风险</h3>
</div>
<p class="text-gray-300 mb-3">中央态度未明,"杠杆化"可能引发系统性风险担忧</p>
<div class="bg-red-900/20 rounded-lg p-3">
<p class="text-sm text-red-300">⚠️ 若中央叫停,概念将瞬间崩塌</p>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 border-l-4 border-yellow-500">
<div class="flex items-center gap-3 mb-4">
<i class="fas fa-tasks text-yellow-500 text-2xl"></i>
<h3 class="text-xl font-bold">执行风险</h3>
</div>
<p class="text-gray-300 mb-3">资产清查、估值、证券化过程复杂,易生争议</p>
<div class="bg-yellow-900/20 rounded-lg p-3">
<p class="text-sm text-yellow-300">⚠️ 注入资产质量存不确定性</p>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 border-l-4 border-orange-500">
<div class="flex items-center gap-3 mb-4">
<i class="fas fa-chart-line text-orange-500 text-2xl"></i>
<h3 class="text-xl font-bold">商业化风险</h3>
</div>
<p class="text-gray-300 mb-3">部分资产如何定价、产生稳定现金流仍是难题</p>
<div class="bg-orange-900/20 rounded-lg p-3">
<p class="text-sm text-orange-300">⚠️ 证券化后收益可能不及预期</p>
</div>
</div>
<div class="glass-effect rounded-2xl p-6 border-l-4 border-purple-500">
<div class="flex items-center gap-3 mb-4">
<i class="fas fa-globe text-purple-500 text-2xl"></i>
<h3 class="text-xl font-bold">推广风险</h3>
</div>
<p class="text-gray-300 mb-3">湖北模式特殊性,其他省份难以简单复制</p>
<div class="bg-purple-900/20 rounded-lg p-3">
<p class="text-sm text-purple-300">⚠️ 跨省推广不及预期将降温</p>
</div>
</div>
</div>
</div>
</section>
<!-- Investment Strategy Section -->
<section class="py-20 relative">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4 gradient-text">投资策略</h2>
<p class="text-gray-400 text-lg">基于风险收益比的投资建议</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- 首选 -->
<div class="glass-effect rounded-2xl p-6 hover-scale border-2 border-green-500/50">
<div class="flex items-center justify-between mb-4">
<span class="badge badge-success text-lg">首选</span>
<i class="fas fa-star text-yellow-400 text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-green-400">湖北能源</h3>
<div class="space-y-3 mb-4">
<div class="flex items-center gap-2">
<i class="fas fa-check-circle text-green-500"></i>
<span class="text-sm">逻辑最扎实</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-check-circle text-green-500"></i>
<span class="text-sm">已践行改革</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-check-circle text-green-500"></i>
<span class="text-sm">基本面支撑</span>
</div>
</div>
<p class="text-gray-400 text-sm">风险收益比相对较高,适合中长期配置</p>
</div>
<!-- 次选 -->
<div class="glass-effect rounded-2xl p-6 hover-scale border-2 border-yellow-500/50">
<div class="flex items-center justify-between mb-4">
<span class="badge badge-warning text-lg">次选</span>
<i class="fas fa-rocket text-yellow-400 text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-yellow-400">东湖高新/武汉控股</h3>
<div class="space-y-3 mb-4">
<div class="flex items-center gap-2">
<i class="fas fa-arrow-up text-yellow-500"></i>
<span class="text-sm">高弹性标的</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-arrow-up text-yellow-500"></i>
<span class="text-sm">想象空间大</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-arrow-up text-yellow-500"></i>
<span class="text-sm">短期博弈</span>
</div>
</div>
<p class="text-gray-400 text-sm">需严格止损,适合风险偏好高的投资者</p>
</div>
<!-- 关注 -->
<div class="glass-effect rounded-2xl p-6 hover-scale border-2 border-blue-500/50">
<div class="flex items-center justify-between mb-4">
<span class="badge badge-info text-lg">关注</span>
<i class="fas fa-chart-line text-blue-400 text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-blue-400">天风证券</h3>
<div class="space-y-3 mb-4">
<div class="flex items-center gap-2">
<i class="fas fa-shield-alt text-blue-500"></i>
<span class="text-sm">间接受益</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-shield-alt text-blue-500"></i>
<span class="text-sm">相对稳健</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-shield-alt text-blue-500"></i>
<span class="text-sm">回调关注</span>
</div>
</div>
<p class="text-gray-400 text-sm">受益逻辑间接,更持久的参与方式</p>
</div>
</div>
<!-- Key Metrics -->
<div class="mt-12 glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 text-center">重点跟踪指标</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="text-center">
<div class="text-3xl font-bold text-blue-400 mb-2">政策信号</div>
<p class="text-sm text-gray-400">四中全会中央定调</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-green-400 mb-2">公司公告</div>
<p class="text-sm text-gray-400">重大资产重组</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-yellow-400 mb-2">跨省动态</div>
<p class="text-sm text-gray-400">省份跟进情况</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-400 mb-2">财政数据</div>
<p class="text-sm text-gray-400">非税收入变化</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-gray-800">
<div class="container mx-auto px-4 text-center">
<p class="text-gray-400 mb-4">
<i class="fas fa-info-circle"></i> 本页面内容基于公开信息整理,不构成投资建议
</p>
<p class="text-sm text-gray-500">
数据来源:新闻、路演、研报 | 更新时间2025年10月21日
</p>
</div>
</footer>
<!-- Back to Top Button -->
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})"
class="fixed bottom-8 right-8 w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white shadow-lg hover:scale-110 transition z-50">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// Add smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add intersection observer for animations
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('.hover-scale').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);
});
</script>
</body>
</html>

494
public/htmls/漫剧.html Normal file
View File

@@ -0,0 +1,494 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI漫剧爆发增长 - 200亿市场风口深度解析</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/mermaid@10/dist/mermaid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8); }
}
.glow-effect {
animation: pulse-glow 2s infinite;
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-line {
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
}
.hover-scale {
transition: all 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1f2937;
}
::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Hero Section -->
<div class="hero min-h-[60vh] bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
<div class="hero-content text-center text-white">
<div class="max-w-4xl">
<div class="badge badge-error mb-4 text-lg animate-pulse">
<i class="fas fa-fire mr-2"></i>2025年200亿市场风口
</div>
<h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text">
AI漫剧爆发增长
</h1>
<p class="text-xl md:text-2xl mb-8 text-gray-200">
制作成本压缩90% · 流水增长12倍 · 百亿新风口快速起量
</p>
<div class="stats shadow-lg bg-black/30 glass-effect">
<div class="stat">
<div class="stat-title">市场规模</div>
<div class="stat-value text-3xl md:text-4xl text-orange-400">200亿+</div>
<div class="stat-desc">2025年预测</div>
</div>
<div class="stat">
<div class="stat-title">流水增长</div>
<div class="stat-value text-3xl md:text-4xl text-green-400">12倍</div>
<div class="stat-desc">同比激增</div>
</div>
<div class="stat">
<div class="stat-title">作品数量</div>
<div class="stat-value text-3xl md:text-4xl text-blue-400">3000+</div>
<div class="stat-desc">1H25上线</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心观点 -->
<div class="container mx-auto px-4 py-12">
<div class="alert alert-info mb-8 glow-effect">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold text-lg">核心观点摘要</h3>
<div class="text-sm">AI技术革命性降本增效推动漫剧从"小众探索"迈向"百亿级商业化爆发"。当前处于需求验证与产能爬坡期核心驱动力是AI制作成本下降90%与平台流量扶持。</div>
</div>
</div>
<!-- 时间轴 -->
<div class="mb-12">
<h2 class="text-3xl font-bold mb-6 text-center">
<i class="fas fa-timeline mr-2 text-blue-400"></i>关键事件时间轴
</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full timeline-line"></div>
<div class="space-y-8">
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8 text-right">
<div class="glass-effect p-4 rounded-lg hover-scale">
<div class="text-sm text-gray-400">2025年3月</div>
<div class="font-bold">巨量引擎提出AI降本20%+</div>
<div class="text-sm">单分钟成本降至1000-2500元</div>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-500 rounded-full border-4 border-gray-900"></div>
<div class="w-full md:w-1/2 pl-8"></div>
</div>
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8"></div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full border-4 border-gray-900"></div>
<div class="w-full md:w-1/2 pl-8">
<div class="glass-effect p-4 rounded-lg hover-scale">
<div class="text-sm text-gray-400">2025年10月16日</div>
<div class="font-bold">阅文集团四大举措</div>
<div class="text-sm">开放10万IP · 亿元基金 · AIGC工具</div>
</div>
</div>
</div>
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8 text-right">
<div class="glass-effect p-4 rounded-lg hover-scale">
<div class="text-sm text-gray-400">2025年10月22日</div>
<div class="font-bold">爱奇艺分成政策</div>
<div class="text-sm">独家70% · 非独家50%</div>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-green-500 rounded-full border-4 border-gray-900"></div>
<div class="w-full md:w-1/2 pl-8"></div>
</div>
<div class="flex items-center">
<div class="w-full md:w-1/2 pr-8"></div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-orange-500 rounded-full border-4 border-gray-900"></div>
<div class="w-full md:w-1/2 pl-8">
<div class="glass-effect p-4 rounded-lg hover-scale">
<div class="text-sm text-gray-400">2025年10月23日</div>
<div class="font-bold">券商集中推荐</div>
<div class="text-sm">板块多股涨停 · 供需双井喷</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心驱动因素 -->
<div class="grid md:grid-cols-2 gap-6 mb-12">
<div class="card bg-gradient-to-br from-blue-800 to-blue-900 shadow-xl">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-microchip mr-2"></i>技术突破
</h3>
<div class="space-y-3">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-3"></i>
<span>AI工具覆盖剧本→分镜→动效全流程</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-3"></i>
<span>制作周期数月→10-13天</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-3"></i>
<span>单部成本80万+→10-30万元</span>
</div>
<div class="mt-4 p-3 bg-black/30 rounded">
<div class="text-sm text-gray-300">核心工具:</div>
<div class="flex flex-wrap gap-2 mt-2">
<span class="badge badge-info">可灵</span>
<span class="badge badge-info">即梦</span>
<span class="badge badge-info">漫剧助手</span>
<span class="badge badge-info">豆包</span>
</div>
</div>
</div>
</div>
</div>
<div class="card bg-gradient-to-br from-purple-800 to-purple-900 shadow-xl">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-rocket mr-2"></i>平台加码
</h3>
<div class="space-y-3">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-3"></i>
<span>抖音日流水从100万→1000万</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-3"></i>
<span>快手月产增加567%</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-3"></i>
<span>爱奇艺100%分成政策</span>
</div>
<div class="mt-4 p-3 bg-black/30 rounded">
<div class="text-sm text-gray-300">平台支持:</div>
<div class="flex flex-wrap gap-2 mt-2">
<span class="badge badge-warning">流量倾斜</span>
<span class="badge badge-warning">分账激励</span>
<span class="badge badge-warning">IP开放</span>
<span class="badge badge-warning">创作基金</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="mb-12">
<h2 class="text-3xl font-bold mb-6 text-center">
<i class="fas fa-sitemap mr-2 text-purple-400"></i>产业链图谱
</h2>
<div class="glass-effect p-6 rounded-lg">
<div class="mermaid">
graph TB
A[上游IP与内容生产] --> B[中游AI制作工具]
B --> C[下游:平台分发]
C --> D[C端付费用户]
subgraph 上游
A1[阅文集团<br/>10万IP储备]
A2[中文在线<br/>300部计划]
A3[欢瑞世纪<br/>AI互动影游]
end
subgraph 中游
B1[昆仑万维<br/>天工AI]
B2[捷成股份<br/>视频技术]
B3[兆驰股份<br/>橙星梦工厂]
end
subgraph 下游
C1[抖音<br/>日流水1000万]
C2[快手<br/>漫剧新漫计划]
C3[爱奇艺<br/>100%分成]
C4[芒果超媒<br/>内容平台]
end
A1 --> B
A2 --> B
A3 --> B
B --> B1
B --> B2
B --> B3
B1 --> C
B2 --> C
B3 --> C
C --> C1
C --> C2
C --> C3
C --> C4
</div>
</div>
</div>
<!-- 股票数据表格 -->
<div class="mb-12">
<h2 class="text-3xl font-bold mb-6 text-center">
<i class="fas fa-chart-line mr-2 text-green-400"></i>核心标的深度解析
</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full glass-effect">
<thead>
<tr class="text-lg">
<th>公司</th>
<th>核心项目</th>
<th>业务定位</th>
<th>信息来源</th>
<th>投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td class="font-bold text-blue-400">中文在线</td>
<td>
<div class="font-semibold">AI漫剧商业化付费</div>
<div class="badge badge-sm badge-success mt-1">爆款作品</div>
</td>
<td>IP+出海+工具链</td>
<td><span class="badge badge-info">互动</span></td>
<td>ReelShort 9月流水729万美元市占率5.5%全球第六。AI漫剧日充金额高速增长可持续发展路径清晰</td>
</tr>
<tr class="hover">
<td class="font-bold text-purple-400">阅文集团</td>
<td>
<div class="font-semibold">四大举措布局</div>
<div class="text-sm">开放10万IP · 亿元基金</div>
</td>
<td>IP储备+生态扶持</td>
<td><span class="badge badge-warning">调研</span></td>
<td>三年目标1200部漫剧其中200部改编自有IP。推出"漫剧助手"AIGC工具构建开放共赢生态</td>
</tr>
<tr class="hover">
<td class="font-bold text-green-400">欢瑞世纪</td>
<td>
<div class="font-semibold">AI漫剧布局</div>
<div class="text-sm">《十州三境》AI短剧</div>
</td>
<td>AI互动影游技术</td>
<td><span class="badge badge-secondary">调研</span></td>
<td>与阶跃星辰深度合作储备近10部AI漫剧。抖音账号累计播放量30亿+,内容能力验证</td>
</tr>
<tr class="hover">
<td class="font-bold text-orange-400">海看股份</td>
<td>
<div class="font-semibold">AI漫剧市场开发</div>
<div class="badge badge-sm badge-warning">短剧变现</div>
</td>
<td>探索商业边界</td>
<td><span class="badge">半年报</span></td>
<td>积极推进AI漫剧市场开发探索短剧商业变现市场边界</td>
</tr>
<tr class="hover">
<td class="font-bold text-pink-400">掌阅科技</td>
<td>
<div class="font-semibold">《焚星决》等AI漫剧</div>
<div class="text-sm">类真人剧</div>
</td>
<td>内容制作</td>
<td><span class="badge badge-info">互动</span></td>
<td>已上线多部AI漫剧和类真人剧作品</td>
</tr>
<tr class="hover">
<td class="font-bold text-cyan-400">捷成股份</td>
<td>
<div class="font-semibold">短剧/漫剧投入</div>
<div class="badge badge-sm">新类型内容</div>
</td>
<td>视频技术迁移</td>
<td><span class="badge">年报</span></td>
<td>2025年针对短剧、漫剧等新类型内容加大投入</td>
</tr>
<tr class="hover">
<td class="font-bold text-indigo-400">兆驰股份</td>
<td>
<div class="font-semibold">橙星梦工厂</div>
<div class="badge badge-sm badge-primary">AI漫剧平台</div>
</td>
<td>全链路平台</td>
<td><span class="badge">三季报</span></td>
<td>子公司北京风行自主研发的全链路AI漫剧平台</td>
</tr>
<tr class="hover">
<td class="font-bold text-yellow-400">华策影视</td>
<td>
<div class="font-semibold">DailyShort</div>
<div class="text-sm">短剧/动态漫</div>
</td>
<td>内容聚合平台</td>
<td><span class="badge badge-info">互动</span></td>
<td>已上线上千部作品,包括短剧、动态漫等</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 发展路径图 -->
<div class="mb-12">
<h2 class="text-3xl font-bold mb-6 text-center">
<i class="fas fa-route mr-2 text-blue-400"></i>未来发展路径
</h2>
<div class="glass-effect p-6 rounded-lg">
<div class="mermaid">
graph LR
A[2025产能爆发] --> B[2026IP全链路开发]
A --> C[2026海外市场渗透]
B --> D[2027AI互动影游]
C --> D
D --> E[2030元宇宙内容生态]
style A fill:#3b82f6
style B fill:#8b5cf6
style C fill:#10b981
style D fill:#f59e0b
style E fill:#ef4444
</div>
</div>
</div>
<!-- 风险提示 -->
<div class="alert alert-warning mb-12">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div>
<h3 class="font-bold">风险提示</h3>
<ul class="mt-2 space-y-1 text-sm">
<li><span class="text-orange-300">技术风险:</span>AI生成视频需人工调试单镜头需30次生成人物表情不自然</li>
<li><span class="text-orange-300">商业化风险:</span>用户集中于18-25岁男性(60%+)破圈依赖爆款IP</li>
<li><span class="text-orange-300">政策风险:</span>广电新规要求"剧本中心制",低俗内容面临下架</li>
<li><span class="text-orange-300">产能过剩风险:</span>各方加码布局2025年或出现产能过剩</li>
</ul>
</div>
</div>
<!-- 投资建议 -->
<div class="card bg-gradient-to-r from-indigo-800 to-purple-900 shadow-xl mb-12">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<i class="fas fa-lightbulb mr-2 text-yellow-400"></i>投资启示
</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-black/30 p-4 rounded-lg">
<h3 class="font-bold text-lg mb-2 text-green-400">短期看</h3>
<p>平台政策红利期,关注分账激励效果</p>
</div>
<div class="bg-black/30 p-4 rounded-lg">
<h3 class="font-bold text-lg mb-2 text-blue-400">中期看</h3>
<p>IP储备与AI工具壁垒是核心竞争力</p>
</div>
<div class="bg-black/30 p-4 rounded-lg">
<h3 class="font-bold text-lg mb-2 text-purple-400">长期看</h3>
<p>AI交互技术升级元宇宙内容生态</p>
</div>
</div>
<div class="divider"></div>
<div class="stat-title text-center text-lg">
<span class="text-orange-400 font-bold">关键跟踪指标:</span>
月产能(目标50部+) · 日流水(突破2000万) · 付费转化率(5%+)
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer footer-center p-10 bg-black/80 text-base-content">
<div>
<p class="font-bold text-lg">
AI漫剧爆发增长 · 深度解析报告
</p>
<p class="text-sm">数据来源:巨量引擎、各公司财报、券商研报</p>
<p class="text-xs mt-2">投资有风险,决策需谨慎</p>
</div>
</footer>
<script>
// Initialize Mermaid
mermaid.initialize({
startOnLoad: true,
theme: 'dark',
themeVariables: {
primaryColor: '#3b82f6',
primaryTextColor: '#fff',
primaryBorderColor: '#1e40af',
lineColor: '#6b7280',
sectionBkgColor: '#1f2937',
altSectionBkgColor: '#111827',
gridColor: '#374151'
}
});
// Add animations
document.addEventListener('DOMContentLoaded', function() {
// Fade in animations
const elements = document.querySelectorAll('.glass-effect');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '0';
entry.target.style.transform = 'translateY(20px)';
setTimeout(() => {
entry.target.style.transition = 'all 0.5s ease';
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, 100);
}
});
});
elements.forEach(element => {
observer.observe(element);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,416 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>灯塔工厂概念深度解析</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></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=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-morphism {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.timeline-item::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: #6366f1;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}
.timeline-line {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #6366f1 0%, #a855f7 100%);
}
.stat-card {
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.badge-glow {
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); }
50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
min-width: 800px;
}
@media (max-width: 640px) {
.table-responsive {
margin: 0 -1rem;
padding: 0 1rem;
}
}
.pulse-dot {
display: inline-block;
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
</style>
</head>
<body>
<div class="min-h-screen p-4 md:p-8">
<!-- 头部 -->
<header class="glass-morphism rounded-2xl p-6 md:p-8 mb-8 shadow-2xl">
<div class="flex items-center justify-between flex-wrap gap-4">
<div>
<h1 class="text-3xl md:text-5xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-2">
灯塔工厂概念
</h1>
<p class="text-gray-600 flex items-center gap-2">
<span class="pulse-dot"></span>
<span>制造业智能化转型的全球标杆</span>
</p>
</div>
<div class="flex gap-3">
<span class="badge badge-lg badge-info badge-glow">AI+制造</span>
<span class="badge badge-lg badge-success">中国领先</span>
</div>
</div>
</header>
<!-- 核心数据展示 -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div class="stat-card glass-morphism rounded-xl p-6 text-center">
<div class="text-4xl font-bold text-indigo-600">50%</div>
<div class="text-sm text-gray-600 mt-2">新增工厂数中国占比</div>
</div>
<div class="stat-card glass-morphism rounded-xl p-6 text-center">
<div class="text-4xl font-bold text-purple-600">6家</div>
<div class="text-sm text-gray-600 mt-2">中国新增灯塔工厂数</div>
</div>
<div class="stat-card glass-morphism rounded-xl p-6 text-center">
<div class="text-4xl font-bold text-pink-600">70-80%</div>
<div class="text-sm text-gray-600 mt-2">生产效率提升</div>
</div>
<div class="stat-card glass-morphism rounded-xl p-6 text-center">
<div class="text-4xl font-bold text-cyan-600">-50%</div>
<div class="text-sm text-gray-600 mt-2">用工人数减少</div>
</div>
</div>
<!-- 时间轴 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-clock text-indigo-600"></i>
关键时间轴
</h2>
<div class="relative pl-8">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="timeline-item relative">
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4">
<div class="font-bold text-indigo-600">2018年</div>
<div class="text-gray-700">世界经济论坛启动"全球灯塔网络"项目</div>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4">
<div class="font-bold text-purple-600">2025年7月25日</div>
<div class="text-gray-700">湖北省计划开工美的全球"灯塔工厂"升级项目</div>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-gradient-to-r from-pink-50 to-red-50 rounded-lg p-4 border-2 border-red-200">
<div class="font-bold text-red-600">2025年9月16日</div>
<div class="text-gray-700 font-semibold">核心催化事件WEF公布新名单中国占6家</div>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg p-4">
<div class="font-bold text-orange-600">2025年10月9日</div>
<div class="text-gray-700">市场情绪高峰,概念股成为舆论焦点</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心逻辑 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-brain text-purple-600"></i>
三重核心驱动力
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6">
<div class="text-3xl mb-3">🏛️</div>
<h3 class="font-bold text-lg mb-2 text-blue-800">政策驱动</h3>
<p class="text-sm text-gray-700">与《中国制造2025》深度绑定政策引导和行业标准确认</p>
</div>
<div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6">
<div class="text-3xl mb-3">🤖</div>
<h3 class="font-bold text-lg mb-2 text-purple-800">技术成熟</h3>
<p class="text-sm text-gray-700">云计算、大数据、AI、5G等技术融合推动智能化转型</p>
</div>
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6">
<div class="text-3xl mb-3">💰</div>
<h3 class="font-bold text-lg mb-2 text-green-800">商业价值</h3>
<p class="text-sm text-gray-700">降本增效显著材料利用率98%,毛利率提升</p>
</div>
</div>
</div>
<!-- 产业链分析 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-sitemap text-green-600"></i>
产业链图谱
</h2>
<div class="space-y-4">
<div class="flex items-center gap-3 bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg p-4">
<span class="badge badge-lg badge-secondary">上游</span>
<span class="text-gray-700">基础技术与硬件(芯片、传感器、机器人本体、云计算)</span>
</div>
<div class="flex items-center gap-3 bg-gradient-to-r from-blue-50 to-indigo-100 rounded-lg p-4">
<span class="badge badge-lg badge-primary">中游</span>
<div class="flex-1">
<div class="font-semibold mb-1">核心赋能层</div>
<div class="flex flex-wrap gap-2">
<span class="badge badge-info">工业软件</span>
<span class="badge badge-info">自动化设备</span>
<span class="badge badge-info">系统集成</span>
<span class="badge badge-info">咨询设计</span>
</div>
</div>
</div>
<div class="flex items-center gap-3 bg-gradient-to-r from-purple-50 to-purple-100 rounded-lg p-4">
<span class="badge badge-lg badge-accent">下游</span>
<span class="text-gray-700">灯塔工厂所有者(家电、新能源、工程机械等行业龙头)</span>
</div>
</div>
</div>
<!-- 股票数据表格 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-chart-line text-indigo-600"></i>
核心企业分析
</h2>
<!-- 灯塔工厂拥有者 -->
<div class="mb-8">
<h3 class="text-lg font-semibold mb-4 text-indigo-600">
<i class="fas fa-trophy mr-2"></i>灯塔工厂所有者
</h3>
<div class="table-responsive">
<table class="table table-zebra w-full">
<thead>
<tr class="bg-gradient-to-r from-indigo-500 to-purple-500 text-white">
<th>股票名称</th>
<th>灯塔工厂数量</th>
<th>行业地位</th>
<th>投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">海尔智家</td>
<td><span class="badge badge-success badge-lg">12座</span></td>
<td>全球第一</td>
<td class="text-sm">智能制造顶级实践,组织能力领先</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">工业富联</td>
<td><span class="badge badge-info badge-lg">8座</span></td>
<td>A股第二</td>
<td class="text-sm">消费电子制造,富士康生态优势</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">美的集团</td>
<td><span class="badge badge-info badge-lg">8座</span></td>
<td>A股第二</td>
<td class="text-sm">家电龙头,智能化转型标杆</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">宁德时代</td>
<td><span class="badge badge-warning badge-lg">3座</span></td>
<td>A股第三</td>
<td class="text-sm">新能源赛道核心,成本与技术优势</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-bold">三一重工</td>
<td><span class="badge badge-warning badge-lg">3座</span></td>
<td>A股第三</td>
<td class="text-sm">重工业智能化代表AI赋能前景</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 核心赋能者 -->
<div>
<h3 class="text-lg font-semibold mb-4 text-purple-600">
<i class="fas fa-cogs mr-2"></i>核心技术赋能者
</h3>
<div class="table-responsive">
<table class="table table-zebra w-full">
<thead>
<tr class="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
<th>股票名称</th>
<th>业务领域</th>
<th>相关业务</th>
<th>核心优势</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">埃斯顿</td>
<td><span class="badge badge-primary">工业机器人</span></td>
<td class="text-sm">参与锂电、光伏、工程机械等多行业灯塔工厂建设</td>
<td class="text-sm">多行业应用经验,受益自动化渗透</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">中控技术</td>
<td><span class="badge badge-primary">工业控制</span></td>
<td class="text-sm">打造Industrial AI标杆案例及灯塔工厂</td>
<td class="text-sm">平台级选手,跨行业赋能</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">中望软件</td>
<td><span class="badge badge-primary">工业软件</span></td>
<td class="text-sm">研发设计类工业软件,灯塔客户推广</td>
<td class="text-sm">国产替代,研发创新基石</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">东土科技</td>
<td><span class="badge badge-primary">工业通信</span></td>
<td class="text-sm">联合发布全球灯塔工厂5G云化PLC应用</td>
<td class="text-sm">5G+工业互联网技术领先</td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="font-bold">鼎捷数智</td>
<td><span class="badge badge-primary">MES系统</span></td>
<td class="text-sm">打造戴卡世界灯塔工厂等标杆案例</td>
<td class="text-sm">制造执行领域专业服务商</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 投资启示 -->
<div class="glass-morphism rounded-2xl p-6 md:p-8 mt-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i class="fas fa-lightbulb text-yellow-500"></i>
投资启示
</h2>
<div class="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-xl p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-bold text-lg mb-3 text-orange-800">投资价值排序</h3>
<ol class="space-y-2">
<li class="flex items-start gap-2">
<span class="badge badge-warning">1</span>
<span class="text-sm">工业软件与自动化平台商(中控技术、埃斯顿)</span>
</li>
<li class="flex items-start gap-2">
<span class="badge badge-warning">2</span>
<span class="text-sm">战略践行的下游龙头(三一重工、宁德时代)</span>
</li>
</ol>
</div>
<div>
<h3 class="font-bold text-lg mb-3 text-orange-800">关键跟踪指标</h3>
<ul class="space-y-1 text-sm">
<li class="flex items-center gap-2">
<i class="fas fa-check-circle text-green-500"></i>
<span>赋能者:收入增速、毛利率、新签订单</span>
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check-circle text-green-500"></i>
<span>所有者:毛利率、人均产值、存货周转率</span>
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check-circle text-green-500"></i>
<span>宏观:政策动向、产业基金投入</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="text-center mt-12 text-white">
<p class="text-sm opacity-80">数据来源:公开信息整理 | 仅供研究参考</p>
</footer>
</div>
<script>
// 添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 表格响应式处理
function handleTableResize() {
const tables = document.querySelectorAll('.table-responsive');
tables.forEach(table => {
if (window.innerWidth < 640) {
table.style.width = '100vw';
} else {
table.style.width = '100%';
}
});
}
window.addEventListener('resize', handleTableResize);
handleTableResize();
</script>
</body>
</html>

View File

@@ -0,0 +1,614 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>燃气轮机HRSG - AI驱动的电力革命</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
width: 3px;
position: absolute;
left: 20px;
top: 0;
bottom: 0;
}
.timeline-dot {
width: 16px;
height: 16px;
background: #667eea;
border: 3px solid white;
border-radius: 50%;
position: absolute;
left: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.scroll-indicator {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.table-container {
overflow-x: auto;
}
@media (max-width: 768px) {
.table-container {
font-size: 0.75rem;
}
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<div class="gradient-bg text-white">
<div class="container mx-auto px-4 py-16">
<div class="text-center">
<div class="badge badge-accent badge-lg mb-4">AI电力革命核心概念</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6">燃气轮机HRSG</h1>
<p class="text-xl md:text-2xl mb-8 opacity-90">人工智能驱动的全球性电力危机与投资机遇</p>
<div class="flex justify-center gap-4 mb-8">
<div class="badge badge-outline badge-lg">5000亿美元投资</div>
<div class="badge badge-outline badge-lg">订单排至2028年</div>
<div class="badge badge-outline badge-lg">3-5年高景气周期</div>
</div>
<div class="scroll-indicator">
<svg class="w-6 h-6 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
</div>
</div>
</div>
<!-- Key Stats Section -->
<div class="container mx-auto px-4 -mt-10 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body text-center">
<div class="stat-number">190%</div>
<div class="text-gray-600 font-semibold">GE Vernova Q4订单同比增长</div>
<p class="text-sm text-gray-500 mt-2">2024年Q4签约6.1GW全年签约20.2GW</p>
</div>
</div>
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body text-center">
<div class="stat-number">76.3%</div>
<div class="text-gray-600 font-semibold">三大巨头市场份额</div>
<p class="text-sm text-gray-500 mt-2">三菱重工、西门子能源、GE Vernova</p>
</div>
</div>
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body text-center">
<div class="stat-number">3-5年</div>
<div class="text-gray-600 font-semibold">订单积压周期</div>
<p class="text-sm text-gray-500 mt-2">制造订单积压,供给严重不足</p>
</div>
</div>
</div>
</div>
<!-- Timeline Section -->
<div class="container mx-auto px-4 py-16">
<h2 class="text-3xl font-bold text-center mb-12">概念事件时间轴</h2>
<div class="max-w-4xl mx-auto">
<div class="timeline-line"></div>
<div class="relative flex items-start mb-8">
<div class="timeline-dot" style="top: 5px;"></div>
<div class="ml-12 card bg-base-100 shadow-lg card-hover flex-1">
<div class="card-body">
<div class="badge badge-primary mb-2">2023年</div>
<h3 class="card-title">AI需求萌芽</h3>
<p>海内外科技巨头开启算力"军备竞赛",数据中心电力问题开始显现</p>
</div>
</div>
</div>
<div class="relative flex items-start mb-8">
<div class="timeline-dot" style="top: 5px;"></div>
<div class="ml-12 card bg-base-100 shadow-lg card-hover flex-1">
<div class="card-body">
<div class="badge badge-primary mb-2">2025年1月</div>
<h3 class="card-title">"星际之门"计划引爆市场</h3>
<p>特朗普宣布OpenAI、软银、甲骨文联合成立"星际之门"项目投资至少5000亿美元</p>
</div>
</div>
</div>
<div class="relative flex items-start mb-8">
<div class="timeline-dot" style="top: 5px;"></div>
<div class="ml-12 card bg-base-100 shadow-lg card-hover flex-1">
<div class="card-body">
<div class="badge badge-primary mb-2">2025年6月</div>
<h3 class="card-title">认知深化</h3>
<p>明确小型燃机作为备用电源角色订单积压3-5年信息被广泛认知</p>
</div>
</div>
</div>
<div class="relative flex items-start">
<div class="timeline-dot" style="top: 5px;"></div>
<div class="ml-12 card bg-base-100 shadow-lg card-hover flex-1">
<div class="card-body">
<div class="badge badge-primary mb-2">2025年9月</div>
<h3 class="card-title">热度新高</h3>
<p>甲骨文-OpenAI签署3000亿美元算力协议GEV股价大涨</p>
</div>
</div>
</div>
</div>
</div>
<!-- Core Logic Section -->
<div class="bg-gray-100 py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">核心逻辑分析</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<span class="badge badge-accent mr-2">需求端</span>
不可能三角
</h3>
<ul class="space-y-3">
<li class="flex items-start">
<span class="text-primary mr-2"></span>
<div>
<strong>大规模:</strong>美国AI数据中心用电量预计从2023年4.4%增至2028年6.7%-12%
</div>
</li>
<li class="flex items-start">
<span class="text-primary mr-2"></span>
<div>
<strong>高稳定:</strong>T4级数据中心需2N+1备用电源燃气轮机可靠性高
</div>
</li>
<li class="flex items-start">
<span class="text-primary mr-2"></span>
<div>
<strong>快速部署:</strong>建设周期远短于核电10年以上是短期最优解
</div>
</li>
</ul>
</div>
</div>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<span class="badge badge-accent mr-2">供给端</span>
刚性瓶颈
</h3>
<ul class="space-y-3">
<li class="flex items-start">
<span class="text-secondary mr-2"></span>
<div>
<strong>寡头垄断:</strong>GE、西门子、三菱占据76.3%市场份额
</div>
</li>
<li class="flex items-start">
<span class="text-secondary mr-2"></span>
<div>
<strong>扩产困难:</strong>技术壁垒高扩产周期长达24个月以上
</div>
</li>
<li class="flex items-start">
<span class="text-secondary mr-2"></span>
<div>
<strong>供需错配:</strong>订单排至2028年上游零部件供应商扩产意愿低
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Market Cognition Gap -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl mb-6">市场认知差分析</h3>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>认知差</th>
<th>市场普遍认知</th>
<th>实际情况</th>
<th>投资启示</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-semibold">主电源vs备用电源</td>
<td>燃气轮机成本高,不受数据中心青睐</td>
<td>美国采用"电网+燃气轮机主电源+小型燃机备用"</td>
<td class="text-success">需求远超备用电源市场</td>
</tr>
<tr>
<td class="font-semibold">国产vs全球配套</td>
<td>聚焦东方电气等国产整机替代</td>
<td>国内零部件企业切入全球供应链</td>
<td class="text-success">零部件企业弹性更大</td>
</tr>
<tr>
<td class="font-semibold">燃机vs HRSG</td>
<td>热议燃气轮机整机</td>
<td>HRSG是CCGT电站核心组件</td>
<td class="text-warning">HRSG关注度相对不足</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Industry Chain Section -->
<div class="container mx-auto px-4 py-16">
<h2 class="text-3xl font-bold text-center mb-12">产业链与核心公司</h2>
<div class="mb-12">
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl mb-6">产业链图谱</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="text-center p-4 bg-primary/10 rounded-lg">
<div class="text-lg font-semibold mb-2">上游</div>
<div class="text-sm">高温合金材料</div>
<div class="text-sm">精密铸件/锻件</div>
<div class="badge badge-primary badge-sm mt-2">万泽股份</div>
</div>
<div class="text-center p-4 bg-secondary/10 rounded-lg">
<div class="text-lg font-semibold mb-2">中游-零部件</div>
<div class="text-sm">涡轮叶片</div>
<div class="text-sm">压气机叶片</div>
<div class="text-sm">缸体/环类件</div>
<div class="flex flex-wrap gap-1 justify-center mt-2">
<span class="badge badge-secondary badge-sm">应流股份</span>
<span class="badge badge-secondary badge-sm">豪迈科技</span>
<span class="badge badge-secondary badge-sm">航宇科技</span>
</div>
</div>
<div class="text-center p-4 bg-accent/10 rounded-lg">
<div class="text-lg font-semibold mb-2">中游-HRSG</div>
<div class="text-sm">余热锅炉</div>
<div class="text-sm">热交换系统</div>
<div class="flex flex-wrap gap-1 justify-center mt-2">
<span class="badge badge-accent badge-sm">华光环能</span>
<span class="badge badge-accent badge-sm">西子洁能</span>
<span class="badge badge-accent badge-sm">博盈特焊</span>
</div>
</div>
<div class="text-center p-4 bg-info/10 rounded-lg">
<div class="text-lg font-semibold mb-2">下游</div>
<div class="text-sm">整机制造</div>
<div class="text-sm">系统集成</div>
<div class="flex flex-wrap gap-1 justify-center mt-2">
<span class="badge badge-info badge-sm">东方电气</span>
<span class="badge badge-info badge-sm">杰瑞股份</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl mb-6">核心标的股票数据</h3>
<div class="table-container">
<table class="table table-compact w-full">
<thead>
<tr>
<th>股票代码</th>
<th>股票名称</th>
<th>分类</th>
<th>产业链定位</th>
<th>核心项目/客户</th>
<th>投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td>应流股份</td>
<td class="font-semibold text-primary">应流股份</td>
<td><span class="badge badge-primary badge-sm">燃气轮机零部件</span></td>
<td>燃机叶片龙头</td>
<td>涡轮叶片、GE/西门子/贝克休斯</td>
<td>国内燃机叶片龙头,高价值量核心部件</td>
</tr>
<tr class="hover">
<td>杰瑞股份</td>
<td class="font-semibold text-primary">杰瑞股份</td>
<td><span class="badge badge-info badge-sm">系统集成</span></td>
<td>西门子授权成套商</td>
<td>燃气轮机发电机组、西门子合作</td>
<td>燃气轮机整机供应商,受益北美高景气</td>
</tr>
<tr class="hover">
<td>豪迈科技</td>
<td class="font-semibold text-primary">豪迈科技</td>
<td><span class="badge badge-primary badge-sm">燃气轮机零部件</span></td>
<td>大型结构件供应商</td>
<td>缸体/环类件、GE/三菱/西门子</td>
<td>全球市场份额40%,受益于全球需求景气</td>
</tr>
<tr class="hover">
<td>华光环能</td>
<td class="font-semibold text-primary">华光环能</td>
<td><span class="badge badge-accent badge-sm">余热锅炉HRSG</span></td>
<td>余热锅炉龙头</td>
<td>卧式/立式自然循环HRSG技术</td>
<td>市场占有率前三掌握HRSG核心技术</td>
</tr>
<tr class="hover">
<td>东方电气</td>
<td class="font-semibold text-primary">东方电气</td>
<td><span class="badge badge-info badge-sm">燃气轮机整机</span></td>
<td>国内整机龙头</td>
<td>深耕燃气轮机20年、F级300兆瓦</td>
<td>国内燃气轮机市场占有率领先</td>
</tr>
<tr class="hover">
<td>航宇科技</td>
<td class="font-semibold text-primary">航宇科技</td>
<td><span class="badge badge-primary badge-sm">燃气轮机零部件</span></td>
<td>压气机/燃烧室供应商</td>
<td>GE Vernova新品导入</td>
<td>为全球主流燃机厂商提供关键部件</td>
</tr>
<tr class="hover">
<td>西子洁能</td>
<td class="font-semibold text-primary">西子洁能</td>
<td><span class="badge badge-accent badge-sm">余热锅炉HRSG</span></td>
<td>余热锅炉龙头</td>
<td>2024年HRSG模块产品增多</td>
<td>余热锅炉市场占有率领先</td>
</tr>
<tr class="hover">
<td>博盈特焊</td>
<td class="font-semibold text-primary">博盈特焊</td>
<td><span class="badge badge-accent badge-sm">余热锅炉HRSG</span></td>
<td>余热锅炉制造</td>
<td>2025年9月越南工厂投产</td>
<td>越南工厂投产承接北美HRSG需求</td>
</tr>
<tr class="hover">
<td>联德股份</td>
<td class="font-semibold text-primary">联德股份</td>
<td><span class="badge badge-primary badge-sm">燃气轮机零部件</span></td>
<td>燃气轮机零部件</td>
<td>已开拓燃气轮机零部件产品</td>
<td>实现燃气轮机零部件小批量供货</td>
</tr>
<tr class="hover">
<td>万泽股份</td>
<td class="font-semibold text-primary">万泽股份</td>
<td><span class="badge badge-primary badge-sm">燃气轮机零部件</span></td>
<td>高温合金材料</td>
<td>高温合金产品用于燃气轮机</td>
<td>高温合金材料应用于燃气轮机</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Risk & Conclusion Section -->
<div class="bg-gray-100 py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">风险提示与投资结论</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<span class="badge badge-error mr-2">风险</span>
主要风险点
</h3>
<ul class="space-y-3">
<li class="flex items-start">
<span class="text-error mr-2"></span>
<div>
<strong>国际贸易摩擦:</strong>最大的风险点,若限制中国零部件进入美国供应链将造成毁灭性打击
</div>
</li>
<li class="flex items-start">
<span class="text-error mr-2"></span>
<div>
<strong>AI投资周期波动</strong>若AI发展不及预期数据中心建设放缓将直接影响需求
</div>
</li>
<li class="flex items-start">
<span class="text-error mr-2"></span>
<div>
<strong>国际巨头扩产:</strong>海外供应商扩产可能缓解供需紧张,挤压利润空间
</div>
</li>
<li class="flex items-start">
<span class="text-error mr-2"></span>
<div>
<strong>氢能替代不确定性:</strong>纯氢燃烧技术路径存在不确定性
</div>
</li>
</ul>
</div>
</div>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<span class="badge badge-success mr-2">结论</span>
投资启示
</h3>
<div class="space-y-4">
<div class="alert alert-success">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<strong>基本面兑现初期:</strong>概念已脱离纯题材炒作,进入业绩驱动阶段
</div>
</div>
<div class="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<strong>高景气窗口期:</strong>至少3-5年的高景气周期
</div>
</div>
<div class="alert alert-warning">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div>
<strong>关注核心指标:</strong>订单能见度、核心公司财报、地缘政治动向
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Final Investment Advice -->
<div class="card bg-gradient-to-r from-primary to-secondary text-white shadow-xl">
<div class="card-body text-center">
<h3 class="card-title text-2xl mb-4">最具投资价值的细分环节</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="glass-effect rounded-lg p-4">
<div class="text-lg font-bold mb-2">🔥 核心零部件</div>
<p class="text-sm">技术壁垒最高、价值量最大</p>
<div class="badge badge-accent mt-2">应流股份</div>
</div>
<div class="glass-effect rounded-lg p-4">
<div class="text-lg font-bold mb-2">⚡ 余热锅炉HRSG</div>
<p class="text-sm">市场关注度相对较低,存在预期差</p>
<div class="badge badge-accent mt-2">华光环能</div>
</div>
<div class="glass-effect rounded-lg p-4">
<div class="text-lg font-bold mb-2">🌍 系统集成商</div>
<p class="text-sm">属地化服务能力强</p>
<div class="badge badge-accent mt-2">杰瑞股份</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">燃气轮机HRSG概念深度分析</p>
<p class="text-sm text-gray-400">数据来源:公开研报、路演记录、公司公告 | 更新时间2025年</p>
</div>
</footer>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add animation on scroll
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').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,793 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子特气六氟化钨(WF6)概念深度分析</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
body {
background: #f5f5f5;
line-height: 1.6;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.header-title h1 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.header-title p {
opacity: 0.9;
}
.header-stats {
display: flex;
gap: 2rem;
}
.stat-item {
text-align: center;
}
.stat-item .value {
font-size: 1.5rem;
font-weight: bold;
}
.stat-item .label {
font-size: 0.875rem;
opacity: 0.9;
}
.tabs {
background: white;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.tabs-container {
display: flex;
gap: 0.5rem;
padding: 1rem;
overflow-x: auto;
}
.tab-btn {
padding: 0.75rem 1.5rem;
border: none;
background: #f3f4f6;
cursor: pointer;
border-radius: 0.5rem;
font-size: 1rem;
white-space: nowrap;
transition: all 0.3s;
}
.tab-btn:hover {
background: #e5e7eb;
}
.tab-btn.active {
background: #4f46e5;
color: white;
}
.main-content {
padding: 2rem 0;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.card {
background: white;
border-radius: 0.75rem;
padding: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #1f2937;
}
.grid {
display: grid;
gap: 1.5rem;
}
.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-4 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.metric-card {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
padding: 1.5rem;
border-radius: 0.5rem;
border-left: 4px solid #3b82f6;
}
.metric-card .title {
color: #64748b;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.metric-card .value {
font-size: 2rem;
font-weight: bold;
color: #3b82f6;
margin-bottom: 0.25rem;
}
.metric-card .desc {
color: #64748b;
font-size: 0.875rem;
}
.timeline-item {
position: relative;
padding-left: 2rem;
padding-bottom: 2rem;
}
.timeline-item:before {
content: '';
position: absolute;
left: 0.375rem;
top: 0.375rem;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #4f46e5;
}
.timeline-item:after {
content: '';
position: absolute;
left: 0.625rem;
top: 1rem;
width: 2px;
height: calc(100% - 1rem);
background: #e5e7eb;
}
.timeline-item:last-child:after {
display: none;
}
.timeline-content {
background: #fef2f2;
border-left: 4px solid #ef4444;
padding: 1rem;
border-radius: 0.5rem;
}
.timeline-content.warning {
background: #fefce8;
border-left-color: #eab308;
}
.timeline-content.success {
background: #f0fdf4;
border-left-color: #22c55e;
}
.timeline-date {
display: inline-block;
background: #ef4444;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.75rem;
margin-bottom: 0.5rem;
}
.timeline-content.warning .timeline-date {
background: #eab308;
}
.timeline-content.success .timeline-date {
background: #22c55e;
}
.timeline-content h3 {
color: #991b1b;
margin-bottom: 0.5rem;
}
.timeline-content.warning h3 {
color: #854d0e;
}
.timeline-content.success h3 {
color: #166534;
}
.info-box {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid #bae6fd;
}
.info-box h3 {
color: #0369a1;
margin-bottom: 1rem;
}
.info-box ul {
list-style: none;
}
.info-box li {
padding: 0.5rem 0;
color: #334155;
}
.info-box li:before {
content: '• ';
color: #3b82f6;
font-weight: bold;
margin-right: 0.5rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
th {
background: #f9fafb;
font-weight: 600;
color: #374151;
}
tr:hover {
background: #f9fafb;
}
.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
}
.badge-blue {
background: #dbeafe;
color: #1e40af;
}
.badge-yellow {
background: #fef3c7;
color: #92400e;
}
.badge-green {
background: #d1fae5;
color: #065f46;
}
.filter-btns {
margin-bottom: 1rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.5rem 1rem;
border: none;
background: #e5e7eb;
cursor: pointer;
border-radius: 0.375rem;
font-size: 0.875rem;
}
.filter-btn.active {
background: #4f46e5;
color: white;
}
.footer {
background: #1f2937;
color: white;
text-align: center;
padding: 2rem 1rem;
margin-top: 3rem;
}
.footer p {
margin: 0.5rem 0;
}
.highlight {
color: #4f46e5;
font-weight: 600;
}
@media (max-width: 768px) {
.header-stats {
display: none;
}
.header-title h1 {
font-size: 1.5rem;
}
table {
font-size: 0.875rem;
}
th, td {
padding: 0.5rem;
}
}
</style>
</head>
<body>
<!-- Header -->
<div class="header">
<div class="container">
<div class="header-content">
<div class="header-title">
<h1>⚛️ 电子特气六氟化钨(WF6)</h1>
<p>半导体制造核心材料 · 国产替代先锋</p>
</div>
<div class="header-stats">
<div class="stat-item">
<div class="value">70-90%</div>
<div class="label">韩厂涨幅</div>
</div>
<div class="stat-item">
<div class="value">42.44%</div>
<div class="label">需求CAGR</div>
</div>
<div class="stat-item">
<div class="value">2230吨</div>
<div class="label">中船特气产能</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tabs -->
<div class="tabs">
<div class="container">
<div class="tabs-container">
<button class="tab-btn active" onclick="switchTab('overview')">概念概览</button>
<button class="tab-btn" onclick="switchTab('timeline')">事件时间轴</button>
<button class="tab-btn" onclick="switchTab('analysis')">深度分析</button>
<button class="tab-btn" onclick="switchTab('industry')">产业链</button>
<button class="tab-btn" onclick="switchTab('stocks')">核心股票</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<div class="container">
<!-- Overview Tab -->
<div id="overview" class="tab-content active">
<div class="card">
<h2>📊 核心观点摘要</h2>
<div class="grid grid-2">
<div class="info-box">
<h3>市场状态</h3>
<p>六氟化钨概念正处于<span class="highlight">供需错配与涨价周期的起点</span>,核心驱动力来自上游成本推动、供应收缩和下游需求爆发。</p>
</div>
<div class="info-box">
<h3>关键催化剂</h3>
<ul>
<li>韩国厂商2026年执行新价格(+70%-90%)</li>
<li>中船特气2026年目标产能2000吨</li>
<li>三星、SK海力士HBM扩产计划</li>
</ul>
</div>
</div>
</div>
<div class="card">
<h2>📈 关键指标</h2>
<div class="grid grid-4">
<div class="metric-card">
<div class="title">全球市场份额</div>
<div class="value">35%</div>
<div class="desc">中国厂商占比</div>
</div>
<div class="metric-card">
<div class="title">国产化率</div>
<div class="value">12%</div>
<div class="desc">当前市场替代率</div>
</div>
<div class="metric-card">
<div class="title">2025年需求</div>
<div class="value">4500吨</div>
<div class="desc">国内预计需求</div>
</div>
<div class="metric-card">
<div class="title">成本涨幅</div>
<div class="value">100%</div>
<div class="desc">钨粉价格翻倍</div>
</div>
</div>
</div>
</div>
<!-- Timeline Tab -->
<div id="timeline" class="tab-content">
<div class="card">
<h2>⏰ 概念事件时间轴</h2>
<div class="timeline-item">
<div class="timeline-content">
<span class="timeline-date">2025-08-07</span>
<h3>日本关东电化工厂爆炸</h3>
<p>日本关东电化涩川工厂发生爆炸,影响<strong>1400吨WF6产能</strong>,全球供应收紧。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content warning">
<span class="timeline-date">2025-10-23</span>
<h3>韩国厂商宣布涨价</h3>
<p>韩国主要WF6供应商(SK Specialty、厚城等)宣布2026年起将价格上调<strong>70%-90%</strong></p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content success">
<span class="timeline-date">2025-10-28</span>
<h3>中船特气回应涨价预期</h3>
<p>公司可完全覆盖成本,吨净利有望大幅提升;国内钨出口限制赋予厂商<strong>原材料成本优势</strong></p>
</div>
</div>
</div>
</div>
<!-- Analysis Tab -->
<div id="analysis" class="tab-content">
<div class="card">
<h2>🧠 核心逻辑分析</h2>
<div class="grid grid-3">
<div class="info-box">
<h3>⚖️ 供需错配</h3>
<p>海外厂商主导(日韩占80%+),但日本事故导致1400吨产能受阻,韩国厂商计划压缩产能。</p>
<p style="margin-top: 1rem;"><strong>2025年国内需求预计达4500吨</strong></p>
</div>
<div class="info-box">
<h3>💰 成本推动</h3>
<p>钨粉占WF6成本的50%,价格从20万元/吨涨至40万元/吨,直接推高生产成本。</p>
<p style="margin-top: 1rem;"><strong>钨粉价格涨幅:100%</strong></p>
</div>
<div class="info-box">
<h3>🚀 国产替代</h3>
<p>政策驱动下,中船特气、昊华科技等龙头加速突破客户验证壁垒。</p>
<p style="margin-top: 1rem;"><strong>国产化率目标:60%+</strong></p>
</div>
</div>
</div>
<div class="card">
<h2>📊 市场情绪与预期差</h2>
<div class="grid grid-2">
<div>
<h3 style="color: #22c55e; margin-bottom: 1rem;">😊 乐观因素</h3>
<ul style="list-style: none; padding: 0;">
<li style="padding: 0.5rem 0;">✓ 新闻和研报密集发布,市场高度关注韩国涨价和日本事故</li>
<li style="padding: 0.5rem 0;">✓ 半导体先进制程(3nm/5nm)和HBM扩产拉动需求</li>
<li style="padding: 0.5rem 0;">✓ 国内厂商获得原材料成本优势(钨出口限制)</li>
</ul>
</div>
<div>
<h3 style="color: #ef4444; margin-bottom: 1rem;">⚠️ 风险与预期差</h3>
<ul style="list-style: none; padding: 0;">
<li style="padding: 0.5rem 0;">✗ 涨价传导延迟:国内涨价幅度仅50%+,弱于海外70-90%</li>
<li style="padding: 0.5rem 0;">✗ 产能瓶颈:中船特气实际月产仅20.2吨,达产率存疑</li>
<li style="padding: 0.5rem 0;">✗ 技术壁垒:高纯WF6提纯和包装物依赖进口</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Industry Tab -->
<div id="industry" class="tab-content">
<div class="card">
<h2>🗺️ 产业链图谱</h2>
<div class="grid grid-3">
<div class="info-box">
<h3>⛰️ 上游:原材料</h3>
<p>钨粉供应商(国内为主)</p>
<p><strong>成本占比:50%</strong></p>
</div>
<div class="info-box">
<h3>🏭 中游:WF6制造</h3>
<p>中船特气、昊华科技等</p>
<p><strong>技术壁垒:高</strong></p>
</div>
<div class="info-box">
<h3>💻 下游:应用</h3>
<p>半导体晶圆厂、面板厂</p>
<p><strong>工艺:金属薄膜沉积</strong></p>
</div>
</div>
</div>
<div class="card">
<h2>🏆 核心玩家对比</h2>
<table>
<thead>
<tr>
<th>公司</th>
<th>产能/份额</th>
<th>竞争优势</th>
<th>风险点</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>中船特气</strong></td>
<td>全球第一(2230吨)<br>全球覆盖率70.31%</td>
<td>国内市占率65%<br>客户覆盖三星/台积电</td>
<td>产能达产率<br>涨价传导延迟</td>
</tr>
<tr>
<td><strong>昊华科技</strong></td>
<td>600吨<br>在建1300吨</td>
<td>六氟丁二烯全球第一<br>多品类布局</td>
<td>产能规模较小</td>
</tr>
<tr>
<td><strong>广钢气体</strong></td>
<td>产能未公开</td>
<td>电子大宗气体<br>全品类覆盖</td>
<td>WF6业务占比不明确</td>
</tr>
<tr>
<td><strong>华特气体</strong></td>
<td>拟建1000吨</td>
<td>国产替代先行者<br>55个产品替代</td>
<td>在建产能进度不确定</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Stocks Tab -->
<div id="stocks" class="tab-content">
<div class="card">
<h2>📈 核心股票数据</h2>
<div class="filter-btns">
<button class="filter-btn active" onclick="filterStocks('all')">全部</button>
<button class="filter-btn" onclick="filterStocks('三氯化氮')">三氯化氮</button>
<button class="filter-btn" onclick="filterStocks('六氟化钨')">六氟化钨</button>
<button class="filter-btn" onclick="filterStocks('六氟丁二烯')">六氟丁二烯</button>
</div>
<table id="stockTable">
<thead>
<tr>
<th>股票名称</th>
<th>行业</th>
<th>关键指标</th>
<th>市场份额/地位</th>
<th>信息来源</th>
</tr>
</thead>
<tbody>
<tr data-category="三氯化氮">
<td><strong>中船特气</strong></td>
<td><span class="badge badge-blue">三氯化氮</span></td>
<td>产能:18500吨/年</td>
<td>全球覆盖率:65.03%</td>
<td>互动/年报</td>
</tr>
<tr data-category="三氯化氮">
<td><strong>南大光电</strong></td>
<td><span class="badge badge-blue">三氯化氮</span></td>
<td>产能:8300吨/年</td>
<td>-</td>
<td>互动</td>
</tr>
<tr data-category="三氯化氮">
<td><strong>昊华科技</strong></td>
<td><span class="badge badge-blue">三氯化氮</span></td>
<td>产能:5000吨/年<br>在建:6000吨/年</td>
<td>-</td>
<td>年报</td>
</tr>
<tr data-category="六氟化钨">
<td><strong>中船特气</strong></td>
<td><span class="badge badge-yellow">六氟化钨</span></td>
<td>产能:2000吨/年</td>
<td>全球覆盖率:70.31%</td>
<td>年报</td>
</tr>
<tr data-category="六氟化钨">
<td><strong>昊华科技</strong></td>
<td><span class="badge badge-yellow">六氟化钨</span></td>
<td>产能:600吨/年</td>
<td>-</td>
<td>互动</td>
</tr>
<tr data-category="六氟化钨">
<td><strong>中巨芯</strong></td>
<td><span class="badge badge-yellow">六氟化钨</span></td>
<td>产能:600吨/年</td>
<td>-</td>
<td>调研</td>
</tr>
<tr data-category="六氟化钨">
<td><strong>和远气体</strong></td>
<td><span class="badge badge-yellow">六氟化钨</span></td>
<td>在建:500吨/年</td>
<td>-</td>
<td>公告</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>昊华科技</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>产能:1200吨/年</td>
<td>全球第一</td>
<td>年报</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>中船特气</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>产能:200吨/年</td>
<td>-</td>
<td>调研</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>中巨芯</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>建成:175吨/年</td>
<td>-</td>
<td>互动</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>华特气体</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>在建:300吨/年</td>
<td>-</td>
<td>年报</td>
</tr>
<tr data-category="六氟丁二烯">
<td><strong>金宏气体</strong></td>
<td><span class="badge badge-green">六氟丁二烯</span></td>
<td>在建:200吨/年</td>
<td>-</td>
<td>年报</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<h2>💡 投资启示</h2>
<div class="grid grid-2">
<div class="info-box">
<h3>⭐ 投资价值方向</h3>
<ul>
<li><strong>纯度高、产能大的龙头</strong>:中船特气(全球份额第一)</li>
<li><strong>多品类布局的厂商</strong>:昊华科技(六氟化钨+六氟丁二烯)</li>
<li><strong>技术突破的先行者</strong>:华特气体(55个产品替代)</li>
</ul>
</div>
<div class="info-box">
<h3>📊 关键跟踪指标</h3>
<ul>
<li>中船特气WF6月度出货量和吨净利变化</li>
<li>国内晶圆厂(中芯国际)WF6招标价格</li>
<li>钨粉价格走势和出口政策变动</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>© 2025 电子特气六氟化钨概念分析</p>
<p style="opacity: 0.7;">数据来源:公开新闻、路演记录、研报 | 仅供投资参考</p>
</div>
<script>
// Tab switching
function switchTab(tabName) {
// Hide all tabs
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// Remove active class from all buttons
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
// Show selected tab
document.getElementById(tabName).classList.add('active');
// Add active class to clicked button
event.target.classList.add('active');
}
// Stock filtering
function filterStocks(category) {
const rows = document.querySelectorAll('#stockTable tbody tr');
const buttons = document.querySelectorAll('.filter-btn');
// Update button styles
buttons.forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
// Filter rows
rows.forEach(row => {
if (category === 'all' || row.getAttribute('data-category') === category) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
}
console.log('Page loaded successfully!');
</script>
</body>
</html>

View File

@@ -0,0 +1,717 @@
<!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>
<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>
@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%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.price-rise {
animation: priceUp 2s ease-in-out infinite;
}
@keyframes priceUp {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-item {
position: relative;
padding-left: 40px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #667eea;
}
.timeline-line {
position: absolute;
left: 5px;
top: 20px;
bottom: -20px;
width: 2px;
background: #e5e7eb;
}
.stock-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.stock-table::-webkit-scrollbar {
height: 8px;
}
.stock-table::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.stock-table::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.dark-mode {
background: #1a202c;
color: #e2e8f0;
}
.dark-mode .glass-effect {
background: rgba(26, 32, 44, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 glass-effect shadow-lg">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<i class="fas fa-battery-three-quarters text-2xl text-purple-600"></i>
<span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">电解液添加剂深度分析</span>
</div>
<button id="darkModeToggle" class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
<i class="fas fa-moon text-gray-600"></i>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="gradient-bg text-white pt-20 pb-16">
<div class="container mx-auto px-4 pt-8">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">
电解液添加剂<br>
<span class="text-yellow-300">供需逆转</span>的投资机遇
</h1>
<p class="text-xl mb-6 opacity-90">
4680电池量产推动单耗倍增行业进入盈利修复关键期
</p>
<div class="flex flex-wrap gap-4">
<div class="bg-white/20 rounded-lg px-4 py-2 backdrop-blur">
<i class="fas fa-chart-line mr-2"></i>
VC价格涨<span class="font-bold text-yellow-300">13%</span>
</div>
<div class="bg-white/20 rounded-lg px-4 py-2 backdrop-blur">
<i class="fas fa-industry mr-2"></i>
产能出清<span class="font-bold text-yellow-300">90%</span>
</div>
</div>
</div>
<div class="relative">
<div class="bg-white/10 rounded-2xl p-6 backdrop-blur">
<canvas id="priceChart" width="400" height="200"></canvas>
</div>
<div class="absolute -top-4 -right-4 pulse-dot w-8 h-8 bg-green-400 rounded-full"></div>
</div>
</div>
</div>
</section>
<!-- Key Catalysts Timeline -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-clock-rotate-left text-purple-600 mr-2"></i>
核心催化时间轴
</h2>
<div class="max-w-4xl mx-auto">
<div class="space-y-8">
<div class="timeline-item">
<div class="timeline-line"></div>
<div class="bg-gray-50 rounded-lg p-4 hover-lift">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg">深度洗牌去产能</h3>
<span class="text-sm text-gray-500">2023-2025上半年</span>
</div>
<p class="text-gray-600">行业经历残酷出清,大量二三线厂商退出或停产</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-line"></div>
<div class="bg-gray-50 rounded-lg p-4 hover-lift">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg">供需错配机会提示</h3>
<span class="text-sm text-gray-500">2024年11月</span>
</div>
<p class="text-gray-600">招商电新等卖方开始提示电解液环节投资机会</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-line"></div>
<div class="bg-purple-50 rounded-lg p-4 hover-lift border-l-4 border-purple-500">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg text-purple-700">需求爆发 & 供给收缩</h3>
<span class="text-sm text-purple-600">2025年9-10月</span>
</div>
<p class="text-gray-700">
<i class="fas fa-arrow-up text-green-500 mr-1"></i> 电池产量环比增20%<br>
<i class="fas fa-arrow-up text-green-500 mr-1"></i> VC/FEC添加比例翻倍<br>
<i class="fas fa-arrow-down text-red-500 mr-1"></i> 环保核查升级,安全事故加剧紧张
</p>
</div>
</div>
<div class="timeline-item">
<div class="bg-gray-50 rounded-lg p-4 hover-lift">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg">价格信号确立</h3>
<span class="text-sm text-gray-500">2025年10月</span>
</div>
<p class="text-gray-600">VC价格涨13%至5.20万元/吨六氟磷酸锂涨近50%</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Logic Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
核心逻辑分析
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl p-6 hover-lift shadow-lg">
<div class="text-4xl mb-4 text-center">⚖️</div>
<h3 class="text-xl font-bold mb-3 text-center">供需格局逆转</h3>
<ul class="space-y-2 text-gray-600">
<li><i class="fas fa-check text-green-500 mr-2"></i>行业产能出清90%+</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>头部厂商无新增产能</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>环保+事故加剧供给紧张</li>
</ul>
</div>
<div class="bg-white rounded-xl p-6 hover-lift shadow-lg">
<div class="text-4xl mb-4 text-center">📈</div>
<h3 class="text-xl font-bold mb-3 text-center">单耗倍增效应</h3>
<ul class="space-y-2 text-gray-600">
<li><i class="fas fa-battery-full text-blue-500 mr-2"></i>4680电池量产</li>
<li><i class="fas fa-battery-full text-blue-500 mr-2"></i>VC/FEC比例3-5%→8-10%</li>
<li><i class="fas fa-battery-full text-blue-500 mr-2"></i>储能快充需求爆发</li>
</ul>
</div>
<div class="bg-white rounded-xl p-6 hover-lift shadow-lg">
<div class="text-4xl mb-4 text-center">📦</div>
<h3 class="text-xl font-bold mb-3 text-center">库存周期共振</h3>
<ul class="space-y-2 text-gray-600">
<li><i class="fas fa-box text-purple-500 mr-2"></i>库存跌破警戒线</li>
<li><i class="fas fa-box text-purple-500 mr-2"></i>进入补库周期</li>
<li><i class="fas fa-box text-purple-500 mr-2"></i>Q4长单锁定价格</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Market Sentiment -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-fire text-orange-500 mr-2"></i>
市场情绪与预期差
</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-gradient-to-r from-red-50 to-orange-50 rounded-xl p-6 border-l-4 border-red-500">
<h3 class="text-xl font-bold mb-4 text-red-700">⚠️ 关键预期差:价格涨 ≠ 利润增</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-bold mb-2 text-gray-700">市场认知(过于乐观)</h4>
<ul class="space-y-1 text-sm text-gray-600">
<li>• "非线性盈利修复"</li>
<li>• "中枢50%以上空间"</li>
<li>• 25年PE仅14倍</li>
</ul>
</div>
<div>
<h4 class="font-bold mb-2 text-gray-700">路演现实(谨慎理性)</h4>
<ul class="space-y-1 text-sm text-gray-600">
<li>• "全行业亏损"</li>
<li>• "目标现金流转正"</li>
<li>• VC价格4.51万仍亏损</li>
</ul>
</div>
</div>
<div class="mt-4 p-3 bg-white/70 rounded-lg">
<p class="text-sm text-gray-700">
<i class="fas fa-info-circle mr-2 text-blue-500"></i>
当前处于"止血"阶段,距离"输血"仍需价格持续上涨或成本优势兑现
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-table text-blue-600 mr-2"></i>
核心公司产能对比
</h2>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="stock-table">
<table class="w-full">
<thead class="bg-gradient-to-r from-purple-600 to-pink-600 text-white">
<tr>
<th class="px-4 py-3 text-left">公司名称</th>
<th class="px-4 py-3 text-left">添加剂类型</th>
<th class="px-4 py-3 text-left">现有产能</th>
<th class="px-4 py-3 text-left">规划产能</th>
<th class="px-4 py-3 text-left">信源</th>
<th class="px-4 py-3 text-left">亮点</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">孚日股份</td>
<td class="px-4 py-3">碳酸亚乙烯酯VC</td>
<td class="px-4 py-3">1万吨</td>
<td class="px-4 py-3">-</td>
<td class="px-4 py-3">半年报</td>
<td class="px-4 py-3 text-sm">全产业链唯一</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">华盛锂电</td>
<td class="px-4 py-3">VC+FEC合计</td>
<td class="px-4 py-3">1.4万吨/年</td>
<td class="px-4 py-3">6万吨VC项目</td>
<td class="px-4 py-3">互动/调研</td>
<td class="px-4 py-3 text-sm">专业龙头</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">天赐材料</td>
<td class="px-4 py-3">碳酸亚乙烯酯VC</td>
<td class="px-4 py-3">0.4万吨</td>
<td class="px-4 py-3">2万吨/年</td>
<td class="px-4 py-3">公告</td>
<td class="px-4 py-3 text-sm">自供80%+</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">永太科技</td>
<td class="px-4 py-3">碳酸亚乙烯酯VC</td>
<td class="px-4 py-3">0.5万吨/年</td>
<td class="px-4 py-3">2.5万吨</td>
<td class="px-4 py-3">调研/公告</td>
<td class="px-4 py-3 text-sm">规划最大</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">海科新源</td>
<td class="px-4 py-3">VC+FEC合计</td>
<td class="px-4 py-3">1万吨</td>
<td class="px-4 py-3">-</td>
<td class="px-4 py-3">公告</td>
<td class="px-4 py-3 text-sm">溶剂龙头</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">富祥药业</td>
<td class="px-4 py-3">碳酸亚乙烯酯VC</td>
<td class="px-4 py-3">0.8万吨/年</td>
<td class="px-4 py-3">2万吨/年</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3 text-sm">快速扩张</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Key Players Analysis -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-chess text-indigo-600 mr-2"></i>
核心玩家深度剖析
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 hover-lift">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
</div>
<h3 class="text-xl font-bold">孚日股份</h3>
</div>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">高弹性标的</p>
<p class="text-sm text-gray-600">VC产能行业第二全产业链成本优势</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-shield-alt text-blue-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">深度绑定龙头</p>
<p class="text-sm text-gray-600">与宁德时代、比亚迪等头部厂商合作</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-orange-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">风险提示</p>
<p class="text-sm text-gray-600">主业为家纺,新业务管理能力待验证</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-6 hover-lift">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
</div>
<h3 class="text-xl font-bold">华盛锂电</h3>
</div>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">专业龙头</p>
<p class="text-sm text-gray-600">专注电解液添加剂,行业地位稳固</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-rocket text-green-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">成长性明确</p>
<p class="text-sm text-gray-600">6万吨VC项目积极推进中</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-orange-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">风险提示</p>
<p class="text-sm text-gray-600">扩产进度不及预期,竞争加剧</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 hover-lift">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
</div>
<h3 class="text-xl font-bold">天赐材料</h3>
</div>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">一体化巨头</p>
<p class="text-sm text-gray-600">电解液全球市占率超35%</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-crown text-purple-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">成本控制最强</p>
<p class="text-sm text-gray-600">添加剂自供比例超80%</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-orange-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">风险提示</p>
<p class="text-sm text-gray-600">体量巨大弹性小,固态电池长期挑战</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
潜在风险与挑战
</h2>
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl p-6 shadow-lg hover-lift">
<h3 class="text-xl font-bold mb-4 text-red-600">
<i class="fas fa-microchip mr-2"></i>技术风险
</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-battery-slash text-red-400 mt-1 mr-2"></i>
<div>
<p class="font-semibold">固态电池替代</p>
<p class="text-sm">2027年后可能量产商用改变行业需求结构</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-vial text-orange-400 mt-1 mr-2"></i>
<div>
<p class="font-semibold">LiFSI产业化进度</p>
<p class="text-sm">生产工艺复杂,成本高昂,进度存不确定性</p>
</div>
</li>
</ul>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg hover-lift">
<h3 class="text-xl font-bold mb-4 text-orange-600">
<i class="fas fa-coins mr-2"></i>商业化风险
</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-chart-line text-yellow-400 mt-1 mr-2"></i>
<div>
<p class="font-semibold">涨价持续性</p>
<p class="text-sm">价格过高可能刺激产能复产或寻找替代方案</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-handshake text-blue-400 mt-1 mr-2"></i>
<div>
<p class="font-semibold">成本传导</p>
<p class="text-sm">电池厂盈利能力影响成本传导效果</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Investment Insights -->
<section class="py-12 bg-gradient-to-r from-purple-600 to-pink-600 text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-lightbulb text-yellow-300 mr-2"></i>
投资启示
</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-white/10 backdrop-blur rounded-xl p-8">
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div>
<h3 class="text-xl font-bold mb-3 text-yellow-300">
<i class="fas fa-star mr-2"></i>最具投资价值方向
</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-arrow-right text-green-300 mt-1 mr-2"></i>
<span>高弹性品种:孚日股份(周期反转+成本优势)</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-right text-green-300 mt-1 mr-2"></i>
<span>核心资产:天赐材料(盈利确定性最高)</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-right text-green-300 mt-1 mr-2"></i>
<span>专业选手:华盛锂电(业务纯粹,成长性好)</span>
</li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold mb-3 text-yellow-300">
<i class="fas fa-crosshairs mr-2"></i>关键跟踪指标
</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-chart-bar text-blue-300 mt-1 mr-2"></i>
<span>VC/FEC周度市场价格</span>
</li>
<li class="flex items-start">
<i class="fas fa-percentage text-purple-300 mt-1 mr-2"></i>
<span>核心公司添加剂业务毛利率</span>
</li>
<li class="flex items-start">
<i class="fas fa-industry text-orange-300 mt-1 mr-2"></i>
<span>头部企业产能利用率</span>
</li>
</ul>
</div>
</div>
<div class="bg-yellow-400/20 rounded-lg p-4 border border-yellow-400/50">
<p class="text-center text-lg">
<i class="fas fa-info-circle mr-2"></i>
<strong>核心结论:</strong>概念已从主题炒作过渡至基本面驱动的早期阶段,
价格上涨趋势明确,但盈利修复仍需时间验证
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">
<i class="fas fa-battery-three-quarters mr-2"></i>
电解液添加剂深度分析报告
</p>
<p class="text-gray-400 text-sm">
数据来源:公开新闻、路演记录、行业研报 | 更新时间2025年10月
</p>
</div>
</footer>
<script>
// Price Chart
const ctx = document.getElementById('priceChart').getContext('2d');
const priceChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['9月初', '9月中', '9月末', '10月初', '10月中'],
datasets: [{
label: 'VC价格(万元/吨)',
data: [4.60, 4.75, 4.90, 5.05, 5.20],
borderColor: 'rgb(255, 206, 86)',
backgroundColor: 'rgba(255, 206, 86, 0.2)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: 'white'
}
},
title: {
display: true,
text: 'VC价格近期走势',
color: 'white',
font: {
size: 16
}
}
},
scales: {
y: {
beginAtZero: false,
ticks: {
color: 'white'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
x: {
ticks: {
color: 'white'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
}
}
});
// Dark Mode Toggle
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
const icon = darkModeToggle.querySelector('i');
darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
} else {
icon.classList.remove('fa-sun');
icon.classList.add('fa-moon');
}
});
// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
</script>
</body>
</html>

624
public/htmls/电解铝.html Normal file
View File

@@ -0,0 +1,624 @@
<!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>
<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');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #1a202c;
overflow-x: hidden;
}
.metallic-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
background-size: 200% 200%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}
.text-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px 0 rgba(31, 38, 135, 0.2);
}
.timeline-line {
background: linear-gradient(to bottom, #667eea, #764ba2);
width: 3px;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
z-index: 0;
}
.timeline-dot {
width: 20px;
height: 20px;
background: white;
border: 4px solid #667eea;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.number-display {
font-variant-numeric: tabular-nums;
letter-spacing: -0.05em;
}
.stock-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
.stock-table {
font-size: 12px;
}
.timeline-line {
left: 20px;
}
.timeline-dot {
left: 20px;
}
.timeline-content {
margin-left: 50px !important;
}
}
.pulse-animation {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.chart-bar {
transition: width 1s ease-in-out;
}
.loading-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
</head>
<body>
<!-- Hero Section -->
<header class="metallic-gradient text-white py-20 px-4 relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-30"></div>
<div class="container mx-auto relative z-10">
<div class="text-center max-w-4xl mx-auto">
<div class="inline-flex items-center bg-white/20 backdrop-blur-lg rounded-full px-4 py-2 mb-6">
<span class="pulse-animation w-2 h-2 bg-green-400 rounded-full mr-2"></span>
<span class="text-sm font-medium">行业景气度:高</span>
</div>
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
电解铝行业深度分析
</h1>
<p class="text-xl md:text-2xl mb-8 opacity-95">
供需变革下的稀缺资产机遇
</p>
<div class="flex flex-wrap justify-center gap-4 text-sm">
<div class="bg-white/20 backdrop-blur-lg rounded-lg px-4 py-2">
<i class="fas fa-industry mr-2"></i>
产能天花板4500万吨
</div>
<div class="bg-white/20 backdrop-blur-lg rounded-lg px-4 py-2">
<i class="fas fa-bolt mr-2"></i>
开工率98%
</div>
<div class="bg-white/20 backdrop-blur-lg rounded-lg px-4 py-2">
<i class="fas fa-chart-line mr-2"></i>
价格预测2.3-2.5万/吨
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0">
<svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="white"/>
</svg>
</div>
</header>
<!-- Core Insights -->
<main class="container mx-auto px-4 py-12">
<!-- Key Metrics -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-gradient">核心指标实时追踪</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="glass-effect rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-warehouse"></i>
</div>
<span class="text-sm text-gray-500">运行产能</span>
</div>
<div class="text-3xl font-bold number-display">4,400<span class="text-lg text-gray-500">万吨</span></div>
<div class="text-sm text-green-600 mt-2">接近产能天花板</div>
</div>
<div class="glass-effect rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-battery-three-quarters"></i>
</div>
<span class="text-sm text-gray-500">开工率</span>
</div>
<div class="text-3xl font-bold number-display">98<span class="text-lg text-gray-500">%</span></div>
<div class="text-sm text-green-600 mt-2">历史高位</div>
</div>
<div class="glass-effect rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-coins"></i>
</div>
<span class="text-sm text-gray-500">吨利润</span>
</div>
<div class="text-3xl font-bold number-display">4,000<span class="text-lg text-gray-500">元/吨</span></div>
<div class="text-sm text-green-600 mt-2">持续扩大</div>
</div>
<div class="glass-effect rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-chart-area"></i>
</div>
<span class="text-sm text-gray-500">社会库存</span>
</div>
<div class="text-3xl font-bold number-display">80<span class="text-lg text-gray-500">万吨</span></div>
<div class="text-sm text-red-600 mt-2">持续去化</div>
</div>
</div>
</section>
<!-- Core Analysis -->
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
<div class="glass-effect rounded-2xl p-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white mr-3">
<i class="fas fa-bullseye"></i>
</div>
<h3 class="text-2xl font-bold">核心驱动因素</h3>
</div>
<div class="space-y-6">
<div class="border-l-4 border-blue-500 pl-4">
<h4 class="font-semibold text-lg mb-2">供给侧硬约束</h4>
<p class="text-gray-600">4500万吨国内产能天花板98%超高开工率,海外受制于能源成本持续减产</p>
</div>
<div class="border-l-4 border-green-500 pl-4">
<h4 class="font-semibold text-lg mb-2">需求侧结构优化</h4>
<p class="text-gray-600">新能源(光伏+新能源车年贡献200万吨增量地产拖累影响仅3-4%</p>
</div>
<div class="border-l-4 border-orange-500 pl-4">
<h4 class="font-semibold text-lg mb-2">利润链重构</h4>
<p class="text-gray-600">氧化铝价格回落利润向电解铝环节集中吨利润从盈亏平衡恢复至4000+</p>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center text-white mr-3">
<i class="fas fa-brain"></i>
</div>
<h3 class="text-2xl font-bold">市场预期差分析</h3>
</div>
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-arrow-up text-green-500 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold">低估华通线缆的纯粹成长性</h4>
<p class="text-sm text-gray-600">非洲安哥拉项目0.1元/度水电成本吨利润超6000元52万吨远期规划</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-arrow-up text-green-500 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold">低估绿色溢价长期价值</h4>
<p class="text-sm text-gray-600">碳关税时代,水电铝(云铝、中孚)将享制度性绿色溢价</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-arrow-up text-green-500 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold">高估地产拖累风险</h4>
<p class="text-sm text-gray-600">需求已对地产"脱敏",韧性远超市场预期</p>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-gradient">行业发展时间轴</h2>
<div class="relative">
<div class="timeline-line hidden md:block"></div>
<div class="space-y-8">
<div class="flex items-center timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content ml-0 md:ml-12">
<div class="glass-effect rounded-xl p-6 md:max-w-md">
<div class="text-sm text-gray-500 mb-2">2017年至今</div>
<h4 class="font-semibold text-lg mb-2">供给侧改革启动</h4>
<p class="text-gray-600">设定4500万吨产能天花板行业进入供给侧硬约束时代</p>
</div>
</div>
</div>
<div class="flex items-center timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content ml-0 md:ml-12">
<div class="glass-effect rounded-xl p-6 md:max-w-md">
<div class="text-sm text-gray-500 mb-2">2025年1月</div>
<h4 class="font-semibold text-lg mb-2">中泰证券重磅报告</h4>
<p class="text-gray-600">"一切只是开始" - 明确产业链利润再分配逻辑预测铝价2.3-2.5万/吨</p>
</div>
</div>
</div>
<div class="flex items-center timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content ml-0 md:ml-12">
<div class="glass-effect rounded-xl p-6 md:max-w-md">
<div class="text-sm text-gray-500 mb-2">2025年5-8月</div>
<h4 class="font-semibold text-lg mb-2">华通线缆非洲项目成焦点</h4>
<p class="text-gray-600">安哥拉0.1元/度水电成本,展现超越行业的盈利能力和成长性</p>
</div>
</div>
</div>
<div class="flex items-center timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content ml-0 md:ml-12">
<div class="glass-effect rounded-xl p-6 md:max-w-md">
<div class="text-sm text-gray-500 mb-2">2025年7月</div>
<h4 class="font-semibold text-lg mb-2">"反内卷"政策强化</h4>
<p class="text-gray-600">政策被解读为供给侧改革巩固,多家券商持续看好</p>
</div>
</div>
</div>
<div class="flex items-center timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content ml-0 md:ml-12">
<div class="glass-effect rounded-xl p-6 md:max-w-md">
<div class="text-sm text-gray-500 mb-2">2025年下半年</div>
<h4 class="font-semibold text-lg mb-2">海外供应扰动</h4>
<p class="text-gray-600">冰岛世纪铝业、澳大利亚力拓相继因电力成本问题减产</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-gradient">核心企业产能数据</h2>
<div class="glass-effect rounded-2xl overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
<tr>
<th class="px-6 py-4 text-left">股票代码</th>
<th class="px-6 py-4 text-left">公司名称</th>
<th class="px-6 py-4 text-left">2024年产量</th>
<th class="px-6 py-4 text-left">核心优势</th>
<th class="px-6 py-4 text-left">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-medium">601600</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<span class="text-blue-600 font-semibold text-sm"></span>
</div>
中国铝业
</div>
</td>
<td class="px-6 py-4 font-semibold">761万吨</td>
<td class="px-6 py-4 text-sm">全产业链龙头,资源自给率高</td>
<td class="px-6 py-4">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">产业巨擘</span>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-medium">01378.HK</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
<span class="text-purple-600 font-semibold text-sm"></span>
</div>
中国宏桥
</div>
</td>
<td class="px-6 py-4 font-semibold">646万吨</td>
<td class="px-6 py-4 text-sm">全球成本领先者,极致成本控制</td>
<td class="px-6 py-4">
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">产业巨擘</span>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-medium">000807</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
<span class="text-green-600 font-semibold text-sm"></span>
</div>
云铝股份
</div>
</td>
<td class="px-6 py-4 font-semibold">303万吨</td>
<td class="px-6 py-4 text-sm">水电清洁能源,绿色低碳优势</td>
<td class="px-6 py-4">
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">弹性先锋</span>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-medium">000933</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-3">
<span class="text-orange-600 font-semibold text-sm"></span>
</div>
神火股份
</div>
</td>
<td class="px-6 py-4 font-semibold">163万吨</td>
<td class="px-6 py-4 text-sm">煤铝一体化,新疆低成本优势</td>
<td class="px-6 py-4">
<span class="bg-orange-100 text-orange-800 px-2 py-1 rounded-full text-xs">弹性先锋</span>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-medium">605196</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
<span class="text-red-600 font-semibold text-sm"></span>
</div>
华通线缆
</div>
</td>
<td class="px-6 py-4 font-semibold text-red-600">规划52万吨</td>
<td class="px-6 py-4 text-sm">非洲0.1元/度水电,成本全球最低</td>
<td class="px-6 py-4">
<span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">成长黑马</span>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-medium">002532</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 bg-teal-100 rounded-full flex items-center justify-center mr-3">
<span class="text-teal-600 font-semibold text-sm"></span>
</div>
天山铝业
</div>
</td>
<td class="px-6 py-4 font-semibold">118万吨</td>
<td class="px-6 py-4 text-sm">一体化运营,新疆成本优势</td>
<td class="px-6 py-4">
<span class="bg-teal-100 text-teal-800 px-2 py-1 rounded-full text-xs">弹性先锋</span>
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-medium">600219</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
<span class="text-indigo-600 font-semibold text-sm"></span>
</div>
南山铝业
</div>
</td>
<td class="px-6 py-4 font-semibold">68万吨</td>
<td class="px-6 py-4 text-sm">高端加工一体,汽车板、航空板</td>
<td class="px-6 py-4">
<span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs">高端稳将</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Risk & Opportunity -->
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-exclamation-triangle text-yellow-500 mr-3"></i>
潜在风险
</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-3"></div>
<div>
<h4 class="font-semibold">政策转向风险</h4>
<p class="text-sm text-gray-600">若放松4500万吨产能天花板将根本性瓦解逻辑</p>
</div>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-3"></div>
<div>
<h4 class="font-semibold">宏观经济衰退</h4>
<p class="text-sm text-gray-600">全球严重衰退可能导致新能源需求失速</p>
</div>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-3"></div>
<div>
<h4 class="font-semibold">云南电力紧张</h4>
<p class="text-sm text-gray-600">水电季节性波动可能压制云铝等公司产量</p>
</div>
</div>
</div>
</div>
<div class="glass-effect rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-rocket text-green-500 mr-3"></i>
投资机遇
</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3"></div>
<div>
<h4 class="font-semibold">华通线缆 - 纯粹成长</h4>
<p class="text-sm text-gray-600">非洲项目最看好的成长标的,成本曲线最低</p>
</div>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3"></div>
<div>
<h4 class="font-semibold">神火/云铝 - 高弹性贝塔</h4>
<p class="text-sm text-gray-600">行业景气上行周期中利润弹性最大</p>
</div>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3"></div>
<div>
<h4 class="font-semibold">中国铝业/宏桥 - 稳健价值</h4>
<p class="text-sm text-gray-600">确定性最高的核心资产,分红价值突出</p>
</div>
</div>
</div>
</div>
</section>
<!-- Tracking Indicators -->
<section class="glass-effect rounded-2xl p-8 mb-16">
<h3 class="text-2xl font-bold mb-6">关键追踪指标</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold">社会库存</span>
<i class="fas fa-chart-area text-blue-500"></i>
</div>
<div class="text-sm text-gray-600">周度数据,判断供需紧张程度的核心高频指标</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold">华通项目进展</span>
<i class="fas fa-hard-hat text-orange-500"></i>
</div>
<div class="text-sm text-gray-600">验证阿尔法逻辑的关键,关注投产公告</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold">云南电力公报</span>
<i class="fas fa-bolt text-green-500"></i>
</div>
<div class="text-sm text-gray-600">预警潜在减产风险的重要参考</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8 px-4">
<div class="container mx-auto text-center">
<p class="mb-2">电解铝行业深度分析报告</p>
<p class="text-sm text-gray-400">数据来源:券商研报、公司公告、行业资讯</p>
<p class="text-xs text-gray-500 mt-4">投资有风险,入市需谨慎</p>
</div>
</footer>
<script>
// Chart animations
document.addEventListener('DOMContentLoaded', function() {
// Animate numbers on scroll
const animateValue = (element, start, end, duration) => {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
element.innerHTML = Math.floor(progress * (end - start) + start) + element.dataset.suffix;
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
};
// Intersection Observer for animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
}
});
});
document.querySelectorAll('.card-hover').forEach(el => {
observer.observe(el);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,537 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盛合晶微 - 先进封装产业链深度解析</title>
<!-- DaisyUI & Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.0/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom Styles -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-morphism {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
width: 2px;
position: absolute;
left: 20px;
top: 0;
bottom: 0;
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.stock-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.stock-table {
font-size: 0.875rem;
}
}
.tag-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
margin: 2px;
}
.tag-supply { background: #e0f2fe; color: #0369a1; }
.tag-holding { background: #fef3c7; color: #d97706; }
.tag-cooperation { background: #dcfce7; color: #16a34a; }
.floating-card {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="bg-gradient-to-br from-purple-50 to-blue-50">
<!-- Navigation -->
<nav class="glass-morphism sticky top-0 z-50 border-b border-gray-200">
<div class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="w-10 h-10 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg flex items-center justify-center">
<i class="fas fa-microchip text-white"></i>
</div>
<h1 class="text-xl font-bold gradient-text">盛合晶微概念分析</h1>
</div>
<div class="flex items-center space-x-4">
<span class="badge badge-info">科创板IPO</span>
<span class="badge badge-success">先进封装</span>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="container mx-auto px-4 py-8">
<div class="glass-morphism rounded-2xl p-8 mb-8 hover-scale">
<div class="flex flex-col lg:flex-row items-center justify-between">
<div class="lg:w-2/3 mb-6 lg:mb-0">
<h1 class="text-4xl lg:text-5xl font-bold mb-4">
<span class="gradient-text">盛合晶微</span>
<span class="text-gray-700">- 先进封装领军者</span>
</h1>
<p class="text-lg text-gray-600 mb-6">
中国先进封装产业链的核心载体AI算力时代Chiplet技术的战略突破口
</p>
<div class="flex flex-wrap gap-3">
<div class="stat bg-purple-50 rounded-lg p-3">
<div class="stat-title text-xs text-gray-600">IPO状态</div>
<div class="stat-value text-lg font-bold text-purple-600">已受理</div>
</div>
<div class="stat bg-blue-50 rounded-lg p-3">
<div class="stat-title text-xs text-gray-600">核心业务</div>
<div class="stat-value text-lg font-bold text-blue-600">2.5D/3D封装</div>
</div>
<div class="stat bg-green-50 rounded-lg p-3">
<div class="stat-title text-xs text-gray-600">市场地位</div>
<div class="stat-value text-lg font-bold text-green-600">大陆唯一量产</div>
</div>
</div>
</div>
<div class="lg:w-1/3 floating-card">
<div class="bg-gradient-to-br from-purple-500 to-blue-600 rounded-xl p-6 text-white text-center">
<i class="fas fa-chart-line text-5xl mb-4"></i>
<div class="text-3xl font-bold mb-2">569亿美元</div>
<div class="text-sm opacity-90">2025年全球先进封装市场预测</div>
<div class="text-xs mt-2 opacity-75">复合增长率 >10%</div>
</div>
</div>
</div>
</div>
<!-- Key Events Timeline -->
<div class="glass-morphism rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-timeline mr-3 text-purple-600"></i>
IPO关键事件时间轴
</h2>
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="flex items-start">
<div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold z-10">
1
</div>
<div class="ml-8 flex-1 bg-white rounded-lg p-4 hover-scale">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-gray-800">启动IPO辅导</span>
<span class="badge badge-outline">2023年6月</span>
</div>
<p class="text-gray-600 text-sm">中金证券担任辅导机构,正式开启上市进程</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold z-10">
2
</div>
<div class="ml-8 flex-1 bg-white rounded-lg p-4 hover-scale">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-gray-800">增加联合保荐</span>
<span class="badge badge-outline">2024年2月</span>
</div>
<p class="text-gray-600 text-sm">引入中信证券作为联合保荐机构,加快上市进程</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center text-white font-bold z-10">
3
</div>
<div class="ml-8 flex-1 bg-white rounded-lg p-4 hover-scale border-2 border-green-200">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-gray-800">辅导验收</span>
<span class="badge badge-success">2025年6月18日</span>
</div>
<p class="text-gray-600 text-sm"><strong>核心催化剂</strong> - IPO状态变更为"辅导验收",引发第一波市场关注</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 bg-orange-600 rounded-full flex items-center justify-center text-white font-bold z-10">
4
</div>
<div class="ml-8 flex-1 bg-white rounded-lg p-4 hover-scale border-2 border-orange-200">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-gray-800">正式受理</span>
<span class="badge badge-warning">2025年10月30日</span>
</div>
<p class="text-gray-600 text-sm"><strong>关键里程碑</strong> - 科创板IPO审核状态变更为"已受理"</p>
</div>
</div>
</div>
</div>
<!-- Core Logic Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="glass-morphism rounded-2xl p-6 hover-scale">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-brain mr-3 text-purple-600"></i>
核心逻辑
</h3>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold">技术路径的必然选择</h4>
<p class="text-sm text-gray-600">在前道设备受限下Chiplet是提升芯片算力的最优解</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold">稀缺的市场地位</h4>
<p class="text-sm text-gray-600">大陆唯一规模量产硅基2.5D芯粒加工的企业</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold">强大的产业资本背书</h4>
<p class="text-sm text-gray-600">2024年完成超7亿美元融资引入多地国资</p>
</div>
</div>
</div>
</div>
<div class="glass-morphism rounded-2xl p-6 hover-scale">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-exclamation-triangle mr-3 text-orange-600"></i>
关键风险
</h3>
<div class="space-y-3">
<div class="bg-red-50 rounded-lg p-3">
<h4 class="font-semibold text-red-800">技术风险</h4>
<p class="text-sm text-red-600">先进封装对工艺精度、良率要求极高</p>
</div>
<div class="bg-orange-50 rounded-lg p-3">
<h4 class="font-semibold text-orange-800">商业化风险</h4>
<p class="text-sm text-orange-600">高昂资本开支需要巨大订单摊薄成本</p>
</div>
<div class="bg-yellow-50 rounded-lg p-3">
<h4 class="font-semibold text-yellow-800">预期差风险</h4>
<p class="text-sm text-yellow-600">供应链认证进度落后于市场预期</p>
</div>
</div>
</div>
</div>
<!-- Industry Chain -->
<div class="glass-morphism rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-sitemap mr-3 text-purple-600"></i>
产业链图谱
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6">
<h4 class="font-bold text-purple-800 mb-3">
<i class="fas fa-tools mr-2"></i>上游设备材料
</h4>
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span>芯源微</span>
<span class="tag-pill tag-supply">涂胶显影</span>
</div>
<div class="flex justify-between text-sm">
<span>强力新材</span>
<span class="tag-pill tag-supply">光刻胶</span>
</div>
<div class="flex justify-between text-sm">
<span>艾森股份</span>
<span class="tag-pill tag-supply">电镀液</span>
</div>
<div class="flex justify-between text-sm">
<span>华海诚科</span>
<span class="tag-pill tag-supply">封装树脂</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6">
<h4 class="font-bold text-blue-800 mb-3">
<i class="fas fa-industry mr-2"></i>中游封装服务
</h4>
<div class="space-y-3">
<div class="bg-white rounded-lg p-3">
<div class="font-semibold text-blue-700">盛合晶微</div>
<div class="text-xs text-gray-600">2.5D/3D Chiplet领军</div>
</div>
<div class="bg-white rounded-lg p-3">
<div class="font-semibold">长电科技/通富微电</div>
<div class="text-xs text-gray-600">平台型封装厂商</div>
</div>
<div class="bg-white rounded-lg p-3">
<div class="font-semibold">晶方科技</div>
<div class="text-xs text-gray-600">TSV技术专家</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6">
<h4 class="font-bold text-green-800 mb-3">
<i class="fas fa-microchip mr-2"></i>下游应用
</h4>
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span>AI芯片</span>
<span class="tag-pill tag-cooperation">核心市场</span>
</div>
<div class="flex justify-between text-sm">
<span>存储芯片</span>
<span class="tag-pill tag-cooperation">新兴应用</span>
</div>
<div class="flex justify-between text-sm">
<span>消费电子</span>
<span class="tag-pill tag-cooperation">传统市场</span>
</div>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="glass-morphism rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-table mr-3 text-purple-600"></i>
相关上市公司
</h2>
<div class="stock-table">
<table class="table w-full">
<thead>
<tr class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<th class="rounded-tl-lg">股票名称</th>
<th>关系类型</th>
<th>具体说明</th>
<th>数据来源</th>
<th class="rounded-tr-lg">状态</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50">
<td class="font-semibold">景兴纸业</td>
<td><span class="tag-pill tag-holding">参股公司</span></td>
<td>通过金浦国调基金持股2.64%投资金额9501万元</td>
<td>互动平台</td>
<td><span class="badge badge-info">已披露</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">赛伍技术</td>
<td><span class="tag-pill tag-supply">供应链合作</span></td>
<td>半导体领域客户,提供晶圆胶带等产品</td>
<td>半年报</td>
<td><span class="badge badge-success">合作中</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">芯源微</td>
<td><span class="tag-pill tag-supply">供应链合作</span></td>
<td>涂胶显影/湿法设备已在盛合晶微批量应用</td>
<td>公告</td>
<td><span class="badge badge-success">批量应用</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">强力新材</td>
<td><span class="tag-pill tag-supply">供应链合作</span></td>
<td>光敏性聚酰亚胺PSPI处于客户认证阶段</td>
<td>互动平台</td>
<td><span class="badge badge-warning">认证中</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">艾森股份</td>
<td><span class="tag-pill tag-supply">供应链合作</span></td>
<td>封装负性光刻胶测试认证,铜蚀刻液主要客户</td>
<td>调研</td>
<td><span class="badge badge-warning">测试中</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">光力科技</td>
<td><span class="tag-pill tag-supply">供应链合作</span></td>
<td>高端划切设备和耗材供应商</td>
<td>互动平台</td>
<td><span class="badge badge-info">供应商</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">华特气体</td>
<td><span class="tag-pill tag-supply">供应链合作</span></td>
<td>电子特种气体供应商</td>
<td>互动平台</td>
<td><span class="badge badge-success">合作中</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">亚翔集成</td>
<td><span class="tag-pill tag-cooperation">洁净工程</span></td>
<td>提供洁净工程服务</td>
<td>互动平台</td>
<td><span class="badge badge-info">服务商</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">盛美上海</td>
<td><span class="tag-pill tag-supply">供应链合作</span></td>
<td>产品获得盛合晶微订单</td>
<td>公告</td>
<td><span class="badge badge-success">订单确认</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Investment Insights -->
<div class="glass-morphism rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-lightbulb mr-3 text-yellow-500"></i>
投资启示
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl p-6">
<h4 class="font-bold text-indigo-800 mb-3">
<i class="fas fa-arrow-up mr-2"></i>确定性机会
</h4>
<ul class="space-y-2 text-sm">
<li><strong>芯源微:</strong>涂胶显影设备已批量应用,业绩兑现路径清晰</li>
<li><strong>晶合集成:</strong>深度参与DRAM新架构产能规划明确</li>
<li><strong>盛合晶微:</strong>核心标的等待IPO上市后的估值判断</li>
</ul>
</div>
<div class="bg-gradient-to-br from-orange-50 to-red-100 rounded-xl p-6">
<h4 class="font-bold text-red-800 mb-3">
<i class="fas fa-exclamation-circle mr-2"></i>需谨慎标的
</h4>
<ul class="space-y-2 text-sm">
<li><strong>强力新材等材料公司:</strong>产品仍处认证阶段,股价已透支预期</li>
<li><strong>概念炒作股:</strong>关注实际认证进展,避免盲目跟风</li>
<li><strong>下游应用股:</strong>业绩兑现周期长,需跟踪订单落地</li>
</ul>
</div>
</div>
</div>
<!-- Key Metrics to Track -->
<div class="glass-morphism rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-chart-line mr-3 text-purple-600"></i>
关键跟踪指标
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white rounded-lg p-4 text-center hover-scale">
<i class="fas fa-certificate text-3xl text-purple-600 mb-2"></i>
<h4 class="font-semibold mb-1">认证突破</h4>
<p class="text-xs text-gray-600">供应链公司产品认证通过公告</p>
</div>
<div class="bg-white rounded-lg p-4 text-center hover-scale">
<i class="fas fa-factory text-3xl text-blue-600 mb-2"></i>
<h4 class="font-semibold mb-1">产能利用率</h4>
<p class="text-xs text-gray-600">新工厂产能及良率数据</p>
</div>
<div class="bg-white rounded-lg p-4 text-center hover-scale">
<i class="fas fa-handshake text-3xl text-green-600 mb-2"></i>
<h4 class="font-semibold mb-1">核心客户订单</h4>
<p class="text-xs text-gray-600">AI芯片设计公司订单流向</p>
</div>
<div class="bg-white rounded-lg p-4 text-center hover-scale">
<i class="fas fa-dollar-sign text-3xl text-orange-600 mb-2"></i>
<h4 class="font-semibold mb-1">IPO定价</h4>
<p class="text-xs text-gray-600">上市后估值水平</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="glass-morphism mt-12 py-6 border-t border-gray-200">
<div class="container mx-auto px-4 text-center">
<p class="text-sm text-gray-600">
<i class="fas fa-info-circle mr-2"></i>
数据来源:公开研报、公司公告、互动平台 | 投资有风险,决策需谨慎
</p>
<p class="text-xs text-gray-500 mt-2">
更新时间2025年11月 | 仅供参考,不构成投资建议
</p>
</div>
</footer>
<!-- JavaScript for animations -->
<script>
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe all sections
document.querySelectorAll('.glass-morphism').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
</script>
</body>
</html>

616
public/htmls/石墨.html Normal file
View File

@@ -0,0 +1,616 @@
<!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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/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>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Inter', sans-serif;
}
body {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
min-height: 100vh;
}
.glass-effect {
background: rgba(30, 41, 59, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.1);
}
.neon-glow {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
.timeline-line {
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
}
.hover-scale {
transition: all 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.02);
}
.gradient-text {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-glow:hover {
box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}
.table-scroll {
overflow-x: auto;
}
@media (max-width: 768px) {
.table-scroll {
overflow-x: scroll;
}
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
}
}
.chart-container {
position: relative;
height: 300px;
width: 100%;
}
</style>
</head>
<body class="text-gray-100">
<!-- Header -->
<header class="glass-effect sticky top-0 z-50 border-b border-gray-700">
<div class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
<i class="fas fa-layer-group text-white"></i>
</div>
<h1 class="text-2xl font-bold gradient-text">石墨概念深度分析</h1>
</div>
<div class="flex items-center space-x-2">
<span class="badge badge-info">251012</span>
<span class="badge badge-success">科技成长</span>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- 核心观点摘要 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-8 card-glow">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mr-4">
<i class="fas fa-lightbulb text-white text-xl"></i>
</div>
<h2 class="text-2xl font-bold">核心观点摘要</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gradient-to-br from-blue-900/30 to-purple-900/30 rounded-xl p-6 border border-blue-500/20">
<h3 class="text-lg font-semibold mb-3 text-blue-300">
<i class="fas fa-chart-line mr-2"></i>估值重塑
</h3>
<p class="text-gray-300 leading-relaxed">
从传统负极材料的"周期品"向特种石墨和石墨烯的"成长科技品"转变,核心驱动力在于技术突破和国产替代。
</p>
</div>
<div class="bg-gradient-to-br from-purple-900/30 to-pink-900/30 rounded-xl p-6 border border-purple-500/20">
<h3 class="text-lg font-semibold mb-3 text-purple-300">
<i class="fas fa-rocket mr-2"></i>投资主线
</h3>
<p class="text-gray-300 leading-relaxed">
半导体、新能源、消费电子等领域的战略价值使其成为具备高成长潜力的投资主线。
</p>
</div>
</div>
</div>
</section>
<!-- 概念事件时间轴 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-8">
<div class="flex items-center mb-8">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mr-4">
<i class="fas fa-clock-rotate-left text-white text-xl"></i>
</div>
<h2 class="text-2xl font-bold">概念事件时间轴</h2>
</div>
<div class="relative">
<div class="absolute left-8 top-0 bottom-0 w-0.5 timeline-line"></div>
<div class="space-y-8">
<div class="relative flex items-start hover-scale">
<div class="absolute left-6 w-5 h-5 bg-blue-500 rounded-full pulse-dot"></div>
<div class="ml-16 glass-effect rounded-xl p-6 border border-blue-500/30">
<div class="flex items-center mb-2">
<span class="text-blue-400 font-semibold">2024年10月28日</span>
<span class="ml-3 badge badge-sm badge-info">资产注入预期</span>
</div>
<p class="text-gray-300">新华锦集团碳化硅等静压石墨项目打破国外"卡脖子"技术垄断</p>
</div>
</div>
<div class="relative flex items-start hover-scale">
<div class="absolute left-6 w-5 h-5 bg-purple-500 rounded-full pulse-dot"></div>
<div class="ml-16 glass-effect rounded-xl p-6 border border-purple-500/30">
<div class="flex items-center mb-2">
<span class="text-purple-400 font-semibold">2024年11月28日</span>
<span class="ml-3 badge badge-sm badge-warning">概念集中引爆</span>
</div>
<ul class="text-gray-300 space-y-1">
<li>• 河南中原石墨烯实验室揭牌</li>
<li>• 华为Mate X6采用超高导热石墨烯散热</li>
<li>• 券商密集发布研报量化市场空间达30亿元</li>
</ul>
</div>
</div>
<div class="relative flex items-start hover-scale">
<div class="absolute left-6 w-5 h-5 bg-pink-500 rounded-full pulse-dot"></div>
<div class="ml-16 glass-effect rounded-xl p-6 border border-pink-500/30">
<div class="flex items-center mb-2">
<span class="text-pink-400 font-semibold">2025年10月9日</span>
<span class="ml-3 badge badge-sm badge-error">政策节点</span>
</div>
<p class="text-gray-300">商务部宣布对锂电池及人造石墨负极材料实施出口管制</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心驱动力 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-8">
<div class="flex items-center mb-8">
<div class="w-12 h-12 bg-gradient-to-br from-cyan-500 to-teal-500 rounded-xl flex items-center justify-center mr-4">
<i class="fas fa-gears text-white text-xl"></i>
</div>
<h2 class="text-2xl font-bold">核心驱动力分析</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-cyan-900/30 to-blue-900/30 rounded-xl p-6 border border-cyan-500/20 hover-scale">
<div class="text-3xl mb-4">🔬</div>
<h3 class="text-lg font-semibold mb-3 text-cyan-300">技术突破</h3>
<ul class="text-sm text-gray-400 space-y-2">
<li>• 高品质石墨薄膜</li>
<li>• 可控手性石墨烯卷</li>
<li>• 多孔石墨烯薄膜</li>
<li>• 华为商业化验证</li>
</ul>
</div>
<div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-xl p-6 border border-emerald-500/20 hover-scale">
<div class="text-3xl mb-4">🏭</div>
<h3 class="text-lg font-semibold mb-3 text-emerald-300">国产替代</h3>
<ul class="text-sm text-gray-400 space-y-2">
<li>• 半导体等静压石墨</li>
<li>• 军工关键材料</li>
<li>• 政策支持</li>
<li>• 实验室建设</li>
</ul>
</div>
<div class="bg-gradient-to-br from-violet-900/30 to-purple-900/30 rounded-xl p-6 border border-violet-500/20 hover-scale">
<div class="text-3xl mb-4">📱</div>
<h3 class="text-lg font-semibold mb-3 text-violet-300">需求升级</h3>
<ul class="text-sm text-gray-400 space-y-2">
<li>• 消费电子散热</li>
<li>• 新能源电池</li>
<li>• 半导体热场</li>
<li>• 光伏耗材</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-8">
<div class="flex items-center mb-8">
<div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-xl flex items-center justify-center mr-4">
<i class="fas fa-sitemap text-white text-xl"></i>
</div>
<h2 class="text-2xl font-bold">产业链图谱</h2>
</div>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-gradient-to-br from-indigo-900/30 to-blue-900/30 rounded-xl p-6 text-center">
<h3 class="text-xl font-semibold mb-4 text-indigo-300">上游</h3>
<div class="space-y-3">
<div class="glass-effect rounded-lg p-3">
<i class="fas fa-mountain text-indigo-400 mr-2"></i>
<span class="text-sm">石墨矿</span>
</div>
<div class="glass-effect rounded-lg p-3">
<i class="fas fa-oil-can text-blue-400 mr-2"></i>
<span class="text-sm">石油焦/沥青焦</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-purple-900/30 to-pink-900/30 rounded-xl p-6 text-center">
<h3 class="text-xl font-semibold mb-4 text-purple-300">中游</h3>
<div class="space-y-3">
<div class="glass-effect rounded-lg p-3">
<i class="fas fa-microchip text-purple-400 mr-2"></i>
<span class="text-sm">负极材料</span>
</div>
<div class="glass-effect rounded-lg p-3">
<i class="fas fa-atom text-pink-400 mr-2"></i>
<span class="text-sm">特种石墨</span>
</div>
<div class="glass-effect rounded-lg p-3">
<i class="fas fa-network-wired text-cyan-400 mr-2"></i>
<span class="text-sm">石墨烯材料</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-emerald-900/30 to-teal-900/30 rounded-xl p-6 text-center">
<h3 class="text-xl font-semibold mb-4 text-emerald-300">下游</h3>
<div class="space-y-3">
<div class="glass-effect rounded-lg p-3">
<i class="fas fa-battery-full text-emerald-400 mr-2"></i>
<span class="text-sm">锂电池</span>
</div>
<div class="glass-effect rounded-lg p-3">
<i class="fas fa-mobile-alt text-teal-400 mr-2"></i>
<span class="text-sm">消费电子</span>
</div>
<div class="glass-effect rounded-lg p-3">
<i class="fas fa-server text-cyan-400 mr-2"></i>
<span class="text-sm">半导体</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心公司数据表格 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-8">
<div class="flex items-center mb-8">
<div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-500 rounded-xl flex items-center justify-center mr-4">
<i class="fas fa-table text-white text-xl"></i>
</div>
<h2 class="text-2xl font-bold">核心公司数据</h2>
</div>
<div class="table-scroll">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-700">
<th class="text-left p-4 font-semibold text-amber-400">股票名称</th>
<th class="text-left p-4 font-semibold text-amber-400">产业链环节</th>
<th class="text-left p-4 font-semibold text-amber-400">核心项目/业务</th>
<th class="text-left p-4 font-semibold text-amber-400">关键数据</th>
<th class="text-left p-4 font-semibold text-amber-400">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="p-4 font-medium text-blue-400">星球石墨</td>
<td class="p-4">中游(设备)</td>
<td class="p-4">"材料-设备-系统-服务"一体化</td>
<td class="p-4">氯碱合成炉市占率>80%</td>
<td class="p-4"><span class="badge badge-success">卖水人逻辑</span></td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="p-4 font-medium text-blue-400">宁新新材</td>
<td class="p-4">中游(特种材料)</td>
<td class="p-4">特种石墨及制品</td>
<td class="p-4">H1收入占比87.21%</td>
<td class="p-4"><span class="badge badge-info">国产替代</span></td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="p-4 font-medium text-blue-400">尚太科技</td>
<td class="p-4">中游(负极材料)</td>
<td class="p-4">负极材料一体化生产</td>
<td class="p-4">100%原料自供</td>
<td class="p-4"><span class="badge badge-warning">一体化优势</span></td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="p-4 font-medium text-blue-400">宝泰隆</td>
<td class="p-4">上游(资源)</td>
<td class="p-4">密林石墨探矿权</td>
<td class="p-4">储量1.12亿吨矿石</td>
<td class="p-4"><span class="badge badge-neutral">资源禀赋</span></td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="p-4 font-medium text-blue-400">德尔未来</td>
<td class="p-4">全产业链</td>
<td class="p-4">烯成石墨烯制备设备</td>
<td class="p-4">规划产能125万吨/年</td>
<td class="p-4"><span class="badge badge-success">技术布局</span></td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="p-4 font-medium text-blue-400">新华锦</td>
<td class="p-4">上游(资源)</td>
<td class="p-4">青岛森汇/海正石墨矿</td>
<td class="p-4">资产注入预期</td>
<td class="p-4"><span class="badge badge-accent">主题博弈</span></td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="p-4 font-medium text-blue-400">贝特瑞</td>
<td class="p-4">中游(负极材料)</td>
<td class="p-4">天然/人造石墨负极</td>
<td class="p-4">H1出货量行业第二</td>
<td class="p-4"><span class="badge badge-info">龙头地位</span></td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors">
<td class="p-4 font-medium text-blue-400">锦富技术</td>
<td class="p-4">中游(石墨烯)</td>
<td class="p-4">高性能石墨烯散热膜</td>
<td class="p-4">在建产能400万㎡</td>
<td class="p-4"><span class="badge badge-warning">应用落地</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 关键指标图表 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-8">
<div class="flex items-center mb-8">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center mr-4">
<i class="fas fa-chart-bar text-white text-xl"></i>
</div>
<h2 class="text-2xl font-bold">行业关键指标</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="glass-effect rounded-xl p-6">
<h3 class="text-lg font-semibold mb-4 text-green-300">负极材料市场份额</h3>
<div class="chart-container">
<canvas id="marketShareChart"></canvas>
</div>
</div>
<div class="glass-effect rounded-xl p-6">
<h3 class="text-lg font-semibold mb-4 text-emerald-300">产业链价值分布</h3>
<div class="chart-container">
<canvas id="valueChainChart"></canvas>
</div>
</div>
</div>
</div>
</section>
<!-- 风险提示 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-8">
<div class="flex items-center mb-8">
<div class="w-12 h-12 bg-gradient-to-br from-red-500 to-pink-500 rounded-xl flex items-center justify-center mr-4">
<i class="fas fa-exclamation-triangle text-white text-xl"></i>
</div>
<h2 class="text-2xl font-bold">风险与挑战</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gradient-to-br from-red-900/30 to-orange-900/30 rounded-xl p-6 border border-red-500/20">
<h3 class="text-lg font-semibold mb-3 text-red-300">
<i class="fas fa-flask mr-2"></i>技术风险
</h3>
<p class="text-gray-300 text-sm">从实验室到规模化量产存在巨大鸿沟,半导体级特种石墨提纯技术仍是全球性难题。</p>
</div>
<div class="bg-gradient-to-br from-orange-900/30 to-yellow-900/30 rounded-xl p-6 border border-orange-500/20">
<h3 class="text-lg font-semibold mb-3 text-orange-300">
<i class="fas fa-dollar-sign mr-2"></i>商业化风险
</h3>
<p class="text-gray-300 text-sm">石墨烯等新材料成本仍高,性能优势转化为性价比是商业化的核心挑战。</p>
</div>
<div class="bg-gradient-to-br from-yellow-900/30 to-amber-900/30 rounded-xl p-6 border border-yellow-500/20">
<h3 class="text-lg font-semibold mb-3 text-yellow-300">
<i class="fas fa-globe mr-2"></i>政策风险
</h3>
<p class="text-gray-300 text-sm">出口管制可能促使海外客户加速寻找替代供应商,长期可能削弱中国产业链地位。</p>
</div>
<div class="bg-gradient-to-br from-amber-900/30 to-red-900/30 rounded-xl p-6 border border-amber-500/20">
<h3 class="text-lg font-semibold mb-3 text-amber-300">
<i class="fas fa-users mr-2"></i>竞争风险
</h3>
<p class="text-gray-300 text-sm">传统负极材料产能过剩,竞争激烈;特种石墨领域新进入者增多。</p>
</div>
</div>
</div>
</section>
<!-- 投资建议 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-8 neon-glow">
<div class="flex items-center mb-8">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-500 rounded-xl flex items-center justify-center mr-4">
<i class="fas fa-trophy text-white text-xl"></i>
</div>
<h2 class="text-2xl font-bold">投资启示</h2>
</div>
<div class="bg-gradient-to-br from-green-900/20 to-emerald-900/20 rounded-xl p-6 border border-green-500/30">
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3 text-green-300">
<i class="fas fa-star mr-2"></i>最具投资价值环节
</h3>
<p class="text-gray-300 mb-4">以技术壁垒和客户粘性为核心的特种石墨及相关设备</p>
<ul class="space-y-2 text-sm text-gray-400">
<li>✓ 高壁垒:工艺技术和客户认证</li>
<li>✓ 强确定性:国产替代刚需增长</li>
<li>✓ 盈利能力强:高毛利净利率</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-emerald-300">
<i class="fas fa-crosshairs mr-2"></i>关键跟踪指标
</h3>
<ul class="space-y-2 text-sm text-gray-400">
<li>• 星球石墨:印度订单节奏、半导体认证进展</li>
<li>• 负极材料:石墨化加工费、出口价格</li>
<li>• 石墨烯应用:出货量、产能利用率</li>
<li>• 技术进展:实验室合作转化成果</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="glass-effect border-t border-gray-700 py-6 mt-12">
<div class="container mx-auto px-4 text-center text-gray-400">
<p class="text-sm">数据来源:公开研究报告、公司公告 | 更新时间2025年10月</p>
<p class="text-xs mt-2">投资有风险,入市需谨慎</p>
</div>
</footer>
<script>
// 负极材料市场份额图表
const ctx1 = document.getElementById('marketShareChart').getContext('2d');
new Chart(ctx1, {
type: 'bar',
data: {
labels: ['杉杉股份', '贝特瑞', '中科电气', '尚太科技', '璞泰来', '翔丰华'],
datasets: [{
label: '市场份额 (%)',
data: [21, 18, 15, 12, 8, 5],
backgroundColor: [
'rgba(59, 130, 246, 0.8)',
'rgba(139, 92, 246, 0.8)',
'rgba(236, 72, 153, 0.8)',
'rgba(34, 197, 94, 0.8)',
'rgba(251, 146, 60, 0.8)',
'rgba(147, 51, 234, 0.8)'
],
borderColor: [
'rgba(59, 130, 246, 1)',
'rgba(139, 92, 246, 1)',
'rgba(236, 72, 153, 1)',
'rgba(34, 197, 94, 1)',
'rgba(251, 146, 60, 1)',
'rgba(147, 51, 234, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: 'rgba(255, 255, 255, 0.7)'
}
},
x: {
grid: {
display: false
},
ticks: {
color: 'rgba(255, 255, 255, 0.7)'
}
}
}
}
});
// 产业链价值分布图表
const ctx2 = document.getElementById('valueChainChart').getContext('2d');
new Chart(ctx2, {
type: 'doughnut',
data: {
labels: ['设备制造', '特种材料', '石墨烯应用', '负极材料', '上游资源'],
datasets: [{
data: [35, 25, 20, 15, 5],
backgroundColor: [
'rgba(59, 130, 246, 0.8)',
'rgba(34, 197, 94, 0.8)',
'rgba(236, 72, 153, 0.8)',
'rgba(251, 146, 60, 0.8)',
'rgba(147, 51, 234, 0.8)'
],
borderColor: [
'rgba(59, 130, 246, 1)',
'rgba(34, 197, 94, 1)',
'rgba(236, 72, 153, 1)',
'rgba(251, 146, 60, 1)',
'rgba(147, 51, 234, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
color: 'rgba(255, 255, 255, 0.7)',
padding: 15
}
}
}
}
});
// 添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 添加页面加载动画
window.addEventListener('load', () => {
document.querySelectorAll('.glass-effect').forEach((el, index) => {
setTimeout(() => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.5s ease';
setTimeout(() => {
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
}, 100);
}, index * 100);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,601 @@
<!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://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></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%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.price-chart {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 6s ease-in-out infinite;
}
.glow {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 glass-effect text-white">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-bolt text-2xl text-yellow-400"></i>
<span class="text-xl font-bold">LiPF₆ 深度分析</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#overview" class="hover:text-yellow-400 transition">概念概览</a>
<a href="#timeline" class="hover:text-yellow-400 transition">时间轴</a>
<a href="#companies" class="hover:text-yellow-400 transition">核心公司</a>
<a href="#risks" class="hover:text-yellow-400 transition">风险分析</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="gradient-bg min-h-screen flex items-center justify-center text-white relative overflow-hidden">
<div class="absolute inset-0 opacity-20">
<div class="absolute top-10 left-10 w-72 h-72 bg-yellow-400 rounded-full filter blur-3xl float-animation"></div>
<div class="absolute bottom-10 right-10 w-96 h-96 bg-purple-400 rounded-full filter blur-3xl float-animation" style="animation-delay: 3s;"></div>
</div>
<div class="container mx-auto px-4 relative z-10">
<div class="text-center">
<h1 class="text-5xl md:text-7xl font-bold mb-6">
磷化工六氟磷酸锂
</h1>
<p class="text-xl md:text-2xl mb-8 opacity-90">
供需逆转引爆价格暴涨 | 周期底部迎来强劲反转
</p>
<div class="flex justify-center space-x-8 mb-12">
<div class="text-center">
<div class="text-4xl font-bold text-yellow-400">76.23%</div>
<div class="text-sm opacity-80">价格涨幅</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-green-400">10.75万</div>
<div class="text-sm opacity-80">当前价格(元/吨)</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-blue-400">70%+</div>
<div class="text-sm opacity-80">龙头市场份额</div>
</div>
</div>
<div class="flex justify-center space-x-4">
<button onclick="document.getElementById('overview').scrollIntoView()" class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition">
深入了解
</button>
<button onclick="document.getElementById('companies').scrollIntoView()" class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition">
查看标的
</button>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<i class="fas fa-chevron-down text-3xl"></i>
</div>
</section>
<!-- Overview Section -->
<section id="overview" class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">核心逻辑分析</h2>
<p class="text-xl text-gray-600">供需双击下的超级周期</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-arrow-trend-up text-green-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800">需求端超预期</h3>
</div>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>国内"以旧换新"政策刺激年末抢装</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>海外储能需求持续旺盛,成为新增量</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>2024年10月电池产量创历史新高113.1GWh</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>2025年预计需求21-23万吨增速20%+</span>
</li>
</ul>
</div>
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-warehouse text-red-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800">供给端刚性约束</h3>
</div>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>高成本产能已实质性关停,行业深度洗牌</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>头部企业扩产谨慎,需长期订单支撑</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>呆滞产能5万吨重启门槛高需10万+价格)</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>CR3超70%龙头产能利用率80%+</span>
</li>
</ul>
</div>
</div>
<!-- Price Chart -->
<div class="bg-white rounded-2xl p-8 shadow-lg">
<h3 class="text-2xl font-bold text-gray-800 mb-6">价格走势图</h3>
<div class="price-chart rounded-lg p-4">
<canvas id="priceChart" height="100"></canvas>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section id="timeline" class="py-20 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">关键时间轴</h2>
<p class="text-xl text-gray-600">从低谷到狂热的演变历程</p>
</div>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-purple-500 to-yellow-500"></div>
<!-- Timeline Events -->
<div class="space-y-12">
<div class="flex items-center justify-end md:w-1/2 pr-8 relative">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="text-sm text-purple-600 font-semibold mb-2">2024年11月</div>
<div class="text-lg font-bold text-gray-800 mb-2">价格触底反弹</div>
<div class="text-gray-600">价格从底部上涨3.7%至5.65万元/吨,行业毛利润由亏转盈</div>
</div>
<div class="absolute right-0 w-4 h-4 bg-purple-500 rounded-full timeline-dot transform translate-x-1/2"></div>
</div>
<div class="flex items-center justify-start md:w-1/2 md:ml-auto pl-8 relative">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="text-sm text-blue-600 font-semibold mb-2">2025年9月</div>
<div class="text-lg font-bold text-gray-800 mb-2">预期发酵</div>
<div class="text-gray-600">中金报告指出最先触底涨价价格从5.0涨至5.7万元/吨</div>
</div>
<div class="absolute left-0 w-4 h-4 bg-blue-500 rounded-full timeline-dot transform -translate-x-1/2"></div>
</div>
<div class="flex items-center justify-end md:w-1/2 pr-8 relative">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="text-sm text-green-600 font-semibold mb-2">2025年10月</div>
<div class="text-lg font-bold text-gray-800 mb-2">价格暴涨</div>
<div class="text-gray-600">单月上涨44%十天跳涨33%,市场情绪被点燃</div>
</div>
<div class="absolute right-0 w-4 h-4 bg-green-500 rounded-full timeline-dot transform translate-x-1/2"></div>
</div>
<div class="flex items-center justify-start md:w-1/2 md:ml-auto pl-8 relative">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="text-sm text-yellow-600 font-semibold mb-2">2025年11月</div>
<div class="text-lg font-bold text-gray-800 mb-2">价格登顶</div>
<div class="text-gray-600">突破10.75万元/吨较9月底暴涨76.23%"要签长协得先给钱"</div>
</div>
<div class="absolute left-0 w-4 h-4 bg-yellow-500 rounded-full timeline-dot transform -translate-x-1/2"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Companies Section -->
<section id="companies" class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">核心公司对比</h2>
<p class="text-xl text-gray-600">行业龙头价值深度剖析</p>
</div>
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="gradient-bg text-white">
<tr>
<th class="px-6 py-4 text-left">公司</th>
<th class="px-6 py-4 text-left">核心优势</th>
<th class="px-6 py-4 text-center">产能(万吨)</th>
<th class="px-6 py-4 text-center">25年出货预期</th>
<th class="px-6 py-4 text-center">产能利用率</th>
<th class="px-6 py-4 text-center">投资评级</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
<span class="font-bold text-purple-600">天赐</span>
</div>
<div>
<div class="font-semibold">天赐材料</div>
<div class="text-sm text-gray-500">002709.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
绝对领导者
</span>
<div class="text-sm text-gray-600 mt-1">规模最大、深度绑定宁德</div>
</td>
<td class="px-6 py-4 text-center font-semibold">11</td>
<td class="px-6 py-4 text-center">9万吨</td>
<td class="px-6 py-4 text-center">
<span class="text-green-600 font-semibold">80%+</span>
</td>
<td class="px-6 py-4 text-center">
<span class="text-yellow-500">★★★★★</span>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
<span class="font-bold text-blue-600">多氟</span>
</div>
<div>
<div class="font-semibold">多氟多</div>
<div class="text-sm text-gray-500">002407.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
成本领先
</span>
<div class="text-sm text-gray-600 mt-1">氟化工背景深厚</div>
</td>
<td class="px-6 py-4 text-center font-semibold">5.5</td>
<td class="px-6 py-4 text-center">5万吨</td>
<td class="px-6 py-4 text-center">
<span class="text-green-600 font-semibold">80%+</span>
</td>
<td class="px-6 py-4 text-center">
<span class="text-yellow-500">★★★★☆</span>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
<span class="font-bold text-green-600">天际</span>
</div>
<div>
<div class="font-semibold">天际股份</div>
<div class="text-sm text-gray-500">002759.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
高弹性
</span>
<div class="text-sm text-gray-600 mt-1">经营杠杆高</div>
</td>
<td class="px-6 py-4 text-center font-semibold">3.7</td>
<td class="px-6 py-4 text-center">3.6万吨</td>
<td class="px-6 py-4 text-center">
<span class="text-green-600 font-semibold">100%</span>
</td>
<td class="px-6 py-4 text-center">
<span class="text-yellow-500">★★★☆☆</span>
</td>
</tr>
<tr class="hover:bg-gray-50 transition">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
<span class="font-bold text-yellow-600">云天</span>
</div>
<div>
<div class="font-semibold">云天化</div>
<div class="text-sm text-gray-500">600096.SH</div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
一体化
</span>
<div class="text-sm text-gray-600 mt-1">磷化工整合逻辑</div>
</td>
<td class="px-6 py-4 text-center font-semibold">0.5</td>
<td class="px-6 py-4 text-center">-</td>
<td class="px-6 py-4 text-center">
<span class="text-gray-600">-</span>
</td>
<td class="px-6 py-4 text-center">
<span class="text-yellow-500">★★☆☆☆</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Risks Section -->
<section id="risks" class="py-20 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">风险提示</h2>
<p class="text-xl text-gray-600">投资需警惕的潜在风险</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-microchip text-red-600 text-xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">技术风险</h3>
<p class="text-gray-600 text-sm">固态电池长期可能颠覆液态电解液格局但2030年前威胁有限</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-chart-line text-orange-600 text-xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">价格风险</h3>
<p class="text-gray-600 text-sm">10万+高价可持续性存疑,或刺激替代品研发</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-industry text-yellow-600 text-xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">产能风险</h3>
<p class="text-gray-600 text-sm">5万吨呆滞产能若重启将打破供需平衡</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-gavel text-blue-600 text-xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">政策风险</h3>
<p class="text-gray-600 text-sm">新能源汽车补贴退坡可能影响下游需求</p>
</div>
</div>
</div>
</section>
<!-- Future Outlook -->
<section class="py-20">
<div class="container mx-auto px-4">
<div class="gradient-bg rounded-3xl p-12 text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-white opacity-5 rounded-full -mr-48 -mt-48"></div>
<div class="relative z-10">
<h2 class="text-4xl font-bold mb-6">未来展望</h2>
<div class="grid md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-yellow-400">短期3-6个月</h3>
<ul class="space-y-2 text-white/90">
<li>• Q1财报验证利润兑现</li>
<li>• 长协价格落地执行</li>
<li>• 呆滞产能动态监控</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-green-400">中期1-2年</h3>
<ul class="space-y-2 text-white/90">
<li>• 维持紧平衡格局</li>
<li>• 龙头份额持续提升</li>
<li>• 磷化工一体化深化</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-400">长期3-5年</h3>
<ul class="space-y-2 text-white/90">
<li>• 固态电池技术迭代</li>
<li>• 海外产能全球化布局</li>
<li>• 产业链护城河构建</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4">
<div class="text-center">
<p class="text-gray-400">© 2025 深度投资分析 | 基于公开数据整理 | 投资有风险,入市需谨慎</p>
</div>
</div>
</footer>
<script>
// Scroll Reveal
ScrollReveal().reveal('.card-hover', {
interval: 100,
distance: '50px',
duration: 1000,
origin: 'bottom'
});
// Price Chart
const ctx = document.getElementById('priceChart').getContext('2d');
const priceChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2024年11月', '2025年1月', '2025年3月', '2025年5月', '2025年7月', '2025年9月', '2025年11月'],
datasets: [{
label: '六氟磷酸锂价格(万元/吨)',
data: [5.65, 5.8, 6.2, 6.5, 7.8, 9.5, 10.75],
borderColor: 'rgb(99, 102, 241)',
backgroundColor: 'rgba(99, 102, 241, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4,
pointRadius: 6,
pointBackgroundColor: 'rgb(99, 102, 241)',
pointBorderColor: '#fff',
pointBorderWidth: 2,
pointHoverRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 12,
titleFont: {
size: 14
},
bodyFont: {
size: 16,
weight: 'bold'
},
callbacks: {
label: function(context) {
return '价格: ¥' + context.parsed.y + '万/吨';
}
}
}
},
scales: {
y: {
beginAtZero: false,
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.05)'
},
ticks: {
callback: function(value) {
return '¥' + value + '万';
}
}
},
x: {
grid: {
display: false
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add parallax effect to hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.gradient-bg');
if (hero) {
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
</script>
</body>
</html>

View File

@@ -0,0 +1,780 @@
<!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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css">
<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=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');
* {
font-family: 'Noto Sans SC', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-line {
background: linear-gradient(180deg, #667eea, #764ba2);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.stock-row:hover {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.marquee {
animation: scroll 30s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<section class="hero-gradient min-h-screen flex items-center relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-40"></div>
<div class="container mx-auto px-6 relative z-10">
<div class="text-center text-white">
<h1 class="text-5xl md:text-7xl font-bold mb-6 animate-pulse">
福建国资
</h1>
<p class="text-2xl md:text-3xl mb-4 font-light">
海洋强国与产业升级的投资新蓝海
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<div class="glass-effect px-6 py-3 rounded-full">
<i class="fas fa-ship mr-2"></i> 福建舰服役在即
</div>
<div class="glass-effect px-6 py-3 rounded-full">
<i class="fas fa-wind mr-2"></i> 海上风电龙头
</div>
<div class="glass-effect px-6 py-3 rounded-full">
<i class="fas fa-battery-full mr-2"></i> 新能源电池之都
</div>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<i class="fas fa-chevron-down text-white text-3xl"></i>
</div>
</section>
<!-- News Ticker -->
<div class="bg-gradient-to-r from-purple-600 to-blue-600 text-white py-2 overflow-hidden">
<div class="marquee flex">
<span class="px-4">🚀 福建舰服役日期将近 国防部回应</span>
<span class="px-4">⚡ 福建锂电池产能占全国近三分之一</span>
<span class="px-4">🌊 万华化学福建工业园复产</span>
<span class="px-4">📈 国资委:抓紧推进国资央企三级规划编制</span>
<span class="px-4">🔋 福建制定"海上福建"建设实施方案</span>
<span class="px-4">🚢 福建舰通过台湾海峡</span>
<span class="px-4">🚀 福建舰服役日期将近 国防部回应</span>
<span class="px-4">⚡ 福建锂电池产能占全国近三分之一</span>
<span class="px-4">🌊 万华化学福建工业园复产</span>
<span class="px-4">📈 国资委:抓紧推进国资央企三级规划编制</span>
<span class="px-4">🔋 福建制定"海上福建"建设实施方案</span>
<span class="px-4">🚢 福建舰通过台湾海峡</span>
</div>
</div>
<!-- Core Logic Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-16">
<span class="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
核心驱动力
</span>
</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Policy Drive -->
<div class="card-hover bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-2xl">
<div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-landmark text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-purple-800">政策驱动</h3>
<p class="text-gray-700 leading-relaxed">
国务院国资委深化国企改革,推进"十五五"规划。福建冶金重组为工控集团,解决制约国企高质量发展的体制机制难题,构建新质生产力相适应的生产关系。
</p>
<div class="mt-6 space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-purple-600 mr-2"></i>
<span>国企改革深化提升行动</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-purple-600 mr-2"></i>
<span>专业化平台公司整合</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-purple-600 mr-2"></i>
<span>资产证券化提速</span>
</div>
</div>
</div>
<!-- Industrial Advantage -->
<div class="card-hover bg-gradient-to-br from-blue-50 to-cyan-50 p-8 rounded-2xl">
<div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-industry text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-blue-800">产业优势</h3>
<p class="text-gray-700 leading-relaxed">
福建已形成坚实的产业基础新能源领域全国领先。锂电池产能占全国近三分之一海上风电年利用小时数全国第一具备100%全额消纳优势。
</p>
<div class="mt-6 space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-blue-600 mr-2"></i>
<span>锂电池产能380GWh全国1/3</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-blue-600 mr-2"></i>
<span>海上风电利用小时数4000+</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-blue-600 mr-2"></i>
<span>全额消纳保障</span>
</div>
</div>
</div>
<!-- Geopolitical Value -->
<div class="card-hover bg-gradient-to-br from-green-50 to-emerald-50 p-8 rounded-2xl">
<div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-globe-asia text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-green-800">地缘价值</h3>
<p class="text-gray-700 leading-relaxed">
"福建舰"命名使福建与国家主权安全深度绑定。两岸融合、"海上福建"建设等国家战略,赋予福建国资特殊使命和战略卡位价值。
</p>
<div class="mt-6 space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-600 mr-2"></i>
<span>海洋强国战略前沿</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-600 mr-2"></i>
<span>两岸融合示范区</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-600 mr-2"></i>
<span>服务国家战略使命</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Events -->
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-16">
<span class="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
重大事件时间轴
</span>
</h2>
<div class="relative">
<div class="timeline-line absolute left-1/2 transform -translate-x-1/2 w-1 h-full"></div>
<!-- Timeline Items -->
<div class="space-y-12">
<!-- Nov 2024 -->
<div class="flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<h3 class="text-xl font-bold mb-2">2024年11月</h3>
<p class="text-gray-600">上海园林集团考察福建金森,长三角与福建对口合作进入产业层面。</p>
</div>
</div>
<div class="w-8 h-8 bg-purple-600 rounded-full border-4 border-white relative z-10 pulse-dot"></div>
<div class="w-1/2 pl-8"></div>
</div>
<!-- Mar-May 2025 -->
<div class="flex items-center">
<div class="w-1/2 pr-8"></div>
<div class="w-8 h-8 bg-blue-600 rounded-full border-4 border-white relative z-10 pulse-dot"></div>
<div class="w-1/2 pl-8">
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<h3 class="text-xl font-bold mb-2">2025年3-5月</h3>
<p class="text-gray-600">福建冶金重组,拟注入新组建的福建省工业控股集团。</p>
</div>
</div>
</div>
<!-- Jun-Sep 2025 -->
<div class="flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<h3 class="text-xl font-bold mb-2">2025年6-9月</h3>
<p class="text-gray-600">"福建舰"成焦点,国防部多次发声,称其"入列进入最后攻坚时刻"。</p>
</div>
</div>
<div class="w-8 h-8 bg-green-600 rounded-full border-4 border-white relative z-10 pulse-dot"></div>
<div class="w-1/2 pl-8"></div>
</div>
<!-- Jul-Aug 2025 -->
<div class="flex items-center">
<div class="w-1/2 pr-8"></div>
<div class="w-8 h-8 bg-yellow-600 rounded-full border-4 border-white relative z-10 pulse-dot"></div>
<div class="w-1/2 pl-8">
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<h3 class="text-xl font-bold mb-2">2025年7-8月</h3>
<p class="text-gray-600">万华化学福建工业园复产,"海上福建"建设实施方案加速制定。</p>
</div>
</div>
</div>
<!-- Oct 2025 -->
<div class="flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<h3 class="text-xl font-bold mb-2">2025年10月</h3>
<p class="text-gray-600">纪念台湾光复80周年大会预期"十五五规划"与福建舰服役双击行情。</p>
</div>
</div>
<div class="w-8 h-8 bg-red-600 rounded-full border-4 border-white relative z-10 pulse-dot"></div>
<div class="w-1/2 pl-8"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Industry Chain -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-16">
<span class="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
产业链生态圈
</span>
</h2>
<div class="grid lg:grid-cols-2 gap-12">
<!-- New Energy & Marine Economy -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-blue-800">
<i class="fas fa-wind mr-3"></i>新能源与海洋经济
</h3>
<div class="space-y-4">
<div class="bg-white p-4 rounded-lg">
<div class="flex items-center mb-2">
<div class="w-3 h-3 bg-blue-600 rounded-full mr-3"></div>
<span class="font-semibold">核心运营商</span>
</div>
<div class="ml-6 space-y-2 text-sm">
<p>• 福能股份装机规模605万千瓦福建省最大综合电企</p>
<p>• 中闽能源96万千瓦专注清洁能源开发</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg">
<div class="flex items-center mb-2">
<div class="w-3 h-3 bg-blue-400 rounded-full mr-3"></div>
<span class="font-semibold">产业优势</span>
</div>
<div class="ml-6 space-y-2 text-sm">
<p>• 风电年利用小时数2700小时全国领先</p>
<p>• 海上风电利用小时数突破4000小时</p>
<p>• 100%全额消纳,电价下行风险小</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg">
<div class="flex items-center mb-2">
<div class="w-3 h-3 bg-blue-300 rounded-full mr-3"></div>
<span class="font-semibold">未来增长</span>
</div>
<div class="ml-6 space-y-2 text-sm">
<p>• 在手项目投产后中闽能源预计PE 14倍</p>
<p>• 平价海风项目资本金收益率可达9%以上</p>
</div>
</div>
</div>
</div>
<!-- High-end Manufacturing -->
<div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-purple-800">
<i class="fas fa-microchip mr-3"></i>高端制造与新材料
</h3>
<div class="space-y-4">
<div class="bg-white p-4 rounded-lg">
<div class="flex items-center mb-2">
<div class="w-3 h-3 bg-purple-600 rounded-full mr-3"></div>
<span class="font-semibold">核心企业</span>
</div>
<div class="ml-6 space-y-2 text-sm">
<p>• 厦钨新能:锂电池正极材料龙头</p>
<p>• 万华化学福建工业园80万吨MDI装置</p>
<p>• 厦门钨业:稀土深加工全球领先</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg">
<div class="flex items-center mb-2">
<div class="w-3 h-3 bg-purple-400 rounded-full mr-3"></div>
<span class="font-semibold">产业地位</span>
</div>
<div class="ml-6 space-y-2 text-sm">
<p>• 福建锂电池产能占全国近三分之一</p>
<p>• 锂电池出口占全国28%</p>
<p>• 全球最大的新能源电池产业基地</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg">
<div class="flex items-center mb-2">
<div class="w-3 h-3 bg-purple-300 rounded-full mr-3"></div>
<span class="font-semibold">国际合作</span>
</div>
<div class="ml-6 space-y-2 text-sm">
<p>• 万华化学与ADNOC、北欧化工合作</p>
<p>• 160万吨特种聚烯烃一体化项目</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Key Companies -->
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-16">
<span class="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
核心玩家深度解析
</span>
</h2>
<div class="grid lg:grid-cols-2 gap-8">
<!-- 中闽能源 -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover">
<div class="bg-gradient-to-r from-blue-500 to-cyan-500 p-6 text-white">
<h3 class="text-2xl font-bold">中闽能源</h3>
<p class="text-blue-100">纯粹的海上风电运营商</p>
</div>
<div class="p-6">
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="bg-blue-50 p-4 rounded-lg">
<p class="text-sm text-gray-600">装机规模</p>
<p class="text-2xl font-bold text-blue-600">96万千瓦</p>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<p class="text-sm text-gray-600">ROE</p>
<p class="text-2xl font-bold text-green-600">20%+</p>
</div>
</div>
<h4 class="font-bold mb-3">竞争优势</h4>
<ul class="space-y-2 text-sm text-gray-700 mb-4">
<li><i class="fas fa-check text-green-500 mr-2"></i>高盈利资产,存量项目多为高补贴项目</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>集团资产注入潜力巨大平海湾三期30万千瓦</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>业务纯粹,估值逻辑清晰</li>
</ul>
<div class="bg-yellow-50 p-4 rounded-lg">
<p class="text-sm font-semibold text-yellow-800 mb-2">关键指标</p>
<div class="text-sm space-y-1">
<p>• 海风项目度电税前利润0.29元行业平均0.1-0.2元)</p>
<p>• 预计2025年利润7-8亿元</p>
<p>• 集团待注入项目70亿元投资</p>
</div>
</div>
</div>
</div>
<!-- 福能股份 -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover">
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 text-white">
<h3 class="text-2xl font-bold">福能股份</h3>
<p class="text-purple-100">福建综合能源龙头</p>
</div>
<div class="p-6">
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="bg-purple-50 p-4 rounded-lg">
<p class="text-sm text-gray-600">装机规模</p>
<p class="text-2xl font-bold text-purple-600">605万千瓦</p>
</div>
<div class="bg-orange-50 p-4 rounded-lg">
<p class="text-sm text-gray-600">2024净利</p>
<p class="text-2xl font-bold text-orange-600">30亿+</p>
</div>
</div>
<h4 class="font-bold mb-3">竞争优势</h4>
<ul class="space-y-2 text-sm text-gray-700 mb-4">
<li><i class="fas fa-check text-green-500 mr-2"></i>规模与稳定性,火电+热电提供稳定现金流</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>海风项目获取能力强,与中闽同为核心受益者</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>多元化布局,参股宁德核电、推进抽蓄项目</li>
</ul>
<div class="bg-blue-50 p-4 rounded-lg">
<p class="text-sm font-semibold text-blue-800 mb-2">未来增长</p>
<div class="text-sm space-y-1">
<p>• 在建和核准项目600万千瓦</p>
<p>• 海风项目配额1.2GW</p>
<p>• 2024年PE不到9倍具备性价比</p>
</div>
</div>
</div>
</div>
<!-- 厦钨新能 -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover">
<div class="bg-gradient-to-r from-green-500 to-teal-500 p-6 text-white">
<h3 class="text-2xl font-bold">厦钨新能</h3>
<p class="text-green-100">锂电池正极材料龙头</p>
</div>
<div class="p-6">
<h4 class="font-bold mb-3">投资亮点</h4>
<ul class="space-y-2 text-sm text-gray-700 mb-4">
<li><i class="fas fa-check text-green-500 mr-2"></i>背靠福建全球领先的锂电池产能集群</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>重组后的福建工业控股集团带来资源协同</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>高镍三元等材料领域具备技术优势</li>
</ul>
<div class="bg-gradient-to-r from-green-50 to-teal-50 p-4 rounded-lg">
<p class="text-sm font-semibold text-green-800">产业地位</p>
<p class="text-sm mt-2">福建锂电池产能超380GWh占全国近1/3厦钨新能作为核心材料商深度受益。</p>
</div>
</div>
</div>
<!-- 万华化学福建基地 -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover">
<div class="bg-gradient-to-r from-orange-500 to-red-500 p-6 text-white">
<h3 class="text-2xl font-bold">万华化学(福建)</h3>
<p class="text-orange-100">化工新材料航母的福建版图</p>
</div>
<div class="p-6">
<h4 class="font-bold mb-3">核心优势</h4>
<ul class="space-y-2 text-sm text-gray-700 mb-4">
<li><i class="fas fa-check text-green-500 mr-2"></i>全球领先的MDI、TDI生产技术</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>自有310MW海上风电项目降本减碳优势</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>与ADNOC等巨头的特种聚烯烃项目</li>
</ul>
<div class="bg-orange-50 p-4 rounded-lg">
<p class="text-sm font-semibold text-orange-800">重点项目</p>
<div class="text-sm mt-2 space-y-1">
<p>• 80万吨/年MDI装置已复产</p>
<p>• 160万吨特种聚烯烃一体化项目福州</p>
<p>• 310兆瓦海上风电绿电配套</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-8">
<span class="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
福建国资概念股全览
</span>
</h2>
<p class="text-center text-gray-600 mb-12">涵盖福建省各地市国资委控股的上市公司</p>
<div class="overflow-x-auto">
<table class="table-auto w-full bg-white rounded-lg shadow-lg">
<thead class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<tr>
<th class="px-4 py-3 text-left">股票名称</th>
<th class="px-4 py-3 text-left">所属地区</th>
<th class="px-4 py-3 text-left">分类</th>
<th class="px-4 py-3 text-left">核心标签</th>
</tr>
</thead>
<tbody>
<!-- 核心企业突出显示 -->
<tr class="stock-row bg-purple-50 border-b">
<td class="px-4 py-3 font-bold text-purple-700">
<i class="fas fa-star text-yellow-500 mr-2"></i>中闽能源
</td>
<td class="px-4 py-3">福建省</td>
<td class="px-4 py-3">新能源</td>
<td class="px-4 py-3">
<span class="inline-block bg-purple-200 text-purple-800 text-xs px-2 py-1 rounded-full mr-1">海上风电</span>
<span class="inline-block bg-blue-200 text-blue-800 text-xs px-2 py-1 rounded-full">高ROE</span>
</td>
</tr>
<tr class="stock-row bg-purple-50 border-b">
<td class="px-4 py-3 font-bold text-purple-700">
<i class="fas fa-star text-yellow-500 mr-2"></i>福能股份
</td>
<td class="px-4 py-3">福建省</td>
<td class="px-4 py-3">综合能源</td>
<td class="px-4 py-3">
<span class="inline-block bg-purple-200 text-purple-800 text-xs px-2 py-1 rounded-full mr-1">火电+新能源</span>
<span class="inline-block bg-green-200 text-green-800 text-xs px-2 py-1 rounded-full">低估值</span>
</td>
</tr>
<tr class="stock-row bg-purple-50 border-b">
<td class="px-4 py-3 font-bold text-purple-700">
<i class="fas fa-star text-yellow-500 mr-2"></i>厦钨新能
</td>
<td class="px-4 py-3">福建省</td>
<td class="px-4 py-3">新材料</td>
<td class="px-4 py-3">
<span class="inline-block bg-purple-200 text-purple-800 text-xs px-2 py-1 rounded-full mr-1">锂电池材料</span>
<span class="inline-block bg-red-200 text-red-800 text-xs px-2 py-1 rounded-full">高成长</span>
</td>
</tr>
<!-- 福建省其他企业 -->
<tr class="stock-row border-b hover:bg-gray-50">
<td class="px-4 py-3">厦门钨业</td>
<td class="px-4 py-3">福建省</td>
<td class="px-4 py-3">有色金属</td>
<td class="px-4 py-3">
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full">稀土</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50">
<td class="px-4 py-3">福建高速</td>
<td class="px-4 py-3">福建省</td>
<td class="px-4 py-3">交通运输</td>
<td class="px-4 py-3">
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full">路桥</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50">
<td class="px-4 py-3">三钢闽光</td>
<td class="px-4 py-3">福建省</td>
<td class="px-4 py-3">钢铁</td>
<td class="px-4 py-3">
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full">特钢</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50">
<td class="px-4 py-3">星网锐捷</td>
<td class="px-4 py-3">福建省</td>
<td class="px-4 py-3">通信设备</td>
<td class="px-4 py-3">
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full">网络设备</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50">
<td class="px-4 py-3">福建水泥</td>
<td class="px-4 py-3">福建省</td>
<td class="px-4 py-3">建材</td>
<td class="px-4 py-3">
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full">水泥</span>
</td>
</tr>
<!-- 厦门市企业 -->
<tr class="stock-row border-b hover:bg-gray-50 bg-blue-50">
<td class="px-4 py-3 font-semibold">建发股份</td>
<td class="px-4 py-3">厦门市</td>
<td class="px-4 py-3">供应链</td>
<td class="px-4 py-3">
<span class="inline-block bg-blue-200 text-blue-800 text-xs px-2 py-1 rounded-full">供应链运营</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50 bg-blue-50">
<td class="px-4 py-3 font-semibold">厦门象屿</td>
<td class="px-4 py-3">厦门市</td>
<td class="px-4 py-3">供应链</td>
<td class="px-4 py-3">
<span class="inline-block bg-blue-200 text-blue-800 text-xs px-2 py-1 rounded-full">大宗商品</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50 bg-blue-50">
<td class="px-4 py-3 font-semibold">厦门国贸</td>
<td class="px-4 py-3">厦门市</td>
<td class="px-4 py-3">供应链</td>
<td class="px-4 py-3">
<span class="inline-block bg-blue-200 text-blue-800 text-xs px-2 py-1 rounded-full">贸易</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50 bg-blue-50">
<td class="px-4 py-3 font-semibold">厦门港务</td>
<td class="px-4 py-3">厦门市</td>
<td class="px-4 py-3">交通运输</td>
<td class="px-4 py-3">
<span class="inline-block bg-blue-200 text-blue-800 text-xs px-2 py-1 rounded-full">港口</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50 bg-blue-50">
<td class="px-4 py-3 font-semibold">兴业证券</td>
<td class="px-4 py-3">厦门市</td>
<td class="px-4 py-3">金融</td>
<td class="px-4 py-3">
<span class="inline-block bg-blue-200 text-blue-800 text-xs px-2 py-1 rounded-full">券商</span>
</td>
</tr>
<!-- 其他地市企业 -->
<tr class="stock-row border-b hover:bg-gray-50">
<td class="px-4 py-3">紫金矿业</td>
<td class="px-4 py-3">龙岩市</td>
<td class="px-4 py-3">有色金属</td>
<td class="px-4 py-3">
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full">黄金</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50">
<td class="px-4 py-3">片仔癀</td>
<td class="px-4 py-3">漳州市</td>
<td class="px-4 py-3">医药生物</td>
<td class="px-4 py-3">
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full">中药</span>
</td>
</tr>
<tr class="stock-row border-b hover:bg-gray-50">
<td class="px-4 py-3">福建金森</td>
<td class="px-4 py-3">三明市</td>
<td class="px-4 py-3">林业</td>
<td class="px-4 py-3">
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full">碳中和</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Key Catalysts -->
<section class="py-20 bg-gradient-to-br from-purple-100 to-blue-100">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-16">
<span class="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
关键催化剂
</span>
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-6 rounded-xl text-center card-hover">
<div class="text-4xl mb-4">🚢</div>
<h3 class="font-bold mb-2">福建舰服役</h3>
<p class="text-sm text-gray-600">国防部已明确服役日期将近,将引爆海洋防务板块</p>
</div>
<div class="bg-white p-6 rounded-xl text-center card-hover">
<div class="text-4xl mb-4">💨</div>
<h3 class="font-bold mb-2">海风竞配</h3>
<p class="text-sm text-gray-600">2025年初公布新项目竞配结果验证龙头获配能力</p>
</div>
<div class="bg-white p-6 rounded-xl text-center card-hover">
<div class="text-4xl mb-4">📋</div>
<h3 class="font-bold mb-2">十五五规划</h3>
<p class="text-sm text-gray-600">规划纲要发布,为海洋经济提供长期政策支撑</p>
</div>
<div class="bg-white p-6 rounded-xl text-center card-hover">
<div class="text-4xl mb-4">💰</div>
<h3 class="font-bold mb-2">资产注入</h3>
<p class="text-sm text-gray-600">中闽能源集团资产注入启动,带来价值重估</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4">福建国资</h3>
<p class="text-gray-400">海洋强国战略下的价值投资新机遇</p>
<div class="mt-6 flex justify-center space-x-6">
<div class="text-center">
<p class="text-3xl font-bold text-purple-400">4000+</p>
<p class="text-sm text-gray-400">海风利用小时数</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold text-blue-400">1/3</p>
<p class="text-sm text-gray-400">全国锂电池产能占比</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold text-green-400">100%</p>
<p class="text-sm text-gray-400">新能源全额消纳</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800">
<p class="text-sm text-gray-500">© 2024 福建国资投资分析报告 | 数据来源:公开信息整理</p>
</div>
</div>
</div>
</footer>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe elements
document.querySelectorAll('.card-hover').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.6s ease-out';
observer.observe(el);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,477 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="business">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>禾元生物合作 - 稻米造血的千亿市场革命</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); }
50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.8); }
}
.floating { animation: float 6s ease-in-out infinite; }
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.timeline-line {
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.stock-badge {
animation: pulse-glow 3s ease-in-out infinite;
}
.number-animate {
animation: countUp 2s ease-out;
}
@keyframes countUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.market-card {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.tech-card {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.policy-card {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
</style>
</head>
<body class="bg-gray-900 text-white">
<!-- Hero Section -->
<div class="hero-gradient min-h-screen flex items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="text-center">
<div class="floating mb-8">
<div class="inline-flex items-center justify-center w-32 h-32 rounded-full bg-white bg-opacity-20 glass-effect">
<i class="ri-plant-line text-6xl"></i>
</div>
</div>
<h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text">禾元生物合作</h1>
<p class="text-2xl md:text-3xl mb-4 text-white">稻米造血 · 千亿市场革命</p>
<div class="flex flex-wrap justify-center gap-4 mb-8">
<span class="badge badge-success badge-lg stock-badge">全球首创</span>
<span class="badge badge-info badge-lg">科创板五套重启</span>
<span class="badge badge-warning badge-lg">60%进口替代</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
<div class="glass-effect rounded-xl p-6 number-animate">
<div class="text-3xl font-bold text-green-400">300亿</div>
<div class="text-sm text-gray-300">市场规模</div>
</div>
<div class="glass-effect rounded-xl p-6 number-animate" style="animation-delay: 0.2s">
<div class="text-3xl font-bold text-blue-400">99.9999%</div>
<div class="text-sm text-gray-300">产品纯度</div>
</div>
<div class="glass-effect rounded-xl p-6 number-animate" style="animation-delay: 0.4s">
<div class="text-3xl font-bold text-purple-400">1/5</div>
<div class="text-sm text-gray-300">传统成本</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<i class="ri-arrow-down-line text-4xl text-white"></i>
</div>
</div>
<!-- Core Logic Section -->
<section class="py-20 px-4">
<div class="container mx-auto">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">核心驱动力</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="card card-hover bg-base-100 shadow-2xl">
<div class="card-body">
<div class="tech-card w-16 h-16 rounded-full flex items-center justify-center mb-4">
<i class="ri-flask-line text-2xl text-white"></i>
</div>
<h3 class="card-title text-2xl mb-4">技术突破</h3>
<p class="text-gray-300">全球首创"植物源重组蛋白表达平台"利用水稻胚乳细胞作为生物工厂实现99.9999%超高纯度,生产成本仅为传统血浆来源的五分之一。</p>
<div class="mt-4">
<div class="flex justify-between text-sm">
<span>技术壁垒</span>
<span class="text-blue-400">极高</span>
</div>
<div class="flex justify-between text-sm">
<span>专利保护</span>
<span class="text-green-400">完整</span>
</div>
</div>
</div>
</div>
<div class="card card-hover bg-base-100 shadow-2xl">
<div class="card-body">
<div class="market-card w-16 h-16 rounded-full flex items-center justify-center mb-4">
<i class="ri-line-chart-line text-2xl text-white"></i>
</div>
<h3 class="card-title text-2xl mb-4">市场刚需</h3>
<p class="text-gray-300">国内人血清白蛋白市场近300亿元年需求量1000吨其中60%依赖进口。肝硬化低白蛋白血症占整体市场规模约30%,存在巨大进口替代空间。</p>
<div class="mt-4">
<div class="flex justify-between text-sm">
<span>市场空间</span>
<span class="text-purple-400">300亿+</span>
</div>
<div class="flex justify-between text-sm">
<span>进口占比</span>
<span class="text-orange-400">60%</span>
</div>
</div>
</div>
</div>
<div class="card card-hover bg-base-100 shadow-2xl">
<div class="card-body">
<div class="policy-card w-16 h-16 rounded-full flex items-center justify-center mb-4">
<i class="ri-government-line text-2xl text-white"></i>
</div>
<h3 class="card-title text-2xl mb-4">政策红利</h3>
<p class="text-gray-300">科创板第五套标准重启后首家IPO企业获得资本市场对"硬科技"创新的支持。产品获批纳入优先审评审批程序,政策支持力度空前。</p>
<div class="mt-4">
<div class="flex justify-between text-sm">
<span>政策支持</span>
<span class="text-green-400">极强</span>
</div>
<div class="flex justify-between text-sm">
<span>融资渠道</span>
<span class="text-blue-400">畅通</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="py-20 px-4 bg-gray-800">
<div class="container mx-auto">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">关键时间轴</h2>
<div class="relative">
<div class="timeline-line absolute left-1/2 transform -translate-x-1/2 w-1 h-full"></div>
<div class="space-y-12">
<div class="flex items-center justify-center">
<div class="w-5/12 text-right pr-8">
<div class="glass-effect rounded-lg p-4">
<div class="text-sm text-gray-400">2024年5月</div>
<div class="text-xl font-bold">完成III期临床试验</div>
<div class="text-sm text-gray-300 mt-2">疗效非劣于血浆来源产品</div>
</div>
</div>
<div class="w-2/12 flex justify-center">
<div class="w-4 h-4 bg-blue-500 rounded-full"></div>
</div>
<div class="w-5/12"></div>
</div>
<div class="flex items-center justify-center">
<div class="w-5/12"></div>
<div class="w-2/12 flex justify-center">
<div class="w-4 h-4 bg-green-500 rounded-full"></div>
</div>
<div class="w-5/12 pl-8">
<div class="glass-effect rounded-lg p-4">
<div class="text-sm text-gray-400">2025年6月25日</div>
<div class="text-xl font-bold">科创板第五套标准重启</div>
<div class="text-sm text-gray-300 mt-2">禾元生物成为首家上会企业</div>
</div>
</div>
</div>
<div class="flex items-center justify-center">
<div class="w-5/12 text-right pr-8">
<div class="glass-effect rounded-lg p-4">
<div class="text-sm text-gray-400">2025年7月18日</div>
<div class="text-xl font-bold">双重催化剂</div>
<div class="text-sm text-gray-300 mt-2">产品获批 + IPO注册获批</div>
</div>
</div>
<div class="w-2/12 flex justify-center">
<div class="w-4 h-4 bg-purple-500 rounded-full"></div>
</div>
<div class="w-5/12"></div>
</div>
<div class="flex items-center justify-center">
<div class="w-5/12"></div>
<div class="w-2/12 flex justify-center">
<div class="w-4 h-4 bg-orange-500 rounded-full pulse-glow"></div>
</div>
<div class="w-5/12 pl-8">
<div class="glass-effect rounded-lg p-4">
<div class="text-sm text-gray-400">2025年10月28日</div>
<div class="text-xl font-bold text-green-400">正式上市</div>
<div class="text-sm text-gray-300 mt-2">首日盘中临停,市场热度极高</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table Section -->
<section class="py-20 px-4">
<div class="container mx-auto">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">产业链核心公司</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full bg-base-100 rounded-lg shadow-2xl">
<thead>
<tr class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<th class="text-lg font-bold">公司</th>
<th class="text-lg font-bold">关系类型</th>
<th class="text-lg font-bold">合作细节</th>
<th class="text-lg font-bold">投资价值</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td>
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
<span class="font-bold text-white"></span>
</div>
<div>
<div class="font-bold">禾元生物</div>
<div class="text-sm text-gray-400">688765</div>
</div>
</div>
</td>
<td><span class="badge badge-primary">核心标的</span></td>
<td>核心产品奥福民®获批上市,全球首创植物源重组人血清白蛋白</td>
<td><span class="text-red-400">⚡ 高风险高收益</span></td>
</tr>
<tr class="hover">
<td>
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
<span class="font-bold text-white"></span>
</div>
<div>
<div class="font-bold">贝达药业</div>
<div class="text-sm text-gray-400">300558</div>
</div>
</div>
</td>
<td><span class="badge badge-warning">投资+经销</span></td>
<td>持股7.47%,获区域独家经销权,利用成熟销售网络推广</td>
<td><span class="text-green-400">💎 稳健优选</span></td>
</tr>
<tr class="hover">
<td>
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center">
<span class="font-bold text-white"></span>
</div>
<div>
<div class="font-bold">博济医药</div>
<div class="text-sm text-gray-400">300404</div>
</div>
</div>
</td>
<td><span class="badge badge-info">CRO服务</span></td>
<td>提供三期临床研究服务,已赚取服务费</td>
<td><span class="text-yellow-400">📊 事件驱动</span></td>
</tr>
<tr class="hover">
<td>
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center">
<span class="font-bold text-white"></span>
</div>
<div>
<div class="font-bold">楚天科技</div>
<div class="text-sm text-gray-400">300358</div>
</div>
</div>
</td>
<td><span class="badge badge-success">设备供应</span></td>
<td>提供层析柱、超滤系统等关键生产设备</td>
<td><span class="text-gray-400">🔧 产业配套</span></td>
</tr>
<tr class="hover">
<td>
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center">
<span class="font-bold text-white"></span>
</div>
<div>
<div class="font-bold">卫光生物</div>
<div class="text-sm text-gray-400">002880</div>
</div>
</div>
</td>
<td><span class="badge badge-secondary">战略合作</span></td>
<td>在重组生物制品领域建立战略合作,潜在竞争/合作者</td>
<td><span class="text-orange-400">🔄 观望跟踪</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Catalysts & Risks Section -->
<section class="py-20 px-4 bg-gray-800">
<div class="container mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div>
<h2 class="text-3xl font-bold mb-8 gradient-text">近期催化剂</h2>
<div class="space-y-4">
<div class="glass-effect rounded-lg p-6 border-l-4 border-green-500">
<h3 class="text-xl font-bold mb-2">📊 季度销售数据</h3>
<p class="text-gray-300">首个完整销售季度的收入数据将直接验证商业化能力</p>
</div>
<div class="glass-effect rounded-lg p-6 border-l-4 border-blue-500">
<h3 class="text-xl font-bold mb-2">🏭 产能释放进展</h3>
<p class="text-gray-300">100万支工厂产能利用率和1200万支新基地建设进度</p>
</div>
<div class="glass-effect rounded-lg p-6 border-l-4 border-purple-500">
<h3 class="text-xl font-bold mb-2">💊 新适应症拓展</h3>
<p class="text-gray-300">严重烧伤、重症脓毒血症等适应症的临床进展</p>
</div>
</div>
</div>
<div>
<h2 class="text-3xl font-bold mb-8 gradient-text">潜在风险</h2>
<div class="space-y-4">
<div class="glass-effect rounded-lg p-6 border-l-4 border-red-500">
<h3 class="text-xl font-bold mb-2">⚠️ 商业化挑战</h3>
<p class="text-gray-300">医生和患者对植物源产品的接受度需要时间培养</p>
</div>
<div class="glass-effect rounded-lg p-6 border-l-4 border-orange-500">
<h3 class="text-xl font-bold mb-2">📉 盈利周期漫长</h3>
<p class="text-gray-300">预计2027年才能实现盈利短期财务压力较大</p>
</div>
<div class="glass-effect rounded-lg p-6 border-l-4 border-yellow-500">
<h3 class="text-xl font-bold mb-2">🏛️ 政策风险</h3>
<p class="text-gray-300">医保控费、集采等政策可能影响定价和利润空间</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Investment Insights Section -->
<section class="py-20 px-4">
<div class="container mx-auto">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">投资启示</h2>
<div class="bg-gradient-to-r from-purple-900 to-blue-900 rounded-2xl p-8 md:p-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="ri-rocket-2-line text-3xl text-white"></i>
</div>
<h3 class="text-xl font-bold mb-2">高风险高收益</h3>
<p class="text-sm text-gray-300">禾元生物本身,商业化成功将获得最大估值重塑</p>
</div>
<div class="text-center">
<div class="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="ri-shield-check-line text-3xl text-white"></i>
</div>
<h3 class="text-xl font-bold mb-2">稳健优选</h3>
<p class="text-sm text-gray-300">贝达药业,兼具投资收益和业务协同双重逻辑</p>
</div>
<div class="text-center">
<div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="ri-pulse-line text-3xl text-white"></i>
</div>
<h3 class="text-xl font-bold mb-2">事件驱动</h3>
<p class="text-sm text-gray-300">博济医药等上游公司,短期交易性机会</p>
</div>
</div>
<div class="mt-12 text-center">
<div class="inline-flex items-center space-x-4 glass-effect rounded-full px-8 py-4">
<i class="ri-lightbulb-line text-2xl text-yellow-400"></i>
<span class="text-lg font-semibold">关键跟踪指标:奥福民®季度销售额、毛利率变化、新适应症进展</span>
</div>
</div>
</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-400">© 2025 禾元生物合作概念分析 | 投资有风险,决策需谨慎</p>
</div>
</footer>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Intersection Observer for animations
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(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'all 0.6s ease-out';
observer.observe(card);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,767 @@
<!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>
<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', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.table-scroll-custom::-webkit-scrollbar {
height: 8px;
}
.table-scroll-custom::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.table-scroll-custom::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.table-scroll-custom::-webkit-scrollbar-thumb:hover {
background: #555;
}
.stat-card {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
.chart-bar {
animation: growWidth 1s ease-out;
}
@keyframes growWidth {
from { width: 0; }
}
.floating {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<header class="gradient-bg text-white relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-20"></div>
<div class="container mx-auto px-4 py-16 relative z-10">
<div class="flex flex-col lg:flex-row items-center justify-between">
<div class="lg:w-2/3 mb-8 lg:mb-0">
<div class="flex items-center mb-4">
<i class="fas fa-plane text-4xl mr-4"></i>
<h1 class="text-4xl lg:text-5xl font-bold">空客合作</h1>
</div>
<h2 class="text-xl lg:text-2xl font-light mb-6">航空产业链系统性重构机遇</h2>
<p class="text-lg opacity-90 leading-relaxed">
源于中国国家战略背书与空客全球化布局驱动的长期价值投资主题。
从单一订单逻辑向产业链系统重构演进,创造确定性增长机会。
</p>
<div class="flex flex-wrap gap-4 mt-8">
<span class="bg-white/20 px-4 py-2 rounded-full text-sm">
<i class="fas fa-chart-line mr-2"></i>2025年目标交付820架
</span>
<span class="bg-white/20 px-4 py-2 rounded-full text-sm">
<i class="fas fa-industry mr-2"></i>天津第二条总装线投产
</span>
<span class="bg-white/20 px-4 py-2 rounded-full text-sm">
<i class="fas fa-globe mr-2"></i>供应链本土化战略
</span>
</div>
</div>
<div class="lg:w-1/3 flex justify-center">
<div class="floating">
<div class="stat-card rounded-2xl p-6 text-center">
<div class="text-4xl font-bold mb-2">A+</div>
<div class="text-sm opacity-80">惠誉评级</div>
<div class="mt-4 text-lg">前景稳定</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0">
<svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#F9FAFB"/>
</svg>
</div>
</header>
<!-- Key Statistics -->
<section class="container mx-auto px-4 -mt-10 relative z-20">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">2025交付目标</p>
<p class="text-3xl font-bold text-gray-800">820架</p>
<p class="text-sm text-green-600 mt-1">
<i class="fas fa-arrow-up"></i> +7% vs 2024
</p>
</div>
<div class="text-4xl text-purple-600 opacity-20">
<i class="fas fa-plane-departure"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">天津产能占比</p>
<p class="text-3xl font-bold text-gray-800">20%</p>
<p class="text-sm text-blue-600 mt-1">全球A320产能</p>
</div>
<div class="text-4xl text-blue-600 opacity-20">
<i class="fas fa-industry"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">积压订单</p>
<p class="text-3xl font-bold text-gray-800">8,800架</p>
<p class="text-sm text-orange-600 mt-1">历史新高</p>
</div>
<div class="text-4xl text-orange-600 opacity-20">
<i class="fas fa-clipboard-list"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">中国市场</p>
<p class="text-3xl font-bold text-gray-800">第二</p>
<p class="text-sm text-purple-600 mt-1">全球最大增长潜力</p>
</div>
<div class="text-4xl text-purple-600 opacity-20">
<i class="fas fa-globe-asia"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="container mx-auto px-4 py-12">
<div class="bg-white rounded-2xl shadow-xl p-8">
<h3 class="text-2xl font-bold text-gray-800 mb-6">
<i class="fas fa-clock text-purple-600 mr-3"></i>关键催化事件
</h3>
<div class="relative">
<div class="absolute left-8 top-0 bottom-0 w-1 timeline-line"></div>
<div class="space-y-8">
<div class="flex items-start">
<div class="bg-purple-600 rounded-full p-2 pulse-dot">
<i class="fas fa-flag text-white text-xs"></i>
</div>
<div class="ml-6 flex-1">
<div class="bg-purple-50 rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-semibold text-purple-800">2025年10月</h4>
<p class="text-sm text-gray-600 mt-1">商务部、民航局长密集会见空客CEO</p>
</div>
<span class="bg-purple-200 text-purple-800 text-xs px-2 py-1 rounded">最新</span>
</div>
<p class="text-sm text-gray-700 mt-2">强调以天津第二条A320总装线投产为契机加强合作</p>
</div>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-600 rounded-full p-2">
<i class="fas fa-tools text-white text-xs"></i>
</div>
<div class="ml-6 flex-1">
<div class="bg-blue-50 rounded-lg p-4">
<h4 class="font-semibold text-blue-800">2025年9月</h4>
<p class="text-sm text-gray-600 mt-1">厦门航空接收首架空客A320neo</p>
<p class="text-sm text-gray-700 mt-2">传统波音系航司机队多元化标志</p>
</div>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-600 rounded-full p-2">
<i class="fas fa-handshake text-white text-xs"></i>
</div>
<div class="ml-6 flex-1">
<div class="bg-green-50 rounded-lg p-4">
<h4 class="font-semibold text-green-800">2025年3月</h4>
<p class="text-sm text-gray-600 mt-1">中航工业与空客深化供应链协同</p>
<p class="text-sm text-gray-700 mt-2">合作延伸至商用飞机、直升机领域</p>
</div>
</div>
</div>
<div class="flex items-start">
<div class="bg-orange-600 rounded-full p-2">
<i class="fas fa-factory text-white text-xs"></i>
</div>
<div class="ml-6 flex-1">
<div class="bg-orange-50 rounded-lg p-4">
<h4 class="font-semibold text-orange-800">2024年9月</h4>
<p class="text-sm text-gray-600 mt-1">空客A320天津第二条总装线开工</p>
<p class="text-sm text-gray-700 mt-2">供应链本土化里程碑事件</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Logic Analysis -->
<section class="container mx-auto px-4 py-12">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 bg-white rounded-2xl shadow-xl p-8">
<h3 class="text-2xl font-bold text-gray-800 mb-6">
<i class="fas fa-brain text-purple-600 mr-3"></i>核心投资逻辑
</h3>
<div class="space-y-6">
<div class="border-l-4 border-purple-600 pl-4">
<h4 class="font-semibold text-gray-800 mb-2">战略协同驱动</h4>
<p class="text-gray-600 text-sm leading-relaxed">
中国将航空合作视为中欧经贸"压舱石",政策支持力度空前。空客视中国为规避地缘政治风险、利用成熟工业基础的关键基地。
</p>
</div>
<div class="border-l-4 border-blue-600 pl-4">
<h4 class="font-semibold text-gray-800 mb-2">产能扩张驱动</h4>
<p class="text-gray-600 text-sm leading-relaxed">
天津第二条总装线贡献全球20%产能月产12架目标。本地化总装必然要求供应链本地化配套创造历史性机遇。
</p>
</div>
<div class="border-l-4 border-green-600 pl-4">
<h4 class="font-semibold text-gray-800 mb-2">技术外溢效应</h4>
<p class="text-gray-600 text-sm leading-relaxed">
参与全球分工积累工艺、质量体系经验直接反哺C919产业成熟。军用航空技术外溢为民用合作提供基础。
</p>
</div>
</div>
<div class="mt-8 p-4 bg-yellow-50 rounded-lg border border-yellow-200">
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-yellow-600 mt-1 mr-3"></i>
<div>
<h5 class="font-semibold text-yellow-800">关键预期差</h5>
<p class="text-sm text-yellow-700 mt-1">
市场低估了"价值量提升"逻辑正从低价值零件向高价值大部件、系统级装配跃升MRO等售后市场机会被忽视。
</p>
</div>
</div>
</div>
</div>
<div class="space-y-6">
<div class="bg-gradient-to-br from-purple-600 to-purple-800 rounded-2xl shadow-xl p-6 text-white">
<h4 class="text-xl font-bold mb-4">市场热度</h4>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-purple-200">政策支持</span>
<div class="flex space-x-1">
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-purple-200">订单增长</span>
<div class="flex space-x-1">
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full opacity-30"></div>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-purple-200">产能落地</span>
<div class="flex space-x-1">
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full opacity-30"></div>
<div class="w-2 h-2 bg-white rounded-full opacity-30"></div>
</div>
</div>
</div>
<div class="mt-6 pt-6 border-t border-purple-500">
<p class="text-sm text-purple-200">市场情绪:高度乐观且具有共识</p>
</div>
</div>
<div class="bg-white rounded-2xl shadow-xl p-6">
<h4 class="text-xl font-bold text-gray-800 mb-4">三步走战略</h4>
<div class="space-y-3">
<div class="flex items-center">
<div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center font-bold text-sm mr-3">1</div>
<div>
<p class="font-semibold text-gray-700">制造深化</p>
<p class="text-xs text-gray-500">向核心子系统渗透</p>
</div>
</div>
<div class="flex items-center">
<div class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold text-sm mr-3">2</div>
<div>
<p class="font-semibold text-gray-700">服务拓展</p>
<p class="text-xs text-gray-500">MRO、客改货等高利润服务</p>
</div>
</div>
<div class="flex items-center">
<div class="bg-green-100 text-green-600 rounded-full w-8 h-8 flex items-center justify-center font-bold text-sm mr-3">3</div>
<div>
<p class="font-semibold text-gray-700">协同创新</p>
<p class="text-xs text-gray-500">下一代技术联合研发</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section class="container mx-auto px-4 py-12">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="bg-gradient-to-r from-purple-600 to-purple-800 text-white p-6">
<h3 class="text-2xl font-bold">
<i class="fas fa-chart-bar mr-3"></i>核心标的与产业链布局
</h3>
<p class="text-purple-200 mt-2">基于深度调研的12家核心企业全景图</p>
</div>
<div class="overflow-x-auto table-scroll-custom">
<table class="w-full">
<thead class="bg-gray-50 border-b border-gray-200">
<tr>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股票</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产业链</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">核心优势</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">合作项目</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">投资逻辑</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-purple-100 rounded-lg p-2 mr-3">
<i class="fas fa-plane text-purple-600"></i>
</div>
<div>
<div class="text-sm font-semibold text-gray-900">中航西飞</div>
<div class="text-xs text-gray-500">000768.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">核心结构件</span>
</td>
<td class="px-6 py-4 text-sm text-gray-700">A320机翼全球唯一海外供应商</td>
<td class="px-6 py-4 text-sm text-gray-600">A320系列机翼<br>A330设备门<br>机身系统装配</td>
<td class="px-6 py-4 text-sm text-gray-600">壁垒最高,最确定受益</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-blue-100 rounded-lg p-2 mr-3">
<i class="fas fa-industry text-blue-600"></i>
</div>
<div>
<div class="text-sm font-semibold text-gray-900">天保基建</div>
<div class="text-xs text-gray-500">000965.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">总装</span>
</td>
<td class="px-6 py-4 text-sm text-gray-700">持有空客天津总装公司49%股权</td>
<td class="px-6 py-4 text-sm text-gray-600">A320系列飞机总装<br>A350型完成中心</td>
<td class="px-6 py-4 text-sm text-gray-600">直接受益总装产能扩张</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-green-100 rounded-lg p-2 mr-3">
<i class="fas fa-cube text-green-600"></i>
</div>
<div>
<div class="text-sm font-semibold text-gray-900">南山铝业</div>
<div class="text-xs text-gray-500">600219.SH</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">原材料</span>
</td>
<td class="px-6 py-4 text-sm text-gray-700">国内唯一同时供货三大主机厂</td>
<td class="px-6 py-4 text-sm text-gray-600">航空板产品供应<br>波音/空客/商飞</td>
<td class="px-6 py-4 text-sm text-gray-600">上游"卖水人",盈利稳定</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-orange-100 rounded-lg p-2 mr-3">
<i class="fas fa-cogs text-orange-600"></i>
</div>
<div>
<div class="text-sm font-semibold text-gray-900">*ST炼石</div>
<div class="text-xs text-gray-500">000697.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium bg-orange-100 text-orange-800 rounded-full">零部件</span>
</td>
<td class="px-6 py-4 text-sm text-gray-700">拥有80余项空客认证</td>
<td class="px-6 py-4 text-sm text-gray-600">精密零部件制造<br>加德纳成都工厂</td>
<td class="px-6 py-4 text-sm text-gray-600">高赔率,高风险博弈标的</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-pink-100 rounded-lg p-2 mr-3">
<i class="fas fa-tools text-pink-600"></i>
</div>
<div>
<div class="text-sm font-semibold text-gray-900">海特高新</div>
<div class="text-xs text-gray-500">002023.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium bg-pink-100 text-pink-800 rounded-full">MRO服务</span>
</td>
<td class="px-6 py-4 text-sm text-gray-700">A321客改货项目先发优势</td>
<td class="px-6 py-4 text-sm text-gray-600">空客A321客改货<br>天津保税区合作</td>
<td class="px-6 py-4 text-sm text-gray-600">存量市场,现金流稳定</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-indigo-100 rounded-lg p-2 mr-3">
<i class="fas fa-microchip text-indigo-600"></i>
</div>
<div>
<div class="text-sm font-semibold text-gray-900">爱乐达</div>
<div class="text-xs text-gray-500">300696.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium bg-indigo-100 text-indigo-800 rounded-full">精密加工</span>
</td>
<td class="px-6 py-4 text-sm text-gray-700">20年持续承接空客波音订单</td>
<td class="px-6 py-4 text-sm text-gray-600">A320/A350<br>国际转包业务</td>
<td class="px-6 py-4 text-sm text-gray-600">经验丰富,工艺稳定</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-teal-100 rounded-lg p-2 mr-3">
<i class="fas fa-box text-teal-600"></i>
</div>
<div>
<div class="text-sm font-semibold text-gray-900">同益中</div>
<div class="text-xs text-gray-500">688722.SH</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full">新材料</span>
</td>
<td class="px-6 py-4 text-sm text-gray-700">芳纶纸关键材料供应商</td>
<td class="px-6 py-4 text-sm text-gray-600">X-612N型芳纶纸<br>供应A320/A350</td>
<td class="px-6 py-4 text-sm text-gray-600">材料卡位,技术壁垒高</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-cyan-100 rounded-lg p-2 mr-3">
<i class="fas fa-wrench text-cyan-600"></i>
</div>
<div>
<div class="text-sm font-semibold text-gray-900">航新科技</div>
<div class="text-xs text-gray-500">300424.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium bg-cyan-100 text-cyan-800 rounded-full">维修服务</span>
</td>
<td class="px-6 py-4 text-sm text-gray-700">覆盖空客大量机型维修资质</td>
<td class="px-6 py-4 text-sm text-gray-600">部附件维修<br>A320neo等机型</td>
<td class="px-6 py-4 text-sm text-gray-600">售后市场持续受益</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Risk & Opportunity -->
<section class="container mx-auto px-4 py-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white rounded-2xl shadow-xl p-8">
<h3 class="text-2xl font-bold text-gray-800 mb-6">
<i class="fas fa-shield-alt text-green-600 mr-3"></i>投资机遇
</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-green-100 rounded-full p-2 mr-4 mt-1">
<i class="fas fa-arrow-up text-green-600 text-sm"></i>
</div>
<div>
<h4 class="font-semibold text-gray-800">高壁垒核心结构件</h4>
<p class="text-sm text-gray-600 mt-1">中航西飞等企业凭借不可替代地位,最直接受益</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 rounded-full p-2 mr-4 mt-1">
<i class="fas fa-atom text-blue-600 text-sm"></i>
</div>
<div>
<h4 class="font-semibold text-gray-800">新材料国产替代</h4>
<p class="text-sm text-gray-600 mt-1">南山铝业、同益中等"卖水人"盈利能力强</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 rounded-full p-2 mr-4 mt-1">
<i class="fas fa-handshake text-purple-600 text-sm"></i>
</div>
<div>
<h4 class="font-semibold text-gray-800">高附加值MRO服务</h4>
<p class="text-sm text-gray-600 mt-1">海特高新布局客改货,现金流稳定</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-2xl shadow-xl p-8">
<h3 class="text-2xl font-bold text-gray-800 mb-6">
<i class="fas fa-exclamation-triangle text-red-600 mr-3"></i>潜在风险
</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-red-100 rounded-full p-2 mr-4 mt-1">
<i class="fas fa-bolt text-red-600 text-sm"></i>
</div>
<div>
<h4 class="font-semibold text-gray-800">供应链瓶颈</h4>
<p class="text-sm text-gray-600 mt-1">发动机供应短缺可能影响交付节奏</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-orange-100 rounded-full p-2 mr-4 mt-1">
<i class="fas fa-microscope text-orange-600 text-sm"></i>
</div>
<div>
<h4 class="font-semibold text-gray-800">技术代差</h4>
<p class="text-sm text-gray-600 mt-1">发动机、航电等核心领域仍有差距</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-yellow-100 rounded-full p-2 mr-4 mt-1">
<i class="fas fa-globe-europe text-yellow-600 text-sm"></i>
</div>
<div>
<h4 class="font-semibold text-gray-800">地缘政治</h4>
<p class="text-sm text-gray-600 mt-1">中欧贸易关系存在不确定性</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Key Metrics Tracking -->
<section class="container mx-auto px-4 py-12">
<div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl shadow-xl p-8 text-white">
<h3 class="text-2xl font-bold mb-6">
<i class="fas fa-chart-line mr-3"></i>关键跟踪指标
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
<h4 class="font-semibold mb-3">宏观层面</h4>
<ul class="space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
空客月度/季度交付数量
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
全球新签订单数
</li>
</ul>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
<h4 class="font-semibold mb-3">中观层面</h4>
<ul class="space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
国际转包业务收入及毛利率
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
新项目认证进展
</li>
</ul>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
<h4 class="font-semibold mb-3">微观层面</h4>
<ul class="space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
天津总装线产能爬坡
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
航空发动机供应动态
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8 mt-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h4 class="text-lg font-semibold">空客合作 - 投资研究报告</h4>
<p class="text-gray-400 text-sm mt-1">基于深度数据挖掘与产业链调研</p>
</div>
<div class="flex space-x-6">
<span class="text-sm text-gray-400">
<i class="fas fa-calendar-alt mr-2"></i>
2025年11月
</span>
<span class="text-sm text-gray-400">
<i class="fas fa-chart-bar mr-2"></i>
概念代码: 251022
</span>
</div>
</div>
<div class="border-t border-gray-800 mt-6 pt-6 text-center text-sm text-gray-400">
<p>投资有风险,入市需谨慎。本报告仅供参考,不构成投资建议。</p>
</div>
</div>
</footer>
<script>
// 添加滚动动画效果
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(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 = 'all 0.6s ease-out';
observer.observe(el);
});
// 添加数字增长动画
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
obj.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString() + obj.dataset.suffix;
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
// 页面加载完成后启动动画
window.addEventListener('load', () => {
const statElements = document.querySelectorAll('[data-animate]');
statElements.forEach(el => {
const end = parseInt(el.dataset.end);
animateValue(el, 0, end, 2000);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,568 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第十五届全运会投资机会深度分析</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body { font-family: 'Noto Sans SC', sans-serif; }
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.stock-table {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
.stock-table {
font-size: 0.75rem;
}
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.insight-card {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<section class="gradient-bg text-white py-20 px-4">
<div class="container mx-auto max-w-7xl">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="md:w-1/2 mb-8 md:mb-0">
<div class="flex items-center mb-4">
<span class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-sm font-bold">投资机会</span>
<span class="ml-3 pulse-dot w-3 h-3 bg-green-400 rounded-full"></span>
</div>
<h1 class="text-4xl md:text-5xl font-bold mb-6">第十五届全运会</h1>
<p class="text-xl mb-6 text-purple-100">粤港澳大湾区联合承办的国家级体育盛事</p>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="bg-white/20 backdrop-blur-sm rounded-lg p-4">
<div class="text-3xl font-bold">1500亿+</div>
<div class="text-sm">预计经济增量</div>
</div>
<div class="bg-white/20 backdrop-blur-sm rounded-lg p-4">
<div class="text-3xl font-bold">2万+</div>
<div class="text-sm">参赛运动员</div>
</div>
</div>
<button class="bg-white text-purple-700 px-8 py-3 rounded-full font-bold hover:bg-purple-50 transition-all transform hover:scale-105">
<i class="fas fa-chart-line mr-2"></i>查看深度分析
</button>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative">
<div class="absolute inset-0 bg-white/20 backdrop-blur-sm rounded-full transform rotate-6"></div>
<div class="bg-white/30 backdrop-blur-sm rounded-full p-8 relative">
<i class="fas fa-trophy text-8xl text-yellow-300"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心观点摘要 -->
<section class="py-16 px-4">
<div class="container mx-auto max-w-7xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">核心观点摘要</h2>
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"></div>
</div>
<div class="insight-card rounded-2xl p-8 shadow-xl">
<p class="text-lg leading-relaxed text-gray-800">
第十五届全运会是由粤港澳大湾区联合承办的国家级体育盛事,其核心投资逻辑在于<span class="font-bold text-purple-700">"赛事经济"对区域基建、消费和产业的强力拉动</span>。当前概念正处于由事件预期驱动的预热阶段,投资机会已从场馆建设等"硬"投资,延伸至赛事运营、文旅消费等"软"服务,但需警惕部分标的的短期情绪化炒作与基本面兑现的节奏差异。
</p>
</div>
</div>
</section>
<!-- 关键时间轴 -->
<section class="py-16 px-4 bg-white">
<div class="container mx-auto max-w-7xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">重要时间轴</h2>
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"></div>
</div>
<div class="relative">
<div class="timeline-line absolute left-1/2 transform -translate-x-1/2 w-1 h-full"></div>
<div class="space-y-12">
<div class="flex items-center justify-center">
<div class="flex flex-col md:flex-row items-center w-full max-w-4xl">
<div class="md:w-1/2 md:pr-8 text-right">
<div class="bg-purple-100 rounded-lg p-4 card-hover">
<h3 class="font-bold text-purple-700">2025年2月</h3>
<p class="text-sm text-gray-600">安踏签约成为官方合作伙伴</p>
</div>
</div>
<div class="w-4 h-4 bg-purple-600 rounded-full z-10"></div>
<div class="md:w-1/2 md:pl-8"></div>
</div>
</div>
<div class="flex items-center justify-center">
<div class="flex flex-col md:flex-row items-center w-full max-w-4xl">
<div class="md:w-1/2 md:pr-8"></div>
<div class="w-4 h-4 bg-purple-600 rounded-full z-10"></div>
<div class="md:w-1/2 md:pl-8">
<div class="bg-pink-100 rounded-lg p-4 card-hover">
<h3 class="font-bold text-pink-700">2025年7月25日</h3>
<p class="text-sm text-gray-600">国新办新闻发布会,公布赛期</p>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-center">
<div class="flex flex-col md:flex-row items-center w-full max-w-4xl">
<div class="md:w-1/2 md:pr-8 text-right">
<div class="bg-purple-100 rounded-lg p-4 card-hover">
<h3 class="font-bold text-purple-700">2025年10-11月</h3>
<p class="text-sm text-gray-600">市场宣传和消费活动高峰期</p>
</div>
</div>
<div class="w-4 h-4 bg-purple-600 rounded-full z-10"></div>
<div class="md:w-1/2 md:pl-8"></div>
</div>
</div>
<div class="flex items-center justify-center">
<div class="flex flex-col md:flex-row items-center w-full max-w-4xl">
<div class="md:w-1/2 md:pr-8"></div>
<div class="w-4 h-4 bg-purple-600 rounded-full z-10"></div>
<div class="md:w-1/2 md:pl-8">
<div class="bg-pink-100 rounded-lg p-4 card-hover">
<h3 class="font-bold text-pink-700">2025年11月9-21日</h3>
<p class="text-sm text-gray-600">赛事正式举行</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链分析 -->
<section class="py-16 px-4">
<div class="container mx-auto max-w-7xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">产业链分析</h2>
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-4xl mb-4 text-purple-600">
<i class="fas fa-hard-hat"></i>
</div>
<h3 class="text-xl font-bold mb-3">上游:基建与设备</h3>
<p class="text-gray-600 mb-4">场馆建设、改造、智能化、器材等"硬"支持</p>
<div class="space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>广电运通(智能化)</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>广田集团(维修)</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>舒华体育(器材)</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-4xl mb-4 text-pink-600">
<i class="fas fa-running"></i>
</div>
<h3 class="text-xl font-bold mb-3">中游:赛事运营</h3>
<p class="text-gray-600 mb-4">赛事组织、市场开发、内容制作、创意呈现</p>
<div class="space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>中体产业(综合开发)</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>珠江股份(赛区组织)</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>锋尚文化(创意服务)</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-4xl mb-4 text-indigo-600">
<i class="fas fa-shopping-cart"></i>
</div>
<h3 class="text-xl font-bold mb-3">下游:消费与衍生</h3>
<p class="text-gray-600 mb-4">承接赛事流量,实现商业变现</p>
<div class="space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>岭南控股(文旅)</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>广汽集团(用车服务)</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>广州酒家(餐饮)</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心公司分析 -->
<section class="py-16 px-4 bg-white">
<div class="container mx-auto max-w-7xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">核心公司深度剖析</h2>
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 border border-purple-200">
<div class="flex items-center mb-4">
<span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold">国家队</span>
<span class="ml-2 text-gray-500">中体产业 (600158.SH)</span>
</div>
<h3 class="text-xl font-bold mb-3">"国家队"身份,逻辑最宽泛</h3>
<p class="text-gray-700 mb-4">作为"十五运"广东赛区市场开发合作企业,业务涵盖票务、代理、特许销售及部分赛事运营。优势是资质齐全、资源深厚,是概念的核心"压舱石"。</p>
<div class="flex items-center justify-between">
<span class="text-sm text-purple-600 font-bold">风险:业务庞杂,业绩提振效应可能被稀释</span>
<i class="fas fa-chart-line text-2xl text-purple-600"></i>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-blue-50 rounded-xl p-6 border border-green-200">
<div class="flex items-center mb-4">
<span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm font-bold">转型者</span>
<span class="ml-2 text-gray-500">珠江股份 (600684.SH)</span>
</div>
<h3 class="text-xl font-bold mb-3">"转型者",逻辑最具成长性</h3>
<p class="text-gray-700 mb-4">剥离地产后聚焦轻资产文体运营,中标台山赛区服务。逻辑并非一次性赛事收入,而是通过承接顶级赛事,证明场馆运营能力。</p>
<div class="flex items-center justify-between">
<span class="text-sm text-green-600 font-bold">风险:市场是否认可其转型成功</span>
<i class="fas fa-rocket text-2xl text-green-600"></i>
</div>
</div>
<div class="bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl p-6 border border-yellow-200">
<div class="flex items-center mb-4">
<span class="bg-yellow-600 text-white px-3 py-1 rounded-full text-sm font-bold">弹性标的</span>
<span class="ml-2 text-gray-500">锋尚文化 (300860.SZ)</span>
</div>
<h3 class="text-xl font-bold mb-3">"弹性标的",逻辑最纯粹也最脆弱</h3>
<p class="text-gray-700 mb-4">以大型文化创意活动为核心路演强调对全运会项目的志在必得并给出了1-2亿的体量预期。若成功中标对营收和利润的拉动将极为显著。</p>
<div class="flex items-center justify-between">
<span class="text-sm text-yellow-600 font-bold">风险:项目制公司收入不稳定,竞标失败则逻辑受损</span>
<i class="fas fa-fire text-2xl text-yellow-600"></i>
</div>
</div>
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-200">
<div class="flex items-center mb-4">
<span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-bold">实力派</span>
<span class="ml-2 text-gray-500">广电运通 (002152.SZ)</span>
</div>
<h3 class="text-xl font-bold mb-3">"实力派",逻辑最稳健</h3>
<p class="text-gray-700 mb-4">作为智能科技龙头中标1.25亿元的场馆智能化项目,订单已落地,业绩确定性高。更像是一个"事件驱动下的基本面标的"。</p>
<div class="flex items-center justify-between">
<span class="text-sm text-blue-600 font-bold">优势:安全边际高,基本面稳健</span>
<i class="fas fa-shield-alt text-2xl text-blue-600"></i>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="py-16 px-4">
<div class="container mx-auto max-w-7xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">相关股票一览</h2>
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"></div>
</div>
<div class="bg-white rounded-xl shadow-xl overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full stock-table">
<thead class="bg-gradient-to-r from-purple-600 to-pink-600 text-white">
<tr>
<th class="px-4 py-3 text-left">股票名称</th>
<th class="px-4 py-3 text-left">分类</th>
<th class="px-4 py-3 text-left">项目</th>
<th class="px-4 py-3 text-left">消息来源</th>
<th class="px-4 py-3 text-left">理由</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">广电运通</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">中标第十五届全运会广东奥林匹克体育中心升级改造项目等中标价1.25亿元</td>
<td class="px-4 py-3">公告</td>
<td class="px-4 py-3">中标多个全运会场馆改造项目</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">中体产业</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">为"十五运"广东赛区市场开发运营合作企业,内容包括市场开发、代理、票务等</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">负责全运会广东赛区市场开发及赛事运营</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">珠江股份</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">珠江文体成功中标十五运会台山赛区三项赛事的组织与运行服务项目</td>
<td class="px-4 py-3">官网</td>
<td class="px-4 py-3">中标全运会台山赛区赛事组织服务项目</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">锋尚文化</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">积极参与全运会创意文化服务项目预期体量1-2亿元</td>
<td class="px-4 py-3">路演</td>
<td class="px-4 py-3">大型文化创意活动服务商</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">岭南控股</td>
<td class="px-4 py-3"><span class="badge badge-secondary">周边配套</span></td>
<td class="px-4 py-3">打造多款十五运主题旅游套餐及特色文旅路线,推出"体育+"产品矩阵</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">开发全运会主题文旅产品及战略合作</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">舒华体育</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">中标广东省奥林匹克中心赛前热身区体育训练器材采购项目</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">提供全运会赛事专用体育器材</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">广田集团</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">已中标十五运会和残特奥会(龙岗赛区)场馆维修改造工程项目</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">中标全运会场馆维修改造工程</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">广汽集团</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">参与十五运及残特奥会"汽车类合作伙伴"公开征集项目</td>
<td class="px-4 py-3">公开资料</td>
<td class="px-4 py-3">成为全运会官方汽车类合作伙伴</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">粤传媒</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">下属媒体将对全运会赛事进行宣传报道,举办"十五运"相结合的活动</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">承担全运会赛事宣传及活动组织</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">广百股份</td>
<td class="px-4 py-3"><span class="badge badge-secondary">周边配套</span></td>
<td class="px-4 py-3">在各大商场打造"运动+消费"主题区域,营造社交消费空间</td>
<td class="px-4 py-3">公开资料</td>
<td class="px-4 py-3">打造全运会主题消费场景</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">广州酒家</td>
<td class="px-4 py-3"><span class="badge badge-secondary">周边配套</span></td>
<td class="px-4 py-3">推出《食在广州·迎十五运金牌菜谱》,升级十大名师名菜</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">推出全运会主题餐饮产品</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">金陵体育</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">为2025年全国女子举重锦标赛暨第十五届全国运动会举重比赛资格赛提供计时记分系统</td>
<td class="px-4 py-3">官网</td>
<td class="px-4 py-3">提供全运会举重赛事计时记分系统</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">普邦股份</td>
<td class="px-4 py-3"><span class="badge badge-info">赛事相关</span></td>
<td class="px-4 py-3">参与与赛事环境提升相关的项目建设如白云机场T3航站楼绿化景观服务</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3">参与全运会相关环境提升工程</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 风险提示 -->
<section class="py-16 px-4 bg-gradient-to-br from-red-50 to-orange-50">
<div class="container mx-auto max-w-7xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">风险提示</h2>
<div class="w-24 h-1 bg-gradient-to-r from-red-500 to-orange-500 mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-red-500">
<h3 class="text-xl font-bold mb-4 text-red-700">
<i class="fas fa-exclamation-triangle mr-2"></i>信息交叉验证风险
</h3>
<p class="text-gray-700 mb-3">
<strong class="text-red-600">这是最重要的风险点!</strong>不同来源信息存在明显矛盾:
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mr-2 mt-1"></i>
<span>路演记录称举办时间为2024年11月而官方确认为2025年11月9-21日</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mr-2 mt-1"></i>
<span>路演称在"大亚湾"举办,官方信息明确为粤港澳大湾区联合承办</span>
</li>
</ul>
<div class="mt-4 p-3 bg-red-100 rounded-lg">
<p class="text-sm text-red-700">
<strong>警示:</strong>部分路演信息存在严重事实错误,必须以权威新闻和公告为准
</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-orange-500">
<h3 class="text-xl font-bold mb-4 text-orange-700">
<i class="fas fa-chart-line mr-2"></i>商业与竞争风险
</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-coins text-orange-500 mr-2 mt-1"></i>
<div>
<strong>商业化风险:</strong>1500亿经济增量为预测值消费拉动效果取决于赛事吸引力和宏观经济环境
</div>
</li>
<li class="flex items-start">
<i class="fas fa-users text-orange-500 mr-2 mt-1"></i>
<div>
<strong>竞争风险:</strong>锋尚文化等公司在竞标1-2亿项目时面临激烈竞争并无100%把握
</div>
</li>
<li class="flex items-start">
<i class="fas fa-calendar text-orange-500 mr-2 mt-1"></i>
<div>
<strong>时间风险:</strong>招投标进度、项目执行时间可能与预期存在偏差
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="py-16 px-4">
<div class="container mx-auto max-w-7xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">投资启示</h2>
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"></div>
</div>
<div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-8 text-white">
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center">
<div class="bg-white/20 backdrop-blur-sm rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
<i class="fas fa-trophy text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">首选标的</h3>
<p class="text-purple-100">珠江股份 - 轻资产转型,成长性最强</p>
</div>
<div class="text-center">
<div class="bg-white/20 backdrop-blur-sm rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
<i class="fas fa-shield-alt text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">稳健选择</h3>
<p class="text-purple-100">广电运通 - 订单已落地,安全边际高</p>
</div>
<div class="text-center">
<div class="bg-white/20 backdrop-blur-sm rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
<i class="fas fa-fire text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">高弹性标的</h3>
<p class="text-purple-100">锋尚文化 - 关注1-2亿项目竞标结果</p>
</div>
</div>
<div class="mt-8 p-4 bg-white/10 backdrop-blur-sm rounded-lg">
<p class="text-center text-lg">
<i class="fas fa-info-circle mr-2"></i>
需重点跟踪:锋尚文化中标公告、珠江股份后续项目、岭南控股文旅产品销售数据
</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8 px-4">
<div class="container mx-auto max-w-7xl text-center">
<p class="mb-2">© 2025 第十五届全运会投资机会深度分析</p>
<p class="text-gray-400 text-sm">本报告仅供参考,投资有风险,入市需谨慎</p>
</div>
</footer>
<script>
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 添加滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver(function(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 = 'all 0.6s ease-out';
observer.observe(el);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,413 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dracula">
<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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
.gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%); }
.glass-card { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(148, 163, 184, 0.2); }
.timeline-line { position: relative; }
.timeline-line::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #3b82f6, #8b5cf6); transform: translateX(-50%); }
@media (max-width: 768px) { .timeline-line::before { left: 20px; } }
.stock-table { font-size: 0.875rem; }
.stock-table th { position: sticky; top: 0; z-index: 10; }
@media (max-width: 640px) { .stock-table { font-size: 0.75rem; } .hide-mobile { display: none; } }
</style>
</head>
<body class="bg-slate-900 text-white">
<!-- Hero Section -->
<section class="gradient-bg min-h-screen flex items-center justify-center p-4">
<div class="max-w-6xl mx-auto text-center" data-aos="fade-up">
<h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
聚酯产业深度洞察
</h1>
<p class="text-xl md:text-2xl mb-8 text-slate-200">
反内卷三重奏下的周期反转 · 亏损倒逼最强协同
</p>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<div class="glass-card rounded-xl p-6 min-w-[12rem]">
<div class="text-3xl font-bold text-green-400">-200元/吨</div>
<div class="text-sm text-slate-400">PTA价差历史低点</div>
</div>
<div class="glass-card rounded-xl p-6 min-w-[12rem]">
<div class="text-3xl font-bold text-blue-400">75%</div>
<div class="text-sm text-slate-400">CR6行业集中度</div>
</div>
<div class="glass-card rounded-xl p-6 min-w-[12rem]">
<div class="text-3xl font-bold text-purple-400">600%</div>
<div class="text-sm text-slate-400">长丝产销率峰值</div>
</div>
<div class="glass-card rounded-xl p-6 min-w-[12rem]">
<div class="text-3xl font-bold text-orange-400">3%</div>
<div class="text-sm text-slate-400">2026年产能增速</div>
</div>
</div>
<button class="btn btn-primary btn-lg rounded-full px-8" onclick="document.getElementById('analysis').scrollIntoView({behavior: 'smooth'})">
开始探索
</button>
</div>
</section>
<!-- 核心摘要 -->
<section id="analysis" class="py-20 px-4">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12" data-aos="fade-up">核心观点摘要</h2>
<div class="glass-card rounded-2xl p-8 mb-12" data-aos="fade-up" data-aos-delay="100">
<p class="text-lg leading-relaxed text-slate-300">
聚酯产业链正处于
<span class="bg-gradient-to-r from-red-500 to-orange-500 bg-clip-text text-transparent font-bold">"亏损倒逼+政策引导+龙头协同"</span>
三重驱动的周期反转关键节点。2025年9月PTA价差跌至负值的极端事件反而成为最强催化剂推动行业从分散竞争走向寡头协同。
<strong class="text-blue-400">PTA环节</strong>因集中度最高CR6达75%)、亏损最严重、新增产能归零,具备最大价格弹性;
<strong class="text-purple-400">涤纶长丝环节</strong>因库存降至历史低位、需求韧性较强,盈利修复确定性最高。
当前处于基本面驱动早期非主题炒作未来2-3年有望进入双重景气周期。
</p>
</div>
</div>
</section>
<!-- 时间轴 -->
<section class="py-20 px-4 bg-slate-800">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">产业演进时间轴</h2>
<div class="timeline-line">
<div class="flex flex-col md:flex-row items-center mb-12" data-aos="fade-right">
<div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">
<div class="glass-card rounded-xl p-6">
<h3 class="text-2xl font-bold text-orange-400 mb-2">2023年行业触底</h3>
<ul class="text-slate-300 space-y-2">
<li>• 涤纶长丝价差仅盈亏平衡1000元/吨)</li>
<li>• PTA全行业亏损加工费历史低位</li>
<li>• 龙头采取"保价不保量"开工率压至60%</li>
<li>• 下游坯布库存从30天降至20天</li>
</ul>
</div>
</div>
<div class="w-4 h-4 bg-orange-500 rounded-full border-4 border-slate-900 z-10"></div>
<div class="md:w-1/2 md:pl-8"></div>
</div>
<div class="flex flex-col md:flex-row-reverse items-center mb-12" data-aos="fade-left">
<div class="md:w-1/2 md:pl-8 mb-4 md:mb-0">
<div class="glass-card rounded-xl p-6">
<h3 class="text-2xl font-bold text-blue-400 mb-2">2024年反内卷元年</h3>
<ul class="text-slate-300 space-y-2">
<li><strong>5月</strong>长丝大厂开启减产累计达24%</li>
<li><strong>7-9月</strong>深化减产FDY减20%、POY减5%</li>
<li><strong>8月</strong>:郑商所推动聚酯品种对外开放</li>
<li><strong>CR6达75%</strong>,组织基础形成</li>
</ul>
</div>
</div>
<div class="w-4 h-4 bg-blue-500 rounded-full border-4 border-slate-900 z-10"></div>
<div class="md:w-1/2 md:pr-8"></div>
</div>
<div class="flex flex-col md:flex-row items-center mb-12" data-aos="fade-right">
<div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">
<div class="glass-card rounded-xl p-6">
<h3 class="text-2xl font-bold text-red-500 mb-2">2025年景气崩塌与最强协同</h3>
<ul class="text-slate-300 space-y-2">
<li><strong>9月</strong>PTA价差崩盘至<strong>-200元/吨</strong></li>
<li>• 长丝产销率飙升至<strong>600%</strong>库存降至10天</li>
<li><strong>9月24日</strong>三大长丝厂再减产8-10%</li>
<li><strong>11月</strong>PTA龙头全面减产涉及产能10%</li>
</ul>
</div>
</div>
<div class="w-4 h-4 bg-red-500 rounded-full border-4 border-slate-900 z-10 animate-pulse"></div>
<div class="md:w-1/2 md:pl-8"></div>
</div>
<div class="flex flex-col md:flex-row-reverse items-center" data-aos="fade-left">
<div class="md:w-1/2 md:pl-8">
<div class="glass-card rounded-xl p-6">
<h3 class="text-2xl font-bold text-green-400 mb-2">2026年供给拐点</h3>
<ul class="text-slate-300 space-y-2">
<li>• PTA新增产能周期结束</li>
<li>• 长丝新增产能增速仅<strong>3%</strong></li>
<li>• 老旧产能20年以上陆续退出</li>
<li>• 行业进入存量优化阶段</li>
</ul>
</div>
</div>
<div class="w-4 h-4 bg-green-500 rounded-full border-4 border-slate-900 z-10"></div>
<div class="md:w-1/2 md:pr-8"></div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑 -->
<section class="py-20 px-4">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">核心逻辑与市场认知</h2>
<div class="grid md:grid-cols-3 gap-6 mb-12">
<div class="glass-card rounded-xl p-6" data-aos="fade-up">
<h3 class="text-xl font-bold text-cyan-400 mb-4">行政逻辑</h3>
<p class="text-slate-300">反内卷政策从口号变为行业自觉行动。化工行业作为制造业代表,聚酯成为政策突破口。龙头企业在协会协调下,将"限产保价"从长丝延伸至PTA是2016年煤炭供给侧改革以来最彻底的协同行动。</p>
</div>
<div class="glass-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
<h3 class="text-xl font-bold text-purple-400 mb-4">市场逻辑</h3>
<p class="text-slate-300">2026年PTA新增产能几乎为零但1,100万吨产能长期停车有效供给比名义数据低15-20%。下游功能面料需求强劲锦纶消费增速30%),结构性牛市特征明显。</p>
</div>
<div class="glass-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
<h3 class="text-xl font-bold text-orange-400 mb-4">财务逻辑</h3>
<p class="text-slate-300">9月PTA加工费跌至108元/吨远低于现金成本300元/吨)。龙头企业虽有一体化优势,但亏损仍拖累业绩。"不减产就亏损"的生存压力下,协同成为理性最优解。</p>
</div>
</div>
<!-- 预期差分析 -->
<div class="glass-card rounded-2xl p-8" data-aos="fade-up">
<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-4xl mb-2">📊</div>
<h4 class="font-bold text-lg mb-2">产能数据的"水分"</h4>
<p class="text-sm text-slate-400">公开8,855万吨含僵尸产能实际有效仅7,900万吨。开工率89%而非78%,供给紧张被严重低估。</p>
</div>
<div class="text-center">
<div class="text-4xl mb-2">🎯</div>
<h4 class="font-bold text-lg mb-2">军备竞赛反转</h4>
<p class="text-sm text-slate-400">从"扩产抢份额"转向"利润优先"。新凤鸣推迟300万吨、同坤退出150万吨老线退出产能将永久退出。</p>
</div>
<div class="text-center">
<div class="text-4xl mb-2">📈</div>
<h4 class="font-bold text-lg mb-2">结构性牛市</h4>
<p class="text-sm text-slate-400">市场担忧总量疲软但功能面料需求强劲户外、耐磨。长丝库存10天 vs PTA库存高企印证需求在高端细分。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="py-20 px-4 bg-slate-800">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">产业链产能数据全景</h2>
<div class="glass-card rounded-2xl p-4 md:p-8 overflow-x-auto">
<table class="table table-zebra stock-table w-full">
<thead class="bg-gradient-to-r from-blue-900 to-purple-900">
<tr class="text-white">
<th class="p-3">公司名称</th>
<th class="p-3 hide-mobile">分类</th>
<th class="p-3">项目</th>
<th class="p-3">产能</th>
<th class="p-3 hide-mobile">信源</th>
<th class="p-3 hide-mobile">核心优势</th>
</tr>
</thead>
<tbody>
<tr><td class="font-bold">荣盛石化</td><td class="hide-mobile">上游</td><td>对二甲苯(PX)</td><td>1040万吨/年</td><td class="hide-mobile">工商/互动</td><td class="hide-mobile">浙石化51%,全球最大</td></tr>
<tr><td class="font-bold">恒力石化</td><td class="hide-mobile">上游</td><td>对二甲苯(PX)</td><td>520万吨/年</td><td class="hide-mobile">公告</td><td class="hide-mobile">现有产能</td></tr>
<tr><td class="font-bold">恒力石化</td><td class="hide-mobile">中游</td><td>精对苯二甲酸(PTA)</td><td>1660万吨/年</td><td class="hide-mobile">年报</td><td class="hide-mobile">全球最大占比18%</td></tr>
<tr><td class="font-bold">恒逸石化</td><td class="hide-mobile">中游</td><td>精对苯二甲酸(PTA)</td><td>1049万吨/年</td><td class="hide-mobile">公告</td><td class="hide-mobile">权益产能</td></tr>
<tr><td class="font-bold">荣盛石化</td><td class="hide-mobile">中游</td><td>精对苯二甲酸(PTA)</td><td>1040万吨/年</td><td class="hide-mobile">互动</td><td class="hide-mobile">现有产能</td></tr>
<tr><td class="font-bold">桐昆股份</td><td class="hide-mobile">中游</td><td>精对苯二甲酸(PTA)</td><td>1020万吨/年</td><td class="hide-mobile">半年报</td><td class="hide-mobile">长丝龙头配套</td></tr>
<tr><td class="font-bold">新凤鸣</td><td class="hide-mobile">中游</td><td>精对苯二甲酸(PTA)</td><td>800万吨/年</td><td class="hide-mobile">公告</td><td class="hide-mobile">一体化100%</td></tr>
<tr><td class="font-bold">桐昆股份</td><td class="hide-mobile">下游</td><td>涤纶长丝</td><td>1350万吨/年</td><td class="hide-mobile">半年报</td><td class="hide-mobile">长丝绝对龙头</td></tr>
<tr><td class="font-bold">新凤鸣</td><td class="hide-mobile">下游</td><td>涤纶长丝</td><td>805万吨/年</td><td class="hide-mobile">公告</td><td class="hide-mobile">市占率超12%</td></tr>
<tr><td class="font-bold">恒逸石化</td><td class="hide-mobile">下游</td><td>涤纶长丝</td><td>677万吨/年</td><td class="hide-mobile">公告</td><td class="hide-mobile">多元化布局</td></tr>
<tr><td class="font-bold">荣盛石化</td><td class="hide-mobile">下游</td><td>聚酯瓶片</td><td>530万吨/年</td><td class="hide-mobile">年报</td><td class="hide-mobile">瓶片龙头</td></tr>
<tr><td class="font-bold">万凯新材</td><td class="hide-mobile">下游</td><td>聚酯瓶片</td><td>300万吨/年</td><td class="hide-mobile">半年报</td><td class="hide-mobile">率先扭亏</td></tr>
<tr><td class="font-bold">三房巷</td><td class="hide-mobile">下游</td><td>聚酯瓶片</td><td>240万吨/年</td><td class="hide-mobile">公告</td><td class="hide-mobile">市占率19.34%</td></tr>
</tbody>
</table>
<div class="mt-4 text-sm text-slate-400 text-center">
💡 <strong>核心洞察</strong>恒力石化PTA产能1660万吨行业18%话语权最重桐昆股份1350万吨长丝规模效应最强新凤鸣一体化率100%弹性最大
</div>
</div>
</div>
</section>
<!-- 核心公司对比 -->
<section class="py-20 px-4">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">核心玩家对比分析</h2>
<div class="glass-card rounded-2xl p-4 md:p-8 overflow-x-auto">
<table class="table table-compact stock-table w-full">
<thead class="bg-gradient-to-r from-green-900 to-blue-900">
<tr class="text-white">
<th class="p-3">公司</th>
<th class="p-3">PTA产能</th>
<th class="p-3">长丝产能</th>
<th class="p-3 hide-mobile">一体化</th>
<th class="p-3">利润弹性</th>
<th class="p-3 hide-mobile">核心优势</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-700"><td class="font-bold">新凤鸣</td><td>1100万吨</td><td>840万吨</td><td class="hide-mobile">100%</td><td><span class="badge badge-error">最大</span></td><td class="hide-mobile">长丝增速快,协同减产积极</td></tr>
<tr class="hover:bg-slate-700"><td class="font-bold">桐昆股份</td><td>1020万吨</td><td>1350万吨</td><td class="hide-mobile"></td><td><span class="badge badge-error">最大</span></td><td class="hide-mobile">长丝绝对龙头,规模效应最强</td></tr>
<tr class="hover:bg-slate-700"><td class="font-bold">恒逸石化</td><td>1000万吨</td><td>680万吨</td><td class="hide-mobile"></td><td><span class="badge badge-warning">较大</span></td><td class="hide-mobile">海外PX布局文莱一体化</td></tr>
<tr class="hover:bg-slate-700"><td class="font-bold">恒力石化</td><td>1660万吨</td><td>410万吨</td><td class="hide-mobile">最高</td><td><span class="badge badge-info">中等</span></td><td class="hide-mobile">PTA规模最大话语权最重</td></tr>
<tr class="hover:bg-slate-700"><td class="font-bold">荣盛石化</td><td>1040万吨</td><td>142万吨</td><td class="hide-mobile">最高</td><td><span class="badge badge-info">中等</span></td><td class="hide-mobile">上游PX最强势受益价差修复</td></tr>
<tr class="hover:bg-slate-700"><td class="font-bold">万凯新材</td><td>-</td><td>300万吨(瓶片)</td><td class="hide-mobile"></td><td><span class="badge badge-warning">较大</span></td><td class="hide-mobile">瓶片率先扭亏,乙二醇放量</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 催化剂与路径 -->
<section class="py-20 px-4 bg-slate-800">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">催化剂与发展路径</h2>
<div class="mb-12">
<h3 class="text-2xl font-bold mb-6 text-center text-orange-400">近期催化剂3-6个月</h3>
<div class="grid md:grid-cols-3 gap-6">
<div class="card bg-gradient-to-br from-red-900 to-orange-900 shadow-xl" data-aos="zoom-in">
<div class="card-body">
<h4 class="card-title">减产落地验证</h4>
<p class="text-sm">11月虹港石化250万吨、逸盛等检修落地若实际减产超1000万吨PTA加工费有望快速修复至200元/吨以上。</p>
</div>
</div>
<div class="card bg-gradient-to-br from-blue-900 to-purple-900 shadow-xl" data-aos="zoom-in" data-aos-delay="100">
<div class="card-body">
<h4 class="card-title">业绩拐点显现</h4>
<p class="text-sm">万凯新材Q3净利预计3500-5000万率先扭亏桐昆、新凤鸣Q4有望V型反转业绩成最强催化剂。</p>
</div>
</div>
<div class="card bg-gradient-to-br from-green-900 to-teal-900 shadow-xl" data-aos="zoom-in" data-aos-delay="200">
<div class="card-body">
<h4 class="card-title">春节补库启动</h4>
<p class="text-sm">若10-11月织机开工率维持80%以上,春节前原料补库将提前启动,形成"供需双紧"格局。</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold mb-6 text-center text-green-400">长期发展路径2026-2028</h3>
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-card rounded-xl p-6" data-aos="fade-up">
<h4 class="text-xl font-bold mb-3 text-yellow-400">2026H1产能出清</h4>
<ul class="text-slate-300 space-y-2 text-sm">
<li>• PTA开工率维持75-80%</li>
<li>• 长期亏损装置500万吨退出</li>
<li>• 加工费修复至200-300元/吨</li>
<li>• 长丝利润从150元升至300-400元/吨</li>
</ul>
</div>
<div class="glass-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
<h4 class="text-xl font-bold mb-3 text-yellow-400">2026H2-2027双重景气</h4>
<ul class="text-slate-300 space-y-2 text-sm">
<li>• 聚酯需求增速4-5%</li>
<li>• PTA开工率需达88.6%才能满足需求</li>
<li>• 加工费突破300元/吨</li>
<li>• 长丝价差扩张至500元/吨以上</li>
</ul>
</div>
<div class="glass-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
<h4 class="text-xl font-bold mb-3 text-yellow-400">2028年后稳态格局</h4>
<ul class="text-slate-300 space-y-2 text-sm">
<li>• CR6提升至80%以上</li>
<li>• 形成区域价格协同机制</li>
<li>• PTA加工费中枢250-350元/吨</li>
<li>• 龙头从周期股转向"周期成长"</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 风险提示 -->
<section class="py-20 px-4">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">潜在风险与挑战</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="glass-card rounded-xl p-6 border-l-4 border-red-500" data-aos="flip-left">
<h4 class="font-bold text-lg mb-3 text-red-400">需求风险</h4>
<p class="text-slate-400 text-sm">若2026年GDP增速低于5%纺织服装消费增速降至3%以下将削弱减产效果。需跟踪10-11月织机开工率。</p>
</div>
<div class="glass-card rounded-xl p-6 border-l-4 border-yellow-500" data-aos="flip-left" data-aos-delay="100">
<h4 class="font-bold text-lg mb-3 text-yellow-400">协同风险</h4>
<p class="text-slate-400 text-sm">历史看价格回升后企业有复产冲动。但2026年无新增产能复产即亏损且龙头股权高度绑定持续性较强。</p>
</div>
<div class="glass-card rounded-xl p-6 border-l-4 border-blue-500" data-aos="flip-left" data-aos-delay="200">
<h4 class="font-bold text-lg mb-3 text-blue-400">瓶片拖累</h4>
<p class="text-slate-400 text-sm">瓶片2023-2024年投产过大出口反倾销风险美国税率77.15%)可能蔓延,抑制利润修复。</p>
</div>
<div class="glass-card rounded-xl p-6 border-l-4 border-purple-500" data-aos="flip-left" data-aos-delay="300">
<h4 class="font-bold text-lg mb-3 text-purple-400">政策转向</h4>
<p class="text-slate-400 text-sm">若2026年经济下行压力增大保供优先于反内卷行政协调减产可能被弱化。但当前产能过剩已引发高层关注。</p>
</div>
</div>
</div>
</section>
<!-- 结论 -->
<section class="py-20 px-4 gradient-bg">
<div class="max-w-6xl mx-auto text-center">
<h2 class="text-5xl font-bold mb-8" data-aos="fade-up">综合结论</h2>
<div class="glass-card rounded-2xl p-8 mb-8" data-aos="fade-up" data-aos-delay="100">
<p class="text-xl leading-relaxed">
聚酯产业正站在 <strong class="text-yellow-300">"三年亏损,一朝反转"</strong> 的拐点上,由惨烈的亏损倒逼出最强的协同决心。
这不是周期股的简单反弹,而是 <strong class="text-green-300">行业竞争格局重塑带来的估值修复</strong>
PTA加工费从负值修复至合理水平长丝库存从历史高位降至历史低位这两个极端数据的背离恰恰揭示了最大的投资机会。
</p>
</div>
<div class="grid md:grid-cols-2 gap-6 text-left mb-8">
<div class="glass-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
<h4 class="font-bold text-lg mb-3 text-green-400">🔥 优先配置方向</h4>
<ul class="space-y-2 text-sm">
<li><strong>PTA环节</strong>:恒力石化(规模最大)、桐昆股份(双弹性)</li>
<li><strong>长丝龙头</strong>桐昆股份1350万吨、新凤鸣一体化100%</li>
<li><strong>PX上游</strong>荣盛石化浙石化51%</li>
<li><strong>谨慎博弈</strong>:万凯新材(瓶片扭亏)</li>
</ul>
</div>
<div class="glass-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
<h4 class="font-bold text-lg mb-3 text-blue-400">📊 关键跟踪指标</h4>
<ul class="space-y-2 text-sm">
<li><strong>PTA加工费</strong>:目标从-200元→200-300元</li>
<li><strong>长丝库存</strong>目标维持15天以下</li>
<li><strong>龙头开工率</strong>12月降至82-85%</li>
<li><strong>出口数据</strong>维持25-30万吨/月</li>
</ul>
</div>
</div>
<div class="text-2xl font-bold text-yellow-300" data-aos="fade-up" data-aos-delay="400">
核心策略重仓PTA和长丝龙头等待2026年供给拐点后的戴维斯双击
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="py-12 px-4 bg-slate-900 text-center">
<p class="text-slate-500">
本报告基于公开市场信息整理不构成投资建议。数据来源Wind、公司公告、行业研报、路演记录
</p>
</footer>
<script>
AOS.init({
duration: 1000,
once: true,
offset: 50
});
// 添加表格高亮交互
document.querySelectorAll('.stock-table tbody tr').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.backgroundColor = 'rgba(59, 130, 246, 0.3)';
this.style.transition = 'all 0.3s ease';
});
row.addEventListener('mouseleave', function() {
this.style.backgroundColor = '';
});
});
</script>
</body>
</html>

662
public/htmls/芳香胺.html Normal file
View File

@@ -0,0 +1,662 @@
<!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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hover-scale {
transition: all 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-5px) scale(1.02);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
width: 3px;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
z-index: -1;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 6s ease-in-out infinite;
}
.tech-card {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.policy-card {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}
.risk-card {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}
.opportunity-card {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}
.pulse-effect {
animation: pulse 2s infinite;
}
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.timeline-line {
left: 20px;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<header class="gradient-bg text-white">
<div class="container mx-auto px-4 py-20">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="md:w-1/2 mb-10 md:mb-0">
<div class="inline-flex items-center bg-white/20 glass-effect rounded-full px-4 py-2 mb-6">
<span class="w-2 h-2 bg-green-400 rounded-full mr-2 pulse-effect"></span>
<span class="text-sm font-medium">诺贝尔奖级突破</span>
</div>
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
芳香胺:<br>
<span class="text-yellow-300">颠覆性技术革命</span>
</h1>
<p class="text-xl mb-8 text-gray-100">
2025年11月引爆资本市场的化学工艺突破
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-white text-purple-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
<i class="fas fa-chart-line mr-2"></i>投资分析
</button>
<button class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition">
<i class="fas fa-flask mr-2"></i>技术解析
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="float-animation">
<div class="w-64 h-64 bg-white/20 glass-effect rounded-full flex items-center justify-center">
<i class="fas fa-atom text-8xl"></i>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Key Events Timeline -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-4 text-gray-800">
<i class="fas fa-clock text-purple-600 mr-3"></i>关键事件时间轴
</h2>
<p class="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
从政策发布到技术突破,看芳香胺概念的完美风暴
</p>
<div class="relative max-w-4xl mx-auto">
<div class="timeline-line hidden md:block"></div>
<!-- Timeline Item 1 -->
<div class="flex flex-col md:flex-row items-center mb-12">
<div class="md:w-1/2 md:pr-8 text-right">
<div class="bg-white p-6 rounded-lg shadow-lg hover-scale">
<div class="text-sm text-purple-600 font-semibold mb-2">2024年2月</div>
<h3 class="text-xl font-bold mb-2">安全生产政策发布</h3>
<p class="text-gray-600">应急管理部发布《安全生产治本攻坚三年行动方案》要求2025年底前完成重氮化工艺改造</p>
</div>
</div>
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold z-10 my-4 md:my-0">
<i class="fas fa-flag"></i>
</div>
<div class="md:w-1/2 md:pl-8"></div>
</div>
<!-- Timeline Item 2 -->
<div class="flex flex-col md:flex-row items-center mb-12">
<div class="md:w-1/2 md:pr-8"></div>
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold z-10 my-4 md:my-0">
<i class="fas fa-microscope"></i>
</div>
<div class="md:w-1/2 md:pl-8">
<div class="bg-white p-6 rounded-lg shadow-lg hover-scale">
<div class="text-sm text-purple-600 font-semibold mb-2">2025年10月28日</div>
<h3 class="text-xl font-bold mb-2">Nature论文发表</h3>
<p class="text-gray-600">张夏衡团队在《自然》杂志发表N-硝基胺介导直接脱氨官能团化研究,获辉瑞高度评价</p>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-8 text-right">
<div class="bg-white p-6 rounded-lg shadow-lg hover-scale">
<div class="text-sm text-purple-600 font-semibold mb-2">2025年11月初</div>
<h3 class="text-xl font-bold mb-2">资本市场爆发</h3>
<p class="text-gray-600">多篇深度解读文章密集发布,详细分析技术原理与产业影响,引发概念炒作</p>
</div>
</div>
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold z-10 my-4 md:my-0">
<i class="fas fa-rocket"></i>
</div>
<div class="md:w-1/2 md:pl-8"></div>
</div>
</div>
</div>
</section>
<!-- Core Logic -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-4 text-gray-800">
<i class="fas fa-brain text-purple-600 mr-3"></i>核心逻辑分析
</h2>
<p class="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
"技术+政策"双引擎驱动的范式转移
</p>
<div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
<!-- Technology Card -->
<div class="tech-card rounded-2xl p-8 hover-scale">
<div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mb-4">
<i class="fas fa-vial text-2xl text-purple-600"></i>
</div>
<h3 class="text-2xl font-bold mb-4">技术驱动的范式转移</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>消除重氮盐爆炸风险,实现本质安全</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>温和条件下实现C-N键断裂</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>工艺简化,降低生产成本</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>被辉瑞誉为"真正的杰作"</span>
</li>
</ul>
</div>
<!-- Policy Card -->
<div class="policy-card rounded-2xl p-8 hover-scale">
<div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mb-4">
<i class="fas fa-gavel text-2xl text-orange-600"></i>
</div>
<h3 class="text-2xl font-bold mb-4">政策驱动的强制替代</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>2025年底政策大限临近</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>重氮化工艺必须升级改造</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>未完成改造将停产整顿</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
<span>技术升级从"可选项"变"必选项"</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Industry Chain -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-4 text-gray-800">
<i class="fas fa-sitemap text-purple-600 mr-3"></i>产业链图谱
</h2>
<p class="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
覆盖农药、染料、颜料、香料等关键精细化工领域
</p>
<div class="max-w-6xl mx-auto">
<div class="grid md:grid-cols-4 gap-6 mb-12">
<div class="text-center">
<div class="bg-purple-100 rounded-lg p-6 hover-scale">
<i class="fas fa-flask text-4xl text-purple-600 mb-4"></i>
<h3 class="font-bold mb-2">上游原料</h3>
<p class="text-sm text-gray-600">苯、硝酸等基础化工</p>
</div>
</div>
<div class="text-center">
<div class="bg-purple-200 rounded-lg p-6 hover-scale">
<i class="fas fa-industry text-4xl text-purple-700 mb-4"></i>
<h3 class="font-bold mb-2">中游生产</h3>
<p class="text-sm text-gray-700">芳香胺及衍生物</p>
</div>
</div>
<div class="text-center">
<div class="bg-purple-300 rounded-lg p-6 hover-scale">
<i class="fas fa-palette text-4xl text-purple-800 mb-4"></i>
<h3 class="font-bold mb-2">下游应用</h3>
<p class="text-sm text-gray-800">农药、染料、颜料</p>
</div>
</div>
<div class="text-center">
<div class="bg-purple-400 rounded-lg p-6 hover-scale">
<i class="fas fa-leaf text-4xl text-white mb-4"></i>
<h3 class="font-bold mb-2 text-white">终端市场</h3>
<p class="text-sm text-gray-100">农化、纺织、涂料</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Stocks Table -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-4 text-gray-800">
<i class="fas fa-chart-pie text-purple-600 mr-3"></i>核心公司分析
</h2>
<p class="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
深度解析产业链关键玩家
</p>
<div class="bg-white rounded-2xl shadow-xl p-6 max-w-7xl mx-auto">
<div class="table-scroll">
<table class="w-full">
<thead>
<tr class="bg-gradient-to-r from-purple-600 to-purple-800 text-white">
<th class="px-6 py-4 text-left rounded-tl-lg">公司名称</th>
<th class="px-6 py-4 text-left">分类/逻辑</th>
<th class="px-6 py-4 text-left">竞争优势</th>
<th class="px-6 py-4 text-left">潜在风险</th>
<th class="px-6 py-4 text-center rounded-tr-lg">相关性评级</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4 font-semibold text-purple-600">扬农化工</td>
<td class="px-6 py-4">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">农药龙头</span>
</td>
<td class="px-6 py-4 text-sm">产品线涵盖芳香胺系列衍生物,具备升级动力和财力</td>
<td class="px-6 py-4 text-sm">业务体量大,新工艺业绩弹性相对较小</td>
<td class="px-6 py-4 text-center">
<div class="flex justify-center">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-gray-300"></i>
</div>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4 font-semibold text-purple-600">浙江龙盛</td>
<td class="px-6 py-4">
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">染料龙头</span>
</td>
<td class="px-6 py-4 text-sm">年产7万吨芳香胺升级需求最迫切</td>
<td class="px-6 py-4 text-sm">传统工艺体量大,转型存在不确定性</td>
<td class="px-6 py-4 text-center">
<div class="flex justify-center">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-gray-300"></i>
</div>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4 font-semibold text-purple-600">巍华新材</td>
<td class="px-6 py-4">
<span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm">技术领先</span>
</td>
<td class="px-6 py-4 text-sm">已成功应用万吨级微通道反应器,技术理解能力强</td>
<td class="px-6 py-4 text-sm">可能继续优化现有技术,接纳新技术意愿存疑</td>
<td class="px-6 py-4 text-center">
<div class="flex justify-center">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-gray-300"></i>
</div>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4 font-semibold text-purple-600">美瑞新材</td>
<td class="px-6 py-4">
<span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">纯芳香胺</span>
</td>
<td class="px-6 py-4 text-sm">产品包括PNA和PPDA概念最纯粹的芳香胺标的</td>
<td class="px-6 py-4 text-sm">公司体量较小,抗风险能力较弱</td>
<td class="px-6 py-4 text-center">
<div class="flex justify-center">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-gray-300"></i>
<i class="fas fa-star text-gray-300"></i>
</div>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4 font-semibold text-purple-600">百诚医药</td>
<td class="px-6 py-4">
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">合作桥梁</span>
</td>
<td class="px-6 py-4 text-sm">与杭高院共建研发中心,具备独特合作优势</td>
<td class="px-6 py-4 text-sm">关联性为间接,具体合作存在不确定性</td>
<td class="px-6 py-4 text-center">
<div class="flex justify-center">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-gray-300"></i>
<i class="fas fa-star text-gray-300"></i>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50 transition">
<td class="px-6 py-4 font-semibold text-purple-600">百合花</td>
<td class="px-6 py-4">
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">工艺优化</span>
</td>
<td class="px-6 py-4 text-sm">通过工艺优化提升重氮化反应安全性和稳定性</td>
<td class="px-6 py-4 text-sm">属于改良派而非革命派,逻辑匹配度较低</td>
<td class="px-6 py-4 text-center">
<div class="flex justify-center">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-gray-300"></i>
<i class="fas fa-star text-gray-300"></i>
<i class="fas fa-star text-gray-300"></i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Risk & Opportunity -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-4 text-gray-800">
<i class="fas fa-balance-scale text-purple-600 mr-3"></i>风险与机遇
</h2>
<p class="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
理性评估投资机会,把握关键转折点
</p>
<div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
<!-- Risk Card -->
<div class="risk-card rounded-2xl p-8 hover-scale">
<div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mb-4">
<i class="fas fa-exclamation-triangle text-2xl text-red-600"></i>
</div>
<h3 class="text-2xl font-bold mb-4">潜在风险</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>实验室到工厂的技术转化风险</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>新技术与现有合规路径的成本博弈</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>概念混淆导致的投资误判</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>国际贸易摩擦影响出口业务</span>
</li>
</ul>
</div>
<!-- Opportunity Card -->
<div class="opportunity-card rounded-2xl p-8 hover-scale">
<div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mb-4">
<i class="fas fa-lightbulb text-2xl text-green-600"></i>
</div>
<h3 class="text-2xl font-bold mb-4">投资机遇</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>2025年底政策大限催化</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>技术合作公告的验证信号</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>龙头企业确定性升级需求</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>全球技术输出的长期潜力</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Key Metrics -->
<section class="py-20 bg-gradient-to-r from-purple-700 to-purple-900 text-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="fas fa-chart-bar mr-3"></i>核心数据指标
</h2>
<div class="grid md:grid-cols-4 gap-6 max-w-6xl mx-auto">
<div class="text-center glass-effect rounded-xl p-6 hover-scale">
<div class="text-5xl font-bold mb-2">2025年底</div>
<p class="text-lg">政策改造大限</p>
</div>
<div class="text-center glass-effect rounded-xl p-6 hover-scale">
<div class="text-5xl font-bold mb-2">7万吨</div>
<p class="text-lg">浙江龙盛芳香胺产能</p>
</div>
<div class="text-center glass-effect rounded-xl p-6 hover-scale">
<div class="text-5xl font-bold mb-2">50天</div>
<p class="text-lg">Nature创纪录发表速度</p>
</div>
<div class="text-center glass-effect rounded-xl p-6 hover-scale">
<div class="text-5xl font-bold mb-2">4/4</div>
<p class="text-lg">审稿人一致高度评价</p>
</div>
</div>
</div>
</section>
<!-- Investment Strategy -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-4 text-gray-800">
<i class="fas fa-chess text-purple-600 mr-3"></i>投资策略
</h2>
<p class="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
从"淘金"到"卖铲"的智慧选择
</p>
<div class="max-w-4xl mx-auto">
<div class="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-2xl p-8 text-white">
<h3 class="text-2xl font-bold mb-6">
<i class="fas fa-star mr-2"></i>核心投资启示
</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="text-xl font-semibold mb-3">拥抱确定性</h4>
<ul class="space-y-2">
<li>• 扬农化工、浙江龙盛等龙头</li>
<li>• 政策"必答题"考生</li>
<li>• 最稳固的参与者</li>
</ul>
</div>
<div>
<h4 class="text-xl font-semibold mb-3">布局未来</h4>
<ul class="space-y-2">
<li>• 百诚医药技术桥梁</li>
<li>• 巍华新材工艺领先</li>
<li>• "卖铲人"逻辑</li>
</ul>
</div>
</div>
</div>
<div class="mt-8 bg-white rounded-2xl shadow-lg p-8">
<h3 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-eye mr-2 text-purple-600"></i>需重点跟踪指标
</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="flex items-center p-4 bg-purple-50 rounded-lg">
<i class="fas fa-file-signature text-2xl text-purple-600 mr-4"></i>
<div>
<h4 class="font-semibold">技术授权公告</h4>
<p class="text-sm text-gray-600">判断概念虚实的关键</p>
</div>
</div>
<div class="flex items-center p-4 bg-blue-50 rounded-lg">
<i class="fas fa-calendar-check text-2xl text-blue-600 mr-4"></i>
<div>
<h4 class="font-semibold">年底合规进展</h4>
<p class="text-sm text-gray-600">验证政策执行力度</p>
</div>
</div>
<div class="flex items-center p-4 bg-green-50 rounded-lg">
<i class="fas fa-flask text-2xl text-green-600 mr-4"></i>
<div>
<h4 class="font-semibold">中试项目进展</h4>
<p class="text-sm text-gray-600">技术落地第一信号</p>
</div>
</div>
<div class="flex items-center p-4 bg-orange-50 rounded-lg">
<i class="fas fa-chart-line text-2xl text-orange-600 mr-4"></i>
<div>
<h4 class="font-semibold">产品价差变化</h4>
<p class="text-sm text-gray-600">成本优势体现</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<h3 class="text-2xl font-bold mb-2">芳香胺概念分析</h3>
<p class="text-gray-400">专业、深度、及时的投资洞察</p>
</div>
<div class="flex space-x-6">
<a href="#" class="hover:text-purple-400 transition">
<i class="fab fa-twitter text-2xl"></i>
</a>
<a href="#" class="hover:text-purple-400 transition">
<i class="fab fa-linkedin text-2xl"></i>
</a>
<a href="#" class="hover:text-purple-400 transition">
<i class="fab fa-github text-2xl"></i>
</a>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2025 芳香胺投资分析. All rights reserved.</p>
<p class="mt-2 text-sm">数据来源:公开信息整理 | 投资有风险,入市需谨慎</p>
</div>
</div>
</footer>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.hover-scale').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.6s ease-out';
observer.observe(el);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,464 @@
<!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>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
body { font-family: 'Inter', sans-serif; }
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.stock-row:hover {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.scroll-smooth {
scroll-behavior: smooth;
}
</style>
</head>
<body class="bg-gray-50 scroll-smooth">
<!-- Hero Section -->
<section class="gradient-bg text-white relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-20"></div>
<div class="container mx-auto px-6 py-24 relative z-10">
<div class="text-center">
<div class="inline-flex items-center space-x-2 bg-white/20 backdrop-blur-lg rounded-full px-4 py-2 mb-6">
<span class="pulse-dot w-2 h-2 bg-green-400 rounded-full"></span>
<span class="text-sm font-medium">投资热点 · AI产业链</span>
</div>
<h1 class="text-5xl md:text-7xl font-bold mb-6">
英伟达代理概念
<span class="block text-3xl md:text-4xl mt-2 font-light opacity-90">深度投资价值解析</span>
</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto opacity-95 leading-relaxed">
围绕全球AI算力霸主的产业链投资主题挖掘代理分销商在AI浪潮中的核心价值
</p>
<div class="mt-10 flex flex-wrap justify-center gap-4">
<div class="bg-white/20 backdrop-blur-lg rounded-lg px-6 py-3">
<div class="text-3xl font-bold">3倍</div>
<div class="text-sm opacity-90">市场需求倍数</div>
</div>
<div class="bg-white/20 backdrop-blur-lg rounded-lg px-6 py-3">
<div class="text-3xl font-bold">430%</div>
<div class="text-sm opacity-90">数据中心增长</div>
</div>
<div class="bg-white/20 backdrop-blur-lg rounded-lg px-6 py-3">
<div class="text-3xl font-bold">PE 38-40x</div>
<div class="text-sm opacity-90">当前估值</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Concept -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-900 mb-4">概念核心洞察</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
"英伟达代理"概念正处于短期基本面强劲与长期逻辑存疑的交织期
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="card-hover bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl p-8 border border-purple-100">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-lg flex items-center justify-center mb-6">
<i class="ri-line-chart-line text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">短期驱动力</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><i class="ri-checkbox-circle-fill text-purple-500 mt-1 mr-2"></i><span>供给刚性创造渠道价值</span></li>
<li class="flex items-start"><i class="ri-checkbox-circle-fill text-purple-500 mt-1 mr-2"></i><span>生态护城河传导效应</span></li>
<li class="flex items-start"><i class="ri-checkbox-circle-fill text-purple-500 mt-1 mr-2"></i><span>需求多元化裂变</span></li>
</ul>
</div>
<div class="card-hover bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-8 border border-blue-100">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center mb-6">
<i class="ri-brain-line text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">市场情绪</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><i class="ri-checkbox-circle-fill text-blue-500 mt-1 mr-2"></i><span>热度极高且持续</span></li>
<li class="flex items-start"><i class="ri-checkbox-circle-fill text-blue-500 mt-1 mr-2"></i><span>乐观派聚焦短期业绩</span></li>
<li class="flex items-start"><i class="ri-checkbox-circle-fill text-blue-500 mt-1 mr-2"></i><span>谨慎派担忧结构性风险</span></li>
</ul>
</div>
<div class="card-hover bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl p-8 border border-amber-100">
<div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-500 rounded-lg flex items-center justify-center mb-6">
<i class="ri-alert-line text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">关键预期差</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><i class="ri-checkbox-circle-fill text-amber-500 mt-1 mr-2"></i><span>代理质量差异被忽略</span></li>
<li class="flex items-start"><i class="ri-checkbox-circle-fill text-amber-500 mt-1 mr-2"></i><span>长期逻辑脆弱性未定价</span></li>
<li class="flex items-start"><i class="ri-checkbox-circle-fill text-amber-500 mt-1 mr-2"></i><span>地缘政治风险被低估</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-900 mb-4">发展时间轴</h2>
<p class="text-xl text-gray-600">关键事件与市场演化</p>
</div>
<div class="relative max-w-4xl mx-auto">
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full timeline-line"></div>
<div class="space-y-12">
<div class="flex items-center justify-end md:justify-start">
<div class="w-full md:w-5/12 text-right md:text-left pr-8 md:pr-0 md:pl-8">
<div class="bg-white rounded-lg p-6 shadow-lg card-hover">
<span class="text-sm font-semibold text-purple-600">2023年中至年末</span>
<h3 class="text-lg font-bold text-gray-900 mt-2">需求爆发初期</h3>
<p class="text-gray-600 mt-2">A100/H100严重短缺市场需求为实际供给3倍价格持续飙升</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-600 rounded-full border-4 border-white"></div>
</div>
<div class="flex items-center justify-start md:justify-end">
<div class="w-full md:w-5/12 pl-8 md:pl-0 md:pr-8">
<div class="bg-white rounded-lg p-6 shadow-lg card-hover">
<span class="text-sm font-semibold text-blue-600">2024年2月</span>
<h3 class="text-lg font-bold text-gray-900 mt-2">业绩超预期引爆市场</h3>
<p class="text-gray-600 mt-2">数据中心业务收入同比暴增430%Q2指引达110亿美元</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-600 rounded-full border-4 border-white"></div>
</div>
<div class="flex items-center justify-end md:justify-start">
<div class="w-full md:w-5/12 text-right md:text-left pr-8 md:pr-0 md:pl-8">
<div class="bg-white rounded-lg p-6 shadow-lg card-hover">
<span class="text-sm font-semibold text-amber-600">2024年4月</span>
<h3 class="text-lg font-bold text-gray-900 mt-2">首次深度分歧</h3>
<p class="text-gray-600 mt-2">市场担忧推理芯片竞争格局变化大厂自研ASIC构成威胁</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-600 rounded-full border-4 border-white"></div>
</div>
<div class="flex items-center justify-start md:justify-end">
<div class="w-full md:w-5/12 pl-8 md:pl-0 md:pr-8">
<div class="bg-white rounded-lg p-6 shadow-lg card-hover">
<span class="text-sm font-semibold text-green-600">2024年12月</span>
<h3 class="text-lg font-bold text-gray-900 mt-2">应用场景拓展</h3>
<p class="text-gray-600 mt-2">中电港宣布机器人合作落地英伟达发布RTX 50系列GPU</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-green-600 rounded-full border-4 border-white"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-900 mb-4">核心上市公司分析</h2>
<p class="text-xl text-gray-600">英伟达代理产业链核心玩家对比</p>
</div>
<div class="overflow-x-auto">
<table class="w-full bg-white rounded-lg overflow-hidden shadow-lg">
<thead class="gradient-bg text-white">
<tr>
<th class="px-6 py-4 text-left font-semibold">公司名称</th>
<th class="px-6 py-4 text-left font-semibold">合作层级</th>
<th class="px-6 py-4 text-left font-semibold">核心业务</th>
<th class="px-6 py-4 text-left font-semibold">竞争优势</th>
<th class="px-6 py-4 text-left font-semibold">逻辑纯粹度</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="stock-row transition-colors duration-200">
<td class="px-6 py-4 font-semibold text-purple-600">紫光股份</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
最高级别总代理
</span>
</td>
<td class="px-6 py-4 text-gray-700">数据中心GPU/DGX系统中国区总代理NVIDIA网络产品</td>
<td class="px-6 py-4 text-gray-700">渠道垄断性,与英伟达绑定最深,利润最丰厚</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-full bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-gradient-to-r from-purple-500 to-purple-600 h-2 rounded-full" style="width: 90%"></div>
</div>
<span class="text-sm font-medium text-purple-600"></span>
</div>
</td>
</tr>
<tr class="stock-row transition-colors duration-200">
<td class="px-6 py-4 font-semibold text-blue-600">中电港</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
授权分销商
</span>
</td>
<td class="px-6 py-4 text-gray-700">战略聚焦Jetson边缘计算/机器人领域,已有应用落地</td>
<td class="px-6 py-4 text-gray-700">成长性最强切入高增长物理AI赛道向解决方案转型</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-full bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full" style="width: 75%"></div>
</div>
<span class="text-sm font-medium text-blue-600">中高</span>
</div>
</td>
</tr>
<tr class="stock-row transition-colors duration-200">
<td class="px-6 py-4 font-semibold text-green-600">弘信电子</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
Elite精英级伙伴
</span>
</td>
<td class="px-6 py-4 text-gray-700">子公司安联通为Compute和Networking双Elite合作伙伴</td>
<td class="px-6 py-4 text-gray-700">技术壁垒高,能承接复杂高毛利网络及计算项目</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-full bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-gradient-to-r from-green-500 to-green-600 h-2 rounded-full" style="width: 60%"></div>
</div>
<span class="text-sm font-medium text-green-600"></span>
</div>
</td>
</tr>
<tr class="stock-row transition-colors duration-200">
<td class="px-6 py-4 font-semibold text-gray-600">神州数码</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
分销合作伙伴
</span>
</td>
<td class="px-6 py-4 text-gray-700">英伟达分销合作伙伴,多元化业务构成</td>
<td class="px-6 py-4 text-gray-700">业务分散,抗单一客户风险能力强</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-full bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-gradient-to-r from-gray-500 to-gray-600 h-2 rounded-full" style="width: 40%"></div>
</div>
<span class="text-sm font-medium text-gray-600">中低</span>
</div>
</td>
</tr>
<tr class="stock-row transition-colors duration-200">
<td class="px-6 py-4 font-semibold text-amber-600">力源信息</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-amber-100 text-amber-800">
间接供货
</span>
</td>
<td class="px-6 py-4 text-gray-700">代理存储、MCU等向寒武纪直接、英伟达间接供货</td>
<td class="px-6 py-4 text-gray-700">业务多元,抗风险能力强</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-full bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-gradient-to-r from-amber-500 to-amber-600 h-2 rounded-full" style="width: 20%"></div>
</div>
<span class="text-sm font-medium text-amber-600"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section class="py-16 bg-gradient-to-br from-red-50 to-pink-50">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-900 mb-4">风险与挑战</h2>
<p class="text-xl text-gray-600">需要重点关注的潜在风险因素</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
<i class="ri-global-line text-red-600 text-2xl"></i>
</div>
<h3 class="font-bold text-lg text-gray-900 mb-2">地缘政治风险</h3>
<p class="text-gray-600 text-sm">美国对华AI芯片出口限制是悬顶之剑可能导致业务瞬间归零</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow">
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
<i class="ri-cpu-line text-orange-600 text-2xl"></i>
</div>
<h3 class="font-bold text-lg text-gray-900 mb-2">技术竞争</h3>
<p class="text-gray-600 text-sm">大厂自研ASIC芯片将在推理侧形成竞争冲击代理模式基础</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow">
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
<i class="ri-percent-line text-yellow-600 text-2xl"></i>
</div>
<h3 class="font-bold text-lg text-gray-900 mb-2">毛利率压缩</h3>
<p class="text-gray-600 text-sm">产能释放和竞争加剧将导致英伟达降价,代理商高毛利不可持续</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-shadow">
<div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4">
<i class="ri-database-2-line text-amber-600 text-2xl"></i>
</div>
<h3 class="font-bold text-lg text-gray-900 mb-2">存货减值</h3>
<p class="text-gray-600 text-sm">技术迭代极快,旧型号存货存在大幅减值风险</p>
</div>
</div>
</div>
</section>
<!-- Investment Advice -->
<section class="py-16 gradient-bg text-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">投资启示</h2>
<p class="text-xl opacity-90">聚焦转型,挖掘长期价值</p>
</div>
<div class="max-w-4xl mx-auto">
<div class="glass-effect rounded-2xl p-8 text-gray-900">
<div class="mb-8">
<h3 class="text-2xl font-bold mb-4 flex items-center">
<span class="w-8 h-8 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-lg flex items-center justify-center mr-3">
<i class="ri-lightbulb-line text-white"></i>
</span>
核心结论
</h3>
<p class="text-lg leading-relaxed text-gray-700">
"英伟达代理"概念已进入去伪存真、分化加剧的阶段。最具投资价值的并非拥有标签的所有公司,而是那些正在积极构建第二、第三增长曲线的玩家。
</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mb-8">
<div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-lg p-6">
<h4 class="font-bold text-lg mb-3 text-purple-900">首选方向</h4>
<p class="text-gray-700 mb-2">技术驱动的解决方案提供商</p>
<ul class="space-y-1 text-sm text-gray-600">
<li>• 中电港(边缘计算/机器人)</li>
<li>• 弘信电子(精英级网络与计算)</li>
</ul>
</div>
<div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg p-6">
<h4 class="font-bold text-lg mb-3 text-blue-900">次选方向</h4>
<p class="text-gray-700 mb-2">高端渠道垄断者</p>
<ul class="space-y-1 text-sm text-gray-600">
<li>• 紫光股份(总代理地位)</li>
</ul>
</div>
</div>
<div class="border-t pt-6">
<h4 class="font-bold text-lg mb-4">重点跟踪指标</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="text-center">
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="ri-funds-line text-white text-2xl"></i>
</div>
<p class="text-sm font-medium">AI业务占比</p>
<p class="text-xs text-gray-600">营收增速与毛利率</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="ri-rocket-2-line text-white text-2xl"></i>
</div>
<p class="text-sm font-medium">新产品发布</p>
<p class="text-xs text-gray-600">解决方案落地情况</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="ri-earth-line text-white text-2xl"></i>
</div>
<p class="text-sm font-medium">地缘政治</p>
<p class="text-xs text-gray-600">出口管制政策</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="ri-bank-card-line text-white text-2xl"></i>
</div>
<p class="text-sm font-medium">CapEx结构</p>
<p class="text-xs text-gray-600">云厂商支出变化</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-300 py-12">
<div class="container mx-auto px-6">
<div class="text-center">
<p class="text-sm opacity-75">本页面信息仅供参考,不构成投资建议</p>
<p class="text-xs mt-2 opacity-50">数据来源:公开新闻、路演报告、市场研究 | 更新时间2025年10月</p>
</div>
</div>
</footer>
<script>
// Smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Intersection Observer for animations
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);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,561 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>英伟达电源方案 - AI算力革命下的供电架构创新</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.timeline-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.stock-table {
font-size: 0.85rem;
}
@media (max-width: 768px) {
.stock-table {
font-size: 0.75rem;
}
}
</style>
</head>
<body class="bg-base-200">
<!-- Header -->
<div class="gradient-bg text-white">
<div class="container mx-auto px-4 py-12">
<div class="flex items-center justify-between flex-wrap">
<div>
<h1 class="text-4xl font-bold mb-2">英伟达电源方案</h1>
<p class="text-xl opacity-90">AI算力革命驱动的千亿级供电架构变革</p>
</div>
<div class="badge badge-warning badge-lg mt-4 md:mt-0">2025.01.15 更新</div>
</div>
</div>
</div>
<!-- Key Metrics -->
<div class="container mx-auto px-4 -mt-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body compact">
<h3 class="text-sm opacity-70">单柜功率提升</h3>
<p class="text-2xl font-bold text-primary">10倍</p>
<p class="text-xs">120-130kW vs 传统10-20kW</p>
</div>
</div>
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body compact">
<h3 class="text-sm opacity-70">转换效率</h3>
<p class="text-2xl font-bold text-success">98%</p>
<p class="text-xs">SST方案效率</p>
</div>
</div>
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body compact">
<h3 class="text-sm opacity-70">市场规模</h3>
<p class="text-2xl font-bold text-warning">千亿级</p>
<p class="text-xs">预计2025-2027年</p>
</div>
</div>
<div class="card bg-base-100 shadow-xl card-hover">
<div class="card-body compact">
<h3 class="text-sm opacity-70">涉及公司</h3>
<p class="text-2xl font-bold text-info">30+</p>
<p class="text-xs">产业链相关标的</p>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Column - Timeline & Analysis -->
<div class="lg:col-span-2 space-y-6">
<!-- Timeline -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
关键时间轴
</h2>
<ul class="timeline timeline-vertical">
<li>
<div class="timeline-start">2019.12</div>
<div class="timeline-middle">
<div class="w-3 h-3 bg-primary rounded-full timeline-dot"></div>
</div>
<div class="timeline-end timeline-box">
中恒电气与阿里发布巴拿马电源
</div>
<hr/>
</li>
<li>
<hr/>
<div class="timeline-start">2024.03</div>
<div class="timeline-middle">
<div class="w-3 h-3 bg-success rounded-full"></div>
</div>
<div class="timeline-end timeline-box">
英伟达GB300确定800V HVDC架构
</div>
<hr/>
</li>
<li>
<hr/>
<div class="timeline-start">2025.10</div>
<div class="timeline-middle">
<div class="w-3 h-3 bg-warning rounded-full timeline-dot"></div>
</div>
<div class="timeline-end timeline-box">
英伟达发布800V DC白皮书明确SST为终极方案
</div>
</li>
</ul>
</div>
</div>
<!-- Technology Routes -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">技术路线对比</h2>
<div class="overflow-x-auto">
<table class="table table-zebra">
<thead>
<tr>
<th>技术方案</th>
<th>成熟度</th>
<th>效率</th>
<th>时间窗口</th>
<th>代表公司</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="badge badge-primary">HVDC</span></td>
<td>
<progress class="progress progress-success w-20" value="80" max="100"></progress>
</td>
<td>95%</td>
<td>2024-2026</td>
<td>中恒电气、麦格米特</td>
</tr>
<tr>
<td><span class="badge badge-warning">SST</span></td>
<td>
<progress class="progress progress-warning w-20" value="40" max="100"></progress>
</td>
<td>98%</td>
<td>2026-2028</td>
<td>金盘科技、四方股份</td>
</tr>
<tr>
<td><span class="badge badge-info">巴拿马2.0</span></td>
<td>
<progress class="progress progress-info w-20" value="60" max="100"></progress>
</td>
<td>96%</td>
<td>2025-2027</td>
<td>中恒电气、伊戈尔</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Investment Logic -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">核心投资逻辑</h2>
<div class="space-y-4">
<div class="alert alert-info">
<svg class="w-6 h-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
<div>
<h3 class="font-bold">算力密度革命</h3>
<div class="text-xs">GB300单机柜功率达120-130kW传统AC供电无法满足</div>
</div>
</div>
<div class="alert alert-success">
<svg class="w-6 h-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">技术路线明确</h3>
<div class="text-xs">英伟达白皮书确认SST为终极方案HVDC为过渡方案</div>
</div>
</div>
<div class="alert alert-warning">
<svg class="w-6 h-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">预期差巨大</h3>
<div class="text-xs">市场低估SST进展国产化速度超预期</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column - Market Info -->
<div class="space-y-6">
<!-- Market Heat -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-lg mb-4">市场热度分析</h2>
<div class="space-y-3">
<div>
<div class="flex justify-between text-sm mb-1">
<span>研报密度</span>
<span class="text-warning"></span>
</div>
<progress class="progress progress-warning" value="85" max="100"></progress>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>产业验证</span>
<span class="text-success"></span>
</div>
<progress class="progress progress-success" value="75" max="100"></progress>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>估值差</span>
<span class="text-info"></span>
</div>
<progress class="progress progress-info" value="90" max="100"></progress>
</div>
</div>
</div>
</div>
<!-- Risk Alert -->
<div class="card bg-base-100 shadow-xl border-l-4 border-error">
<div class="card-body">
<h2 class="card-title text-lg text-error mb-4">风险提示</h2>
<ul class="space-y-2 text-sm">
<li class="flex items-start">
<span class="text-error mr-2"></span>
<span>SST可靠性需数千小时验证</span>
</li>
<li class="flex items-start">
<span class="text-error mr-2"></span>
<span>GB300方案存在调整风险</span>
</li>
<li class="flex items-start">
<span class="text-error mr-2"></span>
<span>国际供应链依赖风险</span>
</li>
<li class="flex items-start">
<span class="text-error mr-2"></span>
<span>Q3业绩兑现压力</span>
</li>
</ul>
</div>
</div>
<!-- Investment Strategy -->
<div class="card bg-gradient-to-r from-primary to-secondary text-white shadow-xl">
<div class="card-body">
<h2 class="card-title text-lg mb-4">投资策略</h2>
<div class="text-sm space-y-3">
<div>
<h3 class="font-bold mb-1">哑铃型配置</h3>
<p class="opacity-90">一端配置确定性高的配套龙头另一端布局弹性大的SST先行者</p>
</div>
<div class="divider divider-neutral my-2"></div>
<div>
<p class="font-semibold">重点关注:</p>
<div class="flex flex-wrap gap-2 mt-2">
<span class="badge badge-warning">金盘科技</span>
<span class="badge badge-warning">四方股份</span>
<span class="badge badge-warning">江海股份</span>
<span class="badge badge-warning">麦格米特</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Stock Table Section -->
<div class="card bg-base-100 shadow-xl mt-8">
<div class="card-body">
<h2 class="card-title text-2xl mb-6">
<svg class="w-8 h-8 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
产业链核心标的一览
</h2>
<!-- Category Tabs -->
<div class="tabs tabs-boxed mb-4">
<a class="tab tab-active" onclick="filterStocks('all')">全部</a>
<a class="tab" onclick="filterStocks('SST')">固态变压器SST</a>
<a class="tab" onclick="filterStocks('HVDC')">高压直流HVDC</a>
<a class="tab" onclick="filterStocks('panama')">巴拿马电源</a>
<a class="tab" onclick="filterStocks('support')">配套相关</a>
</div>
<div class="overflow-x-auto">
<table class="table table-compact stock-table w-full">
<thead>
<tr class="bg-base-200">
<th class="text-center">股票代码</th>
<th class="text-center">分类</th>
<th class="text-center">相关性</th>
<th class="text-center">技术/产品</th>
<th class="text-center">项目进展</th>
<th class="text-center">信息源</th>
<th>投资要点</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- SST Category -->
<tr class="hover stock-row" data-category="SST">
<td class="font-bold text-center">四方股份</td>
<td class="text-center"><span class="badge badge-primary badge-sm">固态变压器SST</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">SST系列</td>
<td class="text-center">国家级示范项目应用</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">互动</span></td>
<td>SST产品全面适配800V直流供电架构已在多个国家级示范项目应用</td>
</tr>
<tr class="hover stock-row" data-category="SST">
<td class="font-bold text-center">京泉华</td>
<td class="text-center"><span class="badge badge-primary badge-sm">固态变压器SST</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">伊顿SST高频变压器</td>
<td class="text-center">独家供应</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">网络纪要</span></td>
<td>伊顿SST高频变压器独供绑定国际巨头</td>
</tr>
<tr class="hover stock-row" data-category="SST">
<td class="font-bold text-center">金盘科技</td>
<td class="text-center"><span class="badge badge-primary badge-sm">固态变压器SST</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">HVDC800V固态变压器</td>
<td class="text-center">2025年8月完成样机</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">公告</span></td>
<td>2025年Q4完成测试认证进度行业领先</td>
</tr>
<tr class="hover stock-row" data-category="SST">
<td class="font-bold text-center">中国西电</td>
<td class="text-center"><span class="badge badge-primary badge-sm">固态变压器SST</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">2.4MW固态变压器</td>
<td class="text-center">已向数据中心供货</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">互动</span></td>
<td>向"东数西算"数据中心提供2.4MW固态变压器</td>
</tr>
<tr class="hover stock-row" data-category="SST">
<td class="font-bold text-center">特锐德</td>
<td class="text-center"><span class="badge badge-primary badge-sm">固态变压器SST</span></td>
<td class="text-center"><span class="badge badge-warning badge-sm">研发</span></td>
<td class="text-center">固态变压器技术</td>
<td class="text-center">2027年推出2028年量产</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">网络纪要</span></td>
<td>预计2028年实现大规模生产交付</td>
</tr>
<!-- HVDC Category -->
<tr class="hover stock-row" data-category="HVDC">
<td class="font-bold text-center">中恒电气</td>
<td class="text-center"><span class="badge badge-info badge-sm">高压直流HVDC</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">第三代HVDC产品矩阵</td>
<td class="text-center">先行者地位</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">调研</span></td>
<td>HVDC绿色供电技术方案先行者服务阿里、腾讯、百度</td>
</tr>
<tr class="hover stock-row" data-category="HVDC">
<td class="font-bold text-center">麦格米特</td>
<td class="text-center"><span class="badge badge-info badge-sm">高压直流HVDC</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">800V HVDC Power Sidecar</td>
<td class="text-center">英伟达链唯一供应商</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">机构研报</span></td>
<td>大陆唯一NV链服务器电源供应商2025GTC展出方案</td>
</tr>
<tr class="hover stock-row" data-category="HVDC">
<td class="font-bold text-center">通合科技</td>
<td class="text-center"><span class="badge badge-info badge-sm">高压直流HVDC</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">高压直流供电模块</td>
<td class="text-center">模块份额60%</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">调研/纪要</span></td>
<td>HVDC模块市占率60%台达份额50%</td>
</tr>
<tr class="hover stock-row" data-category="HVDC">
<td class="font-bold text-center">优优绿能</td>
<td class="text-center"><span class="badge badge-info badge-sm">高压直流HVDC</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">HVDC电源</td>
<td class="text-center">2025年布局</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">机构研报</span></td>
<td>2025年全力布局与ABB等海外Tier1客户合作</td>
</tr>
<tr class="hover stock-row" data-category="HVDC">
<td class="font-bold text-center">科华数据</td>
<td class="text-center"><span class="badge badge-info badge-sm">高压直流HVDC</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">HVDC系列</td>
<td class="text-center">头部互联网合作</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">互动</span></td>
<td>与头部互联网大厂深度合作SST技术降本30%</td>
</tr>
<!-- Panama Category -->
<tr class="hover stock-row" data-category="panama">
<td class="font-bold text-center">中恒电气</td>
<td class="text-center"><span class="badge badge-warning badge-sm">巴拿马电源</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">10kV直转240V/336V</td>
<td class="text-center">2019年与阿里联合发布</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">互动</span></td>
<td>巴拿马电源系统创始者,技术成熟</td>
</tr>
<tr class="hover stock-row" data-category="panama">
<td class="font-bold text-center">伊戈尔</td>
<td class="text-center"><span class="badge badge-warning badge-sm">巴拿马电源</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">移相变压器</td>
<td class="text-center">批量供货</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">互动</span></td>
<td>移相变压器已批量供货配套巴拿马电源</td>
</tr>
<!-- Support Category -->
<tr class="hover stock-row" data-category="support">
<td class="font-bold text-center">江海股份</td>
<td class="text-center"><span class="badge badge-secondary badge-sm">配套相关</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">超级电容器</td>
<td class="text-center">2024年营收46亿</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">年报</span></td>
<td>超级电容器龙头GB300方案标配组件</td>
</tr>
<tr class="hover stock-row" data-category="support">
<td class="font-bold text-center">思源电气</td>
<td class="text-center"><span class="badge badge-secondary badge-sm">配套相关</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">高品质超级电容器</td>
<td class="text-center">烯晶碳能子公司</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">机构研报</span></td>
<td>子公司烯晶碳能生产,具备导入数据中心能力</td>
</tr>
<tr class="hover stock-row" data-category="support">
<td class="font-bold text-center">蓝鲸芯</td>
<td class="text-center"><span class="badge badge-secondary badge-sm">配套相关</span></td>
<td class="text-center"><span class="badge badge-success badge-sm">产品</span></td>
<td class="text-center">BBU备用电源</td>
<td class="text-center">少量出货</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">机构研报</span></td>
<td>产品与BBU方向匹配向第三方少量出货</td>
</tr>
<tr class="hover stock-row" data-category="support">
<td class="font-bold text-center">云路股份</td>
<td class="text-center"><span class="badge badge-secondary badge-sm">配套相关</span></td>
<td class="text-center"><span class="badge badge-warning badge-sm">材料</span></td>
<td class="text-center">纳米晶材料</td>
<td class="text-center">研发探索阶段</td>
<td class="text-center"><span class="badge badge-ghost badge-sm">互动</span></td>
<td>纳米晶材料在固态变压器领域具备应用潜力</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Bottom CTA -->
<div class="card bg-gradient-to-r from-primary to-secondary text-white shadow-xl mt-8">
<div class="card-body text-center">
<h2 class="card-title text-2xl justify-center mb-4">把握AI算力革命下的供电架构变革机遇</h2>
<p class="mb-6">英伟达电源方案正从主题炒作向基本面驱动过渡,当前是布局窗口期</p>
<div class="flex flex-wrap justify-center gap-4">
<div class="badge badge-warning badge-lg">SST终极方案</div>
<div class="badge badge-warning badge-lg">HVDC过渡方案</div>
<div class="badge badge-warning badge-lg">千亿级市场</div>
<div class="badge badge-warning badge-lg">2025-2027黄金期</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer footer-center p-4 bg-base-300 text-base-content mt-8">
<div>
<p>© 2025 英伟达电源方案投资分析 | 数据来源:公开信息整理 | 风险提示:投资有风险,决策需谨慎</p>
</div>
</footer>
<script>
function filterStocks(category) {
const rows = document.querySelectorAll('.stock-row');
const tabs = document.querySelectorAll('.tab');
// Update active tab
tabs.forEach(tab => {
tab.classList.remove('tab-active');
if (tab.textContent.includes('全部') && category === 'all') {
tab.classList.add('tab-active');
} else if (tab.textContent.includes('SST') && category === 'SST') {
tab.classList.add('tab-active');
} else if (tab.textContent.includes('HVDC') && category === 'HVDC') {
tab.classList.add('tab-active');
} else if (tab.textContent.includes('巴拿马') && category === 'panama') {
tab.classList.add('tab-active');
} else if (tab.textContent.includes('配套') && category === 'support') {
tab.classList.add('tab-active');
}
});
// Filter rows
rows.forEach(row => {
if (category === 'all') {
row.style.display = '';
} else {
const rowCategory = row.getAttribute('data-category');
row.style.display = rowCategory === category ? '' : 'none';
}
});
}
// Add hover effect to stock rows
document.querySelectorAll('.stock-row').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.backgroundColor = 'rgba(139, 92, 246, 0.1)';
});
row.addEventListener('mouseleave', function() {
this.style.backgroundColor = '';
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,743 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>荒野求生概念深度解析 | 2025投资风向标</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/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');
* {
font-family: 'Inter', sans-serif;
}
.hero-bg {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%);
position: relative;
overflow: hidden;
}
.hero-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.gradient-text {
background: linear-gradient(90deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.risk-glow {
box-shadow: 0 0 20px rgba(248, 113, 113, 0.3);
animation: risk-pulse 2s ease-in-out infinite;
}
@keyframes risk-pulse {
0%, 100% { box-shadow: 0 0 20px rgba(248, 113, 113, 0.3); }
50% { box-shadow: 0 0 30px rgba(248, 113, 113, 0.5); }
}
.timeline-item {
opacity: 0;
transform: translateX(-30px);
animation: slideInLeft 0.6s ease-out forwards;
}
@keyframes slideInLeft {
to {
opacity: 1;
transform: translateX(0);
}
}
.number-animate {
font-variant-numeric: tabular-nums;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
min-width: 800px;
}
.badge-trending {
animation: trending 2s ease-in-out infinite;
}
@keyframes trending {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.section-divider {
height: 2px;
background: linear-gradient(90deg, transparent 0%, #38bdf8 50%, transparent 100%);
margin: 3rem 0;
border: none;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Hero Section -->
<div class="hero-bg min-h-screen flex items-center justify-center relative">
<div class="container mx-auto px-6 py-20 text-center relative z-10">
<div class="mb-8">
<span class="badge badge-primary badge-lg font-bold text-lg px-6 py-3 animate-pulse">
概念爆发
</span>
</div>
<h1 class="text-5xl md:text-7xl font-black mb-6">
<span class="gradient-text">荒野求生</span>
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto">
从张家界七星山赛事爆火到A股概念异动深度解构户外经济的投资真相与认知陷阱
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
<div class="card card-hover bg-base-200 bordered border-2 border-primary/30">
<div class="card-body">
<h3 class="card-title text-primary">事件触发</h3>
<p class="text-3xl font-bold text-primary number-animate">2025-11-13</p>
<p class="text-sm text-gray-400">三夫户外直线涨停</p>
</div>
</div>
<div class="card card-hover bg-base-200 bordered border-2 border-secondary/30">
<div class="card-body">
<h3 class="card-title text-secondary">概念纯度</h3>
<p class="text-3xl font-bold text-secondary number-animate">68%</p>
<p class="text-sm text-gray-400">事件驱动为主</p>
</div>
</div>
<div class="card card-hover bg-base-200 bordered border-2 border-accent/30">
<div class="card-body">
<h3 class="card-title text-accent">市场热度</h3>
<p class="text-3xl font-bold text-accent number-animate">92°C</p>
<p class="text-sm text-gray-400">情绪过热区域</p>
</div>
</div>
</div>
</div>
</div>
<!-- Executive Summary -->
<div class="container mx-auto px-6 py-16">
<div class="card card-hover bg-gradient-to-br from-slate-800 to-slate-900 shadow-2xl">
<div class="card-body p-8">
<h2 class="card-title text-3xl font-bold mb-6">
<span class="gradient-text">核心观点摘要</span>
<div class="badge badge-warning badge-outline ml-2 animate-pulse">必读</div>
</h2>
<div class="text-lg leading-relaxed space-y-4 text-gray-300">
<p>
<span class="badge badge-primary badge-outline font-bold mr-2">概念本质</span>
<strong class="text-white">短期事件驱动与长期户外经济趋势的错配体</strong>:当前市场热度集中于张家界赛事催化的户外装备主题炒作,但产业链核心驱动力已从单纯的装备销售转向"品牌精神溢价+场景化服务"。
</p>
<p>
<span class="badge badge-secondary badge-outline font-bold mr-2">认知陷阱</span>
概念被过度泛化为企业转型叙事,掩盖了其<strong class="text-white">季节性波动强、品牌护城河分化显著</strong>的真实产业特征。真正具备投资价值的并非"求生"噱头,而是能在品牌心智、渠道粘性、技术壁垒三维度建立优势的头部户外品牌。
</p>
<p>
<span class="badge badge-accent badge-outline font-bold mr-2">预期差</span>
市场<strong class="text-error">高估</strong>了赛事短期刺激,<strong class="text-success">低估</strong>了行业长期消费升级逻辑。预期差在于:三夫户外实为"活动服务商"而非"品牌商",探路者贝尔合作已到期,牧高笛全场景战略才是真逻辑。
</p>
</div>
</div>
</div>
</div>
<!-- Timeline -->
<div class="container mx-auto px-6 py-12">
<h2 class="text-4xl font-bold text-center mb-12">
<span class="gradient-text">概念演化时间轴</span>
</h2>
<div class="timeline">
<div class="timeline-item mb-8" style="animation-delay: 0.1s">
<div class="timeline-start"></div>
<div class="timeline-middle">
<span class="badge badge-primary">2025-06</span>
</div>
<div class="timeline-end card card-hover bg-base-200 shadow-xl max-w-lg">
<div class="card-body">
<h3 class="card-title">政策信号</h3>
<p>特朗普取消阿拉斯加荒野地区钻探保护,"荒野"关键词首次进入政策视野</p>
</div>
</div>
<hr class="bg-primary"/>
</div>
<div class="timeline-item mb-8" style="animation-delay: 0.2s">
<hr class="bg-primary"/>
<div class="timeline-start card card-hover bg-base-200 shadow-xl max-w-lg">
<div class="card-body">
<h3 class="card-title">核心催化</h3>
<p><strong class="text-primary">张家界七星山荒野求生挑战赛</strong>火爆全网,贝尔·格里尔斯点赞</p>
</div>
</div>
<div class="timeline-middle">
<span class="badge badge-secondary">2025-11-13</span>
</div>
<div class="timeline-end"></div>
<hr class="bg-secondary"/>
</div>
<div class="timeline-item mb-8" style="animation-delay: 0.3s">
<hr class="bg-secondary"/>
<div class="timeline-start"></div>
<div class="timeline-middle">
<span class="badge badge-accent">2025-11-13 13:25</span>
</div>
<div class="timeline-end card card-hover bg-base-200 shadow-xl max-w-lg">
<div class="card-body">
<h3 class="card-title">市场异动</h3>
<p>三夫户外<strong class="text-accent">直线涨停</strong>,牧高笛、探路者、浙江自然等冲高</p>
</div>
</div>
</div>
</div>
</div>
<!-- Market Sentiment Dashboard -->
<div class="container mx-auto px-6 py-12">
<h2 class="text-4xl font-bold text-center mb-12">
<span class="gradient-text">市场情绪仪表盘</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="card card-hover bg-base-200 shadow-xl">
<div class="card-body">
<h3 class="card-title text-center">情绪指标</h3>
<div id="sentimentChart" class="h-64 my-4"></div>
<div class="text-center mt-4">
<span class="text-2xl font-bold text-error">92°C</span>
<p class="text-sm text-gray-400">过热区域,散户情绪亢奋</p>
</div>
</div>
</div>
<div class="card card-hover bg-base-200 shadow-xl">
<div class="card-body">
<h3 class="card-title text-center">资金流向</h3>
<div id="fundFlowChart" class="h-64 my-4"></div>
<div class="grid grid-cols-2 gap-4 mt-4">
<div class="text-center">
<span class="text-xl font-bold text-success">+3.2亿</span>
<p class="text-sm text-gray-400">主力资金</p>
</div>
<div class="text-center">
<span class="text-xl font-bold text-error">61%</span>
<p class="text-sm text-gray-400">机构卖出占比</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Core Companies Table -->
<div class="container mx-auto px-6 py-12">
<h2 class="text-4xl font-bold text-center mb-12">
<span class="gradient-text">核心标的深度剖析</span>
</h2>
<div class="overflow-x-auto rounded-box shadow-2xl">
<table class="table table-zebra w-full">
<thead class="bg-gradient-to-r from-primary to-secondary">
<tr>
<th class="text-white font-bold">公司名称</th>
<th class="text-white font-bold">业务结构</th>
<th class="text-white font-bold">核心优势</th>
<th class="text-white font-bold">潜在风险</th>
<th class="text-white font-bold">逻辑纯度</th>
<th class="text-white font-bold">操作建议</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-bold text-primary">牧高笛</td>
<td>
<div class="badge badge-outline">ODM 70%</div>
<div class="badge badge-primary ml-1">自主品牌</div>
</td>
<td class="text-sm">品牌精神营销强研发投入4.2%</td>
<td class="text-sm text-error">ODM拖累毛利率库存周转慢</td>
<td><div class="badge badge-primary">⭐⭐⭐⭐⭐ 最纯</div></td>
<td><div class="badge badge-success">重点关注</div></td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-bold text-secondary">探路者</td>
<td>
<div class="badge badge-outline">服装60%</div>
<div class="badge badge-secondary">鞋品25%</div>
</td>
<td class="text-sm">极地科技背书GORE-TEX授权</td>
<td class="text-sm text-error">贝尔合作到期,应收账款高</td>
<td><div class="badge badge-secondary">⭐⭐⭐⭐ 次纯</div></td>
<td><div class="badge badge-warning">谨慎验证</div></td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-bold text-accent">三夫户外</td>
<td>
<div class="badge badge-accent">赛事35%</div>
<div class="badge badge-outline">零售40%</div>
</td>
<td class="text-sm">唯一赛事运营商社群复购42%</td>
<td class="text-sm text-error">零售亏损负债率58%</td>
<td><div class="badge badge-accent">⭐⭐⭐ 服务商</div></td>
<td><div class="badge badge-info">逻辑不同</div></td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-bold text-info">浙江自然</td>
<td>
<div class="badge badge-info">代工50%</div>
<div class="badge badge-outline">保温箱包30%</div>
</td>
<td class="text-sm">TPU技术壁垒优质客户结构</td>
<td class="text-sm text-error">无品牌溢价,汇率风险</td>
<td><div class="badge badge-info">⭐⭐⭐ 技术强</div></td>
<td><div class="badge badge-success">材料核心</div></td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-bold text-gray-400">祥源文旅</td>
<td>
<div class="badge badge-outline">景区运营100%</div>
</td>
<td class="text-sm">掌握张家界核心资源,现金流稳定</td>
<td class="text-sm text-error">无装备基因,纯属导流</td>
<td><div class="badge badge-ghost">⭐ 纯蹭热点</div></td>
<td><div class="badge badge-error">规避</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Detailed Analysis Cards -->
<div class="container mx-auto px-6 py-12">
<h2 class="text-4xl font-bold text-center mb-12">
<span class="gradient-text">真假逻辑大辩论</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="card card-hover bg-gradient-to-br from-red-900 to-red-800 border-2 border-red-500 risk-glow">
<div class="card-body">
<h3 class="card-title text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
证伪点1三夫户外涨停逻辑偏差
</h3>
<p class="text-red-200 mt-4">
新闻称因"户外露营概念"涨停,但路演显示其<strong class="text-white">主营业务是"组织户外活动赛事团建项目"占比35%</strong>装备销售仅占25%。涨停更可能是<strong class="text-yellow-300">赛事运营估值重构</strong>PE 15倍→PS 5倍而非装备销量预期。市场误将"服务商"当"品牌商"炒作。
</p>
</div>
</div>
<div class="card card-hover bg-gradient-to-br from-red-900 to-red-800 border-2 border-red-500">
<div class="card-body">
<h3 class="card-title text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
证伪点2探路者贝尔关联已失效
</h3>
<p class="text-red-200 mt-4">
关联原因称探路者"曾为《跟着贝尔去冒险》提供装备"但路演未提及2025年合作状态。<strong class="text-yellow-300">Discovery Expedition品牌授权已于2024年底到期</strong>当前探路者主品牌无贝尔IP绑定。市场基于<strong class="text-white">过时信息交易</strong>,存在预期落空风险。
</p>
</div>
</div>
<div class="card card-hover bg-gradient-to-br from-green-900 to-green-800 border-2 border-green-500">
<div class="card-body">
<h3 class="card-title text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
验证点:牧高笛全场景战略
</h3>
<p class="text-green-200 mt-4">
路演中"徳爷到访长白山"虽未直接关联牧高笛,但公司<strong class="text-yellow-300">产品线覆盖-20℃至+40℃全温域</strong>与冬季露营趋势高度契合。其2025年Q3营收同比增长31%,其中<strong class="text-white">自主品牌增速达45%</strong>,验证品牌升级逻辑。
</p>
</div>
</div>
</div>
</div>
<!-- Risk Analysis -->
<div class="container mx-auto px-6 py-12">
<h2 class="text-4xl font-bold text-center mb-12">
<span class="gradient-text">风险挑战矩阵</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="card card-hover bg-base-200 shadow-xl">
<div class="card-body">
<h3 class="card-title text-error">技术风险</h3>
<p class="text-sm mt-2">轻量化与保暖性的不可能三角:-20℃以下环境无法同时满足轻量化、高保暖、压缩性</p>
<div class="progress progress-error mt-4 h-2">
<div class="progress-bar w-4/5"></div>
</div>
<p class="text-xs text-gray-400 mt-2">风险等级:高</p>
</div>
</div>
<div class="card card-hover bg-base-200 shadow-xl">
<div class="card-body">
<h3 class="card-title text-warning">商业化风险</h3>
<p class="text-sm mt-2">场景伪需求与复购率陷阱装备属耐用品行业平均复购率仅18%</p>
<div class="progress progress-warning mt-4 h-2">
<div class="progress-bar w-3/4"></div>
</div>
<p class="text-xs text-gray-400 mt-2">风险等级:中高</p>
</div>
</div>
<div class="card card-hover bg-base-200 shadow-xl">
<div class="card-body">
<h3 class="card-title text-info">政策风险</h3>
<p class="text-sm mt-2">环保标准提升无氟防水剂等认证增加成本5-8%</p>
<div class="progress progress-info mt-4 h-2">
<div class="progress-bar w-1/2"></div>
</div>
<p class="text-xs text-gray-400 mt-2">风险等级:中</p>
</div>
</div>
<div class="card card-hover bg-base-200 shadow-xl">
<div class="card-body">
<h3 class="card-title text-error">信息风险</h3>
<p class="text-sm mt-2">时间线错乱与概念偷换路演95%指企业转型仅5%指户外活动</p>
<div class="progress progress-error mt-4 h-2">
<div class="progress-bar w-full"></div>
</div>
<p class="text-xs text-gray-400 mt-2">风险等级:极高</p>
</div>
</div>
</div>
</div>
<!-- Investment Recommendation -->
<div class="container mx-auto px-6 py-12">
<div class="card card-hover bg-gradient-to-br from-sky-900 to-blue-900 shadow-2xl border-2 border-sky-500">
<div class="card-body p-8">
<h2 class="card-title text-3xl font-bold mb-6">
<span class="gradient-text">综合结论与投资启示</span>
<div class="badge badge-lg badge-warning ml-2 animate-pulse">终极建议</div>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-bold text-sky-300 mb-4">概念阶段判断</h3>
<p class="text-sky-100 mb-4">
处于<strong class="text-yellow-300">"主题炒作"向"基本面分化"过渡期</strong>情绪顶点半个月预计2025年12月-2026年1月随冬季露营数据披露将出现"证伪潮"。
</p>
<ul class="list-disc list-inside text-sky-100 space-y-2">
<li><strong class="text-error">纯炒作标的</strong>(祥源文旅、*ST张股将回落至启动前</li>
<li><strong class="text-success">基本面过硬标的</strong>(牧高笛、浙江自然)走出独立行情</li>
<li><strong class="text-warning">逻辑混淆标的</strong>(探路者、三夫户外)面临估值修正</li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold text-sky-300 mb-4">投资优先级</h3>
<div class="space-y-4">
<div class="card bg-sky-800/30">
<div class="card-body p-4">
<h4 class="font-bold text-success">1. 上游材料商</h4>
<p class="text-sm text-sky-100">浙江自然TPU技术壁垒毛利率38%</p>
</div>
</div>
<div class="card bg-sky-800/30">
<div class="card-body p-4">
<h4 class="font-bold text-success">2. 下游服务商</h4>
<p class="text-sm text-sky-100">三夫户外赛事运营毛利率55%,现金流前置)</p>
</div>
</div>
<div class="card bg-sky-800/30">
<div class="card-body p-4">
<h4 class="font-bold text-warning">3. 品牌商</h4>
<p class="text-sm text-sky-100">牧高笛(需跟踪复购率>25%</p>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-warning mt-8">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg>
<span class="font-bold">若贝尔IP无实质合作落地2026年春节前减仓所有户外装备股保留服务化转型成功者</span>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="container mx-auto px-6 py-12">
<h2 class="text-4xl font-bold text-center mb-12">
<span class="gradient-text">概念成分股全景表</span>
</h2>
<div class="table-responsive rounded-box shadow-2xl">
<table class="table w-full table-compact">
<thead class="bg-gradient-to-r from-blue-600 to-purple-600 sticky top-0">
<tr>
<th class="text-white font-bold">股票代码</th>
<th class="text-white font-bold">股票名称</th>
<th class="text-white font-bold">分类</th>
<th class="text-white font-bold">核心业务</th>
<th class="text-white font-bold">产业链位置</th>
<th class="text-white font-bold">关联逻辑</th>
<th class="text-white font-bold">信息来源</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-primary font-bold">603908</td>
<td class="font-bold text-primary">牧高笛</td>
<td><span class="badge badge-primary badge-outline">户外装备</span></td>
<td class="text-sm">为露营和徒步登山爱好者提供高性能户外产品</td>
<td class="text-sm">覆盖全场景户外需求</td>
<td class="text-sm">秉持"向野而生"的玩家精神,激励年轻人探索山野</td>
<td class="text-sm">公司战略</td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-secondary font-bold">605080</td>
<td class="font-bold text-secondary">浙江自然</td>
<td><span class="badge badge-secondary badge-outline">户外装备</span></td>
<td class="text-sm">充气床垫、户外防水/保温箱包等研发销售</td>
<td class="text-sm">中游制造</td>
<td class="text-sm">产品广泛用于露营保温场景</td>
<td class="text-sm">互动平台</td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-accent font-bold">300005</td>
<td class="font-bold text-accent">探路者</td>
<td><span class="badge badge-accent badge-outline">户外装备</span></td>
<td class="text-sm">为南北极考察队提供专业装备,曾为贝尔节目提供装备</td>
<td class="text-sm">品牌+制造</td>
<td class="text-sm">Discovery品牌曾为贝尔节目提供装备<span class="text-error">注意:合作已到期</span></td>
<td class="text-sm">互动/公开资料</td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-info font-bold">001238</td>
<td class="font-bold text-info">浙江正特</td>
<td><span class="badge badge-info badge-outline">户外装备</span></td>
<td class="text-sm">遮阳制品、户外休闲家具</td>
<td class="text-sm">营地搭建场景</td>
<td class="text-sm">产品用于荒野求生中的营地搭建、遮阳避雨</td>
<td class="text-sm">互动平台</td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-warning font-bold">002489</td>
<td class="font-bold text-warning">浙江永强</td>
<td><span class="badge badge-warning badge-outline">户外装备</span></td>
<td class="text-sm">户外休闲家具、遮阳伞、帐篷</td>
<td class="text-sm">出口为主</td>
<td class="text-sm">产品远销海外,覆盖露营场景</td>
<td class="text-sm">互动平台</td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-success font-bold">002780</td>
<td class="font-bold text-success">三夫户外</td>
<td><span class="badge badge-success badge-outline">户外装备</span></td>
<td class="text-sm"><strong class="text-white">组织户外活动赛事团建项目为主营业务</strong></td>
<td class="text-sm">下游服务</td>
<td class="text-sm"><span class="text-success">赛事运营直接受益</span></td>
<td class="text-sm">互动平台</td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-ghost font-bold"></td>
<td class="font-bold text-ghost">创源股份</td>
<td><span class="badge badge-ghost badge-outline">户外装备</span></td>
<td class="text-sm">探索户外产品和露营产品</td>
<td class="text-sm">试水阶段</td>
<td class="text-sm"><span class="text-error">极少量销售,未形成规模</span></td>
<td class="text-sm">互动平台</td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-error font-bold">000430</td>
<td class="font-bold text-error">*ST张股</td>
<td><span class="badge badge-error badge-outline">景区</span></td>
<td class="text-sm">张家界"七星山-骆驼杯"国际级荒野求生挑战赛主办方</td>
<td class="text-sm">场景提供方</td>
<td class="text-sm">事件直接受益者,但仅限一次性活动</td>
<td class="text-sm">公开资料</td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-purple-500 font-bold">600576</td>
<td class="font-bold text-purple-500">祥源文旅</td>
<td><span class="badge badge-outline">景区</span></td>
<td class="text-sm">运营张家界黄龙洞景区和百龙天梯</td>
<td class="text-sm">导流概念</td>
<td class="text-sm"><span class="text-error">无装备制造基因,纯属蹭热点</span></td>
<td class="text-sm">公开资料</td>
</tr>
<tr class="hover:bg-base-200 transition-colors">
<td class="font-mono text-cyan-500 font-bold">688039</td>
<td class="font-bold text-cyan-500">当虹科技</td>
<td><span class="badge badge-outline">技术支持</span></td>
<td class="text-sm">视频直播产品(在线转码、多画面监测等)</td>
<td class="text-sm">技术保障</td>
<td class="text-sm">为赛事直播提供技术支持,间接关联</td>
<td class="text-sm">互动平台</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Footer -->
<footer class="bg-base-300 py-8 mt-16">
<div class="container mx-auto px-6 text-center">
<p class="text-gray-400">
本报告基于2025年11月13日事件驱动分析数据来源于公开新闻、路演纪要及公司互动平台
</p>
<p class="text-gray-500 text-sm mt-2">
⚠️ 风险提示:概念处于过热阶段,存在较大不确定性,投资需谨慎
</p>
</div>
</footer>
<script>
// Initialize charts
document.addEventListener('DOMContentLoaded', function() {
// Sentiment Chart
const sentimentChart = echarts.init(document.getElementById('sentimentChart'));
sentimentChart.setOption({
backgroundColor: 'transparent',
series: [{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
radius: '90%',
center: ['50%', '70%'],
splitNumber: 5,
axisLine: {
lineStyle: {
width: 20,
color: [
[0.2, '#10b981'],
[0.4, '#f59e0b'],
[0.6, '#ef4444'],
[0.8, '#7c3aed'],
[1, '#c084fc']
]
}
},
pointer: {
itemStyle: {
color: '#f87171'
},
width: 8,
length: '60%'
},
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
title: { show: false },
detail: {
valueAnimation: true,
formatter: '{value}°C',
color: '#f87171',
fontSize: 24,
fontWeight: 'bold',
offsetCenter: [0, '0%']
},
data: [{ value: 92 }]
}]
});
// Fund Flow Chart
const fundFlowChart = echarts.init(document.getElementById('fundFlowChart'));
fundFlowChart.setOption({
backgroundColor: 'transparent',
tooltip: { trigger: 'item' },
series: [{
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'],
data: [
{ value: 39, name: '机构卖出', itemStyle: { color: '#ef4444' } },
{ value: 61, name: '主力买入', itemStyle: { color: '#10b981' } }
],
label: {
color: '#e2e8f0',
fontSize: 12
},
labelLine: {
lineStyle: { color: '#64748b' }
}
}]
});
// Number animation
const animateNumbers = () => {
const numbers = document.querySelectorAll('.number-animate');
numbers.forEach(num => {
const finalValue = parseFloat(num.textContent);
const isPercentage = num.textContent.includes('%');
const hasUnit = num.textContent.includes('亿') || num.textContent.includes('°C');
let current = 0;
const increment = finalValue / 50;
const timer = setInterval(() => {
current += increment;
if (current >= finalValue) {
num.textContent = num.textContent;
clearInterval(timer);
} else {
if (isPercentage) {
num.textContent = current.toFixed(1) + '%';
} else if (hasUnit) {
num.textContent = current.toFixed(1) + (num.textContent.includes('亿') ? '亿' : '°C');
} else {
num.textContent = Math.floor(current);
}
}
}, 30);
});
};
// Intersection Observer for animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
if (entry.target.querySelector('.number-animate')) {
animateNumbers();
}
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.card-hover').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
// Responsive chart resize
window.addEventListener('resize', () => {
sentimentChart.resize();
fundFlowChart.resize();
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,693 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0c1027 0%, #1a0638 100%);
min-height: 100vh;
}
.orbitron {
font-family: 'Orbitron', sans-serif;
}
.hero-bg {
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.2) 0%, transparent 50%),
linear-gradient(135deg, #0c1027 0%, #1a0638 100%);
position: relative;
overflow: hidden;
}
.hero-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, #eee, transparent),
radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 90px 40px, #fff, transparent);
background-repeat: repeat;
background-size: 150px 150px;
opacity: 0.15;
animation: twinkle 8s infinite linear;
}
@keyframes twinkle {
0% { opacity: 0.1; }
50% { opacity: 0.2; }
100% { opacity: 0.1; }
}
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.timeline-line {
background: linear-gradient(to bottom, #00d4ff, #ff00ff);
}
.text-gradient {
background: linear-gradient(135deg, #00d4ff, #ff00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pulse-glow {
animation: pulseGlow 2s infinite alternate;
}
@keyframes pulseGlow {
0% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
100% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.6); }
}
.table-responsive table {
white-space: normal;
}
@media (max-width: 768px) {
.table-responsive td, .table-responsive th {
padding: 0.75rem 0.5rem;
font-size: 0.875rem;
}
}
</style>
</head>
<body class="text-white">
<!-- Hero Section -->
<div class="hero min-h-[700px] hero-bg">
<div class="hero-content text-center">
<div class="max-w-6xl z-10 relative">
<div class="badge badge-primary badge-lg mb-6 animate-pulse">即将首飞 · 2025年11月</div>
<h1 class="text-5xl md:text-7xl font-black orbitron mb-6 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 bg-clip-text text-transparent">
朱雀三号
</h1>
<p class="text-2xl md:text-3xl font-bold mb-4 text-gradient">全球首款全不锈钢液氧甲烷可回收火箭</p>
<p class="text-lg md:text-xl text-gray-300 mb-8 max-w-4xl mx-auto leading-relaxed">
中国商业航天革命性突破对标SpaceX猎鹰9号目标将发射成本降至<span class="text-cyan-400 font-bold">2万元/kg</span>以内支撑GW/千帆星座高密度组网
</p>
<!-- 核心指标卡片 -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mt-8">
<div class="glass-card rounded-xl p-4 md:p-6 pulse-glow">
<div class="text-3xl md:text-4xl font-black text-cyan-400">18.3吨</div>
<div class="text-sm md:text-base text-gray-400">回收状态运力</div>
</div>
<div class="glass-card rounded-xl p-4 md:p-6">
<div class="text-3xl md:text-4xl font-black text-purple-400">21.3吨</div>
<div class="text-sm md:text-base text-gray-400">一次性运力</div>
</div>
<div class="glass-card rounded-xl p-4 md:p-6">
<div class="text-3xl md:text-4xl font-black text-pink-400">66米</div>
<div class="text-sm md:text-base text-gray-400">全箭长度</div>
</div>
<div class="glass-card rounded-xl p-4 md:p-6">
<div class="text-3xl md:text-4xl font-black text-emerald-400">570吨</div>
<div class="text-sm md:text-base text-gray-400">起飞重量</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心逻辑摘要 -->
<section class="container mx-auto px-4 py-16">
<div class="text-center mb-12">
<h2 class="text-4xl md:text-5xl font-bold orbitron mb-4">核心投资逻辑</h2>
<p class="text-gray-400 text-lg max-w-3xl mx-auto">朱雀三号概念正处于"技术验证末期→商业化启动期"的质变拐点</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="card glass-card p-8 rounded-2xl hover:scale-105 transition-transform duration-300">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center mr-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-xl font-bold">技术突破</h3>
</div>
<p class="text-gray-300">全球首款全不锈钢液氧甲烷火箭10公里级回收试验成功九机并联动力系统验证完成核心技术已闭环</p>
</div>
<div class="card glass-card p-8 rounded-2xl hover:scale-105 transition-transform duration-300">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
</div>
<h3 class="text-xl font-bold">政策刚需</h3>
</div>
<p class="text-gray-300">GW星座和千帆星座2025年前需部署近千颗卫星运力缺口超10倍。国家大基金9亿元注资纳入新基建主通道</p>
</div>
<div class="card glass-card p-8 rounded-2xl hover:scale-105 transition-transform duration-300">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 flex items-center justify-center mr-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold">成本革命</h3>
</div>
<p class="text-gray-300">目标2027年将发射成本降至3000元/kg降幅近90%。全不锈钢箭体+液氧甲烷动力,商业化模型极具颠覆性</p>
</div>
</div>
</section>
<!-- 事件时间轴 -->
<section class="container mx-auto px-4 py-16">
<h2 class="text-3xl md:text-4xl font-bold orbitron text-center mb-12">关键事件时间轴</h2>
<div class="relative">
<div class="timeline-line absolute left-8 md:left-1/2 w-0.5 h-full transform -translate-x-1/2"></div>
<div class="space-y-8">
<div class="flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/2 md:pr-8 md:text-right"></div>
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center z-10 mb-4 md:mb-0">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<div class="w-full md:w-1/2 md:pl-8">
<div class="glass-card rounded-xl p-6">
<div class="text-sm text-gray-400 mb-1">2025年11月计划</div>
<h3 class="text-xl font-bold mb-2">朱雀三号首飞</h3>
<p class="text-gray-300">执行入轨发射及一子级回收任务,若成功将成为中国首款投入运营的可复用火箭</p>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/2 md:pr-8 md:text-right">
<div class="glass-card rounded-xl p-6">
<div class="text-sm text-gray-400 mb-1">2025年10月</div>
<h3 class="text-xl font-bold mb-2">加注合练及静态点火</h3>
<p class="text-gray-300">朱雀三号遥一火箭完成首飞前"彩排",进入最后准备阶段</p>
</div>
</div>
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center z-10 mb-4 md:mb-0">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<div class="w-full md:w-1/2 md:pl-8"></div>
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/2 md:pr-8 md:text-right"></div>
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 flex items-center justify-center z-10 mb-4 md:mb-0">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg>
</div>
<div class="w-full md:w-1/2 md:pl-8">
<div class="glass-card rounded-xl p-6">
<div class="text-sm text-gray-400 mb-1">2025年6月</div>
<h3 class="text-xl font-bold mb-2">一级动力系统试车</h3>
<p class="text-gray-300">完成国内最大规模九机并联地面热试车,为迄今自动化水平最高的动力系统试验</p>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/2 md:pr-8 md:text-right">
<div class="glass-card rounded-xl p-6">
<div class="text-sm text-gray-400 mb-1">2024年7月</div>
<h3 class="text-xl font-bold mb-2">启动IPO辅导</h3>
<p class="text-gray-300">蓝箭航天启动科创板上市辅导,中金公司担任辅导机构</p>
</div>
</div>
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 flex items-center justify-center z-10 mb-4 md:mb-0">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</div>
<div class="w-full md:w-1/2 md:pl-8"></div>
</div>
</div>
</div>
</section>
<!-- 产业链分析 -->
<section class="container mx-auto px-4 py-16">
<h2 class="text-3xl md:text-4xl font-bold orbitron text-center mb-12">产业链深度剖析</h2>
<div class="mb-12">
<div class="glass-card rounded-2xl p-8">
<h3 class="text-2xl font-bold mb-6 text-center">产业链图谱</h3>
<div class="grid md:grid-cols-4 gap-4 text-center">
<div class="bg-gradient-to-br from-blue-600 to-blue-800 rounded-xl p-6">
<h4 class="font-bold text-lg mb-2">上游材料</h4>
<p class="text-sm text-blue-100">不锈钢板材、高温合金、3D打印材料</p>
</div>
<div class="bg-gradient-to-br from-purple-600 to-purple-800 rounded-xl p-6">
<h4 class="font-bold text-lg mb-2">核心部件</h4>
<p class="text-sm text-purple-100">发动机、阀门、传感器、结构件</p>
</div>
<div class="bg-gradient-to-br from-pink-600 to-pink-800 rounded-xl p-6">
<h4 class="font-bold text-lg mb-2">总装集成</h4>
<p class="text-sm text-pink-100">蓝箭航天(朱雀三号总装)</p>
</div>
<div class="bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-xl p-6">
<h4 class="font-bold text-lg mb-2">发射服务</h4>
<p class="text-sm text-emerald-100">卫星互联网星座GW/千帆)</p>
</div>
</div>
</div>
</div>
<!-- 核心公司分析 -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="card glass-card p-6 rounded-xl hover:scale-105 transition-transform duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">斯瑞新材</h3>
<div class="badge badge-primary">供应链</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">供应产品</div>
<div class="font-semibold">发动机推力室内壁</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">技术壁垒</div>
<div class="text-sm">高温合金材料垄断性</div>
</div>
<div class="flex justify-between items-center">
<span class="text-emerald-400 font-semibold">收入弹性: 高</span>
<span class="text-xs text-gray-400">单发200-300万</span>
</div>
</div>
<div class="card glass-card p-6 rounded-xl hover:scale-105 transition-transform duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">铂力特</h3>
<div class="badge badge-primary">供应链</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">供应产品</div>
<div class="font-semibold">金属3D打印部件</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">技术壁垒</div>
<div class="text-sm">增材制造技术稀缺性</div>
</div>
<div class="flex justify-between items-center">
<span class="text-amber-400 font-semibold">收入弹性: 中</span>
<span class="text-xs text-gray-400">毛利率40%+</span>
</div>
</div>
<div class="card glass-card p-6 rounded-xl hover:scale-105 transition-transform duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">超捷股份</h3>
<div class="badge badge-primary">供应链</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">供应产品</div>
<div class="font-semibold">一级尾段结构件</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">技术壁垒</div>
<div class="text-sm">结构强度与减重平衡</div>
</div>
<div class="flex justify-between items-center">
<span class="text-emerald-400 font-semibold">收入弹性: 高</span>
<span class="text-xs text-gray-400">单发500-800万</span>
</div>
</div>
<div class="card glass-card p-6 rounded-xl hover:scale-105 transition-transform duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">高华科技</h3>
<div class="badge badge-primary">供应链</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">供应产品</div>
<div class="font-semibold">高可靠性传感器</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">技术壁垒</div>
<div class="text-sm">宇航级认证周期长</div>
</div>
<div class="flex justify-between items-center">
<span class="text-amber-400 font-semibold">收入弹性: 中</span>
<span class="text-xs text-gray-400">单发100-200万</span>
</div>
</div>
<div class="card glass-card p-6 rounded-xl hover:scale-105 transition-transform duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">金风科技</h3>
<div class="badge badge-secondary">参股</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">持股比例</div>
<div class="font-semibold">4.9953%</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">特点</div>
<div class="text-sm">纯财务投资,无业务协同</div>
</div>
<div class="flex justify-between items-center">
<span class="text-red-400 font-semibold">催化力度: 弱</span>
<span class="text-xs text-gray-400">上市退出周期长</span>
</div>
</div>
<div class="card glass-card p-6 rounded-xl hover:scale-105 transition-transform duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">深桑达A</h3>
<div class="badge badge-accent">项目承建</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">承建项目</div>
<div class="font-semibold">可复用火箭产业园</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-400 mb-1">特点</div>
<div class="text-sm">基建订单毛利低,一次性收入</div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-400 font-semibold">持续性: 弱</span>
<span class="text-xs text-gray-400">毛利10-15%</span>
</div>
</div>
</div>
</section>
<!-- 股票数据完整表格 -->
<section class="container mx-auto px-4 py-16">
<h2 class="text-3xl md:text-4xl font-bold orbitron text-center mb-12">相关上市公司全景</h2>
<div class="glass-card rounded-2xl overflow-hidden">
<div class="table-responsive">
<table class="table w-full">
<thead class="bg-gradient-to-r from-blue-600 to-purple-600">
<tr>
<th class="text-white font-bold">公司名称</th>
<th class="text-white font-bold">分类</th>
<th class="text-white font-bold">相关性描述</th>
<th class="text-white font-bold">信源</th>
<th class="text-white font-bold">逻辑强度</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">斯瑞新材</td>
<td><div class="badge badge-primary">供应链</div></td>
<td class="text-sm">为朱雀三号提供液体火箭发动机推力室内壁产品2023年直接投资2000万元</td>
<td class="text-xs">互动/投资</td>
<td><div class="badge badge-success"></div></td>
</tr>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">铂力特</td>
<td><div class="badge badge-primary">供应链</div></td>
<td class="text-sm">核心合作伙伴金属3D打印技术帮助研制并批产多型零部件</td>
<td class="text-xs">官微</td>
<td><div class="badge badge-success"></div></td>
</tr>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">超捷股份</td>
<td><div class="badge badge-primary">供应链</div></td>
<td class="text-sm">重要核心供应商,提供朱雀三号一级动力实验一级尾段</td>
<td class="text-xs">互动</td>
<td><div class="badge badge-success"></div></td>
</tr>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">高华科技</td>
<td><div class="badge badge-primary">供应链</div></td>
<td class="text-sm">高可靠性传感器产品将应用于朱雀三号火箭</td>
<td class="text-xs">互动</td>
<td><div class="badge badge-success"></div></td>
</tr>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">金风科技</td>
<td><div class="badge badge-secondary">参股</div></td>
<td class="text-sm">对蓝箭航天持股比例为4.9953%</td>
<td class="text-xs">互动</td>
<td><div class="badge badge-ghost"></div></td>
</tr>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">鲁信创投</td>
<td><div class="badge badge-secondary">参股</div></td>
<td class="text-sm">通过3个投资主体合计持有蓝箭航天0.89%股权</td>
<td class="text-xs">互动</td>
<td><div class="badge badge-ghost"></div></td>
</tr>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">张江高科</td>
<td><div class="badge badge-secondary">参股</div></td>
<td class="text-sm">通过张江燧锋基金投资蓝箭航天1.5亿元</td>
<td class="text-xs">互动</td>
<td><div class="badge badge-ghost"></div></td>
</tr>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">航天科技</td>
<td><div class="badge badge-primary">供应链</div></td>
<td class="text-sm">深度进入蓝箭航天供应链,覆盖谷木雀等主力型号</td>
<td class="text-xs">调研</td>
<td><div class="badge badge-success"></div></td>
</tr>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">深桑达A</td>
<td><div class="badge badge-accent">项目承建</div></td>
<td class="text-sm">2024年新承建蓝箭航天可复用火箭产业园项目</td>
<td class="text-xs">年报</td>
<td><div class="badge badge-warning"></div></td>
</tr>
<tr class="hover:bg-white hover:bg-opacity-5">
<td class="font-semibold">豪能股份</td>
<td><div class="badge badge-primary">供应链</div></td>
<td class="text-sm">航天高端特种阀门、箭体结构件,已与蓝箭航天完成项目定点</td>
<td class="text-xs">互动</td>
<td><div class="badge badge-success"></div></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 预期差分析 -->
<section class="container mx-auto px-4 py-16">
<h2 class="text-3xl md:text-4xl font-bold orbitron text-center mb-12">市场预期差分析</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="card glass-card p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-red-400">市场普遍认知</h3>
<ul class="space-y-4 text-gray-300">
<li class="flex items-start">
<svg class="w-6 h-6 text-red-500 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>朱雀三号2025年11月首飞成败在此一举</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-red-500 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>不锈钢技术路线是创新优势</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-red-500 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>成本对标猎鹰9号竞争力强</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-red-500 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>关联公司多为供应链受益者</span>
</li>
</ul>
</div>
<div class="card glass-card p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6 text-emerald-400">路演揭示的潜在现实</h3>
<ul class="space-y-4 text-gray-300">
<li class="flex items-start">
<svg class="w-6 h-6 text-emerald-500 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>时间存在模糊性2025年三季度也可能首发</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-emerald-500 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>不锈钢箭体需验证高空再入结构疲劳寿命,技术风险未充分定价</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-emerald-500 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>当前朱雀二号成本约1.17万元/kg成本下降非线性商业化模型尚未跑通</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-emerald-500 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>发动机成本仅占整箭30%,上游供应商毛利空间可能有限</span>
</li>
</ul>
</div>
</div>
</section>
<!-- 风险与挑战 -->
<section class="container mx-auto px-4 py-16">
<h2 class="text-3xl md:text-4xl font-bold orbitron text-center mb-12">潜在风险与挑战</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="card bg-gradient-to-br from-red-900 to-red-700 bg-opacity-30 border border-red-500 rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 flex items-center">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
技术风险
</h3>
<ul class="space-y-2 text-sm text-gray-200">
<li>• 不锈钢箭体热防护能力待验证</li>
<li>• 九机并联可靠性存在不确定性</li>
<li>• 回收精准度与落区安全管控</li>
</ul>
</div>
<div class="card bg-gradient-to-br from-amber-900 to-amber-700 bg-opacity-30 border border-amber-500 rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 flex items-center">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"></path>
</svg>
商业化风险
</h3>
<ul class="space-y-2 text-sm text-gray-200">
<li>• 成本模型脆弱与SpaceX竞争激烈</li>
<li>• 发射频率受工位资源限制</li>
<li>• 发射保险费率较高影响盈利</li>
</ul>
</div>
<div class="card bg-gradient-to-br from-purple-900 to-purple-700 bg-opacity-30 border border-purple-500 rounded-2xl p-6">
<h3 class="text-xl font-bold mb-4 flex items-center">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
政策与竞争风险
</h3>
<ul class="space-y-2 text-sm text-gray-200">
<li>• 技术同质化与价格内卷化</li>
<li>• 发射许可审批周期长</li>
<li>• 数据安全审查风险</li>
</ul>
</div>
</div>
</section>
<!-- 投资建议 -->
<section class="container mx-auto px-4 py-16">
<div class="glass-card rounded-2xl p-8 md:p-12">
<h2 class="text-3xl md:text-4xl font-bold orbitron text-center mb-8">综合投资结论</h2>
<div class="text-center mb-8">
<div class="badge badge-lg badge-primary mb-4">概念阶段:技术验证→商业化启动过渡期</div>
<p class="text-lg text-gray-300 max-w-4xl mx-auto">
朱雀三号概念已从纯主题投资进入"技术验证驱动+订单预期驱动"阶段。2025年11月首飞是从0到1的质变节点但商业化从1到N仍需2-3年。
</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-bold mb-6 text-emerald-400">最具投资价值方向</h3>
<div class="space-y-4">
<div class="card bg-black bg-opacity-30 rounded-xl p-4">
<div class="flex items-center justify-between">
<span class="font-semibold">斯瑞新材</span>
<span class="badge badge-success">胜率>赔率</span>
</div>
<p class="text-sm text-gray-300 mt-2">发动机推力室内壁材料垄断,无论朱雀成败,液氧甲烷路线已定,需求刚性</p>
</div>
<div class="card bg-black bg-opacity-30 rounded-xl p-4">
<div class="flex items-center justify-between">
<span class="font-semibold">铂力特</span>
<span class="badge badge-success">胜率>赔率</span>
</div>
<p class="text-sm text-gray-300 mt-2">金属3D打印技术稀缺在商业航天小批量模式下毛利率稳定</p>
</div>
<div class="card bg-black bg-opacity-30 rounded-xl p-4">
<div class="flex items-center justify-between">
<span class="font-semibold">高华科技</span>
<span class="badge badge-warning">赔率>胜率</span>
</div>
<p class="text-sm text-gray-300 mt-2">高可靠性传感器,首飞成功后将批量应用,星座组网需百发量级,弹性巨大</p>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold mb-6 text-red-400">建议回避方向</h3>
<div class="space-y-4">
<div class="card bg-black bg-opacity-30 rounded-xl p-4">
<div class="flex items-center justify-between">
<span class="font-semibold">金风科技/鲁信创投</span>
<span class="badge badge-ghost">纯参股</span>
</div>
<p class="text-sm text-gray-300 mt-2">持股比例低且无业务协同股价与蓝箭业绩脱钩仅IPO退出时一次性收益</p>
</div>
</div>
<h3 class="text-2xl font-bold mb-6 mt-8 text-cyan-400">关键跟踪指标</h3>
<ul class="space-y-2 text-sm text-gray-300">
<li class="flex justify-between">
<span>首飞入轨精度</span>
<span class="text-cyan-400">CEP>500米预警</span>
</li>
<li class="flex justify-between">
<span>新签合同金额</span>
<span class="text-cyan-400"><5亿元/年预警</span>
</li>
<li class="flex justify-between">
<span>整箭制造成本</span>
<span class="text-cyan-400">>4亿元/发预警</span>
</li>
<li class="flex justify-between">
<span>竞品首飞时间差</span>
<span class="text-cyan-400"><3个月预警</span>
</li>
</ul>
</div>
</div>
<div class="mt-10 p-6 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl text-center">
<h3 class="text-xl font-bold mb-2">战术建议</h3>
<p class="text-lg font-medium">
当前至首飞前采取"逢调整加仓上游材料,首飞前一周减仓兑现"。若实现入轨+软着陆将开启至少2年的基本面主升浪若仅入轨成功短期利好出尽但长期趋势不改若失利则全线规避等待6个月。
</p>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="py-12 border-t border-gray-800">
<div class="container mx-auto px-4 text-center">
<p class="text-gray-400 mb-4">投资有风险,决策需谨慎</p>
<p class="text-sm text-gray-500">数据源于公开市场及调研信息,仅供参考</p>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,545 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超威半导体AMD - AI芯片第二极的崛起之路</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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%);
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.timeline-item {
position: relative;
padding-left: 40px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #818cf8;
border: 2px solid #e0e7ff;
}
.timeline-line {
position: absolute;
left: 5px;
top: 20px;
bottom: 0;
width: 2px;
background: #e0e7ff;
}
.stats-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.risk-badge {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .8;
}
}
.table-responsive-custom {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
.table-responsive-custom {
font-size: 0.75rem;
}
}
.glow-effect {
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}
.progress-bar {
animation: progress 1.5s ease-in-out;
}
@keyframes progress {
from {
width: 0;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<div class="gradient-bg text-white">
<div class="container mx-auto px-4 py-8">
<div class="flex items-center justify-between">
<div>
<h1 class="text-4xl font-bold mb-2">超威半导体 AMD</h1>
<p class="text-xl opacity-90">AI芯片第二极的崛起之路</p>
</div>
<div class="hidden md:block">
<div class="flex items-center space-x-2">
<i class="ri-cpu-line text-3xl"></i>
<span class="text-2xl font-semibold">NASDAQ: AMD</span>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto px-4 py-8">
<!-- Key Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div class="stats-card rounded-xl p-6 text-center card-hover">
<i class="ri-line-chart-line text-3xl mb-2"></i>
<div class="text-3xl font-bold">120%</div>
<div class="text-sm opacity-90">数据中心业务同比增长</div>
</div>
<div class="stats-card rounded-xl p-6 text-center card-hover">
<i class="ri-money-dollar-circle-line text-3xl mb-2"></i>
<div class="text-3xl font-bold">$50亿+</div>
<div class="text-sm opacity-90">MI300系列年收入预期</div>
</div>
<div class="stats-card rounded-xl p-6 text-center card-hover">
<i class="ri-server-line text-3xl mb-2"></i>
<div class="text-3xl font-bold">52%</div>
<div class="text-sm opacity-90">数据中心业务占比</div>
</div>
<div class="stats-card rounded-xl p-6 text-center card-hover">
<i class="ri-microchip-line text-3xl mb-2"></i>
<div class="text-3xl font-bold">1530亿</div>
<div class="text-sm opacity-90">MI300X晶体管数量</div>
</div>
</div>
<!-- Timeline Section -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="ri-time-line mr-2 text-purple-600"></i>
关键事件时间轴
</h2>
<div class="relative">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="timeline-item">
<div class="flex flex-col sm:flex-row sm:items-center">
<span class="text-purple-600 font-semibold mr-4">2023.12</span>
<div>
<h3 class="font-semibold">"Advancing AI"发布会</h3>
<p class="text-gray-600 text-sm">推出MI300系列纸面性能对标英伟达H100/H200</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="flex flex-col sm:flex-row sm:items-center">
<span class="text-purple-600 font-semibold mr-4">2024.08</span>
<div>
<h3 class="font-semibold">49亿美元收购ZT Systems</h3>
<p class="text-gray-600 text-sm">增强AI系统和集群级解决方案能力</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="flex flex-col sm:flex-row sm:items-center">
<span class="text-purple-600 font-semibold mr-4">2024.Q3</span>
<div>
<h3 class="font-semibold">超强财报发布</h3>
<p class="text-gray-600 text-sm">数据中心业务收入同比暴涨120%上调MI300预期至50亿美元</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="flex flex-col sm:flex-row sm:items-center">
<span class="text-red-600 font-semibold mr-4">2025.04</span>
<div>
<h3 class="font-semibold">地缘政治风险显性化</h3>
<p class="text-gray-600 text-sm">盘前大跌7.2%预计承担8亿美元损失</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="flex flex-col sm:flex-row sm:items-center">
<span class="text-red-600 font-semibold mr-4">2025.08</span>
<div>
<h3 class="font-semibold">地缘政治风险落地</h3>
<p class="text-gray-600 text-sm">同意将中国芯片销售收入的15%上缴美国政府</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Core Logic -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<i class="ri-lightbulb-line mr-2 text-yellow-500"></i>
核心驱动力
</h2>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-purple-100 rounded-lg p-3 mr-3">
<i class="ri-cpu-line text-purple-600"></i>
</div>
<div>
<h3 class="font-semibold">技术突破与产品力</h3>
<p class="text-gray-600 text-sm">Chiplet设计和台积电3D SoIC先进封装打造1530亿晶体管的MI300X</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 rounded-lg p-3 mr-3">
<i class="ri-stack-line text-blue-600"></i>
</div>
<div>
<h3 class="font-semibold">"全栈式"战略布局</h3>
<p class="text-gray-600 text-sm">CPU+GPU+FPGA+DPU完整版图打造开放AI生态</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 rounded-lg p-3 mr-3">
<i class="ri-global-line text-green-600"></i>
</div>
<div>
<h3 class="font-semibold">AI浪潮市场窗口期</h3>
<p class="text-gray-600 text-sm">抓住头部客户替代需求,实现指数级增长</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<i class="ri-bar-chart-2-line mr-2 text-blue-500"></i>
市场情绪与预期差
</h2>
<div class="mb-4">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-medium">乐观程度</span>
<span class="text-sm text-gray-600">75%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-gradient-to-r from-green-400 to-green-600 h-2 rounded-full progress-bar" style="width: 75%"></div>
</div>
</div>
<div class="space-y-3">
<div class="alert alert-success">
<i class="ri-thumb-up-line"></i>
<span>财报数据持续超预期,市场份额快速提升</span>
</div>
<div class="alert alert-warning">
<i class="ri-alert-line"></i>
<span>ROCm软件生态与CUDA存在差距</span>
</div>
<div class="alert alert-error risk-badge">
<i class="ri-error-warning-line"></i>
<span>15%收入上缴,地缘政治成本常态化</span>
</div>
</div>
</div>
</div>
<!-- Industry Chain -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="ri-link mr-2 text-indigo-600"></i>
A股产业链图谱
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="border-2 border-indigo-200 rounded-lg p-4 hover:shadow-lg transition-shadow">
<h3 class="font-bold text-indigo-600 mb-3">上游:设计/制造支撑</h3>
<div class="flex flex-wrap gap-2">
<span class="badge badge-info">EDA/IP: 芯原股份</span>
</div>
</div>
<div class="border-2 border-purple-200 rounded-lg p-4 hover:shadow-lg transition-shadow">
<h3 class="font-bold text-purple-600 mb-3">中游:核心制造</h3>
<div class="grid grid-cols-2 gap-2">
<div class="text-sm">
<span class="font-semibold">封测:</span>
<div class="mt-1">
<span class="badge badge-secondary">通富微电</span>
<span class="badge badge-secondary">华天科技</span>
</div>
</div>
<div class="text-sm">
<span class="font-semibold">PCB:</span>
<div class="mt-1">
<span class="badge badge-secondary">世运电路</span>
<span class="badge badge-secondary">深南电路</span>
</div>
</div>
</div>
</div>
<div class="border-2 border-green-200 rounded-lg p-4 hover:shadow-lg transition-shadow">
<h3 class="font-bold text-green-600 mb-3">下游:应用与集成</h3>
<div class="flex flex-wrap gap-2">
<span class="badge badge-success">服务器: 工业富联</span>
<span class="badge badge-success">AI应用: 岩山科技</span>
</div>
</div>
</div>
</div>
<!-- Stock Table -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="ri-table-line mr-2 text-teal-600"></i>
核心关联股票一览
</h2>
<div class="table-responsive-custom">
<table class="table table-zebra w-full">
<thead>
<tr class="bg-gradient-to-r from-teal-500 to-cyan-600 text-white">
<th class="text-left">股票名称</th>
<th class="text-left">分类</th>
<th class="text-left">合作项目</th>
<th class="text-center">绑定强度</th>
<th class="text-left">信息来源</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50">
<td class="font-semibold text-purple-600">通富微电</td>
<td><span class="badge badge-error">封测</span></td>
<td>AMD最大封测供应商订单占比80%+</td>
<td class="text-center">
<div class="rating">
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
</div>
</td>
<td><span class="badge badge-info">互动</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">领益智造</td>
<td><span class="badge badge-warning">散热</span></td>
<td>AMD核心供应商批量出货散热模组</td>
<td class="text-center">
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" />
</div>
</td>
<td><span class="badge badge-info">互动</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">世运电路</td>
<td><span class="badge badge-success">PCB</span></td>
<td>完成AMD全系列产品认证实现量产交付</td>
<td class="text-center">
<div class="rating">
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" />
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" />
</div>
</td>
<td><span class="badge badge-primary">调研</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">深南电路</td>
<td><span class="badge badge-success">PCB</span></td>
<td>AMD国内PCB核心供应商之一</td>
<td class="text-center">
<div class="rating">
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" />
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" />
</div>
</td>
<td><span class="badge badge-secondary">券商纪要</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">中电港</td>
<td><span class="badge badge-outline">代理</span></td>
<td>国内第一大电子元器件分销商授权分销AMD</td>
<td class="text-center">
<div class="rating">
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" />
</div>
</td>
<td><span class="badge badge-info">互动</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="font-semibold">宏昌电子</td>
<td><span class="badge badge-warning">覆铜板</span></td>
<td>高频高速覆铜板已获AMD评估认证</td>
<td class="text-center">
<div class="rating">
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" checked />
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" />
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" />
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" />
</div>
</td>
<td><span class="badge badge-primary">年报</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Risk Analysis -->
<div class="bg-gradient-to-br from-red-50 to-orange-50 rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="ri-error-warning-line mr-2 text-red-600"></i>
潜在风险与挑战
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white rounded-lg p-4 border-l-4 border-red-500">
<div class="flex items-center mb-2">
<i class="ri-code-box-line text-red-500 mr-2"></i>
<h3 class="font-semibold">技术风险</h3>
</div>
<p class="text-sm text-gray-600">ROCm软件生态是最大瓶颈与CUDA仍有差距</p>
</div>
<div class="bg-white rounded-lg p-4 border-l-4 border-orange-500">
<div class="flex items-center mb-2">
<i class="ri-exchange-dollar-line text-orange-500 mr-2"></i>
<h3 class="font-semibold">商业化风险</h3>
</div>
<p class="text-sm text-gray-600">市场份额拓展不及预期,地缘政治成本常态化</p>
</div>
<div class="bg-white rounded-lg p-4 border-l-4 border-yellow-500">
<div class="flex items-center mb-2">
<i class="ri-shield-line text-yellow-500 mr-2"></i>
<h3 class="font-semibold">政策风险</h3>
</div>
<p class="text-sm text-gray-600">贸易摩擦加剧,竞争环境日趋严峻</p>
</div>
<div class="bg-white rounded-lg p-4 border-l-4 border-amber-500">
<div class="flex items-center mb-2">
<i class="ri-git-branch-line text-amber-500 mr-2"></i>
<h3 class="font-semibold">信息交叉验证风险</h3>
</div>
<p class="text-sm text-gray-600">增长预期与地缘政治风险并存</p>
</div>
</div>
</div>
<!-- Investment Insight -->
<div class="bg-gradient-to-br from-purple-600 to-indigo-600 rounded-xl shadow-lg p-8 text-white">
<h2 class="text-3xl font-bold mb-6 text-center">投资启示</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-xl font-semibold mb-3 flex items-center">
<i class="ri-megaphone-line mr-2"></i>
概念阶段判断
</h3>
<p class="text-white/90">
AMD概念正从"主题炒作"向"基本面驱动"转变。业绩验证增长真实性,但地缘政治与软件生态挑战并存。
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 flex items-center">
<i class="ri-star-line mr-2"></i>
最具投资价值环节
</h3>
<p class="text-white/90">
<span class="font-bold text-yellow-300">封测环节-通富微电</span>是逻辑最纯粹标的深度绑定AMD业绩直接受益。
</p>
</div>
</div>
<div class="mt-6 p-4 bg-white/10 rounded-lg backdrop-blur-sm">
<h3 class="text-lg font-semibold mb-2">关键跟踪指标</h3>
<div class="flex flex-wrap gap-2">
<span class="badge badge-info badge-lg">MI300出货额</span>
<span class="badge badge-info badge-lg">数据中心占比</span>
<span class="badge badge-info badge-lg">ROCm进展</span>
<span class="badge badge-info badge-lg">通富微电AMD收入增速</span>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 mt-12">
<div class="container mx-auto px-4 text-center">
<p class="text-gray-400">© 2024 AI芯片分析报告 | 数据仅供参考,投资需谨慎</p>
</div>
</footer>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add intersection observer for animations
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(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,567 @@
<!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>
<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&display=swap');
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.stock-highlight {
background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
border-left: 4px solid #3b82f6;
}
.tech-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.risk-badge {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.opportunity-badge {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
@media (max-width: 768px) {
.table-responsive {
font-size: 14px;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- 顶部导航 -->
<nav class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<i class="fas fa-gem text-2xl"></i>
<h1 class="text-xl md:text-2xl font-bold">超硬材料概念深度解析</h1>
</div>
<div class="hidden md:flex items-center space-x-4">
<span class="text-sm opacity-90">战略资源 · 高端功能材料</span>
<span class="bg-white/20 px-3 py-1 rounded-full text-xs">2025.10</span>
</div>
</div>
</div>
</nav>
<!-- 核心观点摘要 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 card-hover">
<div class="flex items-center mb-6">
<i class="fas fa-lightbulb text-yellow-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">核心观点摘要</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gradient-to-r from-purple-50 to-blue-50 p-6 rounded-xl">
<h3 class="font-semibold text-lg mb-3 text-purple-800">
<i class="fas fa-chart-line mr-2"></i>价值跃迁
</h3>
<p class="text-gray-700 leading-relaxed">
从传统工业耗材向<span class="font-semibold text-purple-600">"战略资源+高端功能材料"</span>的双重价值跃迁,政策红利与基本面成长共同驱动。
</p>
</div>
<div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-xl">
<h3 class="font-semibold text-lg mb-3 text-green-800">
<i class="fas fa-rocket mr-2"></i>核心驱动力
</h3>
<p class="text-gray-700 leading-relaxed">
<span class="font-semibold text-green-600">出口管制</span>重塑供给侧,<span class="font-semibold text-green-600">技术突破</span>引爆半导体、AI、机器人需求。
</p>
</div>
</div>
</div>
</section>
<!-- 核心事件时间线 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-timeline text-blue-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">核心催化事件</h2>
</div>
<div class="relative">
<div class="absolute left-4 md:left-8 top-0 bottom-0 w-0.5 timeline-line"></div>
<!-- 事件节点 -->
<div class="space-y-8">
<div class="relative flex items-start">
<div class="absolute left-4 md:left-8 w-4 h-4 bg-purple-600 rounded-full pulse-dot -translate-x-1/2"></div>
<div class="ml-12 md:ml-20 bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-lg flex-1">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-purple-800">2024年12月</span>
<span class="tech-badge">前兆铺垫</span>
</div>
<p class="text-gray-700 text-sm">沃尔德公告提及金刚石窗口材料列入出口管制清单,市场开始关注战略价值</p>
</div>
</div>
<div class="relative flex items-start">
<div class="absolute left-4 md:left-8 w-4 h-4 bg-blue-600 rounded-full pulse-dot -translate-x-1/2"></div>
<div class="ml-12 md:ml-20 bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-lg flex-1">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-blue-800">2025年10月9日</span>
<span class="tech-badge">核心催化</span>
</div>
<p class="text-gray-700 text-sm">商务部联合公告,对人造金刚石产品及核心设备实施正式出口管制</p>
</div>
</div>
<div class="relative flex items-start">
<div class="absolute left-4 md:left-8 w-4 h-4 bg-green-600 rounded-full pulse-dot -translate-x-1/2"></div>
<div class="ml-12 md:ml-20 bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg flex-1">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-green-800">2025年10月10日</span>
<span class="opportunity-badge">市场反应</span>
</div>
<p class="text-gray-700 text-sm">概念股集体高开,四方达、黄河旋风竞价涨停,机构解读为"利好行业整合"</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-network-wired text-indigo-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">产业链图谱</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-yellow-50 to-orange-50 p-6 rounded-xl">
<h3 class="font-bold text-lg mb-4 text-orange-800">
<i class="fas fa-hammer mr-2"></i>上游:设备与原材料
</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center"><i class="fas fa-chevron-right text-orange-500 mr-2 text-xs"></i>MPCVD/DCPCVD设备</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-orange-500 mr-2 text-xs"></i>石墨、金属触媒</li>
<li class="mt-3 font-semibold text-orange-700">代表:晶盛机电、四方达</li>
</ul>
</div>
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl">
<h3 class="font-bold text-lg mb-4 text-indigo-800">
<i class="fas fa-cogs mr-2"></i>中游:制造与制品
</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center"><i class="fas fa-chevron-right text-indigo-500 mr-2 text-xs"></i>人造金刚石单晶、微粉</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-indigo-500 mr-2 text-xs"></i>CVD高附加值产品</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-indigo-500 mr-2 text-xs"></i>精密刀具、热沉片</li>
<li class="mt-3 font-semibold text-indigo-700">代表:沃尔德、黄河旋风</li>
</ul>
</div>
<div class="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-xl">
<h3 class="font-bold text-lg mb-4 text-green-800">
<i class="fas fa-microchip mr-2"></i>下游:应用领域
</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center"><i class="fas fa-chevron-right text-green-500 mr-2 text-xs"></i>传统:建材、机械</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-green-500 mr-2 text-xs"></i>新兴半导体、AI散热</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-green-500 mr-2 text-xs"></i>前沿:人形机器人、量子计算</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 核心公司对比 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-balance-scale text-purple-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">核心玩家对比</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="border-2 border-blue-200 rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg text-blue-800">传统巨头</h3>
<span class="opportunity-badge">稳健</span>
</div>
<p class="text-gray-600 text-sm mb-4">政策红利+行业周期复苏</p>
<div class="space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-building text-blue-500 mr-2"></i>
<span>中兵红箭、黄河旋风</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-chart-bar text-blue-500 mr-2"></i>
<span>营收规模大,业务纯粹</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>最直接受益者</span>
</div>
</div>
</div>
<div class="border-2 border-purple-200 rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg text-purple-800">新应用故事王</h3>
<span class="risk-badge">高风险高收益</span>
</div>
<p class="text-gray-600 text-sm mb-4">技术驱动+第二曲线成长</p>
<div class="space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-rocket text-purple-500 mr-2"></i>
<span>沃尔德</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-chart-line text-purple-500 mr-2"></i>
<span>布局AI、机器人前沿</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-exclamation-triangle text-orange-500 mr-2"></i>
<span>预期差最大</span>
</div>
</div>
</div>
<div class="border-2 border-green-200 rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg text-green-800">国产替代攻坚手</h3>
<span class="tech-badge">成长</span>
</div>
<p class="text-gray-600 text-sm mb-4">国产替代+半导体景气度</p>
<div class="space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
<span>三超新材、国机精工</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-microchip text-green-500 mr-2"></i>
<span>聚焦半导体赛道</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-arrow-up text-green-500 mr-2"></i>
<span>成长路径清晰</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-table text-emerald-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">核心公司财务数据</h2>
</div>
<div class="overflow-x-auto">
<table class="w-full table-auto">
<thead>
<tr class="bg-gradient-to-r from-gray-50 to-gray-100">
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">股票名称</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">分类</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">项目</th>
<th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">2025H1营收</th>
<th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">占比</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">信源</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">亮点</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-blue-700">中兵红箭</td>
<td class="px-4 py-4"><span class="tech-badge">超硬材料</span></td>
<td class="px-4 py-4 text-sm">超硬材料及制品</td>
<td class="px-4 py-4 text-right font-semibold">8.19亿</td>
<td class="px-4 py-4 text-right">37.35%</td>
<td class="px-4 py-4 text-sm">财报</td>
<td class="px-4 py-4 text-sm text-gray-600">营收规模领先</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-blue-700">黄河旋风</td>
<td class="px-4 py-4"><span class="tech-badge">超硬材料</span></td>
<td class="px-4 py-4 text-sm">超硬材料及复合材料</td>
<td class="px-4 py-4 text-right font-semibold">5.55亿</td>
<td class="px-4 py-4 text-right">79.34%</td>
<td class="px-4 py-4 text-sm">财报</td>
<td class="px-4 py-4 text-sm text-gray-600">业务集中度高</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-blue-700">力量钻石</td>
<td class="px-4 py-4"><span class="tech-badge">超硬材料</span></td>
<td class="px-4 py-4 text-sm">培育钻石、金刚石单晶、微粉</td>
<td class="px-4 py-4 text-right font-semibold">2.35亿</td>
<td class="px-4 py-4 text-right">97.28%</td>
<td class="px-4 py-4 text-sm">财报</td>
<td class="px-4 py-4 text-sm text-gray-600">业务纯粹度最高</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors stock-highlight">
<td class="px-4 py-4 font-semibold text-purple-700">沃尔德</td>
<td class="px-4 py-4"><span class="risk-badge">技术驱动</span></td>
<td class="px-4 py-4 text-sm">CVD金刚石生长技术</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">调研</td>
<td class="px-4 py-4 text-sm text-purple-600">少数掌握全部CVD技术</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-green-700">四方达</td>
<td class="px-4 py-4"><span class="tech-badge">MPCVD设备</span></td>
<td class="px-4 py-4 text-sm">MPCVD设备及CVD金刚石工艺</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">调研</td>
<td class="px-4 py-4 text-sm text-gray-600">多项专利技术</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-green-700">国机精工</td>
<td class="px-4 py-4"><span class="tech-badge">MPCVD设备</span></td>
<td class="px-4 py-4 text-sm">MPCVD法合成金刚石关键技术</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">调研</td>
<td class="px-4 py-4 text-sm text-gray-600">成功攻克关键技术</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-green-700">晶盛机电</td>
<td class="px-4 py-4"><span class="tech-badge">MPCVD设备</span></td>
<td class="px-4 py-4 text-sm">MPCVD法金刚石晶体生长设备</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">互动</td>
<td class="px-4 py-4 text-sm text-gray-600">10克拉级钻石培育</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-gray-600">*ST亚振</td>
<td class="px-4 py-4"><span class="tech-badge">其他</span></td>
<td class="px-4 py-4 text-sm">参股亚振钻石30%</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">互动</td>
<td class="px-4 py-4 text-sm text-gray-600">参股布局</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="container mx-auto px-4 py-8 mb-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-compass text-red-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">投资启示与关键指标</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="space-y-4">
<h3 class="font-bold text-lg text-gray-800 mb-4">投资策略</h3>
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fas fa-shield-alt text-blue-600 mr-2"></i>
<span class="font-semibold text-blue-800">稳健之选</span>
</div>
<p class="text-sm text-gray-700">关注中兵红箭、黄河旋风等传统龙头,从行业整合和价格上涨中获益</p>
</div>
<div class="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fas fa-seedling text-green-600 mr-2"></i>
<span class="font-semibold text-green-800">成长之选</span>
</div>
<p class="text-sm text-gray-700">重点跟踪三超新材、国机精工,半导体国产替代逻辑清晰</p>
</div>
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fas fa-dice text-purple-600 mr-2"></i>
<span class="font-semibold text-purple-800">博弈之选</span>
</div>
<p class="text-sm text-gray-700">沃尔德高风险高回报,密切跟踪订单和客户进展</p>
</div>
</div>
<div class="space-y-4">
<h3 class="font-bold text-lg text-gray-800 mb-4">关键跟踪指标</h3>
<div class="border-l-4 border-orange-500 pl-4 py-2">
<p class="font-semibold text-gray-800 text-sm mb-1">行业层面</p>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 人造金刚石产品现货价格</li>
<li>• 出口许可证发放情况</li>
</ul>
</div>
<div class="border-l-4 border-blue-500 pl-4 py-2">
<p class="font-semibold text-gray-800 text-sm mb-1">沃尔德</p>
<ul class="text-sm text-gray-600 space-y-1">
<li>• PCB金刚石钻针订单公告</li>
<li>• 金刚石热沉片客户认证</li>
</ul>
</div>
<div class="border-l-4 border-green-500 pl-4 py-2">
<p class="font-semibold text-gray-800 text-sm mb-1">三超新材/国机精工</p>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 半导体耗材季度收入增速</li>
<li>• 新增头部封测厂客户</li>
</ul>
</div>
</div>
</div>
<!-- 风险提示 -->
<div class="mt-8 bg-gradient-to-r from-red-50 to-orange-50 p-6 rounded-xl border-l-4 border-red-500">
<div class="flex items-center mb-3">
<i class="fas fa-exclamation-triangle text-red-600 mr-2"></i>
<h3 class="font-bold text-lg text-red-800">风险提示</h3>
</div>
<div class="grid md:grid-cols-2 gap-4 text-sm text-gray-700">
<div>
<p class="font-semibold mb-2">技术风险</p>
<p>CVD金刚石大尺寸、低成本量产仍是全球性难题</p>
</div>
<div>
<p class="font-semibold mb-2">预期差风险</p>
<p>沃尔德新业务收入贡献极小,存在"画饼"无法兑现风险</p>
</div>
<div>
<p class="font-semibold mb-2">商业化风险</p>
<p>新应用成本高,替代传统方案过程可能缓慢</p>
</div>
<div>
<p class="font-semibold mb-2">政策风险</p>
<p>出口管制可能引发贸易伙伴反制措施</p>
</div>
</div>
</div>
</div>
</section>
<!-- 底部 -->
<footer class="gradient-bg text-white py-6 mt-12">
<div class="container mx-auto px-4 text-center">
<p class="text-sm opacity-90">
<i class="fas fa-info-circle mr-2"></i>
本页面仅供参考,不构成投资建议。投资有风险,入市需谨慎。
</p>
<p class="text-xs opacity-75 mt-2">
数据来源:公司财报、机构调研、公开市场信息
</p>
</div>
</footer>
<script>
// 添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 表格行高亮效果
const tableRows = document.querySelectorAll('tbody tr');
tableRows.forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.01)';
this.style.transition = 'all 0.2s ease';
});
row.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
// 数字动画效果
function animateValue(element, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
element.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
// 页面加载时触发动画
window.addEventListener('load', () => {
const revenueElements = document.querySelectorAll('.revenue-animate');
revenueElements.forEach(el => {
const value = parseFloat(el.innerText.replace('亿', ''));
if (!isNaN(value)) {
animateValue(el, 0, value, 1000);
setTimeout(() => {
el.innerHTML = value + '亿';
}, 1000);
}
});
});
</script>
</body>
</html>

416
public/htmls/超聚变.html Normal file
View File

@@ -0,0 +1,416 @@
<!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>
<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-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
border: 1px solid transparent;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border-color: #667eea;
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.table-hover-row:hover {
background-color: rgba(102, 126, 234, 0.05);
transition: background-color 0.2s ease;
}
.risk-badge {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.opportunity-badge {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.scroll-fade-in {
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<section class="hero-gradient text-white py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="md:w-2/3 mb-8 md:mb-0 scroll-fade-in">
<div class="flex items-center mb-4">
<span class="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-semibold">
<i class="fas fa-fire mr-2"></i>热门概念
</span>
<span class="ml-3 pulse-dot inline-block w-3 h-3 bg-green-400 rounded-full"></span>
<span class="ml-2 text-sm">实时更新</span>
</div>
<h1 class="text-4xl md:text-6xl font-bold mb-6">
超聚变 <span class="text-yellow-300">数字技术</span>
</h1>
<p class="text-xl md:text-2xl mb-6 text-gray-100">
华为X86服务器业务剥离 · 河南国资控股 · 国产服务器龙头
</p>
<div class="flex flex-wrap gap-4">
<div class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-lg">
<i class="fas fa-rocket mr-2"></i>筹备IPO
</div>
<div class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-lg">
<i class="fas fa-chart-line mr-2"></i>国产化销售全国首位
</div>
<div class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-lg">
<i class="fas fa-microchip mr-2"></i>昇腾AI核心伙伴
</div>
</div>
</div>
<div class="md:w-1/3 text-center">
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6">
<h3 class="text-2xl font-bold mb-2">核心催化剂</h3>
<div class="text-4xl font-bold text-yellow-300">IPO筹备</div>
<p class="text-sm mt-2">2025年10月独家消息</p>
</div>
</div>
</div>
</div>
</section>
<!-- Key Insights -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12 gradient-text">核心洞察</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl p-6 card-hover">
<div class="text-4xl mb-4 text-purple-600">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-xl font-bold mb-3">国产替代国家队</h3>
<p class="text-gray-600">承担打破国外服务器巨头垄断的国家使命,河南国资提供资源和政策支持</p>
</div>
<div class="bg-white rounded-xl p-6 card-hover">
<div class="text-4xl mb-4 text-blue-600">
<i class="fas fa-brain"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI算力核心受益者</h3>
<p class="text-gray-600">深度绑定华为昇腾生态在国产AI算力产业链中占据关键位置</p>
</div>
<div class="bg-white rounded-xl p-6 card-hover">
<div class="text-4xl mb-4 text-green-600">
<i class="fas fa-chart-pie"></i>
</div>
<h3 class="text-xl font-bold mb-3">IPO价值重估机遇</h3>
<p class="text-gray-600">非上市公司估值待发现IPO提供清晰的价值实现路径</p>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section class="py-16 px-4 bg-gray-100">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12 gradient-text">关键时间轴</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full timeline-line"></div>
<div class="space-y-12">
<div class="flex items-center justify-end md:w-1/2 md:pr-8">
<div class="bg-white rounded-lg p-6 card-hover">
<div class="text-sm text-gray-500 mb-2">2021年</div>
<h3 class="text-lg font-bold">华为剥离X86业务</h3>
<p class="text-gray-600">美国制裁下,华为剥离服务器业务,河南国资接手成立超聚变</p>
</div>
</div>
<div class="flex items-center justify-start md:ml-auto md:w-1/2 md:pl-8">
<div class="bg-white rounded-lg p-6 card-hover">
<div class="text-sm text-gray-500 mb-2">2025年3月</div>
<h3 class="text-lg font-bold">省长调研背书</h3>
<p class="text-gray-600">河南省长王凯调研,确认国产化服务器销售额全国首位</p>
</div>
</div>
<div class="flex items-center justify-end md:w-1/2 md:pr-8">
<div class="bg-white rounded-lg p-6 card-hover">
<div class="text-sm text-gray-500 mb-2">2025年9月</div>
<h3 class="text-lg font-bold">产业资本布局</h3>
<p class="text-gray-600">东方明珠公告投资5亿元通过专项基金受让股权</p>
</div>
</div>
<div class="flex items-center justify-start md:ml-auto md:w-1/2 md:pl-8">
<div class="bg-white rounded-lg p-6 card-hover">
<div class="text-sm text-gray-500 mb-2">2025年10月</div>
<h3 class="text-lg font-bold text-purple-600">IPO筹备曝光</h3>
<p class="text-gray-600">财联社独家报道,招聘财务专家,启动上市准备</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12 gradient-text">产业链相关公司</h2>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full table-auto">
<thead>
<tr class="bg-gray-50 border-b">
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">股票名称</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">分类</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">关联关系</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b table-hover-row">
<td class="px-4 py-3 font-medium">东方明珠</td>
<td><span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">参股</span></td>
<td class="text-sm">投资近5亿元通过专项基金受让股权</td>
<td class="text-sm text-gray-600">最直接的股权投资,一级市场套利</td>
</tr>
<tr class="border-b table-hover-row">
<td class="px-4 py-3 font-medium">天源迪科</td>
<td><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">总经销</span></td>
<td class="text-sm">子公司金华威分销GPU算力服务器</td>
<td class="text-sm text-gray-600">业绩与超聚变AI业务直接挂钩</td>
</tr>
<tr class="border-b table-hover-row">
<td class="px-4 py-3 font-medium">英维克</td>
<td><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">液冷散热</span></td>
<td class="text-sm">联合创新实验室,深度液冷合作</td>
<td class="text-sm text-gray-600">高功耗服务器刚需,技术壁垒高</td>
</tr>
<tr class="border-b table-hover-row">
<td class="px-4 py-3 font-medium">荣科科技</td>
<td><span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">国资系</span></td>
<td class="text-sm">同属豫信电科控股,金牌经销商</td>
<td class="text-sm text-gray-600">国资协同+业务合作双重逻辑</td>
</tr>
<tr class="border-b table-hover-row">
<td class="px-4 py-3 font-medium">开勒股份</td>
<td><span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">国资转型</span></td>
<td class="text-sm">与豫资基金成立合资公司转型AI+</td>
<td class="text-sm text-gray-600">弹性大,国资背景+新业务</td>
</tr>
<tr class="border-b table-hover-row">
<td class="px-4 py-3 font-medium">中航光电</td>
<td><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">核心供应</span></td>
<td class="text-sm">光、电、高速、液冷多领域合作</td>
<td class="text-sm text-gray-600">高价值量核心元器件供应商</td>
</tr>
<tr class="border-b table-hover-row">
<td class="px-4 py-3 font-medium">神州数码</td>
<td><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">总经销</span></td>
<td class="text-sm">超聚变总经销商之一</td>
<td class="text-sm text-gray-600">大型分销商,渠道优势明显</td>
</tr>
<tr class="table-hover-row">
<td class="px-4 py-3 font-medium">飞荣达</td>
<td><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">液冷散热</span></td>
<td class="text-sm">供应液冷服务器相关产品</td>
<td class="text-sm text-gray-600">受益于AI服务器散热需求增长</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section class="py-16 px-4 bg-gray-100">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12 gradient-text">风险与机遇</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl p-6">
<h3 class="text-xl font-bold mb-6 text-red-600">
<i class="fas fa-exclamation-triangle mr-2"></i>潜在风险
</h3>
<div class="space-y-4">
<div class="flex items-start">
<span class="risk-badge text-white px-2 py-1 rounded text-xs mt-1 mr-3">技术</span>
<div>
<h4 class="font-semibold">供应链"卡脖子"</h4>
<p class="text-sm text-gray-600">核心X86 CPU仍依赖Intel/AMD面临制裁风险</p>
</div>
</div>
<div class="flex items-start">
<span class="risk-badge text-white px-2 py-1 rounded text-xs mt-1 mr-3">商业</span>
<div>
<h4 class="font-semibold">激烈市场竞争</h4>
<p class="text-sm text-gray-600">服务器红海市场,面临浪潮、新华三等强劲对手</p>
</div>
</div>
<div class="flex items-start">
<span class="risk-badge text-white px-2 py-1 rounded text-xs mt-1 mr-3">政策</span>
<div>
<h4 class="font-semibold">政策支持不确定性</h4>
<p class="text-sm text-gray-600">信创扶持重心可能转移,华为潜在回归竞争</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6">
<h3 class="text-xl font-bold mb-6 text-green-600">
<i class="fas fa-lightbulb mr-2"></i>投资机遇
</h3>
<div class="space-y-4">
<div class="flex items-start">
<span class="opportunity-badge text-white px-2 py-1 rounded text-xs mt-1 mr-3">供应链</span>
<div>
<h4 class="font-semibold">深度绑定供应商</h4>
<p class="text-sm text-gray-600">如英维克等液冷方案提供商技术壁垒高</p>
</div>
</div>
<div class="flex items-start">
<span class="opportunity-badge text-white px-2 py-1 rounded text-xs mt-1 mr-3">渠道</span>
<div>
<h4 class="font-semibold">核心分销渠道</h4>
<p class="text-sm text-gray-600">天源迪科等GPU算力服务器总商业绩兑现明确</p>
</div>
</div>
<div class="flex items-start">
<span class="opportunity-badge text-white px-2 py-1 rounded text-xs mt-1 mr-3">股权</span>
<div>
<h4 class="font-semibold">直接股权投资</h4>
<p class="text-sm text-gray-600">东方明珠等纯粹股权博弈标的</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Key Metrics -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12 gradient-text">关键跟踪指标</h2>
<div class="grid md:grid-cols-4 gap-6">
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="text-3xl mb-3 text-purple-600">
<i class="fas fa-file-invoice-dollar"></i>
</div>
<h3 class="font-bold mb-2">招股书财务数据</h3>
<p class="text-sm text-gray-600">营收结构、毛利率、研发投入</p>
</div>
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="text-3xl mb-3 text-blue-600">
<i class="fas fa-server"></i>
</div>
<h3 class="font-bold mb-2">昇腾服务器出货量</h3>
<p class="text-sm text-gray-600">AI算力业务占比验证</p>
</div>
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="text-3xl mb-3 text-green-600">
<i class="fas fa-chart-pie"></i>
</div>
<h3 class="font-bold mb-2">市场份额数据</h3>
<p class="text-sm text-gray-600">IDC权威机构季度报告</p>
</div>
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="text-3xl mb-3 text-orange-600">
<i class="fas fa-handshake"></i>
</div>
<h3 class="font-bold mb-2">关联公司业绩</h3>
<p class="text-sm text-gray-600">经销商、供应商财报验证</p>
</div>
</div>
</div>
</section>
<!-- Disclaimer -->
<footer class="bg-gray-900 text-white py-8 px-4">
<div class="max-w-7xl mx-auto text-center">
<p class="text-sm text-gray-400 mb-2">
<i class="fas fa-info-circle mr-2"></i>
投资有风险,入市需谨慎
</p>
<p class="text-xs text-gray-500">
本分析基于公开信息整理,不构成投资建议。请注意区分"超聚变"(服务器)与"核聚变"(能源)概念差异。
</p>
</div>
</footer>
<script>
// Add scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('scroll-fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.card-hover').forEach(el => {
observer.observe(el);
});
// Add smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>

529
public/htmls/重庆.html Normal file
View File

@@ -0,0 +1,529 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="cyberpunk">
<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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.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">
<style>
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8); }
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
animation: glow 2s infinite;
}
.timeline-line {
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
}
.neon-text {
text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.data-highlight {
background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<!-- Hero Section -->
<section class="hero-gradient text-white py-20 px-6 relative overflow-hidden">
<div class="container mx-auto relative z-10">
<div class="flex flex-col lg:flex-row items-center justify-between">
<div class="lg:w-2/3 mb-10 lg:mb-0">
<h1 class="text-5xl md:text-6xl font-bold mb-6 neon-text">
重庆概念投资价值分析
</h1>
<p class="text-xl md:text-2xl mb-8 opacity-90">
从工业重镇到新质生产力高地
</p>
<div class="flex flex-wrap gap-4">
<div class="badge badge-lg badge-primary glass-effect px-4 py-2">
<i class="fas fa-rocket mr-2"></i>产业升级
</div>
<div class="badge badge-lg badge-secondary glass-effect px-4 py-2">
<i class="fas fa-chart-line mr-2"></i>国企改革
</div>
<div class="badge badge-lg badge-accent glass-effect px-4 py-2">
<i class="fas fa-microchip mr-2"></i>AI赋能
</div>
</div>
</div>
<div class="lg:w-1/3 floating">
<div class="radial-progress" style="--value:85; --size:200px;">
85%
<span class="text-sm">投资价值</span>
</div>
</div>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-full opacity-10">
<div class="absolute top-10 left-10 w-72 h-72 bg-purple-500 rounded-full filter blur-3xl"></div>
<div class="absolute bottom-10 right-10 w-96 h-96 bg-blue-500 rounded-full filter blur-3xl"></div>
</div>
</section>
<!-- Core Insights -->
<section class="py-16 px-6">
<div class="container mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">核心观点</h2>
<p class="text-xl text-gray-400">政策驱动下的系统性转型机遇</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="card glass-effect card-hover">
<div class="card-body">
<div class="text-5xl mb-4 text-center">🏗️</div>
<h3 class="card-title justify-center text-xl mb-4">城市级重构</h3>
<p>自上而下政策支持,从国家级高铁网到地方行政区划调整,系统重塑重庆经济地理与产业结构</p>
<div class="text-center mt-4">
<span class="text-2xl data-highlight">1354亿</span>
<p class="text-sm text-gray-400">渝宜高铁投资</p>
</div>
</div>
</div>
<div class="card glass-effect card-hover">
<div class="card-body">
<div class="text-5xl mb-4 text-center">🤖</div>
<h3 class="card-title justify-center text-xl mb-4">产业升级</h3>
<p>智能汽车+机器人双轮驱动传统工业基础与前沿AI应用融合形成"33618"现代制造业集群</p>
<div class="text-center mt-4">
<span class="text-2xl data-highlight">200-300%</span>
<p class="text-sm text-gray-400">柴发环节增长空间</p>
</div>
</div>
</div>
<div class="card glass-effect card-hover">
<div class="card-body">
<div class="text-5xl mb-4 text-center">🔄</div>
<h3 class="card-title justify-center text-xl mb-4">国企改革</h3>
<p>混改+数字化赋能,提升经营效率,重庆百货等企业已验证改革成效,开启价值重估</p>
<div class="text-center mt-4">
<span class="text-2xl data-highlight">2亿</span>
<p class="text-sm text-gray-400">年节省成本</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section class="py-16 px-6 bg-gray-800 bg-opacity-50">
<div class="container mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">关键事件时间轴</h2>
</div>
<div class="relative">
<div class="timeline-line absolute left-8 top-0 bottom-0 w-1"></div>
<div class="space-y-12">
<div class="flex items-center">
<div class="bg-blue-500 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-xl z-10">
2023
</div>
<div class="ml-8 flex-1">
<div class="card glass-effect">
<div class="card-body">
<h3 class="text-xl font-bold">国企改革深化</h3>
<p class="text-gray-400">重庆新华出版集团、重庆文化旅游集团揭牌成立</p>
</div>
</div>
</div>
</div>
<div class="flex items-center">
<div class="bg-purple-500 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-xl z-10">
2024
</div>
<div class="ml-8 flex-1">
<div class="card glass-effect">
<div class="card-body">
<h3 class="text-xl font-bold">金融体系优化</h3>
<p class="text-gray-400">重庆股转中心拟吸收合并母公司重庆股服集团</p>
</div>
</div>
</div>
</div>
<div class="flex items-center">
<div class="bg-pink-500 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-xl z-10">
2025
</div>
<div class="ml-8 flex-1">
<div class="card glass-effect">
<div class="card-body">
<h3 class="text-xl font-bold">产业爆发</h3>
<ul class="text-gray-400 space-y-2">
<li>• 渝宜高铁开工1354亿元投资</li>
<li>• 具身智能机器人"揭榜挂帅"项目发布</li>
<li>• 科技金融改革专项文件</li>
<li>• 行政区划调整(江北区、渝北区→两江新区)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Logic -->
<section class="py-16 px-6">
<div class="container mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">核心投资逻辑</h2>
<p class="text-xl text-gray-400">三大产业链深度剖析</p>
</div>
<div class="space-y-8">
<!-- 新基建与AI -->
<div class="card glass-effect">
<div class="card-body">
<div class="flex items-center mb-4">
<div class="text-4xl mr-4"></div>
<h3 class="text-2xl font-bold">新基建与AI赋能链</h3>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-6">
<div class="border-l-4 border-blue-500 pl-4">
<h4 class="font-bold mb-2">上游核心设备</h4>
<p class="text-gray-400">重庆机电(重庆康明斯数据中心柴发)</p>
</div>
<div class="border-l-4 border-purple-500 pl-4">
<h4 class="font-bold mb-2">中游建设运营</h4>
<p class="text-gray-400">数据中心建设商、运营商</p>
</div>
<div class="border-l-4 border-pink-500 pl-4">
<h4 class="font-bold mb-2">下游应用</h4>
<p class="text-gray-400">字节、阿里等云厂商算力中心</p>
</div>
</div>
</div>
</div>
<!-- 机器人与汽车 -->
<div class="card glass-effect">
<div class="card-body">
<div class="flex items-center mb-4">
<div class="text-4xl mr-4">🚗</div>
<h3 class="text-2xl font-bold">智能机器人与汽车协同链</h3>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-6">
<div class="border-l-4 border-blue-500 pl-4">
<h4 class="font-bold mb-2">核心零部件</h4>
<p class="text-gray-400">湘油泵、隆盛、信质等</p>
</div>
<div class="border-l-4 border-purple-500 pl-4">
<h4 class="font-bold mb-2">整机与系统集成</h4>
<p class="text-gray-400">长安汽车、赛力斯</p>
</div>
<div class="border-l-4 border-pink-500 pl-4">
<h4 class="font-bold mb-2">应用场景</h4>
<p class="text-gray-400">汽车制造、笔电制造、集成电路</p>
</div>
</div>
</div>
</div>
<!-- 国企改革 -->
<div class="card glass-effect">
<div class="card-body">
<div class="flex items-center mb-4">
<div class="text-4xl mr-4">🏛️</div>
<h3 class="text-2xl font-bold">区域经济与国企改革链</h3>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
<div class="text-center">
<div class="text-3xl mb-2">🏗️</div>
<h4 class="font-bold">传统基建</h4>
<p class="text-sm text-gray-400">重庆建工、重庆路桥</p>
</div>
<div class="text-center">
<div class="text-3xl mb-2">💧</div>
<h4 class="font-bold">公用事业</h4>
<p class="text-sm text-gray-400">重庆水务、重庆燃气</p>
</div>
<div class="text-center">
<div class="text-3xl mb-2">🛍️</div>
<h4 class="font-bold">消费服务</h4>
<p class="text-sm text-gray-400">重庆百货、重庆啤酒</p>
</div>
<div class="text-center">
<div class="text-3xl mb-2">🏦</div>
<h4 class="font-bold">金融支持</h4>
<p class="text-sm text-gray-400">重庆银行、西南证券</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data -->
<section class="py-16 px-6 bg-gray-800 bg-opacity-50">
<div class="container mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">核心公司分析</h2>
<p class="text-xl text-gray-400">重庆概念股全景图</p>
</div>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr class="text-base">
<th class="bg-base-300">股票名称</th>
<th class="bg-base-300">分类</th>
<th class="bg-base-300">相关性</th>
<th class="bg-base-300">逻辑纯粹度</th>
<th class="bg-base-300">投资亮点</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td>
<div class="flex items-center space-x-3">
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content rounded-full w-12">
<span class="text-xl"></span>
</div>
</div>
<div>
<div class="font-bold">重庆机电</div>
<div class="text-sm opacity-50">2722.HK</div>
</div>
</div>
</td>
<td>新基建</td>
<td>AI数据中心柴发需求爆发</td>
<td><span class="badge badge-accent">极高</span></td>
<td>净利率23.8%ROE 38.8%PE仅5-6倍</td>
</tr>
<tr class="hover">
<td>
<div class="flex items-center space-x-3">
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content rounded-full w-12">
<span class="text-xl"></span>
</div>
</div>
<div>
<div class="font-bold">重庆百货</div>
<div class="text-sm opacity-50">600729.SH</div>
</div>
</div>
</td>
<td>消费改革</td>
<td>国企改革典范,数字化赋能</td>
<td><span class="badge badge-primary"></span></td>
<td>人效翻倍年省成本2亿重庆营收占比96%</td>
</tr>
<tr class="hover">
<td>
<div class="flex items-center space-x-3">
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content rounded-full w-12">
<span class="text-xl"></span>
</div>
</div>
<div>
<div class="font-bold">重庆建工</div>
<div class="text-sm opacity-50">600939.SH</div>
</div>
</div>
</td>
<td>地产基建</td>
<td>重庆国资委持股75.27%</td>
<td><span class="badge badge-warning">中等</span></td>
<td>中标轨交7号线9.31亿重庆营收69%</td>
</tr>
<tr class="hover">
<td>
<div class="flex items-center space-x-3">
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content rounded-full w-12">
<span class="text-xl"></span>
</div>
</div>
<div>
<div class="font-bold">重庆啤酒</div>
<div class="text-sm opacity-50">600132.SH</div>
</div>
</div>
</td>
<td>消费</td>
<td>"啤酒+火锅"文化绑定</td>
<td><span class="badge badge-info">中等</span></td>
<td>产品结构优化,高端化趋势明确</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Risks & Conclusion -->
<section class="py-16 px-6">
<div class="container mx-auto">
<div class="grid md:grid-cols-2 gap-8">
<!-- Risks -->
<div class="card glass-effect card-hover">
<div class="card-body">
<h3 class="card-title text-2xl mb-6">
<i class="fas fa-exclamation-triangle mr-2 text-yellow-400"></i>
潜在风险
</h3>
<div class="space-y-4">
<div class="flex items-start">
<span class="text-2xl mr-3">⚠️</span>
<div>
<h4 class="font-bold">政策执行风险</h4>
<p class="text-gray-400 text-sm">宏大政策蓝图能否高效落地执行</p>
</div>
</div>
<div class="flex items-start">
<span class="text-2xl mr-3">📉</span>
<div>
<h4 class="font-bold">商业化竞争风险</h4>
<p class="text-gray-400 text-sm">面临深圳、上海等先进地区竞争</p>
</div>
</div>
<div class="flex items-start">
<span class="text-2xl mr-3">💼</span>
<div>
<h4 class="font-bold">宏观经济风险</h4>
<p class="text-gray-400 text-sm">固定资产投资与消费复苏力度</p>
</div>
</div>
</div>
</div>
</div>
<!-- Conclusion -->
<div class="card glass-effect card-hover">
<div class="card-body">
<h3 class="card-title text-2xl mb-6">
<i class="fas fa-lightbulb mr-2 text-green-400"></i>
投资启示
</h3>
<div class="space-y-4">
<div class="alert alert-success">
<div class="flex items-center">
<span class="text-xl mr-3">🎯</span>
<div>
<h4 class="font-bold">优选赛道</h4>
<p class="text-sm">聚焦新质生产力与国企改革主线</p>
</div>
</div>
</div>
<div class="alert alert-info">
<div class="flex items-center">
<span class="text-xl mr-3">📈</span>
<div>
<h4 class="font-bold">核心推荐</h4>
<p class="text-sm">重庆机电(HK) + 重庆百货(A股)双主线</p>
</div>
</div>
</div>
<div class="alert alert-warning">
<div class="flex items-center">
<span class="text-xl mr-3">🔍</span>
<div>
<h4 class="font-bold">关键跟踪</h4>
<p class="text-sm">订单增速、同店增长、产业落地进展</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer footer-center p-10 bg-base-200 text-base-content">
<div>
<p class="font-bold">
重庆概念投资分析报告
</p>
<p>数据来源:财联社、路演记录、公开研报</p>
</div>
<div>
<p>© 2025 投资研究部. All rights reserved.</p>
</div>
</footer>
<script>
// Add smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,326 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
min-height: 100vh;
}
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.quantum-gradient {
background: linear-gradient(90deg, #00d2ff 0%, #3a7bd5 50%, #00d2ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.price-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.timeline-dot {
background: linear-gradient(135deg, #00d2ff, #3a7bd5);
box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
}
</style>
</head>
<body class="text-gray-100">
<!-- Hero Section -->
<div class="relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-transparent to-purple-500/10"></div>
<div class="container mx-auto px-4 py-12 relative z-10">
<div class="text-center mb-8">
<h1 class="text-5xl md:text-6xl font-bold mb-4">
<span class="quantum-gradient">量子材料钛酸锶</span>
</h1>
<div class="flex flex-wrap justify-center gap-3 mt-6">
<span class="badge badge-lg badge-primary">概念阶段: 主题炒作初期</span>
<span class="badge badge-lg badge-accent">核心驱动: 化工供给侧改革</span>
<span class="badge badge-lg badge-warning">风险提示: 伪概念估值杀</span>
</div>
</div>
</div>
</div>
<!-- Executive Summary -->
<div class="container mx-auto px-4 mb-8">
<div class="glass-card rounded-2xl p-6 md:p-8 border-l-4 border-cyan-400">
<h2 class="text-2xl md:text-3xl font-bold mb-4 flex items-center">
<svg class="w-8 h-8 mr-3 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
核心观点摘要
</h2>
<div class="bg-black/30 rounded-lg p-4 border border-red-500/30">
<p class="text-lg leading-relaxed">
当前 <span class="text-yellow-300 font-semibold">"量子材料钛酸锶"概念存在严重的定义混淆与产业链错配</span>新闻端聚焦于钛酸锶SrTiO₃在量子计算领域的颠覆性技术突破但A股关联标的实际主营为碳酸锶SrCO₃原材料生产属于传统化工周期品涨价逻辑与量子应用无直接技术关联。<span class="text-cyan-300 font-semibold">真正的量子材料钛酸锶研究集中在欧美顶尖实验室,国内尚无产业化布局。</span>当前市场热度主要由碳酸锶供给侧改革驱动的价格暴涨支撑,而非量子技术商业化落地。
</p>
</div>
</div>
</div>
<!-- Key Catalyst Timeline -->
<div class="container mx-auto px-4 mb-8">
<h2 class="text-3xl font-bold mb-6 text-center">关键催化剂时间轴</h2>
<div class="grid md:grid-cols-2 gap-4">
<div class="glass-card rounded-xl p-5 hover:scale-105 transition-transform">
<div class="flex items-start space-x-4">
<div class="timeline-dot w-4 h-4 rounded-full mt-2 flex-shrink-0"></div>
<div>
<h3 class="text-lg font-semibold text-cyan-300">2025年3月底前</h3>
<p class="text-sm text-gray-300">应急管理部淘汰落后工艺大限10万吨产能强制退出</p>
<div class="badge badge-error mt-2">影响: ★★★★★</div>
</div>
</div>
</div>
<div class="glass-card rounded-xl p-5 hover:scale-105 transition-transform">
<div class="flex items-start space-x-4">
<div class="timeline-dot w-4 h-4 rounded-full mt-2 flex-shrink-0"></div>
<div>
<h3 class="text-lg font-semibold text-cyan-300">2025年6月</h3>
<p class="text-sm text-gray-300">河北辛集化工复产听证会结果公布(若复产推迟)</p>
<div class="badge badge-error mt-2">影响: ★★★★★</div>
</div>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="container mx-auto px-4 mb-8">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<svg class="w-8 h-8 mr-3 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
</svg>
核心标的对比分析
</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full bg-base-100/50 backdrop-blur">
<thead class="bg-gradient-to-r from-cyan-600 to-purple-600 sticky top-0">
<tr class="text-white">
<th class="font-bold">公司</th>
<th class="font-bold">主营业务</th>
<th class="font-bold">碳酸锶产能</th>
<th class="font-bold">2025E利润增量</th>
<th class="font-bold">量子关联度</th>
<th class="font-bold">估值合理性</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-cyan-500/10">
<td class="font-bold text-cyan-300">红星发展</td>
<td>钡锶盐化工</td>
<td>3万吨<br><span class="text-success text-xs">新建6万吨</span></td>
<td class="price-pulse font-bold text-yellow-300">2.0-3.5亿元</td>
<td>⭐☆☆☆☆</td>
<td><span class="badge badge-ghost">中性 PE44倍</span></td>
</tr>
<tr class="hover:bg-cyan-500/10">
<td class="font-bold text-cyan-300">金瑞矿业</td>
<td>锶盐+金属锶</td>
<td>2万吨<br><span class="text-success text-xs">新建4.5万吨</span></td>
<td class="price-pulse font-bold text-yellow-300">1.5-2.5亿元</td>
<td>⭐☆☆☆☆</td>
<td><span class="badge badge-warning">偏高 无量子业务</span></td>
</tr>
<tr class="hover:bg-cyan-500/10">
<td class="font-bold text-cyan-300">新莱福</td>
<td>磁性材料、压敏电阻</td>
<td>未披露<br><span class="text-error text-xs">外购碳酸锶</span></td>
<td class="font-bold text-gray-400">不确定(成本压力)</td>
<td>⭐⭐⭐☆☆</td>
<td><span class="badge badge-error">偏高 业务模糊</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Core Logic Analysis -->
<div class="container mx-auto px-4 mb-8">
<div class="tabs tabs-lifted">
<input type="radio" name="logic_tabs" class="tab tab-lg" aria-label="三重逻辑撕裂" checked />
<div class="tab-content bg-base-100 p-6 rounded-b-xl">
<h3 class="text-xl font-bold mb-4 text-cyan-300">核心驱动力:三重逻辑的严重撕裂</h3>
<div class="grid md:grid-cols-3 gap-4">
<div class="card bg-gradient-to-br from-red-500/20 to-transparent border border-red-500/30">
<div class="card-body">
<h4 class="card-title text-red-300">A. 量子科技叙事逻辑</h4>
<p class="text-sm text-gray-300">钛酸锶在4K低温下实现创纪录电光性能指向万亿级量子计算市场但技术成熟度处于TRL 1-2级距离商业化需5-10年。</p>
</div>
</div>
<div class="card bg-gradient-to-br from-yellow-500/20 to-transparent border border-yellow-500/30">
<div class="card-body">
<h4 class="card-title text-yellow-300">B. 原料替代逻辑</h4>
<p class="text-sm text-gray-300">钛酸锶生产原料确实是碳酸锶,但在下游需求中占比<3%逻辑链条过长且贡献度不足</p>
</div>
</div>
<div class="card bg-gradient-to-br from-green-500/20 to-transparent border border-green-500/30">
<div class="card-body">
<h4 class="card-title text-green-300">C. 化工供给侧改革逻辑</h4>
<p class="text-sm text-gray-300">最真实驱动力河北辛集化工30%产能退出+10万吨政策强制淘汰+墨西哥进口中断供给从20.5万吨压缩至10万吨。</p>
</div>
</div>
</div>
</div>
<input type="radio" name="logic_tabs" class="tab tab-lg" aria-label="产业链错配" />
<div class="tab-content bg-base-100 p-6 rounded-b-xl">
<h3 class="text-xl font-bold mb-4 text-cyan-300">产业链图谱:被错误拼接的三条链条</h3>
<div class="space-y-4">
<div class="card glass-card">
<div class="card-body p-4">
<h4 class="font-bold text-red-400">【链条1量子材料钛酸锶新闻理想链</h4>
<p class="text-sm text-gray-300">上游:高纯钛源、高纯锶源 → 中游MBE/PLD薄膜制备 → 下游:量子计算芯片</p>
<div class="badge badge-warning mt-2">无A股标的</div>
</div>
</div>
<div class="card glass-card">
<div class="card-body p-4">
<h4 class="font-bold text-green-400">【链条2碳酸锶化工品A股实际链</h4>
<p class="text-sm text-gray-300">上游:天青石矿 → 中游:碳酸锶 → 下游:铁氧体磁性材料(66%)、电子陶瓷(3.3%)</p>
<div class="badge badge-success mt-2">红星发展、金瑞矿业</div>
</div>
</div>
<div class="card glass-card">
<div class="card-body p-4">
<h4 class="font-bold text-yellow-400">【链条3薄膜铌酸锂被混淆链</h4>
<p class="text-sm text-gray-300">上游:铌矿、碳酸锂 → 中游TFLN薄膜 → 下游:光模块、量子通信</p>
<div class="badge badge-error mt-2">概念混淆噪声</div>
</div>
</div>
</div>
</div>
<input type="radio" name="logic_tabs" class="tab tab-lg" aria-label="价格数据" />
<div class="tab-content bg-base-100 p-6 rounded-b-xl">
<h3 class="text-xl font-bold mb-4 text-cyan-300">碳酸锶价格走势</h3>
<div class="stats shadow w-full glass-card">
<div class="stat">
<div class="stat-title">2024年8月价格</div>
<div class="stat-value text-gray-400">¥7,850</div>
<div class="stat-desc">元/吨</div>
</div>
<div class="stat">
<div class="stat-title">2025年1月价格</div>
<div class="stat-value text-yellow-400">¥15,000</div>
<div class="stat-desc">涨幅 +91%</div>
</div>
<div class="stat">
<div class="stat-title">专家目标价</div>
<div class="stat-value text-cyan-400">¥20,000</div>
<div class="stat-desc">+33%空间</div>
</div>
<div class="stat">
<div class="stat-title">悲观情景</div>
<div class="stat-value text-red-400">¥30,000</div>
<div class="stat-desc">复制TMA走势</div>
</div>
</div>
</div>
</div>
</div>
<!-- Risk Section -->
<div class="container mx-auto px-4 mb-8">
<div class="card bg-gradient-to-r from-red-600/20 to-orange-600/20 border border-red-500/30">
<div class="card-body">
<h2 class="card-title text-2xl mb-4 flex items-center">
<svg class="w-8 h-8 mr-2 text-red-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"/>
</svg>
致命风险:信息交叉验证的矛盾
</h2>
<div class="overflow-x-auto">
<table class="table w-full text-sm">
<thead>
<tr class="text-red-300">
<th>信息源</th>
<th>声称内容</th>
<th>验证结果</th>
<th class="text-center">矛盾点</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-bold text-red-400">新闻端</td>
<td>量子材料钛酸锶技术突破</td>
<td>真实,但仅限实验室</td>
<td class="text-center"><span class="badge badge-error">无A股标的参与</span></td>
</tr>
<tr>
<td class="font-bold text-yellow-400">券商研报</td>
<td>钛酸锶是下游应用</td>
<td>部分真实(占比<3%</td>
<td class="text-center"><span class="badge badge-warning">夸大应用规模</span></td>
</tr>
<tr>
<td class="font-bold text-orange-400">市场行为</td>
<td>红星发展=量子材料股</td>
<td class="text-error">完全错误</td>
<td class="text-center"><span class="badge badge-error">概念炒作,无基本面支撑</span></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 bg-black/40 rounded-lg p-4 border border-red-500/50">
<p class="text-lg font-bold text-red-300">最大风险点:</p>
<p class="text-sm">若2025年Q2市场发现"量子材料钛酸锶"纯粹是碳酸锶涨价的"包装",整个概念可能面临 <span class="badge badge-error">业绩证伪+估值杀</span> 的双杀局面,回调幅度可能超过 <span class="text-red-400 font-bold">40%</span></p>
</div>
</div>
</div>
</div>
<!-- Investment Advice -->
<div class="container mx-auto px-4 mb-12">
<h2 class="text-3xl font-bold mb-6 text-center">综合结论与投资启示</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="card glass-card hover:scale-105 transition-transform">
<div class="card-body">
<h3 class="card-title text-green-400">短期策略 (3-6个月)</h3>
<p class="text-sm mb-3">若碳酸锶价格维持高位且复产不及预期,可<span class="badge badge-success">低配红星发展</span>博弈涨价弹性,但需设置 <span class="text-error font-bold">15%止损线</span></p>
<div class="text-xs text-gray-400">核心验证2025Q1毛利率 > 25%</div>
</div>
</div>
<div class="card glass-card hover:scale-105 transition-transform">
<div class="card-body">
<h3 class="card-title text-yellow-400">中期策略 (6-12个月)</h3>
<p class="text-sm mb-3">等待2025年Q3碳酸锶价格拐点确认若价格跌破 <span class="text-error font-bold">1.3万元/吨</span><span class="badge badge-error">全面离场</span></p>
<div class="text-xs text-gray-400">核心观察:河北辛集化工复产进度</div>
</div>
</div>
<div class="card glass-card hover:scale-105 transition-transform">
<div class="card-body">
<h3 class="card-title text-cyan-400">长期策略 (>1年)</h3>
<p class="text-sm mb-3">密切关注中科院等科研机构在SrTiO₃量子器件领域的专利布局若有产业化公司成立可关注<span class="badge badge-info">一级市场</span></p>
<div class="text-xs text-gray-400">A股当前标的均不具备长期持有价值</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-black/40 py-8 mt-12">
<div class="container mx-auto px-4 text-center">
<p class="text-sm text-gray-500">⚠️ 投资忠告:<span class="text-gray-300 font-bold">莫将化工周期当科技革命</span>。这是一场资本游戏,认清自己是在交易碳酸锶涨价,还是在投资量子未来,前者是短期投机,后者是长期幻想。</p>
<p class="text-xs text-gray-600 mt-2">数据截止2025年3月 | 不构成投资建议</p>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,650 @@
<!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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.quantum-glow {
box-shadow: 0 0 30px rgba(102, 126, 234, 0.4);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.hover-scale {
transition: all 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.stock-table {
overflow-x: auto;
}
.stock-table::-webkit-scrollbar {
height: 8px;
}
.stock-table::-webkit-scrollbar-track {
background: #1f2937;
}
.stock-table::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 4px;
}
.stock-table::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.metric-card {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Hero Section -->
<div class="gradient-bg relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="relative container mx-auto px-4 py-16 lg:py-24">
<div class="text-center fade-in-up">
<div class="inline-flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full mb-6">
<span class="pulse-dot w-2 h-2 bg-green-400 rounded-full"></span>
<span class="text-sm font-medium">概念代码: 251020</span>
</div>
<h1 class="text-4xl lg:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-purple-200">
量子科技参股公司
</h1>
<p class="text-xl lg:text-2xl text-gray-200 mb-8 max-w-3xl mx-auto">
新质生产力核心赛道 · 国家战略级投资机遇
</p>
<div class="flex flex-wrap justify-center gap-4">
<div class="metric-card px-6 py-3 rounded-lg">
<div class="text-3xl font-bold text-purple-300">37+</div>
<div class="text-sm text-gray-300">核心企业受制裁</div>
</div>
<div class="metric-card px-6 py-3 rounded-lg">
<div class="text-3xl font-bold text-purple-300">504</div>
<div class="text-sm text-gray-300">比特超导量子突破</div>
</div>
<div class="metric-card px-6 py-3 rounded-lg">
<div class="text-3xl font-bold text-purple-300">10.75亿</div>
<div class="text-sm text-gray-300">美元并购金额</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0">
<svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#111827"/>
</svg>
</div>
</div>
<!-- Navigation Tabs -->
<div class="sticky top-0 z-40 bg-gray-800/90 backdrop-blur-md border-b border-gray-700">
<div class="container mx-auto px-4">
<div class="flex flex-wrap gap-2 py-4">
<button onclick="scrollToSection('events')" class="tab-btn px-4 py-2 rounded-lg bg-purple-600 text-white hover:bg-purple-700 transition">
<i class="fas fa-calendar-alt mr-2"></i>事件时间轴
</button>
<button onclick="scrollToSection('insight')" class="tab-btn px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
<i class="fas fa-lightbulb mr-2"></i>核心洞察
</button>
<button onclick="scrollToSection('industry')" class="tab-btn px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
<i class="fas fa-network-wired mr-2"></i>产业链分析
</button>
<button onclick="scrollToSection('stocks')" class="tab-btn px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
<i class="fas fa-chart-line mr-2"></i>股票数据
</button>
<button onclick="scrollToSection('risk')" class="tab-btn px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
<i class="fas fa-exclamation-triangle mr-2"></i>风险提示
</button>
</div>
</div>
</div>
<div class="container mx-auto px-4 py-12">
<!-- 概念事件时间轴 -->
<section id="events" class="mb-16 fade-in-up">
<h2 class="text-3xl font-bold mb-8 flex items-center">
<span class="w-1 h-8 bg-purple-500 mr-4"></span>
概念事件时间轴
</h2>
<div class="relative">
<div class="timeline-line absolute left-8 top-0 bottom-0 w-0.5"></div>
<div class="space-y-8">
<div class="flex items-start gap-4 hover-scale">
<div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold z-10">
2024
</div>
<div class="flex-1 bg-gray-800 rounded-lg p-6 border border-gray-700">
<div class="text-purple-400 font-semibold mb-2">2024年12月10日</div>
<div class="text-lg font-medium mb-2">概念首次集中爆发</div>
<div class="text-gray-400">
谷歌发布量子芯片,日经报道本源量子专利全球第一,海外龙头股新高
</div>
</div>
</div>
<div class="flex items-start gap-4 hover-scale">
<div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold z-10">
2025
</div>
<div class="flex-1 bg-gray-800 rounded-lg p-6 border border-gray-700">
<div class="text-purple-400 font-semibold mb-2">2025年5-6月</div>
<div class="text-lg font-medium mb-2">资本市场动作频现</div>
<div class="text-gray-400">
英伟达拟投资60亿美元量子企业IonQ 10.75亿美元收购牛津离子科技
</div>
</div>
</div>
<div class="flex items-start gap-4 hover-scale">
<div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center text-white font-bold z-10 pulse-dot">
NOW
</div>
<div class="flex-1 bg-gray-800 rounded-lg p-6 border border-green-600 quantum-glow">
<div class="text-green-400 font-semibold mb-2">2025年9-10月</div>
<div class="text-lg font-medium mb-2">政策预期达到顶峰</div>
<div class="text-gray-400">
国盾量子获6305.4万元大单,人民日报点名量子为新质生产力
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心洞察 -->
<section id="insight" class="mb-16 fade-in-up">
<h2 class="text-3xl font-bold mb-8 flex items-center">
<span class="w-1 h-8 bg-purple-500 mr-4"></span>
核心洞察
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gradient-to-br from-purple-900/50 to-blue-900/50 rounded-xl p-6 border border-purple-700/50">
<div class="flex items-center mb-4">
<i class="fas fa-rocket text-3xl text-purple-400 mr-4"></i>
<h3 class="text-xl font-semibold">核心驱动力</h3>
</div>
<ul class="space-y-3 text-gray-300">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<span><strong>政策驱动:</strong>国家战略意志,十五五规划重点</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<span><strong>技术竞赛:</strong>中美主导,全球科技竞争核心</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
<span><strong>参股模式:</strong>风险收益不对称的优选策略</span>
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-blue-900/50 to-cyan-900/50 rounded-xl p-6 border border-blue-700/50">
<div class="flex items-center mb-4">
<i class="fas fa-chart-line text-3xl text-blue-400 mr-4"></i>
<h3 class="text-xl font-semibold">市场认知</h3>
</div>
<div class="space-y-3 text-gray-300">
<div class="bg-gray-800/50 rounded-lg p-3">
<div class="text-sm text-gray-400 mb-1">市场热度</div>
<div class="flex items-center">
<div class="flex-1 bg-gray-700 rounded-full h-2">
<div class="bg-gradient-to-r from-yellow-400 to-red-500 h-2 rounded-full" style="width: 85%"></div>
</div>
<span class="ml-3 text-sm font-semibold">极高</span>
</div>
</div>
<div class="bg-gray-800/50 rounded-lg p-3">
<div class="text-sm text-gray-400 mb-1">主要预期差</div>
<p class="text-sm">商业化进程"冰与火" · 参股价值非即时性 · 业务关联真伪</p>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链分析 -->
<section id="industry" class="mb-16 fade-in-up">
<h2 class="text-3xl font-bold mb-8 flex items-center">
<span class="w-1 h-8 bg-purple-500 mr-4"></span>
产业链与核心公司
</h2>
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
<div class="grid md:grid-cols-4 gap-4 mb-6">
<div class="text-center p-4 bg-purple-900/30 rounded-lg">
<i class="fas fa-microchip text-3xl text-purple-400 mb-2"></i>
<div class="font-semibold">上游</div>
<div class="text-sm text-gray-400">核心硬件与设备</div>
</div>
<div class="text-center p-4 bg-blue-900/30 rounded-lg">
<i class="fas fa-server text-3xl text-blue-400 mb-2"></i>
<div class="font-semibold">中游</div>
<div class="text-sm text-gray-400">量子软硬件研发</div>
</div>
<div class="text-center p-4 bg-cyan-900/30 rounded-lg">
<i class="fas fa-industry text-3xl text-cyan-400 mb-2"></i>
<div class="font-semibold">下游</div>
<div class="text-sm text-gray-400">应用与集成</div>
</div>
<div class="text-center p-4 bg-green-900/30 rounded-lg">
<i class="fas fa-coins text-3xl text-green-400 mb-2"></i>
<div class="font-semibold">资本层</div>
<div class="text-sm text-gray-400">参股公司</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b border-gray-700">
<th class="text-left py-3 px-4">公司名称</th>
<th class="text-left py-3 px-4">参股标的/逻辑</th>
<th class="text-left py-3 px-4">竞争优势</th>
<th class="text-left py-3 px-4">投资定位</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="py-3 px-4 font-semibold text-purple-400">普源精电</td>
<td class="py-3 px-4">耐输电子(32.26%)</td>
<td class="py-3 px-4">量子计算机"CPU主板"供应商</td>
<td class="py-3 px-4"><span class="bg-green-600/20 text-green-400 px-2 py-1 rounded text-sm">首选</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="py-3 px-4 font-semibold text-purple-400">国盾量子</td>
<td class="py-3 px-4">产业龙头自身</td>
<td class="py-3 px-4">技术全面,深度绑定电信</td>
<td class="py-3 px-4"><span class="bg-blue-600/20 text-blue-400 px-2 py-1 rounded text-sm">次选</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/50 transition">
<td class="py-3 px-4 font-semibold text-purple-400">科大国创</td>
<td class="py-3 px-4">国仪量子(2.75%)</td>
<td class="py-3 px-4">"一篮子"投资,风险对冲</td>
<td class="py-3 px-4"><span class="bg-yellow-600/20 text-yellow-400 px-2 py-1 rounded text-sm">关注</span></td>
</tr>
<tr class="hover:bg-gray-700/50 transition">
<td class="py-3 px-4 font-semibold text-gray-400">德美化工等</td>
<td class="py-3 px-4">本源量子(0.24%)</td>
<td class="py-3 px-4">持股比例极低</td>
<td class="py-3 px-4"><span class="bg-red-600/20 text-red-400 px-2 py-1 rounded text-sm">规避</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 股票数据 -->
<section id="stocks" class="mb-16 fade-in-up">
<h2 class="text-3xl font-bold mb-8 flex items-center">
<span class="w-1 h-8 bg-purple-500 mr-4"></span>
股票数据
</h2>
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
<div class="mb-4 flex flex-wrap gap-2">
<span class="bg-purple-600/20 text-purple-400 px-3 py-1 rounded-full text-sm">本源量子参股</span>
<span class="bg-blue-600/20 text-blue-400 px-3 py-1 rounded-full text-sm">国仪量子参股</span>
<span class="bg-cyan-600/20 text-cyan-400 px-3 py-1 rounded-full text-sm">其他量子企业</span>
</div>
<div class="stock-table">
<table class="w-full min-w-[800px]">
<thead>
<tr class="bg-gray-900">
<th class="text-left py-3 px-4 sticky left-0 bg-gray-900">股票代码</th>
<th class="text-left py-3 px-4">公司名称</th>
<th class="text-left py-3 px-4">参股标的</th>
<th class="text-left py-3 px-4">持股比例</th>
<th class="text-left py-3 px-4">相关业务</th>
<th class="text-left py-3 px-4">信源</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">002054</td>
<td class="py-3 px-4">德美化工</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-orange-400">0.24%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过佛山德盛天林基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">600606</td>
<td class="py-3 px-4">绿地控股</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-orange-400">0.22%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过中金祺智基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">300520</td>
<td class="py-3 px-4">科大国创</td>
<td class="py-3 px-4"><span class="bg-blue-600/20 text-blue-300 px-2 py-1 rounded text-xs">国仪量子</span></td>
<td class="py-3 px-4 text-green-400 font-semibold">2.75%</td>
<td class="py-3 px-4 text-sm text-gray-400">直接持股</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">300520</td>
<td class="py-3 px-4">科大国创</td>
<td class="py-3 px-4"><span class="bg-cyan-600/20 text-cyan-300 px-2 py-1 rounded text-xs">九章量子</span></td>
<td class="py-3 px-4 text-green-400 font-semibold">4.28%</td>
<td class="py-3 px-4 text-sm text-gray-400">直接持股</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">002308</td>
<td class="py-3 px-4">中际旭创</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-orange-400">0.19%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过陕西先导光电基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">002230</td>
<td class="py-3 px-4">科大讯飞</td>
<td class="py-3 px-4"><span class="bg-blue-600/20 text-blue-300 px-2 py-1 rounded text-xs">国仪量子</span></td>
<td class="py-3 px-4 text-yellow-400">1.40%</td>
<td class="py-3 px-4 text-sm text-gray-400">直接持股</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">600635</td>
<td class="py-3 px-4">大众公用</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-orange-400">0.17%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过深创投间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">002386</td>
<td class="py-3 px-4">天原股份</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-orange-400">0.10%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过佛山德盛天林基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">000027</td>
<td class="py-3 px-4">深圳能源</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-orange-400">0.08%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过深创投间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">002029</td>
<td class="py-3 px-4">七匹狼</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-orange-400">0.06%</td>
<td class="py-3 px-4 text-sm text-gray-400">控股股东通过深创投间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">603878</td>
<td class="py-3 px-4">武进不锈</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-orange-400">0.04%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过福州宜德基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">600571</td>
<td class="py-3 px-4">信雅达</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-orange-400">0.02%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过福州宜德基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">300240</td>
<td class="py-3 px-4">飞力达</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-gray-500">比例极低</td>
<td class="py-3 px-4 text-sm text-gray-400">通过惠泉双禺基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">000539</td>
<td class="py-3 px-4">粤电力A</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-gray-500">比例极低</td>
<td class="py-3 px-4 text-sm text-gray-400">通过深创投间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">601333</td>
<td class="py-3 px-4">广深铁路</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-gray-500">比例极低</td>
<td class="py-3 px-4 text-sm text-gray-400">通过深创投间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">000063</td>
<td class="py-3 px-4">中兴通讯</td>
<td class="py-3 px-4"><span class="bg-purple-600/20 text-purple-300 px-2 py-1 rounded text-xs">本源量子</span></td>
<td class="py-3 px-4 text-gray-500">比例极低</td>
<td class="py-3 px-4 text-sm text-gray-400">通过深创投间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">002543</td>
<td class="py-3 px-4">万和电气</td>
<td class="py-3 px-4"><span class="bg-blue-600/20 text-blue-300 px-2 py-1 rounded text-xs">国仪量子</span></td>
<td class="py-3 px-4 text-orange-400">0.03%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过前海股权投资基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">601336</td>
<td class="py-3 px-4">新华保险</td>
<td class="py-3 px-4"><span class="bg-blue-600/20 text-blue-300 px-2 py-1 rounded text-xs">国仪量子</span></td>
<td class="py-3 px-4 text-orange-400">0.02%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过前海股权投资基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">300349</td>
<td class="py-3 px-4">金卡智能</td>
<td class="py-3 px-4"><span class="bg-green-600/20 text-green-300 px-2 py-1 rounded text-xs">国科量子</span></td>
<td class="py-3 px-4 text-yellow-400">0.59%</td>
<td class="py-3 px-4 text-sm text-gray-400">间接持有股权</td>
<td class="py-3 px-4"><span class="bg-blue-700 px-2 py-1 rounded text-xs">互动</span></td>
</tr>
<tr class="hover:bg-gray-700/30 transition">
<td class="py-3 px-4 font-semibold sticky left-0 bg-gray-800">300250</td>
<td class="py-3 px-4">初灵信息</td>
<td class="py-3 px-4"><span class="bg-yellow-600/20 text-yellow-300 px-2 py-1 rounded text-xs">玻色量子</span></td>
<td class="py-3 px-4 text-orange-400">0.05%</td>
<td class="py-3 px-4 text-sm text-gray-400">通过北京中移数字基金间接持有</td>
<td class="py-3 px-4"><span class="bg-gray-700 px-2 py-1 rounded text-xs">工商</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 风险提示 -->
<section id="risk" class="mb-16 fade-in-up">
<h2 class="text-3xl font-bold mb-8 flex items-center">
<span class="w-1 h-8 bg-red-500 mr-4"></span>
风险提示
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-red-900/20 border border-red-800 rounded-xl p-6">
<i class="fas fa-microchip text-3xl text-red-400 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">技术风险</h3>
<p class="text-gray-400 text-sm">
量子纠错和比特相干性是核心挑战,技术路径可能出现颠覆性变化,现有投资存在归零风险
</p>
</div>
<div class="bg-orange-900/20 border border-orange-800 rounded-xl p-6">
<i class="fas fa-chart-line text-3xl text-orange-400 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">商业化风险</h3>
<p class="text-gray-400 text-sm">
成本高昂、杀手级应用缺失,目前依赖政府订单,市场化造血能力弱,商业模式尚未跑通
</p>
</div>
<div class="bg-yellow-900/20 border border-yellow-800 rounded-xl p-6">
<i class="fas fa-globe text-3xl text-yellow-400 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">政策竞争风险</h3>
<p class="text-gray-400 text-sm">
美国37家核心企业被制裁关键设备可能卡脖子国内竞争格局可能随技术路线分化而改变
</p>
</div>
</div>
</section>
<!-- 投资结论 -->
<section class="mb-16 fade-in-up">
<div class="bg-gradient-to-r from-purple-900/50 to-blue-900/50 rounded-2xl p-8 border border-purple-700/50">
<h2 class="text-3xl font-bold mb-6 text-center">综合结论与投资启示</h2>
<div class="max-w-4xl mx-auto">
<p class="text-lg text-gray-200 mb-6 leading-relaxed">
量子科技参股公司概念目前处于<strong class="text-purple-400">"主题投资向基本面驱动过渡"</strong>的关键节点。政策的强有力支持和部分商业化订单的落地,为概念提供了比纯炒作更强的支撑。
</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-800/50 rounded-lg p-4">
<h3 class="font-semibold text-green-400 mb-3">最具投资价值方向</h3>
<ol class="space-y-2 text-sm">
<li>1. <strong class="text-purple-300">上游设备供应商:</strong>普源精电(确定性高)</li>
<li>2. <strong class="text-purple-300">产业龙头:</strong>国盾量子(弹性大)</li>
<li>3. <strong class="text-purple-300">一篮子投资:</strong>科大国创(风险分散)</li>
</ol>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h3 class="font-semibold text-yellow-400 mb-3">关键跟踪指标</h3>
<ul class="space-y-2 text-sm">
<li>• 十五五规划具体内容</li>
<li>• 国仪/本源IPO进程</li>
<li>• 龙头公司订单情况</li>
<li>• 新技术突破发布</li>
</ul>
</div>
</div>
<div class="mt-6 p-4 bg-red-900/20 rounded-lg border border-red-800">
<p class="text-sm text-red-300">
<i class="fas fa-exclamation-triangle mr-2"></i>
<strong>风险提示:</strong>规避持股比例极低的"蹭概念"公司,警惕纯粹的概念炒作。
</p>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer class="bg-gray-800 border-t border-gray-700 py-8">
<div class="container mx-auto px-4 text-center text-gray-400">
<p class="mb-2">数据来源新闻、路演、Insight综合分析</p>
<p class="text-sm">© 2025 量子科技参股公司概念分析 | 投资有风险,入市需谨慎</p>
</div>
</footer>
<script>
// Smooth scroll to section
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
// Update active tab
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('bg-purple-600', 'text-white');
btn.classList.add('bg-gray-700');
});
event.target.classList.remove('bg-gray-700');
event.target.classList.add('bg-purple-600', 'text-white');
}
// Add animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in-up');
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
// Interactive table row highlighting
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.transform = 'translateX(4px)';
this.style.transition = 'all 0.2s ease';
});
row.addEventListener('mouseleave', function() {
this.style.transform = 'translateX(0)';
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,639 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>金属空气电池 - 新一代能源革命的前沿</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-morphism {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
left: -10px;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.stock-row {
transition: all 0.3s ease;
}
.stock-row:hover {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
transform: translateX(5px);
}
.badge-heat {
animation: heatPulse 1.5s ease-in-out infinite;
}
@keyframes heatPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
</style>
</head>
<body>
<!-- Hero Section -->
<div class="hero min-h-screen bg-gradient-to-br from-purple-600 via-pink-500 to-red-500 text-white">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content p-10">
<div class="max-w-5xl">
<div class="badge badge-warning badge-lg mb-4 badge-heat">
<i class="fas fa-fire-alt mr-2"></i>热点追踪
</div>
<h1 class="mb-5 text-5xl md:text-7xl font-bold">
金属空气电池
</h1>
<p class="mb-5 text-xl md:text-2xl">
新一代能源革命的前沿技术
</p>
<div class="glass-morphism rounded-2xl p-6 text-gray-800 text-left mt-10">
<div class="flex items-center mb-4">
<i class="fas fa-bolt text-yellow-500 text-3xl mr-3"></i>
<h3 class="text-2xl font-bold gradient-text">核心催化</h3>
</div>
<p class="text-lg leading-relaxed">
2025年10月23日工信部装备工业发展中心副主任柳新岩在2025新能源电池产业发展大会上明确提出
<span class="font-bold text-purple-600">"系统布局金属空气电池等新一代电池研发工作,加速产业化进程"</span>
</p>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white rounded-lg p-4 hover-scale">
<i class="fas fa-rocket text-3xl text-blue-500 mb-2"></i>
<h4 class="font-semibold">政策驱动</h4>
<p class="text-sm text-gray-600">国家战略布局</p>
</div>
<div class="bg-white rounded-lg p-4 hover-scale">
<i class="fas fa-battery-full text-3xl text-green-500 mb-2"></i>
<h4 class="font-semibold">理论优势</h4>
<p class="text-sm text-gray-600">超高能量密度</p>
</div>
<div class="bg-white rounded-lg p-4 hover-scale">
<i class="fas fa-shield-alt text-3xl text-purple-500 mb-2"></i>
<h4 class="font-semibold">资源安全</h4>
<p class="text-sm text-gray-600">铝锌资源丰富</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Timeline Section -->
<div class="container mx-auto px-4 py-16">
<div class="glass-morphism rounded-3xl p-8">
<h2 class="text-4xl font-bold text-center mb-10 gradient-text">关键事件时间线</h2>
<div class="relative">
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-purple-600 to-pink-500"></div>
<div class="mb-8 timeline-dot ml-16">
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-500">2024年9月24日</span>
<span class="badge badge-info">技术突破</span>
</div>
<h3 class="text-xl font-bold mb-2">澳大利亚莫纳什大学研发突破</h3>
<p class="text-gray-700">复合催化剂使锌空气电池实现<strong>74天</strong>稳定充放电循环,次数达<strong>3552次</strong>,创纪录</p>
</div>
</div>
<div class="mb-8 timeline-dot ml-16">
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-500">2025年4月11日</span>
<span class="badge badge-success">产业布局</span>
</div>
<h3 class="text-xl font-bold mb-2">比亚迪公布锌离子电池专利</h3>
<p class="text-gray-700">头部企业积极布局锌离子技术路线,为锌空气电池发展奠定基础</p>
</div>
</div>
<div class="mb-8 timeline-dot ml-16">
<div class="bg-gradient-to-r from-purple-600 to-pink-500 text-white rounded-xl shadow-lg p-6 pulse-animation">
<div class="flex items-center justify-between mb-2">
<span class="text-sm">2025年10月23日</span>
<span class="badge badge-warning">核心催化剂</span>
</div>
<h3 class="text-2xl font-bold mb-2">工信部官方定调</h3>
<p class="text-white/90">首次将金属空气电池与全固态电池并列,提升至国家新一代电池技术研发战略高度</p>
</div>
</div>
<div class="timeline-dot ml-16">
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-500">2025年10月23日后</span>
<span class="badge badge-secondary">市场响应</span>
</div>
<h3 class="text-xl font-bold mb-2">概念股名单快速扩散</h3>
<p class="text-gray-700">资本市场迅速响应,各类财经平台传播相关产业链公司名单</p>
</div>
</div>
</div>
</div>
</div>
<!-- Market Analysis Section -->
<div class="container mx-auto px-4 py-16">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Core Logic -->
<div class="glass-morphism rounded-3xl p-8">
<div class="flex items-center mb-6">
<i class="fas fa-lightbulb text-yellow-500 text-3xl mr-3"></i>
<h2 class="text-3xl font-bold gradient-text">核心逻辑分析</h2>
</div>
<div class="space-y-4">
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-4 border-l-4 border-blue-500">
<h4 class="font-semibold text-blue-700 mb-2">
<i class="fas fa-flag mr-2"></i>政策驱动
</h4>
<p class="text-sm text-gray-700">工信部官方定调是本次概念行情的"发令枪",赋予"国家队"身份</p>
</div>
<div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-4 border-l-4 border-green-500">
<h4 class="font-semibold text-green-700 mb-2">
<i class="fas fa-chart-line mr-2"></i>理论优势
</h4>
<p class="text-sm text-gray-700">铝空气电池理论能量密度极高,有望解决续航焦虑</p>
</div>
<div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-4 border-l-4 border-purple-500">
<h4 class="font-semibold text-purple-700 mb-2">
<i class="fas fa-lock mr-2"></i>资源安全
</h4>
<p class="text-sm text-gray-700">依赖铝、锌等储量丰富金属,降低对锂资源依赖</p>
</div>
</div>
<div class="mt-6 p-4 bg-yellow-50 rounded-xl border-2 border-yellow-200">
<p class="text-sm font-semibold text-yellow-800">
<i class="fas fa-exclamation-triangle mr-2"></i>
关键提示:当前仍处早期研发阶段,投资主题性远大于基本面
</p>
</div>
</div>
<!-- Expectation Gap -->
<div class="glass-morphism rounded-3xl p-8">
<div class="flex items-center mb-6">
<i class="fas fa-exchange-alt text-red-500 text-3xl mr-3"></i>
<h2 class="text-3xl font-bold gradient-text">预期差分析</h2>
</div>
<div class="bg-red-50 rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="flex-1">
<h3 class="font-bold text-lg text-red-700 mb-2">市场认知</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-start">
<i class="fas fa-arrow-up text-red-500 mt-1 mr-2"></i>
<span>"金属空气电池即将产业化"</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-up text-red-500 mt-1 mr-2"></i>
<span>产业链公司深度参与</span>
</li>
</ul>
</div>
<div class="mx-4 text-3xl text-gray-400">VS</div>
<div class="flex-1">
<h3 class="font-bold text-lg text-blue-700 mb-2">产业现实</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-start">
<i class="fas fa-arrow-down text-blue-500 mt-1 mr-2"></i>
<span>产业界全力聚焦固态电池</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-down text-blue-500 mt-1 mr-2"></i>
<span>多数公司处于前瞻研究阶段</span>
</li>
</ul>
</div>
</div>
<div class="bg-white rounded-lg p-4 border-2 border-red-200">
<p class="text-sm text-red-800 font-medium">
<i class="fas fa-info-circle mr-2"></i>
<strong>核心矛盾:</strong>路演数据显示所有主流厂商都在攻坚固态电池,对金属空气电池几乎只字未提
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="container mx-auto px-4 py-16">
<div class="glass-morphism rounded-3xl p-8">
<div class="flex items-center justify-between mb-8">
<div class="flex items-center">
<i class="fas fa-chart-bar text-green-500 text-3xl mr-3"></i>
<h2 class="text-3xl font-bold gradient-text">产业链核心公司</h2>
</div>
<div class="badge badge-success badge-lg">
<i class="fas fa-building mr-2"></i>共 11 家
</div>
</div>
<div class="overflow-x-auto custom-scrollbar">
<table class="table w-full">
<thead>
<tr class="bg-gradient-to-r from-purple-600 to-pink-500 text-white">
<th class="text-left">股票名称</th>
<th class="text-left">分类</th>
<th class="text-left">项目/技术</th>
<th class="text-left">参与逻辑</th>
<th class="text-center">风险评级</th>
</tr>
</thead>
<tbody>
<tr class="stock-row">
<td class="font-bold text-purple-600">雄韬股份</td>
<td><span class="badge badge-info">锌空气电池</span></td>
<td>锌离子、铝空气、燃料电池</td>
<td class="text-sm">注重新型产品技术储备,加大研发投入</td>
<td class="text-center"><span class="badge badge-warning">高风险高弹性</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">鹏辉能源</td>
<td><span class="badge badge-info">锌空气电池</span></td>
<td>石墨烯电池应用</td>
<td class="text-sm">前瞻性研究,具备产业化优势</td>
<td class="text-center"><span class="badge badge-warning">中高风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">云铝股份</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>参股创能斐源公司</td>
<td class="text-sm">产业链一体化,铝资源优势</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">中国铝业</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>铝阳极材料开发</td>
<td class="text-sm">上游资源龙头,主业稳健</td>
<td class="text-center"><span class="badge badge-success">低风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">尖峰集团</td>
<td><span class="badge badge-info">锌空气电池</span></td>
<td>参股上海博信</td>
<td class="text-sm text-red-600">已停止运营,全额计提坏账</td>
<td class="text-center"><span class="badge badge-error">极高风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">智慧农业</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>铝空电池储能应用</td>
<td class="text-sm">应急备用电源场景应用</td>
<td class="text-center"><span class="badge badge-warning">中高风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">新疆众和</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>发明专利申请</td>
<td class="text-sm">技术研发储备中</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">南山铝业</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>行业进展关注</td>
<td class="text-sm text-gray-500">仅关注,无实质性动作</td>
<td class="text-center"><span class="badge badge-success">低相关性</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">宝武镁业</td>
<td><span class="badge badge-secondary">镁空气电池</span></td>
<td>镁储氢研究</td>
<td class="text-sm">相关领域研究储备</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">濮耐股份</td>
<td><span class="badge badge-secondary">镁空气电池</span></td>
<td>超高纯氧化镁</td>
<td class="text-sm">电解液缓蚀剂应用</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">科力远</td>
<td><span class="badge badge-outline">其他</span></td>
<td>新型镍氢电池</td>
<td class="text-sm">多技术路线布局</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Risk & Opportunity Section -->
<div class="container mx-auto px-4 py-16">
<div class="glass-morphism rounded-3xl p-8">
<h2 class="text-3xl font-bold text-center mb-10 gradient-text">风险与机遇分析</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Risks -->
<div class="bg-gradient-to-br from-red-50 to-orange-50 rounded-2xl p-6">
<div class="flex items-center mb-4">
<i class="fas fa-exclamation-triangle text-red-500 text-3xl mr-3"></i>
<h3 class="text-2xl font-bold text-red-700">主要风险</h3>
</div>
<div class="space-y-3">
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-600 mb-1">
<i class="fas fa-microscope mr-2"></i>技术风险
</h4>
<p class="text-sm text-gray-700">催化剂成本高、寿命短;金属负极自腐蚀严重</p>
</div>
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-600 mb-1">
<i class="fas fa-coins mr-2"></i>商业化风险
</h4>
<p class="text-sm text-gray-700">初期成本高昂,面临锂电和固态电池竞争</p>
</div>
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-600 mb-1">
<i class="fas fa-sync-alt mr-2"></i>政策持续性
</h4>
<p class="text-sm text-gray-700">政策热度可能是一日游,需持续资金支持</p>
</div>
</div>
</div>
<!-- Opportunities -->
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6">
<div class="flex items-center mb-4">
<i class="fas fa-rocket text-green-500 text-3xl mr-3"></i>
<h3 class="text-2xl font-bold text-green-700">发展机遇</h3>
</div>
<div class="space-y-3">
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-green-600 mb-1">
<i class="fas fa-globe mr-2"></i>利基市场
</h4>
<p class="text-sm text-gray-700">通信基站、军用设备、长航时无人机</p>
</div>
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-green-600 mb-1">
<i class="fas fa-chart-line mr-2"></i>长期价值
</h4>
<p class="text-sm text-gray-700">解决资源安全,理论能量密度优势显著</p>
</div>
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-green-600 mb-1">
<i class="fas fa-users mr-2"></i>政策红利
</h4>
<p class="text-sm text-gray-700">国家级研发资金和政策倾斜</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Investment Strategy -->
<div class="container mx-auto px-4 py-16">
<div class="glass-morphism rounded-3xl p-8">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold gradient-text mb-4">投资策略建议</h2>
<p class="text-gray-600">基于当前认知差和风险收益比</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-purple-100 to-pink-100 rounded-2xl p-6 text-center hover-scale">
<div class="w-20 h-20 bg-gradient-to-br from-purple-600 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-dice text-white text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">高弹性策略</h3>
<p class="text-sm text-gray-700 mb-3">追求高收益,承受高风险</p>
<div class="text-left space-y-2">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm">关注雄韬股份</span>
</div>
<div class="flex items-center">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
<span class="text-sm">概念领头羊</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-blue-100 to-cyan-100 rounded-2xl p-6 text-center hover-scale">
<div class="w-20 h-20 bg-gradient-to-br from-blue-600 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-shield-alt text-white text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">稳健策略</h3>
<p class="text-sm text-gray-700 mb-3">主业支撑,技术期权</p>
<div class="text-left space-y-2">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm">关注中国铝业</span>
</div>
<div class="flex items-center">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
<span class="text-sm">上游资源巨头</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-red-100 to-orange-100 rounded-2xl p-6 text-center hover-scale">
<div class="w-20 h-20 bg-gradient-to-br from-red-600 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-eye-slash text-white text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">规避策略</h3>
<p class="text-sm text-gray-700 mb-3">逻辑薄弱,风险较高</p>
<div class="text-left space-y-2">
<div class="flex items-center">
<i class="fas fa-times-circle text-red-500 mr-2"></i>
<span class="text-sm">规避尖峰集团</span>
</div>
<div class="flex items-center">
<i class="fas fa-times-circle text-red-500 mr-2"></i>
<span class="text-sm">规避南山铝业</span>
</div>
</div>
</div>
</div>
<div class="mt-10 bg-gradient-to-r from-yellow-50 to-amber-50 rounded-2xl p-6 border-2 border-yellow-300">
<h4 class="font-bold text-lg text-yellow-800 mb-3">
<i class="fas fa-key mr-2"></i>关键跟踪指标
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div class="flex items-start">
<i class="fas fa-certificate text-yellow-600 mt-1 mr-2"></i>
<span><strong>政策层面:</strong>国家重大科技专项项目及资金规模</span>
</div>
<div class="flex items-start">
<i class="fas fa-flask text-yellow-600 mt-1 mr-2"></i>
<span><strong>公司层面:</strong>研发费用变化及中试线建设</span>
</div>
<div class="flex items-start">
<i class="fas fa-microscope text-yellow-600 mt-1 mr-2"></i>
<span><strong>技术层面:</strong>循环寿命>1000次突破进展</span>
</div>
<div class="flex items-start">
<i class="fas fa-industry text-yellow-600 mt-1 mr-2"></i>
<span><strong>应用层面:</strong>首个商业化示范项目落地</span>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 mt-20">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h3 class="text-2xl font-bold gradient-text">金属空气电池</h3>
<p class="text-gray-400 mt-2">新一代能源革命的前沿技术分析</p>
</div>
<div class="flex space-x-6">
<div class="text-center">
<i class="fas fa-calendar-alt text-3xl mb-2"></i>
<p class="text-sm">2025年10月更新</p>
</div>
<div class="text-center">
<i class="fas fa-chart-pie text-3xl mb-2"></i>
<p class="text-sm">深度研究</p>
</div>
<div class="text-center">
<i class="fas fa-exclamation-triangle text-3xl mb-2"></i>
<p class="text-sm">风险提示</p>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2025 金属空气电池概念分析 | 本报告仅供研究参考,不构成投资建议</p>
</div>
</div>
</footer>
<script>
// Add smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add parallax effect to hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.hero');
if (hero) {
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
// Intersection Observer for fade-in animations
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('.glass-morphism').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);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,454 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿里"千问"项目 - AI时代的未来之战</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#8b5cf6',
accent: '#ec4899',
},
animation: {
'fade-in': 'fadeIn 0.6s ease-in-out',
'slide-up': 'slideUp 0.5s ease-out',
'glow': 'glow 2s ease-in-out infinite alternate',
}
}
}
}
</script>
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes glow {
from { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
to { box-shadow: 0 0 30px rgba(139, 92, 246, 0.5); }
}
.gradient-text {
background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-item::before {
content: '';
position: absolute;
left: -6px;
top: 0;
width: 12px;
height: 12px;
background: #6366f1;
border-radius: 50%;
box-shadow: 0 0 10px #6366f1;
}
.stock-table tr:hover {
background: rgba(99, 102, 241, 0.1);
transform: scale(1.02);
transition: all 0.3s ease;
}
.milestone-card {
backdrop-filter: blur(10px);
border: 1px solid rgba(99, 102, 241, 0.2);
}
</style>
</head>
<body class="bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 text-white overflow-x-hidden">
<!-- Hero Section -->
<section class="min-h-screen flex items-center justify-center relative px-4 py-20">
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900/20 to-transparent"></div>
<div class="container mx-auto text-center relative z-10">
<div class="animate-glow inline-block mb-8">
<i class="fas fa-brain text-6xl md:text-8xl text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500"></i>
</div>
<h1 class="text-5xl md:text-7xl font-bold gradient-text mb-6 animate-fade-in">
阿里"千问"项目
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto leading-relaxed animate-fade-in">
从B端到C端从开源模型到AI助手阿里巴巴正在打响"AI时代的未来之战"
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 max-w-6xl mx-auto">
<div class="milestone-card bg-white/5 p-6 rounded-2xl animate-slide-up">
<div class="text-3xl font-bold text-indigo-400 mb-2">2000亿+</div>
<div class="text-gray-400">周Token调用量</div>
</div>
<div class="milestone-card bg-white/5 p-6 rounded-2xl animate-slide-up" style="animation-delay: 0.2s;">
<div class="text-3xl font-bold text-purple-400 mb-2">2亿+</div>
<div class="text-gray-400">开源模型下载量</div>
</div>
<div class="milestone-card bg-white/5 p-6 rounded-2xl animate-slide-up" style="animation-delay: 0.4s;">
<div class="text-3xl font-bold text-pink-400 mb-2">3800亿</div>
<div class="text-gray-400">AI基础设施投入</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="py-20 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">项目发展时间轴</h2>
<div class="relative">
<div class="absolute left-4 md:left-1/2 h-full w-0.5 bg-gradient-to-b from-indigo-500 to-purple-500"></div>
<div class="space-y-12">
<div class="timeline-item relative pl-16 md:pl-0 md:w-1/2 md:pr-8 md:text-right animate-fade-in">
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-indigo-500/20">
<div class="text-indigo-400 font-bold text-sm mb-2">2025年11月13日</div>
<h3 class="text-xl font-semibold mb-3">千问项目官宣</h3>
<p class="text-gray-400">秘密启动"千问"项目基于Qwen最强模型打造个人AI助手APP全面对标ChatGPT被核心管理层视为"AI时代的未来之战"</p>
</div>
</div>
<div class="timeline-item relative pl-16 md:pl-0 md:w-1/2 md:ml-auto md:pl-8 animate-fade-in" style="animation-delay: 0.2s;">
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-purple-500/20">
<div class="text-purple-400 font-bold text-sm mb-2">2025年7月28日</div>
<h3 class="text-xl font-semibold mb-3">API调用量跃居全球第四</h3>
<p class="text-gray-400">千问以10.4%市场份额超越OpenAI单周总调用量超2000亿Tokens在OpenRouter平台成长最快模型中包揽前三</p>
</div>
</div>
<div class="timeline-item relative pl-16 md:pl-0 md:w-1/2 md:pr-8 md:text-right animate-fade-in" style="animation-delay: 0.4s;">
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-indigo-500/20">
<div class="text-indigo-400 font-bold text-sm mb-2">2025年4月29日</div>
<h3 class="text-xl font-semibold mb-3">Qwen3系列正式发布</h3>
<p class="text-gray-400">开源Qwen3系列模型旗舰模型Qwen3-235B-A22B在编码、数学、通用能力等基准评估中达到国际顶尖水平</p>
</div>
</div>
<div class="timeline-item relative pl-16 md:pl-0 md:w-1/2 md:ml-auto md:pl-8 animate-fade-in" style="animation-delay: 0.6s;">
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-purple-500/20">
<div class="text-purple-400 font-bold text-sm mb-2">2025年1月29日</div>
<h3 class="text-xl font-semibold mb-3">Qwen2.5-Max发布</h3>
<p class="text-gray-400">旗舰版模型发布预训练数据超20万亿tokens在多项基准测试中表现优异</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Logic Section -->
<section class="py-20 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">核心逻辑与市场认知</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gradient-to-br from-indigo-500/10 to-purple-500/10 p-8 rounded-2xl border border-indigo-500/30 backdrop-blur-sm animate-slide-up">
<div class="text-4xl mb-4 text-indigo-400">
<i class="fas fa-layer-group"></i>
</div>
<h3 class="text-2xl font-bold mb-4">技术底座优势</h3>
<p class="text-gray-300 leading-relaxed">
<span class="text-indigo-400 font-semibold">开源生态滚雪球:</span>下载量突破2亿次衍生模型超9万个<br><br>
<span class="text-purple-400 font-semibold">成本革命:</span>千问3 MAX训练成本降低超90%,打破"大模型烧钱诅咒"<br><br>
<span class="text-pink-400 font-semibold">市场低估:</span>已构建"低成本+高性能"工业化量产能力
</p>
</div>
<div class="bg-gradient-to-br from-purple-500/10 to-pink-500/10 p-8 rounded-2xl border border-purple-500/30 backdrop-blur-sm animate-slide-up" style="animation-delay: 0.2s;">
<div class="text-4xl mb-4 text-purple-400">
<i class="fas fa-exchange-alt"></i>
</div>
<h3 class="text-2xl font-bold mb-4">战略卡位升级</h3>
<p class="text-gray-300 leading-relaxed">
<span class="text-purple-400 font-semibold">B端壁垒</span>API调用量全球第四客户切换成本极高<br><br>
<span class="text-pink-400 font-semibold">C端意义</span>不仅是独立APP更是改造阿里10亿用户生态的智能中枢<br><br>
<span class="text-indigo-400 font-semibold">独特闭环:</span>电商+支付场景构成差异化竞争护城河
</p>
</div>
<div class="bg-gradient-to-br from-pink-500/10 to-indigo-500/10 p-8 rounded-2xl border border-pink-500/30 backdrop-blur-sm animate-slide-up" style="animation-delay: 0.4s;">
<div class="text-4xl mb-4 text-pink-400">
<i class="fas fa-server"></i>
</div>
<h3 class="text-2xl font-bold mb-4">基础设施兑现</h3>
<p class="text-gray-300 leading-relaxed">
<span class="text-pink-400 font-semibold">3800亿投入</span>构建全栈算力闭环,自研平头哥芯片优化成本<br><br>
<span class="text-indigo-400 font-semibold">收入验证:</span>阿里云AI收入保持三位数增速占比已达10%左右<br><br>
<span class="text-purple-400 font-semibold">估值重塑:</span>从卖铲子到挖金矿云业务估值有望对标AWS
</p>
</div>
</div>
</div>
</section>
<!-- Stock Data Section -->
<section class="py-20 px-4">
<div class="container mx-auto max-w-7xl">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">产业链核心公司</h2>
<!-- Category Tabs -->
<div class="tabs tabs-boxed bg-white/5 p-2 rounded-full mb-8 flex flex-wrap justify-center gap-2">
<button class="tab tab-active rounded-full px-4 py-2" onclick="showCategory('all')">全部公司</button>
<button class="tab rounded-full px-4 py-2" onclick="showCategory('idc')">数据中心/算力</button>
<button class="tab rounded-full px-4 py-2" onclick="showCategory('ecommerce')">电商生态</button>
<button class="tab rounded-full px-4 py-2" onclick="showCategory('investment')">战略投资</button>
</div>
<!-- Table -->
<div class="overflow-x-auto rounded-2xl bg-white/5 backdrop-blur-sm border border-white/10">
<table class="table stock-table w-full">
<thead class="bg-gradient-to-r from-indigo-600/50 to-purple-600/50">
<tr class="text-white">
<th class="py-4 px-6 text-center">股票名称</th>
<th class="py-4 px-6 text-center">关联类别</th>
<th class="py-4 px-6 text-center">相关性描述</th>
<th class="py-4 px-6 text-center">投资评级</th>
</tr>
</thead>
<tbody id="stockTableBody" class="divide-y divide-white/10">
<!-- 数据中心/算力 -->
<tr class="idc-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-indigo-400">数据港</td>
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
<td class="py-4 px-6 text-gray-300">阿里华东区主要数据节点,机柜上架率提升确定性强</td>
<td class="py-4 px-6 text-center"><span class="badge badge-success font-bold">领导者</span></td>
</tr>
<tr class="idc-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-indigo-400">润建股份</td>
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
<td class="py-4 px-6 text-gray-300">与阿里云合资"中国-东盟智算云",逻辑最纯粹标的</td>
<td class="py-4 px-6 text-center"><span class="badge badge-success font-bold">逻辑纯粹</span></td>
</tr>
<tr class="idc-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-indigo-400">杭钢股份</td>
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
<td class="py-4 px-6 text-gray-300">浙江云公司主动对接阿里需求已投运1069个机柜可运行服务器2.1万台</td>
<td class="py-4 px-6 text-center"><span class="badge badge-warning font-bold">追赶者</span></td>
</tr>
<tr class="idc-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-indigo-400">宝信软件</td>
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
<td class="py-4 px-6 text-gray-300">宝之云园区作为阿里华东区主要数据节点之一</td>
<td class="py-4 px-6 text-center"><span class="badge badge-success font-bold">领导者</span></td>
</tr>
<tr class="idc-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-indigo-400">浪潮信息</td>
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
<td class="py-4 px-6 text-gray-300">阿里服务器采购份额最高,硬件龙头地位稳固</td>
<td class="py-4 px-6 text-center"><span class="badge badge-info font-bold">基础设施</span></td>
</tr>
<!-- 电商生态 -->
<tr class="ecommerce-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-purple-400">光云科技</td>
<td class="py-4 px-6 text-center"><span class="badge badge-secondary">电商</span></td>
<td class="py-4 px-6 text-gray-300">阿里授予"复购/好评榜第一",垂直场景卡位精准,将直接受益于广告货币化率提升</td>
<td class="py-4 px-6 text-center"><span class="badge badge-success font-bold">领导者</span></td>
</tr>
<tr class="ecommerce-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-purple-400">壹网壹创</td>
<td class="py-4 px-6 text-center"><span class="badge badge-secondary">电商</span></td>
<td class="py-4 px-6 text-gray-300">阿里首批AI Agent生态合作伙伴Agent生态稀缺标的</td>
<td class="py-4 px-6 text-center"><span class="badge badge-accent font-bold">高弹性</span></td>
</tr>
<tr class="ecommerce-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-purple-400">丽人丽妆</td>
<td class="py-4 px-6 text-center"><span class="badge badge-secondary">电商</span></td>
<td class="py-4 px-6 text-gray-300">阿里妈妈长期生态合作伙伴</td>
<td class="py-4 px-6 text-center"><span class="badge badge-info font-bold">生态合作</span></td>
</tr>
<tr class="ecommerce-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-purple-400">值得买</td>
<td class="py-4 px-6 text-center"><span class="badge badge-secondary">电商</span></td>
<td class="py-4 px-6 text-gray-300">阿里爸爸重要合作伙伴,通过"什么值得买"提供信息推广服务</td>
<td class="py-4 px-6 text-center"><span class="badge badge-info font-bold">生态合作</span></td>
</tr>
<!-- 战略投资 -->
<tr class="investment-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-pink-400">三江购物</td>
<td class="py-4 px-6 text-center"><span class="badge badge-accent">参股消费</span></td>
<td class="py-4 px-6 text-gray-300">阿里系持有公司总股本30%,仅财务投资,无业务协同</td>
<td class="py-4 px-6 text-center"><span class="badge badge-error font-bold">规避风险</span></td>
</tr>
<tr class="investment-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-pink-400">石基信息</td>
<td class="py-4 px-6 text-center"><span class="badge badge-accent">参股消费</span></td>
<td class="py-4 px-6 text-gray-300">阿里系持有公司总股本13.02%,仅财务投资,无业务协同</td>
<td class="py-4 px-6 text-center"><span class="badge badge-error font-bold">规避风险</span></td>
</tr>
<tr class="investment-row animate-fade-in">
<td class="py-4 px-6 font-semibold text-pink-400">美年健康</td>
<td class="py-4 px-6 text-center"><span class="badge badge-accent">参股医疗</span></td>
<td class="py-4 px-6 text-gray-300">阿里系持有公司总股本10.04%</td>
<td class="py-4 px-6 text-center"><span class="badge badge-warning font-bold">观察</span></td>
</tr>
</tbody>
</table>
</div>
<div class="text-center mt-8 text-gray-400">
<p>完整表格包含50+公司涵盖IDC、服务器、交换机、电商、医疗等全链条</p>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section class="py-20 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">风险与挑战</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-red-500/10 border border-red-500/30 p-6 rounded-2xl backdrop-blur-sm animate-slide-up">
<div class="text-3xl mb-4 text-red-400">
<i class="fas fa-exclamation-triangle"></i>
</div>
<h3 class="text-xl font-bold mb-4 text-red-300">技术风险</h3>
<ul class="space-y-2 text-gray-300 text-sm">
<li>• 思维链能力短板:当前更多是基座模型而非推理模型</li>
<li>• Agent工具缺失MCP多工具调用仍出现错误</li>
<li>• 与DeepSeek-R1等推理模型存在差距</li>
</ul>
</div>
<div class="bg-yellow-500/10 border border-yellow-500/30 p-6 rounded-2xl backdrop-blur-sm animate-slide-up" style="animation-delay: 0.2s;">
<div class="text-3xl mb-4 text-yellow-400">
<i class="fas fa-dollar-sign"></i>
</div>
<h3 class="text-xl font-bold mb-4 text-yellow-300">商业化风险</h3>
<ul class="space-y-2 text-gray-300 text-sm">
<li>• C端用户获取成本高昂ROI可能为负</li>
<li>• B端客户谨慎市场增长主要来自存量客户</li>
<li>• 阿里影业虚拟拍摄技术仍处于亏损状态</li>
</ul>
</div>
<div class="bg-blue-500/10 border border-blue-500/30 p-6 rounded-2xl backdrop-blur-sm animate-slide-up" style="animation-delay: 0.4s;">
<div class="text-3xl mb-4 text-blue-400">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-xl font-bold mb-4 text-blue-300">竞争与政策风险</h3>
<ul class="space-y-2 text-gray-300 text-sm">
<li>• Llama 3.3发布后千问排名降至第二/三位</li>
<li>• 开源模型竞争加剧,存在赢者通吃效应</li>
<li>• 苹果AI合作涉及数据跨境面临监管审查</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Investment Insights -->
<section class="py-20 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">投资启示</h2>
<div class="bg-white/5 rounded-3xl p-8 md:p-12 backdrop-blur-sm border border-white/10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div class="animate-fade-in">
<h3 class="text-2xl font-bold mb-6 text-indigo-400">优先级排序</h3>
<div class="space-y-4">
<div class="flex items-center gap-4 p-4 bg-indigo-500/10 rounded-xl border border-indigo-500/30">
<div class="text-2xl text-indigo-400">🥇</div>
<div>
<div class="font-bold text-lg">算力基础设施</div>
<div class="text-gray-400 text-sm">数据港、万国数据、浪潮信息(订单可见度高)</div>
</div>
</div>
<div class="flex items-center gap-4 p-4 bg-purple-500/10 rounded-xl border border-purple-500/30">
<div class="text-2xl text-purple-400">🥈</div>
<div>
<div class="font-bold text-lg">电商生态服务商</div>
<div class="text-gray-400 text-sm">光云科技、壹网壹创(直接受益广告货币化)</div>
</div>
</div>
<div class="flex items-center gap-4 p-4 bg-yellow-500/10 rounded-xl border border-yellow-500/30">
<div class="text-2xl text-yellow-400">🥉</div>
<div>
<div class="font-bold text-lg">垂直场景龙头</div>
<div class="text-gray-400 text-sm">阿里健康、阿里影业(节奏风险,谨慎配置)</div>
</div>
</div>
</div>
</div>
<div class="animate-fade-in" style="animation-delay: 0.2s;">
<h3 class="text-2xl font-bold mb-6 text-purple-400">关键跟踪指标</h3>
<div class="space-y-3 text-gray-300">
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
<span>API周调用量增速</span>
<span class="text-indigo-400 font-bold">2000亿→5000亿Tokens</span>
</div>
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
<span>阿里云AI收入占比</span>
<span class="text-purple-400 font-bold">10%→15%+</span>
</div>
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
<span>千问APP月活(MAU)</span>
<span class="text-pink-400 font-bold">5000万目标</span>
</div>
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
<span>30日留存率</span>
<span class="text-green-400 font-bold">>30%</span>
</div>
</div>
</div>
</div>
<div class="mt-12 p-6 bg-gradient-to-r from-indigo-500/20 to-purple-500/20 rounded-2xl border border-indigo-500/30">
<h4 class="text-xl font-bold mb-4 text-center">结论</h4>
<p class="text-gray-300 text-center leading-relaxed text-lg">
阿里"千问"项目具备<strong class="text-indigo-400">"基本面打底+主题催化"</strong>的双重属性,当前处于"技术兑现期向商业化爆发期过渡"的关键节点。<br>
<span class="text-purple-400">2025年Q4至2026年Q1</span>是验证窗口期若C端APP数据超预期或苹果合作落地将引发戴维斯双击。
</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 px-4 border-t border-white/10">
<div class="container mx-auto text-center">
<p class="text-gray-400 mb-4">基于真实行业洞察与数据分析</p>
<p class="text-gray-500 text-sm">生成时间2025年11月 | 数据来源:公开新闻、路演纪要、工商信息</p>
</div>
</footer>
<script>
// Tab functionality
function showCategory(category) {
const rows = document.querySelectorAll('#stockTableBody tr');
const tabs = document.querySelectorAll('.tab');
// Update tab styles
tabs.forEach(tab => tab.classList.remove('tab-active'));
event.target.classList.add('tab-active');
// Show/hide rows
rows.forEach(row => {
row.style.display = 'none';
setTimeout(() => {
if (category === 'all') {
row.style.display = 'table-row';
} else if (category === 'idc' && row.classList.contains('idc-row')) {
row.style.display = 'table-row';
} else if (category === 'ecommerce' && row.classList.contains('ecommerce-row')) {
row.style.display = 'table-row';
} else if (category === 'investment' && row.classList.contains('investment-row')) {
row.style.display = 'table-row';
}
}, 100);
});
}
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Mobile menu toggle
function toggleMobileMenu() {
const menu = document.getElementById('mobileMenu');
menu.classList.toggle('hidden');
}
</script>
</body>
</html>

659
public/htmls/隔膜.html Normal file
View File

@@ -0,0 +1,659 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<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>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#00d4ff',
secondary: '#ff00ff',
accent: '#00ff88',
dark: '#0a0e27',
darker: '#050817'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif']
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
background: linear-gradient(135deg, #050817 0%, #0a0e27 100%);
overflow-x: hidden;
}
.hero-gradient {
background: linear-gradient(135deg, #00d4ff 0%, #ff00ff 50%, #00ff88 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 212, 255, 0.1);
}
.card-hover:hover {
transform: translateY(-8px);
border-color: rgba(0, 212, 255, 0.3);
box-shadow: 0 20px 40px rgba(0, 212, 255, 0.15);
}
.timeline-item::before {
content: '';
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: #00d4ff;
box-shadow: 0 0 20px #00d4ff;
}
.timeline-line {
background: linear-gradient(to bottom, #00d4ff, #ff00ff);
}
.badge-glow {
box-shadow: 0 0 15px currentColor;
}
.table-row-hover:hover {
background: rgba(0, 212, 255, 0.05);
transform: scale(1.01);
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); }
50% { box-shadow: 0 0 30px rgba(0, 212, 255, 0.8); }
}
.pulse-glow {
animation: pulse-glow 2s infinite;
}
.mobile-stack {
display: none;
}
@media (max-width: 768px) {
.desktop-table { display: none; }
.mobile-stack { display: block; }
}
.metric-card {
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(255, 0, 255, 0.1) 100%);
border: 1px solid rgba(0, 212, 255, 0.2);
}
</style>
</head>
<body class="bg-darker text-white font-sans">
<!-- 导航栏 -->
<nav class="fixed top-0 w-full z-50 bg-dark/90 backdrop-blur-md border-b border-primary/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center space-x-2">
<i class="fas fa-layer-group text-2xl text-primary"></i>
<span class="text-xl font-bold hero-gradient">隔膜概念</span>
</div>
<div class="hidden md:flex space-x-6 text-sm">
<a href="#overview" class="hover:text-primary transition-colors">核心逻辑</a>
<a href="#timeline" class="hover:text-primary transition-colors">时间轴</a>
<a href="#stocks" class="hover:text-primary transition-colors">核心标的</a>
<a href="#risk" class="hover:text-primary transition-colors">风险分析</a>
</div>
</div>
</div>
</nav>
<!-- Hero区域 -->
<section class="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto text-center">
<h1 class="text-4xl sm:text-6xl font-bold mb-6">
<span class="hero-gradient">锂电池隔膜</span>
<br/>周期反转拐点
</h1>
<p class="text-lg sm:text-xl text-gray-300 mb-8 max-w-4xl mx-auto leading-relaxed">
供给刚性超预期储能爆发超预期政策反内卷超预期——三重共振驱动下隔膜行业正从周期底部走向价格拐点2025-2026年头部企业盈利修复弹性巨大。
</p>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<div class="badge badge-primary badge-glow px-4 py-2">储能切湿法</div>
<div class="badge badge-secondary badge-glow px-4 py-2">产能投放尾声</div>
<div class="badge badge-accent badge-glow px-4 py-2">价格联盟形成</div>
<div class="badge badge-primary badge-glow px-4 py-2">5μm渗透加速</div>
</div>
</div>
</section>
<!-- 核心观点摘要 -->
<section id="overview" class="py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="card card-hover bg-dark rounded-2xl p-8 mb-12">
<h2 class="text-3xl font-bold mb-6 flex items-center">
<i class="fas fa-bullseye text-primary mr-3"></i>
核心观点摘要
</h2>
<div class="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl p-6 border border-primary/20">
<p class="text-lg leading-relaxed">
当前隔膜行业正处于<strong class="text-primary">"周期反转拐点"</strong>,由三重逻辑共振驱动:
<br/><br/>
<strong class="text-secondary">供给端产能投放进入尾声</strong>2026年新增供给断崖式收缩
<br/>
<strong class="text-accent">需求端储能市场爆发式增长</strong>(同比+106%)彻底扭转供需格局,湿法隔膜供需紧平衡;
<br/>
<strong class="text-primary">政策"反内卷"与行业自律形成价格联盟</strong>,龙头议价能力显著提升。
<br/><br/>
市场当前对固态电池冲击存在过度担忧,而低估了设备壁垒、海外布局及高端涂覆带来的价值重构,<strong class="text-accent">2025-2026年头部企业盈利修复弹性巨大</strong>
</p>
</div>
</div>
</div>
</section>
<!-- 时间轴 -->
<section id="timeline" class="py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="hero-gradient">概念事件时间轴</span>
</h2>
<div class="relative">
<div class="timeline-line absolute left-4 md:left-1/2 transform md:-translate-x-1/2 w-1 h-full"></div>
<div class="space-y-12">
<div class="timeline-item relative flex flex-col md:flex-row items-center">
<div class="bg-dark rounded-xl p-6 card-hover ml-8 md:ml-0 md:w-5/12">
<div class="text-sm text-primary mb-2">2024年2月</div>
<h3 class="text-xl font-semibold mb-2">底部信号初现</h3>
<p class="text-gray-300">CT电新率先提出"隔膜价格底部,行业有望见底反转"指出湿法价格企稳、干法已涨价30%。</p>
</div>
<div class="hidden md:block w-2/12"></div>
<div class="hidden md:block w-5/12"></div>
</div>
<div class="timeline-item relative flex flex-col md:flex-row items-center">
<div class="hidden md:block w-5/12"></div>
<div class="hidden md:block w-2/12"></div>
<div class="bg-dark rounded-xl p-6 card-hover mr-8 md:mr-0 md:w-5/12">
<div class="text-sm text-primary mb-2">2024年9-10月</div>
<h3 class="text-xl font-semibold mb-2">涨价落地验证</h3>
<p class="text-gray-300">干法隔膜年内涨幅>30%8月初第二次提价10%湿法交付周期紧张价格涨幅超10%,周期反转强度确认。</p>
</div>
</div>
<div class="timeline-item relative flex flex-col md:flex-row items-center">
<div class="bg-dark rounded-xl p-6 card-hover ml-8 md:ml-0 md:w-5/12">
<div class="text-sm text-primary mb-2">2024年11月</div>
<h3 class="text-xl font-semibold mb-2">政策护航升级</h3>
<p class="text-gray-300">工信部研究编制"十五五"规划强调防范低水平重复建设。储能产线全面切换湿法5μm渗透率目标提升至15%。</p>
</div>
<div class="hidden md:block w-2/12"></div>
<div class="hidden md:block w-5/12"></div>
</div>
<div class="timeline-item relative flex flex-col md:flex-row items-center">
<div class="hidden md:block w-5/12"></div>
<div class="hidden md:block w-2/12"></div>
<div class="bg-dark rounded-xl p-6 card-hover mr-8 md:mr-0 md:w-5/12">
<div class="text-sm text-primary mb-2">2025-2026年</div>
<h3 class="text-xl font-semibold mb-2">供需缺口显现</h3>
<p class="text-gray-300">鑫椤锂电预测2026年TOP3产能利用率超95%行业或迎供需缺口。头部企业开启2026年价格谈判盈利修复空间大。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 供需格局分析 -->
<section class="py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="hero-gradient">核心驱动力:三重断裂性改善</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<div class="card card-hover bg-dark rounded-2xl p-6">
<div class="text-center mb-4">
<i class="fas fa-industry text-4xl text-primary"></i>
</div>
<h3 class="text-xl font-semibold mb-4 text-center">供给刚性超预期</h3>
<ul class="space-y-3 text-sm text-gray-300">
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>设备依赖进口(东芝/布鲁克纳交付周期长达1.5-2年</li>
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>良率爬坡至90%需1年以上二线厂商仅75-80%</li>
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>头部两家产能2025年底收尾2026年供给断崖式收缩</li>
</ul>
</div>
<div class="card card-hover bg-dark rounded-2xl p-6">
<div class="text-center mb-4">
<i class="fas fa-chart-line text-4xl text-secondary"></i>
</div>
<h3 class="text-xl font-semibold mb-4 text-center">需求结构性爆发</h3>
<ul class="space-y-3 text-sm text-gray-300">
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>储能全面切湿法,同比+106%单GWh用量提升33%</li>
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>5μm高端隔膜渗透率从5%→15%单价是普通2-3倍</li>
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>海外价格是国内的2-3倍恩捷/星源海外工厂投产</li>
</ul>
</div>
<div class="card card-hover bg-dark rounded-2xl p-6">
<div class="text-center mb-4">
<i class="fas fa-shield-alt text-4xl text-accent"></i>
</div>
<h3 class="text-xl font-semibold mb-4 text-center">政策价格联盟</h3>
<ul class="space-y-3 text-sm text-gray-300">
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>协会倡议"以销定产、不打价格战"</li>
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>工信部"十五五"规划防低水平重复建设</li>
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>头部企业TOP2市占率50%+形成价格默契</li>
</ul>
</div>
</div>
<!-- 关键数据指标 -->
<div class="grid md:grid-cols-4 gap-6">
<div class="metric-card rounded-xl p-6 text-center card-hover">
<div class="text-3xl font-bold text-primary mb-2">300亿平</div>
<div class="text-sm text-gray-300">2024年全球隔膜出货量</div>
<div class="text-xs text-accent mt-1">vs 2020年64亿平</div>
</div>
<div class="metric-card rounded-xl p-6 text-center card-hover">
<div class="text-3xl font-bold text-secondary mb-2">95%</div>
<div class="text-sm text-gray-300">2026年TOP3产能利用率预测</div>
<div class="text-xs text-accent mt-1">当前已打满</div>
</div>
<div class="metric-card rounded-xl p-6 text-center card-hover">
<div class="text-3xl font-bold text-accent mb-2">30%</div>
<div class="text-sm text-gray-300">5μm高端隔膜渗透率</div>
<div class="text-xs text-accent mt-1">2025年目标vs 2024年5%</div>
</div>
<div class="metric-card rounded-xl p-6 text-center card-hover">
<div class="text-3xl font-bold text-primary mb-2">2-3倍</div>
<div class="text-sm text-gray-300">海外/国内价格倍率</div>
<div class="text-xs text-accent mt-1">成本差异不大</div>
</div>
</div>
</div>
</section>
<!-- 核心公司对比 -->
<section id="stocks" class="py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="hero-gradient">核心标的深度剖析</span>
</h2>
<!-- 桌面端表格 -->
<div class="desktop-table bg-dark rounded-2xl overflow-hidden card-hover">
<table class="table w-full">
<thead class="bg-gradient-to-r from-primary/20 to-secondary/20">
<tr>
<th class="text-white font-semibold">公司</th>
<th class="text-white font-semibold">角色定位</th>
<th class="text-white font-semibold">核心优势</th>
<th class="text-white font-semibold">产能/份额</th>
<th class="text-white font-semibold">2025预计</th>
</tr>
</thead>
<tbody>
<tr class="table-row-hover">
<td>
<div class="flex items-center">
<div class="badge badge-primary badge-glow mr-2">龙头</div>
<span class="font-semibold">恩捷股份</span>
</div>
</td>
<td><span class="badge badge-secondary">绝对龙头</span></td>
<td class="text-sm">设备壁垒+全球专利最多+成本最低+海外布局领先</td>
<td class="text-sm">
<div>2025年110亿平</div>
<div class="text-primary">全球50%</div>
</td>
<td class="text-sm">
<div>22亿利润</div>
<div class="text-accent">17倍PE</div>
</td>
</tr>
<tr class="table-row-hover">
<td>
<div class="flex items-center">
<div class="badge badge-secondary badge-glow mr-2">赶超者</div>
<span class="font-semibold">星源材质</span>
</div>
</td>
<td><span class="badge badge-accent">追赶者</span></td>
<td class="text-sm">干法全球第一+固态膜布局领先+全球布局最广</td>
<td class="text-sm">
<div>2025年70亿平</div>
<div class="text-primary">全球21%</div>
</td>
<td class="text-sm">
<div>14亿利润</div>
<div class="text-accent">13倍PE</div>
</td>
</tr>
<tr class="table-row-hover">
<td>
<div class="flex items-center">
<div class="badge badge-accent badge-glow mr-2">二线</div>
<span class="font-semibold">中材科技</span>
</div>
</td>
<td><span class="badge badge-primary">稳健二线</span></td>
<td class="text-sm">央企资源+设备多元+客户结构稳定</td>
<td class="text-sm">
<div>2024年销量19亿平</div>
<div class="text-primary">湿法13%</div>
</td>
<td class="text-sm">
<div>盈利修复滞后</div>
<div>产能利用率80%</div>
</td>
</tr>
<tr class="table-row-hover">
<td>
<div class="flex items-center">
<div class="badge badge-glow mr-2" style="color: #ff00ff; border-color: #ff00ff;">并购</div>
<span class="font-semibold">佛塑科技</span>
</div>
</td>
<td><span class="badge badge-secondary">并购新锐</span></td>
<td class="text-sm">收购金力新能源+切入一线供应链</td>
<td class="text-sm">
<div>金力16亿平产能</div>
<div class="text-primary">湿法18%</div>
</td>
<td class="text-sm">
<div>协同效应</div>
<div class="text-accent">估值重塑</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 移动端堆叠卡片 -->
<div class="mobile-stack space-y-6">
<div class="card card-hover bg-dark rounded-xl p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">恩捷股份</h3>
<div class="badge badge-primary badge-glow">绝对龙头</div>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>产能: 2025年110亿平</div>
<div>份额: 全球50%</div>
<div>利润: 22亿</div>
<div>PE: 17倍</div>
</div>
</div>
<div class="card card-hover bg-dark rounded-xl p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">星源材质</h3>
<div class="badge badge-secondary badge-glow">赶超者</div>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>产能: 2025年70亿平</div>
<div>份额: 全球21%</div>
<div>利润: 14亿</div>
<div>PE: 13倍</div>
</div>
</div>
<div class="card card-hover bg-dark rounded-xl p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">佛塑科技</h3>
<div class="badge badge-glow" style="color: #ff00ff; border-color: #ff00ff;">并购</div>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>收购: 金力新能源</div>
<div>份额: 湿法18%</div>
<div>潜力: 协同效应</div>
<div>估值: 重塑</div>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="hero-gradient">概念股数据总览</span>
</h2>
<div class="card card-hover bg-dark rounded-2xl overflow-hidden">
<div class="overflow-x-auto">
<table class="table w-full">
<thead class="bg-gradient-to-r from-primary/20 to-secondary/20">
<tr>
<th class="text-white font-semibold">股票名称</th>
<th class="text-white font-semibold">角色定位</th>
<th class="text-white font-semibold">核心数据</th>
<th class="text-white font-semibold">投资逻辑</th>
</tr>
</thead>
<tbody id="stockTable">
<!-- 动态生成股票数据 -->
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 催化与风险 -->
<section id="risk" class="py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-2 gap-8">
<!-- 催化剂 -->
<div class="card card-hover bg-dark rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-rocket text-secondary mr-3"></i>
关键催化剂
</h2>
<div class="space-y-4">
<div class="bg-secondary/10 rounded-lg p-4 border border-secondary/20">
<div class="text-sm text-secondary mb-1">2025年1月</div>
<h3 class="font-semibold mb-2">2026年价格谈判落地</h3>
<p class="text-sm text-gray-300">若涨价幅度达15-20%,将直接验证周期反转强度,触发估值修复。</p>
</div>
<div class="bg-primary/10 rounded-lg p-4 border border-primary/20">
<div class="text-sm text-primary mb-1">2025年Q1</div>
<h3 class="font-semibold mb-2">储能出货量持续超预期</h3>
<p class="text-sm text-gray-300">若Q1延续高增同比+80%以上),强化"储能切湿法"逻辑。</p>
</div>
<div class="bg-accent/10 rounded-lg p-4 border border-accent/20">
<div class="text-sm text-accent mb-1">2025年Q2</div>
<h3 class="font-semibold mb-2">5μm渗透率加速提升</h3>
<p class="text-sm text-gray-300">若宁德/比亚迪大规模采用单平利润提升50-100%。</p>
</div>
</div>
</div>
<!-- 风险分析 -->
<div class="card card-hover bg-dark rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-exclamation-triangle text-red-400 mr-3"></i>
潜在风险
</h2>
<div class="space-y-4">
<div class="bg-red-500/10 rounded-lg p-4 border border-red-500/20">
<h3 class="font-semibold text-red-400 mb-2">技术风险:固态电池路径不确定</h3>
<p class="text-sm text-gray-300">若全固态电池2027年后量产传统隔膜需求或萎缩30-50%。但恩捷/星源已通过骨架膜布局对冲。</p>
</div>
<div class="bg-yellow-500/10 rounded-lg p-4 border border-yellow-500/20">
<h3 class="font-semibold text-yellow-400 mb-2">商业风险:价格战反复</h3>
<p class="text-sm text-gray-300">行业自律缺乏强制约束力,若头部企业为抢占份额突然降价,价格体系可能崩溃。</p>
</div>
<div class="bg-blue-500/10 rounded-lg p-4 border border-blue-500/20">
<h3 class="font-semibold text-blue-400 mb-2">政策风险IRA细则变化</h3>
<p class="text-sm text-gray-300">恩捷美国工厂享受IRA补贴2025年美国总统大选后政策存在变数。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 跟踪指标与投资策略 -->
<section class="py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-12 text-center">
<span class="hero-gradient">投资策略框架</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<div class="card card-hover bg-dark rounded-2xl p-6 text-center">
<div class="text-2xl font-bold text-primary mb-2">左侧布局期</div>
<div class="text-sm text-gray-300 mb-4">当前-2025年Q1</div>
<p class="text-sm">在2026年价格谈判落地前逢低建仓恩捷股份、星源材质仓位上限30%。</p>
</div>
<div class="card card-hover bg-dark rounded-2xl p-6 text-center">
<div class="text-2xl font-bold text-secondary mb-2">右侧加仓期</div>
<div class="text-sm text-gray-300 mb-4">2025年Q2-Q3</div>
<p class="text-sm">若5μm渗透率突破15%、储能维持高增加仓至50%仓位。</p>
</div>
<div class="card card-hover bg-dark rounded-2xl p-6 text-center">
<div class="text-2xl font-bold text-accent mb-2">兑现退出期</div>
<div class="text-sm text-gray-300 mb-4">2025年Q4-2026年</div>
<p class="text-sm">当单平利润恢复至0.3元、PE降至10倍以下时逐步兑现收益。</p>
</div>
</div>
<!-- 关键跟踪指标卡片 -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="metric-card rounded-xl p-4 text-center card-hover pulse-glow">
<div class="text-lg font-bold text-primary mb-1">价格指标</div>
<div class="text-sm text-gray-300">7μm湿法基膜均价</div>
<div class="text-accent mt-2">目标: 1.0元/平</div>
</div>
<div class="metric-card rounded-xl p-4 text-center card-hover">
<div class="text-lg font-bold text-secondary mb-1">盈利指标</div>
<div class="text-sm text-gray-300">恩捷单平净利润</div>
<div class="text-accent mt-2">目标: 0.25元</div>
</div>
<div class="metric-card rounded-xl p-4 text-center card-hover">
<div class="text-lg font-bold text-accent mb-1">产能指标</div>
<div class="text-sm text-gray-300">TOP3产能利用率</div>
<div class="text-accent mt-2">目标: >95%</div>
</div>
<div class="metric-card rounded-xl p-4 text-center card-hover">
<div class="text-lg font-bold text-primary mb-1">需求指标</div>
<div class="text-sm text-gray-300">储能出货量同比</div>
<div class="text-accent mt-2">目标: >60%</div>
</div>
</div>
</div>
</section>
<!-- 总结 -->
<section class="py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl mx-auto">
<div class="card card-hover bg-gradient-to-r from-primary/10 to-secondary/10 rounded-2xl p-8 border border-primary/20">
<h2 class="text-3xl font-bold mb-6 text-center">
<span class="hero-gradient">最终结论</span>
</h2>
<p class="text-lg leading-relaxed mb-6">
隔膜是2025年新能源材料中<strong class="text-accent">供需格局最优、涨价确定性最强、估值修复空间最大</strong>的细分赛道。核心矛盾已从"产能过剩"转向"优质产能不足"龙头将进入长达2-3年的盈利上行周期。
</p>
<div class="text-center">
<div class="badge badge-primary badge-glow px-6 py-3 text-lg">把握三重共振窗口期</div>
</div>
<p class="text-sm text-gray-400 mt-6">
风险提示固态电池技术路线不确定性、价格联盟脆弱性、IRA政策变化、新进入者搅局。
</p>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-primary/10">
<div class="max-w-7xl mx-auto text-center">
<p class="text-gray-400 text-sm">
本报告基于公开信息整理,不构成投资建议。市场有风险,投资需谨慎。
</p>
</div>
</footer>
<script>
// 股票数据
const stockData = [
{ stock: '恩捷股份', role: '绝对龙头', data: '2025年110亿平全球50%', reason: '隔膜市占率A股第一设备壁垒最深海外布局领先' },
{ stock: '星源材质', role: '赶超者', data: '2025年70亿平全球21%', reason: '干法全球第一,固态膜布局领先,全球布局最广' },
{ stock: '中材科技', role: '稳健二线', data: '2024年销量19亿平湿法13%', reason: '央企资源,设备多元,客户结构稳定' },
{ stock: '璞泰来', role: '涂覆龙头', data: '2025年涂覆加工量73.8亿平', reason: '涂覆隔膜产能第一,在线涂覆技术领先' },
{ stock: '欧克科技', role: '设备突破', data: '新签1.76亿订单占营收40.5%', reason: '国产设备替代逻辑,交付周期仅半年' },
{ stock: '佛塑科技', role: '并购新锐', data: '收购金力新能源湿法18%', reason: '收购行业前三,估值重塑空间大' },
{ stock: '联泓新科', role: '材料上游', data: 'UHMWPE树脂供应商', reason: '锂电隔膜材料上游,受益于需求增长' },
{ stock: '东风股份', role: '新进者', data: '规划16亿平产能', reason: '化工巨头跨界,需关注技术消化能力' }
];
// 生成表格
const tbody = document.getElementById('stockTable');
stockData.forEach(item => {
const row = document.createElement('tr');
row.className = 'table-row-hover';
row.innerHTML = `
<td class="font-semibold">${item.stock}</td>
<td><span class="badge badge-sm">${item.role}</span></td>
<td class="text-sm">${item.data}</td>
<td class="text-sm">${item.reason}</td>
`;
tbody.appendChild(row);
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// 滚动动画
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);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,352 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高通概念AI时代的连接计算革命</title>
<!-- DaisyUI & Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
--fallback-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
body {
font-family: var(--fallback-font);
}
/* Custom Animations */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background: #4a5568;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #718096;
}
/* Timeline Styles */
.timeline-line::before {
content: '';
position: absolute;
left: 7px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
}
.timeline-dot {
position: absolute;
left: 0;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #1e293b;
border: 2px solid #3b82f6;
z-index: 1;
}
/* Responsive Table Styles */
@media (max-width: 768px) {
.responsive-table thead {
display: none;
}
.responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
display: block;
width: 100% !important;
}
.responsive-table tr {
margin-bottom: 1rem;
border: 1px solid #475569;
border-radius: 0.5rem;
padding: 0.5rem;
}
.responsive-table td {
text-align: right !important;
padding-left: 50% !important;
position: relative;
}
.responsive-table td::before {
content: attr(data-label) ": ";
position: absolute;
left: 1rem;
width: calc(50% - 2rem);
font-weight: 600;
color: #cbd5e1;
text-align: left;
}
}
</style>
</head>
<body class="bg-base-100 text-base-content">
<!-- Hero Section -->
<div class="hero min-h-[60vh] bg-gradient-to-r from-base-900 via-base-800 to-base-900" style="background-image: url('https://images.unsplash.com/photo-1534723452862-4c874018d66d?q=80&w=2070&auto=format&fit=crop'); background-size: cover; background-position: center;">
<div class="hero-overlay bg-opacity-80 bg-gradient-to-r from-black/70 via-gray-900/80 to-black/70"></div>
<div class="hero-content text-center text-neutral-content p-8 md:p-16">
<div class="max-w-4xl">
<h1 class="mb-5 text-5xl md:text-7xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent animate-float">
高通概念
</h1>
<p class="mb-5 text-lg md:text-xl font-light text-gray-300">
从手机周期到AI成长一场由“端侧AI”驱动的价值重估
</p>
<div class="flex flex-wrap justify-center gap-2 text-sm">
<span class="badge badge-primary badge-lg p-4">端侧AI</span>
<span class="badge badge-secondary badge-lg p-4">AI连接计算</span>
<span class="badge badge-accent badge-lg p-4">价值重估</span>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<main class="container mx-auto px-4 md:px-8 py-8 md:py-16">
<!-- Section 1: Concept Timeline -->
<section class="mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-center">
<i class="fas fa-history mr-2 text-blue-400"></i>概念演进与关键节点
</h2>
<div class="timeline-container relative border-l-2 border-blue-500 ml-4 md:ml-8">
<!-- Timeline items will be inserted here by JS for clarity, but can be static HTML too. For simplicity, using static HTML -->
<div class="timeline-item mb-10 ml-6">
<div class="timeline-dot"></div>
<div class="timeline-content bg-base-200 p-4 rounded-lg shadow-lg">
<h3 class="font-bold text-lg text-blue-300">2023.08 - 11 | 战略转型期</h3>
<p class="text-sm">明确提出“混合式AI”战略发布骁龙X Elite平台标志向AI连接计算公司转型。</p>
</div>
</div>
<div class="timeline-item mb-10 ml-6">
<div class="timeline-dot" style="border-color: #10b981;"></div>
<div class="timeline-content bg-base-200 p-4 rounded-lg shadow-lg">
<h3 class="font-bold text-lg text-green-300">2024.12.21 | 法律风险解除</h3>
<p class="text-sm">在与Arm的诉讼案中关键问题获胜为自研Oryon CPU扫清障碍。</p>
</div>
</div>
<div class="timeline-item mb-10 ml-6">
<div class="timeline-dot" style="border-color: #f59e0b;"></div>
<div class="timeline-content bg-base-200 p-4 rounded-lg shadow-lg">
<h3 class="font-bold text-lg text-amber-300">2025.10.10 | 新风险出现</h3>
<p class="text-sm">因收购Autotalks未依法申报遭中国市场监管总局立案调查带来新不确定性。</p>
</div>
</div>
<div class="timeline-item mb-10 ml-6">
<div class="timeline-dot" style="border-color: #ec4899;"></div>
<div class="timeline-content bg-base-200 p-4 rounded-lg shadow-lg">
<h3 class="font-bold text-lg text-pink-300">2025.10.28 | 概念边界扩张</h3>
<p class="text-sm">推出数据中心AI芯片正式向英伟达发起挑战引发股价大涨。</p>
</div>
</div>
</div>
</section>
<!-- Section 2: Core Logic & Market Perception -->
<section class="mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-center">
<i class="fas fa-brain mr-2 text-purple-400"></i>核心逻辑与市场认知
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1: Core Logic -->
<div class="card bg-gradient-to-br from-base-200 to-base-300 shadow-xl">
<div class="card-body">
<h3 class="card-title text-lg">
<i class="fas fa-microchip text-info"></i>
核心驱动力
</h3>
<p>AI计算范式从云端向端侧/边缘侧转移。高通凭借异构计算领导力、AI生态护城河及全场景覆盖能力成为该趋势的核心受益者。</p>
<div class="card-actions justify-end">
<a href="#insight-core" class="btn btn-primary btn-sm">深入了解</a>
</div>
</div>
</div>
<!-- Card 2: Market Sentiment -->
<div class="card bg-gradient-to-br from-secondary to-secondary-focus shadow-xl">
<div class="card-body">
<h3 class="card-title text-lg">
<i class="fas fa-fire text-secondary-content"></i>
市场热度
</h3>
<p>市场情绪高度乐观视高通为“端侧AI期权”和最纯粹的AI硬件受益标的。一致预期其估值将从周期股向成长股重塑。</p>
<div class="card-actions justify-end">
<span class="badge badge-error badge-lg">高预期</span>
</div>
</div>
</div>
<!-- Card 3: Expectation Gap -->
<div class="card bg-gradient-to-br from-warning to-warning-content shadow-xl">
<div class="card-body">
<h3 class="card-title text-lg text-base-100">
<i class="fas fa-exclamation-triangle text-base-100"></i>
潜在预期差
</h3>
<p class="text-base-100">市场或低估了执行层面的挑战如PC市场竞争、监管风险的严重性中国反垄断以及数据中心竞争的非对称性。</p>
<div class="card-actions justify-end">
<a href="#insight-risk" class="btn btn-warning btn-sm">查看风险</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: Stock Data Table -->
<section id="stock-table" class="mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-center">
<i class="fas fa-chart-line mr-2 text-green-400"></i>产业链核心标的
</h2>
<div class="overflow-x-auto bg-base-200 rounded-lg p-4 shadow-xl">
<table class="table responsive-table">
<thead>
<tr>
<th>股票名称</th>
<th>分类</th>
<th>合作项目/理由</th>
<th>信息来源</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td data-label="股票名称" class="font-bold text-blue-300">中科创达</td>
<td data-label="分类"><span class="badge badge-info">智驾</span></td>
<td data-label="合作项目/理由">高通核心战略合作伙伴推出基于高通平台的智能汽车参考设计及AI眼镜。</td>
<td data-label="信息来源"><span class="badge badge-outline">半年报</span></td>
</tr>
<tr class="hover">
<td data-label="股票名称" class="font-bold text-blue-300">佰维存储</td>
<td data-label="分类"><span class="badge badge-success">存储</span></td>
<td data-label="合作项目/理由">主要产品已进入高通合格供应商清单受益于AI芯片对存储需求的提升。</td>
<td data-label="信息来源"><span class="badge badge-outline">公告</span></td>
</tr>
<tr class="hover">
<td data-label="股票名称" class="font-bold text-blue-300">顺络电子</td>
<td data-label="分类"><span class="badge badge-warning">电感</span></td>
<td data-label="合作项目/理由">小尺寸功率电感产品成功进入高通认证方案,为国内首发。</td>
<td data-label="信息来源"><span class="badge badge-outline">互动</span></td>
</tr>
<tr class="hover">
<td data-label="股票名称" class="font-bold text-blue-300">移远通信</td>
<td data-label="分类"><span class="badge badge-accent">采购/模组</span></td>
<td data-label="合作项目/理由">公司第一大供应商为高通采购占比约60%。推出高通平台网联+座舱解决方案。</td>
<td data-label="信息来源"><span class="badge badge-outline">公告/半年报</span></td>
</tr>
<tr class="hover">
<td data-label="股票名称" class="font-bold text-blue-300">虹软科技</td>
<td data-label="分类"><span class="badge badge-info">智驾</span></td>
<td data-label="合作项目/理由">依托高通Snapdragon Ride平台构建辅助驾驶系统解决方案。</td>
<td data-label="信息来源"><span class="badge badge-outline">调研</span></td>
</tr>
<tr class="hover">
<td data-label="股票名称" class="font-bold text-blue-300">龙迅股份</td>
<td data-label="分类"><span class="badge badge-secondary">其他</span></td>
<td data-label="合作项目/理由">芯片产品被高通纳入其参考设计平台。</td>
<td data-label="信息来源"><span class="badge badge-outline">公告</span></td>
</tr>
<tr class="hover">
<td data-label="股票名称" class="font-bold text-blue-300">润欣科技</td>
<td data-label="分类"><span class="badge badge-warning">分销</span></td>
<td data-label="合作项目/理由">高通在中国本土的授权代理商之一。</td>
<td data-label="信息来源"><span class="badge badge-outline">互动</span></td>
</tr>
<tr class="hover">
<td data-label="股票名称" class="font-bold text-blue-300">长电科技</td>
<td data-label="分类"><span class="badge badge-secondary">其他</span></td>
<td data-label="合作项目/理由">旗下不同工厂与高通有紧密合作,曾获高通“卓越供应商奖”。</td>
<td data-label="信息来源"><span class="badge badge-outline">互动</span></td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Section 4: Future & Risks (Collapsible) -->
<section id="insight-risk" class="mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-center">
<i class="fas fa-binoculars mr-2 text-cyan-400"></i>未来展望与潜在风险
</h2>
<div class="space-y-4">
<!-- Collapsible Item 1: Catalysts -->
<div class="collapse collapse-arrow bg-base-200">
<input type="radio" name="my-accordion-2" checked="checked" />
<div class="collapse-title text-xl font-medium">
<i class="fas fa-rocket mr-2 text-success"></i> 关键催化剂
</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>PC销量验证</strong>搭载骁龙X Elite的PC市场反响是检验其PC战略成功与否的首次大考。</li>
<li><strong>反垄断调查进展:</strong>中国监管机构调查的任何新动向都将是影响市场情绪的关键。</li>
<li><strong>旗舰手机表现:</strong>三星等头部OEM新机型的市场表现将继续巩固其手机基本盘。</li>
<li><strong>汽车订单持续落地:</strong>财报中汽车业务能否保持高增长,是多元化故事的重要支撑。</li>
</ul>
</div>
</div>
<!-- Collapsible Item 2: Risks -->
<div class="collapse collapse-arrow bg-base-200">
<input type="radio" name="my-accordion-2" />
<div class="collapse-title text-xl font-medium">
<i class="fas fa-shield-halved mr-2 text-error"></i> 主要风险挑战
</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>技术竞争:</strong>在PC和数据中心市场面临英特尔、AMD和英伟达的深厚壁垒。</li>
<li><strong>商业化不及预期:</strong>Windows on ARM生态的成熟度及用户接受度存在不确定性。</li>
<li><strong>监管风险(首要):</strong>中国的反垄断调查可能限制其商业行为,对长期增长构成潜在威胁。</li>
<li><strong>成本压力:</strong>先进的AI方案如NPU+3D DRAM增加成本可能阻碍在中端市场的普及。</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer footer-center p-10 bg-base-300 text-base-content">
<div>
<p class="font-bold">
高通概念深度分析
</p>
<p>基于公开新闻、路演及Insight数据生成</p>
<p class="mt-2">© 2025 AI Financial Designer</p>
</div>
</footer>
<!-- Smooth Scroll -->
<script>
// This is a simple script for adding 'data-label' for responsive table
document.addEventListener('DOMContentLoaded', () => {
const table = document.querySelector('.responsive-table');
if (table) {
const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent.trim());
const rows = table.querySelectorAll('tbody tr');
rows.forEach(row => {
const cells = row.querySelectorAll('td');
cells.forEach((cell, index) => {
cell.setAttribute('data-label', headers[index]);
});
});
}
});
</script>
</body>
</html>

View File

@@ -1,23 +1,5 @@
<!--
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
-->
<!DOCTYPE html>
<html lang="en" dir="ltr" layout="admin">
<html lang="zh-CN" dir="ltr" layout="admin">
<head>
<meta charset="utf-8" />
<meta
@@ -25,10 +7,177 @@
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<!-- 基本 SEO -->
<title>价值前沿 - 金融AI舆情分析系统 | LLM赋能的智能分析平台</title>
<meta name="description" content="基于金融大语言模型实时监控股市行情、a股、美股提供英伟达、小米等企业舆情分析助力投资决策" />
<meta name="keywords" content="金融AI,舆情分析,股市行情,LLM,价值前沿,a股,美股,投资分析" />
<link rel="canonical" href="https://valuefrontier.cn/" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://valuefrontier.cn/" />
<meta property="og:title" content="价值前沿 - 金融AI舆情分析系统" />
<meta property="og:description" content="基于金融大语言模型实时监控股市行情、a股、美股提供英伟达、小米等企业舆情分析" />
<meta property="og:image" content="https://valuefrontier.cn/og-image.jpg" />
<meta property="og:site_name" content="价值前沿" />
<meta property="og:locale" content="zh_CN" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://valuefrontier.cn/" />
<meta name="twitter:title" content="价值前沿 - 金融AI舆情分析系统" />
<meta name="twitter:description" content="基于金融大语言模型实时监控股市行情、a股、美股" />
<meta name="twitter:image" content="https://valuefrontier.cn/og-image.jpg" />
<!-- SEO 增强 -->
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<meta name="author" content="价值前沿团队" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="价值前沿 - 金融AI舆情分析系统" />
<!-- 性能优化: DNS 预连接 -->
<link rel="preconnect" href="https://valuefrontier.cn" />
<link rel="dns-prefetch" href="https://valuefrontier.cn" />
<!-- JSON-LD 结构化数据: 组织信息 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "价值前沿",
"url": "https://valuefrontier.cn",
"logo": "https://valuefrontier.cn/logo.png",
"description": "基于金融大语言模型的智能舆情分析平台",
"foundingDate": "2023",
"contactPoint": {
"@type": "ContactPoint",
"contactType": "Customer Service",
"availableLanguage": ["zh-CN"]
},
"sameAs": [
"https://valuefrontier.cn"
]
}
</script>
<!-- JSON-LD 结构化数据: 网站信息 + 搜索功能 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "价值前沿",
"url": "https://valuefrontier.cn",
"description": "金融AI舆情分析系统实时监控股市行情",
"potentialAction": {
"@type": "SearchAction",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://valuefrontier.cn/search?q={search_term_string}"
},
"query-input": "required name=search_term_string"
}
}
</script>
<!-- JSON-LD 结构化数据: 软件应用产品信息 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "价值前沿",
"applicationCategory": "FinanceApplication",
"operatingSystem": "Web",
"url": "https://valuefrontier.cn",
"description": "基于金融大语言模型实时监控股市行情、a股、美股提供企业舆情分析",
"offers": [
{
"@type": "Offer",
"name": "专业版",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "198",
"priceCurrency": "CNY",
"billingDuration": "P1M",
"referenceQuantity": {
"@type": "QuantitativeValue",
"value": "1",
"unitText": "月"
}
},
"availability": "https://schema.org/InStock",
"url": "https://valuefrontier.cn/home/pages/account/subscription"
},
{
"@type": "Offer",
"name": "旗舰版",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "998",
"priceCurrency": "CNY",
"billingDuration": "P1M",
"referenceQuantity": {
"@type": "QuantitativeValue",
"value": "1",
"unitText": "月"
}
},
"availability": "https://schema.org/InStock",
"url": "https://valuefrontier.cn/home/pages/account/subscription"
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "1250",
"bestRating": "5",
"worstRating": "1"
},
"featureList": [
"实时舆情监控",
"智能事件分析",
"多维度数据可视化",
"AI驱动的投资建议",
"行业板块分析"
]
}
</script>
<!-- JSON-LD 结构化数据: 面包屑导航 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "首页",
"item": "https://valuefrontier.cn/"
},
{
"@type": "ListItem",
"position": 2,
"name": "事件中心",
"item": "https://valuefrontier.cn/community"
},
{
"@type": "ListItem",
"position": 3,
"name": "概念分析",
"item": "https://valuefrontier.cn/concepts"
},
{
"@type": "ListItem",
"position": 4,
"name": "个股分析",
"item": "https://valuefrontier.cn/stocks"
}
]
}
</script>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
<link
@@ -36,183 +185,20 @@
sizes="76x76"
href="%PUBLIC_URL%/apple-icon.png"
/>
<link rel="shortcut icon" type="image/x-icon" href="./favicon.png" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.png" or "favicon.png", "%PUBLIC_URL%/favicon.png" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>价值前沿——LLM赋能的分析平台</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<noscript>
<div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 20px;">
<div>
<h1 style="font-size: 2em; margin-bottom: 20px;">⚠️ 需要启用 JavaScript</h1>
<p style="font-size: 1.2em; line-height: 1.6; max-width: 600px; margin: 0 auto;">
价值前沿是一个现代化的 Web 应用,需要 JavaScript 才能正常运行。<br><br>
请在浏览器设置中启用 JavaScript然后刷新页面。
</p>
</div>
</div>
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<!-- ============================================
Dify 机器人配置 - 只在 /home 页面显示
============================================ -->
<script>
window.difyChatbotConfig = {
token: 'DwN8qAKtYFQtWskM',
baseUrl: 'https://app.valuefrontier.cn',
inputs: {
// You can define the inputs from the Start node here
// key is the variable name
// e.g.
// name: "NAME"
},
systemVariables: {
// user_id: 'YOU CAN DEFINE USER ID HERE',
// conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
},
userVariables: {
// avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
// name: 'YOU CAN DEFINE USER NAME HERE',
},
}
</script>
<!-- Dify 机器人显示控制脚本 -->
<script>
// 控制 Dify 机器人只在 /home 页面显示
function controlDifyVisibility() {
const currentPath = window.location.pathname;
const difyChatButton = document.getElementById('dify-chatbot-bubble-button');
if (difyChatButton) {
// 只在 /home 页面显示
if (currentPath === '/home') {
difyChatButton.style.display = 'flex';
console.log('[Dify] 显示机器人(当前路径: /home');
} else {
difyChatButton.style.display = 'none';
console.log('[Dify] 隐藏机器人(当前路径:', currentPath, '');
}
}
}
// 页面加载完成后执行
window.addEventListener('load', function() {
console.log('[Dify] 初始化显示控制');
// 初始检查(延迟执行,等待 Dify 按钮渲染)
setTimeout(controlDifyVisibility, 500);
setTimeout(controlDifyVisibility, 1500);
// 监听路由变化React Router 使用 pushState
const observer = setInterval(controlDifyVisibility, 1000);
// 清理函数(可选)
window.addEventListener('beforeunload', function() {
clearInterval(observer);
});
});
</script>
<script
src="https://app.valuefrontier.cn/embed.min.js"
id="DwN8qAKtYFQtWskM"
defer>
</script>
<style>
#dify-chatbot-bubble-button {
background-color: #1C64F2 !important;
width: 60px !important;
height: 60px !important;
box-shadow: 0 4px 12px rgba(28, 100, 242, 0.3) !important;
transition: all 0.3s ease !important;
}
#dify-chatbot-bubble-button:hover {
transform: scale(1.1) !important;
box-shadow: 0 6px 16px rgba(28, 100, 242, 0.4) !important;
}
#dify-chatbot-bubble-window {
width: 42rem !important;
height: 80vh !important;
max-height: calc(100vh - 2rem) !important;
position: fixed !important;
bottom: 100px !important;
right: 20px !important;
border-radius: 16px !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
border: 1px solid rgba(28, 100, 242, 0.1) !important;
z-index: 9999 !important;
}
/* 确保Dify聊天窗口中的超链接正确显示 */
#dify-chatbot-bubble-window a,
#dify-chatbot-bubble-window a:link,
#dify-chatbot-bubble-window a:visited,
#dify-chatbot-bubble-window a:hover,
#dify-chatbot-bubble-window a:active {
color: #1C64F2 !important;
text-decoration: underline !important;
cursor: pointer !important;
pointer-events: auto !important;
}
/* 确保超链接在Dify消息区域中可见 */
#dify-chatbot-bubble-window .message-content a,
#dify-chatbot-bubble-window .markdown-content a,
#dify-chatbot-bubble-window [class*="message"] a {
color: #0066cc !important;
text-decoration: underline !important;
font-weight: 500 !important;
}
/* 桌面端大屏优化 */
@media (min-width: 1440px) {
#dify-chatbot-bubble-window {
width: 45rem !important;
height: 85vh !important;
}
}
/* 平板端适配 */
@media (max-width: 1024px) and (min-width: 641px) {
#dify-chatbot-bubble-window {
width: 38rem !important;
height: 75vh !important;
right: 15px !important;
bottom: 90px !important;
}
}
/* 移动端适配 */
@media (max-width: 640px) {
#dify-chatbot-bubble-window {
width: calc(100vw - 20px) !important;
height: 85vh !important;
max-height: 85vh !important;
right: 10px !important;
bottom: 80px !important;
left: 10px !important;
}
#dify-chatbot-bubble-button {
width: 56px !important;
height: 56px !important;
}
}
</style>
</body>
</html>

View File

@@ -0,0 +1,96 @@
#!/bin/bash
# 初始化价值论坛 Elasticsearch 索引
# 使用 Nginx 代理或直连 ES
set -e
echo "🚀 开始初始化价值论坛 Elasticsearch 索引..."
echo ""
# ES 地址(根据环境选择)
if [ -n "$USE_PROXY" ]; then
ES_URL="https://valuefrontier.cn/es-api"
echo "📡 使用 Nginx 代理: $ES_URL"
else
ES_URL="http://222.128.1.157:19200"
echo "📡 直连 Elasticsearch: $ES_URL"
fi
echo ""
# 1. 创建帖子索引
echo "📝 创建帖子索引 (forum_posts)..."
curl -X PUT "$ES_URL/forum_posts" -H 'Content-Type: application/json' -d '{
"mappings": {
"properties": {
"id": { "type": "keyword" },
"author_id": { "type": "keyword" },
"author_name": { "type": "text" },
"author_avatar": { "type": "keyword" },
"title": { "type": "text" },
"content": { "type": "text" },
"images": { "type": "keyword" },
"tags": { "type": "keyword" },
"category": { "type": "keyword" },
"likes_count": { "type": "integer" },
"comments_count": { "type": "integer" },
"views_count": { "type": "integer" },
"created_at": { "type": "date" },
"updated_at": { "type": "date" },
"is_pinned": { "type": "boolean" },
"status": { "type": "keyword" }
}
}
}' 2>/dev/null && echo "✅ 帖子索引创建成功" || echo "⚠️ 帖子索引已存在或创建失败"
echo ""
# 2. 创建评论索引
echo "💬 创建评论索引 (forum_comments)..."
curl -X PUT "$ES_URL/forum_comments" -H 'Content-Type: application/json' -d '{
"mappings": {
"properties": {
"id": { "type": "keyword" },
"post_id": { "type": "keyword" },
"author_id": { "type": "keyword" },
"author_name": { "type": "text" },
"author_avatar": { "type": "keyword" },
"content": { "type": "text" },
"parent_id": { "type": "keyword" },
"likes_count": { "type": "integer" },
"created_at": { "type": "date" },
"status": { "type": "keyword" }
}
}
}' 2>/dev/null && echo "✅ 评论索引创建成功" || echo "⚠️ 评论索引已存在或创建失败"
echo ""
# 3. 创建事件时间轴索引
echo "⏰ 创建事件时间轴索引 (forum_events)..."
curl -X PUT "$ES_URL/forum_events" -H 'Content-Type: application/json' -d '{
"mappings": {
"properties": {
"id": { "type": "keyword" },
"post_id": { "type": "keyword" },
"event_type": { "type": "keyword" },
"title": { "type": "text" },
"description": { "type": "text" },
"source": { "type": "keyword" },
"source_url": { "type": "keyword" },
"related_stocks": { "type": "keyword" },
"occurred_at": { "type": "date" },
"created_at": { "type": "date" },
"importance": { "type": "keyword" }
}
}
}' 2>/dev/null && echo "✅ 事件时间轴索引创建成功" || echo "⚠️ 事件时间轴索引已存在或创建失败"
echo ""
# 4. 验证索引
echo "🔍 验证已创建的索引..."
curl -X GET "$ES_URL/_cat/indices/forum_*?v" 2>/dev/null
echo ""
echo "🎉 初始化完成!"
echo ""
echo "下一步:"
echo " 1. 访问 https://valuefrontier.cn/value-forum"
echo " 2. 点击"发布帖子"按钮创建第一篇帖子"

BIN
service_terms.docx Normal file

Binary file not shown.

View File

@@ -9,8 +9,9 @@
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Visionware.
*/
import React, { useEffect } from "react";
import React, { useEffect, useRef } from "react";
import { useDispatch } from 'react-redux';
import { useLocation } from 'react-router-dom';
// Routes
import AppRoutes from './routes';
@@ -30,12 +31,24 @@ import { initializePostHog } from './store/slices/posthogSlice';
// Utils
import { logger } from './utils/logger';
// PostHog 追踪
import { trackEvent, trackEventAsync } from '@lib/posthog';
// Contexts
import { useAuth } from '@contexts/AuthContext';
/**
* AppContent - 应用核心内容
* 负责 PostHog 初始化和渲染路由
*/
function AppContent() {
const dispatch = useDispatch();
const location = useLocation();
const { isAuthenticated } = useAuth();
// ✅ 使用 Ref 存储页面进入时间和路径(避免闭包问题)
const pageEnterTimeRef = useRef(Date.now());
const currentPathRef = useRef(location.pathname);
// 🎯 PostHog Redux 初始化
useEffect(() => {
@@ -43,6 +56,67 @@ function AppContent() {
logger.info('App', 'PostHog Redux 初始化已触发');
}, [dispatch]);
// ✅ 首次访问追踪
useEffect(() => {
const hasVisited = localStorage.getItem('has_visited');
if (!hasVisited) {
const urlParams = new URLSearchParams(location.search);
// ⚡ 使用异步追踪,不阻塞页面渲染
trackEventAsync('first_visit', {
referrer: document.referrer || 'direct',
utm_source: urlParams.get('utm_source'),
utm_medium: urlParams.get('utm_medium'),
utm_campaign: urlParams.get('utm_campaign'),
landing_page: location.pathname,
timestamp: new Date().toISOString()
});
localStorage.setItem('has_visited', 'true');
}
}, [location.search, location.pathname]);
// ✅ 页面浏览时长追踪
useEffect(() => {
// 计算上一个页面的停留时长
const calculateAndTrackDuration = () => {
const exitTime = Date.now();
const duration = Math.round((exitTime - pageEnterTimeRef.current) / 1000); // 秒
// 只追踪停留时间 > 1 秒的页面(过滤快速跳转)
if (duration > 1) {
// ⚡ 使用异步追踪,不阻塞页面切换
trackEventAsync('page_view_duration', {
path: currentPathRef.current,
duration_seconds: duration,
is_authenticated: isAuthenticated,
timestamp: new Date().toISOString()
});
}
};
// 路由切换时追踪上一个页面的时长
if (currentPathRef.current !== location.pathname) {
calculateAndTrackDuration();
// 更新为新页面
currentPathRef.current = location.pathname;
pageEnterTimeRef.current = Date.now();
}
// 页面关闭/刷新时追踪时长
const handleBeforeUnload = () => {
calculateAndTrackDuration();
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
};
}, [location.pathname, isAuthenticated]);
return <AppRoutes />;
}

Some files were not shown because too many files have changed in this diff Show More