Compare commits
7 Commits
before-rec
...
ce19881181
| Author | SHA1 | Date | |
|---|---|---|---|
| ce19881181 | |||
| bef3e86f60 | |||
| 65deea43e2 | |||
| c7a881c965 | |||
| 6932796b00 | |||
|
|
03f1331202 | ||
|
|
c771f7cae6 |
164
app.py
164
app.py
@@ -26,6 +26,7 @@ import re
|
||||
import string
|
||||
from datetime import datetime, timedelta, time as dt_time, date
|
||||
from clickhouse_driver import Client as Cclient
|
||||
from elasticsearch import Elasticsearch
|
||||
from flask_cors import CORS
|
||||
|
||||
from collections import defaultdict
|
||||
@@ -138,6 +139,15 @@ engine_2 = create_engine(
|
||||
pool_timeout=30,
|
||||
max_overflow=10
|
||||
)
|
||||
|
||||
# Elasticsearch 客户端初始化
|
||||
es_client = Elasticsearch(
|
||||
hosts=["http://222.128.1.157:19200"],
|
||||
request_timeout=30,
|
||||
max_retries=3,
|
||||
retry_on_timeout=True
|
||||
)
|
||||
|
||||
app = Flask(__name__)
|
||||
# 存储验证码的临时字典(生产环境应使用Redis)
|
||||
verification_codes = {}
|
||||
@@ -11688,108 +11698,98 @@ def get_daily_top_concepts():
|
||||
|
||||
@app.route('/api/market/rise-analysis/<seccode>', methods=['GET'])
|
||||
def get_rise_analysis(seccode):
|
||||
"""获取股票涨幅分析数据"""
|
||||
"""获取股票涨幅分析数据(从 Elasticsearch 获取)"""
|
||||
try:
|
||||
# 获取日期范围参数
|
||||
start_date = request.args.get('start_date')
|
||||
end_date = request.args.get('end_date')
|
||||
limit = request.args.get('limit', 100, type=int)
|
||||
|
||||
query = text("""
|
||||
SELECT stock_code,
|
||||
stock_name,
|
||||
trade_date,
|
||||
rise_rate,
|
||||
close_price,
|
||||
volume,
|
||||
amount,
|
||||
main_business,
|
||||
rise_reason_brief,
|
||||
rise_reason_detail,
|
||||
news_summary,
|
||||
announcements,
|
||||
guba_sentiment,
|
||||
analysis_time
|
||||
FROM stock_rise_analysis
|
||||
WHERE stock_code = :stock_code
|
||||
""")
|
||||
# 构建 ES 查询
|
||||
must_conditions = [
|
||||
{"term": {"stock_code": seccode}}
|
||||
]
|
||||
|
||||
params = {'stock_code': seccode}
|
||||
|
||||
# 添加日期筛选
|
||||
# 添加日期范围筛选
|
||||
if start_date and end_date:
|
||||
query = text("""
|
||||
SELECT stock_code,
|
||||
stock_name,
|
||||
trade_date,
|
||||
rise_rate,
|
||||
close_price,
|
||||
volume,
|
||||
amount,
|
||||
main_business,
|
||||
rise_reason_brief,
|
||||
rise_reason_detail,
|
||||
news_summary,
|
||||
announcements,
|
||||
guba_sentiment,
|
||||
analysis_time
|
||||
FROM stock_rise_analysis
|
||||
WHERE stock_code = :stock_code
|
||||
AND trade_date BETWEEN :start_date AND :end_date
|
||||
ORDER BY trade_date DESC
|
||||
""")
|
||||
params['start_date'] = start_date
|
||||
params['end_date'] = end_date
|
||||
else:
|
||||
query = text("""
|
||||
SELECT stock_code,
|
||||
stock_name,
|
||||
trade_date,
|
||||
rise_rate,
|
||||
close_price,
|
||||
volume,
|
||||
amount,
|
||||
main_business,
|
||||
rise_reason_brief,
|
||||
rise_reason_detail,
|
||||
news_summary,
|
||||
announcements,
|
||||
guba_sentiment,
|
||||
analysis_time
|
||||
FROM stock_rise_analysis
|
||||
WHERE stock_code = :stock_code
|
||||
ORDER BY trade_date DESC LIMIT 100
|
||||
""")
|
||||
must_conditions.append({
|
||||
"range": {
|
||||
"trade_date": {
|
||||
"gte": start_date,
|
||||
"lte": end_date,
|
||||
"format": "yyyy-MM-dd"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
with engine.connect() as conn:
|
||||
result = conn.execute(query, params).fetchall()
|
||||
es_query = {
|
||||
"query": {
|
||||
"bool": {
|
||||
"must": must_conditions
|
||||
}
|
||||
},
|
||||
"sort": [
|
||||
{"trade_date": {"order": "desc"}}
|
||||
],
|
||||
"size": limit,
|
||||
"_source": {
|
||||
"excludes": ["rise_reason_detail_embedding"] # 排除向量字段
|
||||
}
|
||||
}
|
||||
|
||||
# 执行 ES 查询
|
||||
response = es_client.search(index="stock_rise_analysis", body=es_query)
|
||||
|
||||
# 格式化数据
|
||||
rise_analysis_data = []
|
||||
for row in result:
|
||||
for hit in response['hits']['hits']:
|
||||
source = hit['_source']
|
||||
|
||||
# 处理研报引用数据
|
||||
verification_reports = []
|
||||
if source.get('has_verification_info') and source.get('verification_info'):
|
||||
v_info = source['verification_info']
|
||||
processed_results = v_info.get('processed_result', [])
|
||||
for report in processed_results:
|
||||
verification_reports.append({
|
||||
'publisher': report.get('publisher', ''),
|
||||
'report_title': report.get('report_title', ''),
|
||||
'author': report.get('author', ''),
|
||||
'declare_date': report.get('declare_date', ''),
|
||||
'content': report.get('content', ''),
|
||||
'verification_item': report.get('verification_item', ''),
|
||||
'match_ratio': report.get('match_ratio', 0),
|
||||
'match_score': report.get('match_score', '')
|
||||
})
|
||||
|
||||
rise_analysis_data.append({
|
||||
'stock_code': row.stock_code,
|
||||
'stock_name': row.stock_name,
|
||||
'trade_date': format_date(row.trade_date),
|
||||
'rise_rate': format_decimal(row.rise_rate),
|
||||
'close_price': format_decimal(row.close_price),
|
||||
'volume': format_decimal(row.volume),
|
||||
'amount': format_decimal(row.amount),
|
||||
'main_business': row.main_business,
|
||||
'rise_reason_brief': row.rise_reason_brief,
|
||||
'rise_reason_detail': row.rise_reason_detail,
|
||||
'news_summary': row.news_summary,
|
||||
'announcements': row.announcements,
|
||||
'guba_sentiment': row.guba_sentiment,
|
||||
'analysis_time': row.analysis_time.strftime('%Y-%m-%d %H:%M:%S') if row.analysis_time else None
|
||||
'stock_code': source.get('stock_code', ''),
|
||||
'stock_name': source.get('stock_name', ''),
|
||||
'trade_date': source.get('trade_date', ''),
|
||||
'rise_rate': source.get('rise_rate', 0),
|
||||
'close_price': source.get('close_price', 0),
|
||||
'volume': source.get('volume', 0),
|
||||
'amount': source.get('amount', 0),
|
||||
'main_business': source.get('main_business', ''),
|
||||
'rise_reason_brief': source.get('rise_reason_brief', ''),
|
||||
'rise_reason_detail': source.get('rise_reason_detail', ''),
|
||||
'announcements': source.get('announcements', ''),
|
||||
'verification_reports': verification_reports,
|
||||
'has_verification_info': source.get('has_verification_info', False),
|
||||
'create_time': source.get('create_time', ''),
|
||||
'update_time': source.get('update_time', '')
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': rise_analysis_data,
|
||||
'count': len(rise_analysis_data)
|
||||
'count': len(rise_analysis_data),
|
||||
'total': response['hits']['total']['value']
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
import traceback
|
||||
print(f"ES查询错误: {traceback.format_exc()}")
|
||||
return jsonify({
|
||||
'success': False,
|
||||
'error': str(e)
|
||||
|
||||
332
app_vx.py
332
app_vx.py
@@ -55,6 +55,9 @@ from datetime import datetime, timedelta, time as dt_time
|
||||
from werkzeug.security import generate_password_hash, check_password_hash
|
||||
import json
|
||||
from clickhouse_driver import Client as Cclient
|
||||
from queue import Queue, Empty, Full
|
||||
from threading import Lock, RLock
|
||||
from contextlib import contextmanager
|
||||
import jwt
|
||||
from docx import Document
|
||||
from tencentcloud.common import credential
|
||||
@@ -69,6 +72,289 @@ engine_med = create_engine("mysql+pymysql://root:Zzl5588161!@222.128.1.157:33060
|
||||
engine_2 = create_engine("mysql+pymysql://root:Zzl5588161!@222.128.1.157:33060/valuefrontier", echo=False)
|
||||
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
# ===================== ClickHouse 连接池实现 =====================
|
||||
class ClickHouseConnectionPool:
|
||||
"""
|
||||
ClickHouse 连接池
|
||||
- 支持连接复用,避免频繁创建/销毁连接
|
||||
- 支持连接超时和健康检查
|
||||
- 支持自动重连
|
||||
- 线程安全
|
||||
"""
|
||||
|
||||
def __init__(self, host, port, user, password, database,
|
||||
pool_size=10, max_overflow=10,
|
||||
connection_timeout=10, query_timeout=30,
|
||||
health_check_interval=60):
|
||||
"""
|
||||
初始化连接池
|
||||
|
||||
Args:
|
||||
host: ClickHouse 主机地址
|
||||
port: ClickHouse 端口
|
||||
user: 用户名
|
||||
password: 密码
|
||||
database: 数据库名
|
||||
pool_size: 连接池核心大小(预创建连接数)
|
||||
max_overflow: 最大溢出连接数(总连接数 = pool_size + max_overflow)
|
||||
connection_timeout: 获取连接超时时间(秒)
|
||||
query_timeout: 查询超时时间(秒)
|
||||
health_check_interval: 健康检查间隔(秒)
|
||||
"""
|
||||
self.host = host
|
||||
self.port = port
|
||||
self.user = user
|
||||
self.password = password
|
||||
self.database = database
|
||||
self.pool_size = pool_size
|
||||
self.max_overflow = max_overflow
|
||||
self.connection_timeout = connection_timeout
|
||||
self.query_timeout = query_timeout
|
||||
self.health_check_interval = health_check_interval
|
||||
|
||||
# 连接池队列
|
||||
self._pool = Queue(maxsize=pool_size + max_overflow)
|
||||
# 当前活跃连接数
|
||||
self._active_connections = 0
|
||||
# 锁
|
||||
self._lock = RLock()
|
||||
# 连接最后使用时间记录
|
||||
self._last_used = {}
|
||||
# 连接创建时间记录
|
||||
self._created_at = {}
|
||||
|
||||
# 初始化核心连接
|
||||
self._init_pool()
|
||||
logger.info(f"ClickHouse 连接池初始化完成: pool_size={pool_size}, max_overflow={max_overflow}")
|
||||
|
||||
def _init_pool(self):
|
||||
"""初始化连接池,预创建部分核心连接(非阻塞)"""
|
||||
# 只预创建 2 个连接,其余按需创建
|
||||
init_count = min(2, self.pool_size)
|
||||
for i in range(init_count):
|
||||
try:
|
||||
conn = self._create_connection()
|
||||
if conn:
|
||||
self._pool.put(conn)
|
||||
logger.info(f"预创建 ClickHouse 连接 {i+1}/{init_count} 成功")
|
||||
except Exception as e:
|
||||
logger.warning(f"预创建 ClickHouse 连接失败 ({i+1}/{init_count}): {e}")
|
||||
# 预创建失败不阻塞启动,后续按需创建
|
||||
break
|
||||
|
||||
def _create_connection(self):
|
||||
"""创建新的 ClickHouse 连接"""
|
||||
try:
|
||||
client = Cclient(
|
||||
host=self.host,
|
||||
port=self.port,
|
||||
user=self.user,
|
||||
password=self.password,
|
||||
database=self.database,
|
||||
connect_timeout=self.connection_timeout,
|
||||
send_receive_timeout=self.query_timeout,
|
||||
sync_request_timeout=self.query_timeout,
|
||||
settings={
|
||||
'max_execution_time': self.query_timeout,
|
||||
'connect_timeout': self.connection_timeout,
|
||||
}
|
||||
)
|
||||
conn_id = id(client)
|
||||
self._created_at[conn_id] = time.time()
|
||||
self._last_used[conn_id] = time.time()
|
||||
with self._lock:
|
||||
self._active_connections += 1
|
||||
logger.debug(f"创建新的 ClickHouse 连接: {conn_id}")
|
||||
return client
|
||||
except Exception as e:
|
||||
logger.error(f"创建 ClickHouse 连接失败: {e}")
|
||||
raise
|
||||
|
||||
def _check_connection_health(self, conn):
|
||||
"""检查连接健康状态"""
|
||||
try:
|
||||
conn_id = id(conn)
|
||||
last_used = self._last_used.get(conn_id, 0)
|
||||
|
||||
# 如果连接长时间未使用,进行健康检查
|
||||
if time.time() - last_used > self.health_check_interval:
|
||||
# 执行简单查询检查连接
|
||||
conn.execute("SELECT 1")
|
||||
logger.debug(f"连接 {conn_id} 健康检查通过")
|
||||
|
||||
return True
|
||||
except Exception as e:
|
||||
logger.warning(f"连接健康检查失败: {e}")
|
||||
return False
|
||||
|
||||
def _close_connection(self, conn):
|
||||
"""关闭连接"""
|
||||
try:
|
||||
conn_id = id(conn)
|
||||
conn.disconnect()
|
||||
self._last_used.pop(conn_id, None)
|
||||
self._created_at.pop(conn_id, None)
|
||||
with self._lock:
|
||||
self._active_connections = max(0, self._active_connections - 1)
|
||||
logger.debug(f"关闭 ClickHouse 连接: {conn_id}")
|
||||
except Exception as e:
|
||||
logger.warning(f"关闭连接时出错: {e}")
|
||||
|
||||
def get_connection(self, timeout=None):
|
||||
"""
|
||||
从连接池获取连接
|
||||
|
||||
Args:
|
||||
timeout: 获取连接的超时时间,默认使用 connection_timeout
|
||||
|
||||
Returns:
|
||||
ClickHouse 客户端连接
|
||||
|
||||
Raises:
|
||||
TimeoutError: 获取连接超时
|
||||
Exception: 创建连接失败
|
||||
"""
|
||||
timeout = timeout or self.connection_timeout
|
||||
|
||||
# 首先尝试从池中获取连接
|
||||
try:
|
||||
conn = self._pool.get(block=True, timeout=timeout)
|
||||
|
||||
# 检查连接健康状态
|
||||
if self._check_connection_health(conn):
|
||||
self._last_used[id(conn)] = time.time()
|
||||
return conn
|
||||
else:
|
||||
# 连接不健康,关闭并创建新连接
|
||||
self._close_connection(conn)
|
||||
return self._create_connection()
|
||||
|
||||
except Empty:
|
||||
# 池中没有可用连接,检查是否可以创建新连接
|
||||
with self._lock:
|
||||
if self._active_connections < self.pool_size + self.max_overflow:
|
||||
try:
|
||||
return self._create_connection()
|
||||
except Exception as e:
|
||||
logger.error(f"创建溢出连接失败: {e}")
|
||||
raise
|
||||
|
||||
# 已达到最大连接数,等待连接释放
|
||||
logger.warning(f"连接池已满,等待连接释放... (当前连接数: {self._active_connections})")
|
||||
raise TimeoutError(f"获取 ClickHouse 连接超时 (timeout={timeout}s)")
|
||||
|
||||
def release_connection(self, conn):
|
||||
"""
|
||||
释放连接回连接池
|
||||
|
||||
Args:
|
||||
conn: 要释放的连接
|
||||
"""
|
||||
if conn is None:
|
||||
return
|
||||
|
||||
conn_id = id(conn)
|
||||
self._last_used[conn_id] = time.time()
|
||||
|
||||
try:
|
||||
self._pool.put(conn, block=False)
|
||||
logger.debug(f"连接 {conn_id} 已释放回连接池")
|
||||
except Full:
|
||||
# 池已满,关闭多余连接
|
||||
logger.debug(f"连接池已满,关闭多余连接: {conn_id}")
|
||||
self._close_connection(conn)
|
||||
|
||||
@contextmanager
|
||||
def connection(self, timeout=None):
|
||||
"""
|
||||
上下文管理器方式获取连接
|
||||
|
||||
Usage:
|
||||
with pool.connection() as conn:
|
||||
result = conn.execute("SELECT * FROM table")
|
||||
"""
|
||||
conn = None
|
||||
try:
|
||||
conn = self.get_connection(timeout)
|
||||
yield conn
|
||||
except Exception as e:
|
||||
# 发生异常时,检查连接是否需要重建
|
||||
if conn:
|
||||
try:
|
||||
# 尝试简单查询检测连接状态
|
||||
conn.execute("SELECT 1")
|
||||
except:
|
||||
# 连接已损坏,关闭它
|
||||
self._close_connection(conn)
|
||||
conn = None
|
||||
raise
|
||||
finally:
|
||||
if conn:
|
||||
self.release_connection(conn)
|
||||
|
||||
def execute(self, query, params=None, timeout=None):
|
||||
"""
|
||||
执行查询(自动管理连接)
|
||||
|
||||
Args:
|
||||
query: SQL 查询语句
|
||||
params: 查询参数
|
||||
timeout: 查询超时时间
|
||||
|
||||
Returns:
|
||||
查询结果
|
||||
"""
|
||||
with self.connection(timeout) as conn:
|
||||
return conn.execute(query, params)
|
||||
|
||||
def get_pool_status(self):
|
||||
"""获取连接池状态"""
|
||||
return {
|
||||
'pool_size': self.pool_size,
|
||||
'max_overflow': self.max_overflow,
|
||||
'active_connections': self._active_connections,
|
||||
'available_connections': self._pool.qsize(),
|
||||
'max_connections': self.pool_size + self.max_overflow
|
||||
}
|
||||
|
||||
def close_all(self):
|
||||
"""关闭所有连接"""
|
||||
while not self._pool.empty():
|
||||
try:
|
||||
conn = self._pool.get_nowait()
|
||||
self._close_connection(conn)
|
||||
except Empty:
|
||||
break
|
||||
logger.info("ClickHouse 连接池已关闭所有连接")
|
||||
|
||||
|
||||
# 初始化全局 ClickHouse 连接池(懒加载模式)
|
||||
clickhouse_pool = None
|
||||
_pool_lock = Lock()
|
||||
|
||||
|
||||
def _init_clickhouse_pool():
|
||||
"""懒加载初始化 ClickHouse 连接池"""
|
||||
global clickhouse_pool
|
||||
if clickhouse_pool is None:
|
||||
with _pool_lock:
|
||||
if clickhouse_pool is None:
|
||||
clickhouse_pool = ClickHouseConnectionPool(
|
||||
host='222.128.1.157',
|
||||
port=18000,
|
||||
user='default',
|
||||
password='Zzl33818!',
|
||||
database='stock',
|
||||
pool_size=5, # 减少预创建连接数
|
||||
max_overflow=20, # 增加溢出连接数,总共支持 25 并发
|
||||
connection_timeout=10, # 连接超时 10 秒
|
||||
query_timeout=30, # 查询超时 30 秒
|
||||
health_check_interval=60 # 60 秒未使用的连接进行健康检查
|
||||
)
|
||||
return clickhouse_pool
|
||||
# ===================== ClickHouse 连接池实现结束 =====================
|
||||
app = Flask(__name__)
|
||||
Compress(app)
|
||||
UPLOAD_FOLDER = 'static/uploads/avatars'
|
||||
@@ -1150,13 +1436,40 @@ def update_investment_preferences():
|
||||
|
||||
|
||||
def get_clickhouse_client():
|
||||
return Cclient(
|
||||
host='222.128.1.157',
|
||||
port=18000,
|
||||
user='default',
|
||||
password='Zzl33818!',
|
||||
database='stock'
|
||||
)
|
||||
"""
|
||||
获取 ClickHouse 客户端(使用连接池,懒加载)
|
||||
|
||||
返回连接池对象,支持两种使用方式:
|
||||
|
||||
方式1(推荐)- 直接调用 execute:
|
||||
client = get_clickhouse_client()
|
||||
result = client.execute("SELECT * FROM table", {'param': value})
|
||||
|
||||
方式2 - 使用上下文管理器:
|
||||
client = get_clickhouse_client()
|
||||
with client.connection() as conn:
|
||||
result = conn.execute("SELECT * FROM table")
|
||||
"""
|
||||
return _init_clickhouse_pool()
|
||||
|
||||
|
||||
@app.route('/api/system/clickhouse-pool-status', methods=['GET'])
|
||||
def api_clickhouse_pool_status():
|
||||
"""获取 ClickHouse 连接池状态(仅供监控使用)"""
|
||||
try:
|
||||
pool = _init_clickhouse_pool()
|
||||
status = pool.get_pool_status()
|
||||
return jsonify({
|
||||
'code': 200,
|
||||
'message': 'success',
|
||||
'data': status
|
||||
})
|
||||
except Exception as e:
|
||||
return jsonify({
|
||||
'code': 500,
|
||||
'message': str(e),
|
||||
'data': None
|
||||
}), 500
|
||||
|
||||
|
||||
@app.route('/api/stock/<stock_code>/kline')
|
||||
@@ -1292,6 +1605,7 @@ def get_daily_kline(stock_code, event_datetime, stock_name):
|
||||
'name': stock_name,
|
||||
'data': kline_data,
|
||||
'trade_date': event_datetime.date().strftime('%Y-%m-%d'),
|
||||
'event_time': event_datetime.isoformat(),
|
||||
'type': 'daily',
|
||||
'is_history': True,
|
||||
'data_count': len(kline_data)
|
||||
@@ -4120,7 +4434,9 @@ def api_stock_detail(event_id, stock_code):
|
||||
'event_info': {
|
||||
'event_id': event.id,
|
||||
'event_title': event.title,
|
||||
'event_description': event.description
|
||||
'event_description': event.description,
|
||||
'event_start_time': event.start_time.isoformat() if event.start_time else None,
|
||||
'event_created_at': event.created_at.strftime("%Y-%m-%d %H:%M:%S") if event.created_at else None
|
||||
},
|
||||
'basic_info': {
|
||||
'stock_code': basic_info.SECCODE,
|
||||
|
||||
553
public/htmls/TPU芯片.html
Normal file
553
public/htmls/TPU芯片.html
Normal file
@@ -0,0 +1,553 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TPU芯片 - 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://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=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.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.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;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, transparent, #667eea, #764ba2, transparent);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-responsive::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.table-responsive::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.table-responsive::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.table-responsive::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Hero Section -->
|
||||
<div class="relative min-h-screen flex items-center justify-center text-white">
|
||||
<div class="absolute inset-0 bg-black opacity-50"></div>
|
||||
<div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-6" data-aos="fade-up">
|
||||
TPU芯片
|
||||
</h1>
|
||||
<p class="text-xl md:text-3xl mb-8" data-aos="fade-up" data-aos-delay="200">
|
||||
AI算力的架构革命
|
||||
</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="glass-effect p-6 rounded-2xl">
|
||||
<div class="text-4xl font-bold mb-2">4614</div>
|
||||
<div class="text-lg">TFLOPS算力</div>
|
||||
<div class="text-sm mt-2 opacity-80">TPU v7 (Ironwood)</div>
|
||||
</div>
|
||||
<div class="glass-effect p-6 rounded-2xl">
|
||||
<div class="text-4xl font-bold mb-2">980万亿</div>
|
||||
<div class="text-lg">Tokens调用量</div>
|
||||
<div class="text-sm mt-2 opacity-80">2025年7月预期</div>
|
||||
</div>
|
||||
<div class="glass-effect p-6 rounded-2xl">
|
||||
<div class="text-4xl font-bold mb-2">3-5倍</div>
|
||||
<div class="text-lg">性价比优势</div>
|
||||
<div class="text-sm mt-2 opacity-80">对比GPU</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<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 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<div class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">发展时间轴</h2>
|
||||
<div class="relative">
|
||||
<div class="timeline-line hidden md:block"></div>
|
||||
<div class="space-y-12">
|
||||
<div class="flex flex-col md:flex-row items-center" data-aos="fade-right">
|
||||
<div class="md:w-1/2 md:pr-8 text-right">
|
||||
<div class="glass-effect p-6 rounded-xl inline-block">
|
||||
<h3 class="text-2xl font-bold mb-2">2023年12月</h3>
|
||||
<p class="text-gray-600">发布TPU v5p,性能较v4提升2.8倍</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-dot w-4 h-4 bg-purple-600 rounded-full mx-4 my-4"></div>
|
||||
<div class="md:w-1/2 md:pl-8"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center" data-aos="fade-left">
|
||||
<div class="md:w-1/2 md:pr-8"></div>
|
||||
<div class="timeline-dot w-4 h-4 bg-purple-600 rounded-full mx-4 my-4"></div>
|
||||
<div class="md:w-1/2 md:pl-8">
|
||||
<div class="glass-effect p-6 rounded-xl inline-block">
|
||||
<h3 class="text-2xl font-bold mb-2">2024年8月</h3>
|
||||
<p class="text-gray-600">苹果使用8192颗TPU v4训练AI模型</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center" data-aos="fade-right">
|
||||
<div class="md:w-1/2 md:pr-8 text-right">
|
||||
<div class="glass-effect p-6 rounded-xl inline-block pulse-animation">
|
||||
<h3 class="text-2xl font-bold mb-2">2025年4月9日</h3>
|
||||
<p class="text-gray-600">TPU v7 (Ironwood)正式发布</p>
|
||||
<p class="text-sm text-purple-600 mt-2">4614 TFLOPS算力 · 192GB HBM3e</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-dot w-4 h-4 bg-purple-600 rounded-full mx-4 my-4"></div>
|
||||
<div class="md:w-1/2 md:pl-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Core Logic Section -->
|
||||
<div class="py-20 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<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="stat-card bg-white p-8 rounded-2xl shadow-xl" data-aos="zoom-in" data-aos-delay="100">
|
||||
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
|
||||
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-4">硬件架构颠覆</h3>
|
||||
<p class="text-gray-600 mb-4">脉动阵列 + 3D Torus网络拓扑</p>
|
||||
<div class="text-sm text-purple-600 font-semibold">
|
||||
利用率: 50%+ (GPU仅20-40%)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card bg-white p-8 rounded-2xl shadow-xl" data-aos="zoom-in" data-aos-delay="200">
|
||||
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
|
||||
<svg class="w-8 h-8 text-purple-600" 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 mb-4">TCO碾压优势</h3>
|
||||
<p class="text-gray-600 mb-4">租赁成本仅为H100的1/4</p>
|
||||
<div class="text-sm text-purple-600 font-semibold">
|
||||
H100: 7万美元/月 → TPU: 3万美元/月
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card bg-white p-8 rounded-2xl shadow-xl" data-aos="zoom-in" data-aos-delay="300">
|
||||
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
|
||||
<svg class="w-8 h-8 text-purple-600" 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 mb-4">生态开放拐点</h3>
|
||||
<p class="text-gray-600 mb-4">TPU+XLA对标GPU+CUDA</p>
|
||||
<div class="text-sm text-purple-600 font-semibold">
|
||||
Meta、OpenAI等外部客户接入
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Industry Chain Section -->
|
||||
<div class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">产业链价值分布</h2>
|
||||
<div class="mb-12">
|
||||
<canvas id="valueChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
|
||||
<div class="p-4 bg-purple-50 rounded-lg">
|
||||
<div class="text-2xl font-bold text-purple-600">30-35%</div>
|
||||
<div class="text-gray-600">PCB</div>
|
||||
</div>
|
||||
<div class="p-4 bg-blue-50 rounded-lg">
|
||||
<div class="text-2xl font-bold text-blue-600">20-25%</div>
|
||||
<div class="text-gray-600">HBM</div>
|
||||
</div>
|
||||
<div class="p-4 bg-green-50 rounded-lg">
|
||||
<div class="text-2xl font-bold text-green-600">15-20%</div>
|
||||
<div class="text-gray-600">电源模块</div>
|
||||
</div>
|
||||
<div class="p-4 bg-yellow-50 rounded-lg">
|
||||
<div class="text-2xl font-bold text-yellow-600">10-15%</div>
|
||||
<div class="text-gray-600">OCS光交换</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stocks Table Section -->
|
||||
<div class="py-20 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">相关标的</h2>
|
||||
<div class="table-responsive bg-white rounded-2xl shadow-xl overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gradient-to-r from-purple-600 to-purple-800 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>
|
||||
<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-primary">OCS光交换</span></td>
|
||||
<td class="px-6 py-4">谷歌OCS独家代工厂,单台3万美元</td>
|
||||
<td class="px-6 py-4">网传纪要</td>
|
||||
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐⭐</span></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-secondary">电源</span></td>
|
||||
<td class="px-6 py-4">意向订单超5亿美元,国产替代</td>
|
||||
<td class="px-6 py-4">网传纪要</td>
|
||||
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐⭐</span></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-accent">PCB</span></td>
|
||||
<td class="px-6 py-4">V7大份额一供,价值量翻倍</td>
|
||||
<td class="px-6 py-4">网传纪要</td>
|
||||
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐</span></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-accent">PCB</span></td>
|
||||
<td class="px-6 py-4">供应份额30-40%,主导30-40层板</td>
|
||||
<td class="px-6 py-4">网传纪要</td>
|
||||
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐</span></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">谷歌份额60%+,确定性最高</td>
|
||||
<td class="px-6 py-4">网传纪要</td>
|
||||
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐</span></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">M9材料</span></td>
|
||||
<td class="px-6 py-4">台光核心高速树脂主力供应商</td>
|
||||
<td class="px-6 py-4">网传纪要</td>
|
||||
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐</span></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-error">国产TPU</span></td>
|
||||
<td class="px-6 py-4">中昊芯英拟要约收购</td>
|
||||
<td class="px-6 py-4">公告</td>
|
||||
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐</span></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-accent">PCB</span></td>
|
||||
<td class="px-6 py-4">供应V7 44层板,份额10-15%</td>
|
||||
<td class="px-6 py-4">网传纪要</td>
|
||||
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Risks Section -->
|
||||
<div class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">潜在风险</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="alert alert-warning shadow-lg" data-aos="fade-up">
|
||||
<svg class="stroke-current flex-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"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">软件生态成熟度</h3>
|
||||
<div class="text-xs">TPU+XLA生态仍落后CUDA 5年以上</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-error shadow-lg" data-aos="fade-up" data-aos-delay="100">
|
||||
<svg class="stroke-current flex-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"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">HBM供应瓶颈</h3>
|
||||
<div class="text-xs">2025年HBM产能被英伟达抢占</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info shadow-lg" data-aos="fade-up" data-aos-delay="200">
|
||||
<svg class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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-xs">85%需求来自谷歌内部</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning shadow-lg" data-aos="fade-up" data-aos-delay="300">
|
||||
<svg class="stroke-current flex-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"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">架构专利壁垒</h3>
|
||||
<div class="text-xs">国产TPU面临侵权风险</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-error shadow-lg" data-aos="fade-up" data-aos-delay="400">
|
||||
<svg class="stroke-current flex-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"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">同业追赶</h3>
|
||||
<div class="text-xs">Meta、AWS ASIC 2026年量产</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info shadow-lg" data-aos="fade-up" data-aos-delay="500">
|
||||
<svg class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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-xs">新兴架构(Mamba)适配性差</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Catalysts Section -->
|
||||
<div class="py-20 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">关键催化剂</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item" data-aos="fade-up">
|
||||
<div class="timeline-marker bg-purple-600"></div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="text-xl font-bold mb-2">近期 (2025Q2-Q4)</h3>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-1">
|
||||
<li>Ironwood量产验证与正式上架</li>
|
||||
<li>Anthropic 100万颗TPU订单交付</li>
|
||||
<li>供应链订单落地(胜宏、光库Q2财报)</li>
|
||||
<li>国产TPU产业化突破</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="timeline-marker bg-blue-600"></div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="text-xl font-bold mb-2">中期 (2025-2026)</h3>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-1">
|
||||
<li>JAX XLA生态开放给第三方开发者</li>
|
||||
<li>产业链进入量价齐升阶段</li>
|
||||
<li>国产TPU在特定领域落地</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="timeline-marker bg-green-600"></div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="text-xl font-bold mb-2">长期 (2025-2027)</h3>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-1">
|
||||
<li>AI ASIC市场750亿美元三分天下</li>
|
||||
<li>TPU推理市场份额超40%</li>
|
||||
<li>HDI技术替代高多层PCB</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conclusion Section -->
|
||||
<div class="py-20 bg-gradient-to-r from-purple-600 to-purple-800 text-white">
|
||||
<div class="max-w-4xl mx-auto px-4 text-center">
|
||||
<h2 class="text-4xl font-bold mb-8" data-aos="fade-up">投资启示</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
||||
<div class="glass-effect p-6 rounded-2xl" data-aos="fade-up" data-aos-delay="100">
|
||||
<h3 class="text-2xl font-bold mb-4">💡 核心策略</h3>
|
||||
<p class="text-lg">"抓两头,放中间"</p>
|
||||
<ul class="text-left mt-4 space-y-2">
|
||||
<li>• 抓"增量":OCS、电源0到1机会</li>
|
||||
<li>• 抓"龙头":PCB量价齐升</li>
|
||||
<li>• 避开"伪主题":国产TPU专利风险</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="glass-effect p-6 rounded-2xl" data-aos="fade-up" data-aos-delay="200">
|
||||
<h3 class="text-2xl font-bold mb-4">🎯 最具价值环节</h3>
|
||||
<div class="space-y-3 text-left">
|
||||
<div class="flex justify-between items-center">
|
||||
<span>光库科技(OCS)</span>
|
||||
<span class="text-yellow-300">★★★★★</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span>新雷能(电源)</span>
|
||||
<span class="text-yellow-300">★★★★★</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span>胜宏/沪电(PCB)</span>
|
||||
<span class="text-yellow-300">★★★★</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xl italic" data-aos="fade-up" data-aos-delay="300">
|
||||
"TPU不是GPU的简单替代,而是AI算力架构的重新定义"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-white py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 text-center">
|
||||
<p class="text-sm opacity-75">数据来源:新闻、路演、Insight分析 | 更新时间:2025年</p>
|
||||
<p class="text-xs mt-2 opacity-50">注:投资有风险,本文仅供参考</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Initialize AOS
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true
|
||||
});
|
||||
|
||||
// Chart.js for value distribution
|
||||
const ctx = document.getElementById('valueChart').getContext('2d');
|
||||
const valueChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['PCB', 'HBM', '电源模块', 'OCS光交换', '光模块', '其他'],
|
||||
datasets: [{
|
||||
data: [32.5, 22.5, 17.5, 12.5, 7.5, 7.5],
|
||||
backgroundColor: [
|
||||
'rgba(147, 51, 234, 0.8)',
|
||||
'rgba(59, 130, 246, 0.8)',
|
||||
'rgba(34, 197, 94, 0.8)',
|
||||
'rgba(250, 204, 21, 0.8)',
|
||||
'rgba(239, 68, 68, 0.8)',
|
||||
'rgba(107, 114, 128, 0.8)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(147, 51, 234, 1)',
|
||||
'rgba(59, 130, 246, 1)',
|
||||
'rgba(34, 197, 94, 1)',
|
||||
'rgba(250, 204, 21, 1)',
|
||||
'rgba(239, 68, 68, 1)',
|
||||
'rgba(107, 114, 128, 1)'
|
||||
],
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
padding: 20,
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.label + ': ' + context.parsed + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth scroll
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
876
public/htmls/海军.html
Normal file
876
public/htmls/海军.html
Normal file
@@ -0,0 +1,876 @@
|
||||
|
||||
<!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" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.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">
|
||||
<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-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.3);
|
||||
}
|
||||
|
||||
.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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: 3px solid #1e293b;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.navy-blue {
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table-scroll::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.table-scroll::-webkit-scrollbar-track {
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.table-scroll::-webkit-scrollbar-thumb {
|
||||
background: #475569;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.badge-glow {
|
||||
animation: glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% { box-shadow: 0 0 5px rgba(102, 126, 234, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.8); }
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: linear-gradient(135deg, rgba(30, 58, 138, 0.5) 0%, rgba(30, 64, 175, 0.5) 100%);
|
||||
border: 1px solid rgba(147, 197, 253, 0.3);
|
||||
}
|
||||
|
||||
.stock-table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.stock-table th {
|
||||
background: rgba(30, 58, 138, 0.9);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.stock-table td {
|
||||
border-bottom: 1px solid rgba(71, 85, 105, 0.5);
|
||||
}
|
||||
|
||||
.stock-table tr:hover {
|
||||
background: rgba(51, 65, 85, 0.3);
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #667eea, transparent);
|
||||
margin: 3rem 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-slate-950 text-slate-100">
|
||||
<!-- Navigation -->
|
||||
<div class="navbar glass-effect fixed top-0 z-50 px-4">
|
||||
<div class="navbar-start">
|
||||
<a href="#" class="btn btn-ghost text-xl font-bold">
|
||||
<i class="fas fa-ship mr-2"></i>海军装备分析
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<li><a href="#overview">核心观点</a></li>
|
||||
<li><a href="#timeline">事件时间线</a></li>
|
||||
<li><a href="#logic">投资逻辑</a></li>
|
||||
<li><a href="#industry">产业链</a></li>
|
||||
<li><a href="#stocks">标的池</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<div class="badge badge-accent badge-glow">深度研究</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero min-h-screen hero-gradient flex items-center">
|
||||
<div class="hero-content text-center">
|
||||
<div class="max-w-5xl">
|
||||
<h1 class="text-5xl font-bold mb-6 text-white">
|
||||
<i class="fas fa-anchor mr-3"></i>海军装备产业链
|
||||
</h1>
|
||||
<p class="text-2xl mb-8 text-slate-200">战略需求刚性化 · 装备结构拐点化 · 业绩兑现初期化</p>
|
||||
|
||||
<div class="stats shadow-2xl bg-slate-900/80 backdrop-blur rounded-box w-full">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-primary">
|
||||
<svg width="48" height="48" fill="currentColor"><path d="M24 2l5.453 11.146 12.298 1.787-8.876 8.654 2.095 12.224L24 30.077 13.13 35.811l2.095-12.224-8.876-8.654 12.298-1.787L24 2z"/></svg>
|
||||
</div>
|
||||
<div class="stat-title">优先级</div>
|
||||
<div class="stat-value text-primary">极高</div>
|
||||
<div class="stat-desc">十四五重点建设方向</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<svg class="progress-ring" width="48" height="48" viewBox="0 0 36 36">
|
||||
<path class="text-slate-700" stroke="currentColor" stroke-width="3" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
|
||||
<path class="text-slate-100" stroke="currentColor" stroke-width="3" stroke-dasharray="75, 100" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">发展阶段</div>
|
||||
<div class="stat-value text-secondary">初期</div>
|
||||
<div class="stat-desc">0-1的蓝海市场</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-accent">
|
||||
<i class="fas fa-chart-line text-4xl"></i>
|
||||
</div>
|
||||
<div class="stat-title">业绩弹性</div>
|
||||
<div class="stat-value text-accent">25%+</div>
|
||||
<div class="stat-desc">2025年预期增速</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex justify-center gap-4">
|
||||
<button class="btn btn-primary btn-lg">
|
||||
<i class="fas fa-download mr-2"></i>下载研报
|
||||
</button>
|
||||
<button class="btn btn-secondary btn-lg">
|
||||
<i class="fas fa-play-circle mr-2"></i>观看路演
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Metrics -->
|
||||
<section class="py-16 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12" id="overview">核心数据洞察</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="metric-card rounded-xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-slate-400">水下装备市场空间</p>
|
||||
<p class="text-3xl font-bold text-blue-400">近千亿</p>
|
||||
</div>
|
||||
<i class="fas fa-water text-4xl text-blue-400/30"></i>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="text-sm text-slate-500">未来10年需求</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card rounded-xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-slate-400">电磁弹射弹性</p>
|
||||
<p class="text-3xl font-bold text-purple-400">5-8亿</p>
|
||||
</div>
|
||||
<i class="fas fa-bolt text-4xl text-purple-400/30"></i>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="text-sm text-slate-500">2025年增量收入</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card rounded-xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-slate-400">市占率龙头</p>
|
||||
<p class="text-3xl font-bold text-green-400">70-80%</p>
|
||||
</div>
|
||||
<i class="fas fa-crown text-4xl text-green-400/30"></i>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="text-sm text-slate-500">中国海防水声业务</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card rounded-xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-slate-400">装备增速</p>
|
||||
<p class="text-3xl font-bold text-orange-400">20-30%</p>
|
||||
</div>
|
||||
<i class="fas fa-rocket text-4xl text-orange-400/30"></i>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="text-sm text-slate-500">十四五后期预期</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Timeline -->
|
||||
<section class="py-16 px-4" id="timeline">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">重要事件时间线</h2>
|
||||
<div class="relative">
|
||||
<div class="timeline-line"></div>
|
||||
|
||||
<div class="relative mb-8 ml-12">
|
||||
<div class="timeline-dot" style="top: 8px;"></div>
|
||||
<div class="card glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span class="badge badge-primary">2024年8月</span>
|
||||
<h3 class="text-xl font-semibold mt-2">伊朗海军演习</h3>
|
||||
<p class="text-slate-400 mt-1">在阿曼海举行"力量1404"导弹演习,展示反舰能力</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-8 ml-12">
|
||||
<div class="timeline-dot" style="top: 8px;"></div>
|
||||
<div class="card glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span class="badge badge-primary">2024年9月</span>
|
||||
<h3 class="text-xl font-semibold mt-2">以色列军事行动</h3>
|
||||
<p class="text-slate-400 mt-1">摧毁叙利亚舰队,地区紧张局势升级</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-8 ml-12">
|
||||
<div class="timeline-dot" style="top: 8px;"></div>
|
||||
<div class="card glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span class="badge badge-secondary">2024年12月</span>
|
||||
<h3 class="text-xl font-semibold mt-2">076型四川舰出坞</h3>
|
||||
<p class="text-slate-400 mt-1">首创双舰岛+电磁弹射技术,排水量4万余吨</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-8 ml-12">
|
||||
<div class="timeline-dot" style="top: 8px;"></div>
|
||||
<div class="card glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span class="badge badge-accent">2024年12月</span>
|
||||
<h3 class="text-xl font-semibold mt-2">国防部长任命</h3>
|
||||
<p class="text-slate-400 mt-1">董军(原海军首长)任国防部长,海军重点建设预期强化</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-8 ml-12">
|
||||
<div class="timeline-dot" style="top: 8px;"></div>
|
||||
<div class="card glass-effect rounded-lg p-4 card-hover">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span class="badge badge-info">2025年3月</span>
|
||||
<h3 class="text-xl font-semibold mt-2">俄罗斯海军战略</h3>
|
||||
<p class="text-slate-400 mt-1">普京批准《2050年前俄罗斯海军发展战略》</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Investment Logic -->
|
||||
<section class="py-16 px-4" id="logic">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">投资逻辑分析</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="card navy-blue rounded-xl p-6">
|
||||
<div class="card-title">
|
||||
<i class="fas fa-globe-americas text-3xl mr-3"></i>
|
||||
<span>地缘政治倒逼</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>美军"印太战略"持续施压,弗吉尼亚级潜艇年产目标从1.3艘提升至2.5艘,直接刺激中国水下攻防体系建设</p>
|
||||
<div class="mt-4">
|
||||
<span class="badge badge-error">高优先级</span>
|
||||
<span class="badge badge-warning">紧迫性强</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card navy-blue rounded-xl p-6">
|
||||
<div class="card-title">
|
||||
<i class="fas fa-exchange-alt text-3xl mr-3"></i>
|
||||
<span>战略范式转型</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>从"黄水海军"到"蓝水海军"质变,水面防御向水下进攻转变,10年潜艇改造市场近千亿</p>
|
||||
<div class="mt-4">
|
||||
<span class="badge badge-success">结构性机会</span>
|
||||
<span class="badge badge-info">长期趋势</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card navy-blue rounded-xl p-6">
|
||||
<div class="card-title">
|
||||
<i class="fas fa-microchip text-3xl mr-3"></i>
|
||||
<span>技术代际突破</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>076型电磁弹射平台型创新,光纤水听器替代压电水听器,技术壁垒高,市场空间巨大</p>
|
||||
<div class="mt-4">
|
||||
<span class="badge badge-primary">核心技术</span>
|
||||
<span class="badge badge-accent">高壁垒</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<h3 class="text-2xl font-bold mb-6">预期差分析</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<div>
|
||||
<h4 class="font-bold">业绩兑现节奏</h4>
|
||||
<p>潜艇改造周期18-24个月,远快于新造5-7年</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<div>
|
||||
<h4 class="font-bold">民用市场空间</h4>
|
||||
<p>电磁弹射技术可延伸至海上风电等民用领域</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<div>
|
||||
<h4 class="font-bold">竞争壁垒</h4>
|
||||
<p>设计锁定+耗材更换的双重护城河</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Industry Chain -->
|
||||
<section class="py-16 px-4" id="industry">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">产业链图谱</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="card glass-effect rounded-xl p-6">
|
||||
<h3 class="text-2xl font-bold mb-4 text-blue-400">
|
||||
<i class="fas fa-anchor mr-2"></i>水面舰艇产业链
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
|
||||
<span class="font-medium">上游材料</span>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge badge-outline">西部材料</span>
|
||||
<span class="badge badge-outline">亚星锚链</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
|
||||
<span class="font-medium">中游设备</span>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge badge-primary">湘电股份</span>
|
||||
<span class="badge badge-primary">王子新材</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
|
||||
<span class="font-medium">下游总装</span>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge badge-secondary">中国船舶</span>
|
||||
<span class="badge badge-secondary">中船防务</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card glass-effect rounded-xl p-6">
|
||||
<h3 class="text-2xl font-bold mb-4 text-purple-400">
|
||||
<i class="fas fa-water mr-2"></i>水下攻防产业链
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
|
||||
<span class="font-medium">上游材料</span>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge badge-outline">西部材料</span>
|
||||
<span class="badge badge-outline">宝钛股份</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
|
||||
<span class="font-medium">中游核心系统</span>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge badge-accent">中国海防</span>
|
||||
<span class="badge badge-accent">中科海讯</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
|
||||
<span class="font-medium">下游平台</span>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge badge-info">中国重工</span>
|
||||
<span class="badge badge-info">天海防务</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h3 class="text-2xl font-bold mb-6">核心玩家对比</h3>
|
||||
<div class="table-scroll">
|
||||
<table class="table w-full stock-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>公司</th>
|
||||
<th>核心逻辑</th>
|
||||
<th>竞争优势</th>
|
||||
<th>业绩弹性</th>
|
||||
<th>关键风险</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-bold text-primary">中国海防</td>
|
||||
<td>水下攻防装备龙头</td>
|
||||
<td>70-80%市占率</td>
|
||||
<td>⭐⭐⭐⭐⭐</td>
|
||||
<td>订单验证周期长</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-bold text-primary">湘电股份</td>
|
||||
<td>电磁弹射平台技术</td>
|
||||
<td>综合电力系统垄断</td>
|
||||
<td>⭐⭐⭐⭐</td>
|
||||
<td>技术可靠性待检验</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-bold text-primary">西部材料</td>
|
||||
<td>水下装备材料</td>
|
||||
<td>钛合金核心供应商</td>
|
||||
<td>⭐⭐⭐</td>
|
||||
<td>军品占比低</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-bold text-primary">中国船舶</td>
|
||||
<td>海军装备总装</td>
|
||||
<td>航母唯一建造商</td>
|
||||
<td>⭐⭐</td>
|
||||
<td>弹性相对较小</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stock Pool -->
|
||||
<section class="py-16 px-4" id="stocks">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">海军概念股票池</h2>
|
||||
<div class="table-scroll">
|
||||
<table class="table w-full stock-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sticky left-0 bg-slate-900">股票名称</th>
|
||||
<th>所属行业</th>
|
||||
<th>核心项目</th>
|
||||
<th>产业链环节</th>
|
||||
<th>投资逻辑</th>
|
||||
<th>数据来源</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">中国船舶</td>
|
||||
<td>船舶制造</td>
|
||||
<td>航母、核潜艇、大型驱逐舰</td>
|
||||
<td>海军装备研发生产</td>
|
||||
<td>民用商用船舶制造营收第一,承担海军主战装备科研生产任务</td>
|
||||
<td><span class="badge badge-outline">公开资料</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">中船防务</td>
|
||||
<td>船舶制造</td>
|
||||
<td>055型驱逐舰</td>
|
||||
<td>护卫舰市场</td>
|
||||
<td>在护卫舰市场占据领先地位,参与多个重点型号建造</td>
|
||||
<td><span class="badge badge-outline">公开资料</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">中国海防</td>
|
||||
<td>海洋防务</td>
|
||||
<td>声纳装备</td>
|
||||
<td>水声电子系统</td>
|
||||
<td>国内海洋防务声纳装备核心供应商,市占率70-80%</td>
|
||||
<td><span class="badge badge-outline">互动</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">湘电股份</td>
|
||||
<td>船舶动力</td>
|
||||
<td>电磁弹射系统</td>
|
||||
<td>舰船电力推进</td>
|
||||
<td>国内唯一舰船综合电力系统供应商,电磁弹射核心分包商</td>
|
||||
<td><span class="badge badge-outline">路演数据</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">西部材料</td>
|
||||
<td>金属材料</td>
|
||||
<td>钛合金结构件</td>
|
||||
<td>特种材料</td>
|
||||
<td>钛合金用于核潜艇壳体、声纳结构件,单艘价值量5-6亿</td>
|
||||
<td><span class="badge badge-outline">路演数据</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">中国动力</td>
|
||||
<td>船舶动力</td>
|
||||
<td>海军舰船动力</td>
|
||||
<td>动力系统</td>
|
||||
<td>海军作战舰艇动力系统排名第一,主要供应商</td>
|
||||
<td><span class="badge badge-outline">互动</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">中国重工</td>
|
||||
<td>船舶制造</td>
|
||||
<td>核潜艇</td>
|
||||
<td>水下装备总装</td>
|
||||
<td>承担核潜艇建造任务,水下装备核心总装单位</td>
|
||||
<td><span class="badge badge-outline">公开资料</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">中科海讯</td>
|
||||
<td>声纳装备</td>
|
||||
<td>水声目标探测</td>
|
||||
<td>水声电子</td>
|
||||
<td>产品应用于声纳装备领域,最终用户为国家特种部门</td>
|
||||
<td><span class="badge badge-outline">互动</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">天海防务</td>
|
||||
<td>特种无人船</td>
|
||||
<td>无人潜航器</td>
|
||||
<td>无人装备平台</td>
|
||||
<td>子公司金海运研发多类型特种无人船,无人装备标的</td>
|
||||
<td><span class="badge badge-outline">互动</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">久之洋</td>
|
||||
<td>光电设备</td>
|
||||
<td>红外、激光、光学产品</td>
|
||||
<td>舰载光电系统</td>
|
||||
<td>中船集团旗下光电上市公司,产品涵盖四大类光电设备</td>
|
||||
<td><span class="badge badge-outline">互动</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">亚光科技</td>
|
||||
<td>军用小艇</td>
|
||||
<td>冲锋舟、指挥艇</td>
|
||||
<td>特种舰艇</td>
|
||||
<td>军用冲锋舟、指挥艇等特种小艇市占率领先</td>
|
||||
<td><span class="badge badge-outline">公开资料</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">亚星锚链</td>
|
||||
<td>链条生产</td>
|
||||
<td>船用锚链</td>
|
||||
<td>船舶配套</td>
|
||||
<td>全球最大链条生产企业,船用锚链市占率超70%</td>
|
||||
<td><span class="badge badge-outline">公开资料</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">中船科技</td>
|
||||
<td>船舶设计</td>
|
||||
<td>船舶工业规划设计</td>
|
||||
<td>设计研发</td>
|
||||
<td>全资子公司中船九院为中国船舶工业规划设计国家队</td>
|
||||
<td><span class="badge badge-outline">公开资料</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">海兰信</td>
|
||||
<td>船舶电子</td>
|
||||
<td>首艘航母辽宁舰</td>
|
||||
<td>舰船电子系统</td>
|
||||
<td>产品已应用于包括辽宁舰在内的各类舰船</td>
|
||||
<td><span class="badge badge-outline">公告</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">国瑞科技</td>
|
||||
<td>船舶电子</td>
|
||||
<td>雷达、电子战系统</td>
|
||||
<td>军工电子信息系统</td>
|
||||
<td>参股公司中电华瑞产品涵盖雷达、电子战系统</td>
|
||||
<td><span class="badge badge-outline">网传纪要</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">泰豪科技</td>
|
||||
<td>舰载作战辅助系统</td>
|
||||
<td>航母及海军舰艇</td>
|
||||
<td>作战支持系统</td>
|
||||
<td>相关产品已应用于航母及海军舰艇</td>
|
||||
<td><span class="badge badge-outline">互动</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">潍柴重机</td>
|
||||
<td>船舶动力</td>
|
||||
<td>船舶动力系统</td>
|
||||
<td>动力设备</td>
|
||||
<td>开发销售船舶动力和发电设备,市场覆盖广泛</td>
|
||||
<td><span class="badge badge-outline">互动</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">江龙船艇</td>
|
||||
<td>公务执法船艇</td>
|
||||
<td>海事海警装备</td>
|
||||
<td>特种船艇</td>
|
||||
<td>产品广泛应用于海事、海关、海警等维护海洋主权领域</td>
|
||||
<td><span class="badge badge-outline">互动</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">王子新材</td>
|
||||
<td>船舶电子</td>
|
||||
<td>舰船电子信息系统</td>
|
||||
<td>电子配套</td>
|
||||
<td>全资子公司中电华瑞从事舰船电子信息系统领域</td>
|
||||
<td><span class="badge badge-outline">互动</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky left-0 font-bold bg-slate-800">*ST宝实</td>
|
||||
<td>船舶电器</td>
|
||||
<td>船舶消磁器</td>
|
||||
<td>船舶配套</td>
|
||||
<td>船舶消磁器业务市场占有率居首位</td>
|
||||
<td><span class="badge badge-outline">年报</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Investment Strategy -->
|
||||
<section class="py-16 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">投资策略建议</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="card bg-gradient-to-r from-green-900/50 to-green-800/30 rounded-xl p-6">
|
||||
<h3 class="text-2xl font-bold mb-4 text-green-400">
|
||||
<i class="fas fa-thumbs-up mr-2"></i>重点配置
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="p-3 bg-slate-800/50 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-bold">中国海防</span>
|
||||
<span class="badge badge-success">首选标的</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400 mt-1">70%市占率+资产注入预期+业绩拐点三重逻辑</p>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-800/50 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-bold">湘电股份</span>
|
||||
<span class="badge badge-success">弹性标的</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400 mt-1">电磁弹射0到1突破,2025年收入确认高峰</p>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-800/50 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-bold">西部材料</span>
|
||||
<span class="badge badge-success">稳健标的</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400 mt-1">钛合金刚需,不受军品定价机制约束</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-gradient-to-r from-red-900/50 to-red-800/30 rounded-xl p-6">
|
||||
<h3 class="text-2xl font-bold mb-4 text-red-400">
|
||||
<i class="fas fa-exclamation-triangle mr-2"></i>规避标的
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="p-3 bg-slate-800/50 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-bold">王子新材</span>
|
||||
<span class="badge badge-error">伪概念</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400 mt-1">军品占比不足5%,与电磁弹射无技术关联</p>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-800/50 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-bold">久之洋</span>
|
||||
<span class="badge badge-error">业绩下滑</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400 mt-1">民用海监设备为主,2024H1收入同比-22%</p>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-800/50 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-bold">海兰信</span>
|
||||
<span class="badge badge-error">ST风险</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400 mt-1">军品资质不全,2024年亏损1.2亿</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-info-circle text-2xl"></i>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg">关键验证指标</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<span class="font-semibold">订单指标:</span>
|
||||
<p>全军装备采购信息网海军装备招标金额</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">财务指标:</span>
|
||||
<p>中国海防合同负债环比增速(需持续增长30%+)</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">技术节点:</span>
|
||||
<p>076型舰海试进度与电磁弹射测试结果</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">政策信号:</span>
|
||||
<p>2025年国防预算海军科目增速(需超20%)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer footer-center p-10 bg-slate-900 text-base-content">
|
||||
<div>
|
||||
<p class="font-bold text-2xl">
|
||||
<i class="fas fa-ship mr-2"></i>海军装备产业链深度分析
|
||||
</p>
|
||||
<p class="text-slate-400">专业投资研究 · 数据驱动决策</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a class="btn btn-ghost btn-circle">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a class="btn btn-ghost btn-circle">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a class="btn btn-ghost btn-circle">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>Copyright © 2025 - 保留所有权利</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Smooth scroll 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', () => {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (window.scrollY > 100) {
|
||||
navbar.classList.add('shadow-xl');
|
||||
} else {
|
||||
navbar.classList.remove('shadow-xl');
|
||||
}
|
||||
});
|
||||
|
||||
// Animate elements 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);
|
||||
|
||||
// Observe all cards
|
||||
document.querySelectorAll('.card').forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||||
observer.observe(card);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
648
public/htmls/谷歌概念.html
Normal file
648
public/htmls/谷歌概念.html
Normal file
@@ -0,0 +1,648 @@
|
||||
# 谷歌概念深度解析:技术霸权与算力革命
|
||||
|
||||
|
||||
<!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;
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.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-dot {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-dot::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeline-dot:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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-smooth {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-scroll::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.table-scroll::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.table-scroll::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 scroll-smooth">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white overflow-hidden">
|
||||
<div class="absolute inset-0 bg-black opacity-40"></div>
|
||||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full mb-6 pulse-animation">
|
||||
<i class="fab fa-google text-3xl"></i>
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-6">
|
||||
<span class="gradient-text bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 text-transparent bg-clip-text">
|
||||
谷歌概念
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl mb-8 text-gray-200">
|
||||
AI技术霸权 × 算力基建革命 × Token经济范式
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<span class="px-4 py-2 bg-green-500 bg-opacity-20 border border-green-400 rounded-full text-sm">
|
||||
<i class="fas fa-rocket mr-2"></i>Gemini 3 Pro 登顶
|
||||
</span>
|
||||
<span class="px-4 py-2 bg-blue-500 bg-opacity-20 border border-blue-400 rounded-full text-sm">
|
||||
<i class="fas fa-microchip mr-2"></i>930亿美金 CAPEX
|
||||
</span>
|
||||
<span class="px-4 py-2 bg-purple-500 bg-opacity-20 border border-purple-400 rounded-full text-sm">
|
||||
<i class="fas fa-bolt mr-2"></i>480万亿 Token/月
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0">
|
||||
<svg class="w-full h-20" 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>
|
||||
</section>
|
||||
|
||||
<!-- 核心数据指标 -->
|
||||
<section class="py-12 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800">核心数据指标</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="text-center p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl hover-lift">
|
||||
<div class="text-4xl font-bold text-purple-600 mb-2">1501</div>
|
||||
<div class="text-gray-600">LMArena 评分</div>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl hover-lift">
|
||||
<div class="text-4xl font-bold text-blue-600 mb-2">930亿</div>
|
||||
<div class="text-gray-600">2025 CAPEX</div>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl hover-lift">
|
||||
<div class="text-4xl font-bold text-green-600 mb-2">480万亿</div>
|
||||
<div class="text-gray-600">月Token消耗</div>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl hover-l">
|
||||
<div class="text-4xl font-bold text-yellow-600 mb-2">15亿</div>
|
||||
<div class="text-gray-600">AI搜索月活</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 事件时间轴 -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">概念事件时间轴</h2>
|
||||
<div class="relative">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="timeline-dot">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold">2024年2月</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">产品发布</h3>
|
||||
<p class="text-gray-600">推出ImageFX图像工具、Bard文生图功能,基于Imagen 2模型</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-dot">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold">2024年4月</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">战略发布</h3>
|
||||
<p class="text-gray-600">Cloud Next大会发布Axion Arm CPU、TPU v5p</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-dot">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-semibold">2024年8月</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">产品发布</h3>
|
||||
<p class="text-gray-600">Pixel 9系列,Gemini Live语音助手,端侧AI商业化</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-dot">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm font-semibold">2024年11月</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 badge-glow">技术突破</h3>
|
||||
<p class="text-gray-600">Gemini 3 Pro登顶LMArena 1501分,Nano Banana 2发布</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-dot">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-sm font-semibold">2025年1月</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">业绩验证</h3>
|
||||
<p class="text-gray-600">Q1营收902亿美元,资本开支172亿美元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-dot">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm font-semibold">2025年10月</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">资本扩张</h3>
|
||||
<p class="text-gray-600">CAPEX指引上调至910-930亿美元</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心逻辑 -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">核心逻辑</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-gradient-to-br from-purple-600 to-purple-800 text-white p-8 rounded-2xl">
|
||||
<div class="text-4xl mb-4">👑</div>
|
||||
<h3 class="text-2xl font-bold mb-4">技术霸权确立</h3>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
|
||||
<span>Gemini 3 Pro LMArena 1501分历史最高</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
|
||||
<span>Nano Banana 2图像生成顶尖</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
|
||||
<span>TPU v7算力4610 TOPS持平H100</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-blue-600 to-blue-800 text-white p-8 rounded-2xl">
|
||||
<div class="text-4xl mb-4">💰</div>
|
||||
<h3 class="text-2xl font-bold mb-4">资本开支暴力扩张</h3>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
|
||||
<span>2025 CAPEX 910-930亿美元</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
|
||||
<span>TPU电源单卡价值量1000+元</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
|
||||
<span>2026年500万颗对应50亿市场</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-green-600 to-green-800 text-white p-8 rounded-2xl">
|
||||
<div class="text-4xl mb-4">🚀</div>
|
||||
<h3 class="text-2xl font-bold mb-4">商业化闭环验证</h3>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
|
||||
<span>月Token消耗480万亿</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
|
||||
<span>Q3搜索增速创15%新高</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
|
||||
<span>云业务积压订单1550亿美元</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产业链图谱 -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">产业链图谱</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg">
|
||||
<h3 class="text-xl font-bold mb-6 text-purple-600">上游(芯片/元器件)</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
|
||||
<i class="fas fa-microchip text-purple-600 text-xl mr-3"></i>
|
||||
<span>TPU芯片(谷歌自研)</span>
|
||||
</div>
|
||||
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
|
||||
<i class="fas fa-bolt text-purple-600 text-xl mr-3"></i>
|
||||
<span>电源模块(新雷能、中富电路)</span>
|
||||
</div>
|
||||
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
|
||||
<i class="fas fa-network-wired text-purple-600 text-xl mr-3"></i>
|
||||
<span>光器件(赛微电子、腾景科技)</span>
|
||||
</div>
|
||||
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
|
||||
<i class="fas fa-wind text-purple-600 text-xl mr-3"></i>
|
||||
<span>液冷散热(英维克、博杰股份)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg">
|
||||
<h3 class="text-xl font-bold mb-6 text-blue-600">下游(应用/服务)</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
|
||||
<i class="fas fa-search text-blue-600 text-xl mr-3"></i>
|
||||
<span>AI搜索(15亿月活)</span>
|
||||
</div>
|
||||
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
|
||||
<i class="fas fa-cloud text-blue-600 text-xl mr-3"></i>
|
||||
<span>云计算(GCP+Gemini API)</span>
|
||||
</div>
|
||||
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
|
||||
<i class="fas fa-ad text-blue-600 text-xl mr-3"></i>
|
||||
<span>AI营销(易点天下、蓝色光标)</span>
|
||||
</div>
|
||||
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
|
||||
<i class="fas fa-paint-brush text-blue-600 text-xl mr-3"></i>
|
||||
<span>内容创作(万兴科技、视觉中国)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 股票池表格 -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">谷歌概念核心股票池</h2>
|
||||
<div class="table-scroll">
|
||||
<table class="w-full bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">300058.SZ</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">蓝色光标</span>
|
||||
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">核心</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">AI营销</td>
|
||||
<td class="px-6 py-4">谷歌合作伙伴</td>
|
||||
<td class="px-6 py-4">通过运用谷歌营销产品实现出海价值</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">301171.SZ</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">易点天下</span>
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">高弹性</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">AI营销</td>
|
||||
<td class="px-6 py-4">Google一级代理</td>
|
||||
<td class="px-6 py-4">Google广告在国内的一级代理,提供H5广告变现方案</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">300624.SZ</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">万兴科技</span>
|
||||
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">应用</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">AI应用</td>
|
||||
<td class="px-6 py-4">接入谷歌Gemini</td>
|
||||
<td class="px-6 py-4">已接入谷歌Gemini、Veo3、Nano banana等模型</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">300456.SZ</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">赛微电子</span>
|
||||
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">核心</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">OCS</td>
|
||||
<td class="px-6 py-4">MEMS-OCS量产</td>
|
||||
<td class="px-6 py-4">2023年并表后获谷歌批量采购订单</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">300308.SZ</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">中际旭创</span>
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">龙头</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">光模块</td>
|
||||
<td class="px-6 py-4">800G光模块</td>
|
||||
<td class="px-6 py-4">2025年谷歌光模块采购量350万只,占70%份额</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">002463.SZ</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">沪电股份</span>
|
||||
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">PCB</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">PCB</td>
|
||||
<td class="px-6 py-4">TPU PCB核心供应商</td>
|
||||
<td class="px-6 py-4">谷歌TPU PCB核心供应商,占TPU供应链约30%份额</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">301183.SZ</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">东田微</span>
|
||||
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">核心</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">OCS</td>
|
||||
<td class="px-6 py-4">OCS光学方案</td>
|
||||
<td class="px-6 py-4">为谷歌OCS光学引擎提供核心光学元件解决方案</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">300676.SZ</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">华大九天</span>
|
||||
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">EDA</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">芯片设计</td>
|
||||
<td class="px-6 py-4">EDA工具支持</td>
|
||||
<td class="px-6 py-4">为谷歌TPU芯片设计提供EDA工具链支持</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">603803.SH</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">瑞松科技</span>
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">精密制造</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">精密制造</td>
|
||||
<td class="px-6 py-4">AI服务器制造</td>
|
||||
<td class="px-6 py-4">参与谷歌AI服务器精密结构件制造</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-semibold">301387.SZ</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">新雷能</span>
|
||||
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">电源</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">电源</td>
|
||||
<td class="px-6 py-4">TPU电源模块</td>
|
||||
<td class="px-6 py-4">为谷歌TPU提供二次和三次电源模块,单瓦价格比台系低20%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 投资建议 -->
|
||||
<section class="py-16 bg-gradient-to-br from-purple-50 to-blue-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">投资建议与策略</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg">
|
||||
<h3 class="text-2xl font-bold mb-6 text-green-600">最具投资价值方向</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center font-bold mr-3">1</span>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">TPU电源产业链(最高优先级)</h4>
|
||||
<p class="text-gray-600 text-sm">电源是TPU扩产最大瓶颈,26年50亿市场,新雷能15亿收入弹性</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center font-bold mr-3">2</span>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">OCS光交换产业链(次高优先级)</h4>
|
||||
<p class="text-gray-600 text-sm">LightCounting预测2029年5万台,15% CAGR,国产供应商已获订单</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center font-bold mr-3">3</span>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">AI搜索营销产业链(中优先级)</h4>
|
||||
<p class="text-gray-600 text-sm">一级代理商受益于谷歌减少中间环节,毛利率提升2-3pct</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg">
|
||||
<h3 class="text-2xl font-bold mb-6 text-red-600">需规避的方向</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center font-bold mr-3">×</span>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">纯模型接入方</h4>
|
||||
<p class="text-gray-600 text-sm">Nano Banana中文生成不稳定,API成本高,毛利率承压</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center font-bold mr-3">×</span>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">广告联盟依赖方</h4>
|
||||
<p class="text-gray-600 text-sm">谷歌联盟广告持续萎缩,收入端受损</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center font-bold mr-3">×</span>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">硬件代工</h4>
|
||||
<p class="text-gray-600 text-sm">Pixel手机份额仅4.6%,硬件逻辑不纯</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 风险提示 -->
|
||||
<section class="py-16 bg-gray-900 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center mb-12">风险提示</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="glass-effect p-6 rounded-xl">
|
||||
<i class="fas fa-exclamation-triangle text-yellow-400 text-3xl mb-4"></i>
|
||||
<h3 class="text-xl font-bold mb-3">技术风险</h3>
|
||||
<ul class="space-y-2 text-gray-300">
|
||||
<li>• 与GPT-4o应用差距</li>
|
||||
<li>• 多模态生成稳定性</li>
|
||||
<li>• 算力瓶颈制约</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="glass-effect p-6 rounded-xl">
|
||||
<i class="fas fa-chart-line text-red-400 text-3xl mb-4"></i>
|
||||
<h3 class="text-xl font-bold mb-3">商业化风险</h3>
|
||||
<ul class="space-y-2 text-gray-300">
|
||||
<li>• 广告联盟萎缩</li>
|
||||
<li>• 订阅变现不及预期</li>
|
||||
<li>• Agent协议推广困难</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="glass-effect p-6 rounded-xl">
|
||||
<i class="fas fa-gavel text-blue-400 text-3xl mb-4"></i>
|
||||
<h3 class="text-xl font-bold mb-3">政策风险</h3>
|
||||
<ul class="space-y-2 text-gray-300">
|
||||
<li>• 反垄断最终判决</li>
|
||||
<li>• OpenAI竞争冲击</li>
|
||||
<li>• 中国应用适配不足</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-800 text-white py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<p class="text-gray-400">© 2024 谷歌概念深度解析 | 数据来源:公开研究报告、路演记录、新闻资讯</p>
|
||||
<p class="text-gray-500 text-sm mt-2">投资有风险,入市需谨慎 | 本报告仅供参考,不构成投资建议</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 添加滚动动画
|
||||
window.addEventListener('scroll', function() {
|
||||
const elements = document.querySelectorAll('.hover-lift');
|
||||
elements.forEach(element => {
|
||||
const elementTop = element.getBoundingClientRect().top;
|
||||
const elementBottom = element.getBoundingClientRect().bottom;
|
||||
if (elementTop < window.innerHeight && elementBottom > 0) {
|
||||
element.style.opacity = '1';
|
||||
element.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 初始化动画
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const elements = document.querySelectorAll('.hover-lift');
|
||||
elements.forEach(element => {
|
||||
element.style.opacity = '0';
|
||||
element.style.transform = 'translateY(20px)';
|
||||
element.style.transition = 'all 0.6s ease';
|
||||
});
|
||||
});
|
||||
|
||||
// 表格行点击高亮
|
||||
document.querySelectorAll('tbody tr').forEach(row => {
|
||||
row.addEventListener('click', function() {
|
||||
// 移除其他行的高亮
|
||||
document.querySelectorAll('tbody tr').forEach(r => r.classList.remove('bg-blue-50'));
|
||||
// 添加当前行高亮
|
||||
this.classList.add('bg-blue-50');
|
||||
});
|
||||
});
|
||||
|
||||
// 平滑滚动到锚点
|
||||
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>
|
||||
824
public/htmls/远程火力.html
Normal file
824
public/htmls/远程火力.html
Normal 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>
|
||||
<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-morphism {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #667eea;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.timeline-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 20px;
|
||||
width: 2px;
|
||||
height: calc(100% + 10px);
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.timeline-item:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.stock-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stock-table th {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.stock-table tr:nth-child(even) {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.stock-table tr:hover {
|
||||
background-color: #f3f4f6;
|
||||
transform: scale(1.01);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.badge-gradient {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
|
||||
.chain-arrow {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.floating {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.risk-high { border-left: 4px solid #ef4444; }
|
||||
.risk-medium { border-left: 4px solid #f59e0b; }
|
||||
.risk-low { border-left: 4px solid #10b981; }
|
||||
</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">
|
||||
<div class="text-center fade-in-up">
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-4 floating">
|
||||
<i class="fas fa-rocket mr-4"></i>远程火力
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl opacity-90 mb-8">现代陆军第四代核心骨干装备 · 高效费比战争撒手锏</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<span class="glass-morphism px-4 py-2 rounded-full">
|
||||
<i class="fas fa-crosshairs mr-2"></i>射程 70-500km
|
||||
</span>
|
||||
<span class="glass-morphism px-4 py-2 rounded-full">
|
||||
<i class="fas fa-bullseye mr-2"></i>CEP精度 30m
|
||||
</span>
|
||||
<span class="glass-morphism px-4 py-2 rounded-full">
|
||||
<i class="fas fa-dollar-sign mr-2"></i>成本仅为导弹1/10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="max-w-7xl mx-auto px-4 py-12">
|
||||
|
||||
<!-- 概念定义与背景 -->
|
||||
<section class="mb-12 fade-in-up">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
|
||||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||||
<i class="fas fa-info-circle text-purple-600 mr-3"></i>概念定义与背景
|
||||
</h2>
|
||||
<div class="prose max-w-none text-gray-600">
|
||||
<p class="text-lg leading-relaxed mb-4">
|
||||
<strong>远程火力</strong>(简称"远火")在军事领域特指远程火箭炮武器系统,是现代陆军第四代核心骨干装备。该系统通过远程火箭弹实现<strong>70-500公里射程</strong>的精确打击能力,有效填补传统身管火炮(20-50公里)与战术弹道导弹(千公里级)之间的火力空白。
|
||||
</p>
|
||||
<div class="grid md:grid-cols-3 gap-6 mt-6">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-purple-50 p-6 rounded-xl">
|
||||
<h3 class="font-bold text-lg mb-3 text-blue-800"><i class="fas fa-bolt mr-2"></i>核心特征</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 低成本高效费比</li>
|
||||
<li>• 模块化设计</li>
|
||||
<li>• 精准制导能力</li>
|
||||
<li>• 快速部署机动</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl">
|
||||
<h3 class="font-bold text-lg mb-3 text-green-800"><i class="fas fa-shield-alt mr-2"></i>战略地位</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 填补火力空白</li>
|
||||
<li>• 战争消耗主力</li>
|
||||
<li>• 精打要害利器</li>
|
||||
<li>• 破击体系关键</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-orange-50 to-red-50 p-6 rounded-xl">
|
||||
<h3 class="font-bold text-lg mb-3 text-orange-800"><i class="fas fa-globe mr-2"></i>国际形势</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 美军扩编500套</li>
|
||||
<li>• 欧盟2030战备计划</li>
|
||||
<li>• 俄乌冲突验证价值</li>
|
||||
<li>• 全球军贸需求爆发</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心观点 -->
|
||||
<section class="mb-12 fade-in-up">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
|
||||
<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-6">
|
||||
<div class="border-l-4 border-purple-500 pl-6">
|
||||
<h3 class="font-bold text-lg mb-3">三大驱动力共振</h3>
|
||||
<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-2"></i>
|
||||
<span><strong>军事战略重构</strong>:美军将其与高超音速导弹并列为优先事项,预算300亿美元</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
|
||||
<span><strong>技术成熟度突破</strong>:模块化装填效率提升6倍,精度达30米级</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
|
||||
<span><strong>实战验证需求</strong>:单套海马斯消耗500-625枚,弹药储备严重不足</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h3 class="font-bold text-lg mb-3">三大预期差</h3>
|
||||
<ul class="space-y-3 text-gray-600">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
|
||||
<span><strong>市场空间VS订单节奏</strong>:研报"万台"预期 vs 实际年产20套</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
|
||||
<span><strong>垄断VS竞争</strong>:北方导航"独供"仅限大口径型号</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
|
||||
<span><strong>成本优势VS价格风险</strong>:军采阶梯降价或冲击毛利率</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 催化事件时间轴 -->
|
||||
<section class="mb-12 fade-in-up">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
|
||||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||||
<i class="fas fa-timeline text-indigo-600 mr-3"></i>催化事件时间轴
|
||||
</h2>
|
||||
<div class="space-y-6">
|
||||
<div class="timeline-item">
|
||||
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-lg">
|
||||
<span class="text-sm font-semibold text-purple-600">2024年7月-10月</span>
|
||||
<h3 class="font-bold mt-1">研究机构密集发布深度研报</h3>
|
||||
<p class="text-gray-600 text-sm mt-2">长江军工、东兴证券等7-10份报告系统构建分析框架,将远火定位为新时期陆军"战争之神"</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-lg">
|
||||
<span class="text-sm font-semibold text-blue-600">2024年9月</span>
|
||||
<h3 class="font-bold mt-1">美军扩编计划曝光</h3>
|
||||
<p class="text-gray-600 text-sm mt-2">将远程火力战略地位提升至与高超音速导弹同级,采购量从105套增至500套</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg">
|
||||
<span class="text-sm font-semibold text-green-600">2025年2月</span>
|
||||
<h3 class="font-bold mt-1">技术路线明确</h3>
|
||||
<p class="text-gray-600 text-sm mt-2">确立固体火箭发动机、多脉冲发动机、碳纤维壳体为技术核心</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="bg-gradient-to-r from-orange-50 to-red-50 p-4 rounded-lg">
|
||||
<span class="text-sm font-semibold text-orange-600">2025年5月</span>
|
||||
<h3 class="font-bold mt-1">军贸订单实证</h3>
|
||||
<p class="text-gray-600 text-sm mt-2">巴基斯坦采购中国远程火箭弹及自行加榴炮,获得实战验证</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产业链图谱 -->
|
||||
<section class="mb-12 fade-in-up">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
|
||||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||||
<i class="fas fa-sitemap text-teal-600 mr-3"></i>产业链图谱
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<div class="min-w-max">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="text-center bg-gray-100 p-3 rounded-lg">
|
||||
<h3 class="font-bold">上游材料及元器件</h3>
|
||||
<p class="text-sm text-gray-600">价值占比15-20%</p>
|
||||
</div>
|
||||
<i class="fas fa-arrow-right text-2xl text-gray-400"></i>
|
||||
<div class="text-center bg-purple-100 p-3 rounded-lg">
|
||||
<h3 class="font-bold">中游核心系统</h3>
|
||||
<p class="text-sm text-gray-600">价值占比60-70%</p>
|
||||
<span class="badge-gradient text-white text-xs px-2 py-1 rounded-full">战略制高点</span>
|
||||
</div>
|
||||
<i class="fas fa-arrow-right text-2xl text-gray-400"></i>
|
||||
<div class="text-center bg-gray-100 p-3 rounded-lg">
|
||||
<h3 class="font-bold">下游总装及平台</h3>
|
||||
<p class="text-sm text-gray-600">价值占比15-20%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>碳纤维:光威复材</div>
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>MLCC电容:鸿远电子</div>
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>连接器:航天电器</div>
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>火工品:北化股份</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>制导系统:北方导航</div>
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>动力模块:国科军工</div>
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>光纤环:长盈通</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>火箭炮总装:中兵红箭</div>
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>系统总体:航天彩虹</div>
|
||||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>外贸出口:北方工业</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心公司对比 -->
|
||||
<section class="mb-12 fade-in-up">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
|
||||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||||
<i class="fas fa-crown text-yellow-500 mr-3"></i>核心公司对比分析
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<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-center">投资评级</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">制导舱(中段+末段)</td>
|
||||
<td class="px-4 py-3">独供制导舱,280/500km射程核心供应商</td>
|
||||
<td class="px-4 py-3">订单节奏不确定,价格承压</td>
|
||||
<td class="px-4 py-3 text-center"><span class="bg-green-100 text-green-800 px-3 py-1 rounded-full">超配</span></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">动力模块(固体发动机)</td>
|
||||
<td class="px-4 py-3">稀缺军工牌照,弹载动力模块CAGR 35.56%</td>
|
||||
<td class="px-4 py-3">产能扩张慢,军品交付不及预期</td>
|
||||
<td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">标配</span></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">光纤环(陀螺仪核心)</td>
|
||||
<td class="px-4 py-3">军用光纤环龙头,军民两用占比90%</td>
|
||||
<td class="px-4 py-3">MEMS技术替代风险,民品波动</td>
|
||||
<td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">标配</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-4 py-3 font-bold">中兵红箭</td>
|
||||
<td class="px-4 py-3">整弹总装</td>
|
||||
<td class="px-4 py-3">兵器集团唯一弹药平台,特种装备占比50%+</td>
|
||||
<td class="px-4 py-3">传统弹药拖累估值,转型进度慢</td>
|
||||
<td class="px-4 py-3 text-center"><span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full">观望</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 股票数据表格 -->
|
||||
<section class="mb-12 fade-in-up">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
|
||||
<h2 class="text-3xl font-bold mb-6 text-gray-800">
|
||||
<i class="fas fa-table text-indigo-600 mr-3"></i>远程火力概念股票全览
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="stock-table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 py-2 text-left">股票名称</th>
|
||||
<th class="px-2 py-2 text-left">分类</th>
|
||||
<th class="px-2 py-2 text-left">产业链</th>
|
||||
<th class="px-2 py-2 text-left">项目</th>
|
||||
<th class="px-2 py-2 text-left">关联逻辑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">航天电子</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">总装</td>
|
||||
<td class="px-2 py-2">精确制导导弹</td>
|
||||
<td class="px-2 py-2">稀缺主机厂</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">中兵红箭</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">总装</td>
|
||||
<td class="px-2 py-2">弹药总装</td>
|
||||
<td class="px-2 py-2">唯一弹药平台</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">航天彩虹</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">总装</td>
|
||||
<td class="px-2 py-2">多用途模块化导弹</td>
|
||||
<td class="px-2 py-2">填补国内空白</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">洪都航空</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">总装</td>
|
||||
<td class="px-2 py-2">导弹业务</td>
|
||||
<td class="px-2 py-2">厂所合一平台</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">高德红外</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">导引头</td>
|
||||
<td class="px-2 py-2">多款型号产品</td>
|
||||
<td class="px-2 py-2">精确制导优势</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">菲利华</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">材料</td>
|
||||
<td class="px-2 py-2">军工配套</td>
|
||||
<td class="px-2 py-2">军工蓝宝石球罩</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">铂力特</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">金属3D打印</td>
|
||||
<td class="px-2 py-2">3D打印零件</td>
|
||||
<td class="px-2 py-2">导弹型号应用</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">派克新材</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">锻造</td>
|
||||
<td class="px-2 py-2">导弹配套</td>
|
||||
<td class="px-2 py-2">型号研制配套</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">航宇科技</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">锻造</td>
|
||||
<td class="px-2 py-2">导弹配套</td>
|
||||
<td class="px-2 py-2">锻件应用</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">钢研高纳</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">材料</td>
|
||||
<td class="px-2 py-2">高温合金</td>
|
||||
<td class="px-2 py-2">导弹应用</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">光威复材</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">材料</td>
|
||||
<td class="px-2 py-2">碳纤维</td>
|
||||
<td class="px-2 py-2">发动机壳体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">抚顺特钢</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">材料</td>
|
||||
<td class="px-2 py-2">高强度钢</td>
|
||||
<td class="px-2 py-2">关键材料</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">甘化科工</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">钨合金</td>
|
||||
<td class="px-2 py-2">钨合金预制破片</td>
|
||||
<td class="px-2 py-2">导弹配套</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">国泰集团</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">钨合金</td>
|
||||
<td class="px-2 py-2">军用钨基材料</td>
|
||||
<td class="px-2 py-2">毁伤材料</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">北方长龙</td>
|
||||
<td class="px-2 py-2">导弹</td>
|
||||
<td class="px-2 py-2">其他</td>
|
||||
<td class="px-2 py-2">弹药装备</td>
|
||||
<td class="px-2 py-2">复合材料弹药箱</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">北化股份</td>
|
||||
<td class="px-2 py-2">战斗部系统</td>
|
||||
<td class="px-2 py-2">发射药</td>
|
||||
<td class="px-2 py-2">硝化棉</td>
|
||||
<td class="px-2 py-2">硝化棉龙头</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">长城军工</td>
|
||||
<td class="px-2 py-2">战斗部系统</td>
|
||||
<td class="px-2 py-2">弹药</td>
|
||||
<td class="px-2 py-2">传统弹药</td>
|
||||
<td class="px-2 py-2">老牌弹药公司</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">新余国科</td>
|
||||
<td class="px-2 py-2">战斗部系统</td>
|
||||
<td class="px-2 py-2">火工品</td>
|
||||
<td class="px-2 py-2">军用火工品</td>
|
||||
<td class="px-2 py-2">火工元件</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">国科军工</td>
|
||||
<td class="px-2 py-2">战斗部系统</td>
|
||||
<td class="px-2 py-2">火工品</td>
|
||||
<td class="px-2 py-2">导弹配套</td>
|
||||
<td class="px-2 py-2">二三级配套</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">北方导航</td>
|
||||
<td class="px-2 py-2">惯性制导(中段)</td>
|
||||
<td class="px-2 py-2">导航</td>
|
||||
<td class="px-2 py-2">惯性导航系统</td>
|
||||
<td class="px-2 py-2">成本竞争优势</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">星网宇达</td>
|
||||
<td class="px-2 py-2">惯性制导(中段)</td>
|
||||
<td class="px-2 py-2">导航</td>
|
||||
<td class="px-2 py-2">惯性导航系统</td>
|
||||
<td class="px-2 py-2">远程制导炸弹</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">理工导航</td>
|
||||
<td class="px-2 py-2">惯性制导(中段)</td>
|
||||
<td class="px-2 py-2">导航</td>
|
||||
<td class="px-2 py-2">惯性导航系统</td>
|
||||
<td class="px-2 py-2">制导炸弹配套</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">长盈通</td>
|
||||
<td class="px-2 py-2">卫星制导(中段)</td>
|
||||
<td class="px-2 py-2">光纤</td>
|
||||
<td class="px-2 py-2">军用光纤陀螺</td>
|
||||
<td class="px-2 py-2">光纤环供应商</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">芯动联科</td>
|
||||
<td class="px-2 py-2">卫星制导(中段)</td>
|
||||
<td class="px-2 py-2">MEMS惯性传感器</td>
|
||||
<td class="px-2 py-2">MEMS惯性传感器</td>
|
||||
<td class="px-2 py-2">高性能传感器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">盟升电子</td>
|
||||
<td class="px-2 py-2">卫星制导(中段)</td>
|
||||
<td class="px-2 py-2">卫星导航</td>
|
||||
<td class="px-2 py-2">卫星导航系统</td>
|
||||
<td class="px-2 py-2">导航系统</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">振芯科技</td>
|
||||
<td class="px-2 py-2">卫星制导(中段)</td>
|
||||
<td class="px-2 py-2">卫星导航</td>
|
||||
<td class="px-2 py-2">卫星导航系统</td>
|
||||
<td class="px-2 py-2">导航系统</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">亚光科技</td>
|
||||
<td class="px-2 py-2">卫星制导(中段)</td>
|
||||
<td class="px-2 py-2">微波电子</td>
|
||||
<td class="px-2 py-2">微波电子元器件</td>
|
||||
<td class="px-2 py-2">导弹导引头</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">天箭科技</td>
|
||||
<td class="px-2 py-2">制导系统</td>
|
||||
<td class="px-2 py-2">微波/毫米波</td>
|
||||
<td class="px-2 py-2">微波固态发射机</td>
|
||||
<td class="px-2 py-2">推进稀布阵</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">雷电微力</td>
|
||||
<td class="px-2 py-2">制导系统</td>
|
||||
<td class="px-2 py-2">微波/毫米波</td>
|
||||
<td class="px-2 py-2">毫米波有源相控阵</td>
|
||||
<td class="px-2 py-2">相控阵</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">臻镭科技</td>
|
||||
<td class="px-2 py-2">制导系统</td>
|
||||
<td class="px-2 py-2">微波/毫米波</td>
|
||||
<td class="px-2 py-2">射频芯片</td>
|
||||
<td class="px-2 py-2">射频前端</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">国博电子</td>
|
||||
<td class="px-2 py-2">制导系统</td>
|
||||
<td class="px-2 py-2">微波/毫米波</td>
|
||||
<td class="px-2 py-2">射频模块</td>
|
||||
<td class="px-2 py-2">射频模块</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">高德红外</td>
|
||||
<td class="px-2 py-2">红外制导(末段)</td>
|
||||
<td class="px-2 py-2">红外</td>
|
||||
<td class="px-2 py-2">制冷探测器</td>
|
||||
<td class="px-2 py-2">批量应用</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">睿创微纳</td>
|
||||
<td class="px-2 py-2">红外制导(末段)</td>
|
||||
<td class="px-2 py-2">红外</td>
|
||||
<td class="px-2 py-2">非制冷红外热成像</td>
|
||||
<td class="px-2 py-2">MEMS芯片</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">光谱股份</td>
|
||||
<td class="px-2 py-2">光学制导(末段)</td>
|
||||
<td class="px-2 py-2">光学</td>
|
||||
<td class="px-2 py-2">光学制导</td>
|
||||
<td class="px-2 py-2">导引头</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">新光光电</td>
|
||||
<td class="px-2 py-2">光学制导(末段)</td>
|
||||
<td class="px-2 py-2">光学</td>
|
||||
<td class="px-2 py-2">光学制导</td>
|
||||
<td class="px-2 py-2">导弹型号</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">智明达</td>
|
||||
<td class="px-2 py-2">嵌入式计算机</td>
|
||||
<td class="px-2 py-2">计算机</td>
|
||||
<td class="px-2 py-2">嵌入式计算机</td>
|
||||
<td class="px-2 py-2">弹载应用</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">雷科防务</td>
|
||||
<td class="px-2 py-2">嵌入式计算机</td>
|
||||
<td class="px-2 py-2">计算机</td>
|
||||
<td class="px-2 py-2">嵌入式计算机</td>
|
||||
<td class="px-2 py-2">国防应用</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">鸿远电子</td>
|
||||
<td class="px-2 py-2">元器件及部件</td>
|
||||
<td class="px-2 py-2">电容</td>
|
||||
<td class="px-2 py-2">军用MLCC</td>
|
||||
<td class="px-2 py-2">高可靠MLCC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">宏达电子</td>
|
||||
<td class="px-2 py-2">元器件及部件</td>
|
||||
<td class="px-2 py-2">电容</td>
|
||||
<td class="px-2 py-2">军用钽电容器</td>
|
||||
<td class="px-2 py-2">钽电容龙头</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">航天电器</td>
|
||||
<td class="px-2 py-2">元器件及部件</td>
|
||||
<td class="px-2 py-2">连接器</td>
|
||||
<td class="px-2 py-2">高端连接器</td>
|
||||
<td class="px-2 py-2">导弹配套</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 py-2 font-semibold">中航光电</td>
|
||||
<td class="px-2 py-2">元器件及部件</td>
|
||||
<td class="px-2 py-2">连接器</td>
|
||||
<td class="px-2 py-2">连接器</td>
|
||||
<td class="px-2 py-2">导弹应用</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 风险提示 -->
|
||||
<section class="mb-12 fade-in-up">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
|
||||
<h2 class="text-3xl font-bold mb-6 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="risk-high p-4 rounded-lg">
|
||||
<h3 class="font-bold text-lg mb-3 text-red-700">技术风险</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li>• MEMS陀螺仪军品认证未通过</li>
|
||||
<li>• 卫星导航抗干扰能力存疑</li>
|
||||
<li>• 高端制导器件仍有卡脖子环节</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="risk-medium p-4 rounded-lg">
|
||||
<h3 class="font-bold text-lg mb-3 text-yellow-700">商业化风险</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li>• 军采阶梯降价冲击毛利</li>
|
||||
<li>• 订单能见度极低</li>
|
||||
<li>• 订单空窗期可能长达18个月</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="risk-low p-4 rounded-lg">
|
||||
<h3 class="font-bold text-lg mb-3 text-green-700">政策风险</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li>• 军贸审批不确定性</li>
|
||||
<li>• 军工央企内部竞争</li>
|
||||
<li>• 和平谈判导致需求降温</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 投资启示 -->
|
||||
<section class="mb-12 fade-in-up">
|
||||
<div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl shadow-xl p-8">
|
||||
<h2 class="text-3xl font-bold mb-6">
|
||||
<i class="fas fa-chart-line mr-3"></i>投资启示
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">概念阶段判断</h3>
|
||||
<p class="mb-4">远程火力正处于从<strong>主题炒作向基本面驱动</strong>过渡的"阵痛期",长期逻辑坚实但短期面临验证挑战。</p>
|
||||
<div class="bg-white/10 backdrop-blur p-4 rounded-lg">
|
||||
<p class="text-sm">当前市场过度关注宏大叙事,忽视微观订单。建议降低仓位至标配,待Q3催化剂落地后再决策。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">配置建议</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center">
|
||||
<i class="fas fa-arrow-up text-green-400 mr-3"></i>
|
||||
<span><strong>超配:</strong>北方导航(制导系统龙头)</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<i class="fas fa-minus text-yellow-400 mr-3"></i>
|
||||
<span><strong>标配:</strong>国科军工、长盈通</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<i class="fas fa-arrow-down text-red-400 mr-3"></i>
|
||||
<span><strong>规避:</strong>间接受益标的(航亚科技等)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 text-center">
|
||||
<div class="inline-flex items-center bg-white/20 backdrop-blur px-6 py-3 rounded-full">
|
||||
<span class="pulse-dot w-3 h-3 bg-green-400 rounded-full mr-3"></span>
|
||||
<span class="font-semibold">一句话总结:值得长期跟踪,但当前处于"证伪窗口期",不见订单不撒鹰</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-800 text-white py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 text-center">
|
||||
<p class="text-sm opacity-75">本页面信息仅供参考,不构成投资建议</p>
|
||||
<p class="text-xs mt-2 opacity-50">数据来源:研报、路演、公告等公开信息</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('fade-in-up');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('section').forEach(section => {
|
||||
observer.observe(section);
|
||||
});
|
||||
|
||||
// 表格行高亮
|
||||
document.querySelectorAll('.stock-table tr').forEach(row => {
|
||||
row.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.01)';
|
||||
});
|
||||
row.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
643
public/htmls/阿里AI千问、灵光.html
Normal file
643
public/htmls/阿里AI千问、灵光.html
Normal file
@@ -0,0 +1,643 @@
|
||||
<!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 href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.timeline-dot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #3b82f6;
|
||||
top: 50%;
|
||||
left: -8px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
.float-animation {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.table-responsive {
|
||||
font-size: 12px;
|
||||
}
|
||||
.table-responsive th,
|
||||
.table-responsive td {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-base-300 text-base-content">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
|
||||
<div class="hero-content text-center text-neutral-content">
|
||||
<div class="max-w-4xl">
|
||||
<h1 class="text-6xl font-bold mb-4 gradient-text">阿里AI千问、灵光</h1>
|
||||
<p class="text-xl mb-8 opacity-90">从B端技术输出到C端生态入口的历史性拐点</p>
|
||||
<div class="stats shadow-lg glass-effect">
|
||||
<div class="stat">
|
||||
<div class="stat-title">下载量</div>
|
||||
<div class="stat-value text-primary">1000万+</div>
|
||||
<div class="stat-desc">千问APP公测一周</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">App Store排名</div>
|
||||
<div class="stat-value text-secondary">Top 3</div>
|
||||
<div class="stat-desc">2天冲榜</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">开源模型</div>
|
||||
<div class="stat-value">200+</div>
|
||||
<div class="stat-desc">全球下载量超3亿次</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Insights -->
|
||||
<section class="py-16 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="ri-lightbulb-flash-line text-yellow-500"></i> 核心观点摘要
|
||||
</h2>
|
||||
<div class="alert alert-warning glass-effect shadow-lg">
|
||||
<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 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg">核心观点</h3>
|
||||
<div class="text-sm mt-2">阿里AI战略正经历从B端技术输出到C端生态入口的历史性拐点,千问APP的爆发式增长验证了其"开源技术+场景垄断+免费策略"的独特路径有效性。然而,当前市场高度聚焦于用户数据和下载量,却可能忽视两个关键预期差:一是AI收入占比仍处个位数,商业化路径尚未跑通;二是技术层面虽在开源生态占据第一,但推理能力与DeepSeek等竞品仍存在差距。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Timeline -->
|
||||
<section class="py-16 bg-base-300">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="ri-time-line text-blue-500"></i> 关键时间轴
|
||||
</h2>
|
||||
<div class="relative">
|
||||
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-base-content/20"></div>
|
||||
|
||||
<!-- 2024年4月 -->
|
||||
<div class="mb-8 ml-16 relative timeline-dot">
|
||||
<div class="timeline-date text-primary font-bold text-lg">2024年4月</div>
|
||||
<div class="card glass-effect shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">技术基建期</h3>
|
||||
<ul class="list-disc list-inside space-y-2 text-sm">
|
||||
<li>阿里云发布通义千问2.5,性能追平GPT-4 Turbo</li>
|
||||
<li>Qwen2.5系列开源,奠定全球第一开源模型族地位</li>
|
||||
<li>衍生模型超10万,下载量突破700万次</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2025年4月 -->
|
||||
<div class="mb-8 ml-16 relative timeline-dot">
|
||||
<div class="timeline-date text-primary font-bold text-lg">2025年4月</div>
|
||||
<div class="card glass-effect shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Qwen3重磅发布</h3>
|
||||
<ul class="list-disc list-inside space-y-2 text-sm">
|
||||
<li>Qwen3-235B-A22B在编程、数学基准测试中超越DeepSeek-R1、GPT-4.1</li>
|
||||
<li>登顶Hugging Face趋势榜</li>
|
||||
<li>Qwen3 Coder编程能力达全球SOTA,API调用量突破千亿级Tokens</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2025年11月 -->
|
||||
<div class="mb-8 ml-16 relative timeline-dot">
|
||||
<div class="timeline-date text-error font-bold text-lg">2025年11月 - C端产品爆发期</div>
|
||||
<div class="card glass-effect shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">里程碑时刻</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div class="badge badge-info p-4">
|
||||
<div class="font-bold">11月14日</div>
|
||||
<div>通义App升级为千问App</div>
|
||||
</div>
|
||||
<div class="badge badge-success p-4">
|
||||
<div class="font-bold">11月17日</div>
|
||||
<div>千问App公测版上线</div>
|
||||
<div>2天冲榜Top 3</div>
|
||||
</div>
|
||||
<div class="badge badge-warning p-4">
|
||||
<div class="font-bold">11月18日</div>
|
||||
<div>灵光App发布</div>
|
||||
<div>4天下载破100万</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Logic -->
|
||||
<section class="py-16 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="ri-mind-map text-purple-500"></i> 核心驱动力分析
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- 技术开源 -->
|
||||
<div class="card glass-effect shadow-xl hover:shadow-2xl transition-all">
|
||||
<div class="card-body">
|
||||
<div class="card-title flex items-center gap-2">
|
||||
<i class="ri-code-s-slash-line text-2xl text-blue-500"></i>
|
||||
<span>技术开源战略</span>
|
||||
<div class="badge badge-info">★★★★☆</div>
|
||||
</div>
|
||||
<div class="text-sm space-y-2">
|
||||
<p>开源200+模型,全球下载量超3亿次</p>
|
||||
<p>衍生模型数量超10万,稳居Hugging Face第一</p>
|
||||
<p>区域性语言处理优势(印尼语、泰语)</p>
|
||||
<p class="text-warning">短板:推理能力与DeepSeek存在差距</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生态整合 -->
|
||||
<div class="card glass-effect shadow-xl hover:shadow-2xl transition-all">
|
||||
<div class="card-body">
|
||||
<div class="card-title flex items-center gap-2">
|
||||
<i class="ri-landscape-line text-2xl text-green-500"></i>
|
||||
<span>C端生态整合</span>
|
||||
<div class="badge badge-success">★★★★★</div>
|
||||
</div>
|
||||
<div class="text-sm space-y-2">
|
||||
<p>淘宝、高德、支付宝、飞猪全场景覆盖</p>
|
||||
<p>从聊天到办事的能力闭环</p>
|
||||
<p>石基信息打通酒店预订系统</p>
|
||||
<p class="text-success">护城河:竞品无法复制的场景垄断</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 战略投入 -->
|
||||
<div class="card glass-effect shadow-xl hover:shadow-2xl transition-all">
|
||||
<div class="card-body">
|
||||
<div class="card-title flex items-center gap-2">
|
||||
<i class="ri-rocket-line text-2xl text-red-500"></i>
|
||||
<span>战略资源投入</span>
|
||||
<div class="badge badge-error">★★★★★</div>
|
||||
</div>
|
||||
<div class="text-sm space-y-2">
|
||||
<p>3800亿AI基础设施投入(三年)</p>
|
||||
<p>吴泳铭定义"AI时代的未来之战"</p>
|
||||
<p>资本开支2025年预计增长超50%</p>
|
||||
<p class="text-error">风险:ROI压力巨大</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Market Sentiment -->
|
||||
<section class="py-16 bg-base-300">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="ri-bar-chart-line text-yellow-500"></i> 市场热度与预期差
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="card glass-effect shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<i class="ri-fire-line text-orange-500"></i> 市场热度
|
||||
</h3>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex justify-between items-center">
|
||||
<span>研报覆盖密度</span>
|
||||
<div class="badge badge-warning">峰值</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span>概念板块涨幅</span>
|
||||
<progress class="progress progress-warning w-56" value="85" max="100"></progress>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span>乐观情绪占比</span>
|
||||
<progress class="progress progress-success w-56" value="90" max="100"></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card glass-effect shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<i class="ri-alert-line text-red-500"></i> 关键预期差
|
||||
</h3>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="alert alert-error">
|
||||
<i class="ri-money-dollar-circle-line"></i>
|
||||
<div>C端爆发 ≠ 商业化兑现</div>
|
||||
<div class="text-xs">AI收入占比仍处个位数</div>
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
<i class="ri-git-branch-line"></i>
|
||||
<div>开源第一 ≠ 性能无敌</div>
|
||||
<div class="text-xs">Agent能力低于DeepSeek</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Industry Chain -->
|
||||
<section class="py-16 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="ri-links-line text-indigo-500"></i> 产业链图谱
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- 上游 -->
|
||||
<div class="card glass-effect shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-primary">上游:算力基础设施</h3>
|
||||
<div class="text-sm space-y-2">
|
||||
<p class="font-bold">价值占比: 40%</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>IDC/智算中心: 数据港、杭钢股份、科华数据</li>
|
||||
<li>AI芯片: 寒武纪、海光信息、平头哥</li>
|
||||
<li>服务器: 浪潮信息、中科曙光、工业富联</li>
|
||||
<li>光模块: 中际旭创、新易盛</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中游 -->
|
||||
<div class="card glass-effect shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-secondary">中游:模型与平台</h3>
|
||||
<div class="text-sm space-y-2">
|
||||
<p class="font-bold">价值占比: 30%(阿里主导)</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>大模型: 通义千问(已开源200+模型)</li>
|
||||
<li>MaaS平台: 百炼(29万企业用户)</li>
|
||||
<li>工具链: 通义灵码(已开始收费)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下游 -->
|
||||
<div class="card glass-effect shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-success">下游:应用与场景</h3>
|
||||
<div class="text-sm space-y-2">
|
||||
<p class="font-bold">价值占比: 30%</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>电商/消费: 光云科技、丽人丽妆</li>
|
||||
<li>旅游/酒店: 石基信息(核心标的)</li>
|
||||
<li>交通/物流: 千方科技</li>
|
||||
<li>数据服务: 值得买</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stock Tables -->
|
||||
<section class="py-16 bg-base-300">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="ri-stock-line text-green-500"></i> 核心关联股票
|
||||
</h2>
|
||||
|
||||
<!-- Table 1 -->
|
||||
<div class="mb-12">
|
||||
<h3 class="text-2xl font-bold mb-4 text-center">阿里系参股企业</h3>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-xs sm:table-md glass-effect">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>股票名称</th>
|
||||
<th>分类</th>
|
||||
<th>行业</th>
|
||||
<th>相关性</th>
|
||||
<th>持股比例</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">石基信息</td>
|
||||
<td><span class="badge badge-info">参股消费</span></td>
|
||||
<td>信息技术</td>
|
||||
<td>酒店直连核心</td>
|
||||
<td><span class="badge badge-warning">13.02%</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">朗新集团</td>
|
||||
<td><span class="badge badge-info">参股TMT</span></td>
|
||||
<td>信息技术</td>
|
||||
<td>能源数字化</td>
|
||||
<td><span class="badge badge-warning">16.63%</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">千方科技</td>
|
||||
<td><span class="badge badge-info">参股TMT</span></td>
|
||||
<td>信息技术</td>
|
||||
<td>交通领域唯一伙伴</td>
|
||||
<td><span class="badge badge-warning">14.11%</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">分众传媒</td>
|
||||
<td><span class="badge badge-info">参股TMT</span></td>
|
||||
<td>传媒</td>
|
||||
<td>营销合作</td>
|
||||
<td><span class="badge badge-secondary">6.13%</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">三江购物</td>
|
||||
<td><span class="badge badge-info">参股消费</span></td>
|
||||
<td>零售</td>
|
||||
<td>新零售布局</td>
|
||||
<td><span class="badge badge-warning">30%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table 2 -->
|
||||
<div class="mb-12">
|
||||
<h3 class="text-2xl font-bold mb-4 text-center">业务合作企业</h3>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-xs sm:table-md glass-effect">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>股票名称</th>
|
||||
<th>项目/业务</th>
|
||||
<th>原因</th>
|
||||
<th>相关性</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">恒银科技</td>
|
||||
<td>灵光</td>
|
||||
<td>接入千问大模型及灵光</td>
|
||||
<td><span class="badge badge-success">直接合作</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">华策影视</td>
|
||||
<td>内容制作</td>
|
||||
<td>已接入千问大模型</td>
|
||||
<td><span class="badge badge-info">应用合作</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">润建股份</td>
|
||||
<td>智算云业务</td>
|
||||
<td>与阿里云共同投资智算中心</td>
|
||||
<td><span class="badge badge-success">基础设施</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">数据港</td>
|
||||
<td>ZH13数据中心</td>
|
||||
<td>阿里核心数据中心供应商</td>
|
||||
<td><span class="badge badge-error">核心标的</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">杭钢股份</td>
|
||||
<td>B栋数据中心</td>
|
||||
<td>已上电机柜1069个</td>
|
||||
<td><span class="badge badge-warning">算力需求</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table 3 -->
|
||||
<div class="mb-12">
|
||||
<h3 class="text-2xl font-bold mb-4 text-center">技术供应商</h3>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-xs sm:table-md glass-effect">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>股票名称</th>
|
||||
<th>产品/服务</th>
|
||||
<th>合作内容</th>
|
||||
<th>类别</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">浪潮信息</td>
|
||||
<td>服务器</td>
|
||||
<td>阿里服务器采购份额最高</td>
|
||||
<td><span class="badge badge-primary">硬件</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">中际旭创</td>
|
||||
<td>光模块</td>
|
||||
<td>阿里云主要供应商</td>
|
||||
<td><span class="badge badge-primary">硬件</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">紫光股份</td>
|
||||
<td>交换机</td>
|
||||
<td>400G交换机大份额</td>
|
||||
<td><span class="badge badge-primary">硬件</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">寒武纪</td>
|
||||
<td>GPU</td>
|
||||
<td>云端产品线合作</td>
|
||||
<td><span class="badge badge-warning">芯片</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td class="font-bold">英维克</td>
|
||||
<td>液冷温控</td>
|
||||
<td>阿里数据中心制冷</td>
|
||||
<td><span class="badge badge-info">配套</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Risk Analysis -->
|
||||
<section class="py-16 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="ri-error-warning-line text-red-500"></i> 风险提示
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="card glass-effect shadow-xl bg-red-900/20">
|
||||
<div class="card-body text-center">
|
||||
<i class="ri-code-box-line text-4xl text-red-400 mb-2"></i>
|
||||
<h3 class="card-title justify-center">技术风险</h3>
|
||||
<p class="text-xs">推理能力瓶颈</p>
|
||||
<p class="text-xs">多模态整合瑕疵</p>
|
||||
<p class="text-xs">自研芯片性能差距</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card glass-effect shadow-xl bg-orange-900/20">
|
||||
<div class="card-body text-center">
|
||||
<i class="ri-money-cny-circle-line text-4xl text-orange-400 mb-2"></i>
|
||||
<h3 class="card-title justify-center">商业化风险</h3>
|
||||
<p class="text-xs">变现模式不清晰</p>
|
||||
<p class="text-xs">ROI压力巨大</p>
|
||||
<p class="text-xs">用户留存不确定</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card glass-effect shadow-xl bg-yellow-900/20">
|
||||
<div class="card-body text-center">
|
||||
<i class="ri-shield-line text-4xl text-yellow-400 mb-2"></i>
|
||||
<h3 class="card-title justify-center">政策风险</h3>
|
||||
<p class="text-xs">数据安全监管</p>
|
||||
<p class="text-xs">跨境数据限制</p>
|
||||
<p class="text-xs">反垄断压力</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card glass-effect shadow-xl bg-purple-900/20">
|
||||
<div class="card-body text-center">
|
||||
<i class="ri-team-line text-4xl text-purple-400 mb-2"></i>
|
||||
<h3 class="card-title justify-center">竞争风险</h3>
|
||||
<p class="text-xs">字节豆包竞争</p>
|
||||
<p class="text-xs">价格战内卷</p>
|
||||
<p class="text-xs">同质化严重</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Investment Insights -->
|
||||
<section class="py-16 bg-base-300">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">
|
||||
<i class="ri-lightbulb-line text-yellow-400"></i> 投资启示
|
||||
</h2>
|
||||
|
||||
<div class="alert alert-info shadow-lg glass-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">投资策略建议</h3>
|
||||
<ul class="list-disc list-inside space-y-2 mt-2 text-sm">
|
||||
<li><strong>首选标的:</strong>石基信息(002153.SZ)- 阿里二股东+酒店场景独占,50-70%上行空间</li>
|
||||
<li><strong>次选标的:</strong>数据港(603881.SH)- 算力需求直接受益,PS 4倍存重估空间</li>
|
||||
<li><strong>防御配置:</strong>值得买(300785.SZ)- 稳定数据服务,10-15%仓位</li>
|
||||
<li><strong>关键跟踪指标:</strong>千问DAU、AI收入占比、Agent任务完成率</li>
|
||||
<li><strong>仓位建议:</strong>总体控制在10-15%,设置15%止损线</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 text-center text-sm opacity-70">
|
||||
<p>⚠️ 风险提示:本概念当前市梦率成分较重,请谨慎投资</p>
|
||||
<p>核心观测期:2025年4月(Q1财报+Qwen4发布)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer footer-center p-10 bg-base-300 text-base-content">
|
||||
<div>
|
||||
<p class="font-bold">阿里AI千问、灵光 - 概念深度分析</p>
|
||||
<p>数据来源:公开信息、路演纪要、研究报告</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a><i class="ri-github-fill text-2xl"></i></a>
|
||||
<a><i class="ri-twitter-fill text-2xl"></i></a>
|
||||
<a><i class="ri-wechat-fill text-2xl"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>© 2025 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 animation on scroll
|
||||
const observerOptions = {
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
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, .alert, .timeline-dot').forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = 'opacity 0.5s, transform 0.5s';
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -20,4 +20,5 @@ gevent-websocket==0.10.1
|
||||
psutil==5.9.6
|
||||
Pillow==10.1.0
|
||||
itsdangerous==2.1.2
|
||||
APScheduler==3.10.4
|
||||
APScheduler==3.10.4
|
||||
elasticsearch==8.15.0
|
||||
66
src/constants/homeFeatures.ts
Normal file
66
src/constants/homeFeatures.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
// src/constants/homeFeatures.ts
|
||||
// 首页功能特性配置
|
||||
|
||||
import type { Feature } from '@/types/home';
|
||||
|
||||
/**
|
||||
* 核心功能特性列表
|
||||
* 第一个功能为特色功能,会以突出样式显示
|
||||
*/
|
||||
export const CORE_FEATURES: Feature[] = [
|
||||
{
|
||||
id: 'news-catalyst',
|
||||
title: '新闻中心',
|
||||
description: '实时新闻事件分析,捕捉市场催化因子',
|
||||
icon: '📊',
|
||||
color: 'yellow',
|
||||
url: '/community',
|
||||
badge: '核心',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 'concepts',
|
||||
title: '概念中心',
|
||||
description: '热门概念与主题投资分析追踪',
|
||||
icon: '🎯',
|
||||
color: 'purple',
|
||||
url: '/concepts',
|
||||
badge: '热门'
|
||||
},
|
||||
{
|
||||
id: 'stocks',
|
||||
title: '个股信息汇总',
|
||||
description: '全面的个股基本面信息整合',
|
||||
icon: '📈',
|
||||
color: 'blue',
|
||||
url: '/stocks',
|
||||
badge: '全面'
|
||||
},
|
||||
{
|
||||
id: 'limit-analyse',
|
||||
title: '涨停板块分析',
|
||||
description: '涨停板数据深度分析与规律挖掘',
|
||||
icon: '🚀',
|
||||
color: 'green',
|
||||
url: '/limit-analyse',
|
||||
badge: '精准'
|
||||
},
|
||||
{
|
||||
id: 'company',
|
||||
title: '个股罗盘',
|
||||
description: '个股全方位分析与投资决策支持',
|
||||
icon: '🧭',
|
||||
color: 'orange',
|
||||
url: '/company?scode=688256',
|
||||
badge: '专业'
|
||||
},
|
||||
{
|
||||
id: 'trading-simulation',
|
||||
title: '模拟盘交易',
|
||||
description: '100万起始资金,体验真实交易环境',
|
||||
icon: '💰',
|
||||
color: 'teal',
|
||||
url: '/trading-simulation',
|
||||
badge: '实战'
|
||||
}
|
||||
];
|
||||
57
src/hooks/useHomeResponsive.ts
Normal file
57
src/hooks/useHomeResponsive.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
// src/hooks/useHomeResponsive.ts
|
||||
// 首页响应式配置 Hook
|
||||
|
||||
import { useBreakpointValue } from '@chakra-ui/react';
|
||||
import type { ResponsiveConfig } from '@/types/home';
|
||||
|
||||
/**
|
||||
* 首页响应式配置 Hook
|
||||
* 集中管理所有响应式断点值
|
||||
*
|
||||
* @returns 响应式配置对象
|
||||
*/
|
||||
export const useHomeResponsive = (): ResponsiveConfig => {
|
||||
const heroHeight = useBreakpointValue({
|
||||
base: '60vh',
|
||||
md: '80vh',
|
||||
lg: '100vh'
|
||||
});
|
||||
|
||||
const headingSize = useBreakpointValue({
|
||||
base: 'xl',
|
||||
md: '3xl',
|
||||
lg: '4xl'
|
||||
});
|
||||
|
||||
const headingLetterSpacing = useBreakpointValue({
|
||||
base: '-1px',
|
||||
md: '-1.5px',
|
||||
lg: '-2px'
|
||||
});
|
||||
|
||||
const heroTextSize = useBreakpointValue({
|
||||
base: 'md',
|
||||
md: 'lg',
|
||||
lg: 'xl'
|
||||
});
|
||||
|
||||
const containerPx = useBreakpointValue({
|
||||
base: 10,
|
||||
md: 10,
|
||||
lg: 10
|
||||
});
|
||||
|
||||
const showDecorations = useBreakpointValue({
|
||||
base: false,
|
||||
md: true
|
||||
});
|
||||
|
||||
return {
|
||||
heroHeight,
|
||||
headingSize,
|
||||
headingLetterSpacing,
|
||||
heroTextSize,
|
||||
containerPx,
|
||||
showDecorations
|
||||
};
|
||||
};
|
||||
33
src/types/home.ts
Normal file
33
src/types/home.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
// src/types/home.ts
|
||||
// HomePage 相关类型定义
|
||||
|
||||
/**
|
||||
* 功能特性配置
|
||||
*/
|
||||
export interface Feature {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
url: string;
|
||||
badge: string;
|
||||
featured?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 响应式配置
|
||||
*/
|
||||
export interface ResponsiveConfig {
|
||||
heroHeight: string | undefined;
|
||||
headingSize: string | undefined;
|
||||
headingLetterSpacing: string | undefined;
|
||||
heroTextSize: string | undefined;
|
||||
containerPx: number | undefined;
|
||||
showDecorations: boolean | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* 功能卡片点击处理函数类型
|
||||
*/
|
||||
export type FeatureClickHandler = (feature: Feature) => void;
|
||||
@@ -1358,17 +1358,8 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
|
||||
</MarkdownRenderer>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{analysis.news_summary && (
|
||||
<Box p={4} bg={colorMode === 'light' ? 'green.50' : 'green.900'} borderRadius="md">
|
||||
<Heading size="sm" mb={2} color={theme.primary}>相关新闻</Heading>
|
||||
<MarkdownRenderer theme={theme} colorMode={colorMode}>
|
||||
{analysis.news_summary}
|
||||
</MarkdownRenderer>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{analysis.announcements && (
|
||||
|
||||
{analysis.announcements && analysis.announcements !== '[]' && (
|
||||
<Box p={4} bg={colorMode === 'light' ? 'orange.50' : 'orange.900'} borderRadius="md">
|
||||
<Heading size="sm" mb={2} color={theme.primary}>相关公告</Heading>
|
||||
<MarkdownRenderer theme={theme} colorMode={colorMode}>
|
||||
@@ -1376,21 +1367,93 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
|
||||
</MarkdownRenderer>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{analysis.guba_sentiment && (
|
||||
<Box p={4} bg={colorMode === 'light' ? 'red.50' : 'red.900'} borderRadius="md">
|
||||
<Heading size="sm" mb={2} color={theme.primary}>股吧情绪</Heading>
|
||||
<MarkdownRenderer theme={theme} colorMode={colorMode}>
|
||||
{analysis.guba_sentiment}
|
||||
</MarkdownRenderer>
|
||||
|
||||
{/* 研报引用展示 */}
|
||||
{analysis.verification_reports && analysis.verification_reports.length > 0 && (
|
||||
<Box p={4} bg={colorMode === 'light' ? 'blue.50' : 'blue.900'} borderRadius="md">
|
||||
<Heading size="sm" mb={3} color={theme.primary}>
|
||||
<HStack spacing={2}>
|
||||
<Icon as={ExternalLinkIcon} />
|
||||
<Text>研报引用 ({analysis.verification_reports.length})</Text>
|
||||
</HStack>
|
||||
</Heading>
|
||||
<VStack spacing={3} align="stretch">
|
||||
{analysis.verification_reports.map((report, reportIdx) => (
|
||||
<Box
|
||||
key={reportIdx}
|
||||
p={3}
|
||||
bg={colorMode === 'light' ? 'white' : 'gray.800'}
|
||||
borderRadius="md"
|
||||
border="1px solid"
|
||||
borderColor={theme.border}
|
||||
>
|
||||
<HStack justify="space-between" mb={2}>
|
||||
<HStack spacing={2}>
|
||||
<Badge colorScheme="blue" fontSize="xs">
|
||||
{report.publisher || '未知机构'}
|
||||
</Badge>
|
||||
{report.match_score && (
|
||||
<Badge
|
||||
colorScheme={report.match_score === '好' ? 'green' : report.match_score === '中' ? 'yellow' : 'gray'}
|
||||
fontSize="xs"
|
||||
>
|
||||
匹配度: {report.match_score}
|
||||
</Badge>
|
||||
)}
|
||||
{report.match_ratio != null && report.match_ratio > 0 && (
|
||||
<Badge colorScheme="purple" fontSize="xs">
|
||||
{(report.match_ratio * 100).toFixed(0)}%
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
{report.declare_date && (
|
||||
<Text fontSize="xs" color={theme.textMuted}>
|
||||
{report.declare_date.substring(0, 10)}
|
||||
</Text>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
{report.report_title && (
|
||||
<Text fontWeight="bold" fontSize="sm" color={theme.textPrimary} mb={1}>
|
||||
《{report.report_title}》
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{report.author && (
|
||||
<Text fontSize="xs" color={theme.textMuted} mb={2}>
|
||||
分析师: {report.author}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{report.verification_item && (
|
||||
<Box
|
||||
p={2}
|
||||
bg={colorMode === 'light' ? 'yellow.50' : 'yellow.900'}
|
||||
borderRadius="sm"
|
||||
mb={2}
|
||||
>
|
||||
<Text fontSize="xs" color={theme.textMuted}>
|
||||
<strong>验证项:</strong> {report.verification_item}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{report.content && (
|
||||
<Text fontSize="sm" color={theme.textSecondary} noOfLines={4}>
|
||||
{report.content}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box mt={4}>
|
||||
<Text fontSize="sm" color={theme.textMuted}>
|
||||
成交量: {formatUtils.formatNumber(analysis.volume)} |
|
||||
成交额: {formatUtils.formatNumber(analysis.amount)} |
|
||||
分析时间: {analysis.analysis_time || '-'}
|
||||
成交量: {formatUtils.formatNumber(analysis.volume)} |
|
||||
成交额: {formatUtils.formatNumber(analysis.amount)} |
|
||||
更新时间: {analysis.update_time || analysis.create_time || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
|
||||
@@ -1,385 +0,0 @@
|
||||
// src/views/Home/HomePage.js - 专业投资分析平台
|
||||
import React, { useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
Card,
|
||||
CardBody,
|
||||
Badge,
|
||||
Button,
|
||||
Flex,
|
||||
VStack,
|
||||
HStack,
|
||||
SimpleGrid,
|
||||
useBreakpointValue
|
||||
} from '@chakra-ui/react';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import heroBg from '../../assets/img/BackgroundCard1.png';
|
||||
import '../../styles/home-animations.css';
|
||||
import { logger } from '../../utils/logger';
|
||||
import { usePostHogTrack } from '../../hooks/usePostHogRedux';
|
||||
import { ACQUISITION_EVENTS } from '../../lib/constants';
|
||||
|
||||
export default function HomePage() {
|
||||
const { user, isAuthenticated } = useAuth(); // ⚡ 移除 isLoading,不再依赖它
|
||||
const navigate = useNavigate();
|
||||
const { track } = usePostHogTrack(); // PostHog 追踪
|
||||
const [imageLoaded, setImageLoaded] = React.useState(false);
|
||||
|
||||
// 响应式配置
|
||||
const heroHeight = useBreakpointValue({ base: '60vh', md: '80vh', lg: '100vh' });
|
||||
const headingSize = useBreakpointValue({ base: 'xl', md: '3xl', lg: '4xl' });
|
||||
const headingLetterSpacing = useBreakpointValue({ base: '-1px', md: '-1.5px', lg: '-2px' });
|
||||
const heroTextSize = useBreakpointValue({ base: 'md', md: 'lg', lg: 'xl' });
|
||||
const containerPx = useBreakpointValue({ base: 10, md: 10, lg: 10 });
|
||||
const showDecorations = useBreakpointValue({ base: false, md: true });
|
||||
|
||||
// 保留原有的调试信息
|
||||
useEffect(() => {
|
||||
logger.debug('HomePage', 'AuthContext状态', {
|
||||
userId: user?.id,
|
||||
username: user?.username,
|
||||
nickname: user?.nickname,
|
||||
isAuthenticated,
|
||||
hasUser: !!user
|
||||
});
|
||||
}, [user?.id, isAuthenticated]); // 只依赖 user.id,避免无限循环
|
||||
|
||||
// 🎯 PostHog 追踪:页面浏览
|
||||
useEffect(() => {
|
||||
track(ACQUISITION_EVENTS.LANDING_PAGE_VIEWED, {
|
||||
timestamp: new Date().toISOString(),
|
||||
is_authenticated: isAuthenticated,
|
||||
user_id: user?.id || null,
|
||||
});
|
||||
}, [track, isAuthenticated, user?.id]);
|
||||
|
||||
// 核心功能配置 - 5个主要功能
|
||||
const coreFeatures = [
|
||||
{
|
||||
id: 'news-catalyst',
|
||||
title: '新闻中心',
|
||||
description: '实时新闻事件分析,捕捉市场催化因子',
|
||||
icon: '📊',
|
||||
color: 'yellow',
|
||||
url: '/community',
|
||||
badge: '核心',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 'concepts',
|
||||
title: '概念中心',
|
||||
description: '热门概念与主题投资分析追踪',
|
||||
icon: '🎯',
|
||||
color: 'purple',
|
||||
url: '/concepts',
|
||||
badge: '热门'
|
||||
},
|
||||
{
|
||||
id: 'stocks',
|
||||
title: '个股信息汇总',
|
||||
description: '全面的个股基本面信息整合',
|
||||
icon: '📈',
|
||||
color: 'blue',
|
||||
url: '/stocks',
|
||||
badge: '全面'
|
||||
},
|
||||
{
|
||||
id: 'limit-analyse',
|
||||
title: '涨停板块分析',
|
||||
description: '涨停板数据深度分析与规律挖掘',
|
||||
icon: '🚀',
|
||||
color: 'green',
|
||||
url: '/limit-analyse',
|
||||
badge: '精准'
|
||||
},
|
||||
{
|
||||
id: 'company',
|
||||
title: '个股罗盘',
|
||||
description: '个股全方位分析与投资决策支持',
|
||||
icon: '🧭',
|
||||
color: 'orange',
|
||||
url: '/company?scode=688256',
|
||||
badge: '专业'
|
||||
},
|
||||
{
|
||||
id: 'trading-simulation',
|
||||
title: '模拟盘交易',
|
||||
description: '100万起始资金,体验真实交易环境',
|
||||
icon: '💰',
|
||||
color: 'teal',
|
||||
url: '/trading-simulation',
|
||||
badge: '实战'
|
||||
}
|
||||
];
|
||||
|
||||
// @TODO 如何区分内部链接和外部链接?
|
||||
const handleProductClick = useCallback((feature) => {
|
||||
// 🎯 PostHog 追踪:功能卡片点击
|
||||
track(ACQUISITION_EVENTS.FEATURE_CARD_CLICKED, {
|
||||
feature_id: feature.id,
|
||||
feature_title: feature.title,
|
||||
feature_url: feature.url,
|
||||
is_featured: feature.featured || false,
|
||||
link_type: feature.url.startsWith('http') ? 'external' : 'internal',
|
||||
});
|
||||
|
||||
// 原有导航逻辑
|
||||
if (feature.url.startsWith('http')) {
|
||||
// 外部链接,直接打开
|
||||
window.open(feature.url, '_blank');
|
||||
} else {
|
||||
// 内部路由
|
||||
navigate(feature.url);
|
||||
}
|
||||
}, [track, navigate]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* 开发调试信息 */}
|
||||
{/* {process.env.NODE_ENV === 'development' && (
|
||||
<Box bg="rgba(0, 0, 0, 0.8)" color="yellow.200" p={2} fontSize="xs" zIndex={1000} position="relative">
|
||||
认证: {isAuthenticated ? '✅' : '❌'} | 用户: {user?.nickname || '无'}
|
||||
</Box>
|
||||
)} */}
|
||||
|
||||
{/* Hero Section - 深色科技风格 */}
|
||||
<Box
|
||||
position="relative"
|
||||
minH={heroHeight}
|
||||
bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)"
|
||||
overflow="hidden"
|
||||
>
|
||||
{/* 背景图片和装饰 - 优化:延迟加载 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
right="0"
|
||||
w="50%"
|
||||
h="100%"
|
||||
bgImage={imageLoaded ? `url(${heroBg})` : 'none'}
|
||||
bgSize="cover"
|
||||
bgPosition="center"
|
||||
opacity={imageLoaded ? 0.3 : 0}
|
||||
transition="opacity 0.5s ease-in"
|
||||
_after={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'linear-gradient(90deg, rgba(14, 12, 21, 0.9) 0%, rgba(14, 12, 21, 0.3) 100%)'
|
||||
}}
|
||||
/>
|
||||
{/* 预加载背景图片 */}
|
||||
<Box display="none">
|
||||
<img
|
||||
src={heroBg}
|
||||
alt=""
|
||||
onLoad={() => setImageLoaded(true)}
|
||||
onError={() => setImageLoaded(true)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 装饰性几何图形 - 移动端隐藏 */}
|
||||
{showDecorations && (
|
||||
<>
|
||||
<Box
|
||||
position="absolute"
|
||||
top="20%"
|
||||
left="10%"
|
||||
w={{ base: '100px', md: '150px', lg: '200px' }}
|
||||
h={{ base: '100px', md: '150px', lg: '200px' }}
|
||||
borderRadius="50%"
|
||||
bg="rgba(255, 215, 0, 0.1)"
|
||||
filter="blur(80px)"
|
||||
className="float-animation"
|
||||
/>
|
||||
<Box
|
||||
position="absolute"
|
||||
bottom="30%"
|
||||
right="20%"
|
||||
w={{ base: '80px', md: '120px', lg: '150px' }}
|
||||
h={{ base: '80px', md: '120px', lg: '150px' }}
|
||||
borderRadius="50%"
|
||||
bg="rgba(138, 43, 226, 0.1)"
|
||||
filter="blur(60px)"
|
||||
className="float-animation-reverse"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Container maxW="7xl" position="relative" zIndex={30} px={containerPx}>
|
||||
<VStack spacing={{ base: 8, md: 12, lg: 16 }} align="stretch" minH={heroHeight} justify="center">
|
||||
{/* 主标题区域 */}
|
||||
<VStack spacing={{ base: 4, md: 5, lg: 6 }} textAlign="center" pt={{ base: 4, md: 6, lg: 8 }}>
|
||||
<Heading
|
||||
size={headingSize}
|
||||
color="white"
|
||||
fontWeight="900"
|
||||
letterSpacing={headingLetterSpacing}
|
||||
lineHeight="shorter"
|
||||
>
|
||||
智能投资分析平台
|
||||
</Heading>
|
||||
<Text fontSize={heroTextSize} color="whiteAlpha.800" maxW={{ base: '100%', md: '2xl', lg: '3xl' }} lineHeight="tall" px={{ base: 4, md: 0 }}>
|
||||
专业投资研究工具,助您把握市场机遇
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
|
||||
{/* 核心功能面板 */}
|
||||
<Box pb={{ base: 8, md: 12 }}>
|
||||
<VStack spacing={{ base: 6, md: 8 }}>
|
||||
|
||||
{/* 新闻中心 - 突出显示 */}
|
||||
<Card
|
||||
bg="transparent"
|
||||
border="2px solid"
|
||||
borderColor="yellow.400"
|
||||
borderRadius={{ base: '2xl', md: '3xl' }}
|
||||
overflow="hidden"
|
||||
position="relative"
|
||||
shadow="2xl"
|
||||
w="100%"
|
||||
_before={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%)',
|
||||
zIndex: 0
|
||||
}}
|
||||
>
|
||||
<CardBody p={{ base: 6, md: 8 }} position="relative" zIndex={1}>
|
||||
{/* 响应式布局:移动端纵向,桌面端横向 */}
|
||||
<Flex
|
||||
direction={{ base: 'column', md: 'row' }}
|
||||
align={{ base: 'stretch', md: 'center' }}
|
||||
justify={{ base: 'flex-start', md: 'space-between' }}
|
||||
gap={{ base: 4, md: 6 }}
|
||||
>
|
||||
<Flex align="center" gap={{ base: 4, md: 6 }} flex={1}>
|
||||
<Box
|
||||
p={{ base: 3, md: 4 }}
|
||||
borderRadius={{ base: 'lg', md: 'xl' }}
|
||||
bg="yellow.400"
|
||||
color="black"
|
||||
>
|
||||
<Text fontSize={{ base: '2xl', md: '3xl' }}>{coreFeatures[0].icon}</Text>
|
||||
</Box>
|
||||
<VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
|
||||
<HStack>
|
||||
<Heading size={{ base: 'lg', md: 'xl' }} color="white">
|
||||
{coreFeatures[0].title}
|
||||
</Heading>
|
||||
<Badge colorScheme="yellow" variant="solid" fontSize={{ base: 'xs', md: 'sm' }}>
|
||||
{coreFeatures[0].badge}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<Text color="whiteAlpha.800" fontSize={{ base: 'md', md: 'lg' }} maxW={{ md: 'md' }} lineHeight="tall">
|
||||
{coreFeatures[0].description}
|
||||
</Text>
|
||||
</VStack>
|
||||
</Flex>
|
||||
<Button
|
||||
colorScheme="yellow"
|
||||
size={{ base: 'md', md: 'lg' }}
|
||||
borderRadius="full"
|
||||
fontWeight="bold"
|
||||
w={{ base: '100%', md: 'auto' }}
|
||||
onClick={() => handleProductClick(coreFeatures[0])}
|
||||
minH="44px"
|
||||
flexShrink={0}
|
||||
>
|
||||
进入功能 →
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 其他5个功能 */}
|
||||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={{ base: 4, md: 5, lg: 6 }} w="100%">
|
||||
{coreFeatures.slice(1).map((feature) => (
|
||||
<Card
|
||||
key={feature.id}
|
||||
bg="whiteAlpha.100"
|
||||
backdropFilter="blur(10px)"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.200"
|
||||
borderRadius={{ base: 'xl', md: '2xl' }}
|
||||
transition="all 0.3s ease"
|
||||
_hover={{
|
||||
bg: 'whiteAlpha.200',
|
||||
borderColor: `${feature.color}.400`,
|
||||
transform: 'translateY(-4px)',
|
||||
shadow: '2xl'
|
||||
}}
|
||||
_active={{
|
||||
bg: 'whiteAlpha.200',
|
||||
borderColor: `${feature.color}.400`,
|
||||
transform: 'translateY(-2px)'
|
||||
}}
|
||||
onClick={() => handleProductClick(feature)}
|
||||
minH={{ base: 'auto', md: '180px' }}
|
||||
>
|
||||
<CardBody p={{ base: 5, md: 6 }}>
|
||||
<VStack spacing={{ base: 3, md: 4 }} align="start" h="100%">
|
||||
<HStack>
|
||||
<Box
|
||||
p={{ base: 2, md: 3 }}
|
||||
borderRadius="lg"
|
||||
bg={`${feature.color}.50`}
|
||||
border="1px solid"
|
||||
borderColor={`${feature.color}.200`}
|
||||
>
|
||||
<Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
|
||||
</Box>
|
||||
<Badge colorScheme={feature.color} variant="solid" fontSize={{ base: 'xs', md: 'sm' }}>
|
||||
{feature.badge}
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
<VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
|
||||
<Heading size={{ base: 'md', md: 'lg' }} color="white">
|
||||
{feature.title}
|
||||
</Heading>
|
||||
<Text color="whiteAlpha.800" fontSize={{ base: 'xs', md: 'sm' }} lineHeight="tall">
|
||||
{feature.description}
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<Button
|
||||
colorScheme={feature.color}
|
||||
size={{ base: 'md', md: 'sm' }}
|
||||
variant="outline"
|
||||
alignSelf="flex-end"
|
||||
w={{ base: '100%', md: 'auto' }}
|
||||
minH="44px"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleProductClick(feature);
|
||||
}}
|
||||
>
|
||||
使用
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
139
src/views/Home/HomePage.tsx
Normal file
139
src/views/Home/HomePage.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
// src/views/Home/HomePage.tsx
|
||||
// 首页 - 专业投资分析平台
|
||||
|
||||
import React, { useEffect, useCallback, useState } from 'react';
|
||||
import { Box, Container, VStack, SimpleGrid } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { usePostHogTrack } from '@/hooks/usePostHogRedux';
|
||||
import { useHomeResponsive } from '@/hooks/useHomeResponsive';
|
||||
import { ACQUISITION_EVENTS } from '@/lib/constants';
|
||||
import { CORE_FEATURES } from '@/constants/homeFeatures';
|
||||
import type { Feature } from '@/types/home';
|
||||
import { HeroBackground } from './components/HeroBackground';
|
||||
import { HeroHeader } from './components/HeroHeader';
|
||||
import { FeaturedFeatureCard } from './components/FeaturedFeatureCard';
|
||||
import { FeatureCard } from './components/FeatureCard';
|
||||
import '@/styles/home-animations.css';
|
||||
|
||||
/**
|
||||
* 首页组件
|
||||
* 展示平台核心功能,引导用户探索各个功能模块
|
||||
*/
|
||||
const HomePage: React.FC = () => {
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const { track } = usePostHogTrack();
|
||||
const [imageLoaded, setImageLoaded] = useState(false);
|
||||
|
||||
// 响应式配置
|
||||
const {
|
||||
heroHeight,
|
||||
headingSize,
|
||||
headingLetterSpacing,
|
||||
heroTextSize,
|
||||
containerPx,
|
||||
showDecorations
|
||||
} = useHomeResponsive();
|
||||
|
||||
// PostHog 追踪:页面浏览
|
||||
useEffect(() => {
|
||||
track(ACQUISITION_EVENTS.LANDING_PAGE_VIEWED, {
|
||||
timestamp: new Date().toISOString(),
|
||||
is_authenticated: isAuthenticated,
|
||||
user_id: user?.id || null,
|
||||
});
|
||||
}, [track, isAuthenticated, user?.id]);
|
||||
|
||||
// 功能卡片点击处理
|
||||
const handleFeatureClick = useCallback((feature: Feature) => {
|
||||
// PostHog 追踪:功能卡片点击
|
||||
track(ACQUISITION_EVENTS.FEATURE_CARD_VIEWED, {
|
||||
feature_id: feature.id,
|
||||
feature_title: feature.title,
|
||||
feature_url: feature.url,
|
||||
is_featured: feature.featured || false,
|
||||
link_type: feature.url.startsWith('http') ? 'external' : 'internal',
|
||||
});
|
||||
|
||||
// 导航处理
|
||||
if (feature.url.startsWith('http')) {
|
||||
window.open(feature.url, '_blank');
|
||||
} else {
|
||||
navigate(feature.url);
|
||||
}
|
||||
}, [track, navigate]);
|
||||
|
||||
// 背景图片加载完成回调
|
||||
const handleImageLoad = useCallback(() => {
|
||||
setImageLoaded(true);
|
||||
}, []);
|
||||
|
||||
// 特色功能(第一个)
|
||||
const featuredFeature = CORE_FEATURES[0];
|
||||
// 其他功能
|
||||
const regularFeatures = CORE_FEATURES.slice(1);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Hero Section - 深色科技风格 */}
|
||||
<Box
|
||||
position="relative"
|
||||
minH={heroHeight}
|
||||
bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)"
|
||||
overflow="hidden"
|
||||
>
|
||||
{/* 背景装饰 */}
|
||||
<HeroBackground
|
||||
imageLoaded={imageLoaded}
|
||||
onImageLoad={handleImageLoad}
|
||||
showDecorations={showDecorations}
|
||||
/>
|
||||
|
||||
<Container maxW="7xl" position="relative" zIndex={30} px={containerPx}>
|
||||
<VStack
|
||||
spacing={{ base: 8, md: 12, lg: 16 }}
|
||||
align="stretch"
|
||||
minH={heroHeight}
|
||||
justify="center"
|
||||
>
|
||||
{/* 主标题区域 */}
|
||||
<HeroHeader
|
||||
headingSize={headingSize}
|
||||
headingLetterSpacing={headingLetterSpacing}
|
||||
heroTextSize={heroTextSize}
|
||||
/>
|
||||
|
||||
{/* 核心功能面板 */}
|
||||
<Box pb={{ base: 8, md: 12 }}>
|
||||
<VStack spacing={{ base: 6, md: 8 }}>
|
||||
{/* 特色功能卡片 - 新闻中心 */}
|
||||
<FeaturedFeatureCard
|
||||
feature={featuredFeature}
|
||||
onClick={handleFeatureClick}
|
||||
/>
|
||||
|
||||
{/* 其他功能卡片 */}
|
||||
<SimpleGrid
|
||||
columns={{ base: 1, md: 2, lg: 3 }}
|
||||
spacing={{ base: 4, md: 5, lg: 6 }}
|
||||
w="100%"
|
||||
>
|
||||
{regularFeatures.map((feature) => (
|
||||
<FeatureCard
|
||||
key={feature.id}
|
||||
feature={feature}
|
||||
onClick={handleFeatureClick}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
106
src/views/Home/components/FeatureCard.tsx
Normal file
106
src/views/Home/components/FeatureCard.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
// src/views/Home/components/FeatureCard.tsx
|
||||
// 普通功能卡片组件
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Card,
|
||||
CardBody,
|
||||
VStack,
|
||||
HStack,
|
||||
Box,
|
||||
Heading,
|
||||
Text,
|
||||
Badge,
|
||||
Button
|
||||
} from '@chakra-ui/react';
|
||||
import type { Feature, FeatureClickHandler } from '@/types/home';
|
||||
|
||||
interface FeatureCardProps {
|
||||
feature: Feature;
|
||||
onClick: FeatureClickHandler;
|
||||
}
|
||||
|
||||
/**
|
||||
* 普通功能卡片组件
|
||||
* 用于展示除特色功能外的其他功能
|
||||
*/
|
||||
export const FeatureCard: React.FC<FeatureCardProps> = ({
|
||||
feature,
|
||||
onClick
|
||||
}) => {
|
||||
return (
|
||||
<Card
|
||||
bg="whiteAlpha.100"
|
||||
backdropFilter="blur(10px)"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.200"
|
||||
borderRadius={{ base: 'xl', md: '2xl' }}
|
||||
transition="all 0.3s ease"
|
||||
_hover={{
|
||||
bg: 'whiteAlpha.200',
|
||||
borderColor: `${feature.color}.400`,
|
||||
transform: 'translateY(-4px)',
|
||||
shadow: '2xl'
|
||||
}}
|
||||
_active={{
|
||||
bg: 'whiteAlpha.200',
|
||||
borderColor: `${feature.color}.400`,
|
||||
transform: 'translateY(-2px)'
|
||||
}}
|
||||
onClick={() => onClick(feature)}
|
||||
minH={{ base: 'auto', md: '180px' }}
|
||||
cursor="pointer"
|
||||
>
|
||||
<CardBody p={{ base: 5, md: 6 }}>
|
||||
<VStack spacing={{ base: 3, md: 4 }} align="start" h="100%">
|
||||
<HStack>
|
||||
<Box
|
||||
p={{ base: 2, md: 3 }}
|
||||
borderRadius="lg"
|
||||
bg={`${feature.color}.50`}
|
||||
border="1px solid"
|
||||
borderColor={`${feature.color}.200`}
|
||||
>
|
||||
<Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
|
||||
</Box>
|
||||
<Badge
|
||||
colorScheme={feature.color}
|
||||
variant="solid"
|
||||
fontSize={{ base: 'xs', md: 'sm' }}
|
||||
>
|
||||
{feature.badge}
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
<VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
|
||||
<Heading size={{ base: 'md', md: 'lg' }} color="white">
|
||||
{feature.title}
|
||||
</Heading>
|
||||
<Text
|
||||
color="whiteAlpha.800"
|
||||
fontSize={{ base: 'xs', md: 'sm' }}
|
||||
lineHeight="tall"
|
||||
>
|
||||
{feature.description}
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<Button
|
||||
colorScheme={feature.color}
|
||||
size={{ base: 'md', md: 'sm' }}
|
||||
variant="outline"
|
||||
alignSelf="flex-end"
|
||||
w={{ base: '100%', md: 'auto' }}
|
||||
minH="44px"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClick(feature);
|
||||
}}
|
||||
>
|
||||
使用
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
104
src/views/Home/components/FeaturedFeatureCard.tsx
Normal file
104
src/views/Home/components/FeaturedFeatureCard.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
// src/views/Home/components/FeaturedFeatureCard.tsx
|
||||
// 特色功能卡片组件(新闻中心)
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Card,
|
||||
CardBody,
|
||||
Flex,
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Heading,
|
||||
Text,
|
||||
Badge,
|
||||
Button
|
||||
} from '@chakra-ui/react';
|
||||
import type { Feature, FeatureClickHandler } from '@/types/home';
|
||||
|
||||
interface FeaturedFeatureCardProps {
|
||||
feature: Feature;
|
||||
onClick: FeatureClickHandler;
|
||||
}
|
||||
|
||||
/**
|
||||
* 特色功能卡片组件
|
||||
* 用于突出显示最重要的功能(如新闻中心)
|
||||
*/
|
||||
export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
|
||||
feature,
|
||||
onClick
|
||||
}) => {
|
||||
return (
|
||||
<Card
|
||||
bg="transparent"
|
||||
border="2px solid"
|
||||
borderColor="yellow.400"
|
||||
borderRadius={{ base: '2xl', md: '3xl' }}
|
||||
overflow="hidden"
|
||||
position="relative"
|
||||
shadow="2xl"
|
||||
w="100%"
|
||||
_before={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%)',
|
||||
zIndex: 0
|
||||
}}
|
||||
>
|
||||
<CardBody p={{ base: 6, md: 8 }} position="relative" zIndex={1}>
|
||||
<Flex
|
||||
direction={{ base: 'column', md: 'row' }}
|
||||
align={{ base: 'stretch', md: 'center' }}
|
||||
justify={{ base: 'flex-start', md: 'space-between' }}
|
||||
gap={{ base: 4, md: 6 }}
|
||||
>
|
||||
<Flex align="center" gap={{ base: 4, md: 6 }} flex={1}>
|
||||
<Box
|
||||
p={{ base: 3, md: 4 }}
|
||||
borderRadius={{ base: 'lg', md: 'xl' }}
|
||||
bg="yellow.400"
|
||||
color="black"
|
||||
>
|
||||
<Text fontSize={{ base: '2xl', md: '3xl' }}>{feature.icon}</Text>
|
||||
</Box>
|
||||
<VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
|
||||
<HStack>
|
||||
<Heading size={{ base: 'lg', md: 'xl' }} color="white">
|
||||
{feature.title}
|
||||
</Heading>
|
||||
<Badge colorScheme="yellow" variant="solid" fontSize={{ base: 'xs', md: 'sm' }}>
|
||||
{feature.badge}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<Text
|
||||
color="whiteAlpha.800"
|
||||
fontSize={{ base: 'md', md: 'lg' }}
|
||||
maxW={{ md: 'md' }}
|
||||
lineHeight="tall"
|
||||
>
|
||||
{feature.description}
|
||||
</Text>
|
||||
</VStack>
|
||||
</Flex>
|
||||
<Button
|
||||
colorScheme="yellow"
|
||||
size={{ base: 'md', md: 'lg' }}
|
||||
borderRadius="full"
|
||||
fontWeight="bold"
|
||||
w={{ base: '100%', md: 'auto' }}
|
||||
onClick={() => onClick(feature)}
|
||||
minH="44px"
|
||||
flexShrink={0}
|
||||
>
|
||||
进入功能 →
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
87
src/views/Home/components/HeroBackground.tsx
Normal file
87
src/views/Home/components/HeroBackground.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
// src/views/Home/components/HeroBackground.tsx
|
||||
// 首页英雄区背景装饰组件
|
||||
|
||||
import React from 'react';
|
||||
import { Box } from '@chakra-ui/react';
|
||||
import heroBg from '@assets/img/BackgroundCard1.png';
|
||||
|
||||
interface HeroBackgroundProps {
|
||||
imageLoaded: boolean;
|
||||
onImageLoad: () => void;
|
||||
showDecorations: boolean | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页英雄区背景组件
|
||||
* 包含背景图片和装饰性几何图形
|
||||
*/
|
||||
export const HeroBackground: React.FC<HeroBackgroundProps> = ({
|
||||
imageLoaded,
|
||||
onImageLoad,
|
||||
showDecorations
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
{/* 背景图片 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
right="0"
|
||||
w="50%"
|
||||
h="100%"
|
||||
bgImage={imageLoaded ? `url(${heroBg})` : 'none'}
|
||||
bgSize="cover"
|
||||
bgPosition="center"
|
||||
opacity={imageLoaded ? 0.3 : 0}
|
||||
transition="opacity 0.5s ease-in"
|
||||
_after={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'linear-gradient(90deg, rgba(14, 12, 21, 0.9) 0%, rgba(14, 12, 21, 0.3) 100%)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 预加载背景图片 */}
|
||||
<Box display="none">
|
||||
<img
|
||||
src={heroBg}
|
||||
alt=""
|
||||
onLoad={onImageLoad}
|
||||
onError={onImageLoad}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 装饰性几何图形 - 移动端隐藏 */}
|
||||
{showDecorations && (
|
||||
<>
|
||||
<Box
|
||||
position="absolute"
|
||||
top="20%"
|
||||
left="10%"
|
||||
w={{ base: '100px', md: '150px', lg: '200px' }}
|
||||
h={{ base: '100px', md: '150px', lg: '200px' }}
|
||||
borderRadius="50%"
|
||||
bg="rgba(255, 215, 0, 0.1)"
|
||||
filter="blur(80px)"
|
||||
className="float-animation"
|
||||
/>
|
||||
<Box
|
||||
position="absolute"
|
||||
bottom="30%"
|
||||
right="20%"
|
||||
w={{ base: '80px', md: '120px', lg: '150px' }}
|
||||
h={{ base: '80px', md: '120px', lg: '150px' }}
|
||||
borderRadius="50%"
|
||||
bg="rgba(138, 43, 226, 0.1)"
|
||||
filter="blur(60px)"
|
||||
className="float-animation-reverse"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
48
src/views/Home/components/HeroHeader.tsx
Normal file
48
src/views/Home/components/HeroHeader.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
// src/views/Home/components/HeroHeader.tsx
|
||||
// 首页主标题区域组件
|
||||
|
||||
import React from 'react';
|
||||
import { Heading, Text, VStack } from '@chakra-ui/react';
|
||||
|
||||
interface HeroHeaderProps {
|
||||
headingSize: string | undefined;
|
||||
headingLetterSpacing: string | undefined;
|
||||
heroTextSize: string | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页主标题区域组件
|
||||
* 包含主标题和副标题
|
||||
*/
|
||||
export const HeroHeader: React.FC<HeroHeaderProps> = ({
|
||||
headingSize,
|
||||
headingLetterSpacing,
|
||||
heroTextSize
|
||||
}) => {
|
||||
return (
|
||||
<VStack
|
||||
spacing={{ base: 4, md: 5, lg: 6 }}
|
||||
textAlign="center"
|
||||
pt={{ base: 4, md: 6, lg: 8 }}
|
||||
>
|
||||
<Heading
|
||||
size={headingSize}
|
||||
color="white"
|
||||
fontWeight="900"
|
||||
letterSpacing={headingLetterSpacing}
|
||||
lineHeight="shorter"
|
||||
>
|
||||
智能投资分析平台
|
||||
</Heading>
|
||||
<Text
|
||||
fontSize={heroTextSize}
|
||||
color="whiteAlpha.800"
|
||||
maxW={{ base: '100%', md: '2xl', lg: '3xl' }}
|
||||
lineHeight="tall"
|
||||
px={{ base: 4, md: 0 }}
|
||||
>
|
||||
专业投资研究工具,助您把握市场机遇
|
||||
</Text>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user