From 141a7cbd3154122d80f985ddb464c3d84e1ac405 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 17 Dec 2024 13:11:18 +0700
Subject: [PATCH] ui home

---
 src/views/home.vue | 244 ++++++++++-----------------------------------
 1 file changed, 53 insertions(+), 191 deletions(-)

diff --git a/src/views/home.vue b/src/views/home.vue
index 5db3ab1..e8b4051 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -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>