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:15:35 +08:00
parent a12da042cc
commit 2b383b84ce
5 changed files with 59 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/tech.css
+4 -12
View File
@@ -100,12 +100,11 @@
box-shadow:0 0 20px var(--nav-active-glow),inset 0 1px 0 rgba(255,255,255,.15); box-shadow:0 0 20px var(--nav-active-glow),inset 0 1px 0 rgba(255,255,255,.15);
} }
.theme-toggle{ .theme-switch-btn:hover{
border-radius:999px; color:var(--text-primary);
transition:box-shadow .2s,border-color .2s;
} }
.theme-toggle:hover{ .theme-switch-btn.active{
box-shadow:0 0 16px var(--nav-hover-glow); box-shadow:0 0 12px var(--btn-glow);
} }
.card{ .card{
@@ -120,13 +119,6 @@
.card::after{ .card::after{
animation:tech-shine 5s ease-in-out infinite; 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{letter-spacing:.03em}
.card h2:before{ .card h2:before{
box-shadow:0 0 12px var(--accent),0 0 4px var(--accent-2); box-shadow:0 0 12px var(--accent),0 0 4px var(--accent-2);
static/js/theme.js
+19 -10
View File
@@ -1,16 +1,24 @@
(function () { (function () {
var KEY = 'qihuo-theme'; 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) { function apply(theme) {
if (theme !== 'light' && theme !== 'dark') {
theme = 'dark';
}
document.documentElement.setAttribute('data-theme', theme); document.documentElement.setAttribute('data-theme', theme);
try { try {
localStorage.setItem(KEY, theme); localStorage.setItem(KEY, theme);
} catch (e) { /* ignore */ } } catch (e) { /* ignore */ }
var btn = document.getElementById('theme-toggle'); updateButtons(theme);
if (btn) {
btn.setAttribute('data-active', theme);
btn.setAttribute('aria-label', theme === 'light' ? '切换到深色' : '切换到浅色');
}
} }
var saved = null; var saved = null;
@@ -26,11 +34,12 @@
} }
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementById('theme-toggle'); var cur = document.documentElement.getAttribute('data-theme') || 'dark';
if (!btn) return; updateButtons(cur);
btn.addEventListener('click', function () { document.querySelectorAll('[data-theme-pick]').forEach(function (btn) {
var cur = document.documentElement.getAttribute('data-theme') || 'dark'; btn.addEventListener('click', function () {
apply(cur === 'dark' ? 'light' : 'dark'); apply(btn.getAttribute('data-theme-pick'));
});
}); });
}); });
})(); })();
templates/base.html
+19 -34
View File
@@ -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-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} .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} .header-tools{position:absolute;top:1rem;left:1.5rem;display:flex;gap:.5rem;align-items:center}
.theme-toggle{ .theme-switch{
display:flex;align-items:center;gap:.35rem; display:inline-flex;align-items:center;
padding:.4rem .75rem;border-radius:8px; border-radius:999px;border:1px solid var(--toggle-border);
border:1px solid var(--toggle-border); background:var(--toggle-bg);padding:3px;gap:2px;
background:var(--toggle-bg); }
color:var(--text-primary); .theme-switch-btn{
font-size:.78rem;cursor:pointer; padding:.38rem .75rem;border:none;border-radius:999px;
transition:.2s; 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{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap}
.site-nav a{ .site-nav a{
padding:.55rem 1.15rem;border-radius:8px; padding:.55rem 1.15rem;border-radius:8px;
@@ -183,14 +186,6 @@
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent); background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
opacity:.55;pointer-events:none; 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 > *{position:relative;z-index:1}
.card h2{ .card h2{
font-size:1.15rem;margin-bottom:1rem;color:var(--text-label); font-size:1.15rem;margin-bottom:1rem;color:var(--text-label);
@@ -432,10 +427,10 @@
<div class="page-wrap"> <div class="page-wrap">
<header class="site-header"> <header class="site-header">
<div class="header-tools"> <div class="header-tools">
<button type="button" id="theme-toggle" class="theme-toggle" data-active="dark" aria-label="切换主题"> <div class="theme-switch" role="group" aria-label="主题模式">
<span class="icon-light">浅色</span> <button type="button" class="theme-switch-btn" data-theme-pick="dark">深色</button>
<span class="icon-dark">深色</span> <button type="button" class="theme-switch-btn" data-theme-pick="light">浅色</button>
</button> </div>
</div> </div>
<div class="user-bar">{{ session.username or '用户' }}<a href="{{ url_for('logout') }}">退出</a></div> <div class="user-bar">{{ session.username or '用户' }}<a href="{{ url_for('logout') }}">退出</a></div>
<h1 class="site-title">国内期货 · 交易监控 + 复盘<span class="site-title-sub">FUTURES MONITOR SYSTEM</span></h1> <h1 class="site-title">国内期货 · 交易监控 + 复盘<span class="site-title-sub">FUTURES MONITOR SYSTEM</span></h1>
@@ -456,16 +451,6 @@
</main> </main>
</div> </div>
<script src="{{ url_for('static', filename='js/symbol.js') }}"></script> <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 %} {% block extra_js %}{% endblock %}
</body> </body>
</html> </html>
templates/login.html
+17 -21
View File
@@ -72,17 +72,21 @@
} }
.login-wrap{width:100%;max-width:400px;position:relative;z-index:1} .login-wrap{width:100%;max-width:400px;position:relative;z-index:1}
.theme-row{display:flex;justify-content:flex-end;margin-bottom:.75rem} .theme-row{display:flex;justify-content:flex-end;margin-bottom:.75rem}
.theme-toggle{ .theme-switch{
padding:.4rem .75rem;border-radius:999px; display:inline-flex;border-radius:999px;
border:1px solid var(--toggle-border); border:1px solid var(--toggle-border);
background:var(--toggle-bg);color:var(--text-primary); background:var(--toggle-bg);padding:3px;gap:2px;
font-size:.78rem;cursor:pointer; }
transition:box-shadow .2s; .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{ .login-box{
background:var(--card-bg); background:var(--card-bg);
padding:2.5rem 2rem 2rem;border-radius:14px; padding:2.5rem 2rem 2rem;border-radius:14px;
@@ -100,12 +104,6 @@
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent); background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
opacity:.75; 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{ .login-box h2{
margin-bottom:.35rem;text-align:center;font-size:1.45rem;font-weight:700; margin-bottom:.35rem;text-align:center;font-size:1.45rem;font-weight:700;
letter-spacing:.04em; letter-spacing:.04em;
@@ -163,14 +161,12 @@
</div> </div>
<div class="login-wrap"> <div class="login-wrap">
<div class="theme-row"> <div class="theme-row">
<button type="button" id="theme-toggle" class="theme-toggle" aria-label="切换主题"> <div class="theme-switch" role="group" aria-label="主题模式">
<span class="icon-light">浅色</span> <button type="button" class="theme-switch-btn" data-theme-pick="dark">深色</button>
<span class="icon-dark">深色</span> <button type="button" class="theme-switch-btn" data-theme-pick="light">浅色</button>
</button> </div>
</div> </div>
<div class="login-box"> <div class="login-box">
<span class="login-corner tl"></span>
<span class="login-corner br"></span>
<h2>期货监控系统</h2> <h2>期货监控系统</h2>
<p class="login-sub">FUTURES MONITOR</p> <p class="login-sub">FUTURES MONITOR</p>
{% with messages = get_flashed_messages() %} {% with messages = get_flashed_messages() %}
templates/plans.html
-1
View File
@@ -3,7 +3,6 @@
{% block content %} {% block content %}
<div class="split-grid"> <div class="split-grid">
<div class="card"> <div class="card">
<span class="card-corner tl"></span><span class="card-corner br"></span>
<h2>今日计划 <span class="text-muted" style="font-size:.8rem;font-weight:normal">今日 {{ today }}</span></h2> <h2>今日计划 <span class="text-muted" style="font-size:.8rem;font-weight:normal">今日 {{ today }}</span></h2>
<div class="card-body"> <div class="card-body">
<p class="hint" style="margin-bottom:.75rem">开盘前制定，当日有效；请先选择<strong>主力合约</strong>，下方为进行中计划。</p> <p class="hint" style="margin-bottom:.75rem">开盘前制定，当日有效；请先选择<strong>主力合约</strong>，下方为进行中计划。</p>