hrms-bangkok/hrms-publish
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

หน้า UI หน้าเผยแพร่ผลงาน

Browse source
This commit is contained in:
AnandaTon 2023-12-22 09:44:29 +07:00
parent 288971d1d7
commit 026f6ecfd7
1 changed files with 187 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

192
src/views/HomeView.vue
View file

@ -1,11 +1,193 @@
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template> <template>
<div class="col-12 row justify-center"> <div class="div">
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="bgGrey">
<q-card flat class="row col-12 cardNone"> <img
Publish loading="lazy"
</q-card> src="https://cdn.builder.io/api/v1/image/assets/TEMP/8059506daf32efc681465813bc7bdd3b52e3bafa93cfd733b357d6043617f3f8?"
class="img"
/>
</div>
<div class="text-h6 text-weight-bold">วิธีชนะมิตรและจูงใจคน</div>
<q-card bordered class="col-12">
<q-img
loading="lazy"
src="https://laz-img-sg.alicdn.com/p/6f38dbbe4df6e0b10d1c7ce97f2c9d3e.jpg"
class="col-12 q-px-md q-pb-md"
max-width="100%"
/>
<q-card-section class="q-pt-md q-pb-md">
<div class="row items-stretch">
<div class="col-6">
<div class="row q-mt-md">
<div class="col-4 text-bold" style="color: black">ชื่อเรื่อง</div>
<div class="col-8 text-body" style="color: #818181">
วิธีชนะมิตรและจูงใจคน
</div>
</div>
<div class="row q-mt-md">
<div class="col-4 text-bold" style="color: black">
เจ้าของผลงาน
</div>
<div class="col-8 text-body" style="color: #818181">
ธัญลักษณ์ รอดกูล
</div>
</div>
<div class="row q-mt-md">
<div class="col-4 text-bold" style="color: black">
กลุ่ม/หมวดหมู่
</div>
<div class="col-8 text-body" style="color: #818181">ศิลปะ</div>
</div>
<div class="row q-mt-md">
<div class="col-4 text-bold" style="color: black">คำสำคัญ</div>
<div class="col-8 text-body" style="color: #818181">
ศิลปะ , ภาพวาด
</div>
</div>
<div class="row q-mt-md">
<div class="col-4 text-bold" style="color: black">ขนาดไฟล์</div>
<div class="col-8 text-body" style="color: #818181">
753.55 KB
</div>
</div>
<div class="row q-mt-md">
<div class="col-4 text-bold" style="color: black">
วันที่อัปโหลด
</div>
<div class="col-8 text-body" style="color: #818181">
9 พ.ย. 2566
</div>
</div>
</div>
</div>
</q-card-section>
</q-card>
<div class="whiteBox">
<div class="download">
<div class="div-22">
<img
loading="lazy"
src="https://cdn.builder.io/api/v1/image/assets/TEMP/86b98ddb5efca7fc0aefa9aeee8ae044e878760140eadaef9e252787edfa6285?"
class="img-3"
/>
<div class="div-23">ดาว์นโหลด</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.div {
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
background-color: #f7f9fa;
display: flex;
flex-direction: column;
align-items: start;
}
.bgGrey {
box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.4);
background-color: #273238;
align-self: stretch;
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 27px 60px;
}
@media (max-width: 991px) {
.bgGrey {
max-width: 100%;
padding: 0 20px;
}
}
.img {
aspect-ratio: 1.31;
object-fit: contain;
object-position: center;
width: 47px;
fill: #fff;
overflow: hidden;
max-width: 100%;
}
.img-2 {
aspect-ratio: 0.71;
object-fit: contain;
object-position: center;
max-width: 50%;
overflow: hidden;
flex-grow: 1;
flex-basis: 0%;
}
@media (max-width: 991px) {
.img-2 {
max-width: 100%;
}
}
.whiteBox {
box-shadow: 0px 4px 22px 0px rgba(200, 211, 219, 0.22);
background-color: #fff;
align-self: stretch;
display: flex;
margin-top: -277px;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px 60px;
}
@media (max-width: 991px) {
.whiteBox {
max-width: 100%;
margin-top: -200px;
padding: 0 20px;
}
}
.download {
justify-content: center;
align-items: center;
border-radius: 6px;
border: 1px solid #00aa86;
background-color: #00aa86;
display: flex;
width: 495px;
max-width: 100%;
flex-direction: column;
margin: 17px 0 308px 153px;
padding: 13px 60px;
}
@media (max-width: 991px) {
.download {
margin-bottom: 40px;
padding: 0 20px;
}
}
.div-22 {
display: flex;
align-items: center;
gap: 12px;
}
.img-3 {
aspect-ratio: 1;
object-fit: contain;
object-position: center;
width: 22px;
overflow: hidden;
max-width: 100%;
margin: auto 0;
}
.div-23 {
color: #fff;
letter-spacing: 0.04px;
align-self: stretch;
font: 400 18px Noto Sans, sans-serif;
}
</style>