* { margin: 0; padding: 0; box-sizing: border-box; } /* 主题变量（柔和现代风）：中性灰蓝背景 + 白色卡片 + 单一品牌蓝 */ :root { --bg-gradient-start: #eef2f7; --bg-gradient-end: #e4eaf2; --text-primary: #0f172a; --text-secondary: #64748b; --accent: #2563eb; --accent-2: #3b82f6; --panel-bg: #ffffff; --panel-shadow: rgba(15, 23, 42, 0.08); --map-bg: #e8eef5; --panel-border: #e2e8f0; --btn-bg: #ffffff; --btn-text: #334155; --btn-hover-bg: #2563eb; --border-color: #2563eb; --legend-bg: #ffffff; --legend-text: #64748b; --tooltip-bg: #ffffff; --tooltip-text: #0f172a; --tooltip-border: rgba(37, 99, 235, 0.35); --label-bg: transparent; --label-text: #1e3a8a; } /* 科技暗色主题（JS 在 上加 data-theme="tech" 时生效，优先级高于系统明暗） */ html[data-theme="tech"] { --bg-gradient-start: #050b1c; --bg-gradient-end: #0a1226; --text-primary: #d7e6ff; --text-secondary: #8fb3e8; --accent: #22d3ee; --accent-2: #4a6ee0; --panel-bg: rgba(8, 18, 40, 0.88); --panel-shadow: rgba(0, 180, 255, 0.25); --map-bg: rgba(6, 14, 32, 0.85); --btn-bg: rgba(10, 22, 48, 0.9); --btn-text: #cfe8ff; --btn-hover-bg: rgba(34, 211, 238, 0.25); --border-color: #22d3ee; --legend-bg: rgba(8, 18, 40, 0.9); --legend-text: #8fb3e8; --tooltip-bg: rgba(8, 18, 40, 0.95); --tooltip-text: #d7e6ff; --tooltip-border: rgba(34, 211, 238, 0.5); --label-bg: transparent; --label-text: #9be8ff; } html[data-theme="tech"] .contact-item h3 { color: #ffffff; } @media (prefers-color-scheme: dark) { :root { --bg-gradient-start: #0f172a; --bg-gradient-end: #111c33; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --panel-bg: #1e293b; --panel-shadow: rgba(0, 0, 0, 0.4); --map-bg: #0f1a2e; --panel-border: #334155; --btn-bg: #1e293b; --btn-text: #e2e8f0; --btn-hover-bg: #2563eb; --border-color: #3b82f6; --legend-bg: #1e293b; --legend-text: #94a3b8; --tooltip-bg: #1e293b; --tooltip-text: #e2e8f0; --tooltip-border: rgba(59, 130, 246, 0.4); --label-bg: transparent; --label-text: #e2e8f0; } /* 暗色模式下联系人标题为白色 */ .contact-item h3 { color: #ffffff; } } /* 修改：使用主题变量替换主要背景与文本颜色 */ body { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } .container { display: flex; flex-direction: row; max-width: 1800px; margin: 0 auto; padding: 20px; gap: 30px; /* 容器高度 = 视口/iframe 高度（带 600px 下限）； 两个面板 height:100% 跟随容器，天然等高，不再有底部错位 */ height: 100vh; min-height: 600px; } /* 地图容器样式（与 info-section 严格等高） */ .map-section { flex: 3; position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px var(--panel-shadow); border: 1px solid var(--panel-border); background: var(--map-bg); height: 100%; } #china-map { /* 让画布绝对定位填满容器，便于进行视觉缩放 */ position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; } /* 控制面板 */ .controls { position: absolute; bottom: 30px; left: 30px; z-index: 100; display: flex; gap: 15px; flex-wrap: wrap; } .control-btn { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--panel-border); border-radius: 50px; padding: 12px 24px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px var(--panel-shadow); display: flex; align-items: center; gap: 8px; } .control-btn:hover { background: var(--btn-hover-bg); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); color: #ffffff; border-color: var(--btn-hover-bg); } .control-btn.active { background: var(--btn-hover-bg); color: #ffffff; border-color: var(--btn-hover-bg); } /* 按钮内 SVG 图标（替代 emoji，跨平台渲染一致） */ .control-btn svg { width: 18px; height: 18px; flex-shrink: 0; } /* 键盘焦点可见性 */ .control-btn:focus-visible, .contact-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* 信息面板（与 map-section 严格等高，各自内部滚动） */ .info-section { flex: 1; background: var(--panel-bg); border-radius: 14px; padding: 16px 18px; box-shadow: 0 8px 24px var(--panel-shadow); border: 1px solid var(--panel-border); display: flex; flex-direction: column; height: 100%; min-width: 350px; overflow: hidden; } .panel-section { display: flex; flex-direction: column; min-height: 0; /* 允许 flex 子项收缩，分区内部才能滚动 */ } .contacts-panel { flex: 3; } /* 联系人区占 60% */ .offices-panel { flex: 2; } /* 办公网络区占 40% */ .panel-section-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; border-bottom: 2px solid var(--border-color); } .panel-section-header h2 { font-size: 1.3em; margin: 0; color: var(--text-primary); } .panel-section-count { font-size: 0.78em; color: var(--text-secondary); background: var(--btn-bg); border: 1px solid var(--tooltip-border); padding: 2px 10px; border-radius: 20px; } .panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 2px 4px; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } .panel-scroll::-webkit-scrollbar { width: 6px; } .panel-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } .panel-scroll::-webkit-scrollbar-track { background: transparent; } .panel-section-divider { flex-shrink: 0; height: 1px; margin: 8px 0; background: linear-gradient(90deg, transparent, var(--border-color), transparent); } /* 联系人卡片样式（紧凑版，左侧色条=该联系人的高亮色） */ .contact-item { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 12px 14px 12px 18px; margin-bottom: 10px; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .contact-item::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--card-accent, var(--accent)); } .contact-item:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18); } .contact-item.active { border-color: var(--accent); background: var(--panel-bg); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18); } .region { display: inline-block; background: var(--accent); color: white; padding: 3px 12px; border-radius: 30px; font-size: 0.78em; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px; } .contact-item h3 { color: var(--text-primary); margin-bottom: 6px; font-size: 1.12em; display: flex; align-items: center; gap: 8px; } /* 联系人姓名前的彩色圆点（替代 emoji） */ .contact-item h3::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--card-accent, var(--accent)); } .contact-details p { margin: 3px 0; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; font-size: 0.88em; } .contact-details strong { color: var(--text-primary); min-width: 40px; } /* 一键拨号 / 发邮件链接 */ .contact-details a, .office-item a { color: var(--accent); text-decoration: none; } .contact-details a:hover, .office-item a:hover { text-decoration: underline; } .email { color: var(--accent); word-break: break-all; } /* 加载指示器 */ #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.3em; color: var(--accent); background: rgba(30, 30, 46, 0.9); padding: 20px 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); z-index: 200; display: flex; align-items: center; gap: 15px; } .spinner { width: 30px; height: 30px; border: 3px solid rgba(37, 99, 235, 0.3); border-top: 3px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* WebGL/数据加载失败提示 */ .load-error { color: #ea4335; font-size: 0.8em; line-height: 1.6; max-width: 420px; text-align: center; } /* 提示框样式 */ #tooltip { position: absolute; background: var(--tooltip-bg); color: var(--tooltip-text); padding: 15px 25px; border-radius: 10px; font-size: 1.1em; pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 100; box-shadow: 0 8px 24px var(--panel-shadow); border: 1px solid var(--tooltip-border); max-width: 300px; } #tooltip h3, #tooltip h4 { color: var(--accent); margin-bottom: 8px; font-size: 1.3em; } #tooltip p { color: var(--tooltip-text); margin: 5px 0; font-size: 0.95em; } #tooltip p.no-contact { opacity: 0.75; } /* 多个负责人时用虚线分隔 */ #tooltip .tt-contact + .tt-contact { border-top: 1px dashed var(--tooltip-border); margin-top: 6px; padding-top: 6px; } /* 响应式设计 */ @media (max-width: 1200px) { .container { flex-direction: column; height: auto; /* 列布局下容器随内容高度，面板不再 100% 撑高 */ min-height: 0; } .map-section { height: auto; min-height: 600px; } .info-section { height: auto; max-height: 500px; } } @media (max-width: 768px) { .container { padding: 10px; gap: 20px; } .controls { bottom: 15px; left: 15px; } .control-btn { padding: 10px 18px; font-size: 14px; } /* 移动端画布视觉缩放，使"地图更大、容器不变" */ #china-map { transform: scale(1.25); transform-origin: center center; } /* 移动端：信息面板显示在【地图上方】（列布局 order:-1）， 高度受限、内部滚动；不再使用底部抽屉 */ .info-section { position: static; height: auto; max-height: 48vh; min-width: 0; border-radius: 14px; z-index: auto; padding: 12px; box-shadow: 0 8px 24px var(--panel-shadow); transform: none; transition: none; order: -1; /* 排到 map-section 上方 */ } .map-section { height: 640px; /* 固定高度（列布局下不随视口变化，避免 iframe 高度循环） */ min-height: 640px; border-radius: 14px; } } /* 更精细的竖屏适配（小屏竖屏时，地图固定高度，信息面板为底部抽屉） */ @media (orientation: portrait) and (max-width: 900px) { .map-section { height: 640px; min-height: 640px; } } @media (orientation: portrait) and (max-width: 480px) { .map-section { height: 640px; min-height: 640px; } /* 更小屏再提升缩放倍数，保持大地图视觉效果 */ #china-map { transform: scale(1.35); transform-origin: center center; } } /* 地图图例 */ .legend { position: absolute; bottom: 60px; right: 20px; background: var(--legend-bg); border-radius: 10px; padding: 12px; z-index: 100; border: 1px solid var(--panel-border); box-shadow: 0 6px 18px var(--panel-shadow); max-width: 200px; } .legend h3 { color: var(--text-primary); margin-bottom: 12px; font-size: 1em; border-bottom: 1px solid var(--border-color); padding-bottom: 6px; } .legend-item { display: flex; align-items: center; margin-bottom: 8px; } .color-box { /* 缩小色块尺寸 */ width: 16px; height: 16px; border-radius: 4px; margin-right: 8px; } .legend-text { color: var(--legend-text); font-size: 0.85em; } /* ==================== 省份搜索 ==================== */ .map-search { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 150; width: min(320px, calc(100% - 40px)); } #province-search { width: 100%; padding: 10px 18px; font-size: 15px; color: var(--btn-text); background: var(--btn-bg); border: 1px solid var(--panel-border); border-radius: 50px; outline: none; box-shadow: 0 2px 6px var(--panel-shadow); transition: all 0.3s ease; } #province-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); } #province-search::placeholder { color: var(--text-secondary); opacity: 0.7; } .search-results { list-style: none; margin-top: 8px; padding: 6px; background: var(--panel-bg); border-radius: 12px; box-shadow: 0 8px 24px var(--panel-shadow); max-height: 280px; overflow-y: auto; border: 1px solid var(--tooltip-border); } .search-item { padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 15px; color: var(--text-primary); transition: background 0.2s ease; } .search-item:hover, .search-item:focus { background: var(--btn-hover-bg); color: #ffffff; } /* ==================== 2D 降级地图（SVG） ==================== */ .map-fallback { position: absolute; inset: 0; width: 100%; height: 100%; } /* 3D 模式下 SVG 处于 hidden 状态：不显示，也不拦截鼠标事件 （注意不能用 display:block 覆盖 hidden，否则空 SVG 会盖住画布吞掉所有 hover/click） */ .map-fallback[hidden] { display: none; pointer-events: none; } .map-fallback .svg-label { fill: var(--label-text); font-size: 15px; pointer-events: none; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); } .map-fallback path { transition: fill 0.25s ease; cursor: pointer; } .map-fallback path:hover { filter: brightness(1.15); } /* 边界/标签开关（SVG 模式） */ .map-fallback.borders-hidden path { stroke: none; } .map-fallback.labels-hidden .svg-label { display: none; } /* SVG 模式下隐藏 3D 专属按钮（办公网络/科技模式为 3D 能力） */ body.svg-mode #toggle-offices, body.svg-mode #toggle-tech { display: none; } /* ==================== 办公网络面板（紧凑版） ==================== */ .office-item { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 14px 10px 18px; margin-bottom: 8px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .office-item::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--card-accent, #22d3ee); } .office-item:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 14px var(--panel-shadow); } .office-item.active { border-color: var(--accent); box-shadow: 0 6px 14px var(--panel-shadow); } .office-item h4 { font-size: 1em; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .office-item p { margin: 2px 0; color: var(--text-secondary); font-size: 0.85em; } .office-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ==================== 可选功能样式（默认隐藏，后台开关启用） ==================== */ /* 公司信息横幅 */ .company-banner { text-align: center; padding: 28px 20px 8px; max-width: 1800px; margin: 0 auto; } .company-banner h1 { font-size: 2.2em; color: var(--text-primary); margin-bottom: 6px; } .company-banner p { color: var(--text-secondary); font-size: 1.1em; } .company-banner:not([hidden]) + .container { padding-top: 8px; } /* 微信二维码弹窗 */ .modal { position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } /* 必须显式处理 hidden，否则 display:flex 会覆盖 hidden 属性 */ .modal[hidden] { display: none; } .modal-box { position: relative; background: #ffffff; border-radius: 14px; padding: 24px 28px; text-align: center; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3); max-width: 340px; } .modal-box h3 { color: #0f172a; margin-bottom: 14px; font-size: 1.15em; } .modal-box img { width: 200px; height: 200px; object-fit: contain; border-radius: 8px; } .modal-close { position: absolute; top: 8px; right: 12px; border: none; background: none; font-size: 24px; line-height: 1; color: #94a3b8; cursor: pointer; } .modal-close:hover { color: #0f172a; } body.modal-open { overflow: hidden; } /* 轻提示（复制成功等） */ .toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(10px); background: rgba(15, 23, 42, 0.9); color: #ffffff; padding: 10px 22px; border-radius: 50px; font-size: 0.95em; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 400; } .toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); } /* 复制按钮 / 微信按钮 */ .copy-btn, .wechat-btn { border: 1px solid var(--panel-border); background: var(--btn-bg); color: var(--btn-text); font-size: 0.82em; padding: 1px 10px; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; } .copy-btn:hover, .wechat-btn:hover { background: var(--btn-hover-bg); color: #ffffff; border-color: var(--btn-hover-bg); } .wechat-btn { color: var(--accent); border-color: var(--accent); padding: 3px 14px; }