113 lines
4.4 KiB
HTML
Executable File
113 lines
4.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>资金流向概览 - 主买资金卡片</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--background: oklch(0.99 0 0);
|
|
--foreground: oklch(0.15 0 0);
|
|
--card: oklch(1 0 0);
|
|
--muted: oklch(0.96 0 0);
|
|
--muted-foreground: oklch(0.5 0 0);
|
|
--border: oklch(0.9 0 0);
|
|
--red-500: oklch(0.6 0.25 25);
|
|
--green-500: oklch(0.6 0.18 145);
|
|
--orange-500: oklch(0.7 0.18 55);
|
|
}
|
|
.dark {
|
|
--background: oklch(0.15 0 0);
|
|
--foreground: oklch(0.95 0 0);
|
|
--card: oklch(0.2 0 0);
|
|
--muted: oklch(0.25 0 0);
|
|
--muted-foreground: oklch(0.65 0 0);
|
|
--border: oklch(0.3 0 0);
|
|
}
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
}
|
|
.card { background: var(--card); border: 1px solid var(--border); }
|
|
.muted-bg { background: var(--muted); }
|
|
.muted-text { color: var(--muted-foreground); }
|
|
.text-red { color: var(--red-500); }
|
|
.text-green { color: var(--green-500); }
|
|
.text-orange { color: var(--orange-500); }
|
|
.highlight-card {
|
|
background: linear-gradient(135deg, oklch(0.97 0.05 55), oklch(0.95 0.03 25));
|
|
border: 1px solid oklch(0.85 0.08 55);
|
|
}
|
|
.dark .highlight-card {
|
|
background: linear-gradient(135deg, oklch(0.25 0.05 55), oklch(0.22 0.03 25));
|
|
border: 1px solid oklch(0.35 0.08 55);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen p-4 md:p-8">
|
|
<div class="max-w-5xl mx-auto">
|
|
<h1 class="text-2xl md:text-3xl font-bold mb-2">资金流向概览（近30日）</h1>
|
|
<p class="muted-text text-sm mb-6">展示主力资金、主买资金（大单流入近似）、散户资金等关键指标</p>
|
|
|
|
<!-- 4列卡片布局 -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-6">
|
|
<!-- 主力总净流入 -->
|
|
<div class="card rounded-lg p-4 text-center">
|
|
<p class="text-xs muted-text mb-1">主力总净流入</p>
|
|
<p class="text-lg font-bold text-red">+1.23亿</p>
|
|
</div>
|
|
<!-- 主买资金（大单流入近似）- 高亮卡片 -->
|
|
<div class="highlight-card rounded-lg p-4 text-center relative">
|
|
<div class="absolute top-1 right-1 text-[10px] text-orange bg-orange-500/10 px-1.5 py-0.5 rounded">≈主买</div>
|
|
<p class="text-xs muted-text mb-1">大单流入资金</p>
|
|
<p class="text-lg font-bold text-red">+8567.89万</p>
|
|
</div>
|
|
<!-- 散户总净流入 -->
|
|
<div class="card rounded-lg p-4 text-center">
|
|
<p class="text-xs muted-text mb-1">散户总净流入</p>
|
|
<p class="text-lg font-bold text-green">-1.23亿</p>
|
|
</div>
|
|
<!-- 日均主力流入 -->
|
|
<div class="card rounded-lg p-4 text-center">
|
|
<p class="text-xs muted-text mb-1">日均主力流入</p>
|
|
<p class="text-lg font-bold text-red">+410.00万</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主买资金说明 -->
|
|
<div class="card rounded-lg p-4 mb-6">
|
|
<h2 class="text-base font-semibold mb-2">关于「主买资金」说明</h2>
|
|
<p class="text-sm muted-text leading-relaxed">
|
|
由于数据源（MX API）不直接提供主买资金，这里使用<span class="text-orange font-medium">大单流入资金</span>作为近似值。
|
|
大单流入代表机构主动买入的资金量，与主买资金高度相关，可作为机构做多意愿的参考指标。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 主力 vs 主买对比图（示意） -->
|
|
<div class="card rounded-lg p-4">
|
|
<h2 class="text-base font-semibold mb-3">主力净流入 vs 大单流入（主买近似）</h2>
|
|
<div class="space-y-2">
|
|
<div>
|
|
<div class="flex justify-between text-xs mb-1">
|
|
<span>主力净流入</span><span class="text-red">+1.23亿</span>
|
|
</div>
|
|
<div class="h-3 muted-bg rounded-full overflow-hidden">
|
|
<div class="h-full bg-red-500/60" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-xs mb-1">
|
|
<span>大单流入（主买近似）</span><span class="text-red">+8567.89万</span>
|
|
</div>
|
|
<div class="h-3 muted-bg rounded-full overflow-hidden">
|
|
<div class="h-full bg-orange-500/60" style="width: 52%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|