stock_fundamentals/src/templates/hsgt_monitor.html

170 lines
6.9 KiB
HTML
Raw Normal View History

2025-05-14 16:52:24 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>沪深港通资金流向监控</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<!-- 自定义样式 -->
<style>
.card {
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-header {
background-color: #f8f9fa;
font-weight: bold;
}
.money-inflow {
color: #d9534f;
font-weight: bold;
}
.money-outflow {
color: #5cb85c;
font-weight: bold;
}
.chart-container {
height: 350px;
margin-bottom: 20px;
}
.stat-card {
text-align: center;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.stat-value {
font-size: 24px;
font-weight: bold;
}
.stat-title {
font-size: 14px;
color: #666;
}
.refresh-btn {
margin-left: 10px;
}
.update-time {
font-size: 12px;
color: #666;
margin-top: 5px;
}
.flow-direction {
font-size: 13px;
color: #666;
font-style: italic;
margin-top: -5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container-fluid py-4">
<div class="row mb-4">
<div class="col-12">
<h2 class="text-center">沪深港通资金流向监控
<button id="refreshBtn" class="btn btn-sm btn-outline-primary refresh-btn">
<i class="bi bi-arrow-clockwise"></i> 刷新数据
</button>
</h2>
<p class="text-center update-time" id="updateTime"></p>
</div>
</div>
<!-- 北向资金卡片 -->
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
北向资金流向 (单位:亿元)
</div>
<div class="card-body">
<p class="flow-direction text-center">提示:该走势图为陆股通指数成分股大单资金流向,非北向资金,但具备一定参考价值。</p>
<div class="row mb-3">
<div class="col-md-4">
<div class="stat-card" id="northTotal">
<div class="stat-value">--</div>
<div class="stat-title">北向资金净流入(亿元)</div>
</div>
</div>
<div class="col-md-4">
<div class="stat-card" id="northSH">
<div class="stat-value">--</div>
<div class="stat-title">沪股通净流入(亿元)</div>
</div>
</div>
<div class="col-md-4">
<div class="stat-card" id="northSZ">
<div class="stat-value">--</div>
<div class="stat-title">深股通净流入(亿元)</div>
</div>
</div>
</div>
<div id="northChart" class="chart-container"></div>
</div>
</div>
</div>
<!-- 南向资金卡片 -->
<div class="col-md-6">
<div class="card">
<div class="card-header">
南向资金流向 (单位:亿元)
</div>
<div class="card-body">
<p class="flow-direction text-center">从内地流入港股的资金</p>
<div class="row mb-3">
<div class="col-md-4">
<div class="stat-card" id="southTotal">
<div class="stat-value">--</div>
<div class="stat-title">南向资金净流入(亿元)</div>
</div>
</div>
<div class="col-md-4">
<div class="stat-card" id="southHKSH">
<div class="stat-value">--</div>
<div class="stat-title">沪市港股通净流入(亿元)</div>
</div>
</div>
<div class="col-md-4">
<div class="stat-card" id="southHKSZ">
<div class="stat-value">--</div>
<div class="stat-title">深市港股通净流入(亿元)</div>
</div>
</div>
</div>
<div id="southChart" class="chart-container"></div>
</div>
</div>
</div>
</div>
<!-- 说明信息 -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header">
数据说明
</div>
<div class="card-body">
<ul>
<li>数据来源:同花顺数据,每分钟更新</li>
<li><strong>北向资金</strong>:是指从<strong>香港</strong>流入<strong>A股</strong>的资金,通过沪股通和深股通进入</li>
<li><strong>南向资金</strong>:是指从<strong>内地</strong>流入<strong>港股</strong>的资金,通过沪市港股通和深市港股通进入</li>
<li>净流入为正表示买入大于卖出,资金流入(<span class="money-inflow">红色</span>);净流入为负表示卖出大于买入,资金流出(<span class="money-outflow">绿色</span></li>
<li>交易时间北向9:30-11:30, 13:00-15:00南向9:30-12:00, 13:00-16:00</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript 库 -->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.bundle.min.js"></script>
<script src="../static/js/echarts.min.js"></script>
<script src="../static/js/hsgt_monitor.js"></script>
</body>
</html>