.main-land-container { width: 100%; height: 100vh; overflow: hidden; position: relative; // background-color: #fff000; /* 天空蓝背景色 */ .scroll-container { width: 100%; height: 100%; position: relative; overflow: hidden; touch-action: pan-x; } /* 第三层:背景层 */ .background-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #87CEEB, #4682B4); /* 渐变背景 */ z-index: 1; /* 最底层 */ user-select: none; /* 禁止选中 */ pointer-events: none; /* 禁止交互 */ } /* 第二层:地图层(可拖动) */ .map-layer { position: fixed; bottom: 0; left: 0; width: 1536rpx; /* 地图比屏幕大 */ height: 100%; z-index: 2; /* 中间层 */ cursor: grab; /* 拖动光标 */ // background-color: red; } /* 第一层:UI层(最上层) */ .ui-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; /* 最上层 */ pointer-events: none; /* 允许穿透点击,但内部元素可交互 */ } /* UI层内部元素需要启用交互 */ .ui-content { pointer-events: none; /* 重新启用交互 */ bottom: 150px; padding-top: 50px; height: 120px; } /* 示例按钮样式 */ .dialog-button { pointer-events: auto; /* 重新启用交互 */ background: white; // bottom: 150px; padding: 10px 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } text { font-size: 16px; color: #333; } }