/* 顶部导航栏容器 标题 */

#dingbu {
  position: fixed; /* 固定在顶部 */
  top: 10px;
  left: 1px;
  right: 1px;
  height: 8vh; /* 使用视口高度单位，随屏幕大小变化 */
  min-height: 60px; /* 设置最小高度确保可用性 */
  max-height: 120px; /* 设置最大高度避免过大 */
  margin-top: 0;
  /* 背景图片 - 改进为更好的响应式 */
  background: url("../image/title_bg.png") no-repeat center center;
  background-size: contain; /* 确保图片完整显示且保持比例 */
  background-position: center center; /* 居中显示 */
  text-align: center;
  z-index: 10; /* 确保导航栏在最上层 */
}

/* 项目名称样式 */

#dingbu .project-name {
  font-size: 36px; /* 项目名称字体大小 */
  color: #00ffcc; /* 修改为科技感颜色 */
  display: inline-block; /* 改为行内块元素 */
  margin: 0 20px; /* 左右间距 */
  text-shadow: 2px 2px 4px rgba(0, 255, 204, 0.7); /* 修改阴影颜色以增强科技感 */
  padding: 10px 20px; /* 添加内边距 */
  border-radius: 10px; /* 圆角效果 */
}

/* 导航列表样式 */

#dingbu ul {
  list-style: none; /* 去掉列表样式 */
  margin: 0; /* 去掉外边距 */
  padding: 0; /* 去掉内边距 */
  display: flex; /* 使用 flexbox 使导航项水平排列 */
  justify-content: center; /* 居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  width: 100%; /* 100% 宽度 */
}

/* 导航项样式 */

#dingbu li {
  display: inline-block; /* 使导航项为行内块元素 */
  vertical-align: middle; /* 垂直对齐 */
  font-family: "Microsoft YaHei", sans-serif; /* 字体 */
  font-size: 18px; /* 字体大小 */
  margin: 0 15px; /* 增加导航项之间的间距 */
  color: #66cc99; /* 修改为与金沙江沿江项目文字颜色一致 */
}

/* 导航链接样式 */

#dingbu a {
  line-height: 70px; /* 与导航栏高度一致 */
  display: block; /* 使链接为块级元素 */
  color: #f2f3f3; /* 首页----样式 */
  text-decoration: none; /* 去掉下划线 */
  padding: 0 15px; /* 减少内边距 */
  transition: all 0.3s ease; /* 添加过渡动画效果 */
}

/* 鼠标悬停效果 */

#dingbu a:hover {
  color: rgba(231, 79, 19, 1);
  transform: scale(1.1); /*悬停时变为橙色*/
}

/* 高亮显示样式 */

#dingbu a.highlight {
  color: rgba(231, 79, 19, 1) !important;
  /*设置高亮颜色*/
  font-weight: bold !important;
  /*设置加粗*/
  transform: scale(1.3);
}

/* 左侧容器样式 */

.zuo {
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 100%; /* 使用百分比宽度 */
  max-width: 500px; /* 最大宽度限制 */
  height: 100%; /* 使用百分比高度 */
  max-height: 400px; /* 最大高度限制 */
  margin: auto; /* 居中显示 */
}

.zuoshangwai {
  background-color: rgba(26, 43, 76, 0.1);
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  width: 100%; /* 使用百分比宽度 */
  max-width: 400px; /* 最大宽度限制 */
  height: 100%; /* 使用百分比高度 */
  max-height: 500px; /* 最大高度限制 */
  margin-top: 60px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.zuoshangnei, .line-chart {
  width: 100%; /* 使用百分比宽度 */
  max-width: 400px; /* 最大宽度限制 */
  height: 100%; /* 使用百分比高度 */
  max-height: 300px; /* 最大高度限制 */
  background-color: rgba(42, 59, 92, 0.2);
  border-radius: 8px;
  margin-top: 20px;
}

/* 媒体查询，根据屏幕大小调整样式 */

@media (max-width: 768px) {
  #dingbu {
      height: 60px;
  }
  #dingbu .project-name {
      font-size: 28px;
      margin: 0 10px;
  }
  #dingbu li {
      font-size: 16px;
      margin: 0 10px;
  }
  #dingbu a {
      line-height: 50px;
      padding: 0 10px;
  }
  .zuo {
      padding: 10px;
  }
  .zuoshangwai {
      padding: 10px;
      margin: 5px;
      margin-top: 30px;
  }
  .zuoshangnei, .line-chart {
      margin-top: 10px;
  }
}

