From 2b383b84ce8ae7fa897f143f5f17ec6b716329a2 Mon Sep 17 00:00:00 2001 From: dekun Date: Mon, 15 Jun 2026 16:15:35 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=8D=A1=E7=89=87=E5=9B=9B?= =?UTF-8?q?=E8=A7=92=E8=A3=85=E9=A5=B0=EF=BC=8C=E4=B8=BB=E9=A2=98=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E6=94=B9=E4=B8=BA=E6=B7=B1=E8=89=B2/=E6=B5=85?= =?UTF-8?q?=E8=89=B2=E5=88=86=E6=AE=B5=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Cursor --- static/css/tech.css | 16 ++++--------- static/js/theme.js | 29 +++++++++++++++--------- templates/base.html | 53 ++++++++++++++++---------------------------- templates/login.html | 38 ++++++++++++++----------------- templates/plans.html | 1 - 5 files changed, 59 insertions(+), 78 deletions(-) diff --git a/static/css/tech.css b/static/css/tech.css index 76262f5..d32c145 100644 --- a/static/css/tech.css +++ b/static/css/tech.css @@ -100,12 +100,11 @@ box-shadow:0 0 20px var(--nav-active-glow),inset 0 1px 0 rgba(255,255,255,.15); } -.theme-toggle{ - border-radius:999px; - transition:box-shadow .2s,border-color .2s; +.theme-switch-btn:hover{ + color:var(--text-primary); } -.theme-toggle:hover{ - box-shadow:0 0 16px var(--nav-hover-glow); +.theme-switch-btn.active{ + box-shadow:0 0 12px var(--btn-glow); } .card{ @@ -120,13 +119,6 @@ .card::after{ animation:tech-shine 5s ease-in-out infinite; } -.card-corner{ - width:16px;height:16px;opacity:.55; - transition:opacity .25s,box-shadow .25s; -} -.card:hover .card-corner{opacity:.9;box-shadow:0 0 8px var(--accent)} -.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 h2{letter-spacing:.03em} .card h2:before{ box-shadow:0 0 12px var(--accent),0 0 4px var(--accent-2); diff --git a/static/js/theme.js b/static/js/theme.js index 3113231..04b2ac3 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -1,16 +1,24 @@ (function () { var KEY = 'qihuo-theme'; + function updateButtons(theme) { + document.querySelectorAll('[data-theme-pick]').forEach(function (btn) { + var pick = btn.getAttribute('data-theme-pick'); + var on = pick === theme; + btn.classList.toggle('active', on); + btn.setAttribute('aria-pressed', on ? 'true' : 'false'); + }); + } + function apply(theme) { + if (theme !== 'light' && theme !== 'dark') { + theme = 'dark'; + } document.documentElement.setAttribute('data-theme', theme); try { localStorage.setItem(KEY, theme); } catch (e) { /* ignore */ } - var btn = document.getElementById('theme-toggle'); - if (btn) { - btn.setAttribute('data-active', theme); - btn.setAttribute('aria-label', theme === 'light' ? '切换到深色' : '切换到浅色'); - } + updateButtons(theme); } var saved = null; @@ -26,11 +34,12 @@ } document.addEventListener('DOMContentLoaded', function () { - var btn = document.getElementById('theme-toggle'); - if (!btn) return; - btn.addEventListener('click', function () { - var cur = document.documentElement.getAttribute('data-theme') || 'dark'; - apply(cur === 'dark' ? 'light' : 'dark'); + var cur = document.documentElement.getAttribute('data-theme') || 'dark'; + updateButtons(cur); + document.querySelectorAll('[data-theme-pick]').forEach(function (btn) { + btn.addEventListener('click', function () { + apply(btn.getAttribute('data-theme-pick')); + }); }); }); })(); diff --git a/templates/base.html b/templates/base.html index 9a0f1f2..9ea9173 100644 --- a/templates/base.html +++ b/templates/base.html @@ -128,19 +128,22 @@ .site-header{text-align:center;padding:1.5rem 1rem 1.25rem;border-bottom:1px solid var(--border-header);position:relative} .site-title{font-size:1.75rem;font-weight:700;color:var(--text-title);margin-bottom:1.65rem;line-height:1.3} .header-tools{position:absolute;top:1rem;left:1.5rem;display:flex;gap:.5rem;align-items:center} - .theme-toggle{ - display:flex;align-items:center;gap:.35rem; - padding:.4rem .75rem;border-radius:8px; - border:1px solid var(--toggle-border); - background:var(--toggle-bg); - color:var(--text-primary); - font-size:.78rem;cursor:pointer; - transition:.2s; + .theme-switch{ + display:inline-flex;align-items:center; + border-radius:999px;border:1px solid var(--toggle-border); + background:var(--toggle-bg);padding:3px;gap:2px; + } + .theme-switch-btn{ + padding:.38rem .75rem;border:none;border-radius:999px; + background:transparent;color:var(--text-muted); + font-size:.75rem;cursor:pointer;transition:.2s; + white-space:nowrap; + } + .theme-switch-btn:hover{color:var(--text-primary)} + .theme-switch-btn.active{ + background:linear-gradient(135deg,var(--accent),var(--accent-2)); + color:#fff;box-shadow:0 0 12px var(--btn-glow); } - .theme-toggle:hover{border-color:var(--accent);color:var(--accent)} - .theme-toggle .icon-light,.theme-toggle .icon-dark{display:none} - [data-theme="dark"] .theme-toggle .icon-light{display:inline} - [data-theme="light"] .theme-toggle .icon-dark{display:inline} .site-nav{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap} .site-nav a{ padding:.55rem 1.15rem;border-radius:8px; @@ -183,14 +186,6 @@ background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent); opacity:.55;pointer-events:none; } - .card-corner{ - position:absolute;width:18px;height:18px;pointer-events:none;z-index:0; - 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{ font-size:1.15rem;margin-bottom:1rem;color:var(--text-label); @@ -432,10 +427,10 @@
- +
+ + +
{{ session.username or '用户' }}退出

国内期货 · 交易监控 + 复盘FUTURES MONITOR SYSTEM

@@ -456,16 +451,6 @@
- {% block extra_js %}{% endblock %} diff --git a/templates/login.html b/templates/login.html index 15856b7..8f3d4f7 100644 --- a/templates/login.html +++ b/templates/login.html @@ -72,17 +72,21 @@ } .login-wrap{width:100%;max-width:400px;position:relative;z-index:1} .theme-row{display:flex;justify-content:flex-end;margin-bottom:.75rem} - .theme-toggle{ - padding:.4rem .75rem;border-radius:999px; + .theme-switch{ + display:inline-flex;border-radius:999px; border:1px solid var(--toggle-border); - background:var(--toggle-bg);color:var(--text-primary); - font-size:.78rem;cursor:pointer; - transition:box-shadow .2s; + background:var(--toggle-bg);padding:3px;gap:2px; + } + .theme-switch-btn{ + padding:.38rem .75rem;border:none;border-radius:999px; + background:transparent;color:var(--text-muted); + font-size:.75rem;cursor:pointer;transition:.2s; + } + .theme-switch-btn:hover{color:var(--text-primary)} + .theme-switch-btn.active{ + background:linear-gradient(135deg,var(--accent),var(--accent-2)); + color:#fff;box-shadow:0 0 12px var(--btn-glow); } - .theme-toggle:hover{box-shadow:0 0 16px var(--nav-hover-glow)} - .theme-toggle .icon-light,.theme-toggle .icon-dark{display:none} - [data-theme="dark"] .theme-toggle .icon-light{display:inline} - [data-theme="light"] .theme-toggle .icon-dark{display:inline} .login-box{ background:var(--card-bg); padding:2.5rem 2rem 2rem;border-radius:14px; @@ -100,12 +104,6 @@ background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent); opacity:.75; } - .login-corner{ - position:absolute;width:16px;height:16px; - border-color:var(--accent);opacity:.5;pointer-events:none; - } - .login-corner.tl{top:12px;left:12px;border-top:2px solid;border-left:2px solid} - .login-corner.br{bottom:12px;right:12px;border-bottom:2px solid;border-right:2px solid} .login-box h2{ margin-bottom:.35rem;text-align:center;font-size:1.45rem;font-weight:700; letter-spacing:.04em; @@ -163,14 +161,12 @@