diff --git a/src/components/base/BaseModal.vue b/src/components/base/BaseModal.vue index 4ce7783..bae9425 100644 --- a/src/components/base/BaseModal.vue +++ b/src/components/base/BaseModal.vue @@ -140,7 +140,7 @@ export default { padding: 28px 32px .base-content - overflow-x: hidden + overflow: hidden width: auto background-color: var(--default-white) box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1) diff --git a/src/pages/newCalendar/components/CalendarSidebar.vue b/src/pages/newCalendar/components/CalendarSidebar.vue index cfb0d06..c66e2df 100644 --- a/src/pages/newCalendar/components/CalendarSidebar.vue +++ b/src/pages/newCalendar/components/CalendarSidebar.vue @@ -11,10 +11,12 @@ .button.flex base-button(width="40px", @click="createForm") q-icon(name="app:plus", size="12px") - .button.flex.relative.btn-sidebar.button-svg.cursor-pointer(v-for="svg in patientData.arrSvg") + .button.flex.relative.btn-sidebar.button-svg.cursor-pointer( + @click="()=>showActive(svg.name)", + v-for="svg in patientData.arrSvg" + ) q-btn( :class="{'active-btn': findActiveBtn(svg.name)}", - @click="()=>showActive(svg.name)", dense, style="borderRadius: 50%", :padding="svg.name === 'group' ? '10.5px 7.5px' : '4px'" @@ -149,7 +151,7 @@ export default { }, computed: { allLeave() { - return this.patientData.arrSvg.find((e) => e.active)?.active + return this.patientData.arrSvg.find(({ active }) => active)?.active ? false : true; }, @@ -164,8 +166,8 @@ export default { }, }, methods: { - findActiveBtn(name) { - return this.patientData.arrSvg.find((e) => e.name === name)?.active + findActiveBtn(value) { + return this.patientData.arrSvg.find(({ name }) => name === value)?.active ? true : false; }, @@ -252,7 +254,8 @@ export default { .btn-sidebar &:hover & .separator - display: flex + transition: 0.1s + opacity: 1 .status-wrapper width: 232px @@ -304,7 +307,8 @@ export default { padding-left: 6px .separator - display: none + transition: 0.1s + opacity: 0 z-index: 6 align-items: center left: 72px