95 lines
2.4 KiB
Vue
95 lines
2.4 KiB
Vue
<template lang="pug">
|
||
.list-wrapper.h-full.flex.gap-y-1.flex-col
|
||
.p-4.rounded.background
|
||
q-btn(
|
||
color="primary",
|
||
size="16px",
|
||
label="Создать осмотр",
|
||
no-caps,
|
||
icon="add",
|
||
:style="{width: '100%'}"
|
||
)
|
||
.p-4.rounded.background.h-full
|
||
.flex
|
||
base-select(
|
||
:style="{flex: 1}",
|
||
)
|
||
q-btn.ml-2(
|
||
icon="sort"
|
||
:style="{width: '40px', height: '40px'}",
|
||
padding="0"
|
||
:class="sortingClass"
|
||
@click="invertSorting"
|
||
)
|
||
.flex.py-4.w-full.color-grey.text-base.justify-center
|
||
span.opacity-50 Осмотров: 5
|
||
.flex.gap-y-2
|
||
.w-full.border.rounded.border-grey.p-4(@click="openInspection")
|
||
.flex.justify-between.mb-7
|
||
.flex.flex-col.gap-y-1
|
||
span.text-xl.font-bold.color-blue.line-height 2023 г.
|
||
.text-smm.color-grey.flex.items-center.gap-x-6px.line-height
|
||
span.align-middle 22.02
|
||
.rounded-full.h-1.w-1.background-grey
|
||
span.align-middle 18:30 - 19:30
|
||
.flex.items-center.justify-center.h-6.w-6.rounded.background-grey
|
||
img.teeth-icon(src="@/assets/icons/teeth.svg")
|
||
.h-10
|
||
</template>
|
||
|
||
<script>
|
||
import BaseSelect from "@/components/base/BaseSelect.vue";
|
||
export default {
|
||
name: "MedicalProtocolsList",
|
||
components: { BaseSelect },
|
||
props: { openInspection: Function },
|
||
data() {
|
||
return {
|
||
sorting: false,
|
||
};
|
||
},
|
||
computed: {
|
||
sortingClass() {
|
||
return this.sorting
|
||
? {
|
||
"sort-icon-active": true,
|
||
}
|
||
: {
|
||
"sort-icon-default": true,
|
||
};
|
||
},
|
||
},
|
||
methods: {
|
||
invertSorting() {
|
||
this.sorting = !this.sorting;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.list-wrapper
|
||
width: 19.6%
|
||
.background
|
||
background-color: var(--default-white)
|
||
.sort-icon-default
|
||
background-color: var(--bg-light-grey)
|
||
color: var(--font-grey-color)
|
||
.sort-icon-active
|
||
background-color: var(--btn-blue-color)
|
||
color: var(--default-white)
|
||
.color-grey
|
||
color: var(--font-grey-color)
|
||
.background-grey
|
||
background-color: var(--font-grey-color)
|
||
.border-grey
|
||
border-color: var(--border-grey-color)
|
||
.color-blue
|
||
color: var(--font-dark-blue-color)
|
||
.line-height
|
||
line-height: 135%
|
||
.teeth-icon
|
||
width: 16px
|
||
height: 16px
|
||
</style>
|