Ivan/xtraderClient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复：手机版UI显示问题

Browse Source
This commit is contained in:
ivan 2026-02-25 16:03:20 +08:00
parent 2cb64ddb09
commit 84ed7de42c
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/TradeDetail.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<v-container class="trade-detail-container"> <v-container fluid class="trade-detail-container">
<v-row align="stretch" class="trade-detail-row"> <v-row align="stretch" no-gutters class="trade-detail-row">
<!-- 左侧：分时图 + 订单簿（宽度弹性） --> <!-- 左侧：分时图 + 订单簿（宽度弹性） -->
<v-col cols="12" class="chart-col"> <v-col cols="12" class="chart-col">
<!-- 分时图卡片（Polymarket 样式） --> <!-- 分时图卡片（Polymarket 样式） -->
@ -778,7 +778,7 @@ function buildOption(chartData: [number, number][], containerWidth?: number) {
axisPointer: { animation: false }, axisPointer: { animation: false },
}, },
grid: { grid: {
left: 16, left: 48,
right: 48, right: 48,
top: 16, top: 16,
bottom: isMobile ? 44 : 28, bottom: isMobile ? 44 : 28,
@ -935,7 +935,10 @@ onUnmounted(() => {
<style scoped> <style scoped>
.trade-detail-container { .trade-detail-container {
padding: 24px; padding: 24px;
padding-left: 24px;
padding-right: 24px;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box;
} }
.back-btn { .back-btn {
@ -1194,7 +1197,7 @@ onUnmounted(() => {
box-shadow: none; box-shadow: none;
} }
/* 左右布局：左侧弹性，右侧固定 */ /* 左右布局：左侧弹性，右侧固定；no-gutters 移除 v-col 默认 gutter，由容器 padding 统一控制左右边距 */
.trade-detail-row { .trade-detail-row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -1220,6 +1223,7 @@ onUnmounted(() => {
@media (min-width: 960px) { @media (min-width: 960px) {
.trade-detail-row { .trade-detail-row {
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 24px;
} }
.chart-col { .chart-col {
@ -1244,12 +1248,21 @@ onUnmounted(() => {
position: static; position: static;
width: 100%; width: 100%;
} }
/* 移动端显示底部栏时，预留底部空间避免遮挡列表 */
.trade-detail-container {
padding-bottom: 100px;
}
} }
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 599px) { @media (max-width: 599px) {
.trade-detail-container { .trade-detail-container {
padding: 16px; padding: 16px;
padding-left: 16px;
padding-right: 16px;
/* 底部预留空间，避免固定 Yes/No 栏遮挡列表内容 */
padding-bottom: 100px;
} }
.trade-detail-card { .trade-detail-card {
@ -1494,7 +1507,9 @@ onUnmounted(() => {
/* 移动端底部交易栏（与 EventMarkets 一致） */ /* 移动端底部交易栏（与 EventMarkets 一致） */
.mobile-trade-bar-spacer { .mobile-trade-bar-spacer {
height: 72px; /* 预留空间避免底部栏遮挡列表内容，需覆盖 bar 高度 + safe-area */
height: 100px;
min-height: 100px;
} }
.mobile-trade-bar { .mobile-trade-bar {