ปรับ ui step ที่เหลือ

This commit is contained in:
Tanyalak 2024-01-17 12:54:18 +07:00
parent 17df87bc10
commit 7003c11e2f
10 changed files with 228 additions and 280 deletions

View file

@ -163,73 +163,7 @@ function backPage() {
</div>
</template>
</q-splitter>
<!-- <q-card class="bg-white">
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หนาท {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
<div class="row items- items-center">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
<div class="row items- items-end">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หนาท {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</q-card> -->
</template>
<style scoped></style>

View file

@ -21,7 +21,7 @@ const tabPanels = store.tabPanels
<template>
<q-card bordered class="col-12 row shadow-0" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
<div class="col-12 row items-center q-px-sm q-pb-xs">
<div class="col-12 row items-center q-px-sm ">
<div class="q-pl-sm text-weight-medium" >เอกสารทปโหลด</div>
<q-space />
<q-btn
@ -45,9 +45,7 @@ const tabPanels = store.tabPanels
>
</div>
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical class="col-12">
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical class="col-12 row">
<q-tab-panel name="1">
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
</q-tab-panel>

View file

@ -16,28 +16,31 @@ const modalPerview = ref<boolean>(false);
</script>
<template>
<div class="col-12 row">
<q-space />
<q-btn
flat
round
color="primary"
icon="download"
target="_blank"
:href="props.urlDownloadFile"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<q-btn
flat
round
color="primary"
icon="mdi-fullscreen"
@click="modalPerview = true"
><q-tooltip>เตมจอ</q-tooltip></q-btn
>
</div>
<ViewPDF :pdfSrc="props.pdfSrc" />
<q-card bordered class="col-12 row shadow-0" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
<div class="col-12 row items-center q-px-sm">
<div class="q-pl-sm text-weight-medium" >เอกสารทปโหลด</div>
<q-space />
<q-btn
flat
color="primary"
icon="download"
target="_blank"
dense
:href="props.urlDownloadFile"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<q-btn
flat
color="primary"
icon="mdi-fullscreen"
dense
@click="modalPerview = true"
><q-tooltip>เตมจอ</q-tooltip></q-btn
>
</div>
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
</q-card>
<q-dialog v-model="modalPerview" full-width fullHeight>
<q-card>