dekun/qihuo
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Add responsive mobile layout, records cards, and tablet settings fold fix.

Browse Source 
Mobile gets compact trade/records UI with detail modals; static assets are cache-busted and settings cards fold correctly on tablet grid layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-29 16:42:38 +08:00
parent 44bec23296
commit c5262a0a54
14 changed files with 1465 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/responsive.css
+270 -9
View File
@@ -214,42 +214,42 @@ body {
}
@media (max-width: 767px) {
.nav-toggle {
html:not([data-mobile="1"]):not(.layout-phone) .nav-toggle {
display: inline-flex;
}
.header-bar {
html:not([data-mobile="1"]):not(.layout-phone) .header-bar {
grid-template-columns: auto 1fr;
grid-template-areas:
"toggle tools"
"user user";
}
.nav-toggle { grid-area: toggle; }
.header-tools { grid-area: tools; justify-content: flex-end; }
.user-bar {
html:not([data-mobile="1"]):not(.layout-phone) .nav-toggle { grid-area: toggle; }
html:not([data-mobile="1"]):not(.layout-phone) .header-tools { grid-area: tools; justify-content: flex-end; }
html:not([data-mobile="1"]):not(.layout-phone) .user-bar {
grid-area: user;
text-align: center;
width: 100%;
}
.site-header {
html:not([data-mobile="1"]):not(.layout-phone) .site-header {
padding: .85rem .75rem .75rem;
text-align: left;
}
.site-title {
html:not([data-mobile="1"]):not(.layout-phone) .site-title {
font-size: 1.15rem;
margin-bottom: .65rem;
text-align: center;
}
.site-title-sub {
html:not([data-mobile="1"]):not(.layout-phone) .site-title-sub {
font-size: .58rem;
letter-spacing: .1em;
}
.site-nav {
html:not([data-mobile="1"]):not(.layout-phone) .site-nav {
position: fixed;
top: 0;
left: 0;
@@ -547,3 +547,264 @@ body.login-page {
padding: 1.75rem 1.25rem 1.5rem;
}
}
/* ── 设备布局：手机竖屏 / 平板横屏 ── */
.orientation-lock {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: var(--modal-mask);
backdrop-filter: blur(6px);
}
.orientation-lock[hidden] {
display: none !important;
}
.orientation-lock-box {
max-width: 18rem;
padding: 1.75rem 1.25rem;
border-radius: 14px;
border: 1px solid var(--card-border);
background: var(--card-bg);
text-align: center;
box-shadow: var(--shadow-card-hover);
}
.orientation-lock-icon {
font-size: 2.5rem;
line-height: 1;
margin-bottom: .85rem;
color: var(--accent);
animation: orientation-spin 2.4s ease-in-out infinite;
}
.orientation-lock-box p {
margin: 0;
font-size: .95rem;
line-height: 1.55;
color: var(--text-title);
}
@keyframes orientation-spin {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(90deg); }
}
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .nav-toggle {
display: inline-flex;
}
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .header-bar {
grid-template-columns: auto 1fr;
grid-template-areas:
"toggle tools"
"user user";
}
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .nav-toggle { grid-area: toggle; }
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .header-tools { grid-area: tools; justify-content: flex-end; }
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .user-bar {
grid-area: user;
text-align: center;
width: 100%;
}
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .site-header {
padding: .75rem .75rem .65rem;
text-align: left;
}
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .site-title {
font-size: 1.05rem;
margin-bottom: .5rem;
text-align: center;
}
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .site-title-sub {
display: none;
}
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .site-nav {
position: fixed;
top: 0;
left: 0;
width: min(86vw, 320px);
height: 100dvh;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: .35rem;
padding: calc(var(--safe-top) + 3.5rem) 1rem 1.5rem;
background: var(--card-bg);
border-right: 1px solid var(--card-border);
box-shadow: var(--shadow-card-hover);
z-index: 100;
transform: translateX(-105%);
transition: transform .28s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .site-nav.open {
transform: translateX(0);
}
html[data-layout="phone"]:not([data-mobile="1"]):not(.layout-phone) .site-nav a {
width: 100%;
text-align: left;
padding: .75rem 1rem;
font-size: .9rem;
min-height: var(--touch-min);
display: flex;
align-items: center;
border-radius: 10px;
}
html[data-layout="phone"] .main {
padding: .75rem .65rem 1.1rem;
}
html[data-layout="phone"] .split-grid {
grid-template-columns: 1fr;
gap: .85rem;
}
html[data-layout="phone"] .split-grid .card,
html[data-layout="phone"] .trade-split .card {
min-height: auto;
}
html[data-layout="phone"] .trade-top-bar-main {
flex-direction: column;
align-items: flex-start;
gap: .35rem;
}
html[data-layout="phone"] .trade-session-clock {
display: block;
font-size: .72rem;
line-height: 1.45;
}
html[data-layout="phone"] .session-clock-detail {
display: block;
margin-top: .15rem;
}
html[data-layout="phone"] .trade-top-hint {
font-size: .68rem;
line-height: 1.4;
}
html[data-layout="phone"] .pos-metrics {
grid-template-columns: repeat(2, 1fr);
}
html[data-layout="phone"] .pos-card-head {
flex-direction: column;
align-items: stretch;
}
html[data-layout="phone"] .pos-card-actions {
width: 100%;
justify-content: flex-end;
}
html[data-layout="phone"] .rec-sort-bar {
flex-direction: column;
align-items: stretch;
}
html[data-layout="phone"] .rec-sort-bar select {
width: 100%;
min-width: 0;
}
html[data-layout="phone"] #recommend .trade-table-wrap {
overflow-x: auto;
overflow-y: auto;
max-height: 52vh;
}
html[data-layout="phone"] .strategy-preview-table {
font-size: .68rem;
}
html[data-layout="tablet"][data-orientation="landscape"] .site-header {
padding: .85rem 1rem .75rem;
}
html[data-layout="tablet"][data-orientation="landscape"] .site-title {
font-size: 1.35rem;
margin-bottom: .85rem;
}
html[data-layout="tablet"][data-orientation="landscape"] .site-nav {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
html[data-layout="tablet"][data-orientation="landscape"] .site-nav::-webkit-scrollbar {
display: none;
}
html[data-layout="tablet"][data-orientation="landscape"] .site-nav a {
flex-shrink: 0;
padding: .48rem .75rem;
font-size: .8rem;
}
html[data-layout="tablet"][data-orientation="landscape"] .main {
padding: 1rem .85rem;
}
html[data-layout="tablet"][data-orientation="landscape"] .split-grid,
html[data-layout="tablet"][data-orientation="landscape"] .trade-split {
grid-template-columns: 1fr 1fr;
gap: 1rem;
align-items: stretch;
}
html[data-layout="tablet"][data-orientation="landscape"] .split-grid .card,
html[data-layout="tablet"][data-orientation="landscape"] .trade-split .card {
min-height: 380px;
}
html[data-layout="tablet"][data-orientation="landscape"] .trade-form-line.line-3 {
grid-template-columns: 1fr 1fr;
}
html[data-layout="tablet"][data-orientation="landscape"] .trade-form-line.line-3 .trade-field:first-child {
grid-column: 1 / -1;
}
html[data-layout="tablet"][data-orientation="landscape"] .pos-metrics {
grid-template-columns: repeat(4, 1fr);
}
html[data-layout="tablet"][data-orientation="landscape"] .trade-top-bar {
flex-direction: row;
align-items: flex-start;
}
html[data-layout="tablet"][data-orientation="landscape"] .trade-top-bar-actions {
width: auto;
flex-shrink: 0;
}
html[data-layout="tablet"][data-orientation="landscape"] .strategy-page .split-grid {
grid-template-columns: 1fr 1fr;
}
html[data-layout="tablet"][data-orientation="landscape"] .strategy-page .split-grid .card {
min-height: 420px;
}