NetsPro/Reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

фикс счетчика сообщений

Browse Source
This commit is contained in:
Professional 2025-05-24 23:46:45 +07:00
parent 849b951963
commit d4c869a82c
2 changed files with 67 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/App.vue
View File

@ -257,6 +257,40 @@ body {
height: 28px; height: 28px;
} }
/* Стили для индикатора непрочитанных сообщений в навигации */
.nav-icon .unread-badge {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: white;
font-size: 0.65rem;
font-weight: 700;
border-radius: 10px;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
border: 2px solid white;
animation: pulse-notification 2s ease-in-out infinite;
z-index: 1;
}
/* Анимация пульсации для привлечения внимания */
@keyframes pulse-notification {
0%, 100% {
transform: scale(1);
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
}
50% {
transform: scale(1.1);
box-shadow: 0 3px 12px rgba(255, 107, 107, 0.6);
}
}
/* Оборачиваем текст для лучшего управления */ /* Оборачиваем текст для лучшего управления */
.nav-text { .nav-text {
font-size: 0.7rem; font-size: 0.7rem;
@ -266,6 +300,16 @@ body {
display: block; display: block;
} }
/* Активная вкладка */
.nav-item.active {
color: #667eea;
}
.nav-item.active .nav-icon i {
color: #667eea;
transform: translateY(-2px);
}
/* CSS переменные для динамической настройки */ /* CSS переменные для динамической настройки */
:root { :root {
--nav-height: 60px; --nav-height: 60px;

31
src/views/ChatListView.vue
View File

@ -510,18 +510,33 @@ const getDialogsCountText = (count) => {
position: absolute; position: absolute;
top: -2px; top: -2px;
right: -2px; right: -2px;
background-color: #ff6b6b; background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: white; color: white;
font-size: 0.7rem; font-size: 0.65rem;
border-radius: 50%; font-weight: 700;
min-width: 18px; border-radius: 10px;
height: 18px; min-width: 20px;
height: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 600; padding: 0 6px;
box-shadow: 0 2px 5px rgba(255, 107, 107, 0.3); box-shadow: 0 3px 8px rgba(255, 107, 107, 0.4);
border: 1px solid white; border: 2px solid white;
z-index: 2;
animation: subtle-pulse 2s ease-in-out infinite;
}
/* Мягкая анимация пульсации для непрочитанных сообщений */
@keyframes subtle-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 3px 8px rgba(255, 107, 107, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.6);
}
} }
/* Информация о диалоге */ /* Информация о диалоге */