282 lines
12 KiB
HTML
282 lines
12 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>{% block title %}期货量化{% endblock %}</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg: #f8fafc; --surface: #fff; --fg: #1e293b; --sub: #64748b;
|
|
--border: #e2e8f0; --accent: #3b82f6; --accent-light: #eff6ff;
|
|
--th-bg: #f1f5f9; --th-fg: #475569;
|
|
--danger: #ef4444; --danger-bg: #fef2f2; --danger-fg: #dc2626;
|
|
--success: #10b981; --success-bg: #ecfdf5; --success-fg: #059669;
|
|
--warn: #f59e0b; --warn-bg: #fffbeb; --warn-fg: #d97706;
|
|
--na: #94a3b8;
|
|
--sidebar-w: 220px; --header-h: 56px;
|
|
}
|
|
[data-theme="dark"] {
|
|
--bg: #0f172a; --surface: #1e293b; --fg: #e2e8f0; --sub: #94a3b8;
|
|
--border: #334155; --accent: #60a5fa; --accent-light: #1e3a5f;
|
|
--th-bg: #1e293b; --th-fg: #cbd5e1;
|
|
--danger: #f87171; --danger-bg: #3b1515; --danger-fg: #fca5a5;
|
|
--success: #34d399; --success-bg: #0a1f17; --success-fg: #6ee7b7;
|
|
--warn: #fbbf24; --warn-bg: #2d2110; --warn-fg: #fcd34d;
|
|
--na: #64748b;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
|
|
color: var(--fg); background: var(--bg);
|
|
display: flex; min-height: 100vh;
|
|
}
|
|
|
|
/* ── Sidebar ── */
|
|
.sidebar {
|
|
width: var(--sidebar-w); min-width: var(--sidebar-w);
|
|
background: var(--surface); border-right: 1px solid var(--border);
|
|
display: flex; flex-direction: column; position: fixed;
|
|
top: 0; left: 0; bottom: 0; z-index: 50;
|
|
padding: 0;
|
|
}
|
|
.sidebar-logo {
|
|
height: var(--header-h); display: flex; align-items: center;
|
|
padding: 0 20px; font-size: 1rem; font-weight: 700;
|
|
letter-spacing: 0.02em; border-bottom: 1px solid var(--border);
|
|
}
|
|
.sidebar-nav { flex: 1; padding: 12px 0; }
|
|
.sidebar-nav a {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 10px 20px; color: var(--sub); text-decoration: none;
|
|
font-size: 0.9rem; transition: background .12s, color .12s;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
.sidebar-nav a:hover { background: var(--accent-light); color: var(--fg); }
|
|
.sidebar-nav a.active {
|
|
color: var(--accent); background: var(--accent-light);
|
|
border-left-color: var(--accent); font-weight: 600;
|
|
}
|
|
.sidebar-nav .icon { font-size: 1.1rem; width: 22px; text-align: center; }
|
|
.nav-group .nav-arrow { font-size: 0.65rem; margin-left: auto; transition: transform .2s; color: var(--sub); }
|
|
.nav-group.open .nav-arrow { transform: rotate(-180deg); }
|
|
.nav-group .nav-children { display: none; }
|
|
.nav-group.open .nav-children { display: block; }
|
|
.nav-children a { padding-left: 48px !important; font-size: 0.84rem !important; }
|
|
.sidebar-footer {
|
|
padding: 16px 20px; border-top: 1px solid var(--border);
|
|
}
|
|
.theme-btn {
|
|
width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px;
|
|
background: var(--surface); color: var(--fg); cursor: pointer;
|
|
font-size: 0.82rem; transition: background .12s;
|
|
}
|
|
.theme-btn:hover { background: var(--th-bg); }
|
|
|
|
/* ── Main ── */
|
|
.main {
|
|
margin-left: var(--sidebar-w); flex: 1;
|
|
display: flex; flex-direction: column; min-height: 100vh;
|
|
}
|
|
.main-header {
|
|
height: var(--header-h); min-height: var(--header-h);
|
|
padding: 0 28px; display: flex; align-items: center;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--surface);
|
|
}
|
|
.main-header h1 { font-size: 1.15rem; font-weight: 600; }
|
|
.breadcrumb { color: var(--sub); font-size: 0.82rem; margin-left: 12px; }
|
|
.breadcrumb a { color: var(--sub); text-decoration: none; }
|
|
.breadcrumb a:hover { color: var(--accent); }
|
|
|
|
.main-content { flex: 1; padding: 24px 28px; }
|
|
|
|
/* ── Components ── */
|
|
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
|
|
.stat-card {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 10px; padding: 18px 20px;
|
|
}
|
|
.stat-card .label { font-size: 0.78rem; color: var(--sub); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
|
|
.stat-card .value { font-size: 1.5rem; font-weight: 700; }
|
|
.stat-card .trend { font-size: 0.8rem; margin-top: 4px; }
|
|
.trend-up { color: var(--success-fg); }
|
|
.trend-down { color: var(--danger-fg); }
|
|
|
|
.section-title {
|
|
font-size: 0.85rem; font-weight: 600; color: var(--sub);
|
|
text-transform: uppercase; letter-spacing: 0.04em;
|
|
margin-bottom: 12px; padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
/* ── Table ── */
|
|
.table-wrap {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 10px; overflow: hidden; margin-bottom: 24px;
|
|
}
|
|
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
|
|
th {
|
|
background: var(--th-bg); color: var(--th-fg); font-weight: 600;
|
|
padding: 10px 14px; border-bottom: 2px solid var(--border);
|
|
text-align: center; white-space: nowrap; font-size: 0.8rem;
|
|
text-transform: uppercase; letter-spacing: 0.03em;
|
|
}
|
|
td { padding: 9px 14px; border-bottom: 1px solid var(--border); text-align: center; }
|
|
tr:last-child td { border-bottom: none; }
|
|
tr:hover td { background: var(--accent-light); }
|
|
td:first-child { font-weight: 500; }
|
|
tr.active td { background: #dbeafe !important; }
|
|
[data-theme="dark"] tr.active td { background: #1e3a5f !important; }
|
|
.na { color: var(--na); }
|
|
|
|
/* ── Badges ── */
|
|
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
|
|
.badge-up { background: var(--success-bg); color: var(--success-fg); }
|
|
.badge-down { background: var(--danger-bg); color: var(--danger-fg); }
|
|
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
|
|
|
|
/* ── Forms ── */
|
|
.form-card {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 10px; padding: 24px; max-width: 520px;
|
|
}
|
|
.form-group { margin-bottom: 16px; }
|
|
.form-group label {
|
|
display: block; font-size: 0.8rem; font-weight: 600;
|
|
color: var(--sub); margin-bottom: 5px;
|
|
text-transform: uppercase; letter-spacing: 0.03em;
|
|
}
|
|
.form-group input, .form-group select {
|
|
width: 100%; padding: 9px 12px; border: 1px solid var(--border);
|
|
border-radius: 6px; font-size: 0.9rem;
|
|
background: var(--bg); color: var(--fg);
|
|
transition: border-color .15s;
|
|
}
|
|
.form-group input:focus, .form-group select:focus {
|
|
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
|
|
}
|
|
.btn {
|
|
padding: 9px 22px; border: none; border-radius: 6px;
|
|
font-size: 0.88rem; font-weight: 600; cursor: pointer;
|
|
transition: background .12s;
|
|
}
|
|
.btn-primary { background: var(--accent); color: #fff; }
|
|
.btn-primary:hover { opacity: 0.9; }
|
|
|
|
/* ── Drawer ── */
|
|
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99; display: none; }
|
|
.drawer-overlay.show { display: block; }
|
|
.drawer { position: fixed; top: 0; right: 0; width: 360px; height: 100%; background: var(--surface); border-left: 1px solid var(--border); z-index: 100; padding: 28px 24px; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; box-shadow: -4px 0 24px rgba(0,0,0,.12); }
|
|
.drawer.show { transform: translateX(0); }
|
|
.drawer h3 { font-size: 1rem; margin-bottom: 4px; }
|
|
.drawer .date-label { color: var(--sub); font-size: 0.82rem; margin-bottom: 18px; }
|
|
.drawer .calc-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 16px; }
|
|
.drawer .calc-table td { padding: 5px 10px; border: 1px solid var(--border); text-align: center; }
|
|
.drawer .calc-table tr:first-child td { background: var(--th-bg); font-weight: 600; color: var(--th-fg); }
|
|
.drawer .result { font-size: 0.85rem; line-height: 2; color: var(--fg); }
|
|
.drawer .result b { font-size: 1.15rem; }
|
|
.drawer .close-btn { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--sub); line-height: 1; }
|
|
.drawer .close-btn:hover { color: var(--fg); }
|
|
.amp-cell { cursor: pointer; color: var(--accent); font-weight: 600; }
|
|
.amp-cell:hover { text-decoration: underline; }
|
|
|
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
|
|
cursor: pointer;
|
|
}
|
|
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
|
|
filter: none;
|
|
}
|
|
[data-theme="dark"] input[type="date"] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<aside class="sidebar">
|
|
<div class="sidebar-logo">📊 期货量化</div>
|
|
<nav class="sidebar-nav">
|
|
<a href="/contracts/" class="{% if active_nav == 'contracts' %}active{% endif %}">
|
|
<span class="icon">📈</span> 行情数据
|
|
</a>
|
|
<a href="/positions/" class="{% if active_nav == 'positions' %}active{% endif %}">
|
|
<span class="icon">📐</span> 对冲管理
|
|
</a>
|
|
<a href="/trades/" class="{% if active_nav == 'trades' %}active{% endif %}">
|
|
<span class="icon">📝</span> 交易记录
|
|
</a>
|
|
<a href="/admin/" class="{% if active_nav == 'admin' %}active{% endif %}">
|
|
<span class="icon">⚙️</span> 系统管理
|
|
</a>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<div style="font-size:0.78rem;color:var(--sub);margin-bottom:8px;">
|
|
👤 {{ request.state.user.username if request.state.user else '—' }}
|
|
</div>
|
|
<a href="/auth/logout" style="font-size:0.78rem;color:var(--sub);text-decoration:none;">退出登录</a>
|
|
<button class="theme-btn" style="margin-top:8px;" id="themeToggle">🌙 暗色模式</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="main">
|
|
<header class="main-header">
|
|
<h1>{% block heading %}概览{% endblock %}</h1>
|
|
<span class="breadcrumb">{% block breadcrumb %}{% endblock %}</span>
|
|
</header>
|
|
<div class="main-content">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>
|
|
<div class="drawer" id="drawer">
|
|
<button class="close-btn" onclick="closeDrawer()">×</button>
|
|
<h3 id="drawer-title"></h3>
|
|
<p class="date-label" id="drawer-date"></p>
|
|
<table class="calc-table" id="drawer-table"></table>
|
|
<div class="result" id="drawer-result"></div>
|
|
</div>
|
|
|
|
<script>
|
|
var themeBtn = document.getElementById('themeToggle');
|
|
themeBtn.addEventListener('click', toggleTheme);
|
|
function setTheme(dark) {
|
|
if (dark) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
document.documentElement.style.colorScheme = 'dark';
|
|
themeBtn.textContent = '☀️ 亮色模式';
|
|
} else {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
document.documentElement.style.colorScheme = 'light';
|
|
themeBtn.textContent = '🌙 暗色模式';
|
|
}
|
|
try { localStorage.setItem('ft-theme', dark ? 'dark' : 'light'); } catch(e) {}
|
|
}
|
|
function toggleTheme() {
|
|
setTheme(document.documentElement.getAttribute('data-theme') !== 'dark');
|
|
}
|
|
function toggleNavGroup(e, id) {
|
|
e.preventDefault();
|
|
document.getElementById(id).classList.toggle('open');
|
|
}
|
|
(function() {
|
|
try {
|
|
var s = localStorage.getItem('ft-theme');
|
|
if (s === 'dark' || (!s && matchMedia('(prefers-color-scheme: dark)').matches)) setTheme(true);
|
|
} catch(e) {}
|
|
})();
|
|
|
|
var activeRow = null;
|
|
function closeDrawer() {
|
|
document.getElementById('overlay').classList.remove('show');
|
|
document.getElementById('drawer').classList.remove('show');
|
|
if (activeRow) { activeRow.classList.remove('active'); activeRow = null; }
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|