feat: add BETA label and UI improvements for TeleCart Pulse tab
- Add BETA badge to TeleCart Pulse tab in navigation - Implement pulsing heartbeat animation for pulse icon - Add dynamic color change for icon (light red when inactive, bright red when active) - Add dynamic color change for BETA label (light orange when inactive, bright orange when active) - Add informational block about TeleCart Pulse in TeleCartPulseView component - Update App.vue with pulse icon animation and styling - Update TeleCartPulseView.vue with info block and styling
This commit is contained in:
@@ -58,7 +58,7 @@
|
||||
|
||||
<li :class="{active: route.name === 'pulse'}">
|
||||
<RouterLink :to="{name: 'pulse'}">
|
||||
<i class="fa fa-heartbeat"></i> TeleCart Pulse
|
||||
<i class="fa fa-heartbeat pulse-icon tw:text-red-200"></i> TeleCart Pulse <span class="pulse-beta-label tw:ml-1 tw:px-1.5 tw:py-0.5 tw:text-xs tw:font-semibold tw:text-white tw:rounded">BETA</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
@@ -152,5 +152,36 @@ onBeforeUnmount(() => {
|
||||
|
||||
|
||||
<style scoped>
|
||||
@keyframes heartbeat {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
20%, 40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-icon {
|
||||
animation: heartbeat 1.5s ease-in-out infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-tabs li.active .pulse-icon {
|
||||
color: #ef4444; /* red-500 */
|
||||
}
|
||||
|
||||
.pulse-beta-label {
|
||||
background-color: #fdba74; /* orange-300 - тусклый */
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-tabs li.active .pulse-beta-label {
|
||||
background-color: #f97316; /* orange-500 - яркий */
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user