Show OKX-style perp/option position cards on plan page.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-24 17:32:57 +08:00
parent 5125c6702b
commit 1155cf082d
4 changed files with 309 additions and 29 deletions
@@ -290,3 +290,138 @@ input {
  color: var(--down);
  border-color: rgba(246, 70, 93, 0.35);
 }
+
+/* OKX-style position cards (copied/adapted from crypto_monitor instance_page) */
+.pos-embed-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--line);
+}
+
+@media (max-width: 800px) {
+  .pos-embed-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pos-card {
+  background: #141923;
+  border: 1px solid #2a3348;
+  border-radius: 10px;
+  padding: 12px 14px;
+}
+
+.pos-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.pos-card-symbol {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.pos-card-symbol strong {
+  font-size: 0.95rem;
+  color: #fff;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.pos-side-badge {
+  padding: 3px 8px;
+  border-radius: 6px;
+  font-size: 0.72rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.pos-side-long {
+  background: #253a6e;
+  color: #6eb5ff;
+}
+
+.pos-side-short {
+  background: #4a2230;
+  color: #ff8a8a;
+}
+
+.pos-meta {
+  font-size: 0.74rem;
+  color: #8b95a8;
+  line-height: 1.45;
+  margin-bottom: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 0;
+}
+
+.pos-meta-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.pos-meta-item:not(:last-child)::after {
+  content: "|";
+  margin: 0 8px;
+  color: #3d4659;
+}
+
+.pos-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px 14px;
+}
+
+@media (max-width: 520px) {
+  .pos-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.pos-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.pos-label {
+  font-size: 0.72rem;
+  color: #7d8799;
+}
+
+.pos-value {
+  font-size: 0.88rem;
+  color: #e8ecf4;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.pos-empty {
+  padding: 18px;
+  text-align: center;
+  color: #8892b0;
+  font-size: 0.85rem;
+  background: #141923;
+  border: 1px dashed #2a3348;
+  border-radius: 10px;
+}
+
+.pos-pnl-profit {
+  color: #7ee787 !important;
+}
+
+.pos-pnl-loss {
+  color: #ff8b8b !important;
+}