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

update style card

Browse Source
This commit is contained in:
Jarinya Jusing
2024-04-20 17:53:20 +07:00
parent 054c4f0ea8
commit 2c81dc333c
6 changed files with 170 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,49 +10,63 @@
class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
>
<v-row>
<v-col v-for="(item, i) in profile" :key="i" cols="12" md="6" lg="6">
<v-card
elevation="3"
class="text-sub2 mx-auto py-5"
max-height="380"
min-height="380"
>
<v-card-item>
<v-col v-for="(item, i) in profile" :key="i" cols="12" md="6" lg="6" >
<v-card elevation="5" class="text-sub2 mx-auto pb-5 card-user" >
<div
style="background: #37332f; color: white; width: 100%"
class="font-weight-bold pa-2 w-100 text-center"
>
<div class="more">{{ item.group }}</div>
</div>
<v-card-item >
<v-row align="left">
<div class="box-province px-3 py-2">
<!-- <div class="box-province px-3 py-2">
<div class="font-weight-bold">
{{ item.province }} เขต{{ item.district }}
</div>
</div>
<v-col cols="auto" class="text-left">
<v-avatar color="#DD6C31" size="100">
</div> -->
<v-col cols="12" md="auto" class="text-center">
<v-avatar color="#635d56" size="100">
<v-icon
icon="mdi-account"
color=""
size="80"
></v-icon> </v-avatar
></v-col>
<v-col cols="" class="text-left">
<div class="font-weight-bold text-normal my-2">
<v-col cols="12" md="" class="text-center">
<div class="font-weight-bold text-normal my-2 text-center">
{{ item.name }}
<span class="ml-3">
{{ item.lastname }}
<span v-if="item.age" class="text-sub2"> ( {{ item.age }}ปี )</span></span
<span v-if="item.age" class="text-sub2">
( {{ item.age }}ปี )</span
></span
>
<div class="text-sub3">{{ item.group }}</div>
<div class="box-province px-3 py-2 text-sub2">
<div class="font-weight-bold">
{{ item.province }} |
<span class="font-weight-medium"
>เขต{{ item.district }}</span
>
</div>
</div>
<!-- <div class="text-sub3">{{ item.group }}</div> -->
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<div class="text-small text-left">
<div class="font-weight-medium ">
อาชีพ : {{ item.occupation }}
<div class="text-small text-left">
<div class="font-weight-medium">
<span class="font-weight-bold">อาชีพ :</span>
{{ item.occupation }}
</div>
<div class="font-weight-medium">
การศึกษา : {{ item.education }}
<span class="font-weight-bold">การศึกษา :</span>
{{ item.education }}
</div>
</div>
</v-col>
@@ -80,22 +94,24 @@
</span>
</div>
<div class="text-small font-weight-bold text-left d-none">จุดยืน
<v-divider class="my-1"></v-divider>
<v-row class="text-small" style="height: 150px; overflow: auto">
<v-col class="text-left">
<div class="font-weight-bold">เห็นด้วย :</div>
<div v-for="(ag, k) in item.opinion.agree" :key="k">
{{ ag }}
</div>
</v-col>
<v-col class="text-left">
<div class="font-weight-bold">ไม่เห็นด้วย :</div>
<div v-for="(ag, k) in item.opinion.disagree" :key="k">
{{ ag }}
</div>
</v-col>
</v-row></div>
<div class="text-small font-weight-bold text-left d-none">
จุดยืน
<v-divider class="my-1"></v-divider>
<v-row class="text-small" style="height: 150px; overflow: auto">
<v-col class="text-left">
<div class="font-weight-bold">เห็นด้วย :</div>
<div v-for="(ag, k) in item.opinion.agree" :key="k">
{{ ag }}
</div>
</v-col>
<v-col class="text-left">
<div class="font-weight-bold">ไม่เห็นด้วย :</div>
<div v-for="(ag, k) in item.opinion.disagree" :key="k">
{{ ag }}
</div>
</v-col>
</v-row>
</div>
</v-card-item>
</v-card></v-col
>
@@ -280,23 +296,30 @@ export default {
};
</script>
<style>
.more{
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.card-user{
height: auto;
/* height: 370px; */
}
.more {
width: 92%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: auto;
}
.box-province {
position: absolute;
top: 0;
right: 0;
background-color: #f4c03f;
border-radius: 5px;
margin: 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) {
.box-province {
.card-user {
max-height: auto !important;
height: auto !important;
}
/* .box-province {
position: unset;
display: block;
width: 100%;
@@ -306,6 +329,6 @@ export default {
border-radius: 5px;
margin: 5px;
box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
}
} */
}
</style>