ปรับ ui
This commit is contained in:
setthawutttty
parent
165afcc43c
commit
a1bd22f254
3 changed files with 156 additions and 113 deletions
BIN
src/assets/book.png
Normal file
BIN
src/assets/book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import doc from '@/api/document'
|
||||
import cover from '@/assets/cover.png'
|
||||
import book from '@/assets/book.png'
|
||||
import type { StorageFile, MetadataObject } from '@/interface/response/storage'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
|
@ -25,30 +25,56 @@ onMounted(async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-xs-12 col-sm-11 col-md-10 col-lg-9 justify-center">
|
||||
<div class="row col-xs-12 col-sm-10 col-md-12 col-lg-12 justify-center">
|
||||
<div class="col-12 text-left">
|
||||
<div class="text-h6 text-weight-bold q-mb-md">{{ metadata?.additionalProp1 }}</div>
|
||||
<div class="text-h6 text-weight-bold q-mb-md">
|
||||
{{ metadata?.additionalProp1 }}
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-xs-12 col-sm-4 q-my-sm">
|
||||
<img :src="cover" class="frame" style="object-fit: cover" />
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-8 q-px-md">
|
||||
<div class="row col-12 justify-center">
|
||||
<div class="row col-xs-12 col-sm-10 q-col-gutter-y-lg text-left">
|
||||
<div class="row col-12 q-mt-sm">
|
||||
<div class="col-4 text-title">ชื่อเรื่อง</div>
|
||||
<div class="col-8 text-body">{{ metadata?.subject || data?.fileName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<div class="col-4 text-title">เจ้าของผลงาน</div>
|
||||
<div class="col-8 text-body">{{ metadata?.author || data?.author }}</div>
|
||||
<div class="row col-12 relative-position"
|
||||
:style=" $q.screen.xs ? 'height: 50px'
|
||||
:$q.screen.sm ? 'height: 60px'
|
||||
:$q.screen.md ? 'height: 70px'
|
||||
:$q.screen.gt.lg ? 'height: 120px'
|
||||
: 'height: 60px'
|
||||
"
|
||||
>
|
||||
<q-img
|
||||
:src="book"
|
||||
class="fixed-top absolute-center"
|
||||
:style=" $q.screen.xs ? 'height: auto; max-width: 160px; top: -40px'
|
||||
:$q.screen.sm ? 'height: auto; max-width: 190px; top: -50px'
|
||||
:$q.screen.md ? 'height: auto; max-width: 200px; top: -40px'
|
||||
:$q.screen.gt.lg ? 'height: auto; max-width: 250px; top: -50px'
|
||||
:'height: auto; max-width: 250px; top: -70px'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row col-12 justify-center q-px-lg">
|
||||
<div
|
||||
class="row col-xs-12 col-sm-9 col-md-8 col-lg-9 q-col-gutter-y-lg text-left"
|
||||
>
|
||||
<div class="col-12 q-my-lg">
|
||||
<div class="text-h5 text-center text-bold q-mb-md">{{ metadata?.subject || data?.fileName }}</div>
|
||||
<div class="text-body text-center">
|
||||
{{ metadata?.author || data?.author }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-4 text-title text-left">เจ้าของผลงาน</div>
|
||||
<div class="col-8 text-body text-right">
|
||||
{{ metadata?.author || data?.author }}
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="row col-12">
|
||||
<div class="col-4 text-title">ตำแหน่งที่ได้รับ</div>
|
||||
<div class="col-8 text-body">{{ metadata?.position || '-' }}</div>
|
||||
<div class="col-4 text-title text-left">ตำแหน่งที่ได้รับ</div>
|
||||
<div class="col-8 text-body text-right">
|
||||
{{ metadata?.position || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="row col-12">
|
||||
|
|
@ -76,15 +102,15 @@ onMounted(async () => {
|
|||
</div> -->
|
||||
|
||||
<div class="row col-12">
|
||||
<div class="col-4 text-title">ขนาดไฟล์</div>
|
||||
<div class="col-8 text-body">
|
||||
<div class="col-4 text-title text-left">ขนาดไฟล์</div>
|
||||
<div class="col-8 text-body text-right">
|
||||
{{ data && doc.util.formatBytes(data.fileSize) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<div class="col-4 text-title">วันที่อัปโหลด</div>
|
||||
<div class="col-8 text-body">
|
||||
<div class="col-4 text-title text-left">วันที่อัปโหลด</div>
|
||||
<div class="col-8 text-body text-right">
|
||||
{{
|
||||
data &&
|
||||
new Date(data.createdAt).toLocaleDateString('th', {
|
||||
|
|
@ -95,22 +121,20 @@ onMounted(async () => {
|
|||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 q-mb-md q-mt-lg">
|
||||
<q-separator color="grey-6" />
|
||||
</div>
|
||||
<div class="col-12 row justify-center">
|
||||
|
||||
<div class="col-12 row">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
size="md"
|
||||
class="col-6 btn"
|
||||
class="col-12 btn"
|
||||
@click="
|
||||
() =>
|
||||
data &&
|
||||
doc.util.download(
|
||||
data.downloadUrl,
|
||||
data.fileName,
|
||||
)
|
||||
() => data && doc.util.download(data.downloadUrl, data.fileName)
|
||||
"
|
||||
style="border-radius:10px ;"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -130,8 +154,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
@ -151,7 +174,7 @@ onMounted(async () => {
|
|||
color: #818181;
|
||||
}
|
||||
.btn {
|
||||
margin-top: 50px;
|
||||
box-shadow: 0px 4px 10px 0px rgba(120, 207, 197, 0.721);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,65 @@
|
|||
<script setup lang="ts">
|
||||
import { ref} from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useQuasar } from 'quasar'
|
||||
const router = useRouter()
|
||||
const $q = useQuasar()
|
||||
const tab = ref('')
|
||||
|
||||
</script>
|
||||
<!-- โครงเว็บ -->
|
||||
<template>
|
||||
<q-layout view="hHh LpR fFr" class="">
|
||||
<q-layout view="hHh LpR fFr" class="bg-top" style="">
|
||||
<!-- header -->
|
||||
<q-header flat class="text-dark col-12 bgHeader" height-hint="7">
|
||||
<q-toolbar class="items-center row justify-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
|
||||
<q-toolbar
|
||||
class="items-center row justify-center"
|
||||
:style="$q.screen.gt.sm ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
|
||||
>
|
||||
<div class="row items-center no-wrap cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="35" viewBox="0 0 47 36" fill="none">
|
||||
<path d="M42.7273 1.05882C40.3559 0.317647 37.7495 0 35.25 0C31.0841 0 26.5977 0.847059 23.5 3.17647C20.4023 0.847059 15.9159 0 11.75 0C7.58409 0 3.09773 0.847059 0 3.17647V34.2C0 34.7294 0.534091 35.2588 1.06818 35.2588C1.28182 35.2588 1.38864 35.1529 1.60227 35.1529C4.48636 33.7765 8.65227 32.8235 11.75 32.8235C15.9159 32.8235 20.4023 33.6706 23.5 36C26.3841 34.2 31.6182 32.8235 35.25 32.8235C38.775 32.8235 42.4068 33.4588 45.3977 35.0471C45.6114 35.1529 45.7182 35.1529 45.9318 35.1529C46.4659 35.1529 47 34.6235 47 34.0941V3.17647C45.7182 2.22353 44.3295 1.58824 42.7273 1.05882ZM42.7273 29.6471C40.3773 28.9059 37.8136 28.5882 35.25 28.5882C31.6182 28.5882 26.3841 29.9647 23.5 31.7647V7.41177C26.3841 5.61176 31.6182 4.23529 35.25 4.23529C37.8136 4.23529 40.3773 4.55294 42.7273 5.29412V29.6471Z" fill="white"/>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="35"
|
||||
viewBox="0 0 47 36"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M42.7273 1.05882C40.3559 0.317647 37.7495 0 35.25 0C31.0841 0 26.5977 0.847059 23.5 3.17647C20.4023 0.847059 15.9159 0 11.75 0C7.58409 0 3.09773 0.847059 0 3.17647V34.2C0 34.7294 0.534091 35.2588 1.06818 35.2588C1.28182 35.2588 1.38864 35.1529 1.60227 35.1529C4.48636 33.7765 8.65227 32.8235 11.75 32.8235C15.9159 32.8235 20.4023 33.6706 23.5 36C26.3841 34.2 31.6182 32.8235 35.25 32.8235C38.775 32.8235 42.4068 33.4588 45.3977 35.0471C45.6114 35.1529 45.7182 35.1529 45.9318 35.1529C46.4659 35.1529 47 34.6235 47 34.0941V3.17647C45.7182 2.22353 44.3295 1.58824 42.7273 1.05882ZM42.7273 29.6471C40.3773 28.9059 37.8136 28.5882 35.25 28.5882C31.6182 28.5882 26.3841 29.9647 23.5 31.7647V7.41177C26.3841 5.61176 31.6182 4.23529 35.25 4.23529C37.8136 4.23529 40.3773 4.55294 42.7273 5.29412V29.6471Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 440px;': 'height: 400px;'" />
|
||||
<!-- end header -->
|
||||
|
||||
<q-page-container class="q-pb-md">
|
||||
<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -420px; min-height: 100%;': 'padding: 5% 4%; margin-top: -400px;'">
|
||||
<div class="col-12 row justify-center">
|
||||
<q-page-container>
|
||||
<div class="row justify-center">
|
||||
<div
|
||||
class="bg-white"
|
||||
:style="
|
||||
$q.screen.xs ? 'padding: 5% 4%; margin:130px 0 0 0; min-height: calc(100vh - 180px); min-width:100vw;'
|
||||
: $q.screen.sm ? 'padding: 5% 4%; margin:200px 0 0 0; min-height: calc(100vh - 250px); min-width:100vw;'
|
||||
: $q.screen.md ? 'padding: 1.8% 2%; margin:200px 250px 0 250px; min-height: calc(100vh - 250px); max-width:700px;'
|
||||
: $q.screen.gt.lg ? 'padding: 1.8% 2%; margin:200px 250px 0 250px; min-height: calc(100vh - 270px); max-width:700px;'
|
||||
: 'padding: 1.8% 2%; margin:200px 250px 0 250px; min-height: calc(100vh - 260px); max-width:700px;'
|
||||
"
|
||||
>
|
||||
<div class="col-12">
|
||||
<router-view :key="$route.fullPath" />
|
||||
</div>
|
||||
</q-page>
|
||||
</div>
|
||||
</div>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.border-100{
|
||||
.border-100 {
|
||||
border-radius: 100px;
|
||||
}
|
||||
.bg-header{
|
||||
background:rgba(39, 50, 56, 0)8 !important;
|
||||
.bg-header {
|
||||
background: rgba(39, 50, 56, 0) 8 !important;
|
||||
}
|
||||
|
||||
.q-card {
|
||||
|
|
@ -49,20 +69,20 @@ const tab = ref('')
|
|||
.q-menu {
|
||||
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
||||
}
|
||||
.q-field--outlined .q-field__control{
|
||||
.q-field--outlined .q-field__control {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.q-field--outlined .q-field__control:before {
|
||||
border-color: #C8D3DB;
|
||||
border-color: #c8d3db;
|
||||
}
|
||||
.q-field--outlined .q-icon{
|
||||
.q-field--outlined .q-icon {
|
||||
color: #7474747f;
|
||||
}
|
||||
.bgHeader{
|
||||
.bgHeader {
|
||||
background: #273238;
|
||||
box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.40);
|
||||
box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.4);
|
||||
}
|
||||
.bg-top{
|
||||
background: #F7F9FA;
|
||||
.bg-top {
|
||||
background: #eaeaea;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue