优化:单市场已经关闭的情况UI优化
This commit is contained in:
parent
13797f4b8c
commit
76a512a2c7
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<v-container fluid class="trade-detail-container">
|
||||
<v-container
|
||||
fluid
|
||||
class="trade-detail-container"
|
||||
:class="{
|
||||
'trade-detail-container--settled-bar': showSettledOutcomeBar,
|
||||
}"
|
||||
>
|
||||
<v-pull-to-refresh class="trade-detail-pull-refresh" @load="onRefresh">
|
||||
<div class="trade-detail-pull-refresh-inner">
|
||||
<!-- findPmEvent 请求中:仅显示 loading -->
|
||||
@ -106,9 +112,6 @@
|
||||
<v-icon size="40" color="grey-darken-1">mdi-lock-outline</v-icon>
|
||||
<h2 class="market-closed-pane-title">{{ t('trade.marketClosedTitle') }}</h2>
|
||||
<p class="market-closed-pane-desc">{{ t('trade.marketClosedDesc') }}</p>
|
||||
<p v-if="settledOutcomeLabel" class="market-closed-pane-outcome">
|
||||
{{ t('trade.marketClosedOutcome', { outcome: settledOutcomeLabel }) }}
|
||||
</p>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
@ -282,9 +285,6 @@
|
||||
<v-icon size="44" color="grey-darken-1">mdi-lock-outline</v-icon>
|
||||
<h2 class="market-closed-pane-title">{{ t('trade.marketClosedTitle') }}</h2>
|
||||
<p class="market-closed-pane-desc">{{ t('trade.marketClosedDesc') }}</p>
|
||||
<p v-if="settledOutcomeLabel" class="market-closed-pane-outcome">
|
||||
{{ t('trade.marketClosedOutcome', { outcome: settledOutcomeLabel }) }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="tradeMarketPayload" class="trade-sidebar">
|
||||
<TradeComponent
|
||||
@ -382,6 +382,15 @@
|
||||
</v-row>
|
||||
</div>
|
||||
</v-pull-to-refresh>
|
||||
|
||||
<!-- 已结算:结算结果固定在视口底部(滚动时仍可见) -->
|
||||
<div
|
||||
v-if="showSettledOutcomeBar"
|
||||
class="trade-settled-outcome-bar"
|
||||
role="status"
|
||||
>
|
||||
{{ t('trade.marketClosedOutcome', { outcome: settledOutcomeLabel }) }}
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user