diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass index a3177c6..124a255 100644 --- a/src/assets/sass/variables.sass +++ b/src/assets/sass/variables.sass @@ -17,3 +17,4 @@ --bg-hover-row-table: rgba(215, 217, 255, 0.25) --default-white: #fff --btn-red-color: #ff6f6f + --time-indicator-color: #E93131 diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue index 4b49368..e7d8d2f 100644 --- a/src/pages/calendar/components/CalendarColumn.vue +++ b/src/pages/calendar/components/CalendarColumn.vue @@ -6,7 +6,8 @@ span.member-name.font-medium.text-base.mr-6 {{ info.name }} img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg") base-doc-ok-button - .body.flex.flex-col + .flex.flex-col + span.block.time-indicator(:style="indicatorLocation") .line.flex.items-center(v-for="hour in hoursArray" :key="hour") .middle-line @@ -24,6 +25,22 @@ export default { }, }, hoursArray: Array, + currentTime: String, + }, + computed: { + indicatorLocation() { + return { + top: `${this.calculateIndicatorLocation()}px`, + }; + }, + }, + methods: { + calculateIndicatorLocation() { + let newTime = this.currentTime + .split(":") + .map((elem) => parseInt(elem, 10)); + return (newTime[0] - 7) * 60 + newTime[1]; + }, }, }; @@ -31,6 +48,7 @@ export default { diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue index 547437b..a70755f 100644 --- a/src/pages/calendar/components/CalendarSchedule.vue +++ b/src/pages/calendar/components/CalendarSchedule.vue @@ -7,7 +7,7 @@ @selected-layout="selectedLayout") .schedule-body.flex calendar-clock-column(:hoursArray="hoursArray") - calendar-column(:info="columnInfo" :hoursArray="hoursArray") + calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currtentTime")