src/components/Header.css

/* Header 样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* 增加左右间距，避免元素靠得太近 */
  background-color: #5F4437; /* 深棕色背景 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
}

/* Logo 和网站名称 */
.logo-and-name {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 10px;
}

.site-name {
  font-size:32px;
  font-weight: bold;
  color: #FBF2E3; /* 更加柔和的字体颜色 */
}

/* 用户头像和消息中心 */
.user-and-message {
  display: flex;
  align-items: center;
}

.user-avatar {
  height: 50px;
  width: 50px; /* 确保头像是圆形 */
  border-radius: 50%; /* 圆形 */
  margin-right: 10px;
}

.message-center {
  font-size: 24px;
  color: #FBF2E3; /* 统一字体颜色 */
  cursor: pointer;
  transition: color 0.3s ease; /* 平滑过渡 */
}

.message-center:hover {
  color: #D8C0A1; /* 当鼠标悬停时字体颜色变亮 */
}

/* 导航栏样式 */
.nav {
  display: flex;
  justify-content: center;
  background-color: #dab8c2;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加阴影 */
  transition: background 0.3s ease; 
}

/* 每个导航项 */
.nav-item {
  padding: 14px 12px;
  text-decoration: none;
  color: #FBF2E3;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  border-radius: 8px; /* 圆角效果 */
  transition: background-color 0.3s, color 0.3s, transform 0.3s ease; /* 平滑过渡 */
  position: relative; /* 为阴影和动画提供定位 */
}

/* 鼠标悬停时 */
.nav-item:hover {
  background-color: #5c270c; /* 背景色变深 */
  color: #FBF2E3; /* 字体颜色与背景形成对比 */
  transform: scale(1.05); /* 微微放大，增加互动感 */
}

/* 选中状态 */
.nav-item.active {
  background-color: #5c270c; /* 活动状态时的背景色 */
  color: #FBF2E3; /* 活动状态时的字体颜色 */
  font-weight: bold;
  border-radius: 16px; /* 更圆的圆角效果 */
  padding: 4px 12px; /* 减小上下和左右的padding，框变小 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 增加阴影，带来浮动感 */
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s ease; /* 平滑过渡 */
  transform: scale(1.1); /* 选中项微微放大 */
  line-height: 40px; /* 调整line-height，使文字更居中 */
}