WIP Добавила даты в стор

src/pages/newCalendar/components/CalendarWrapper.vue

@@ -1,32 +1,32 @@
 <template lang="pug">
-  .schedule.flex-1.flex.gap-y-1.flex-col(
+  .schedule.flex-1.flex.flex-col(
     :style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
   )
-    calendar-header.w-full
-    .schedule-body.rounded.h-full.bg-white.w-full
-      .w-full(:style="{height: '60px'}")
-      .flex.w-full.relative
+    calendar-header.w-full.mb-1
+    .schedule-body.h-full.bg-white.w-full
+      .column-wrapper.flex.ml-20(:style="{width: '3040px'}")
+        calendar-column
+      .flex.w-full.relative.margin
         .time-coil-wrapper.left-0.-mt-12
           calendar-clock-column(:time-coil="timeCoil")
         calendar-background
-    // q-scroll-area.rounded(
-      :horizontal-thumb-style="thumbStyle",
-      :horizontal-bar-style="barStyle",
-      visible
-      style="height: 100%; max-width: 100%"
-    //)
-      .flex.bg-red-700.background(:style="{width: '3040px', height: '400px'}")
-      .bar-conteiner.w-full.rounded.bg-white.h-8.absolute.bottom-0
+    .w-full.h-3.bg-white.footer
 </template>
 
 <script>
 import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
 import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
 import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
+import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
 import { mapState } from "vuex";
 export default {
   name: "CalendarWrapper",
-  components: { CalendarHeader, CalendarBackground, CalendarClockColumn },
+  components: {
+    CalendarHeader,
+    CalendarBackground,
+    CalendarClockColumn,
+    CalendarColumn,
+  },
   props: {
     openSidebar: Boolean,
   },
@@ -64,14 +64,11 @@ export default {
 <style lang="sass" scoped>
 .schedule-body
   width: 100%
-  //overflow-y: auto
   overflow-x: auto
-  //&::-webkit-scrollbar-track:horizontal
-  //  margin: 0 24px 0 104px
-  //&::-webkit-scrollbar-track:vertical
-  //  margin: 48px 0 24px 0
-.q-scrollarea :deep(.q-scrollarea__bar), .q-scrollarea :deep(.q-scrollarea__thumb)
-  opacity: 1
+  border-top-left-radius: 4px
+  border-top-right-radius: 4px
+  &::-webkit-scrollbar-track:horizontal
+    margin: 0 24px 0 24px
 
 .background
   background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)
@@ -81,4 +78,15 @@ export default {
   z-index: 5
   background-color: var(--default-white)
   padding-top: 38px
+
+.column-wrapper
+  position: relative
+  background-color: var(--default-white)
+
+.footer
+  border-bottom-left-radius: 4px
+  border-bottom-right-radius: 4px
+
+.margin
+  border-bottom: 4px solid var(--bg-ligth-blue-color)
 </style>