fix: cart UI on dialog footer

This commit is contained in:
oat_dev 2024-06-13 15:59:09 +07:00
parent 82369a680f
commit 06571e84ef
3 changed files with 25 additions and 4 deletions

View file

@ -16,7 +16,6 @@ const addedProduct = ref<boolean>(false);
padding="sm" padding="sm"
class="absolute-top-right dots-btn app-text-muted" class="absolute-top-right dots-btn app-text-muted"
icon="mdi-dots-vertical" icon="mdi-dots-vertical"
style="z-index: 99"
size="sm" size="sm"
@click.stop="" @click.stop=""
> >
@ -78,7 +77,8 @@ const addedProduct = ref<boolean>(false);
<div class="row justify-between items-center q-mb-xs"> <div class="row justify-between items-center q-mb-xs">
<div> <div>
<q-icon <q-icon
name="mdi-clock-outline surface-0 rounded q-pa-xs app-text-muted" name="mdi-clock-outline"
class="surface-0 rounded q-pa-xs app-text-muted"
size="20px" size="20px"
/> />
14 14

View file

@ -108,13 +108,17 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
</q-tabs> </q-tabs>
</div> </div>
<div <div
class="row q-pa-lg" class="row q-pa-lg scroll"
:class="{ :class="{
dark: $q.dark.isActive, dark: $q.dark.isActive,
'surface-2': !employee, 'surface-2': !employee,
'surface-tab': employee, 'surface-tab': employee,
}" }"
:style="$q.screen.gt.sm ? '' : 'overflow-y: auto; max-height: 75vh'" :style="
$q.screen.gt.sm
? 'max-height: 75vh'
: 'overflow-y: auto; max-height: 75vh'
"
> >
<!-- prepend --> <!-- prepend -->
<div <div

View file

@ -609,6 +609,23 @@ watch(productMode, () => (inputSearch.value = ''));
" "
:close="() => {}" :close="() => {}"
> >
<template #footer>
<div class="row items-center q-gutter-md">
<q-icon name="mdi-cart" class="app-text-muted" size="sm" />
<div class="relative-position" style="bottom: 15px; right: 25px">
<div
class="absolute bg-red text-white flex justify-center text-center rounded items-center"
style="width: 16px; height: 16px; font-size: 11px"
>
2
</div>
</div>
<div>
รวมสนคาทงหมด
<div class="text-bold" style="color: var(--green-10)">฿ 2,400</div>
</div>
</div>
</template>
<TotalProductComponent /> <TotalProductComponent />
</FormDialog> </FormDialog>
</template> </template>