修复:手机版UI显示问题

This commit is contained in:
ivan 2026-02-25 16:03:20 +08:00
parent 2cb64ddb09
commit 84ed7de42c

View File

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