60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template lang="pug">
|
|
.flex.flex-col(
|
|
:style="backgroundExtendedWidth"
|
|
)
|
|
.flex.flex-col
|
|
.line-wrapper
|
|
.line.flex.items-center(
|
|
v-for="hour in timeCoil",
|
|
:key="hour"
|
|
)
|
|
.middle-line
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "CalendarBackground",
|
|
props: {
|
|
timeCoil: Array,
|
|
ownersCount: Number,
|
|
},
|
|
data() {
|
|
return {
|
|
columnWidth: 0,
|
|
defaultColumnWidth: 470,
|
|
pixelsPerHour: 62,
|
|
};
|
|
},
|
|
computed: {
|
|
backgroundExtendedWidth() {
|
|
if (this.ownersCount > 3) {
|
|
return {
|
|
width: `${this.defaultColumnWidth * this.ownersCount}px`,
|
|
};
|
|
}
|
|
return {
|
|
width: "100%",
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.header
|
|
height: 48px
|
|
|
|
.line
|
|
border-bottom: 1px solid var(--border-light-grey-color)
|
|
height: 62px
|
|
&:first-child
|
|
height: 63px
|
|
border-top: 1px solid var(--border-light-grey-color)
|
|
&:last-child
|
|
display: none
|
|
|
|
.middle-line
|
|
border-top: 1px dashed var(--border-light-grey-color)
|
|
width: 100%
|
|
</style>
|