[WIP] Добавил отображение текущего времни в расписаниии и анимацию на окошко замены смен

src/pages/schedule/components/ScheduleHeader.vue

@@ -1,7 +1,12 @@
 <template lang="pug">
   .flex.flex-col.gap-y-5
     .flex.justify-center.pl-8.pr-20.font-bold.text-xl Планировщик смен
-    form-change-shift(v-if="showForm", :close-form="closeForm")
+    transition(name="form")
+      form-change-shift(
+        v-if="showForm",
+        :close-form="closeForm",
+        :times-shift="timesShift"
+      )
     .flex
       .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
         .flex
@@ -22,9 +27,8 @@
             :size="32"
           )
           .text.flex.items-center
-            span.text.font-medium.text-base {{ dateString }}
-              span.today.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий  
-        //.flex.text-xl Жмых Олег Анатольевич
+            .text.font-medium.text-base {{ dateString }}
+              .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
         base-button.font-semibold(:size="40", @click="openForm") Замена смен
 </template>
 
@@ -37,6 +41,7 @@ export default {
   components: { BaseButton, FormChangeShift },
   props: {
     startMonth: Object,
+    timesShift: Object,
   },
   data() {
     return {
@@ -99,6 +104,22 @@ export default {
 .text
   color: var(--font-dark-blue-color)
 
-.today
-  opacity: 0.5
+.form-enter-from
+  opacity: 0
+  transform: translateY(300px)
+  pointer-events: none
+
+.form-enter-active
+  transition: 0.5s ease
+
+.form-leave-to
+  opacity: 0
+  transform: translateY(300px)
+  pointer-events: none
+
+.form-leave-active
+  transition: 0.5s ease
+
+.form-move
+  transition: 0.5s ease
 </style>