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

Merge branch 'main' of github.com:Frappet/hrms-landing

Browse source 
* 'main' of github.com:Frappet/hrms-landing:
  fix
  ui home
  ui
This commit is contained in:
Warunee Tamkoo 2024-12-17 13:36:36 +07:00
commit 7d1fdda32e
1 changed files with 171 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

176
src/views/home.vue
View file

@ -121,10 +121,126 @@ onMounted(async () => {
});
}
});
const cards = ref<any[]>([
{
label: "ระบบบริการเจ้าของข้อมูล",
img: "https://bma-sso.frappet.synology.me/images/screen1.png",
page: "user",
url: "urlUser",
},
{
label: "ระบบลงเวลาปฏิบัติราชการ",
img: "https://bma-sso.frappet.synology.me/images/screen2.png",
page: "checkin",
url: "urlCheckin",
},
{
label: "ระบบบริหารจัดการ",
img: "https://bma-sso.frappet.synology.me/images/screen3.png",
page: "mgt",
url: "urlMgt",
},
{
label: "ระบบแอดมิน",
img: "https://bma-sso.frappet.synology.me/images/screen4.png",
page: "admin",
url: "urlAdmin",
},
]);
</script>
<template>
<div class="q-ma-md">
<!-- 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>
<div class="row justify-center">
<div class="col-9 q-pa-xl">
<q-toolbar style="padding: 0px">
<div class="row items-center q-py-sm">
<q-img
src="https://bma-sso.frappet.synology.me/images/sso.png"
style="width: 80px"
/>
<div class="text-white q-ml-md" v-if="$q.screen.md">
<div class="text-grey-5 text-caption">
Bangkok Metropolitan Administration
</div>
<div class="text-bold text-left">Single Sign-On</div>
</div>
</div>
<q-space />
<div class="row items-center q-col-gutter-md">
<div class="text-white">{{ fullname }}</div>
<div>
<q-btn @click="logout()" class="btn_logout">
ออกจากระบบ <i class="mdi mdi-logout"></i>
</q-btn>
</div>
</div>
</q-toolbar>
<!-- Title Section -->
<div class="text-white text-center" style="margin-top: 30px">
<div class="text-h5 text-bold">
ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
<div class="text-caption q-mt-sm">
Human Resource Management System (HRMS)
</div>
</div>
<!-- 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="
$q.screen.gt.md ? (index % 2 === 0 ? '' : '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>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="q-ma-md">
<div class="row">
{{ fullname }}
<q-btn @click="logout()" class="btn_logout">
@ -132,14 +248,14 @@ onMounted(async () => {
</q-btn>
</div>
<div class="row">
<div class="col-4">
<div class="col-4">
<img src="@/assets/screen1.png" style="width: 100%" />
<div class="h-100 py-3">
<a @click="goPage('user', urlUser)" class="link">
ระบบบริการเจ้าของข้อมูล
</a>
</div>
</div>
</div>
<div class="col-4">
<img src="@/assets/screen2.png" style="width: 100%" />
@ -164,11 +280,61 @@ onMounted(async () => {
</div>
</div>
</div>
</div>
</div> -->
</template>
<style lang="scss" scoped>
.link {
.my-card {
width: 100%;
border: 1px solid rgb(255, 255, 255);
border-radius: 12px; /* มุมโค้งมน */
transition: all 0.3s ease; /* ทำให้การเปลี่ยนแปลงดูนุ่มนวล */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* เพิ่มเงาเมื่อ hover */
}
.card-left {
transform: translateY(-5px);
}
.card-right {
transform: translateY(30px); /* เลื่อนการ์ดลงเล็กน้อย */
}
.btn_logout {
text-align: center;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
border: 0;
border-radius: 50px;
color: #fff;
font-size: 16px;
font-weight: 400;
}
.btn_logout:hover {
color: #fff;
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;
}
.img_absolute_line {
position: absolute;
height: 100%;
width: auto;
left: 0;
bottom: 0;
}
.bg-img {
background: rgb(30, 50, 49);
background: linear-gradient(
90deg,
rgba(30, 50, 49, 1) 0%,
rgba(20, 120, 99, 1) 100%
);
min-height: 480px;
}
</style>