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/login.html
+99 -32
View File
@@ -7,96 +7,160 @@
<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
<style>
:root,[data-theme="dark"]{
--bg-page:#07070d;
--card-bg:rgba(14,14,22,.92);
--card-border:rgba(76,194,255,.18);
--text-primary:#eaeaea;
--text-label:#b4b4e8;
--bg-page:#050508;
--bg-grid:rgba(76,194,255,.045);
--card-bg:rgba(10,12,22,.88);
--card-border:rgba(76,194,255,.25);
--card-border-hover:rgba(76,194,255,.45);
--card-glow:rgba(76,194,255,.12);
--ambient-glow:rgba(76,194,255,.14);
--ambient-glow-2:rgba(123,66,255,.1);
--scanline:rgba(76,194,255,.03);
--text-primary:#e8eaf6;
--text-label:#a8b4ff;
--text-muted:#7a82a0;
--accent:#4cc2ff;
--accent-2:#7b42ff;
--input-bg:#1a1a29;
--input-border:#2e2e45;
--loss-bg:#331e24;
--loss:#ff6666;
--shadow:0 12px 40px rgba(0,0,0,.4);
--toggle-bg:#161625;
--toggle-border:#2a2a40;
--accent-2:#9d6bff;
--input-bg:rgba(12,14,26,.95);
--input-border:rgba(76,194,255,.2);
--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);
--loss-bg:rgba(255,107,122,.12);
--loss:#ff6b7a;
--shadow:0 16px 48px rgba(0,0,0,.5),0 0 24px var(--card-glow);
--toggle-bg:rgba(14,16,28,.9);
--toggle-border:rgba(76,194,255,.2);
--nav-hover-glow:rgba(76,194,255,.15);
}
[data-theme="light"]{
--bg-page:#eef2f7;
--card-bg:rgba(255,255,255,.96);
--bg-page:#e8eef8;
--bg-grid:rgba(37,99,235,.07);
--card-bg:rgba(255,255,255,.94);
--card-border:rgba(37,99,235,.22);
--card-border-hover:rgba(37,99,235,.4);
--card-glow:rgba(37,99,235,.1);
--ambient-glow:rgba(37,99,235,.12);
--ambient-glow-2:rgba(124,58,237,.08);
--scanline:rgba(37,99,235,.04);
--text-primary:#1a2233;
--text-label:#1d4ed8;
--text-muted:#5c6578;
--accent:#2563eb;
--accent-2:#6366f1;
--accent-2:#7c3aed;
--input-bg:#ffffff;
--input-border:#b8c5d6;
--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);
--loss-bg:#fee2e2;
--loss:#dc2626;
--shadow:0 12px 32px rgba(15,23,42,.1);
--shadow:0 16px 40px rgba(15,23,42,.12),0 0 20px var(--card-glow);
--toggle-bg:#ffffff;
--toggle-border:#c5d0dc;
--nav-hover-glow:rgba(37,99,235,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
background:var(--bg-page);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
display:flex;align-items:center;justify-content:center;
min-height:100vh;color:var(--text-primary);
padding:1rem;
}
.login-wrap{width:100%;max-width:400px}
.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:8px;
padding:.4rem .75rem;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;
}
.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;border-radius:16px;
padding:2.5rem 2rem 2rem;border-radius:14px;
border:1px solid var(--card-border);
box-shadow:var(--shadow);
position:relative;overflow:hidden;
backdrop-filter:blur(12px);
transition:border-color .25s,box-shadow .25s;
}
.login-box:hover{
border-color:var(--card-border-hover);
}
.login-box::after{
content:"";position:absolute;top:0;left:15%;right:15%;height:1px;
content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
opacity:.6;
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:2rem;text-align:center;font-size:1.5rem;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
margin-bottom:.35rem;text-align:center;font-size:1.45rem;font-weight:700;
letter-spacing:.04em;
background:linear-gradient(135deg,var(--text-primary),var(--accent),var(--accent-2));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 20px var(--focus-glow));
}
.login-sub{
text-align:center;font-size:.68rem;letter-spacing:.2em;
color:var(--text-muted);margin-bottom:2rem;
}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;margin-bottom:.5rem;font-size:.9rem;color:var(--text-label)}
.form-group label{
display:block;margin-bottom:.5rem;font-size:.85rem;
color:var(--text-label);letter-spacing:.03em;
}
.form-group input{
width:100%;padding:.85rem 1rem;border-radius:10px;
border:1px solid var(--input-border);
background:var(--input-bg);color:var(--text-primary);
font-size:.95rem;outline:none;
transition:border-color .2s,box-shadow .2s;
}
.form-group input:focus{border-color:var(--accent)}
button{
.form-group input:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px var(--focus-ring),0 0 16px var(--focus-glow);
}
button[type="submit"]{
width:100%;padding:.9rem;border-radius:10px;border:none;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
color:#fff;font-size:1rem;font-weight:500;cursor:pointer;
background:linear-gradient(135deg,var(--accent),var(--accent-2));
color:#fff;font-size:1rem;font-weight:600;cursor:pointer;
letter-spacing:.06em;
box-shadow:0 4px 24px var(--btn-glow);
transition:transform .15s,box-shadow .2s;
}
button[type="submit"]:hover{
transform:translateY(-1px);
box-shadow:0 6px 28px var(--btn-glow-strong);
}
button:hover{opacity:.9}
.flash{
padding:.8rem;margin-bottom:1rem;
background:var(--loss-bg);color:var(--loss);
border-radius:8px;text-align:center;font-size:.85rem;
border:1px solid rgba(255,107,122,.25);
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='css/tech.css') }}">
</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="login-wrap">
<div class="theme-row">
<button type="button" id="theme-toggle" class="theme-toggle" aria-label="切换主题">
@@ -105,7 +169,10 @@
</button>
</div>
<div class="login-box">
<span class="login-corner tl"></span>
<span class="login-corner br"></span>
<h2>期货监控系统</h2>
<p class="login-sub">FUTURES MONITOR</p>
{% with messages = get_flashed_messages() %}
{% if messages %}<div class="flash">{{ messages[0] }}</div>{% endif %}
{% endwith %}
@@ -118,7 +185,7 @@
<label>密码</label>
<input type="password" name="password" required placeholder="请输入密码">
</div>
<button type="submit">登录</button>
<button type="submit">登录系统</button>
</form>
</div>
</div>