| /* map-style.css */ | |
| #map-container { | |
| position: relative; | |
| overflow: hidden; | |
| background: #f5f5f5; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| border: 1px solid #ccc; | |
| text-align:center; | |
| left:0; | |
| right:0; | |
| margin:auto; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| .map-title { | |
| font-size: 1.2em; | |
| color: #5f3737; | |
| margin: 0 0 10px 0; | |
| padding-bottom: 5px; | |
| border-bottom: 1px solid #5f3737; | |
| margin-top: 10px; | |
| } | |
| /* 设置背景图样式 */ | |
| .map-background { | |
| height: auto; | |
| opacity: 0.8; | |
| position: absolute; | |
| z-index: 0; | |
| object-fit: cover; | |
| background-repeat: repeat; | |
| top: 0; | |
| left: 0; | |
| } | |
| /* node */ | |
| .node { | |
| cursor: pointer; | |
| } | |
| .node circle { | |
| fill: #d0a994; | |
| stroke: #603737; | |
| stroke-width: 2px; | |
| } | |
| .node circle.selected { | |
| fill: #ff6666; | |
| stroke: #990000; | |
| } | |
| .node text { | |
| fill: #060000; | |
| font-family: Arial; | |
| font-weight: bold; | |
| font-size: 12px; | |
| } | |
| /* 确保节点在背景上层 */ | |
| .nodes-container { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .popup { | |
| position: absolute; | |
| background: white; | |
| border: 1px solid #999; | |
| border-radius: 5px; | |
| padding: 10px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.2); | |
| pointer-events: none; | |
| } | |
| .link { | |
| stroke: #999; | |
| stroke-opacity: 0.6; | |
| stroke-width: 2px; | |
| } | |
| .distance-label { | |
| font-family: Arial; | |
| font-size: 16px; | |
| font-weight: bold; | |
| fill: #666; | |
| } | |