fix: 修复地图界面搜索栏和省级地图返回按钮问题
- 添加省级地图返回按钮,与企业列表界面风格一致 - 修复移动端搜索框布局,独立于header显示 - 添加响应式布局支持: * 移动端:112px顶部空间(header + 搜索框) * PC端:64px顶部空间(只有header) - 优化面包屑导航位置 - 在切换地图层级时自动显示/隐藏返回按钮 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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}" 的配置`);
|
||||
|
||||
Reference in New Issue
Block a user