dekun/qihuo
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

整体界面科技感增强：动态背景、霓虹导航与卡片光效

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-15 16:07:55 +08:00
parent b77f30b3ff
commit a12da042cc
3 changed files with 408 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+97 -55
View File
@@ -7,67 +7,94 @@
<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
<style>
:root,[data-theme="dark"]{
--bg-page:#07070d;
--bg-grid:rgba(76,194,255,.035);
--border-header:#1a1a28;
--text-primary:#eaeaea;
--bg-page:#050508;
--bg-grid:rgba(76,194,255,.045);
--border-header:rgba(76,194,255,.12);
--header-bg:rgba(8,10,18,.75);
--text-primary:#e8eaf6;
--text-title:#ffffff;
--text-muted:#8a8a9e;
--text-label:#b4b4e8;
--text-muted:#7a82a0;
--text-label:#a8b4ff;
--accent:#4cc2ff;
--accent-2:#7b42ff;
--card-bg:rgba(14,14,22,.88);
--card-border:rgba(76,194,255,.18);
--card-glow:rgba(76,194,255,.07);
--card-inner:#161625;
--input-bg:#1a1a29;
--input-border:#2e2e45;
--nav-bg:#161625;
--nav-border:#2a2a40;
--nav-hover:#1e2533;
--nav-active:#2d5aa8;
--nav-active-border:#3d6ec4;
--list-item-bg:rgba(22,22,37,.75);
--table-border:#242435;
--accent-2:#9d6bff;
--ambient-glow:rgba(76,194,255,.14);
--ambient-glow-2:rgba(123,66,255,.1);
--scanline:rgba(76,194,255,.03);
--title-glow:rgba(76,194,255,.35);
--card-bg:rgba(10,12,22,.82);
--card-border:rgba(76,194,255,.22);
--card-border-hover:rgba(76,194,255,.45);
--card-glow:rgba(76,194,255,.12);
--card-inner:rgba(16,20,36,.9);
--input-bg:rgba(12,14,26,.95);
--input-border:rgba(76,194,255,.18);
--nav-bg:rgba(14,16,28,.9);
--nav-border:rgba(76,194,255,.15);
--nav-hover:rgba(30,40,68,.85);
--nav-hover-glow:rgba(76,194,255,.15);
--nav-active:#2563eb;
--nav-active-border:transparent;
--nav-active-glow:rgba(76,194,255,.45);
--focus-ring:rgba(76,194,255,.25);
--focus-glow:rgba(76,194,255,.2);
--btn-glow:rgba(76,194,255,.35);
--btn-glow-strong:rgba(123,66,255,.4);
--row-hover:rgba(76,194,255,.06);
--list-item-bg:rgba(14,18,32,.8);
--table-border:rgba(76,194,255,.1);
--profit:#4cd97f;
--profit-bg:#1e332f;
--loss:#ff6666;
--loss-bg:#331e24;
--dir-bg:#1e2533;
--planned-bg:#29241e;
--profit-bg:rgba(76,217,127,.12);
--loss:#ff6b7a;
--loss-bg:rgba(255,107,122,.12);
--dir-bg:rgba(30,45,80,.6);
--planned-bg:rgba(234,193,71,.12);
--planned-text:#eac147;
--expired-bg:#2a2a35;
--expired-text:#999;
--flash-bg:#1e2533;
--expired-bg:rgba(40,44,60,.8);
--expired-text:#8a8a9e;
--flash-bg:rgba(30,45,80,.7);
--flash-text:#4cc2ff;
--modal-mask:rgba(0,0,0,.72);
--danger:#ff6666;
--shadow-card:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
--calc-bg:#151520;
--toggle-bg:#161625;
--toggle-border:#2a2a40;
--modal-mask:rgba(2,4,12,.82);
--danger:#ff6b7a;
--shadow-card:0 8px 32px rgba(0,0,0,.45),0 0 1px rgba(76,194,255,.3),inset 0 1px 0 rgba(255,255,255,.04);
--shadow-card-hover:0 16px 48px rgba(0,0,0,.5),0 0 24px var(--card-glow);
--calc-bg:rgba(20,24,42,.9);
--toggle-bg:rgba(14,16,28,.9);
--toggle-border:rgba(76,194,255,.2);
}
[data-theme="light"]{
--bg-page:#eef2f7;
--bg-grid:rgba(37,99,235,.05);
--border-header:#d1dae6;
--bg-page:#e8eef8;
--bg-grid:rgba(37,99,235,.07);
--border-header:rgba(37,99,235,.15);
--header-bg:rgba(255,255,255,.82);
--text-primary:#1a2233;
--text-title:#0f172a;
--text-title:#0a1628;
--text-muted:#5c6578;
--text-label:#1d4ed8;
--accent:#2563eb;
--accent-2:#6366f1;
--card-bg:rgba(255,255,255,.94);
--card-border:rgba(37,99,235,.22);
--card-glow:rgba(37,99,235,.06);
--card-inner:#f1f5f9;
--accent-2:#7c3aed;
--ambient-glow:rgba(37,99,235,.12);
--ambient-glow-2:rgba(124,58,237,.08);
--scanline:rgba(37,99,235,.04);
--title-glow:rgba(37,99,235,.2);
--card-bg:rgba(255,255,255,.92);
--card-border:rgba(37,99,235,.2);
--card-border-hover:rgba(37,99,235,.4);
--card-glow:rgba(37,99,235,.1);
--card-inner:#f4f7fc;
--input-bg:#ffffff;
--input-border:#b8c5d6;
--nav-bg:#ffffff;
--nav-border:#c5d0dc;
--nav-hover:#eef2f7;
--nav-bg:rgba(255,255,255,.95);
--nav-border:rgba(37,99,235,.18);
--nav-hover:#eef4ff;
--nav-hover-glow:rgba(37,99,235,.12);
--nav-active:#2563eb;
--nav-active-border:#2563eb;
--nav-active-border:transparent;
--nav-active-glow:rgba(37,99,235,.35);
--focus-ring:rgba(37,99,235,.2);
--focus-glow:rgba(37,99,235,.15);
--btn-glow:rgba(37,99,235,.25);
--btn-glow-strong:rgba(37,99,235,.35);
--row-hover:rgba(37,99,235,.05);
--list-item-bg:#f1f5f9;
--table-border:#e2e8f0;
--profit:#15803d;
@@ -83,20 +110,16 @@
--flash-text:#1d4ed8;
--modal-mask:rgba(15,23,42,.45);
--danger:#dc2626;
--shadow-card:0 8px 28px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.95);
--shadow-card:0 8px 28px rgba(15,23,42,.08),0 0 1px rgba(37,99,235,.15),inset 0 1px 0 rgba(255,255,255,.95);
--shadow-card-hover:0 16px 40px rgba(15,23,42,.12),0 0 20px var(--card-glow);
--calc-bg:#eef2ff;
--toggle-bg:#ffffff;
--toggle-border:#c5d0dc;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
background:var(--bg-page);
background-image:
radial-gradient(ellipse 80% 50% at 50% -20%,var(--card-glow),transparent),
linear-gradient(var(--bg-grid) 1px,transparent 1px),
linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
background-size:100% 100%,28px 28px,28px 28px;
color:var(--text-primary);
min-height:100vh;
transition:background .25s,color .25s;
@@ -165,6 +188,8 @@
border-color:var(--accent);opacity:.35;
}
.card-corner.tl{top:10px;left:10px;border-top:2px solid;border-left:2px solid}
.card-corner.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid}
.card-corner.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid}
.card-corner.br{bottom:10px;right:10px;border-bottom:2px solid;border-right:2px solid}
.card > *{position:relative;z-index:1}
.card h2{
@@ -394,9 +419,16 @@
.site-nav a{padding:.45rem .75rem;font-size:.82rem}
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='css/tech.css') }}">
{% block extra_css %}{% endblock %}
</head>
<body>
<div class="tech-bg" aria-hidden="true">
<div class="tech-grid"></div>
<div class="tech-glow"></div>
<div class="tech-glow-2"></div>
<div class="tech-scanline"></div>
</div>
<div class="page-wrap">
<header class="site-header">
<div class="header-tools">
@@ -406,7 +438,7 @@
</button>
</div>
<div class="user-bar">{{ session.username or '用户' }}<a href="{{ url_for('logout') }}">退出</a></div>
<h1 class="site-title">国内期货 | 交易监控 + 复盘一体化</h1>
<h1 class="site-title">国内期货 · 交易监控 + 复盘<span class="site-title-sub">FUTURES MONITOR SYSTEM</span></h1>
<nav class="site-nav">
<a href="{{ url_for('plans') }}" class="{% if request.endpoint == 'plans' %}active{% endif %}">开单计划</a>
<a href="{{ url_for('keys') }}" class="{% if request.endpoint == 'keys' %}active{% endif %}">关键位监控</a>
@@ -424,6 +456,16 @@
</main>
</div>
<script src="{{ url_for('static', filename='js/symbol.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.card').forEach(function (card) {
if (card.querySelector('.card-corner')) return;
var html = '<span class="card-corner tl"></span><span class="card-corner tr"></span>' +
'<span class="card-corner bl"></span><span class="card-corner br"></span>';
card.insertAdjacentHTML('afterbegin', html);
});
});
</script>
{% block extra_js %}{% endblock %}
</body>
</html>