.map-container { display: flex; flex-direction: column; height: 100vh; background-color: #f8f9fa; } /* 顶部导航栏 */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 50rpx 30rpx 20rpx; background-color: #ffffff; position: relative; z-index: 10; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .back-btn { display: flex; align-items: center; padding: 10rpx 20rpx; border-radius: 30rpx; background-color: rgba(0, 0, 0, 0.05); transition: all 0.2s ease; } .back-btn:active { background-color: rgba(0, 0, 0, 0.1); } .back-icon { font-size: 32rpx; color: #333; font-weight: bold; margin-right: 5rpx; } .back-text { font-size: 28rpx; color: #333; } .title { font-size: 32rpx; font-weight: bold; color: #333; position: absolute; left: 50%; transform: translateX(-50%); } /* 地图视图 */ .map-view { flex: 1; position: relative; overflow: hidden; } .map { width: 100%; height: 100%; } /* 搜索框 */ .search-box { position: absolute; top: 20rpx; left: 30rpx; right: 30rpx; height: 80rpx; background-color: #fff; border-radius: 40rpx; display: flex; align-items: center; padding: 0 30rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); z-index: 100; } .search-icon { font-size: 36rpx; margin-right: 20rpx; color: #999; } .search-input { flex: 1; height: 80rpx; font-size: 28rpx; } /* 测试按钮 */ .debug-panel { position: absolute; top: 20rpx; right: 30rpx; display: flex; flex-direction: column; gap: 10rpx; z-index: 100; } .debug-btn { padding: 10rpx 15rpx; border-radius: 10rpx; background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1); transition: all 0.2s ease; text-align: center; } .debug-btn:active { background-color: rgba(0, 0, 0, 0.1); } .debug-btn text { font-size: 28rpx; color: #333; } /* 底部面板 */ .bottom-panel { position: absolute; bottom: 0; left: 0; right: 0; background-color: #fff; border-radius: 30rpx 30rpx 0 0; padding: 30rpx; box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1); z-index: 100; display: flex; flex-direction: column; max-height: 60vh; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .panel-title { font-size: 32rpx; font-weight: bold; color: #333; } .panel-subtitle { font-size: 24rpx; color: #999; } /* 地点列表 */ .location-list { max-height: 40vh; margin-bottom: 20rpx; } .location-item { display: flex; align-items: center; padding: 20rpx; margin-bottom: 10rpx; background-color: #f8f9fa; border-radius: 10rpx; position: relative; } .location-item.active { background-color: #e6f7ff; } .location-index { width: 40rpx; height: 40rpx; border-radius: 50%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: #fff; display: flex; justify-content: center; align-items: center; font-size: 24rpx; font-weight: bold; margin-right: 15rpx; } .location-info { flex: 1; } .location-name { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 5rpx; } .location-address { font-size: 24rpx; color: #999; } .location-actions { display: flex; } .action-btn { width: 60rpx; height: 60rpx; display: flex; justify-content: center; align-items: center; } .delete-btn { color: #ff4d4f; } .action-icon { font-size: 36rpx; } /* 空状态 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40rpx 0; } .empty-icon { font-size: 60rpx; margin-bottom: 20rpx; } .empty-text { font-size: 28rpx; color: #999; } /* 底部按钮 */ .action-buttons { display: flex; justify-content: space-between; margin-top: 20rpx; } .action-btn { height: 80rpx; border-radius: 40rpx; display: flex; justify-content: center; align-items: center; font-size: 28rpx; transition: all 0.3s ease; } .secondary { width: 30%; background-color: #f0f0f0; color: #666; } .secondary:active { background-color: #e0e0e0; } .primary { width: 65%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: #fff; box-shadow: 0 4rpx 15rpx rgba(79, 172, 254, 0.4); } .primary:active { transform: translateY(2rpx); box-shadow: 0 2rpx 8rpx rgba(79, 172, 254, 0.3); } .disabled { opacity: 0.6; }