ปรับ UI 2 post/page add id group

src/components/search/CardUser.vue

@@ -10,7 +10,7 @@
       class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
     >
       <!-- {{ dataProfile }} -->
-      <v-row >
+      <v-row>
         <v-col
           v-for="(item, i) in dataProfile"
           :key="i"
@@ -18,38 +18,45 @@
           md="12"
           lg="12"
         >
-          <v-card elevation="5" class="text-sub2 mx-auto pb-8 card-user" maxWidth="900" rounded="xl">
+          <v-card
-            <div
+            elevation="7"
+            class="text-sub2 mx-auto pb-8 card-user"
+            maxWidth="900"
+            rounded="xl"
+          >
+            <!-- <div
               style="background: #37332f; color: white; width: 100%"
               class="font-weight-bold pa-2 w-100 text-center"
             >
-              <div class="more" v-if="item.group">{{ item.group.name }}</div>
+              <div class="more" v-if="item.group">
-            </div>
+                <v-avatar color="#f4c03f" size="35" class="mr-2"
-            <v-card-item>
+                  >{{ item.group.id }}
+                </v-avatar>
+                {{ item.group.name }}
+              </div>
+            </div> -->
+            <v-card-item class="mt-3">
               <v-row align="left">
-                <!-- <div class="box-province px-3 py-2">
+                <v-col cols="12" md="auto" class="text-center my-auto">
-                  <div class="font-weight-bold">
-                    {{ item.province }} เขต{{ item.district }}
-                  </div>
-                </div> -->
-
-                <v-col cols="12" md="auto" class="text-center">
                   <!-- {{ item.image }} -->
-
+                  <v-img
-                  <v-avatar
-                    color="#635d56"
-                    size="100"
                     v-if="item.image"
-                    :image="item.image"
+                    :src="item.image"
+                    :width="150"
+                    :height="180"
+                    aspect-ratio="16/9"
+                    cover
+                    rounded="xl"
+                    class="mx-auto"
                   >
-                  </v-avatar
+                  </v-img
-                  ><v-avatar color="#635d56" size="100" v-else>
+                  ><v-avatar color="#635d56" size="100"    class="mx-auto" v-else>
                     <v-icon icon="mdi-account" color="" size="80"></v-icon>
                   </v-avatar>
                 </v-col>
-                <v-col cols="12" md="" class="text-center">
+                <v-col cols="12" md="" class="mx-auto px-5">
-                  <div class="font-weight-bold text-normal my-2 text-center">
+                  <div class="font-weight-bold text-normal my-2 text-md-left">
-                    {{ item.firstName }}
+                    <span> {{ item.firstName }}</span>
                     <span class="ml-3">
                       {{ item.lastName }}
                       <span v-if="item.age" class="text-sub2">
@@ -57,23 +64,67 @@
                       ></span
                     >
                     <div
-                      class="box-province px-3 py-2 text-sub2"
+                      class="px-3 py-2 text-sub2 box-province"
                       v-if="item.zone"
                     >
-                      <div class="font-weight-bold">
+                      <!-- <div
+                        class="py-2 px-3"
+                        v-if="item.group"
+                        style="
+                          background-color: #f7d278;
+                          border-radius: 10px 10px 0px 0px;
+                        "
+                      >
+                        <v-avatar color="#37332F" size="35" class="mr-2"
+                          >{{ item.group.id }}
+                        </v-avatar>
+                        {{ item.group.name }}
+                      </div> -->
+                      <div
+                        class="font-weight-bold py-2 px-3"
+                        style="background-color: #f4c03f; border-radius: 10px"
+                      >
                         {{ item.zone.province.name }} |
                         <span class="font-weight-medium">{{
                           item.zone.name
                         }}</span>
                       </div>
+                      <!-- <hr> -->
                     </div>
-                    <!-- <div class="text-sub3">{{ item.group }}</div> -->
+                    <v-row
+                      class="text-sub2 line-g mb-2 my-2 mx-3"
+                   
+                    >
+                      <v-col
+                        class="line-r-g py-md-0"
+                        cols="auto"
+                        style="background-color: #f4c03f"
+                      >
+                    
+                          <div class="mx-2 text-normal py-0 my-auto">
+                            {{ item.group.id }}
+                          </div>
+           
+                      </v-col>
+                      <v-col class="text-left py-0 my-auto ">
+                        <div class="mx-auto "> {{ item.group.name }}</div>
+                      </v-col>
+                    </v-row>
                   </div>
                 </v-col>
               </v-row>
 
               <v-row>
                 <v-col cols="12">
+                  <v-row class="text-subtitle line-g mb-2 d-none">
+                    <v-col class="line-r-g" cols="auto">
+                      <span class="mx-2 "> {{ item.group.id }} </span>
+                    </v-col>
+                    <v-col class="text-left">
+                      <span class="mx-5"> {{ item.group.name }}</span>
+                    </v-col>
+                  </v-row>
+
                   <div class="text-small text-left">
                     <div class="font-weight-medium">
                       <span class="font-weight-bold">อาชีพ :</span>
@@ -351,23 +402,29 @@ export default {
 };
 </script>
 <style>
+.line-r-g {
+  padding-left: 5px;
+  border-color: #f4c03f;
+  border-right: 0.2px solid #f4c03f;
+}
+.line-g {
+  border: 1px solid #f4c03f;
+}
 .card-user {
   height: 100%;
   /* height: 370px; */
 }
 .more {
-  width: 92%;
+  width: 95%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin: auto;
 }
 .box-province {
-  background-color: #f4c03f;
   border-radius: 5px;
-  margin: auto;
+
   width: fit-content;
-  box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
 }
 @media only screen and (min-width: 0px) and (max-width: 700px) {
   .card-user {

src/components/search/SearchMain.vue

@@ -98,7 +98,7 @@
         </v-btn>
       </v-container>
 
-      <CardUser :dataProfile="result" v-if="result.length"  class="mt-2"/>
+      <CardUser :dataProfile="result" v-if="result.length" class="mt-2" />
 
       <div
         v-if="result.length == 0 && this.show"
@@ -110,12 +110,12 @@
       {{ Number(result.length)/ 2 }} -->
       <div class="text-center mt-2">
         <v-pagination
-        elevation="3"
+          elevation="3"
           v-if="count > 1"
           v-model="page"
-          :length="Math.ceil(count / 1)"
+          :length="Math.ceil(count / 2)"
           rounded="circle"
-          @click="searchUser(this.page - 1)"
+          @update:model-value="searchUser((this.page -1)*2)"
           next-icon="mdi-menu-right"
           prev-icon="mdi-menu-left"
         ></v-pagination>
@@ -159,7 +159,7 @@ export default {
       }
       let data = {
         offset: offset,
-        limit: 1,
+        limit: 2,
       };
       if (this.province) {
         data.province = this.province.id;
@@ -201,7 +201,7 @@ export default {
       // this.offset = (this.page - 1) * 10;
       let data = {
         offset: offset,
-        limit: 1,
+        limit: 2,
       };
       if (this.province) {
         data.province = this.province.id;