95 lines
2.4 KiB
Vue
95 lines
2.4 KiB
Vue
<template lang="pug">
|
|
.header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
|
|
base-client-form-create(
|
|
v-if="isOpenForm",
|
|
:close-form="closeForm",
|
|
:current-year="currentYear"
|
|
)
|
|
.flex.items-center.box-border.cursor-pointer.mr-auto
|
|
img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
|
|
header-inputs
|
|
//- .charge-person-container
|
|
//- header-active-client-panel(:info="chargePersonInfo")
|
|
.flex.ml-auto
|
|
base-button.mr-9(
|
|
left-icon="icon-plus",
|
|
:icon-left-size="10",
|
|
:size="40",
|
|
right-icon="icon-person",
|
|
:icon-right-size="18",
|
|
@click="openForm"
|
|
)
|
|
button.header-buttons.flex.justify-center.items-center.mr-8.p-0(@click="logout")
|
|
.icon-bell.text-xxl
|
|
.flex.justify-centflexer.items-center
|
|
base-avatar.mr-2(:size="32")
|
|
img(:src="avatarSrc", alt="Avatar")
|
|
button.header-buttons
|
|
.icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
|
|
</template>
|
|
|
|
<script>
|
|
import img from "@/assets/images/avatar.svg";
|
|
import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
|
|
import HeaderInputs from "./HeaderInputs.vue";
|
|
import BaseAvatar from "@/components/base/BaseAvatar";
|
|
import BaseButton from "@/components/base/BaseButton.vue";
|
|
import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
|
|
export default {
|
|
name: "TheHeader",
|
|
components: { HeaderInputs, BaseAvatar, BaseButton, BaseClientFormCreate },
|
|
props: {
|
|
openForm: Function,
|
|
closeForm: Function,
|
|
isOpenForm: Boolean,
|
|
currentYear: Number,
|
|
},
|
|
data() {
|
|
return {
|
|
avatarSrc: img,
|
|
chargePersonInfo: {
|
|
avatarSrc: chargePersonAvatar,
|
|
name: "Гордеев Николай Степанович",
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
logout() {
|
|
localStorage.clear();
|
|
this.$router.push("/login");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.header-buttons
|
|
outline: none
|
|
border: none
|
|
background-color: transparent
|
|
color: var(--font-dark-blue-color)
|
|
|
|
.header-wrapper
|
|
width: 100%
|
|
height: 56px
|
|
background-color: var(--default-white)
|
|
position: relative
|
|
z-index: 11
|
|
|
|
.logo-img
|
|
height: 32px
|
|
width: 70px
|
|
|
|
.icon-down-arrow
|
|
width: 24px
|
|
height: 24px
|
|
|
|
.icon-bell
|
|
width: 24px
|
|
height: 24px
|
|
color: var(--font-dark-blue-color)
|
|
|
|
.charge-person-container
|
|
position: absolute
|
|
</style>
|