总览北京时间改为更易读的纯文本样式,日期格式与拉取时间一致。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+32
-16
@@ -101,32 +101,48 @@ body.page-login .main {
|
|||||||
.overview-bj-clock {
|
.overview-bj-clock {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: baseline;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 10px;
|
||||||
padding: 6px 12px;
|
padding: 0;
|
||||||
border-radius: 999px;
|
border: 0;
|
||||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
background: transparent;
|
||||||
background: rgba(8, 14, 24, 0.72);
|
box-shadow: none;
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
||||||
}
|
}
|
||||||
.overview-bj-label {
|
.overview-bj-label {
|
||||||
font-size: 0.72rem;
|
font-size: 0.82rem;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.02em;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
color: var(--accent);
|
color: var(--muted);
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.overview-bj-label::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 1px;
|
||||||
|
height: 12px;
|
||||||
|
margin-left: 10px;
|
||||||
|
vertical-align: -1px;
|
||||||
|
background: rgba(56, 189, 248, 0.35);
|
||||||
}
|
}
|
||||||
.overview-bj-time {
|
.overview-bj-time {
|
||||||
font-family: var(--font-display);
|
font-family: var(--font);
|
||||||
font-size: 0.95rem;
|
font-size: 1.05rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.02em;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
.page-head { flex-wrap: wrap; }
|
.page-head { flex-wrap: wrap; }
|
||||||
.overview-bj-clock { margin-left: 0; order: 3; width: 100%; justify-content: center; }
|
.overview-bj-clock {
|
||||||
|
margin-left: 0;
|
||||||
|
order: 3;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.muted { color: var(--muted); font-size: 0.9rem; }
|
.muted { color: var(--muted); font-size: 0.9rem; }
|
||||||
.flash {
|
.flash {
|
||||||
|
|||||||
+26
-5
@@ -333,7 +333,7 @@
|
|||||||
|
|
||||||
function formatBeijingNow() {
|
function formatBeijingNow() {
|
||||||
try {
|
try {
|
||||||
return new Intl.DateTimeFormat("zh-CN", {
|
const parts = new Intl.DateTimeFormat("en-CA", {
|
||||||
timeZone: "Asia/Shanghai",
|
timeZone: "Asia/Shanghai",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
month: "2-digit",
|
month: "2-digit",
|
||||||
@@ -342,7 +342,26 @@
|
|||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
second: "2-digit",
|
second: "2-digit",
|
||||||
hour12: false,
|
hour12: false,
|
||||||
}).format(new Date());
|
}).formatToParts(new Date());
|
||||||
|
const get = function (type) {
|
||||||
|
const hit = parts.find(function (p) {
|
||||||
|
return p.type === type;
|
||||||
|
});
|
||||||
|
return hit ? hit.value : "";
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
get("year") +
|
||||||
|
"-" +
|
||||||
|
get("month") +
|
||||||
|
"-" +
|
||||||
|
get("day") +
|
||||||
|
" " +
|
||||||
|
get("hour") +
|
||||||
|
":" +
|
||||||
|
get("minute") +
|
||||||
|
":" +
|
||||||
|
get("second")
|
||||||
|
);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
const d = new Date();
|
const d = new Date();
|
||||||
const utc = d.getTime() + d.getTimezoneOffset() * 60000;
|
const utc = d.getTime() + d.getTimezoneOffset() * 60000;
|
||||||
@@ -352,9 +371,9 @@
|
|||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
bj.getFullYear() +
|
bj.getFullYear() +
|
||||||
"/" +
|
"-" +
|
||||||
p(bj.getMonth() + 1) +
|
p(bj.getMonth() + 1) +
|
||||||
"/" +
|
"-" +
|
||||||
p(bj.getDate()) +
|
p(bj.getDate()) +
|
||||||
" " +
|
" " +
|
||||||
p(bj.getHours()) +
|
p(bj.getHours()) +
|
||||||
@@ -369,7 +388,9 @@
|
|||||||
function tickBeijingClock() {
|
function tickBeijingClock() {
|
||||||
const el = document.getElementById("overview-bj-time");
|
const el = document.getElementById("overview-bj-time");
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
el.textContent = formatBeijingNow();
|
const text = formatBeijingNow();
|
||||||
|
el.textContent = text;
|
||||||
|
el.setAttribute("datetime", text.replace(" ", "T") + "+08:00");
|
||||||
}
|
}
|
||||||
|
|
||||||
function boot() {
|
function boot() {
|
||||||
|
|||||||
@@ -3,9 +3,9 @@
|
|||||||
{% block body %}
|
{% block body %}
|
||||||
<section class="page-head">
|
<section class="page-head">
|
||||||
<h1>期权持仓总览</h1>
|
<h1>期权持仓总览</h1>
|
||||||
<div class="overview-bj-clock" id="overview-bj-clock" title="北京时间">
|
<div class="overview-bj-clock" id="overview-bj-clock" title="Asia/Shanghai">
|
||||||
<span class="overview-bj-label">北京时间</span>
|
<span class="overview-bj-label">北京时间</span>
|
||||||
<span class="overview-bj-time" id="overview-bj-time">--:--:--</span>
|
<time class="overview-bj-time" id="overview-bj-time" datetime="">--</time>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn" id="btn-refresh">刷新</button>
|
<button type="button" class="btn" id="btn-refresh">刷新</button>
|
||||||
</section>
|
</section>
|
||||||
@@ -13,6 +13,6 @@
|
|||||||
<div id="overview-grid"></div>
|
<div id="overview-grid"></div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
<script src="{{ url_for('static', filename='hub.js') }}?v=2"></script>
|
<script src="{{ url_for('static', filename='hub.js') }}?v=3"></script>
|
||||||
<script>HubOverview.boot();</script>
|
<script>HubOverview.boot();</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user