chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: product & service scroll

Browse source
This commit is contained in:
puriphatt 2024-07-05 06:13:55 +00:00
parent d64421f48b
commit 56c226164d
2 changed files with 65 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/04_product-service/TotalProductCardComponent.vue
View file

@ -43,7 +43,7 @@ withDefaults(
bordered
:class="{ 'is-add-product': isAddProduct }"
class="column bordered rounded q-pa-sm no-wrap"
style="box-shadow: var(--shadow-3); height: 20rem"
style="height: 20rem"
@click="$emit('select', data)"
>
<div class="row flex justify-between text-bold">

112
src/pages/04_product-service/MainPage.vue
View file

@ -1142,6 +1142,48 @@ watch(inputSearchProductAndService, async () => {
</div>
<div v-if="stat[0].count !== 0" class="column full-height no-wrap">
<div
v-if="productMode === 'group' || productMode === 'type'"
class="text-body-2 q-mb-xs flex items-center"
>
{{ $t('dataSum') }}
<q-btn
class="q-ml-xs"
icon="mdi-pin"
color="primary"
size="sm"
flat
dense
rounded
@click="hideStat = !hideStat"
:style="hideStat ? 'rotate: 90deg' : ''"
style="transition: 0.1s ease-in-out"
/>
</div>
<transition
v-if="productMode === 'group' || productMode === 'type'"
name="slide"
>
<div
v-if="
(productMode === 'group' && !hideStat) ||
(productMode === 'type' && !hideStat)
"
class="scroll q-mb-md"
>
<div style="display: inline-block">
<StatCard
label-i18n
:branch="stat"
:dark="$q.dark.isActive"
nowrap
/>
</div>
</div>
</transition>
<!-- title type/service -->
<div
class="row items-center q-mb-md"
v-if="productMode === 'service' || productMode === 'type'"
@ -1182,47 +1224,10 @@ watch(inputSearchProductAndService, async () => {
</div>
</div>
<!-- group/type -->
<div
v-if="productMode === 'group' || productMode === 'type'"
class="text-body-2 q-mb-xs flex items-center"
>
{{ $t('dataSum') }}
<q-btn
class="q-ml-xs"
icon="mdi-pin"
color="primary"
size="sm"
flat
dense
rounded
@click="hideStat = !hideStat"
:style="hideStat ? 'rotate: 90deg' : ''"
style="transition: 0.1s ease-in-out"
/>
</div>
<transition name="slide">
<div
v-if="
(productMode === 'group' && !hideStat) ||
(productMode === 'type' && !hideStat)
"
class="scroll q-mb-md"
>
<div style="display: inline-block">
<StatCard
label-i18n
:branch="stat"
:dark="$q.dark.isActive"
nowrap
/>
</div>
</div>
</transition>
<div
v-if="productMode === 'group' || productMode === 'type'"
class="surface-1 col bordered rounded q-pa-md scroll"
class="surface-1 col bordered rounded q-pa-md scroll column"
>
<div class="row justify-between">
<div
@ -1304,7 +1309,7 @@ watch(inputSearchProductAndService, async () => {
</div>
</div>
<div class="row q-col-gutter-lg">
<div class="row q-col-gutter-md col scroll">
<div
:class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
v-for="(v, i) in productMode === 'type'
@ -1433,7 +1438,7 @@ watch(inputSearchProductAndService, async () => {
<template v-else>
<div
v-if="productMode === 'group'"
class="flex items-center justify-between q-pt-xl"
class="flex items-center justify-between"
>
<div class="col-4">
<div class="row items-center">
@ -1490,7 +1495,7 @@ watch(inputSearchProductAndService, async () => {
<div
v-if="productMode === 'type'"
class="flex justify-between q-pt-xl"
class="flex justify-between items-center"
>
<div class="col-4">
<div class="row items-center">
@ -1545,11 +1550,16 @@ watch(inputSearchProductAndService, async () => {
</div>
</template>
</div>
<!-- product/service -->
<div
v-else-if="productMode === 'service'"
class="surface-1 col bordered rounded scroll"
class="surface-1 col bordered rounded column"
>
<div class="row justify-between q-px-md">
<div
class="row justify-between items-center surface-1 rounded"
style="z-index: 1"
>
<q-tabs v-model="productAndServiceTab" dense>
<q-tab
name="all"
@ -1652,7 +1662,7 @@ watch(inputSearchProductAndService, async () => {
</q-tab>
</q-tabs>
<div class="row q-pt-sm q-mb-sm">
<div class="row">
<q-input
style="width: 300px"
outlined
@ -1734,9 +1744,13 @@ watch(inputSearchProductAndService, async () => {
<NoData :not-found="!!inputSearchProductAndService" />
</div>
<div class="row q-col-gutter-lg flex" style="padding: 20px">
<!-- tab -->
<div
v-if="productAndService && productAndService.length > 0"
class="row flex q-pa-md q-col-gutter-md col scroll"
>
<div
:class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
class="col-md-3 col-sm-6 col-12"
v-for="i in productAndServiceTab === 'all'
? productAndService
: productAndServiceTab === 'product'
@ -1796,7 +1810,9 @@ watch(inputSearchProductAndService, async () => {
/>
</div>
</div>
<div class="row justify-between q-pb-md q-px-lg">
<!-- footer -->
<div class="flex items-center justify-between q-pb-md q-px-md">
<div class="col-4">
<div class="row items-center">
<div class="app-text-muted" style="width: 80px">