优化：UI调整
This commit is contained in:
ivan
parent
2174abc9d3
commit
c0c423b46a
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-card class="order-book">
|
||||
<v-card class="order-book" elevation="0">
|
||||
<!-- Header -->
|
||||
<div class="order-book-header">
|
||||
<h3 class="order-book-title">Order Book</h3>
|
||||
@ -198,7 +198,8 @@ const maxBidsTotal = computed(() => {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: none;
|
||||
border: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
.horizontal-progress-bar {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 桌面端：完整交易卡片 -->
|
||||
<v-card v-if="!mobile" class="trade-component">
|
||||
<!-- 桌面端：完整交易卡片（扁平化） -->
|
||||
<v-card v-if="!mobile" class="trade-component" elevation="0">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<v-tabs v-model="activeTab" class="buy-sell-tabs minimal-tabs" density="compact">
|
||||
@ -44,7 +44,7 @@
|
||||
text
|
||||
@click="handleOptionChange('yes')"
|
||||
>
|
||||
Yes {{ yesPriceCents }}¢
|
||||
{{ yesLabel }} {{ yesPriceCents }}¢
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="no-btn"
|
||||
@ -52,7 +52,7 @@
|
||||
text
|
||||
@click="handleOptionChange('no')"
|
||||
>
|
||||
No {{ noPriceCents }}¢
|
||||
{{ noLabel }} {{ noPriceCents }}¢
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
<span class="label">To win</span>
|
||||
<span class="to-win-value">
|
||||
<v-icon size="16" color="green">mdi-currency-usd</v-icon>
|
||||
$20
|
||||
${{ toWinValue }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@ -106,7 +106,7 @@
|
||||
text
|
||||
@click="handleOptionChange('yes')"
|
||||
>
|
||||
Yes {{ yesPriceCents }}¢
|
||||
{{ yesLabel }} {{ yesPriceCents }}¢
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="no-btn"
|
||||
@ -114,7 +114,7 @@
|
||||
text
|
||||
@click="handleOptionChange('no')"
|
||||
>
|
||||
No {{ noPriceCents }}¢
|
||||
{{ noLabel }} {{ noPriceCents }}¢
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
@ -135,6 +135,15 @@
|
||||
<v-btn class="amount-btn" @click="adjustAmount(100)">+$100</v-btn>
|
||||
<v-btn class="amount-btn" @click="setMaxAmount">Max</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- To win（份数 × 1U） -->
|
||||
<div v-if="amount > 0" class="total-row amount-to-win-row">
|
||||
<span class="label">To win</span>
|
||||
<span class="to-win-value">
|
||||
<v-icon size="16" color="green">mdi-currency-usd</v-icon>
|
||||
${{ toWinValue }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deposit Button -->
|
||||
@ -152,7 +161,7 @@
|
||||
text
|
||||
@click="handleOptionChange('yes')"
|
||||
>
|
||||
Yes {{ yesPriceCents }}¢
|
||||
{{ yesLabel }} {{ yesPriceCents }}¢
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="no-btn"
|
||||
@ -160,7 +169,7 @@
|
||||
text
|
||||
@click="handleOptionChange('no')"
|
||||
>
|
||||
No {{ noPriceCents }}¢
|
||||
{{ noLabel }} {{ noPriceCents }}¢
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
@ -260,7 +269,7 @@
|
||||
<span class="label">To win</span>
|
||||
<span class="to-win-value">
|
||||
<v-icon size="16" color="green">mdi-currency-usd</v-icon>
|
||||
$20
|
||||
${{ toWinValue }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@ -288,9 +297,9 @@
|
||||
</template>
|
||||
</v-card>
|
||||
|
||||
<!-- 移动端且由首页卡片嵌入：只渲染交易表单，无底部栏、无内部 sheet -->
|
||||
<!-- 移动端且由首页卡片嵌入：只渲染交易表单，无底部栏、无内部 sheet（扁平化） -->
|
||||
<template v-else-if="embeddedInSheet">
|
||||
<v-sheet class="trade-sheet-paper trade-sheet-paper--embedded" rounded="lg">
|
||||
<v-sheet class="trade-sheet-paper trade-sheet-paper--embedded" rounded="lg" elevation="0">
|
||||
<div class="trade-component trade-sheet-inner">
|
||||
<div class="header">
|
||||
<v-tabs v-model="activeTab" class="buy-sell-tabs minimal-tabs" density="compact">
|
||||
@ -329,14 +338,14 @@
|
||||
:class="{ active: selectedOption === 'yes' }"
|
||||
text
|
||||
@click="handleOptionChange('yes')"
|
||||
>Yes {{ yesPriceCents }}¢</v-btn
|
||||
>{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="no-btn"
|
||||
:class="{ active: selectedOption === 'no' }"
|
||||
text
|
||||
@click="handleOptionChange('no')"
|
||||
>No {{ noPriceCents }}¢</v-btn
|
||||
>{{ noLabel }} {{ noPriceCents }}¢</v-btn
|
||||
>
|
||||
</div>
|
||||
<div class="total-section">
|
||||
@ -347,7 +356,7 @@
|
||||
<div class="total-row">
|
||||
<span class="label">To win</span
|
||||
><span class="to-win-value"
|
||||
><v-icon size="16" color="green">mdi-currency-usd</v-icon> $20</span
|
||||
><v-icon size="16" color="green">mdi-currency-usd</v-icon> ${{ toWinValue }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
@ -378,14 +387,14 @@
|
||||
:class="{ active: selectedOption === 'yes' }"
|
||||
text
|
||||
@click="handleOptionChange('yes')"
|
||||
>Yes {{ yesPriceCents }}¢</v-btn
|
||||
>{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="no-btn"
|
||||
:class="{ active: selectedOption === 'no' }"
|
||||
text
|
||||
@click="handleOptionChange('no')"
|
||||
>No {{ noPriceCents }}¢</v-btn
|
||||
>{{ noLabel }} {{ noPriceCents }}¢</v-btn
|
||||
>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
@ -402,6 +411,13 @@
|
||||
<v-btn class="amount-btn" @click="adjustAmount(100)">+$100</v-btn>
|
||||
<v-btn class="amount-btn" @click="setMaxAmount">Max</v-btn>
|
||||
</div>
|
||||
<div v-if="amount > 0" class="total-row amount-to-win-row">
|
||||
<span class="label">To win</span>
|
||||
<span class="to-win-value">
|
||||
<v-icon size="16" color="green">mdi-currency-usd</v-icon>
|
||||
${{ toWinValue }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-btn class="deposit-btn" @click="deposit">Deposit</v-btn>
|
||||
</template>
|
||||
@ -413,14 +429,14 @@
|
||||
:class="{ active: selectedOption === 'yes' }"
|
||||
text
|
||||
@click="handleOptionChange('yes')"
|
||||
>Yes {{ yesPriceCents }}¢</v-btn
|
||||
>{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="no-btn"
|
||||
:class="{ active: selectedOption === 'no' }"
|
||||
text
|
||||
@click="handleOptionChange('no')"
|
||||
>No {{ noPriceCents }}¢</v-btn
|
||||
>{{ noLabel }} {{ noPriceCents }}¢</v-btn
|
||||
>
|
||||
</div>
|
||||
<div class="input-group limit-price-group">
|
||||
@ -506,7 +522,7 @@
|
||||
<div class="total-row">
|
||||
<span class="label">To win</span
|
||||
><span class="to-win-value"
|
||||
><v-icon size="16" color="green">mdi-currency-usd</v-icon> $20</span
|
||||
><v-icon size="16" color="green">mdi-currency-usd</v-icon> ${{ toWinValue }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
@ -544,7 +560,7 @@
|
||||
block
|
||||
@click="openSheet('yes')"
|
||||
>
|
||||
Buy Yes {{ yesPriceCents }}¢
|
||||
Buy {{ yesLabel }} {{ yesPriceCents }}¢
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="mobile-bar-btn mobile-bar-no"
|
||||
@ -554,7 +570,7 @@
|
||||
block
|
||||
@click="openSheet('no')"
|
||||
>
|
||||
Buy No {{ noPriceCents }}¢
|
||||
Buy {{ noLabel }} {{ noPriceCents }}¢
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
@ -598,14 +614,14 @@
|
||||
:class="{ active: selectedOption === 'yes' }"
|
||||
text
|
||||
@click="handleOptionChange('yes')"
|
||||
>Yes {{ yesPriceCents }}¢</v-btn
|
||||
>{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="no-btn"
|
||||
:class="{ active: selectedOption === 'no' }"
|
||||
text
|
||||
@click="handleOptionChange('no')"
|
||||
>No {{ noPriceCents }}¢</v-btn
|
||||
>{{ noLabel }} {{ noPriceCents }}¢</v-btn
|
||||
>
|
||||
</div>
|
||||
<div class="total-section">
|
||||
@ -617,7 +633,7 @@
|
||||
<div class="total-row">
|
||||
<span class="label">To win</span
|
||||
><span class="to-win-value"
|
||||
><v-icon size="16" color="green">mdi-currency-usd</v-icon> $20</span
|
||||
><v-icon size="16" color="green">mdi-currency-usd</v-icon> ${{ toWinValue }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
@ -648,14 +664,14 @@
|
||||
:class="{ active: selectedOption === 'yes' }"
|
||||
text
|
||||
@click="handleOptionChange('yes')"
|
||||
>Yes {{ yesPriceCents }}¢</v-btn
|
||||
>{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="no-btn"
|
||||
:class="{ active: selectedOption === 'no' }"
|
||||
text
|
||||
@click="handleOptionChange('no')"
|
||||
>No {{ noPriceCents }}¢</v-btn
|
||||
>{{ noLabel }} {{ noPriceCents }}¢</v-btn
|
||||
>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
@ -672,6 +688,13 @@
|
||||
<v-btn class="amount-btn" @click="adjustAmount(100)">+$100</v-btn>
|
||||
<v-btn class="amount-btn" @click="setMaxAmount">Max</v-btn>
|
||||
</div>
|
||||
<div v-if="amount > 0" class="total-row amount-to-win-row">
|
||||
<span class="label">To win</span>
|
||||
<span class="to-win-value">
|
||||
<v-icon size="16" color="green">mdi-currency-usd</v-icon>
|
||||
${{ toWinValue }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-btn class="deposit-btn" @click="deposit">Deposit</v-btn>
|
||||
</template>
|
||||
@ -683,14 +706,14 @@
|
||||
:class="{ active: selectedOption === 'yes' }"
|
||||
text
|
||||
@click="handleOptionChange('yes')"
|
||||
>Yes {{ yesPriceCents }}¢</v-btn
|
||||
>{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="no-btn"
|
||||
:class="{ active: selectedOption === 'no' }"
|
||||
text
|
||||
@click="handleOptionChange('no')"
|
||||
>No {{ noPriceCents }}¢</v-btn
|
||||
>{{ noLabel }} {{ noPriceCents }}¢</v-btn
|
||||
>
|
||||
</div>
|
||||
<div class="input-group limit-price-group">
|
||||
@ -775,7 +798,7 @@
|
||||
<div class="total-row">
|
||||
<span class="label">To win</span
|
||||
><span class="to-win-value"
|
||||
><v-icon size="16" color="green">mdi-currency-usd</v-icon> $20</span
|
||||
><v-icon size="16" color="green">mdi-currency-usd</v-icon> ${{ toWinValue }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
@ -812,7 +835,7 @@
|
||||
content-class="merge-dialog"
|
||||
transition="dialog-transition"
|
||||
>
|
||||
<v-card class="merge-dialog-card" rounded="lg">
|
||||
<v-card class="merge-dialog-card" rounded="lg" elevation="0">
|
||||
<div class="merge-dialog-header">
|
||||
<h3 class="merge-dialog-title">Merge shares</h3>
|
||||
<v-btn
|
||||
@ -875,7 +898,7 @@
|
||||
content-class="split-dialog"
|
||||
transition="dialog-transition"
|
||||
>
|
||||
<v-card class="split-dialog-card" rounded="lg">
|
||||
<v-card class="split-dialog-card" rounded="lg" elevation="0">
|
||||
<div class="split-dialog-header">
|
||||
<h3 class="split-dialog-title">Split</h3>
|
||||
<v-btn
|
||||
@ -981,6 +1004,8 @@ export interface TradeMarketPayload {
|
||||
title?: string
|
||||
/** 与 outcomes/outcomePrices 顺序一致，用于下单 tokenId：0=Yes 1=No */
|
||||
clobTokenIds?: string[]
|
||||
/** 选项展示文案，如 ["Yes","No"] 或 ["Up","Down"]，用于 Buy Yes/No 按钮文字 */
|
||||
outcomes?: string[]
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
@ -1071,6 +1096,8 @@ defineExpose({ openMergeDialog, openSplitDialog })
|
||||
|
||||
const yesPriceCents = computed(() => (props.market ? Math.round(props.market.yesPrice * 100) : 19))
|
||||
const noPriceCents = computed(() => (props.market ? Math.round(props.market.noPrice * 100) : 82))
|
||||
const yesLabel = computed(() => props.market?.outcomes?.[0] ?? 'Yes')
|
||||
const noLabel = computed(() => props.market?.outcomes?.[1] ?? 'No')
|
||||
|
||||
function openSheet(option: 'yes' | 'no') {
|
||||
handleOptionChange(option)
|
||||
@ -1120,8 +1147,22 @@ const totalPrice = computed(() => {
|
||||
return (limitPrice.value * shares.value).toFixed(2)
|
||||
})
|
||||
|
||||
/** To win = 份数 × 1U = shares × 1 USDC */
|
||||
const toWinValue = computed(() => {
|
||||
if (isMarketMode.value) {
|
||||
const price =
|
||||
selectedOption.value === 'yes'
|
||||
? (props.market?.yesPrice ?? 0.5)
|
||||
: (props.market?.noPrice ?? 0.5)
|
||||
const sharesFromAmount = price > 0 ? amount.value / price : 0
|
||||
return sharesFromAmount.toFixed(2)
|
||||
}
|
||||
return (shares.value * 1).toFixed(2)
|
||||
})
|
||||
|
||||
const actionButtonText = computed(() => {
|
||||
return `${activeTab.value} ${selectedOption.value.charAt(0).toUpperCase() + selectedOption.value.slice(1)}`
|
||||
const label = selectedOption.value === 'yes' ? yesLabel.value : noLabel.value
|
||||
return `${activeTab.value} ${label}`
|
||||
})
|
||||
|
||||
function applyInitialOption(option: 'yes' | 'no') {
|
||||
@ -1373,11 +1414,38 @@ async function submitOrder() {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 扁平化：移除所有阴影 */
|
||||
.trade-component,
|
||||
.trade-sheet-paper,
|
||||
.merge-dialog-card,
|
||||
.split-dialog-card {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.trade-component :deep(.v-btn),
|
||||
.trade-component :deep(.v-btn::before),
|
||||
.trade-sheet-inner :deep(.v-btn),
|
||||
.trade-sheet-inner :deep(.v-btn::before),
|
||||
.merge-dialog-card .v-btn,
|
||||
.merge-dialog-card .v-btn::before,
|
||||
.split-dialog-card .v-btn,
|
||||
.split-dialog-card .v-btn::before {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.trade-component :deep(.v-field),
|
||||
.trade-sheet-inner :deep(.v-field),
|
||||
.merge-dialog-card :deep(.v-field),
|
||||
.split-dialog-card :deep(.v-field) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.trade-component {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
.header {
|
||||
@ -1410,6 +1478,7 @@ async function submitOrder() {
|
||||
font-size: 14px;
|
||||
text-transform: none;
|
||||
color: #666666;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.more-item {
|
||||
@ -1431,6 +1500,7 @@ async function submitOrder() {
|
||||
border-radius: 4px;
|
||||
text-transform: none;
|
||||
font-size: 14px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.yes-btn.active {
|
||||
@ -1445,11 +1515,12 @@ async function submitOrder() {
|
||||
border-radius: 4px;
|
||||
text-transform: none;
|
||||
font-size: 14px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.no-btn.active {
|
||||
background-color: #cc0000;
|
||||
color: #ffffff;
|
||||
background-color: #f0b8b8;
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
@ -1581,6 +1652,7 @@ async function submitOrder() {
|
||||
text-transform: none;
|
||||
font-size: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.matching-info {
|
||||
@ -1609,6 +1681,10 @@ async function submitOrder() {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.expiration-select :deep(.v-field) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.total-section {
|
||||
padding: 12px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
@ -1638,11 +1714,12 @@ async function submitOrder() {
|
||||
width: 100%;
|
||||
background-color: #0066cc;
|
||||
color: #ffffff;
|
||||
border-radius: 0;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Market Mode Styles */
|
||||
@ -1685,17 +1762,25 @@ async function submitOrder() {
|
||||
text-transform: none;
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.amount-to-win-row {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.deposit-btn {
|
||||
width: 100%;
|
||||
background-color: #0066cc;
|
||||
color: #ffffff;
|
||||
border-radius: 0;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 移动端底部交易栏（红框样式） */
|
||||
@ -1823,6 +1908,7 @@ async function submitOrder() {
|
||||
.merge-dialog-card {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.merge-dialog-header {
|
||||
@ -1925,12 +2011,14 @@ async function submitOrder() {
|
||||
.merge-submit-btn {
|
||||
text-transform: none;
|
||||
font-weight: 600;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Split dialog */
|
||||
.split-dialog-card {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.split-dialog-header {
|
||||
display: flex;
|
||||
@ -1993,5 +2081,6 @@ async function submitOrder() {
|
||||
.split-submit-btn {
|
||||
text-transform: none;
|
||||
font-weight: 600;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
rounded="sm"
|
||||
@click="openTrade(market, index, 'yes')"
|
||||
>
|
||||
Yes {{ yesPrice(market) }}
|
||||
{{ yesLabel(market) }} {{ yesPrice(market) }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="buy-no-btn"
|
||||
@ -95,7 +95,7 @@
|
||||
rounded="sm"
|
||||
@click="openTrade(market, index, 'no')"
|
||||
>
|
||||
No {{ noPrice(market) }}
|
||||
{{ noLabel(market) }} {{ noPrice(market) }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
@ -125,7 +125,7 @@
|
||||
rounded="sm"
|
||||
@click="openSheetWithOption('yes')"
|
||||
>
|
||||
Yes {{ barMarket ? yesPrice(barMarket) : '0¢' }}
|
||||
{{ barMarket ? yesLabel(barMarket) : 'Yes' }} {{ barMarket ? yesPrice(barMarket) : '0¢' }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="mobile-bar-btn mobile-bar-no"
|
||||
@ -133,7 +133,7 @@
|
||||
rounded="sm"
|
||||
@click="openSheetWithOption('no')"
|
||||
>
|
||||
No {{ barMarket ? noPrice(barMarket) : '0¢' }}
|
||||
{{ barMarket ? noLabel(barMarket) : 'No' }} {{ barMarket ? noPrice(barMarket) : '0¢' }}
|
||||
</v-btn>
|
||||
<v-menu
|
||||
v-model="mobileMenuOpen"
|
||||
@ -239,6 +239,7 @@ const tradeMarketPayload = computed(() => {
|
||||
noPrice,
|
||||
title: m.question,
|
||||
clobTokenIds: m.clobTokenIds,
|
||||
outcomes: m.outcomes,
|
||||
}
|
||||
})
|
||||
|
||||
@ -566,6 +567,14 @@ function marketChance(market: PmEventMarketItem): number {
|
||||
return Math.min(100, Math.max(0, Math.round(yesPrice * 100)))
|
||||
}
|
||||
|
||||
function yesLabel(market: PmEventMarketItem): string {
|
||||
return market?.outcomes?.[0] ?? 'Yes'
|
||||
}
|
||||
|
||||
function noLabel(market: PmEventMarketItem): string {
|
||||
return market?.outcomes?.[1] ?? 'No'
|
||||
}
|
||||
|
||||
function yesPrice(market: PmEventMarketItem): string {
|
||||
const raw = market?.outcomePrices?.[0]
|
||||
if (raw == null) return '0¢'
|
||||
@ -734,13 +743,14 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
/* 分时图卡片 */
|
||||
/* 分时图卡片（扁平化） */
|
||||
.chart-card.polymarket-chart {
|
||||
margin-bottom: 24px;
|
||||
padding: 20px 24px 16px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e7e7e7;
|
||||
border-radius: 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
@ -884,6 +894,7 @@ watch(
|
||||
border: 1px solid #e7e7e7;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.markets-list {
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
rounded="sm"
|
||||
@click="openSheetWithOption('yes')"
|
||||
>
|
||||
Yes {{ yesPriceCents }}¢
|
||||
{{ yesLabel }} {{ yesPriceCents }}¢
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="mobile-bar-btn mobile-bar-no"
|
||||
@ -138,7 +138,7 @@
|
||||
rounded="sm"
|
||||
@click="openSheetWithOption('no')"
|
||||
>
|
||||
No {{ noPriceCents }}¢
|
||||
{{ noLabel }} {{ noPriceCents }}¢
|
||||
</v-btn>
|
||||
<v-menu
|
||||
v-model="mobileMenuOpen"
|
||||
@ -332,6 +332,7 @@ const tradeMarketPayload = computed(() => {
|
||||
noPrice,
|
||||
title: m.question,
|
||||
clobTokenIds: m.clobTokenIds,
|
||||
outcomes: m.outcomes,
|
||||
}
|
||||
}
|
||||
const qId = route.query.marketId
|
||||
@ -372,6 +373,8 @@ const yesPriceCents = computed(() =>
|
||||
const noPriceCents = computed(() =>
|
||||
tradeMarketPayload.value ? Math.round(tradeMarketPayload.value.noPrice * 100) : 0
|
||||
)
|
||||
const yesLabel = computed(() => currentMarket.value?.outcomes?.[0] ?? 'Yes')
|
||||
const noLabel = computed(() => currentMarket.value?.outcomes?.[1] ?? 'No')
|
||||
|
||||
function openSheetWithOption(side: 'yes' | 'no') {
|
||||
tradeInitialOptionFromBar.value = side
|
||||
@ -921,13 +924,14 @@ onUnmounted(() => {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Polymarket 样式分时图卡片 */
|
||||
/* Polymarket 样式分时图卡片（扁平化） */
|
||||
.chart-card.polymarket-chart {
|
||||
margin-top: 32px;
|
||||
padding: 20px 24px 16px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e7e7e7;
|
||||
border-radius: 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
@ -1027,11 +1031,12 @@ onUnmounted(() => {
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
/* Order Book Card Styles */
|
||||
/* Order Book Card Styles（扁平化） */
|
||||
.order-book-card {
|
||||
padding: 0;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e7e7e7;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 左右布局：左侧弹性，右侧固定 */
|
||||
@ -1141,11 +1146,12 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* Comments / Top Holders / Activity */
|
||||
/* Comments / Top Holders / Activity（扁平化） */
|
||||
.activity-card {
|
||||
margin-top: 32px;
|
||||
border: 1px solid #e5e7eb;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.detail-tabs {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user