修复:手机版UI显示问题
This commit is contained in:
parent
2cb64ddb09
commit
84ed7de42c
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user