From 84ed7de42c31b9d1cc1d8b678bd00ea106f897d7 Mon Sep 17 00:00:00 2001
From: ivan <ivan@qq.com>
Date: Wed, 25 Feb 2026 16:03:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E7=89=88UI=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/TradeDetail.vue | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/views/TradeDetail.vue b/src/views/TradeDetail.vue
index a6caed3..20665db 100644
--- a/src/views/TradeDetail.vue
+++ b/src/views/TradeDetail.vue
@@ -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 {