ui: 顶栏透明、设置两列、下单与持仓监控优化
导航栏与页面背景一致；系统设置双列布局；下单三行表单与开仓状态反馈；持仓卡片增加平仓与止盈止损挂单展示。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
+6
-6
@@ -25,7 +25,7 @@
|
||||
--bg-page:#050508;
|
||||
--bg-grid:rgba(76,194,255,.045);
|
||||
--border-header:rgba(76,194,255,.12);
|
||||
--header-bg:rgba(8,10,18,.75);
|
||||
--header-bg:transparent;
|
||||
--text-primary:#e8eaf6;
|
||||
--text-title:#ffffff;
|
||||
--text-muted:#7a82a0;
|
||||
@@ -79,8 +79,8 @@
|
||||
[data-theme="light"]{
|
||||
--bg-page:#e8eef8;
|
||||
--bg-grid:rgba(37,99,235,.07);
|
||||
--border-header:rgba(37,99,235,.15);
|
||||
--header-bg:rgba(255,255,255,.82);
|
||||
--border-header:rgba(37,99,235,.12);
|
||||
--header-bg:transparent;
|
||||
--text-primary:#1a2233;
|
||||
--text-title:#0a1628;
|
||||
--text-muted:#5c6578;
|
||||
@@ -162,13 +162,13 @@
|
||||
.site-nav{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap}
|
||||
.site-nav a{
|
||||
padding:.55rem 1.15rem;border-radius:8px;
|
||||
border:1px solid var(--nav-border);
|
||||
background:var(--nav-bg);
|
||||
border:1px solid transparent;
|
||||
background:transparent;
|
||||
color:var(--text-primary);
|
||||
text-decoration:none;font-size:.88rem;
|
||||
transition:.2s;white-space:nowrap;
|
||||
}
|
||||
.site-nav a:hover{background:var(--nav-hover);border-color:var(--accent);color:var(--text-title)}
|
||||
.site-nav a:hover{background:var(--nav-hover);border-color:var(--nav-border);color:var(--text-title)}
|
||||
.site-nav a.active{background:var(--nav-active);border-color:var(--nav-active-border);color:#fff}
|
||||
.user-bar{position:absolute;top:1rem;right:1.5rem;font-size:.8rem;color:var(--text-muted);white-space:nowrap}
|
||||
.user-bar a{color:var(--danger);text-decoration:none;margin-left:.5rem}
|
||||
|
||||
+19
-5
@@ -1,15 +1,26 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}系统设置 - 国内期货监控系统{% endblock %}
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.settings-page{max-width:1100px;margin:0 auto}
|
||||
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
|
||||
.settings-grid .card{margin-bottom:0;height:100%}
|
||||
.settings-grid .settings-span-2{grid-column:1/-1}
|
||||
@media(max-width:900px){.settings-grid{grid-template-columns:1fr}}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="settings-page">
|
||||
<div class="settings-grid">
|
||||
|
||||
<div class="card">
|
||||
<h2>导航显示</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post">
|
||||
<input type="hidden" name="action" value="nav">
|
||||
<p class="hint" style="margin-bottom:.75rem">关闭后顶栏隐藏对应入口，直接访问 URL 也会跳转回持仓监控。</p>
|
||||
<div class="form-grid" style="max-width:640px;grid-template-columns:1fr 1fr">
|
||||
<div class="check-row">
|
||||
{% for key, label in nav_toggles.items() %}
|
||||
<label class="field" style="display:flex;align-items:center;gap:.5rem;cursor:pointer">
|
||||
<label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;white-space:nowrap">
|
||||
<input type="checkbox" name="nav_{{ key }}" {% if nav_items[key] %}checked{% endif %}>
|
||||
<span>{{ label }}</span>
|
||||
</label>
|
||||
@@ -23,7 +34,7 @@
|
||||
<h2>交易模式</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post">
|
||||
<input type="hidden" name="action" value="trading">
|
||||
<div class="form-grid" style="max-width:640px">
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label>交易通道</label>
|
||||
<select name="trading_mode">
|
||||
@@ -84,9 +95,9 @@
|
||||
<p class="hint" style="margin-top:.75rem">在企业微信群中添加机器人后，将 Webhook 地址粘贴到上方保存即可。</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card settings-span-2">
|
||||
<h2>修改密码</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post" style="max-width:400px">
|
||||
<form action="{{ url_for('settings') }}" method="post" style="max-width:480px">
|
||||
<input type="hidden" name="action" value="password">
|
||||
<div style="margin-bottom:.75rem">
|
||||
<label class="text-label" style="font-size:.85rem;display:block;margin-bottom:.35rem">当前账号</label>
|
||||
@@ -107,4 +118,7 @@
|
||||
<button type="submit" class="btn-primary">修改密码</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
+38
-36
@@ -32,50 +32,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trade-form-grid">
|
||||
<div class="symbol-wrap trade-field span-2">
|
||||
<label class="text-label">品种</label>
|
||||
<input type="text" id="trade-symbol" class="symbol-input" placeholder="主力合约 rb2610" autocomplete="off">
|
||||
<div class="symbol-dropdown"></div>
|
||||
<div class="symbol-selected" id="sym-selected"></div>
|
||||
</div>
|
||||
<div class="trade-field">
|
||||
<label class="text-label">方向</label>
|
||||
<select id="trade-direction">
|
||||
<option value="long">做多</option>
|
||||
<option value="short">做空</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="trade-field" id="field-lots">
|
||||
<label class="text-label">手数</label>
|
||||
<input type="number" id="trade-lots" min="1" step="1" value="1" {% if sizing_mode == 'risk' %}hidden{% endif %}>
|
||||
<input type="text" id="trade-lots-calc" class="lots-auto" readonly placeholder="填写止损后自动计算" {% if sizing_mode != 'risk' %}hidden{% endif %}>
|
||||
</div>
|
||||
|
||||
<div class="trade-field span-2">
|
||||
<label class="text-label">入场价</label>
|
||||
<div class="price-type-tabs">
|
||||
<button type="button" class="price-tab active" data-type="limit">限价</button>
|
||||
<button type="button" class="price-tab" data-type="market">市价</button>
|
||||
<div class="trade-form-rows">
|
||||
<div class="trade-form-line line-3">
|
||||
<div class="symbol-wrap trade-field">
|
||||
<label class="text-label">品种</label>
|
||||
<input type="text" id="trade-symbol" class="symbol-input" placeholder="主力合约 rb2610" autocomplete="off">
|
||||
<div class="symbol-dropdown"></div>
|
||||
<div class="symbol-selected" id="sym-selected"></div>
|
||||
</div>
|
||||
<div class="trade-field">
|
||||
<label class="text-label">方向</label>
|
||||
<select id="trade-direction">
|
||||
<option value="long">做多</option>
|
||||
<option value="short">做空</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="trade-field" id="field-lots">
|
||||
<label class="text-label">手数</label>
|
||||
<input type="number" id="trade-lots" min="1" step="1" value="1" {% if sizing_mode == 'risk' %}hidden{% endif %}>
|
||||
<input type="text" id="trade-lots-calc" class="lots-auto" readonly placeholder="填写止损后自动计算" {% if sizing_mode != 'risk' %}hidden{% endif %}>
|
||||
</div>
|
||||
<input type="number" id="trade-price" step="any" placeholder="限价">
|
||||
<p class="hint market-hint" id="market-hint" hidden>市价将按最新行情价报单</p>
|
||||
</div>
|
||||
|
||||
<div class="trade-field">
|
||||
<label class="text-label">止损</label>
|
||||
<input type="number" id="trade-sl" step="any">
|
||||
</div>
|
||||
<div class="trade-field">
|
||||
<label class="text-label">止盈</label>
|
||||
<input type="number" id="trade-tp" step="any">
|
||||
<div class="trade-form-line line-3">
|
||||
<div class="trade-field">
|
||||
<label class="text-label">入场价</label>
|
||||
<div class="price-type-tabs">
|
||||
<button type="button" class="price-tab active" data-type="limit">限价</button>
|
||||
<button type="button" class="price-tab" data-type="market">市价</button>
|
||||
</div>
|
||||
<input type="number" id="trade-price" step="any" placeholder="限价">
|
||||
<p class="hint market-hint" id="market-hint" hidden>市价将按最新行情价报单</p>
|
||||
</div>
|
||||
<div class="trade-field">
|
||||
<label class="text-label">止盈</label>
|
||||
<input type="number" id="trade-tp" step="any">
|
||||
</div>
|
||||
<div class="trade-field">
|
||||
<label class="text-label">止损</label>
|
||||
<input type="number" id="trade-sl" step="any">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trade-action-row">
|
||||
<button type="button" class="btn-primary btn-open" id="btn-open">开仓</button>
|
||||
<button type="button" class="btn-secondary" id="btn-close-pos">平仓</button>
|
||||
<p class="trade-order-msg" id="order-msg" hidden></p>
|
||||
</div>
|
||||
|
||||
<div class="trade-footer" id="trade-footer">
|
||||
|
||||
Reference in New Issue
Block a user