233 lines
12 KiB
HTML
233 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>股票投研报告模板</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0b1020;
|
||
--panel: #121a2b;
|
||
--panel-2: #182235;
|
||
--border: rgba(255,255,255,0.08);
|
||
--text: #edf2f7;
|
||
--muted: #94a3b8;
|
||
--accent: #38bdf8;
|
||
--accent-2: #818cf8;
|
||
--good: #22c55e;
|
||
--warn: #f59e0b;
|
||
--bad: #ef4444;
|
||
--shadow: 0 10px 30px rgba(0,0,0,0.35);
|
||
--radius: 18px;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
background: linear-gradient(180deg, #09101d 0%, #0b1020 100%);
|
||
color: var(--text);
|
||
line-height: 1.65;
|
||
}
|
||
.container { max-width: 1320px; margin: 0 auto; padding: 28px 18px 56px; }
|
||
.topbar {
|
||
display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
|
||
margin-bottom: 16px;
|
||
}
|
||
.back-link {
|
||
display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#cbd5e1;
|
||
padding:10px 14px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,0.04);
|
||
}
|
||
.back-link:hover { color:#fff; border-color:rgba(56,189,248,0.35); }
|
||
.hint {
|
||
color: var(--muted); font-size: 13px;
|
||
}
|
||
.hero {
|
||
background: linear-gradient(135deg, rgba(56,189,248,0.16), rgba(129,140,248,0.12));
|
||
border: 1px solid rgba(129,140,248,0.18);
|
||
border-radius: 24px;
|
||
padding: 28px;
|
||
box-shadow: var(--shadow);
|
||
margin-bottom: 20px;
|
||
}
|
||
.hero-top {
|
||
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start;
|
||
}
|
||
.badge {
|
||
display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 12px;
|
||
font-weight: 700; background: rgba(56,189,248,0.14); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.22); margin-bottom: 12px;
|
||
}
|
||
h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.2; }
|
||
.subtitle { color: var(--muted); font-size: 15px; max-width: 900px; }
|
||
.meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-top:22px; }
|
||
.meta-item { background: rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
|
||
.meta-label { color:var(--muted); font-size:12px; margin-bottom:6px; }
|
||
.meta-value { font-size:16px; font-weight:700; }
|
||
.summary-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:18px; margin-bottom:18px; }
|
||
.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
|
||
.panel-header { padding:18px 20px 10px; font-size:18px; font-weight:800; }
|
||
.panel-body { padding:0 20px 20px; }
|
||
.decision-box {
|
||
background: linear-gradient(180deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04));
|
||
border: 1px solid rgba(34,197,94,0.2); border-radius:16px; padding:16px; margin-bottom:14px;
|
||
}
|
||
.decision-title { font-size:22px; font-weight:800; margin-bottom:8px; }
|
||
.decision-text { color:#dbeafe; }
|
||
.score-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
|
||
.score-card { background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:14px; }
|
||
.score-name { color:var(--muted); font-size:12px; margin-bottom:8px; }
|
||
.score-value { font-size:28px; font-weight:800; margin-bottom:6px; }
|
||
.score-comment { font-size:13px; color:#cbd5e1; }
|
||
.layout { display:grid; grid-template-columns:1.2fr 0.8fr; gap:18px; margin-bottom:18px; }
|
||
.section-block { padding:18px 20px 20px; border-top:1px solid rgba(255,255,255,0.04); }
|
||
.section-block:first-child { border-top:none; }
|
||
h2 { margin:0 0 12px; font-size:20px; }
|
||
h3 { margin:0 0 10px; font-size:16px; }
|
||
ul { margin:0; padding-left:20px; }
|
||
li + li { margin-top:8px; }
|
||
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
|
||
.tag { padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:rgba(255,255,255,0.04); color:#dbeafe; }
|
||
.kpi-list { display:grid; gap:10px; }
|
||
.kpi-item {
|
||
padding:12px 14px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid var(--border);
|
||
display:flex; justify-content:space-between; gap:12px;
|
||
}
|
||
.kpi-item span:first-child { color:var(--muted); }
|
||
.action-table { width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px; margin-top:8px; }
|
||
.action-table th, .action-table td {
|
||
padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.06); text-align:left; vertical-align:top; font-size:14px;
|
||
}
|
||
.action-table th { color:var(--muted); font-weight:600; background:rgba(255,255,255,0.03); }
|
||
.action-table tr:last-child td { border-bottom:none; }
|
||
.risk-good { color:var(--good); font-weight:700; }
|
||
.risk-warn { color:var(--warn); font-weight:700; }
|
||
.risk-bad { color:var(--bad); font-weight:700; }
|
||
.footer-note { margin-top:18px; color:var(--muted); font-size:13px; text-align:center; }
|
||
@media (max-width: 960px) {
|
||
.summary-grid, .layout { grid-template-columns:1fr; }
|
||
h1 { font-size:28px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="topbar">
|
||
<a class="back-link" href="/">← 返回山寨币监控首页</a>
|
||
<div class="hint">这是投研报告网页模板页。后续生成个股报告时，可按同样结构直接落地为单独页面。</div>
|
||
</div>
|
||
|
||
<section class="hero">
|
||
<div class="hero-top">
|
||
<div>
|
||
<div class="badge">港股 · 个股投研模板</div>
|
||
<h1>小米集团（1810.HK）投研报告</h1>
|
||
<div class="subtitle">示例：先给结论，再拆基本面、技术面、消息面、股东减持/回购与最终交易计划。这一页是以后所有单票 HTML 报告的标准骨架。</div>
|
||
</div>
|
||
<div class="tag-row">
|
||
<div class="tag">周期：🔥短线 / 🎯中线</div>
|
||
<div class="tag">评级：可关注</div>
|
||
<div class="tag">当前结论：分批布局，不宜梭哈</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="meta">
|
||
<div class="meta-item"><div class="meta-label">报告日期</div><div class="meta-value">{{report_date}}</div></div>
|
||
<div class="meta-item"><div class="meta-label">最新价格</div><div class="meta-value">{{latest_price}}</div></div>
|
||
<div class="meta-item"><div class="meta-label">涨跌幅</div><div class="meta-value">{{change_pct}}</div></div>
|
||
<div class="meta-item"><div class="meta-label">市值 / 估值</div><div class="meta-value">{{market_cap_and_valuation}}</div></div>
|
||
<div class="meta-item"><div class="meta-label">行业 / 主题</div><div class="meta-value">{{sector_theme}}</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="summary-grid">
|
||
<div class="panel">
|
||
<div class="panel-header">核心结论</div>
|
||
<div class="panel-body">
|
||
<div class="decision-box">
|
||
<div class="decision-title">{{core_decision}}</div>
|
||
<div class="decision-text">{{core_decision_reason}}</div>
|
||
</div>
|
||
<h3>三句话看懂这只票</h3>
|
||
<ul>
|
||
<li>{{summary_point_1}}</li>
|
||
<li>{{summary_point_2}}</li>
|
||
<li>{{summary_point_3}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-header">综合评分</div>
|
||
<div class="panel-body">
|
||
<div class="score-grid">
|
||
<div class="score-card"><div class="score-name">综合评分</div><div class="score-value">{{total_score}}</div><div class="score-comment">{{total_score_comment}}</div></div>
|
||
<div class="score-card"><div class="score-name">技术面</div><div class="score-value">{{technical_score}}</div><div class="score-comment">{{technical_comment}}</div></div>
|
||
<div class="score-card"><div class="score-name">催化/资金面</div><div class="score-value">{{catalyst_score}}</div><div class="score-comment">{{catalyst_comment}}</div></div>
|
||
<div class="score-card"><div class="score-name">基本面防雷</div><div class="score-value">{{fundamental_score}}</div><div class="score-comment">{{fundamental_comment}}</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="layout">
|
||
<div class="panel">
|
||
<div class="panel-header">投研主报告</div>
|
||
<div class="section-block"><h2>一、投资逻辑</h2><ul><li>{{logic_1}}</li><li>{{logic_2}}</li><li>{{logic_3}}</li></ul></div>
|
||
<div class="section-block"><h2>二、基本面拆解</h2><ul><li>{{fundamental_detail_1}}</li><li>{{fundamental_detail_2}}</li><li>{{fundamental_detail_3}}</li></ul></div>
|
||
<div class="section-block"><h2>三、技术面判断</h2><ul><li>{{technical_detail_1}}</li><li>{{technical_detail_2}}</li><li>{{technical_detail_3}}</li></ul></div>
|
||
<div class="section-block"><h2>四、消息面 / 催化 / 资金</h2><ul><li>{{news_detail_1}}</li><li>{{news_detail_2}}</li><li>{{news_detail_3}}</li></ul></div>
|
||
<div class="section-block"><h2>五、股东减持 / 回购 / 解禁</h2><ul><li>{{holder_detail_1}}</li><li>{{holder_detail_2}}</li><li>{{holder_detail_3}}</li></ul></div>
|
||
<div class="section-block"><h2>六、风险点</h2><ul><li>{{risk_1}}</li><li>{{risk_2}}</li><li>{{risk_3}}</li></ul></div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-header">操作面板</div>
|
||
<div class="section-block">
|
||
<h2>当前是否可建仓</h2>
|
||
<div class="decision-box">
|
||
<div class="decision-title">{{entry_status}}</div>
|
||
<div class="decision-text">{{entry_status_reason}}</div>
|
||
</div>
|
||
<div class="tag-row">
|
||
<div class="tag">最佳买点：{{best_buy_point}}</div>
|
||
<div class="tag">观察位：{{watch_price}}</div>
|
||
<div class="tag">止损位：{{stop_loss}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-block">
|
||
<h2>关键指标速览</h2>
|
||
<div class="kpi-list">
|
||
<div class="kpi-item"><span>布林位置</span><strong>{{boll_position}}</strong></div>
|
||
<div class="kpi-item"><span>RSI</span><strong>{{rsi_value}}</strong></div>
|
||
<div class="kpi-item"><span>MACD</span><strong>{{macd_status}}</strong></div>
|
||
<div class="kpi-item"><span>量价关系</span><strong>{{volume_price_status}}</strong></div>
|
||
<div class="kpi-item"><span>支撑 / 压力</span><strong>{{support_resistance}}</strong></div>
|
||
</div>
|
||
</div>
|
||
<div class="section-block">
|
||
<h2>交易计划</h2>
|
||
<table class="action-table">
|
||
<thead><tr><th>场景</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>当前策略</td><td>{{trade_plan_now}}</td></tr>
|
||
<tr><td>回调策略</td><td>{{trade_plan_pullback}}</td></tr>
|
||
<tr><td>突破策略</td><td>{{trade_plan_breakout}}</td></tr>
|
||
<tr><td>止盈策略</td><td>{{trade_plan_take_profit}}</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="section-block">
|
||
<h2>最终建议</h2>
|
||
<ul>
|
||
<li><span class="risk-good">适合做什么：</span>{{final_do}}</li>
|
||
<li><span class="risk-warn">现在别做什么：</span>{{final_dont}}</li>
|
||
<li><span class="risk-bad">最大风险：</span>{{final_biggest_risk}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="footer-note">模板页地址固定为 /stock-report。后续我帮你分析具体股票时，可直接生成真实数据版 HTML 并挂到同站点。</div>
|
||
</div>
|
||
</body>
|
||
</html>
|