优化导航栏样式
Change-Id: I3fd2699869417c9ea4d55e96059b3028c18e8492
diff --git a/src/components/Header.css b/src/components/Header.css
index 5d60638..859cff9 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -1,42 +1,94 @@
+/* Header 样式 */
.header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 10px;
- }
- .logo-and-name {
- display: flex;
- align-items: center;
- }
- .logo {
- height: 30px;
- margin-right: 10px;
- }
- .site-name {
- font-size: 24px;
- }
- .user-and-message {
- display: flex;
- align-items: center;
- }
- .user-avatar {
- height: 40px;
- margin-right: 10px;
- }
- .message-center {
- font-size: 16px;
- }
- .nav {
- background-color: #dab8c2;
- display: flex;
- justify-content: center;
- }
- .nav-item {
- color: white;
- text-decoration: none;
- padding: 10px 20px;
- }
- .active {
- background-color: #996633;
- }
-
\ No newline at end of file
+ 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，使文字更居中 */
+}
+
+