update style card / ปรับ offset / limit

src/components/search/CardUser.vue

@@ -15,10 +15,10 @@
           v-for="(item, i) in dataProfile"
           :key="i"
           cols="12"
-          md="6"
-          lg="6"
+          md="12"
+          lg="12"
         >
-          <v-card elevation="5" class="text-sub2 mx-auto pb-5 card-user">
+          <v-card elevation="5" 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"

src/components/search/SearchMain.vue

@@ -12,6 +12,9 @@
         สามารถค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
         ที่ตัวเองเป็นผู้แสดงตน
       </div>
+      <div class="text-small text-red-darken-3">
+        * การแสดงผลเป็นแบบสุ่มไม่เรียงลำดับ
+      </div>
       <v-container>
         <!-- {{ checkdata }} -->
         <v-row>
@@ -69,7 +72,7 @@
               :items="items"
               variant="solo"
               item-title="name"
-              item-value="id"
+              return-object
               placeholder="กลุ่มอาชีพ"
               hide-details
               v-model="group"
@@ -94,9 +97,9 @@
           <span class="text-sub">ค้นหา</span>
         </v-btn>
       </v-container>
-      <!-- {{result}} -->
-      <CardUser :dataProfile="result" v-if="result.length" />
-      <!-- {{ show }} -->
+
+      <CardUser :dataProfile="result" v-if="result.length"  class="mt-2"/>
+
       <div
         v-if="result.length == 0 && this.show"
         class="my-10 text-sub2 txt-black"
@@ -106,13 +109,16 @@
       <!-- {{ count }}
       {{ Number(result.length)/ 2 }} -->
 
-      <div class="text-center">
+      <div class="text-center mt-2">
         <v-pagination
-          v-if="count > 0"
+        elevation="3"
+          v-if="count > 1"
           v-model="page"
-          :length="Math.ceil(count / 10)"
+          :length="Math.ceil(count / 1)"
           rounded="circle"
-          @click="searchUser((this.page - 1) * 2)"
+          @click="searchUser(this.page - 1)"
+          next-icon="mdi-menu-right"
+          prev-icon="mdi-menu-left"
         ></v-pagination>
       </div>
     </div>
@@ -154,7 +160,7 @@ export default {
       }
       let data = {
         offset: offset,
-        limit: 10,
+        limit: 1,
       };
       if (this.province) {
         data.province = this.province.id;
@@ -196,14 +202,14 @@ export default {
       // this.offset = (this.page - 1) * 10;
       let data = {
         offset: offset,
-        limit: 10,
+        limit: 1,
       };
       if (this.province) {
         data.province = this.province.id;
         // data.province = this.province;
       }
       if (this.group) {
-        data.group = this.group;
+        data.group = this.group.id;
       }
       if (this.district) {
         data.zone = this.district.id;
@@ -259,9 +265,11 @@ export default {
         .mutate({})
         .then((data) => {
           let province = datap.filter((x) => x.id === data.zone.province);
+          // let g =[...this.items].filter((x) => x.id === data.group);
           this.province = province[0];
           this.district = data.zone;
           this.checkdata = { ...data };
+          this.group = data.group;
         })
         .catch((error) => {
           alert("ไม่สามารถโหลดข้อมูลได้");
@@ -293,4 +301,25 @@ export default {
   },
 };
 </script>
-<style></style>
+<style>
+.v-pagination .v-btn {
+  font-size: 50px;
+  width: auto;
+  height: auto;
+  background-color: rgb(221, 108, 49);
+}
+/* #app > div > div > main > div:nth-child(2) > div > div > div.text-center > nav > ul > li> button{
+  display: none;
+} */
+.v-pagination .v-pagination__item .v-btn {
+  display: none;
+}
+.v-pagination .v-btn .pagination__prev {
+  font-size: 80px;
+  display: block !important;
+}
+.v-pagination .v-btn .pagination__next {
+  display: block !important;
+  font-size: 80px;
+}
+</style>