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}" 的配置`);