diff --git a/components/analytics/AnalyticsUserGenderSection.uvue b/components/analytics/AnalyticsUserGenderSection.uvue index 59e807b0..3d509c1e 100644 --- a/components/analytics/AnalyticsUserGenderSection.uvue +++ b/components/analytics/AnalyticsUserGenderSection.uvue @@ -204,22 +204,23 @@ export default { .gender-card { background: #fff; border-radius: 4px; - padding: 24px; + padding: 20px; display: flex; flex-direction: column; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); box-sizing: border-box; width: 100%; + height: 100%; /* 确保沾满父级格子 */ } .card-header { - margin-bottom: 24px; + margin-bottom: 20px; flex-shrink: 0; } .title { font-size: 16px; - font-weight: 700; + font-weight: bold; /* 同步地图 bold */ color: #333; } @@ -229,6 +230,7 @@ export default { display: flex; flex-direction: column; align-items: flex-start; + min-height: 0; } /* 图例区 (横向排列) 对齐图片 */ @@ -238,8 +240,8 @@ export default { flex-direction: row; align-items: center; flex-wrap: wrap; - gap: 24px; - margin-bottom: 24px; + gap: 20px; + margin-bottom: 20px; } .legend-item { @@ -250,7 +252,7 @@ export default { } .legend-dot { - width: 16px; + width: 12px; height: 12px; border-radius: 2px; } @@ -262,9 +264,10 @@ export default { /* 核心图表列 (centered) */ .chart-col { + flex: 1; width: 100%; position: relative; - height: 300px; + min-height: 0; /* 允许 flex 压缩 */ overflow: visible !important; display: flex; justify-content: center; @@ -273,7 +276,7 @@ export default { /* 响应式断点 - 维持垂直布局并增加空间 */ @media (max-width: 1199.98px) { .chart-col { - height: 350px; + height: 350px; /* 在移动端断点可以有明确高度 */ } } diff --git a/components/analytics/AnalyticsUserMapTable.uvue b/components/analytics/AnalyticsUserMapTable.uvue index c3a5311e..7c553b63 100644 --- a/components/analytics/AnalyticsUserMapTable.uvue +++ b/components/analytics/AnalyticsUserMapTable.uvue @@ -161,7 +161,10 @@ export default { background: #fff; border-radius: 4px; padding: 20px; - margin-bottom: 16px; + /* margin-bottom 移除,由父级 Grid gap 控制或统一添加 */ + display: flex; + flex-direction: column; + height: 100%; /* 让卡片自身也撑满容器 */ } .card-header { @@ -177,7 +180,8 @@ export default { .card-content { display: flex; flex-direction: row; - height: 450px; + flex: 1; /* 让内容区在容器高时自适应 */ + min-height: 450px; /* 最小基础高度 */ } .map-section { diff --git a/pages/mall/admin/user/statistics/index.uvue b/pages/mall/admin/user/statistics/index.uvue index 2ce20bb9..e8310bd6 100644 --- a/pages/mall/admin/user/statistics/index.uvue +++ b/pages/mall/admin/user/statistics/index.uvue @@ -296,6 +296,8 @@ function onExport() { .map-col, .gender-col { min-width: 0; + display: flex; /* 让子元素可以正常撑开 */ + flex-direction: column; } @media (max-width: 1199.98px) {