fix(player): 补充弹窗组件文件 DesktopBetDetailModal.vue 和 DesktopTxDetailModal.vue
This commit is contained in:
mars
390
apps/player/src/components/desktop/DesktopBetDetailModal.vue
Normal file
390
apps/player/src/components/desktop/DesktopBetDetailModal.vue
Normal file
@@ -0,0 +1,390 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../../api';
|
||||
import GoldSpinner from '../GoldSpinner.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
betNo: string | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:visible': [value: boolean];
|
||||
}>();
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
type BetDetail = {
|
||||
betNo: string;
|
||||
stake: string;
|
||||
potentialReturn?: string;
|
||||
status: string;
|
||||
placedAt: string;
|
||||
legs: Array<{
|
||||
matchTitle?: string;
|
||||
marketLabel?: string;
|
||||
selectionName?: string;
|
||||
odds?: number;
|
||||
resultStatus?: string;
|
||||
score?: { ht: string | null; ft: string | null } | null;
|
||||
[key: string]: any;
|
||||
}>;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const detail = ref<BetDetail | null>(null);
|
||||
const loading = ref(true);
|
||||
const error = ref(false);
|
||||
|
||||
async function loadDetail(betNo: string) {
|
||||
loading.value = true;
|
||||
error.value = false;
|
||||
detail.value = null;
|
||||
try {
|
||||
const { data } = await api.get(`/player/bets/${betNo}`);
|
||||
detail.value = data.data ?? null;
|
||||
} catch {
|
||||
error.value = true;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.visible, props.betNo] as const,
|
||||
([vis, no]) => {
|
||||
if (vis && no) loadDetail(no);
|
||||
if (!vis) {
|
||||
detail.value = null;
|
||||
error.value = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function close() {
|
||||
emit('update:visible', false);
|
||||
}
|
||||
|
||||
function statusClass(status: string) {
|
||||
const map: Record<string, string> = { WON: 'st-won', LOST: 'st-lost', PENDING: 'st-pending', PUSH: 'st-push' };
|
||||
return map[status?.toUpperCase()] ?? 'st-default';
|
||||
}
|
||||
|
||||
function statusLabel(status: string) {
|
||||
const map: Record<string, string> = {
|
||||
WON: t('history.filter_won'),
|
||||
LOST: t('history.filter_lost'),
|
||||
PENDING: t('history.filter_pending'),
|
||||
PUSH: t('history.filter_push'),
|
||||
};
|
||||
return map[status?.toUpperCase()] ?? status;
|
||||
}
|
||||
|
||||
const SEL_TRANS: Record<string, Record<string, string>> = {
|
||||
'主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
|
||||
'客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
|
||||
'和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
|
||||
'主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
|
||||
'客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
|
||||
'大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
|
||||
'小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
|
||||
'单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
|
||||
'双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
|
||||
'冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
|
||||
};
|
||||
|
||||
function translateSel(name: string): string {
|
||||
if (locale.value === 'zh-CN') return name;
|
||||
const exact = SEL_TRANS[name];
|
||||
if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
|
||||
const sp = name.indexOf(' ');
|
||||
if (sp > 0) {
|
||||
const head = name.slice(0, sp);
|
||||
const m = SEL_TRANS[head];
|
||||
if (m) return (m[locale.value] ?? m['en-US'] ?? head) + name.slice(sp);
|
||||
}
|
||||
return name;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="modal-fade">
|
||||
<div v-if="visible" class="modal-overlay" @click.self="close">
|
||||
<div class="modal-container" role="dialog" aria-modal="true">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">{{ t('bet.detail_title') || '注单详情' }}</span>
|
||||
<button type="button" class="modal-close" @click="close">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div v-if="loading" class="modal-loading">
|
||||
<GoldSpinner :size="32" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="modal-error">
|
||||
<p>{{ t('common.load_failed') }}</p>
|
||||
<button v-if="betNo" type="button" class="retry-btn" @click="loadDetail(betNo)">{{ t('common.retry') }}</button>
|
||||
</div>
|
||||
|
||||
<template v-else-if="detail">
|
||||
<div class="info-rows">
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('bet.bet_no') || '注单号' }}</span>
|
||||
<span class="row-val mono">{{ detail.betNo }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('common.status') || '状态' }}</span>
|
||||
<span class="row-val">
|
||||
<span class="st-badge" :class="statusClass(detail.status)">{{ statusLabel(detail.status) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('bet.stake') || '投注额' }}</span>
|
||||
<span class="row-val">{{ detail.stake }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('bet.potential_payout') || '预计派彩' }}</span>
|
||||
<span class="row-val gold">{{ detail.potentialReturn || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('bet.placed_at') || '下注时间' }}</span>
|
||||
<span class="row-val muted">{{ detail.placedAt ? new Date(detail.placedAt).toLocaleString() : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sel-section">
|
||||
<div class="sel-section-title">{{ t('bet.selections') || '投注选项' }}</div>
|
||||
<div v-for="(leg, idx) in detail.legs" :key="idx" class="sel-item">
|
||||
<div class="sel-item-main">
|
||||
<span class="sel-item-match">{{ leg.matchTitle || t('bet.match') }}</span>
|
||||
<span class="sel-item-pick">
|
||||
{{ leg.marketLabel || '' }} · {{ translateSel(leg.selectionName || '') }}
|
||||
</span>
|
||||
<span v-if="leg.score?.ft" class="sel-item-score">{{ t('history.ft') }}: {{ leg.score.ft }}</span>
|
||||
</div>
|
||||
<span class="sel-item-odds">@{{ leg.odds }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="modal-empty">{{ t('common.not_found') || '未找到记录' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--desktop-sidebar-bg, rgba(20, 20, 20, 0.95));
|
||||
border: 1px solid var(--desktop-border, #262626);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--desktop-border, #262626);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-close:hover { color: var(--text); }
|
||||
|
||||
.modal-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.modal-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 48px 20px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
padding: 6px 18px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-gold-soft, rgba(212,175,55,0.25));
|
||||
background: transparent;
|
||||
color: var(--primary-light, #F0D875);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 20px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Info rows */
|
||||
.info-rows {
|
||||
border-bottom: 1px solid var(--desktop-border, #262626);
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
|
||||
.row-label {
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.row-val {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.row-val.gold { color: var(--primary-light, #F0D875); }
|
||||
.row-val.muted { color: var(--text-muted); font-weight: 500; }
|
||||
|
||||
.mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; }
|
||||
|
||||
.st-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.st-won { background: rgba(52,199,89,0.12); color: #4cd964; }
|
||||
.st-lost { background: rgba(255,69,58,0.12); color: #ff453a; }
|
||||
.st-pending { background: rgba(212,175,55,0.12); color: var(--primary-light); }
|
||||
.st-push { background: rgba(100,100,100,0.12); color: #aaa; }
|
||||
.st-default { background: rgba(100,100,100,0.1); color: #888; }
|
||||
|
||||
/* Selections */
|
||||
.sel-section { padding: 12px 16px 16px; }
|
||||
|
||||
.sel-section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--desktop-border, #262626);
|
||||
}
|
||||
|
||||
.sel-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.sel-item:last-child { border-bottom: none; }
|
||||
|
||||
.sel-item-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sel-item-match {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sel-item-pick {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sel-item-score {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sel-item-odds {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light, #F0D875);
|
||||
flex-shrink: 0;
|
||||
font-family: 'SF Mono', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
/* Transition */
|
||||
.modal-fade-enter-active,
|
||||
.modal-fade-leave-active {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.modal-fade-enter-from,
|
||||
.modal-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
289
apps/player/src/components/desktop/DesktopTxDetailModal.vue
Normal file
289
apps/player/src/components/desktop/DesktopTxDetailModal.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../../api';
|
||||
import GoldSpinner from '../GoldSpinner.vue';
|
||||
import { formatMoney } from '../../utils/localeDisplay';
|
||||
import { txTypeKey, txDisplayType, txSummaryLabel } from '../../utils/walletTx';
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
transactionId: string | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:visible': [value: boolean];
|
||||
}>();
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
type TxDetail = {
|
||||
transactionId: string;
|
||||
transactionType: string;
|
||||
displayType?: string;
|
||||
summary?: string | null;
|
||||
amount: string;
|
||||
balanceBefore?: string;
|
||||
balanceAfter?: string;
|
||||
frozenBefore?: string;
|
||||
frozenAfter?: string;
|
||||
createdAt: string;
|
||||
referenceType?: string | null;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const detail = ref<TxDetail | null>(null);
|
||||
const loading = ref(true);
|
||||
const error = ref(false);
|
||||
|
||||
async function loadDetail(id: string) {
|
||||
loading.value = true;
|
||||
error.value = false;
|
||||
detail.value = null;
|
||||
try {
|
||||
const { data } = await api.get(`/player/wallet/transactions/${id}`);
|
||||
detail.value = data.data ?? null;
|
||||
} catch {
|
||||
error.value = true;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.visible, props.transactionId] as const,
|
||||
([vis, id]) => {
|
||||
if (vis && id) loadDetail(id);
|
||||
if (!vis) {
|
||||
detail.value = null;
|
||||
error.value = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function close() {
|
||||
emit('update:visible', false);
|
||||
}
|
||||
|
||||
function txLabel(tx: TxDetail): string {
|
||||
const key = txTypeKey(txDisplayType(tx));
|
||||
if (key) {
|
||||
const translated = t(key);
|
||||
if (translated !== key) return translated;
|
||||
}
|
||||
return tx.transactionType;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="modal-fade">
|
||||
<div v-if="visible" class="modal-overlay" @click.self="close">
|
||||
<div class="modal-container" role="dialog" aria-modal="true">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">{{ t('wallet.transaction_detail') || '交易详情' }}</span>
|
||||
<button type="button" class="modal-close" @click="close">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div v-if="loading" class="modal-loading">
|
||||
<GoldSpinner :size="32" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="modal-error">
|
||||
<p>{{ t('common.load_failed') }}</p>
|
||||
<button v-if="transactionId" type="button" class="retry-btn" @click="loadDetail(transactionId)">{{ t('common.retry') }}</button>
|
||||
</div>
|
||||
|
||||
<template v-else-if="detail">
|
||||
<div class="info-rows">
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('wallet.type') || '类型' }}</span>
|
||||
<span class="row-val">{{ txLabel(detail) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('wallet.amount') || '金额' }}</span>
|
||||
<span class="row-val mono" :class="parseFloat(detail.amount) >= 0 ? 'pos' : 'neg'">{{ formatMoney(detail.amount, locale) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('wallet.note') || '备注' }}</span>
|
||||
<span class="row-val">{{ txSummaryLabel(detail, t) || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('wallet.balance_before') || '变动前余额' }}</span>
|
||||
<span class="row-val mono">{{ formatMoney(detail.balanceBefore, locale) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('wallet.balance_after') || '变动后余额' }}</span>
|
||||
<span class="row-val mono">{{ formatMoney(detail.balanceAfter, locale) }}</span>
|
||||
</div>
|
||||
<div v-if="parseFloat(detail.frozenBefore || '0') > 0 || parseFloat(detail.frozenAfter || '0') > 0" class="info-row">
|
||||
<span class="row-label">{{ t('wallet.frozen_before') || '冻结前' }}</span>
|
||||
<span class="row-val mono">{{ formatMoney(detail.frozenBefore, locale) }}</span>
|
||||
</div>
|
||||
<div v-if="parseFloat(detail.frozenBefore || '0') > 0 || parseFloat(detail.frozenAfter || '0') > 0" class="info-row">
|
||||
<span class="row-label">{{ t('wallet.frozen_after') || '冻结后' }}</span>
|
||||
<span class="row-val mono">{{ formatMoney(detail.frozenAfter, locale) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('wallet.time') || '时间' }}</span>
|
||||
<span class="row-val muted">{{ new Date(detail.createdAt).toLocaleString() }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="row-label">{{ t('wallet.transaction_id') || '流水号' }}</span>
|
||||
<span class="row-val mono muted">{{ detail.transactionId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="modal-empty">{{ t('common.not_found') || '未找到记录' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--desktop-sidebar-bg, rgba(20, 20, 20, 0.95));
|
||||
border: 1px solid var(--desktop-border, #262626);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--desktop-border, #262626);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-close:hover { color: var(--text); }
|
||||
|
||||
.modal-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.modal-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 48px 20px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
padding: 6px 18px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-gold-soft, rgba(212,175,55,0.25));
|
||||
background: transparent;
|
||||
color: var(--primary-light, #F0D875);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 20px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Info rows */
|
||||
.info-rows { }
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
|
||||
.row-label {
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.row-val {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.row-val.pos { color: var(--primary-light, #F0D875); }
|
||||
.row-val.neg { color: var(--danger, #FF453A); }
|
||||
.row-val.muted { color: var(--text-muted); font-weight: 500; }
|
||||
|
||||
.mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; }
|
||||
|
||||
/* Transition */
|
||||
.modal-fade-enter-active,
|
||||
.modal-fade-leave-active {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.modal-fade-enter-from,
|
||||
.modal-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user