MoeNovaClient/pages/isLand/mainLand.scss

.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;
  }
}