diff --git a/src/views/TradeDetail.vue b/src/views/TradeDetail.vue index 7359963..4732034 100644 --- a/src/views/TradeDetail.vue +++ b/src/views/TradeDetail.vue @@ -1,5 +1,11 @@ @@ -634,6 +643,11 @@ const settledOutcomeLabel = computed(() => { return w?.label ?? '' }) +/** 底部固定栏:仅在市场已关闭且能解析出结算结果文案时展示 */ +const showSettledOutcomeBar = computed( + () => currentMarketClosed.value && Boolean((settledOutcomeLabel.value ?? '').trim()), +) + // --- CLOB WebSocket 订单簿与成交 --- // 按 token 索引区分:0 = Yes,1 = No type OrderBookRows = { price: number; shares: number; priceRaw?: number }[] @@ -1610,6 +1624,34 @@ onUnmounted(() => { box-sizing: border-box; } +/* 底部固定展示结算结果时,为内容留出空间(高度与 .trade-settled-outcome-bar 一致) */ +.trade-detail-container.trade-detail-container--settled-bar { + padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); +} + +.trade-settled-outcome-bar { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 101; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + min-height: 52px; + padding: 12px 20px; + padding-bottom: max(12px, env(safe-area-inset-bottom)); + background: #ffffff; + border-top: 1px solid #e7e7e7; + font-size: 15px; + font-weight: 600; + color: #111827; + line-height: 1.35; + box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06); + box-sizing: border-box; +} + .trade-detail-pull-refresh { width: 100%; min-height: 100%; @@ -1994,7 +2036,11 @@ onUnmounted(() => { } .market-closed-pane--mobile { - padding: 20px 16px; + padding: 22px 18px; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; } .market-closed-pane-title { @@ -2011,18 +2057,13 @@ onUnmounted(() => { line-height: 1.5; } -.market-closed-pane-outcome { - margin: 14px 0 0; - font-size: 15px; - font-weight: 600; - color: #111827; -} - .market-closed-mobile-card { + margin-top: 24px; margin-bottom: 16px; border: 1px solid #e7e7e7; box-shadow: none !important; overflow: hidden; + background-color: #f9fafb !important; } @media (min-width: 960px) { @@ -2058,6 +2099,10 @@ onUnmounted(() => { .trade-detail-container { padding-bottom: 100px; } + + .trade-detail-container.trade-detail-container--settled-bar { + padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); + } } /* Responsive adjustments */ @@ -2070,6 +2115,14 @@ onUnmounted(() => { padding-bottom: 100px; } + .trade-detail-container.trade-detail-container--settled-bar { + padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); + } + + .market-closed-mobile-card { + margin-top: 28px; + } + .trade-detail-card { padding: 24px; }