console
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>金融学习与模拟投资系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
color: #333;
min-height: 100vh;
padding: 0;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.navbar {
background: linear-gradient(90deg, #1a3a6c 0%, #2962ff 100%);
color: white;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.5rem;
font-weight: 700;
}
.nav-tabs {
display: flex;
gap: 5px;
}
.nav-tab {
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.nav-tab.active {
background: rgba(255, 255, 255, 0.2);
}
.user-info {
display: flex;
align-items: center;
gap: 15px;
}
.balance {
background: rgba(255, 255, 255, 0.15);
padding: 8px 15px;
border-radius: 20px;
font-weight: 600;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
cursor: pointer;
}
.module-container {
display: none;
animation: fadeIn 0.5s ease;
}
.module-container.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.module-header {
text-align: center;
padding: 30px 0 20px;
}
.module-header h1 {
font-size: 2.5rem;
color: #1a3a6c;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.module-header p {
font-size: 1.1rem;
color: #4a6583;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.dashboard {
display: flex;
gap: 20px;
margin-bottom: 40px;
}
.panel {
background: white;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 46, 109, 0.1);
overflow: hidden;
}
.left-panel {
flex: 7;
}
.middle-panel {
flex: 5;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-panel {
flex: 3;
display: flex;
flex-direction: column;
gap: 15px;
}
.tab-bar {
display: flex;
background: #f0f5ff;
padding: 0 20px;
border-bottom: 1px solid #e0e9f5;
}
.tab {
padding: 18px 25px;
cursor: pointer;
font-weight: 600;
color: #5a7a9c;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
}
.tab.active {
color: #2962ff;
border-bottom: 3px solid #2962ff;
background: rgba(41, 98, 255, 0.05);
}
.tab i {
margin-right: 8px;
}
.content {
padding: 25px;
height: calc(100% - 60px);
overflow-y: auto;
}
.course-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
}
.course-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 46, 109, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #e6edf7;
display: flex;
flex-direction: column;
height: 100%;
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(41, 98, 255, 0.15);
}
.course-header {
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
background: linear-gradient(90deg, #2962ff 0%, #1a47b8 100%);
color: white;
}
.course-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
}
.course-info h3 {
font-size: 1.3rem;
margin-bottom: 5px;
}
.course-info .level {
font-size: 0.85rem;
opacity: 0.9;
}
.course-body {
padding: 20px;
flex-grow: 1;
}
.course-meta {
display: flex;
justify-content: space-between;
color: #5a7a9c;
font-size: 0.9rem;
margin-bottom: 15px;
}
.course-desc {
color: #4a6583;
line-height: 1.6;
margin-bottom: 20px;
}
.course-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.tag {
background: #eef5ff;
color: #2962ff;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.btn {
display: block;
width: 100%;
padding: 12px;
text-align: center;
background: #2962ff;
color: white;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
border: none;
font-size: 1rem;
}
.btn:hover {
background: #1a47b8;
}
.simulation-box {
background: white;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 46, 109, 0.1);
padding: 20px;
flex: 1;
}
.simulation-box h2 {
display: flex;
align-items: center;
gap: 10px;
color: #1a3a6c;
margin-bottom: 20px;
font-size: 1.5rem;
}
.chart-container {
height: 250px;
margin-bottom: 20px;
}
.trading-panel {
background: #f8fbff;
border: 1px solid #e0e9f5;
border-radius: 10px;
padding: 15px;
}
.trading-panel h3 {
color: #4a6583;
margin-bottom: 15px;
font-size: 1.1rem;
}
.trading-controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.trading-controls input,
.trading-controls select {
padding: 10px 15px;
border: 1px solid #d0ddee;
border-radius: 8px;
font-size: 1rem;
}
.action-buttons {
display: flex;
gap: 10px;
margin-top: 15px;
}
.action-btn {
flex: 1;
padding: 12px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.buy-btn {
background: linear-gradient(to right, #00c853, #009624);
color: white;
}
.sell-btn {
background: linear-gradient(to right, #ff3d00, #dd2c00);
color: white;
}
.progress-box {
background: white;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 46, 109, 0.1);
padding: 20px;
flex: 1;
}
.nft-card {
background: linear-gradient(135deg, #ffd740 0%, #ffab00 100%);
border-radius: 12px;
padding: 20px;
color: #5d4037;
margin-top: 20px;
}
.nft-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.nft-title {
font-size: 1.3rem;
font-weight: 700;
}
.nft-badge {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.progress-item {
margin-bottom: 20px;
}
.progress-title {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 0.95rem;
color: #4a6583;
}
.progress-bar {
height: 10px;
background: #e0e9f5;
border-radius: 5px;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 5px;
}
.basic-progress {
width: 70%;
background: linear-gradient(to right, #2962ff, #1a47b8);
}
.advanced-progress {
width: 15%;
background: linear-gradient(to right, #ff6d00, #e65100);
}
.knowledge-panel {
background: white;
padding: 15px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
height: 100%;
display: flex;
flex-direction: column;
}
.knowledge-header {
text-align: center;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
margin-bottom: 15px;
color: #2962ff;
}
.term-list {
display: flex;
flex-direction: column;
gap: 12px;
flex-grow: 1;
}
.term-item {
padding: 12px 15px;
background: #f8fbff;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid #e0e9f5;
}
.term-item:hover {
background: #eef5ff;
border-color: #2962ff;
}
.term-item h4 {
color: #1a3a6c;
margin-bottom: 5px;
}
.term-item p {
color: #5a7a9c;
font-size: 0.9rem;
}
.term-detail {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
background: white;
border-radius: 16px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
z-index: 1000;
padding: 25px;
display: none;
}
.term-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.term-header h2 {
color: #1a3a6c;
}
.close-btn {
background: #f5f7fa;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
color: #5a7a9c;
}
.term-content {
margin-bottom: 25px;
}
.section {
margin-bottom: 20px;
}
.section h3 {
color: #2962ff;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
.section p {
color: #4a6583;
line-height: 1.7;
margin-bottom: 15px;
}
.example {
background: #f8fbff;
padding: 15px;
border-radius: 10px;
border-left: 3px solid #2962ff;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.market-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.market-card {
background: white;
border-radius: 10px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #e0e9f5;
cursor: pointer;
transition: all 0.2s ease;
}
.market-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(41, 98, 255, 0.15);
}
.market-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.market-name {
font-weight: 600;
color: #1a3a6c;
}
.market-code {
color: #5a7a9c;
font-size: 0.9rem;
}
.market-price {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 5px;
}
.market-change {
font-size: 0.9rem;
font-weight: 600;
}
.change-up {
color: #00c853;
}
.change-down {
color: #ff3d00;
}
.info-btn {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
background: #eef5ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: #2962ff;
cursor: pointer;
border: none;
}
.transactions-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.transactions-table th {
background: #f0f5ff;
padding: 12px 15px;
text-align: left;
color: #4a6583;
font-weight: 600;
}
.transactions-table td {
padding: 12px 15px;
border-bottom: 1px solid #e0e9f5;
}
.buy-row {
background: rgba(0, 200, 83, 0.05);
}
.sell-row {
background: rgba(255, 61, 0, 0.05);
}
.analytics-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
.analytics-chart {
height: 250px;
background: white;
border-radius: 10px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.risk-meters {
display: flex;
justify-content: space-between;
gap: 20px;
margin: 20px 0;
}
.risk-meter {
flex: 1;
background: white;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.meter-title {
color: #4a6583;
margin-bottom: 15px;
font-weight: 600;
}
.meter-value {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 10px;
}
.meter-status {
padding: 5px 10px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
}
.status-low {
background: rgba(0, 200, 83, 0.15);
color: #00c853;
}
.status-medium {
background: rgba(255, 193, 7, 0.15);
color: #ff9800;
}
.status-high {
background: rgba(244, 67, 54, 0.15);
color: #f44336;
}
@media (max-width: 1200px) {
.dashboard {
flex-direction: column;
}
.right-panel {
flex-direction: row;
flex-wrap: wrap;
}
.knowledge-panel {
width: 100%;
}
}
@media (max-width: 768px) {
.course-grid {
grid-template-columns: 1fr;
}
.trading-controls {
grid-template-columns: 1fr;
}
.analytics-container {
grid-template-columns: 1fr;
}
.risk-meters {
flex-direction: column;
}
.navbar {
flex-direction: column;
gap: 15px;
padding: 15px;
}
.nav-tabs {
width: 100%;
justify-content: center;
}
}
</style>
</head>
<body>
<div class="navbar">
<div class="logo">
<i class="fas fa-chart-line"></i>
<span>金融学习与模拟投资系统</span>
</div>
<div class="nav-tabs">
<div class="nav-tab active" data-tab="finance-learning">
<i class="fas fa-book"></i> 金融学习
</div>
<div class="nav-tab" data-tab="simulation-investment">
<i class="fas fa-coins"></i> 模拟投资
</div>
</div>
<div class="user-info">
<div class="balance">
<i class="fas fa-wallet"></i> ¥100,000.00
</div>
<div class="avatar">JD</div>
</div>
</div>
<div class="container">
<div id="finance-learning" class="module-container active">
<div class="module-header">
<h1><i class="fas fa-book"></i> 金融学习模块</h1>
<p>系统化学习金融知识，从基础概念到投资策略，通过情景化学习掌握实战技能</p>
</div>
<div class="dashboard">
<div class="left-panel panel">
<div class="tab-bar">
<div class="tab active" id="tab-courses" onclick="showTab('courses')">
<i class="fas fa-book"></i> 课程体系
</div>
<div class="tab" id="tab-terms" onclick="showTab('terms')">
<i class="fas fa-lightbulb"></i> 知识点关联
</div>
</div>
<div class="content" id="courses-content">
<h2 style="color: #2962ff; margin-bottom: 20px;">精选金融课程</h2>
<div class="course-grid">
<div class="course-card">
<div class="course-header">
<div class="course-icon">
<i class="fas fa-play-circle"></i>
</div>
<div class="course-info">
<h3>股票市场基础</h3>
<div class="level">初级 · 25分钟</div>
</div>
</div>
<div class="course-body">
<div class="course-meta">
<span><i class="far fa-play-circle"></i> 视频课程</span>
<span><i class="fas fa-star"></i> 4.8 (125)</span>
</div>
<p class="course-desc">通过动画视频讲解股票市场的基本运作原理，包括交易机制、<span class="term" onclick="showTermDetail('K线')">K线</span>图解读和基础分析方法。</p>
<div class="course-tags">
<span class="tag">股票入门</span>
<span class="tag">投资基础</span>
</div>
<button class="btn">开始学习</button>
</div>
</div>
<div class="course-card">
<div class="course-header">
<div class="course-icon">
<i class="fas fa-file-invoice-dollar"></i>
</div>
<div class="course-info">
<h3>财报分析实战</h3>
<div class="level">进阶 · 40分钟</div>
</div>
</div>
<div class="course-body">
<div class="course-meta">
<span><i class="fas fa-chart-line"></i> 实战案例</span>
<span><i class="fas fa-medal"></i> 含证书</span>
</div>
<p class="course-desc">分析真实上市公司简化报表，学习评估<span class="term" onclick="showTermDetail('财务比率')">财务比率</span>、识别财务健康指标和发现投资价值。</p>
<div class="course-tags">
<span class="tag">财务分析</span>
<span class="tag">价值投资</span>
</div>
<button class="btn">开始学习</button>
</div>
</div>
<div class="course-card">
<div class="course-header">
<div class="course-icon">
<i class="fas fa-gem"></i>
</div>
<div class="course-info">
<h3>价值投资认证</h3>
<div class="level">高级 · 认证课程</div>
</div>
</div>
<div class="course-body">
<div class="course-meta">
<span><i class="fas fa-trophy"></i> NFT证书</span>
<span><i class="fas fa-clock"></i> 8小时</span>
</div>
<p class="course-desc">完成本课程将获得区块链NFT证书，学习本杰明·格雷厄姆和沃伦·巴菲特的<span class="term" onclick="showTermDetail('价值投资')">价值投资</span>策略。</p>
<div class="course-tags">
<span class="tag">价值投资</span>
<span class="tag">认证课程</span>
</div>
<button class="btn">开始认证</button>
</div>
</div>
<div class="course-card">
<div class="course-header">
<div class="course-icon">
<i class="fas fa-calculator"></i>
</div>
<div class="course-info">
<h3>金融衍生品入门</h3>
<div class="level">中级 · 35分钟</div>
</div>
</div>
<div class="course-body">
<div class="course-meta">
<span><i class="fas fa-video"></i> 专家讲解</span>
<span><i class="fas fa-chart-bar"></i> 含工具</span>
</div>
<p class="course-desc">了解期权、<span class="term" onclick="showTermDetail('期货')">期货</span>等衍生品的交易原理和风险管理策略，包含实战案例和计算工具。</p>
<div class="course-tags">
<span class="tag">衍生品</span>
<span class="tag">风险管理</span>
</div>
<button class="btn">开始学习</button>
</div>
</div>
</div>
</div>
<div class="content" id="terms-content" style="display: none;">
<h2 style="color: #2962ff; margin-bottom: 20px;">金融知识库</h2>
<div class="term-list">
<div class="term-item" onclick="showTermDetail('市盈率')">
<h4>市盈率 (P/E Ratio)</h4>
<p>衡量公司股价相对于每股收益的指标</p>
</div>
<div class="term-item" onclick="showTermDetail('杠杆')">
<h4>杠杆 (Leverage)</h4>
<p>使用借入资本增加投资回报的策略</p>
</div>
<div class="term-item" onclick="showTermDetail('对冲')">
<h4>对冲 (Hedging)</h4>
<p>通过投资降低风险暴露的策略</p>
</div>
<div class="term-item" onclick="showTermDetail('K线')">
<h4>K线 (Candlestick)</h4>
<p>显示证券价格变动的图表形式</p>
</div>
<div class="term-item" onclick="showTermDetail('财务比率')">
<h4>财务比率 (Financial Ratios)</h4>
<p>用于评估公司财务状况的量化指标</p>
</div>
<div class="term-item" onclick="showTermDetail('价值投资')">
<h4>价值投资 (Value Investing)</h4>
<p>寻找被低估证券的投资策略</p>
</div>
</div>
</div>
</div>
<div class="middle-panel">
<div class="simulation-box">
<h2><i class="fas fa-chart-line"></i> 模拟交易沙盘</h2>
<div class="chart-container">
<canvas id="price-chart"></canvas>
</div>
<div class="trading-panel">
<h3>交易面板</h3>
<div class="trading-controls">
<select>
<option>AAPL - 苹果公司</option>
<option>MSFT - 微软公司</option>
<option>TSLA - 特斯拉公司</option>
<option>GOOGL - 谷歌公司</option>
</select>
<input type="number" placeholder="数量" value="10">
<input type="text" placeholder="价格" value="172.45">
<select>
<option>市价单</option>
<option>限价单</option>
<option>止损单</option>
</select>
</div>
<div class="action-buttons">
<button class="action-btn buy-btn">买入</button>
<button class="action-btn sell-btn">卖出</button>
</div>
</div>
<div style="margin-top: 20px; font-size: 0.9rem; color: #5a7a9c;">
<p><i class="fas fa-info-circle"></i> 提示：在模拟交易中，点击专业术语将弹出解释窗口</p>
</div>
</div>
<div class="progress-box">
<h2><i class="fas fa-tasks"></i> 学习进度</h2>
<div class="progress-item">
<div class="progress-title">
<span>基础模块：金融概念</span>
<span>70%</span>
</div>
<div class="progress-bar">
<div class="progress-fill basic-progress"></div>
</div>
</div>
<div class="progress-item">
<div class="progress-title">
<span>进阶模块：衍生品专题</span>
<span>15%</span>
</div>
<div class="progress-bar">
<div class="progress-fill advanced-progress"></div>
</div>
</div>
<div class="nft-card">
<div class="nft-header">
<div class="nft-title">价值投资认证</div>
<div class="nft-badge">
<i class="fas fa-award"></i>
</div>
</div>
<p style="margin-bottom: 15px; line-height: 1.6;">完成7章节学习并通过考核即可获得专属NFT证书</p>
<div style="display: flex; gap: 10px;">
<button class="btn" style="background: #5d4037;">查看证书</button>
<button class="btn" style="background: #1a3a6c;">分享至LinkedIn</button>
</div>
</div>
</div>
</div>
<div class="right-panel">
<div class="knowledge-panel">
<div class="knowledge-header">
<h3><i class="fas fa-lightbulb"></i> 知识图谱</h3>
</div>
<div class="term-list">
<div class="term-item" onclick="showTermDetail('股票')">
<h4>股票</h4>
<p>公司所有权的份额</p>
</div>
<div class="term-item" onclick="showTermDetail('债券')">
<h4>债券</h4>
<p>固定收益证券</p>
</div>
<div class="term-item" onclick="showTermDetail('基金')">
<h4>基金</h4>
<p>集合投资工具</p>
</div>
<div class="term-item" onclick="showTermDetail('复利')">
<h4>复利</h4>
<p>利滚利的计算方式</p>
</div>
<div class="term-item" onclick="showTermDetail('分散投资')">
<h4>分散投资</h4>
<p>降低风险的投资策略</p>
</div>
<div class="term-item" onclick="showTermDetail('资产配置')">
<h4>资产配置</h4>
<p>投资组合结构设计</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="simulation-investment" class="module-container">
<div class="module-header">
<h1><i class="fas fa-coins"></i> 模拟投资模块</h1>
<p>实战模拟投资环境，提供实时市场数据、交易执行和深度投资分析</p>
</div>
<div class="dashboard">
<div class="left-panel panel">
<div class="tab-bar">
<div class="tab active" data-investment-tab="market">
<i class="fas fa-chart-line"></i> 市场行情
</div>
<div class="tab" data-investment-tab="transactions">
<i class="fas fa-history"></i> 交易记录
</div>
<div class="tab" data-investment-tab="analytics">
<i class="fas fa-chart-pie"></i> 数据分析
</div>
<div class="tab" data-investment-tab="risk">
<i class="fas fa-shield-alt"></i> 风险评估
</div>
</div>
<div class="content">
<div id="market-content" class="investment-content">
<h2 style="color: #2962ff; margin-bottom: 20px;">实时市场行情</h2>
<div class="market-grid">
<div class="market-card">
<button class="info-btn" onclick="showTermDetail('股票')">?</button>
<div class="market-header">
<div class="market-name">苹果公司</div>
<div class="market-code">AAPL</div>
</div>
<div class="market-price">$172.45</div>
<div class="market-change change-up">+1.24%</div>
</div>
<div class="market-card">
<button class="info-btn" onclick="showTermDetail('股票')">?</button>
<div class="market-header">
<div class="market-name">微软公司</div>
<div class="market-code">MSFT</div>
</div>
<div class="market-price">$330.12</div>
<div class="market-change change-up">+0.87%</div>
</div>
<div class="market-card">
<button class="info-btn" onclick="showTermDetail('股票')">?</button>
<div class="market-header">
<div class="market-name">特斯拉</div>
<div class="market-code">TSLA</div>
</div>
<div class="market-price">$265.67</div>
<div class="market-change change-down">-0.53%</div>
</div>
<div class="market-card">
<button class="info-btn" onclick="showTermDetail('ETF')">?</button>
<div class="market-header">
<div class="market-name">标普500 ETF</div>
<div class="market-code">SPY</div>
</div>
<div class="market-price">$453.21</div>
<div class="market-change change-up">+0.68%</div>
</div>
<div class="market-card">
<button class="info-btn" onclick="showTermDetail('REITs')">?</button>
<div class="market-header">
<div class="market-name">房地产信托</div>
<div class="market-code">O</div>
</div>
<div class="market-price">$54.89</div>
<div class="market-change change-down">-0.32%</div>
</div>
<div class="market-card">
<button class="info-btn" onclick="showTermDetail('期货')">?</button>
<div class="market-header">
<div class="market-name">黄金期货</div>
<div class="market-code">GC=F</div>
</div>
<div class="market-price">$1,923.50</div>
<div class="market-change change-up">+0.45%</div>
</div>
</div>
<div class="simulation-box" style="margin-top: 20px;">
<h2><i class="fas fa-exchange-alt"></i> 交易面板</h2>
<div class="trading-panel">
<h3>执行交易</h3>
<div class="trading-controls">
<select>
<option>AAPL - 苹果公司</option>
<option>MSFT - 微软公司</option>
<option>TSLA - 特斯拉公司</option>
<option>GOOGL - 谷歌公司</option>
</select>
<input type="number" placeholder="数量" value="10">
<input type="text" placeholder="价格" value="172.45">
<select>
<option>市价单</option>
<option>限价单</option>
<option>止损单</option>
</select>
</div>
<div class="action-buttons">
<button class="action-btn buy-btn">买入</button>
<button class="action-btn sell-btn">卖出</button>
</div>
</div>
<div style="margin-top: 15px; font-size: 0.9rem; color: #5a7a9c;">
<p><i class="fas fa-info-circle"></i> 提示：点击"?"按钮查看金融术语解释</p>
</div>
</div>
</div>
<div id="transactions-content" class="investment-content" style="display: none;">
<h2 style="color: #2962ff; margin-bottom: 20px;">交易记录</h2>
<table class="transactions-table">
<thead>
<tr>
<th>时间</th>
<th>代码</th>
<th>类型</th>
<th>数量</th>
<th>价格</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr class="buy-row">
<td>2023-06-10 10:23</td>
<td>AAPL</td>
<td>买入</td>
<td>10</td>
<td>$172.45</td>
<td>-$1,724.50</td>
</tr>
<tr class="sell-row">
<td>2023-06-09 14:45</td>
<td>MSFT</td>
<td>卖出</td>
<td>5</td>
<td>$329.80</td>
<td>+$1,649.00</td>
</tr>
<tr class="buy-row">
<td>2023-06-08 11:12</td>
<td>SPY</td>
<td>买入</td>
<td>8</td>
<td>$452.30</td>
<td>-$3,618.40</td>
</tr>
<tr class="buy-row">
<td>2023-06-07 09:35</td>
<td>GOOGL</td>
<td>买入</td>
<td>5</td>
<td>$124.75</td>
<td>-$623.75</td>
</tr>
<tr class="sell-row">
<td>2023-06-06 15:20</td>
<td>TSLA</td>
<td>卖出</td>
<td>15</td>
<td>$264.50</td>
<td>+$3,967.50</td>
</tr>
</tbody>
</table>
<div style="margin-top: 20px;">
<button class="btn">
<i class="fas fa-history"></i> 交易回放功能
</button>
</div>
</div>
<div id="analytics-content" class="investment-content" style="display: none;">
<h2 style="color: #2962ff; margin-bottom: 20px;">投资分析</h2>
<div class="analytics-container">
<div class="analytics-chart">
<h3 style="color: #4a6583; margin-bottom: 15px;">收益时间分布</h3>
<canvas id="profit-chart"></canvas>
</div>
<div class="analytics-chart">
<h3 style="color: #4a6583; margin-bottom: 15px;">资产分布</h3>
<canvas id="asset-chart"></canvas>
</div>
<div class="analytics-chart">
<h3 style="color: #4a6583; margin-bottom: 15px;">风险分析</h3>
<canvas id="risk-chart"></canvas>
</div>
<div class="analytics-chart">
<h3 style="color: #4a6583; margin-bottom: 15px;">市场对比</h3>
<canvas id="comparison-chart"></canvas>
</div>
</div>
</div>
<div id="risk-content" class="investment-content" style="display: none;">
<h2 style="color: #2962ff; margin-bottom: 20px;">风险评估报告</h2>
<div class="risk-meters">
<div class="risk-meter">
<div class="meter-title">整体风险水平</div>
<div class="meter-value">中等</div>
<div class="meter-status status-medium">风险适中</div>
</div>
<div class="risk-meter">
<div class="meter-title">夏普比率</div>
<div class="meter-value">1.25</div>
<div class="meter-status status-low">良好</div>
</div>
<div class="risk-meter">
<div class="meter-title">最大回撤</div>
<div class="meter-value">-8.7%</div>
<div class="meter-status status-medium">可接受</div>
</div>
</div>
<div class="analytics-chart" style="height: 300px;">
<h3 style="color: #4a6583; margin-bottom: 15px;">风险因素分析</h3>
<canvas id="risk-analysis-chart"></canvas>
</div>
<div style="margin-top: 20px; background: #fff8e1; padding: 15px; border-radius: 10px;">
<h3 style="color: #ff6f00; margin-bottom: 10px;">
<i class="fas fa-exclamation-triangle"></i> 风险控制建议
</h3>
<p style="line-height: 1.6;">
1. 当前科技股占比过高(62%)，建议分散到其他行业<br>
2. 考虑增加债券ETF配置以降低波动性<br>
3. 设置止损单保护现有盈利<br>
4. 关注宏观经济指标变化，特别是利率政策
</p>
</div>
</div>
</div>
</div>
<div class="middle-panel">
<div class="simulation-box">
<h2><i class="fas fa-chart-line"></i> 投资组合概览</h2>
<div class="chart-container">
<canvas id="portfolio-chart"></canvas>
</div>
<div style="margin-top: 20px;">
<h3 style="color: #4a6583; margin-bottom: 10px;">资产分布</h3>
<div class="progress-item">
<div class="progress-title">
<span>股票</span>
<span>¥76,500 (76.5%)</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 76.5%; background: #2962ff;"></div>
</div>
</div>
<div class="progress-item">
<div class="progress-title">
<span>基金</span>
<span>¥15,200 (15.2%)</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 15.2%; background: #00c853;"></div>
</div>
</div>
<div class="progress-item">
<div class="progress-title">
<span>债券</span>
<span>¥5,800 (5.8%)</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 5.8%; background: #ffab00;"></div>
</div>
</div>
<div class="progress-item">
<div class="progress-title">
<span>现金</span>
<span>¥2,500 (2.5%)</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 2.5%; background: #78909c;"></div>
</div>
</div>
</div>
</div>
<div class="simulation-box">
<h2><i class="fas fa-bell"></i> 风险预警</h2>
<div style="background: #ffebee; padding: 15px; border-radius: 10px; margin-top: 15px;">
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
<i class="fas fa-exclamation-circle" style="color: #f44336; font-size: 1.5rem;"></i>
<h3 style="color: #f44336;">科技股集中风险</h3>
</div>
<p style="line-height: 1.6;">
您的投资组合中科技行业占比达到62%，远高于市场平均的35%。近期科技行业波动性增加，建议分散投资以降低风险。
</p>
</div>
<div style="background: #fff8e1; padding: 15px; border-radius: 10px; margin-top: 15px;">
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
<i class="fas fa-exclamation-triangle" style="color: #ff9800; font-size: 1.5rem;"></i>
<h3 style="color: #ff9800;">杠杆使用警告</h3>
</div>
<p style="line-height: 1.6;">
您当前使用2倍杠杆，账户保证金比例接近警戒线。市场波动可能导致强制平仓风险。
</p>
</div>
</div>
</div>
<div class="right-panel">
<div class="knowledge-panel">
<div class="knowledge-header">
<h3><i class="fas fa-history"></i> 最近交易</h3>
</div>
<div class="term-list">
<div class="term-item">
<h4>买入 AAPL</h4>
<p>10股 @ $172.45</p>
<p style="color: #00c853; font-size: 0.8rem;">2023-06-10 10:23</p>
</div>
<div class="term-item">
<h4>卖出 MSFT</h4>
<p>5股 @ $329.80</p>
<p style="color: #ff3d00; font-size: 0.8rem;">2023-06-09 14:45</p>
</div>
<div class="term-item">
<h4>买入 SPY</h4>
<p>8股 @ $452.30</p>
<p style="color: #00c853; font-size: 0.8rem;">2023-06-08 11:12</p>
</div>
<div class="term-item">
<h4>买入 GOOGL</h4>
<p>5股 @ $124.75</p>
<p style="color: #00c853; font-size: 0.8rem;">2023-06-07 09:35</p>
</div>
</div>
</div>
<div class="knowledge-panel">
<div class="knowledge-header">
<h3><i class="fas fa-trophy"></i> 投资表现</h3>
</div>
<div style="padding: 15px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
<div>
<div style="color: #4a6583; font-size: 0.9rem;">总收益</div>
<div style="font-size: 1.5rem; font-weight: 700; color: #00c853;">+¥8,745.60</div>
</div>
<div>
<div style="color: #4a6583; font-size: 0.9rem;">收益率</div>
<div style="font-size: 1.5rem; font-weight: 700; color: #00c853;">+8.75%</div>
</div>
</div>
<div style="display: flex; justify-content: space-between;">
<div>
<div style="color: #4a6583; font-size: 0.9rem;">跑赢大盘</div>
<div style="font-size: 1.2rem; font-weight: 700; color: #00c853;">+3.25%</div>
</div>
<div>
<div style="color: #4a6583; font-size: 0.9rem;">波动率</div>
<div style="font-size: 1.2rem; font-weight: 700; color: #ff9800;">14.2%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overlay" id="overlay" onclick="hideTermDetail()"></div>
<div class="term-detail" id="term-detail">
<div class="term-header">
<h2 id="term-title">市盈率</h2>
<button class="close-btn" onclick="hideTermDetail()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="term-content">
<div class="section">
<h3>定义</h3>
<p>市盈率（Price-to-Earning Ratio，简称P/E）是衡量股票价格相对于公司每股收益（EPS）的比率。</p>
<p>计算公式：<strong>市盈率 = 当前股价 / 每股收益</strong></p>
</div>
<div class="section">
<h3>通俗解释</h3>
<p>市盈率可以理解为投资者愿意为公司每1元收益支付的价格。例如：</p>
<div class="example">
<p>如果一家公司的股价是100元，每股收益是5元，那么市盈率就是20（100 ÷ 5 = 20）。</p>
<p>这意味着投资者愿意为该公司每1元的收益支付20元的价格。</p>
</div>
<p>市盈率越高，通常表示投资者对公司未来增长预期越高，但也可能意味着股票被高估。</p>
</div>
<div class="section">
<h3>实战案例</h3>
<p>以苹果公司（AAPL）为例：</p>
<div class="example">
<p>当前股价：$172.45</p>
<p>过去12个月每股收益：$6.11</p>
<p>市盈率 = 172.45 ÷ 6.11 ≈ <strong>28.2</strong></p>
<p>科技行业平均市盈率：22.1</p>
</div>
<p>苹果的市盈率略高于行业平均，表明投资者对其增长前景持乐观态度。</p>
</div>
</div>
<button class="btn">添加到学习笔记</button>
</div>
<script>
document.querySelectorAll('.nav-tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.nav-tab').forEach(t => {
t.classList.remove('active');
});
tab.classList.add('active');
const tabId = tab.getAttribute('data-tab');
document.querySelectorAll('.module-container').forEach(module => {
module.classList.remove('active');
});
document.getElementById(tabId).classList.add('active');
});
});
document.querySelectorAll('.tab-bar .tab[data-investment-tab]').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab-bar .tab').forEach(t => {
t.classList.remove('active');
});
tab.classList.add('active');
const tabId = tab.getAttribute('data-investment-tab');
document.querySelectorAll('.investment-content').forEach(content => {
content.style.display = 'none';
});
document.getElementById(`${tabId}-content`).style.display = 'block';
});
});
function showTab(tab) {
document.getElementById('courses-content').style.display = tab === 'courses' ? 'block' : 'none';
document.getElementById('terms-content').style.display = tab === 'terms' ? 'block' : 'none';
document.getElementById('tab-courses').classList.toggle('active', tab === 'courses');
document.getElementById('tab-terms').classList.toggle('active', tab === 'terms');
}
function showTermDetail(term) {
document.getElementById('term-title').textContent = term;
document.getElementById('term-detail').style.display = 'block';
document.getElementById('overlay').style.display = 'block';
}
function hideTermDetail() {
document.getElementById('term-detail').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
}
function initChart() {
const ctx = document.getElementById('price-chart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00'],
datasets: [{
label: 'AAPL 价格',
data: [170.2, 170.8, 171.5, 172.1, 172.8, 172.3, 172.0, 172.5],
borderColor: '#2962ff',
backgroundColor: 'rgba(41, 98, 255, 0.1)',
borderWidth: 2,
pointRadius: 0,
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
color: 'rgba(0, 0, 0, 0.05)'
}
}
}
}
});
const portfolioCtx = document.getElementById('portfolio-chart').getContext('2d');
new Chart(portfolioCtx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [{
label: '投资组合',
data: [92000, 94000, 96500, 101200, 105500, 108700],
borderColor: '#2962ff',
backgroundColor: 'rgba(41, 98, 255, 0.1)',
borderWidth: 3,
pointRadius: 4,
tension: 0.2,
fill: true
}, {
label: '标普500',
data: [93000, 94500, 95500, 97500, 100500, 103000],
borderColor: '#78909c',
borderWidth: 2,
pointRadius: 0,
tension: 0.2,
borderDash: [5, 5]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
}
},
scales: {
y: {
beginAtZero: false,
grid: {
color: 'rgba(0, 0, 0, 0.05)'
}
},
x: {
grid: {
display: false
}
}
}
}
});
const profitCtx = document.getElementById('profit-chart').getContext('2d');
new Chart(profitCtx, {
type: 'bar',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [{
label: '月收益',
data: [3.2, 2.7, 3.8, 4.9, 4.2, 3.1],
backgroundColor: '#2962ff',
borderRadius: 5
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
}
}
}
});
const assetCtx = document.getElementById('asset-chart').getContext('2d');
new Chart(assetCtx, {
type: 'doughnut',
data: {
labels: ['科技股', '消费股', '金融股', '工业股', '医疗股', '其他'],
datasets: [{
data: [45, 15, 12, 10, 8, 10],
backgroundColor: [
'#2962ff', '#00c853', '#ffab00', '#ff3d00', '#9c27b0', '#78909c'
],
borderWidth: 0
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'right'
}
}
}
});
}
window.onload = function() {
initChart();
};
</script>
</body>
</html>