mirrors2/auv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Sakurasan
2026-07-05 21:29:17 +08:00
commit 013ebdaffe
150 changed files with 15614 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
outputs/资金流向/主买资金卡片.html
Executable
+112
View File
@@ -0,0 +1,112 @@
<!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>