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

ui home

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-12-17 13:11:18 +07:00
parent 46af96b08d
commit 141a7cbd31
1 changed files with 53 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

244
src/views/home.vue
View file

@ -150,18 +150,18 @@ const cards = ref<any[]>([
</script>
<template>
<div class="q-pa-xl">
<section class="vh-100">
<!-- Background Image -->
<div class="bg-img h-50 fixed-top" style="z-index: -1">
<img
alt=""
src="https://bma-sso.frappet.synology.me/images/line2.png"
class="img_absolute_line"
/>
</div>
<!-- Background Image -->
<div class="bg-img h-50 fixed-top" style="z-index: -1">
<img
alt=""
src="https://bma-sso.frappet.synology.me/images/line2.png"
class="img_absolute_line"
/>
</div>
<q-toolbar class="text-primary">
<div class="row justify-center">
<div class="col-9">
<q-toolbar style="padding: 0px">
<div class="row items-center q-px-md q-py-sm">
<q-img
src="https://bma-sso.frappet.synology.me/images/sso.png"
@ -177,14 +177,9 @@ const cards = ref<any[]>([
<q-space />
<div class="row items-center">
<div class="text-white q-mr-md">{{ fullname }}</div>
<q-btn
flat
dense
color="white"
icon="logout"
label="ออกจากระบบ"
@click="logout"
/>
<q-btn @click="logout()" class="btn_logout">
ออกจากระบบ <i class="mdi mdi-logout"></i>
</q-btn>
</div>
</q-toolbar>
@ -198,45 +193,46 @@ const cards = ref<any[]>([
</div>
</div>
<!-- Card Section -->
<div class="q-pa-lg q-mt-lg">
<div class="row justify-center q-gutter-md">
<q-card
v-for="(card, index) in cards"
:key="index"
bordered
:class="index % 2 === 0 ? 'my-card' : 'my-card card-right'"
>
<q-img :src="card.img" />
<!-- Card Section justify-center-->
<div class="q-mt-xl">
<div class="row q-col-gutter-md">
<div class="col" v-for="(card, index) in cards" :key="index">
<q-card
bordered
class="my-card"
:class="index % 2 === 0 ? 'my-card' : 'my-card card-right'"
>
<q-img :src="card.img" />
<q-card-section>
<div class="row col-12">
<q-btn
outline
class="full-width"
color="primary"
:label="card.label"
@click="
goPage(
card.page,
card.page === 'user'
? urlUser
: card.page === 'checkin'
? urlCheckin
: card.page === 'mgt'
? urlMgt
: card.page === 'admin'
? urlAdmin
: ''
)
"
/>
</div>
</q-card-section>
</q-card>
<q-card-section>
<div class="row col-12">
<q-btn
outline
class="full-width"
color="primary"
:label="card.label"
@click="
goPage(
card.page,
card.page === 'user'
? urlUser
: card.page === 'checkin'
? urlCheckin
: card.page === 'mgt'
? urlMgt
: card.page === 'admin'
? urlAdmin
: ''
)
"
/>
</div>
</q-card-section>
</q-card>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- <div class="q-ma-md">
@ -284,7 +280,7 @@ const cards = ref<any[]>([
<style lang="scss" scoped>
.my-card {
min-width: 300px;
width: 100%;
border: 1px solid rgb(255, 255, 255);
border-radius: 12px; /* มุมโค้งมน */
transition: all 0.3s ease; /* ทำให้การเปลี่ยนแปลงดูนุ่มนวล */
@ -299,40 +295,6 @@ const cards = ref<any[]>([
transform: translateY(30px); /* เลื่อนการ์ดลงเล็กน้อย */
}
.navbar_toggler {
padding: 0.25rem 0.75rem;
font-size: 1.5rem;
line-height: 1;
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
border: 0px solid rgb(255, 255, 255);
border-radius: 0.375rem;
transition: box-shadow 0.15s ease-in-out;
}
.navbar_toggler:hover {
background-color: #00ffc8a1;
transition: 0.8s;
box-shadow: rgba(255, 255, 255, 0.16) 0px 10px 36px 0px,
rgba(255, 255, 255, 0.06) 0px 0px 0px 1px;
}
.navbar_toggler_icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background-image: var(--bs-navbar-toggler-icon-bg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.h_txt {
font-size: 24px;
font-weight: 600;
}
.s_txt {
font-size: 16px;
font-weight: 300;
}
.btn_logout {
text-align: center;
text-decoration: none;
@ -361,29 +323,7 @@ const cards = ref<any[]>([
left: 0;
bottom: 0;
}
.txt_detail {
color: #c0c0c0;
}
.img_absolute {
position: absolute;
top: -170px;
}
.d_over {
display: none;
}
.btn_custom {
background-color: #00aa86;
cursor: pointer;
border: 0;
padding: 8px 0 8px 0;
border-radius: 12px;
color: #fff;
font-size: 18px;
font-weight: 500;
}
.btn_custom:hover {
background-color: #00ca9f;
}
.bg-img {
background: rgb(30, 50, 49);
background: linear-gradient(
@ -393,82 +333,4 @@ const cards = ref<any[]>([
);
min-height: 480px;
}
body {
font-family: "Noto Sans Thai", sans-serif !important;
}
.h-custom {
height: calc(100% - 73px);
}
@media only screen and (max-width: 450px) {
.h-custom {
height: 100%;
}
.h_txt {
font-size: 14px;
}
.s_txt {
font-size: 12px;
}
}
@media only screen and (min-width: 451px) and (max-width: 600px) {
.h_txt {
font-size: 20px;
}
.s_txt {
font-size: 16px;
}
}
@media (max-width: 991px) {
/* Up to medium screens */
.bg_md {
background-color: #fff;
padding: 20px;
border-radius: 20px;
}
.d_over {
display: block;
}
.txt_detail {
color: #949494;
font-size: 12px;
}
}
@media only screen and (max-width: 1399px) and (min-width: 1201px) {
.box_info {
max-height: 280px;
width: 280px;
}
.bg-img {
min-height: 468px;
}
}
@media only screen and (max-width: 1200px) and (min-width: 1101px) {
.box_info {
max-height: 260px;
width: 260px;
}
.bg-img {
min-height: 456px;
}
.position_box {
position: absolute;
top: -30px;
}
}
@media only screen and (max-width: 1100px) and (min-width: 992px) {
.box_info {
max-height: 240px;
width: 240px;
}
.bg-img {
min-height: 456px;
}
.position_box {
position: absolute;
top: -18px;
}
}
</style>