diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 942b955..4012caa 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,4 +1,8 @@
@@ -33,13 +42,34 @@ const navItems: NavItem[] = [
@@ -66,9 +96,9 @@ const navItems: NavItem[] = [
// 导航首项 x275 = 左留白 155 + 120
&__nav {
.flex(row, center);
- gap: @header-nav-gap; // 设计实测 94(首页 x275→311,案例库 x405)
+ gap: @header-nav-gap; // 设计实测 94(首页 x275→311,案例库 x405)
height: 100%;
- margin-left: 120px;
+ margin-left: 0px;
@media (max-width: 1600px) {
gap: 48px;
@@ -110,7 +140,7 @@ const navItems: NavItem[] = [
&__actions {
.flex(row, flex-end, center);
- gap: 29px; // 设计:胶囊1 右缘 1665 → 胶囊2 左缘 1694
+ gap: 29px; // 设计:胶囊1 右缘 1665 → 胶囊2 左缘 1694
margin-left: auto;
flex-shrink: 0;
}
@@ -137,5 +167,41 @@ const navItems: NavItem[] = [
height: 18px;
}
}
+
+ // 🔔 消息铃铛:展示未读数量红点,点击进入消息中心
+ &__bell {
+ position: relative;
+ .flex(row, center, center);
+ width: 36px;
+ height: 36px;
+ flex-shrink: 0;
+
+ &-icon {
+ font-size: 20px;
+ line-height: 1;
+ }
+ }
+
+ &__badge {
+ position: absolute;
+ top: -2px;
+ right: -2px;
+ min-width: 16px;
+ height: 16px;
+ padding: 0 4px;
+ border-radius: @radius-round;
+ background: @danger-color;
+ color: @white;
+ font-size: 12px;
+ line-height: 16px;
+ text-align: center;
+ box-sizing: border-box;
+ }
+
+ // 登录:文字链接,点击直达登录页
+ &__login {
+ font-size: 16px;
+ font-weight: 500;
+ }
}