From 4c52d35eb3698f60977c513d94398bcd75e4572f Mon Sep 17 00:00:00 2001 From: KQL Date: Thu, 4 Dec 2025 20:17:02 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=90=9C=E7=B4=A2=E6=A0=8F=E5=92=8C=E7=9C=81?= =?UTF-8?q?=E7=BA=A7=E5=9C=B0=E5=9B=BE=E8=BF=94=E5=9B=9E=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加省级地图返回按钮，与企业列表界面风格一致 - 修复移动端搜索框布局，独立于header显示 - 添加响应式布局支持： * 移动端：112px顶部空间（header + 搜索框） * PC端：64px顶部空间（只有header） - 优化面包屑导航位置 - 在切换地图层级时自动显示/隐藏返回按钮 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- css/components.css | 27 +++++++++++++++++++++++++++ index.html | 41 +++++++++++++++++++++++++++++------------ js/ui/MapInterface.js | 22 +++++++++++++++++++++- 3 files changed, 77 insertions(+), 13 deletions(-) diff --git a/css/components.css b/css/components.css index 17bd3dc..3d7ef34 100644 --- a/css/components.css +++ b/css/components.css @@ -300,3 +300,30 @@ padding: 4px 10px; } } + +/* 地图界面响应式布局 */ +#map-interface main { + padding-top: 112px; /* 默认移动端：64px header + 48px 搜索框 */ +} + +#map-interface #map-chart { + height: calc(100vh - 112px); +} + +#breadcrumb-container { + top: 120px; /* 移动端：在搜索框下方 */ +} + +@media (min-width: 768px) { + #map-interface main { + padding-top: 64px; /* PC端：只有header */ + } + + #map-interface #map-chart { + height: calc(100vh - 64px); + } + + #breadcrumb-container { + top: 80px; /* PC端：在header下方 */ + } +} diff --git a/index.html b/index.html index 6e8fc5f..0ead2a9 100644 --- a/index.html +++ b/index.html @@ -744,31 +744,48 @@
-
-
- 多多畅职 - - +
+
+ + + + +
+ 多多畅职 + + +
+ + -
- -
+ +
全国
-
- diff --git a/js/ui/MapInterface.js b/js/ui/MapInterface.js index 8ba35fb..1432baa 100644 --- a/js/ui/MapInterface.js +++ b/js/ui/MapInterface.js @@ -62,10 +62,14 @@ export class MapInterface { return; } + // 计算正确的高度：移动端112px（header+搜索框），PC端64px（只有header） + const isMobile = window.innerWidth < 768; + const headerHeight = isMobile ? 112 : 64; + this.myChart = echarts.init(chartDom, null, { renderer: 'canvas', width: window.innerWidth, - height: window.innerHeight - 64 // 减去导航栏高度 + height: window.innerHeight - headerHeight }); // 显示加载动画 @@ -84,7 +88,15 @@ export class MapInterface { if (regionName === 'china') { // 全国地图 geoJsonUrl = mapConfig.geoJsonUrls.china; + + // 隐藏面包屑和返回按钮 document.getElementById('breadcrumb-container').classList.add('hidden'); + const backBtn = document.getElementById('map-back-btn'); + if (backBtn) { + backBtn.classList.add('hidden'); + backBtn.classList.remove('flex'); + } + document.getElementById('top-region-name').innerText = '全国'; } else { // 省级地图 - 动态加载 @@ -104,6 +116,14 @@ export class MapInterface { `; breadcrumb.classList.remove('hidden'); } + + // 显示返回按钮 + const backBtn = document.getElementById('map-back-btn'); + if (backBtn) { + backBtn.classList.remove('hidden'); + backBtn.classList.add('flex'); + } + document.getElementById('top-region-name').innerText = provinceInfo.name; } else { console.error(`未找到省份 "${provinceName}" 的配置`);