/* 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; | |
} | |