From 6426b0868de20c7905d734a4bbbf1ef2d0415666 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 15:23:42 +0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B8=AA=E0=B8=B5=20icon=20=E0=B9=83?=
 =?UTF-8?q?=E0=B8=AB=E0=B9=89=20=E0=B8=9A=E0=B8=A3=E0=B8=B4=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=84=E0=B9=89=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 31 +++++++++++++----------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 8dffc7cb..235e934f 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -102,12 +102,12 @@ const stat = ref<
 >([
   { icon: 'mdi-folder', count: 0, label: 'productAndService', color: 'pink' },
   {
-    icon: 'mdi-folder',
+    icon: 'mdi-folder-table',
     count: 0,
     label: 'productAndServiceType',
     color: 'purple',
   },
-  { icon: 'mdi-folder', count: 0, label: 'service', color: 'orange' },
+  { icon: 'mdi-server-network', count: 0, label: 'service', color: 'orange' },
   { icon: 'mdi-folder', count: 0, label: 'product', color: 'green' },
 ]);
 
@@ -1410,8 +1410,8 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div style="height: 100%" class="scroll">
-          <div class="row  col full-width full-height">
+        <div  class="col flex scroll full-height q-pa-md surface-1 ">
+          <div class="full-width">
             <q-table
               flat
               bordered
@@ -1420,7 +1420,7 @@ watch(inputSearchProductAndService, async () => {
                 (productMode === 'type' ? productType : productGroup) || []
               "
               :columns="tbColumn.groupAndType"
-              class="full-width"
+              class="  full-width  "
               card-container-class="q-gutter-md  "
               row-key="name"
               :rows-per-page-options="[0]"
@@ -1475,14 +1475,17 @@ watch(inputSearchProductAndService, async () => {
                         margin-bottom: var(--size-2);
                       "
                     >
-                      <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="branch-card__icon">
+                      <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="table__icon">
 
                    
+                            <q-icon
+                              size="md"
+                              style="scale: 0.8"
+                              :name="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
+                            />
 
-                        <q-avatar  size="md" icon="mdi-folder">
 
-                     
-                        </q-avatar>
+                    
                       </div>
                     </div>
                     <div class="col">
@@ -2317,11 +2320,11 @@ watch(inputSearchProductAndService, async () => {
                             margin-bottom: var(--size-2);
                           "
                         >
-                          <div class="table__icon">
+                          <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'orange' : 'green'}`">
                             <q-icon
                               size="md"
                               style="scale: 0.8"
-                              name="mdi-office-building-outline"
+                              :name="productAndServiceTab === 'product' ? 'mdi-folder' : 'mdi-server-network'"
                             />
                           </div>
                         </div>
@@ -3293,7 +3296,7 @@ watch(inputSearchProductAndService, async () => {
   --_color: var(--orange-6-hsl);
 }
 
-.branch-card__icon {
+.table__icon {
 
   background-color: hsla(var(--_color) / 0.15);
   color: hsla(var(--_color) / 1);
@@ -3316,10 +3319,12 @@ watch(inputSearchProductAndService, async () => {
     background-color: hsla(var(--_branch-status-color) / 1);
   }
 
-  & :deep(.q-avatar) {
+    &:deep(.q-icon)  {
     transform: rotate(-45deg);
     color: hsla(var(--_branch-card-bg) / 1);
   }
+
+
 }
 
 </style>