.navigationBar {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navItems {
  display: flex;
  gap: 16px;
}

.navItemContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navItem {
  width: 205px;
  height: 71px;
  background: url('~@/assets/images/V-2504/map-navigate.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.navItemActive {
  background: url('~@/assets/images/V-2504/map-navigate-active.png') no-repeat;
  background-size: 100% 100%;
}

.navIcon {
  width: 30px;
  height: 30px;
  margin-right: 9px;
  flex-shrink: 0;
}

.navLabel {
  color: rgb(255, 255, 255);
  font-family: 'DingTalk JinBuTi';
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
}

.subNavItems {
  position: absolute;
  bottom: 71px;    // tsj： 这里高度要设置为71px，否则会导致鼠标上移进入与子菜单项的中间区域，导致子菜单项消失。
  // bottom: 81px;
  width: 505px;  // tsj： 这里宽度要设置为505px，否则会导致子菜单项由于宽度不够展示不出来。
  left: 0;      // tsj： 这里left要设置为0，否则会导致整个菜单栏偏移。
  
  // width: 205px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 13px;
  max-height: 660px;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    display: none;
  }
}

.subNavItem {
  width: 205px;
  height: 60px;
  background: rgb(23, 73, 146);
  border-radius: 35.5px;
  box-shadow: inset 0px 0px 20px 0px rgb(0, 166, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  font-family: 'DingTalk JinBuTi';
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0;
  
  &:hover {
    background: rgb(249, 183, 79);
    box-shadow: inset 0px 0px 20px 0px rgb(255, 204, 122);
  }
}

// 激活状态样式
.subNavItemActive {
  background: rgb(249, 183, 79);
  box-shadow: inset 0px 0px 20px 0px rgb(255, 204, 122);
  color: #fff;
}

// 禁用状态样式
.subNavItemDisabled {
  cursor: not-allowed;
  // opacity: 0.6;   // tsj： 不要用opacity，会导致子菜单项也带有模糊（因为都使用了subNavItem，它没有重置opacity，哪怕重置opacity要用!important才能生效）；这里就用rgba设置background的透明度就可以了。
  background: rgba(23, 73, 146, 0.6);
  box-shadow: none;
  
  &:hover {
    background: rgba(23, 73, 146, 0.6);
    box-shadow: none;
  }
}

// 有子菜单的导航项样式
.subNavItemWithChildren {
  position: relative;
  
  &:hover .subSubNavItems {
    display: flex;
  }
}

.subNavArrow {
  position: absolute;
  right: 15px;
  font-size: 18px;
}

// 二级子菜单样式
.subSubNavItems {
  position: absolute;
  left: 215px;
  top: 0;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 13px;
  max-height: 300px;
  z-index: 1000;
  
  // 始终可见的子菜单
  &.alwaysVisible {
    display: flex;
  }
} 