ui
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
b8e1c415e1
commit
6d179f084c
1 changed files with 306 additions and 5 deletions
|
|
@ -120,10 +120,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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="q-ma-md">
|
<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>
|
||||||
|
|
||||||
|
<q-toolbar class="text-primary">
|
||||||
|
<div class="row items-center q-px-md 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">
|
||||||
|
<div class="text-grey-5 text-caption">
|
||||||
|
Bangkok Metropolitan Administration
|
||||||
|
</div>
|
||||||
|
<div class="text-bold">Single Sign-On</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<!-- Title Section -->
|
||||||
|
<div class="text-white text-center q-mt-lg">
|
||||||
|
<div class="text-h5 text-bold">
|
||||||
|
ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||||
|
</div>
|
||||||
|
<div class="text-caption q-mt-sm">
|
||||||
|
Human Resource Management System (HRMS)
|
||||||
|
</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" />
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="q-ma-md">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
{{ fullname }}
|
{{ fullname }}
|
||||||
<q-btn @click="logout()" class="btn_logout">
|
<q-btn @click="logout()" class="btn_logout">
|
||||||
|
|
@ -131,14 +247,14 @@ onMounted(async () => {
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<img src="@/assets/screen1.png" style="width: 100%" />
|
<img src="@/assets/screen1.png" style="width: 100%" />
|
||||||
<div class="h-100 py-3">
|
<div class="h-100 py-3">
|
||||||
<a @click="goPage('user', urlUser)" class="link">
|
<a @click="goPage('user', urlUser)" class="link">
|
||||||
ระบบบริการเจ้าของข้อมูล
|
ระบบบริการเจ้าของข้อมูล
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<img src="@/assets/screen2.png" style="width: 100%" />
|
<img src="@/assets/screen2.png" style="width: 100%" />
|
||||||
|
|
@ -163,11 +279,196 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.link {
|
.my-card {
|
||||||
|
min-width: 300px;
|
||||||
|
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); /* เลื่อนการ์ดลงเล็กน้อย */
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
padding: 8px 10px 8px 10px;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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(
|
||||||
|
90deg,
|
||||||
|
rgba(30, 50, 49, 1) 0%,
|
||||||
|
rgba(20, 120, 99, 1) 100%
|
||||||
|
);
|
||||||
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue