61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<template lang="pug">
|
||
.table-header.flex.w-full.pr-2
|
||
.flex.items-center.justify-center.pl-11(
|
||
:style="{width: 'calc(25% + 43px)'}"
|
||
)
|
||
.text.font-bold(
|
||
:style="{color: 'var(--btn-blue-color)'}"
|
||
) Сотрудник
|
||
.column-wrapper.flex
|
||
.flex.flex-col.items-center.justify-center.w-11(
|
||
v-for="day in result",
|
||
:class="{'column-color': changelColumnColor(day)}",
|
||
:style="{width: `calc(100% / ${result.length})`}"
|
||
)
|
||
.text.flex.font-bold(
|
||
:style="{opacity: changeOpacity(day)}"
|
||
) {{day.format("D")}}
|
||
.text.flex.font-bold(
|
||
:style="{opacity: changeOpacity(day)}"
|
||
) {{day.format("ddd")}}
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "ScheduleTableHeader",
|
||
props: { result: Array },
|
||
methods: {
|
||
changelColumnColor(day) {
|
||
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
|
||
? true
|
||
: false;
|
||
},
|
||
changeOpacity(day) {
|
||
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
|
||
? "0.6"
|
||
: "1";
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.table-header
|
||
height: 50px
|
||
background-color: #D7D9FF
|
||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||
border-top-left-radius: 2px
|
||
border-top-right-radius: 2px
|
||
|
||
.column-wrapper
|
||
overflow: auto
|
||
overflow-x: hidden
|
||
width: calc(75% - 44px)
|
||
|
||
.column-color
|
||
background-color: var(--bg-white-color-1)
|
||
|
||
.text
|
||
color: var(--btn-blue-color)
|
||
</style>
|