You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
3.4 KiB
157 lines
3.4 KiB
/* 页面容器 */
|
|
.page-container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
}
|
|
|
|
/* 按钮组样式 */
|
|
.button-group {
|
|
width: 92%;
|
|
margin: 24rpx auto;
|
|
display: flex;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 8rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 按钮基础样式 */
|
|
.button {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #666;
|
|
background: transparent;
|
|
border-radius: 16rpx;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 激活状态按钮 */
|
|
.button.active {
|
|
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
box-shadow: 0 4rpx 16rpx rgba(106, 17, 203, 0.3);
|
|
}
|
|
|
|
/* 按钮点击效果 */
|
|
.button:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* 地图容器 */
|
|
.map-container {
|
|
width: 92%;
|
|
margin: 0 auto;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15);
|
|
height: calc(100vh - 200rpx);
|
|
position: relative;
|
|
}
|
|
|
|
/* 地图本身样式 */
|
|
.map-container map {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 24rpx;
|
|
display: block; /* 确保正确显示 */
|
|
}
|
|
|
|
/* 问题修复：移除或修改覆盖层 */
|
|
/* 原来的 ::before 伪元素会覆盖地图，阻挡交互 */
|
|
/* 如果你需要加载状态，可以这样修改： */
|
|
|
|
.map-container.loading::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
opacity: 0.3; /* 降低不透明度 */
|
|
transition: opacity 0.3s;
|
|
border-radius: 24rpx;
|
|
z-index: -1; /* 放到地图后面 */
|
|
pointer-events: none; /* 关键：不阻挡点击事件 */
|
|
}
|
|
|
|
/* 或者完全移除加载状态样式，因为地图有自己的加载状态 */
|
|
|
|
/* 地图控制按钮样式（如果需要添加） */
|
|
.map-controls {
|
|
position: absolute;
|
|
right: 24rpx;
|
|
bottom: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
z-index: 100;
|
|
}
|
|
|
|
.map-control-btn {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
transition: all 0.2s;
|
|
border: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.map-control-btn:active {
|
|
background: rgba(240, 240, 240, 0.95);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.map-control-btn.location {
|
|
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
/* 响应式适配 */
|
|
@media (max-width: 480px) {
|
|
.button-group {
|
|
width: 94%;
|
|
margin: 20rpx auto;
|
|
}
|
|
|
|
.map-container {
|
|
width: 94%;
|
|
height: calc(100vh - 180rpx);
|
|
}
|
|
|
|
.button {
|
|
height: 80rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.map-controls {
|
|
right: 16rpx;
|
|
bottom: 30rpx;
|
|
}
|
|
|
|
.map-control-btn {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|