WIP Сделала разлиновку подложки календаря

src/pages/calendar/components/CalendarColumn.vue

@@ -1,11 +1,14 @@
 <template lang="pug">
-  .calendar-column-wrapper
+  .calendar-column-wrapper.flex.flex-col
     .header.flex.items-center.justify-between.py-2.px-6
       .flex.items-center
         img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
         span.member-name.font-medium.text-base.mr-6 {{ info.name }}
-        img.icon-wrapper(src="@/assets/icons/lock.svg")
-      base-doc-ok-button  
+        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
+      base-doc-ok-button
+    .body.flex.flex-col
+      .line.flex.items-center(v-for="hour in 10" :key="hour")
+        .middle-line
 </template>
 <script>
 import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
@@ -20,9 +23,6 @@ export default {
       },
     },
   },
-  data() {
-    return {};
-  },
 };
 </script>
 
@@ -33,6 +33,7 @@ export default {
 
 .header
   height: 48px
+  border-bottom: 1px solid var(--border-light-grey-color)
 
 .avatar-wrapper
   width: 32px
@@ -44,4 +45,12 @@ export default {
 
 .member-name
   color: var(--font-dark-blue-color)
+
+.line
+  border-bottom: 1px solid var(--border-light-grey-color)
+  height: 62px
+
+.middle-line
+  border-top: 1px dashed var(--border-light-grey-color)
+  width: 100%
 </style>