@media (max-width: 480px) {
  #dingbu {
      height: 40px;
  }
  #dingbu .project-name {
      font-size: 20px;
      margin: 0 5px;
  }
  #dingbu li {
      font-size: 14px;
      margin: 0 5px;
  }
  #dingbu a {
      line-height: 30px;
      padding: 0 5px;
  }
  .zuo {
      padding: 5px;
  }
  .zuoshangwai {
      padding: 5px;
      margin: 3px;
      margin-top: 20px;
  }
  .zuoshangnei, .line-chart {
      margin-top: 5px;
  }
}

/* 顶部按钮样式 */

#dingbu-bottom-button {
  position: fixed; /* 固定在顶部 */
  top: 5px; /* 距离顶部的距离 */
  left: 0; /* 从页面最左端开始 */
  z-index: 1000; /* 确保在最上层 */
  display: flex; /* 使用 flexbox 布局 */
  justify-content: space-between; /* 左右分开 */
  width: 100%; /* 设置宽度为100% */
  padding: 0 20px; /* 添加左右内边距以保持内容不贴边 */
}

/* 为所有链接添加基本样式 */

#dingbu-bottom-button a {
  text-decoration: none; /* 去除下划线 */
  color: #ffffff; /* 设置文本颜色 */
  padding: 10px 20px; /* 设置内边距 */
  display: inline-block; /* 使链接块级显示，以包含椭圆框 */
  transition: background-color 0.3s; /* 添加背景色变化的过渡效果 */
}

/* 为按钮容器设置样式 */

#dingbu-bottom-button div {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-around; /* 平均分布按钮 */
}

#dingbu-bottom-button li {
  list-style-type: none; /* 去除列表项前的标记，如圆点或方块 */
  display: flex; /* 使用 Flexbox 布局，使得子元素（如文本）可以灵活对齐 */
  justify-content: center; /* 水平居中对齐 Flexbox 子元素 */
  align-items: center; /* 垂直居中对齐 Flexbox 子元素 */
  font-size: 15px; /* 设置文本字体大小 */
  width: 100%; /* 使用百分比宽度 */
  max-width: 100px; /* 最大宽度限制 */
  height: 50px; /* 设置按钮的高度 */
  border-width: 1px; /* 设置边框的宽度 */
  border-color: rgba(0, 255, 204, 0.7); /* 设置边框的颜色 */
  border-radius: 28px; /* 设置边框圆角的半径，数值较大时会创建椭圆形状 */
  text-shadow: 1px 1px 0px #2f6627; /* 设置文本阴影效果，增加立体感 */
  background: rgba(0, 255, 204, 0.4); /* 设置背景颜色 */
  margin: 10px; /* 设置外边距，即按钮与其他元素之间的距离 */
  text-align: center; /* 确保文本居中对齐 */
  white-space: nowrap; /* 防止文本换行，保持按钮内的文本在一行显示 */
}

/* 媒体查询，根据屏幕大小调整样式 */

@media (max-width: 768px) {
  #dingbu-bottom-button li {
      font-size: 14px; /* 在小屏幕上减少字体大小 */
      height: 40px; /* 在小屏幕上减少按钮高度 */
      margin: 5px; /* 在小屏幕上减少外边距 */
  }
}

@media (max-width: 480px) {
  #dingbu-bottom-button li {
      font-size: 12px; /* 在更小屏幕上进一步减少字体大小 */
      height: 30px; /* 在更小屏幕上进一步减少按钮高度 */
      margin: 3px; /* 在更小屏幕上进一步减少外边距 */
  }
}

/* 为按钮列表项悬停时添加样式 */

#dingbu-bottom-button li:hover {
  background-color: #5aa75b; /* 悬停时的背景色，使用更和谐的颜色 */
  transform: scale(1.1); /* 悬停时轻微放大 */
}

/* 左侧和右侧按钮样式 */

.left-buttons, .right-buttons {
  display: flex; /* 使用 flexbox 使按钮水平排列 */
  margin: 0; /* 移除左右间距 */
}

/* 调整左侧和右侧按钮的对齐 */

.left-buttons {
  justify-content: flex-start; /* 左侧按钮靠左对齐 */
}

.right-buttons {
  justify-content: flex-end; /* 右侧按钮靠右对齐 */
}

/* 平板设备 */
@media (max-width: 768px) {
  #dingbu {
    height: 7vh;
    min-height: 50px;
    max-height: 80px;
    top: 5px;
  }
}

/* 手机设备 */
@media (max-width: 480px) {
  #dingbu {
    height: 6vh;
    min-height: 40px;
    max-height: 60px;
    top: 3px;
    background-size: cover; /* 在小屏幕上可能需要覆盖整个区域 */
  }
}