优化:单市场已经关闭的情况UI优化
This commit is contained in:
parent
13797f4b8c
commit
76a512a2c7
@ -1,5 +1,11 @@
|
|||||||
<template>
|
<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">
|
<v-pull-to-refresh class="trade-detail-pull-refresh" @load="onRefresh">
|
||||||
<div class="trade-detail-pull-refresh-inner">
|
<div class="trade-detail-pull-refresh-inner">
|
||||||
<!-- findPmEvent 请求中:仅显示 loading -->
|
<!-- findPmEvent 请求中:仅显示 loading -->
|
||||||
@ -106,9 +112,6 @@
|
|||||||
<v-icon size="40" color="grey-darken-1">mdi-lock-outline</v-icon>
|
<v-icon size="40" color="grey-darken-1">mdi-lock-outline</v-icon>
|
||||||
<h2 class="market-closed-pane-title">{{ t('trade.marketClosedTitle') }}</h2>
|
<h2 class="market-closed-pane-title">{{ t('trade.marketClosedTitle') }}</h2>
|
||||||
<p class="market-closed-pane-desc">{{ t('trade.marketClosedDesc') }}</p>
|
<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-card>
|
</v-card>
|
||||||
|
|
||||||
@ -282,9 +285,6 @@
|
|||||||
<v-icon size="44" color="grey-darken-1">mdi-lock-outline</v-icon>
|
<v-icon size="44" color="grey-darken-1">mdi-lock-outline</v-icon>
|
||||||
<h2 class="market-closed-pane-title">{{ t('trade.marketClosedTitle') }}</h2>
|
<h2 class="market-closed-pane-title">{{ t('trade.marketClosedTitle') }}</h2>
|
||||||
<p class="market-closed-pane-desc">{{ t('trade.marketClosedDesc') }}</p>
|
<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>
|
||||||
<div v-else-if="tradeMarketPayload" class="trade-sidebar">
|
<div v-else-if="tradeMarketPayload" class="trade-sidebar">
|
||||||
<TradeComponent
|
<TradeComponent
|
||||||
@ -382,6 +382,15 @@
|
|||||||
</v-row>
|
</v-row>
|
||||||
</div>
|
</div>
|
||||||
</v-pull-to-refresh>
|
</v-pull-to-refresh>
|
||||||
|
|
||||||
|
<!-- 已结算:结算结果固定在视口底部(滚动时仍可见) -->
|
||||||
|
<div
|
||||||
|
v-if="showSettledOutcomeBar"
|
||||||
|
class="trade-settled-outcome-bar"
|
||||||
|
role="status"
|
||||||
|
>
|
||||||
|
{{ t('trade.marketClosedOutcome', { outcome: settledOutcomeLabel }) }}
|
||||||
|
</div>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -634,6 +643,11 @@ const settledOutcomeLabel = computed(() => {
|
|||||||
return w?.label ?? ''
|
return w?.label ?? ''
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/** 底部固定栏:仅在市场已关闭且能解析出结算结果文案时展示 */
|
||||||
|
const showSettledOutcomeBar = computed(
|
||||||
|
() => currentMarketClosed.value && Boolean((settledOutcomeLabel.value ?? '').trim()),
|
||||||
|
)
|
||||||
|
|
||||||
// --- CLOB WebSocket 订单簿与成交 ---
|
// --- CLOB WebSocket 订单簿与成交 ---
|
||||||
// 按 token 索引区分:0 = Yes,1 = No
|
// 按 token 索引区分:0 = Yes,1 = No
|
||||||
type OrderBookRows = { price: number; shares: number; priceRaw?: number }[]
|
type OrderBookRows = { price: number; shares: number; priceRaw?: number }[]
|
||||||
@ -1610,6 +1624,34 @@ onUnmounted(() => {
|
|||||||
box-sizing: border-box;
|
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 {
|
.trade-detail-pull-refresh {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
@ -1994,7 +2036,11 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.market-closed-pane--mobile {
|
.market-closed-pane--mobile {
|
||||||
padding: 20px 16px;
|
padding: 22px 18px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-closed-pane-title {
|
.market-closed-pane-title {
|
||||||
@ -2011,18 +2057,13 @@ onUnmounted(() => {
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-closed-pane-outcome {
|
|
||||||
margin: 14px 0 0;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #111827;
|
|
||||||
}
|
|
||||||
|
|
||||||
.market-closed-mobile-card {
|
.market-closed-mobile-card {
|
||||||
|
margin-top: 24px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
border: 1px solid #e7e7e7;
|
border: 1px solid #e7e7e7;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background-color: #f9fafb !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 960px) {
|
@media (min-width: 960px) {
|
||||||
@ -2058,6 +2099,10 @@ onUnmounted(() => {
|
|||||||
.trade-detail-container {
|
.trade-detail-container {
|
||||||
padding-bottom: 100px;
|
padding-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.trade-detail-container.trade-detail-container--settled-bar {
|
||||||
|
padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive adjustments */
|
/* Responsive adjustments */
|
||||||
@ -2070,6 +2115,14 @@ onUnmounted(() => {
|
|||||||
padding-bottom: 100px;
|
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 {
|
.trade-detail-card {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user