170 lines
6.9 KiB
HTML
170 lines
6.9 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>
|
|||
|
|
<!-- 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>
|