<!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > {{ name }} - 分析卡片< / title >
< link href = "https://cdn.jsdelivr.net/npm/antd@5.12.8/dist/reset.css" rel = "stylesheet" >
< style >
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #f0f2f5;
--bg-secondary: #ffffff;
--bg-tertiary: #f9fafb;
--text-primary: #333333;
--text-secondary: #666666;
--text-tertiary: #999999;
--border-color: #d9d9d9;
--header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
body.dark-theme {
--bg-primary: #1a1a1a;
--bg-secondary: #2d2d2d;
--bg-tertiary: #3d3d3d;
--text-primary: #e0e0e0;
--text-secondary: #b0b0b0;
--text-tertiary: #808080;
--border-color: #444444;
--header-bg: linear-gradient(135deg, #334155 0%, #1e293b 100%);
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
--card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
transition: all 0.3s ease;
}
.theme-toggle {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 6px 12px;
font-size: 14px;
cursor: pointer;
color: var(--text-primary);
transition: all 0.3s ease;
}
.theme-toggle:hover {
background: var(--bg-secondary);
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.header {
background: var(--header-bg);
color: white;
padding: 24px;
border-radius: 12px;
margin-bottom: 24px;
box-shadow: var(--card-shadow);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
font-size: 20px;
font-weight: 600;
}
.back-link {
color: white;
text-decoration: none;
font-size: 14px;
padding: 6px 12px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 6px;
transition: background-color 0.3s ease;
}
.back-link:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.card {
background: var(--bg-secondary);
border-radius: 12px;
padding: 24px;
box-shadow: var(--card-shadow);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
}
.symbol-info {
flex: 1;
}
.symbol-name {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.symbol-code {
font-size: 14px;
color: var(--text-tertiary);
}
.price-info {
text-align: right;
}
.current-price {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.direction-indicator {
display: inline-block;
padding: 6px 16px;
border-radius: 16px;
font-size: 14px;
font-weight: 500;
}
.direction-up {
background-color: rgba(82, 196, 26, 0.1);
color: #52c41a;
border: 1px solid rgba(82, 196, 26, 0.3);
}
.direction-down {
background-color: rgba(255, 77, 79, 0.1);
color: #ff4d4f;
border: 1px solid rgba(255, 77, 79, 0.3);
}
.direction-sideways {
background-color: rgba(24, 144, 255, 0.1);
color: #1890ff;
border: 1px solid rgba(24, 144, 255, 0.3);
}
.card-body {
margin-bottom: 20px;
}
.section {
margin-bottom: 20px;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.section-title::before {
content: '';
width: 4px;
height: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
}
.stat-item {
background-color: var(--bg-tertiary);
padding: 16px;
border-radius: 8px;
text-align: center;
border: 1px solid var(--border-color);
}
.stat-label {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.stat-value {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.win-rate {
color: #1890ff;
}
.fund-flow {
color: #52c41a;
}
.rollover-warning {
color: #fa8c16;
}
.indicator-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.indicator-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
background-color: var(--bg-tertiary);
border-radius: 6px;
border: 1px solid var(--border-color);
}
.indicator-name {
font-size: 14px;
color: var(--text-secondary);
}
.indicator-value {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.recommendation {
background-color: rgba(24, 144, 255, 0.1);
border-radius: 8px;
padding: 16px;
border-left: 4px solid #1890ff;
margin-top: 16px;
}
.recommendation-title {
font-size: 14px;
font-weight: 600;
color: #1890ff;
margin-bottom: 8px;
}
.recommendation-content {
font-size: 14px;
color: var(--text-primary);
line-height: 1.5;
}
.card-footer {
text-align: center;
padding-top: 16px;
border-top: 1px solid var(--border-color);
}
.detail-link {
color: #1890ff;
text-decoration: none;
font-size: 14px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
}
.detail-link:hover {
text-decoration: underline;
}
.footer {
text-align: center;
padding: 20px;
color: var(--text-tertiary);
font-size: 14px;
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.price-info {
text-align: left;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.indicator-list {
grid-template-columns: 1fr;
}
}
< / style >
< / head >
< body class = "dark-theme" >
< div class = "container" >
<!-- 主题切换 -->
< div style = "text-align: right; margin-bottom: 20px;" >
< button class = "theme-toggle" onclick = "toggleTheme()" > 切换主题< / button >
< / div >
<!-- 头部 -->
< div class = "header" >
< div class = "header-content" >
< h1 > 分析卡片< / h1 >
< a href = "/" class = "back-link" > 返回多品种面板< / a >
< / div >
< / div >
<!-- 分析卡片 -->
< div class = "card" >
< div class = "card-header" >
< div class = "symbol-info" >
< div class = "symbol-name" > {{ name }}< / div >
< div class = "symbol-code" > {{ symbol }}< / div >
< / div >
< div class = "price-info" >
< div class = "current-price" > {{ current_price }}< / div >
< div class = "direction-indicator
{% if direction == 'bullish' or direction == 'strong_bullish' or direction == 'weak_bullish' %}direction-up{% elif direction == 'bearish' or direction == 'strong_bearish' or direction == 'weak_bearish' %}direction-down{% else %}direction-sideways{% endif %}">
{% if direction == 'strong_bullish' %}强多头
{% elif direction == 'strong_bearish' %}强空头
{% elif direction == 'weak_bullish' %}弱多头
{% elif direction == 'weak_bearish' %}弱空头
{% elif direction == 'bullish' %}多头
{% elif direction == 'bearish' %}空头
{% elif direction == 'neutral' %}中性
{% else %}{{ direction | capitalize }}
{% endif %}
< / div >
< / div >
< / div >
< div class = "card-body" >
<!-- 核心指标 -->
< div class = "section" >
< div class = "section-title" > 核心指标< / div >
< div class = "stats-grid" >
< div class = "stat-item" >
< div class = "stat-label" > 胜率< / div >
< div class = "stat-value win-rate" > {{ win_rate }}%< / div >
< / div >
< div class = "stat-item" >
< div class = "stat-label" > 资金流向< / div >
< div class = "stat-value fund-flow" > {{ fund_flow.fund_signal | capitalize }}< / div >
< / div >
< div class = "stat-item" >
< div class = "stat-label" > 换月预警< / div >
< div class = "stat-value rollover-warning" > {{ rollover_warning.warning_level | capitalize }}< / div >
< / div >
< / div >
< / div >
<!-- 技术指标 -->
< div class = "section" >
< div class = "section-title" > 技术指标< / div >
< div class = "indicator-list" >
< div class = "indicator-item" >
< div class = "indicator-name" > MACD< / div >
< div class = "indicator-value" > {{ technical_indicators.macd.signal }}< / div >
< / div >
< div class = "indicator-item" >
< div class = "indicator-name" > RSI< / div >
< div class = "indicator-value" > {{ technical_indicators.rsi }}< / div >
< / div >
< div class = "indicator-item" >
< div class = "indicator-name" > 布林带< / div >
< div class = "indicator-value" > {{ technical_indicators.bollinger.position }}< / div >
< / div >
< div class = "indicator-item" >
< div class = "indicator-name" > KDJ< / div >
< div class = "indicator-value" > {{ technical_indicators.kdj.signal }}< / div >
< / div >
< div class = "indicator-item" >
< div class = "indicator-name" > ATR< / div >
< div class = "indicator-value" > {{ technical_indicators.atr | round(2) }}< / div >
< / div >
< / div >
< / div >
<!-- AI 建议 -->
< div class = "section" >
< div class = "section-title" > AI交易建议< / div >
< div class = "recommendation" >
< div class = "recommendation-title" > 建议< / div >
< div class = "recommendation-content" > {{ recommendation }}< / div >
< / div >
< / div >
< / div >
< div class = "card-footer" >
< a href = "/symbol/{{ symbol }}" class = "detail-link" > 查看详细分析 →< / a >
< / div >
< / div >
<!-- 底部 -->
< div class = "footer" >
< p > © 2024 AI期货分析系统 | 数据更新时间: {{ now() }}< / p >
< / div >
< / div >
< script >
// 获取当前时间
function now() {
const date = new Date();
return date.toLocaleString('zh-CN');
}
// 主题切换功能
function toggleTheme() {
const body = document.body;
if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme');
localStorage.setItem('theme', 'light');
} else {
body.classList.add('dark-theme');
localStorage.setItem('theme', 'dark');
}
}
// 初始化主题
document.addEventListener('DOMContentLoaded', function() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
document.body.classList.remove('dark-theme');
} else {
document.body.classList.add('dark-theme');
}
});
< / script >
< / body >
< / html >
