增加手机端自适应

manual_trading_hub/static/app.css

@@ -604,16 +604,73 @@ body.hub-fullscreen-open {
   margin-bottom: 14px;
 }
 
-/* 全屏放大：持仓卡片横向排列 */
+/* 全屏放大：持仓卡片横向排列，列数随仓位数量自适应 */
 .exchange-fullscreen .hub-pos-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 14px;
-  align-items: start;
+  align-items: stretch;
+  width: 100%;
+}
+
+.exchange-fullscreen .hub-pos-list.count-1 {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.exchange-fullscreen .hub-pos-list.count-1 .hub-pos-card.pos-card {
+  max-width: min(960px, 100%);
+  margin-inline: auto;
+  width: 100%;
+}
+
+.exchange-fullscreen .hub-pos-list.count-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.exchange-fullscreen .hub-pos-list.count-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.exchange-fullscreen .hub-pos-list.count-4 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.exchange-fullscreen .hub-pos-list.count-5,
+.exchange-fullscreen .hub-pos-list.count-6 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.exchange-fullscreen .hub-pos-list.count-many {
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 }
 
 .exchange-fullscreen .hub-pos-card.pos-card {
   min-width: 0;
+  height: 100%;
+}
+
+@media (max-width: 1100px) {
+  .exchange-fullscreen .hub-pos-list.count-3,
+  .exchange-fullscreen .hub-pos-list.count-5,
+  .exchange-fullscreen .hub-pos-list.count-6 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .exchange-fullscreen .hub-pos-list.count-many {
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .exchange-fullscreen .hub-pos-list.count-2,
+  .exchange-fullscreen .hub-pos-list.count-3,
+  .exchange-fullscreen .hub-pos-list.count-4,
+  .exchange-fullscreen .hub-pos-list.count-5,
+  .exchange-fullscreen .hub-pos-list.count-6,
+  .exchange-fullscreen .hub-pos-list.count-many {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .exchange-fullscreen .hub-pos-list.count-1 .hub-pos-card.pos-card {
+    max-width: 100%;
+  }
 }
 
 /* 对齐实盘「实时持仓」pos-card */
@@ -1132,8 +1189,15 @@ button.btn-sm {
   gap: 8px;
 }
 
+.table-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
+}
+
 .data-table {
   width: 100%;
+  min-width: 300px;
   border-collapse: collapse;
   font-size: 11px;
 }
@@ -1436,16 +1500,267 @@ body.login-page {
   font-size: 10px;
 }
 
+/* —— 手机 / 窄屏自适应 —— */
 @media (max-width: 720px) {
   .app-shell {
-    padding: 0 12px 32px;
+    padding: 0 max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom))
+      max(12px, env(safe-area-inset-left));
   }
-  .grid-monitor,
-  .settings-grid-wrap {
-    grid-template-columns: 1fr;
+
+  .app-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    padding: 14px 0;
   }
+
   .header-right {
     width: 100%;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .sys-pill {
+    align-self: flex-start;
+  }
+
+  .top-nav {
+    width: 100%;
+    justify-content: stretch;
+  }
+
+  .top-nav a {
+    flex: 1;
+    text-align: center;
+    padding: 10px 12px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  button.ghost#btn-logout {
+    width: 100%;
+    min-height: 44px;
+  }
+
+  .page-head {
+    margin: 16px 0 12px;
+  }
+
+  .page-head h1 {
+    font-size: 17px;
+    flex-wrap: wrap;
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .toolbar-spacer {
+    display: none;
+  }
+
+  .toolbar-meta {
+    text-align: center;
+    order: 10;
+  }
+
+  .toolbar button,
+  .toolbar .chk-label {
+    width: 100%;
+    justify-content: center;
+    min-height: 44px;
+  }
+
+  .grid-monitor,
+  .settings-grid-wrap {
+    grid-template-columns: minmax(0, 1fr) !important;
+    gap: 12px;
+  }
+
+  .card-head {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .card-actions {
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 8px;
+  }
+
+  .card-actions .btn-link,
+  .card-actions button {
+    flex: 1 1 calc(50% - 4px);
+    min-height: 40px;
+    text-align: center;
+    justify-content: center;
+  }
+
+  .card-body {
+    padding: 12px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .stat-row {
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  .stat-value {
+    font-size: 15px;
+  }
+
+  .exchange-fullscreen {
+    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
+      max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
+  }
+
+  .exchange-fullscreen-panel {
+    max-width: 100%;
+  }
+
+  .fs-head {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .fs-head-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .fs-head-actions .btn-expand-back {
+    grid-column: 1 / -1;
+  }
+
+  .fs-head-actions .btn-link,
+  .fs-head-actions button {
+    min-height: 44px;
+    text-align: center;
+    justify-content: center;
+  }
+
+  .hub-pos-card .pos-card-head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .hub-pos-card .pos-head-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .hub-pos-card .pos-entrust-btn,
+  .hub-pos-card .pos-close-btn {
+    width: 100%;
+    min-height: 44px;
+    text-align: center;
+  }
+
+  .hub-pos-card .pos-ex-order-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .settings-card-foot {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .settings-card-foot .field {
+    max-width: none;
+  }
+
+  .modal {
+    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
+    align-items: flex-end;
+  }
+
+  .modal-panel {
+    max-width: none;
+    width: 100%;
+    border-radius: 12px 12px 0 0;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  .modal-actions {
+    flex-direction: column-reverse;
+  }
+
+  .modal-actions button {
+    width: 100%;
+    min-height: 44px;
+  }
+
+  #toast {
+    left: 12px;
+    right: 12px;
+    bottom: max(12px, env(safe-area-inset-bottom));
+    max-width: none;
+  }
+
+  body.login-page {
+    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
+  }
+
+  .login-panel {
+    padding: 22px 18px;
+  }
+}
+
+@media (max-width: 480px) {
+  body {
+    font-size: 12px;
+  }
+
+  .brand-title {
+    font-size: 13px;
+  }
+
+  .stat-row {
+    grid-template-columns: 1fr;
+  }
+
+  .card-actions .btn-link,
+  .card-actions button {
+    flex: 1 1 100%;
+  }
+
+  .fs-head-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .pos-action-group {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .pos-action-group .btn-sm {
+    width: 100%;
+    min-height: 44px;
+  }
+
+  .data-table .td-actions {
+    white-space: normal;
   }
 }