Atapy/sorvor-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ปรับ UI 2 post/page add id group
All checks were successful
frontend-action / build-image (push) Successful in 46s
Details

Browse Source
This commit is contained in:
Jarinya
2024-05-13 18:27:22 +07:00
parent 75d60c0284
commit d917a93db2
2 changed files with 93 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/search/CardUser.vue
View File

@@ -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">
<div
<v-card
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>
<v-card-item>
<div class="more" v-if="item.group">
<v-avatar color="#f4c03f" size="35" class="mr-2"
>{{ 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">
<div class="font-weight-bold">
{{ item.province }} เขต{{ item.district }}
</div>
</div> -->
<v-col cols="12" md="auto" class="text-center">
<v-col cols="12" md="auto" class="text-center my-auto">
<!-- {{ item.image }} -->
<v-avatar
color="#635d56"
size="100"
<v-img
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-avatar color="#635d56" size="100" v-else>
</v-img
><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">
<div class="font-weight-bold text-normal my-2 text-center">
{{ item.firstName }}
<v-col cols="12" md="" class="mx-auto px-5">
<div class="font-weight-bold text-normal my-2 text-md-left">
<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 {

12
src/components/search/SearchMain.vue
View File

@@ -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;