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

33
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@mdi/font": "5.9.55",
"@trpc/client": "^10.45.2",
"roboto-fontface": "*",
"vue": "^3.2.13",
"vue-router": "^4.3.0",
@@ -1608,6 +1609,26 @@
"node": ">= 6"
}
},
"node_modules/@trpc/client": {
"version": "10.45.2",
"resolved": "https://registry.npmjs.org/@trpc/client/-/client-10.45.2.tgz",
"integrity": "sha512-ykALM5kYWTLn1zYuUOZ2cPWlVfrXhc18HzBDyRhoPYN0jey4iQHEFSEowfnhg1RvYnrAVjNBgHNeSAXjrDbGwg==",
"funding": [
"https://trpc.io/sponsor"
],
"peerDependencies": {
"@trpc/server": "10.45.2"
}
},
"node_modules/@trpc/server": {
"version": "10.45.2",
"resolved": "https://registry.npmjs.org/@trpc/server/-/server-10.45.2.tgz",
"integrity": "sha512-wOrSThNNE4HUnuhJG6PfDRp4L2009KDVxsd+2VYH8ro6o/7/jwYZ8Uu5j+VaW+mOmc8EHerHzGcdbGNQSAUPgg==",
"funding": [
"https://trpc.io/sponsor"
],
"peer": true
},
"node_modules/@trysound/sax": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
@@ -15816,6 +15837,18 @@
"integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
"dev": true
},
"@trpc/client": {
"version": "10.45.2",
"resolved": "https://registry.npmjs.org/@trpc/client/-/client-10.45.2.tgz",
"integrity": "sha512-ykALM5kYWTLn1zYuUOZ2cPWlVfrXhc18HzBDyRhoPYN0jey4iQHEFSEowfnhg1RvYnrAVjNBgHNeSAXjrDbGwg==",
"requires": {}
},
"@trpc/server": {
"version": "10.45.2",
"resolved": "https://registry.npmjs.org/@trpc/server/-/server-10.45.2.tgz",
"integrity": "sha512-wOrSThNNE4HUnuhJG6PfDRp4L2009KDVxsd+2VYH8ro6o/7/jwYZ8Uu5j+VaW+mOmc8EHerHzGcdbGNQSAUPgg==",
"peer": true
},
"@trysound/sax": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",

BIN
src/assets/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

25
src/components/HeaderHome.vue
View File

@@ -32,7 +32,7 @@
</div>
<div style="position: relative" class="bg-curve" id="started">
<v-row style="height: 100%" align="center" class="text-center">
<v-col cols="12" md="6">
<v-col cols="12" md="4">
<div style="position: relative">
<v-btn
elevated
@@ -54,7 +54,7 @@
</v-btn>
</div>
</v-col>
<v-col cols="12" md="6">
<v-col cols="12" md="4" class="mt-0 mt-md-10 mt-lg-10">
<v-btn
elevated
color="#DD6C31"
@@ -67,11 +67,30 @@
:aspect-ratio="1"
src="../assets/Group 23.png"
width="80"
style="position: absolute; bottom: -30px; right: 0px"
style="position: absolute; bottom: -30px; right: 50"
></v-img>
แสดงตนเป็นผู้สมัคร
</v-btn>
</v-col>
<v-col cols="12" md="4">
<v-btn
elevated
color="#DD6C31"
class="text-normal"
stacked
width="300"
height="110"
to="/search"
>
<v-img
:aspect-ratio="1"
src="../assets/search.png"
width="100"
style="position: absolute; top: -40px; right: 0px"
></v-img>
ค้นหาผู้สมัคร สว.
</v-btn>
</v-col>
</v-row>
</div>
</div>

57
src/components/form/FormSteper.vue
View File

@@ -48,7 +48,7 @@
</v-col>
<v-col class="py-3" cols="12" md="6">
<v-text-field
label="อาชีพ / Occupation"
label="อาชีพ / Occupation"
variant="solo"
></v-text-field>
<!-- <v-select
@@ -76,16 +76,27 @@
</v-col>
<v-col>
<v-card color="#4C884C" class="py-5" elevated>
<v-icon icon="mdi-cellphone-message" size="200"></v-icon>
<div class="text-sub">ยืนยันรหัส OTP</div>
<div>05:00</div>
<div>
<v-otp-input variant="solo-filled"></v-otp-input>
<v-card color="#4C884C" class="pa-5" elevated>
<div class="text-sub text-left">
<v-icon icon="mdi-plus-box-multiple"></v-icon>
เพิ่มรูปภาพ
</div>
<v-btn color="#DD6C31" class="mt-4" height="40">
<span class="text-sub">ยืนยัน</span>
</v-btn>
<v-avatar size="200" color="grey" class="elevation-3">
<v-img :src="url" v-if="url"></v-img>
<v-icon dark v-else size="80"> mdi-account </v-icon>
</v-avatar>
<v-file-input
label="แนบรูปภาพ"
accept="image/png, image/jpeg, image/bmp"
placeholder="แนบรูปภาพไฟล์ png/jpeg/jpg"
prepend-inner-icon="mdi-camera"
prepend-icon=""
variant="solo-filled"
class="mt-5"
@change="Preview_image"
v-model="image"
></v-file-input>
</v-card>
</v-col>
</v-row>
@@ -118,9 +129,7 @@
<v-card>
<div class="text-sub">
จังหวัดที่คุณประสงค์จะลงสมัคร*
<span class="text-sub3"
>สามารถเลือก 1 อำเภอ/เขต</span
>
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
<hr class="my-3" />
<div class="text-sub3 text-red font-weight-bold">
เงื่อนไข
@@ -150,9 +159,7 @@
<v-card>
<div class="text-sub">
อำเภอที่คุณประสงค์จะลงสมัคร*
<span class="text-sub3"
>สามารถเลือก 1 อำเภอ/เขต</span
>
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
<hr class="my-3" />
<div class="text-sub3 text-red font-weight-bold">
เงื่อนไข
@@ -423,6 +430,14 @@
import Provinces from "./provinces.json";
import Districts from "./districts.json";
export default {
watch: {
image(val) {
console.log(val);
if(val==undefined){
this.url=null
}
},
},
computed: {
disabled() {
return this.e1 === 1
@@ -434,6 +449,8 @@ export default {
},
data() {
return {
url: null,
image: null,
province: null,
district: null,
districtItems: [],
@@ -534,6 +551,14 @@ export default {
};
},
methods: {
Preview_image() {
console.log("this.image", this.image,this.image.length);
if (this.image) {
this.url = URL.createObjectURL(this.image);
} else {
this.url = null;
}
},
filterData() {
// กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
if (this.province && this.province.provinceCode) {

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>

4
src/config.js
View File

@@ -1,3 +1,5 @@
export const CONFIG = {
api_url: "http://localhost:3000",
// api_url: "http://localhost:3000",
api_url: "http://178.128.18.156:3000",
};