fix: 修复中国地图页面搜索栏不显示的问题
- 简化header布局结构,移除flex-col导致的布局问题 - 使用统一的水平flex布局:左侧(返回/Logo)、中间(搜索)、右侧(区域) - 改用 style.display 直接控制显示隐藏,更可靠 - 优化响应式布局,确保PC端搜索框正常显示 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
13
index.html
13
index.html
@@ -744,10 +744,11 @@
|
|||||||
|
|
||||||
<!-- 地图界面 -->
|
<!-- 地图界面 -->
|
||||||
<div id="map-interface">
|
<div id="map-interface">
|
||||||
<header class="glass-header fixed top-0 w-full h-16 flex flex-col md:flex-row items-center justify-between px-4 md:px-8 z-50">
|
<header class="glass-header fixed top-0 w-full h-16 flex items-center justify-between px-4 md:px-8 z-50">
|
||||||
<div class="flex items-center justify-between w-full md:w-auto">
|
<!-- 左侧:返回按钮或Logo -->
|
||||||
|
<div class="flex items-center gap-4 flex-shrink-0">
|
||||||
<!-- 返回按钮(省级地图显示) -->
|
<!-- 返回按钮(省级地图显示) -->
|
||||||
<button id="map-back-btn" class="hidden flex items-center gap-1 md:gap-2 text-gray-400 hover:text-white transition flex-shrink-0" onclick="window.resetMapToChina()">
|
<button id="map-back-btn" class="hidden items-center gap-1 md:gap-2 text-gray-400 hover:text-white transition" onclick="window.resetMapToChina()">
|
||||||
<svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -755,7 +756,7 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Logo区域 -->
|
<!-- Logo区域 -->
|
||||||
<div id="map-logo-area" class="flex items-center gap-2 cursor-pointer flex-shrink-0">
|
<div id="map-logo-area" class="flex items-center gap-2 cursor-pointer">
|
||||||
<img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_logo/LOGO_1097x300.png"
|
<img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_logo/LOGO_1097x300.png"
|
||||||
alt="多多畅职" class="h-6 md:h-8 w-auto object-contain">
|
alt="多多畅职" class="h-6 md:h-8 w-auto object-contain">
|
||||||
<div class="text-white font-bold text-xs md:text-sm tracking-wide hidden sm:block">多多畅职企业内推平台</div>
|
<div class="text-white font-bold text-xs md:text-sm tracking-wide hidden sm:block">多多畅职企业内推平台</div>
|
||||||
@@ -763,12 +764,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 搜索框(PC端) -->
|
<!-- 中间:搜索框(PC端) -->
|
||||||
<div class="relative w-1/3 hidden md:block">
|
<div class="relative w-1/3 hidden md:block">
|
||||||
<input type="text" id="search-input" placeholder="搜索省份、城市、企业..." class="search-input w-full py-2 px-5 rounded-full text-center text-sm placeholder-gray-400">
|
<input type="text" id="search-input" placeholder="搜索省份、城市、企业..." class="search-input w-full py-2 px-5 rounded-full text-center text-sm placeholder-gray-400">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 当前区域显示 -->
|
<!-- 右侧:当前区域显示 -->
|
||||||
<div class="flex items-center gap-2 text-white text-xs md:text-sm flex-shrink-0">
|
<div class="flex items-center gap-2 text-white text-xs md:text-sm flex-shrink-0">
|
||||||
<span class="text-gray-400 hidden sm:inline">当前区域:</span>
|
<span class="text-gray-400 hidden sm:inline">当前区域:</span>
|
||||||
<span id="top-region-name" class="text-cyan-300 font-bold">全国</span>
|
<span id="top-region-name" class="text-cyan-300 font-bold">全国</span>
|
||||||
|
|||||||
@@ -93,12 +93,11 @@ export class MapInterface {
|
|||||||
document.getElementById('breadcrumb-container').classList.add('hidden');
|
document.getElementById('breadcrumb-container').classList.add('hidden');
|
||||||
const backBtn = document.getElementById('map-back-btn');
|
const backBtn = document.getElementById('map-back-btn');
|
||||||
if (backBtn) {
|
if (backBtn) {
|
||||||
backBtn.classList.add('hidden');
|
backBtn.style.display = 'none';
|
||||||
backBtn.classList.remove('flex');
|
|
||||||
}
|
}
|
||||||
const logoArea = document.getElementById('map-logo-area');
|
const logoArea = document.getElementById('map-logo-area');
|
||||||
if (logoArea) {
|
if (logoArea) {
|
||||||
logoArea.classList.remove('hidden');
|
logoArea.style.display = 'flex';
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('top-region-name').innerText = '全国';
|
document.getElementById('top-region-name').innerText = '全国';
|
||||||
@@ -124,12 +123,11 @@ export class MapInterface {
|
|||||||
// 显示返回按钮,隐藏logo
|
// 显示返回按钮,隐藏logo
|
||||||
const backBtn = document.getElementById('map-back-btn');
|
const backBtn = document.getElementById('map-back-btn');
|
||||||
if (backBtn) {
|
if (backBtn) {
|
||||||
backBtn.classList.remove('hidden');
|
backBtn.style.display = 'flex';
|
||||||
backBtn.classList.add('flex');
|
|
||||||
}
|
}
|
||||||
const logoArea = document.getElementById('map-logo-area');
|
const logoArea = document.getElementById('map-logo-area');
|
||||||
if (logoArea) {
|
if (logoArea) {
|
||||||
logoArea.classList.add('hidden');
|
logoArea.style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('top-region-name').innerText = provinceInfo.name;
|
document.getElementById('top-region-name').innerText = provinceInfo.name;
|
||||||
|
|||||||
Reference in New Issue
Block a user