diff --git a/src/assets/icons/lock.svg b/src/assets/icons/lock.svg
new file mode 100644
index 0000000..024f0e7
--- /dev/null
+++ b/src/assets/icons/lock.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/images/team-member.svg b/src/assets/images/team-member.svg
new file mode 100644
index 0000000..0262c33
--- /dev/null
+++ b/src/assets/images/team-member.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 848521f..a3177c6 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -1,13 +1,19 @@
\:root
--bg-lavender-color: #e9e9f6
- --bg-white-color: #FFFFFF
--bg-ligth-blue-color: #e6eafc
--font-dark-blue-color: #252850
--font-black-color: #090a15
+ --font-black-color-0: rgba(9, 10, 21, 0)
+ --font-black-color-1: rgba(9, 10, 21, 0.5)
--btn-blue-color: #4772f2
- --btn-light-blue-color: #c6d2f6
+ --btn-blue-color-0: rgba(65, 105, 225, 0)
+ --btn-blue-color-1: rgba(65, 105, 225, 0.3)
+ --btn-blue-color-2: rgba(65, 105, 225, 0.5)
+ --btn-blue-color-3: rgba(65, 105, 225, 0.2)
+ --btn-blue-color-4: rgba(65, 105, 225, 0.8)
--font-grey-color: #9294a7
--border-light-grey-color: #d3d4dc
--default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
--bg-hover-row-table: rgba(215, 217, 255, 0.25)
- --btn-red-color: #FF6F6F
+ --default-white: #fff
+ --btn-red-color: #ff6f6f
diff --git a/src/components/HeaderInputs.vue b/src/components/HeaderInputs.vue
index 65c813b..ecf0497 100644
--- a/src/components/HeaderInputs.vue
+++ b/src/components/HeaderInputs.vue
@@ -1,15 +1,15 @@
.header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
.select-container(@click="changeState")
- .select-wrapper.flex.items-center.mx-4.my-2
- img.icon-wrapper.flex.justify-center.items-center.loupe(src="@/assets/icons/search.svg" alt="Search")
+ .select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
+ img.icon-wrapper.flex.justify-center.items-center(src="@/assets/icons/search.svg" alt="Search")
span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
- .arrow.icon-down-arrow.flex.justify-center.items-center
+ .arrow.icon-down-arrow.text-xsm.mt-px.flex.justify-center.items-center
.options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
- .option-list.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
+ .option-list.cursor-pointer.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
.icon-wrapper.mr-2.flex.justify-center
- .icon-ok.flex.justify-center.items-center(v-if="filter === selectedFilter")
- .options-text {{ filter }}
+ .icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
+ .flex.items-center {{ filter }}
input.custom-input.search-input.inline-block.box-border.align-middle.px-4(class="py-2.5" placeholder="Искать ...")
@@ -41,10 +41,8 @@ export default {
.arrow
transform: rotate(180deg)
-.wrapper
- background-color: var(--bg-white-color)
- display: flex
- align-items: center
+.header-inputs-wrapper
+ background-color: var(--default-white)
.select-container
border-radius: 4px 0 0 4px
@@ -55,9 +53,6 @@ export default {
width: 24px
height: 24px
-.loupe
- font-size: 21px
-
.custom-input
border: none
outline: none
@@ -68,14 +63,13 @@ export default {
.select-wrapper
position: relative
z-index: 2
- cursor: pointer
.select-input
width: 100px
.options-wrapper
width: 172px
- background-color: var(--bg-white-color)
+ background-color: var(--default-white)
color: var(--font-dark-blue-color)
border-radius: 4px
position: absolute
@@ -88,23 +82,14 @@ export default {
color: var(--font-grey-color)
.option-list
- cursor: pointer
&:last-child
margin: 0
&:hover
color: var(--btn-blue-color)
-.options-text
- display: flex
- align-items: center
-
.arrow
- font-size: 8px
color: var(--btn-blue-color)
-.icon-ok
- font-size: 13px
-
.icon-down-arrow
width: 16px
height: 16px
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 5c573bf..4e7ea63 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -1,15 +1,15 @@
.header-wrapper.flex.flex-row.space-between.justify-between.box-border.py-2.px-6
- .left-side.flex.items-center.box-border
+ .flex.items-center.box-border.cursor-pointer
img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
.flex.flex-row
header-inputs.mr-10
button.header-buttons.flex.justify-center.items-center.mr-8.p-0
- .icon-bell
+ .icon-bell.text-xxl
.flex.flex-row.justify-centflexer.items-center
img.avatar-img.mr-2(:src="avatarSrc")
button.header-buttons
- .icon-down-arrow.flex.justify-center.items-center.p-0
+ .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
+
+
diff --git a/src/components/base/buttons/BaseSidebarButton.vue b/src/components/base/buttons/BaseSidebarButton.vue
index 2524361..dca70e8 100644
--- a/src/components/base/buttons/BaseSidebarButton.vue
+++ b/src/components/base/buttons/BaseSidebarButton.vue
@@ -23,20 +23,20 @@ export default {
diff --git a/src/main.js b/src/main.js
index 63b247d..8f81c95 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,4 +7,6 @@ import "./assets/sass/tailwind.sass";
import "./assets/sass/variables.sass";
import "./assets/css/iconfonts.css";
+moment.locale("ru");
+
createApp(App).use(router, moment).mount("#app");
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 26d4aeb..a08e224 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,20 +1,29 @@
- calendar-header(
- :currentDay="currentDate"
- @previous-date="switchPreviousDate"
- @next-date="switchNextDate")
+ .calendar-container.ml-2
+ calendar-header(
+ :currentDay="currentDate"
+ @previous-date="switchPreviousDate"
+ @next-date="switchNextDate"
+ @selectedLayout="changeCalendarLayout")
+ calendar-column(:info="columnInfo")
-,
+
+
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
new file mode 100644
index 0000000..fba93bf
--- /dev/null
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -0,0 +1,57 @@
+
+ .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.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
+
+
+
+
+
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index d26ac5f..d4ae927 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -3,7 +3,7 @@
.flex.flex-col.gap-y-2
.flex.justify-between.pt-2
span.not-italic.text-xs.opacity-40.leading-3 Ответственный
- .icon-cancel.close-icon.cursor-pointer.text-xs(@click="closeEventForm")
+ .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeEventForm")
base-select(
id="responsible"
width="205px"
@@ -18,11 +18,11 @@
.flex.gap-x-4.items-center
.icon-time.text-xl.icon
.flex.gap-x-2.items-center
- .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
- input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+ .form-item.flex.gap-x-2.px-4.py-2.items-center
+ input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
span —
- .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
- input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+ .form-item.flex.gap-x-2.px-4.py-2.items-center
+ input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
.flex.gap-x-4.items-center
.icon-person.text-xl.icon
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
@@ -131,26 +131,32 @@ export default {
.event-form
height: fit-content
min-width: 448px
- background-color: var(--bg-white-color)
+ background-color: var(--default-white)
box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
border-radius: 4px
+
.form-item
border-radius: 4px
width: fit-content
background-color: var(--bg-ligth-blue-color)
+
.item-input
appearance: none
border: none
outline: none
- color: rgba(9, 10, 21, 0.5)
- background-color: rgba(9, 10, 21, 0)
+ color: var(--font-black-color)
+ background-color: var(--font-black-color-0)
&::-webkit-calendar-picker-indicator
display: none
-webkit-appearance: none
+ &::placeholder
+ color: var(--font-black-color-1)
+
.icon
width: 24px
height: 24px
color: var(--font-dark-blue-color)
+
.close-icon
color: var(--font-dark-blue-color)
&:hover
diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
index 96f7d25..930fc1a 100644
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -1,5 +1,5 @@
- .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
+ .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
base-arrow-button.left-arrow.mr-4(@click="previousHandler")
base-arrow-button.right-arrow.mr-6(@click="nextHandler")
@@ -22,7 +22,6 @@ export default {
data() {
return {
isToday: true,
- selectedLayout: "",
};
},
computed: {
@@ -39,7 +38,7 @@ export default {
},
methods: {
changeSelectedLayout(option) {
- this.selectedLayout = option;
+ this.$emit("selectedLayout", option);
},
previousHandler() {
this.$emit("previous-date");
@@ -60,7 +59,7 @@ export default {