แก้ responsive
All checks were successful
frontend-action / build-image (push) Successful in 1m9s

This commit is contained in:
2024-05-03 15:37:09 +07:00
parent 06c8dba3fc
commit 31ef9ed967
7 changed files with 144 additions and 56 deletions

View File

@@ -27,6 +27,7 @@
style="color: #0f470f" style="color: #0f470f"
size="large" size="large"
height="80" height="80"
width="470"
> >
<span class="text-normal"> นตอนการใชงานระบบ</span> <span class="text-normal"> นตอนการใชงานระบบ</span>
</v-btn> </v-btn>
@@ -83,7 +84,7 @@
</div> </div>
<div class="text-title m-3">ใครสมัคร สว.ได้บ้าง</div> <div class="text-title m-3">ใครสมัคร สว.ได้บ้าง</div>
<div> <div>
สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้พรรคการเมืองใดๆ
โดยมีคุณสมบัติดังนี้ โดยมีคุณสมบัติดังนี้
</div> </div>
<div>เช็คคุณสมบัติกันเลย !</div> <div>เช็คคุณสมบัติกันเลย !</div>
@@ -99,7 +100,7 @@
height="85" height="85"
to="/check" to="/check"
> >
<span class="text-normal"> ตรวจสอบคุณสมบัติการเป็น สว.</span> <span class="text-normal" style="white-space: break-spaces;"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
<v-img <v-img
:aspect-ratio="1" :aspect-ratio="1"
src="../assets/Group 9.png" src="../assets/Group 9.png"
@@ -207,4 +208,10 @@ export default {
width: fit-content; width: fit-content;
padding: 7px 10px; padding: 7px 10px;
} }
@media only screen and (min-width: 0px) and (max-width: 700px) {
.bg-curve {
height: 530px;
}
}
</style> </style>

View File

@@ -2,7 +2,7 @@
<div style="position: relative" class="bg-green-curve text-normal " > <div style="position: relative" class="bg-green-curve text-normal " >
<div <div
style="width: 90%" style="width: 90%"
class="text-center text-white py-10 pb-20 ma-auto" class="text-center text-white py-10 pb-20 mx-auto"
v-if=" v-if="
getUsername == '' || getUsername == null || getUsername == undefined getUsername == '' || getUsername == null || getUsername == undefined
" "
@@ -33,7 +33,7 @@
<span class="text-normal"> แสดงตนเป็นผู้สมัคร</span> <span class="text-normal"> แสดงตนเป็นผู้สมัคร</span>
</v-btn> </v-btn>
</div> </div>
<div class="text-center text-white py-10 pb-20" v-if="getUsername"> <div class="text-center text-white py-10 pb-20 mx-auto" v-if="getUsername" style="width: 90%">
<div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div> <div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
<div class="mb-8"> <div class="mb-8">
ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
@@ -51,7 +51,7 @@
:aspect-ratio="1" :aspect-ratio="1"
src="../assets/search.png" src="../assets/search.png"
width="100" width="100"
style="position: absolute; bottom: -20px; right: 0px" style="position: absolute; bottom: -30px; right: -10px"
></v-img> ></v-img>
<span class="text-normal"> ค้นหาผู้สมัคร สว.</span> <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
</v-btn> </v-btn>
@@ -69,7 +69,7 @@ export default {
<style> <style>
.bg-green-curve { .bg-green-curve {
background-image: url("/src/assets/Rectangle\ 3.png"); background-image: url("/src/assets/Rectangle\ 3.png");
min-height: 520px; min-height: 530px;
height: auto; height: auto;
background-position: center bottom; background-position: center bottom;
background-color: white; background-color: white;

View File

@@ -1,6 +1,6 @@
<template> <template>
<div style="position: relative;background-color: white;" class="text-normal pb-10" > <div style="position: relative;background-color: white;" class="text-normal pb-10" >
<div class="text-center txt-black py-8"> <div class="text-center txt-black py-8 mx-auto" style="width: 90%;">
<div <div
class="text-subtitle mx-10 text-center box-order mx-auto my-5 txt-black" class="text-subtitle mx-10 text-center box-order mx-auto my-5 txt-black"
@@ -22,7 +22,7 @@
height="80" height="80"
@click="checkPage" @click="checkPage"
> >
<span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span> <span class="text-normal" style="white-space: break-spaces;">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
</v-btn> </v-btn>
</div> </div>
</div> </div>

View File

@@ -61,4 +61,9 @@ export default {};
background-color: white; background-color: white;
height: auto; height: auto;
} }
@media only screen and (min-width: 0px) and (max-width: 700px) {
.border-dot {
border-right: 0px dashed #f2f7e200 !important;
}
}
</style> </style>

View File

@@ -4,7 +4,7 @@
<div> <div>
<v-stepper v-model="e1"> <v-stepper v-model="e1">
<template v-slot:default="{ prev, next }"> <template v-slot:default="">
<v-stepper-header> <v-stepper-header>
<template v-for="n in steps" :key="`${n}-step`"> <template v-for="n in steps" :key="`${n}-step`">
<v-stepper-item <v-stepper-item
@@ -40,6 +40,7 @@
variant="solo" variant="solo"
:rules="rules.required" :rules="rules.required"
v-model="payload.firstName" v-model="payload.firstName"
class="my-2"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
@@ -47,8 +48,11 @@
variant="solo" variant="solo"
:rules="rules.required" :rules="rules.required"
v-model="payload.lastName" v-model="payload.lastName"
class="my-2"
></v-text-field> ></v-text-field>
<div class="text-medium-emphasis" style="font-size: 15px">
กรอกเลขบตรประชาชน 13 หล เช 1234567890123
</div>
<v-text-field <v-text-field
label="เลขบัตรประชาชน / ID card number" label="เลขบัตรประชาชน / ID card number"
variant="solo" variant="solo"
@@ -56,6 +60,7 @@
v-model="payload.cid" v-model="payload.cid"
counter counter
readonly readonly
class="mb-2"
></v-text-field> ></v-text-field>
<v-row> <v-row>
@@ -133,14 +138,23 @@
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
<div class="btn-next">
<v-btn
@click.prevent="e1++"
:disabled="disabled && !form1"
variant="tonal"
class="float-right"
size="large"
>ดไป</v-btn
>
</div>
<!-- <v-btn @click.prevent="e1++" :disabled="!form1">next</v-btn> --> <!-- <v-stepper-actions
<v-stepper-actions
type="submit" type="submit"
:disabled="disabled && !form1" :disabled="disabled && !form1"
@click:next="next" @click:next="next"
@click:prev="prev" @click:prev="prev"
></v-stepper-actions> ></v-stepper-actions> -->
</v-form> </v-form>
<!-- </v-card> --> <!-- </v-card> -->
</v-stepper-window-item> </v-stepper-window-item>
@@ -238,8 +252,12 @@
</v-col> </v-col>
</v-row> </v-row>
<div class="btn-next"> <div class="btn-next">
<v-btn @click="e1--" variant="text" class="float-left" <v-btn
>Previous</v-btn @click="e1--"
class="float-left"
size="large"
variant="tonal"
>อนหน</v-btn
> >
<!-- <v-spacer></v-spacer> --> <!-- <v-spacer></v-spacer> -->
@@ -250,9 +268,10 @@
payload.zone.province == null || payload.zone.province == null ||
payload.zone.id == null payload.zone.id == null
" "
size="large"
variant="tonal" variant="tonal"
class="float-right" class="float-right"
>next</v-btn >ดไป</v-btn
> >
</div> </div>
<!-- <v-stepper-actions <!-- <v-stepper-actions
@@ -358,8 +377,8 @@
></v-textarea> --> ></v-textarea> -->
<div class="btn-next"> <div class="btn-next">
<v-btn @click="e1--" variant="text" class="float-left" <v-btn @click="e1--" variant="tonal" size="large" class="float-left"
>Previous</v-btn >อนหน</v-btn
> >
<!-- <v-spacer></v-spacer> --> <!-- <v-spacer></v-spacer> -->
@@ -368,7 +387,8 @@
:disabled="!(checkOpt1.count == checkOpt1.checkcount)" :disabled="!(checkOpt1.count == checkOpt1.checkcount)"
variant="tonal" variant="tonal"
class="float-right" class="float-right"
>next</v-btn size="large"
>ดไป</v-btn
> >
</div> </div>
<!-- {{ checkOpt1 }} --> <!-- {{ checkOpt1 }} -->
@@ -429,7 +449,7 @@
><v-text-field ><v-text-field
variant="solo" variant="solo"
bg-color="#F2EBD1" bg-color="#F2EBD1"
label="X" label="X (twitter)"
v-model="payload.twitter" v-model="payload.twitter"
></v-text-field ></v-text-field
></v-col> ></v-col>
@@ -504,20 +524,25 @@
<span class="text-sub">นท</span> <span class="text-sub">นท</span>
</v-btn> </v-btn>
</div> </div>
<div class="btn-next">
<v-btn @click="e1--" class="float-left" size="large" variant="tonal"
>อนหน</v-btn
>
</div>
</v-card> </v-card>
</div> </div>
</v-stepper-window-item> </v-stepper-window-item>
</v-stepper-window> </v-stepper-window>
<!-- v-show="e1 == 3 || el == 4" -->
<v-stepper-actions <!-- <v-stepper-actions
v-show="e1 == 4" v-show="e1 == 4"
:disabled="disabled" :disabled="disabled"
@click:next="next" @click:next="next"
@click:prev="prev" @click:prev="prev"
></v-stepper-actions> ></v-stepper-actions>-->
</template> </template>
</v-stepper> </v-stepper>
</div> </div>
</v-container> </v-container>
</template> </template>
@@ -577,7 +602,7 @@ export default {
(files) => (files) =>
!files || !files ||
!files.some((file) => file.size > 3_097_152) || !files.some((file) => file.size > 3_097_152) ||
"Avatar size should be less than 3 MB!", "ไฟล์รูปต้องไม่เกิน 3MB!",
], ],
space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.", space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
username: (v) => username: (v) =>
@@ -599,7 +624,7 @@ export default {
const pattern = /[\u0E00-\u0E7F']/; const pattern = /[\u0E00-\u0E7F']/;
return pattern.test(v) || "ใช้ภาษาไทยเท่านั้น"; return pattern.test(v) || "ใช้ภาษาไทยเท่านั้น";
}, },
required: [(value) => !!value || "Please fill out."], required: [(value) => !!value || "กรุณากรอกข้อมูล"],
password: (v) => password: (v) =>
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.test(v) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.test(v) ||
// /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%\^&*|']*$/.test(v) || // /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%\^&*|']*$/.test(v) ||
@@ -612,19 +637,22 @@ export default {
tel: [ tel: [
(v) => (v) =>
// (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง', // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
/^([0-9]{10})$/.test(v) || "Invalid phone number", /^([0-9]{10})$/.test(v) || "เบอร์โทรศัพท์ไม่ถูกต้อง",
], ],
id: [ id: [
(v) => (v) =>
(parseInt(v) == v && v.length == 13 && validateThaiID(v)) || (/^\d+$/.test(v) &&
"Invalid ID card number", parseInt(v) == v &&
v.length == 13 &&
validateThaiID(v)) ||
"เลขบัตรประชาชนไม่ถูกต้อง",
], ],
age: [(v) => parseInt(v) >= 40 || "Age must be over 40"], age: [(v) => parseInt(v) >= 40 || "อายุต้องมากกว่า 40 ปี"],
email: [ email: [
(value) => { (value) => {
const pattern = const pattern =
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || "invalid email"; return pattern.test(value) || "อีเมลไม่ต้องถูก";
}, },
], ],
}, },

View File

@@ -4,7 +4,7 @@
<div> <div>
<v-stepper v-model="e1"> <v-stepper v-model="e1">
<template v-slot:default="{ prev, next }"> <template v-slot:default="">
<v-stepper-header> <v-stepper-header>
<template v-for="n in steps" :key="`${n}-step`"> <template v-for="n in steps" :key="`${n}-step`">
<v-stepper-item <v-stepper-item
@@ -40,6 +40,7 @@
variant="solo" variant="solo"
:rules="rules.required" :rules="rules.required"
v-model="payload.firstName" v-model="payload.firstName"
class="my-2"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
@@ -47,14 +48,20 @@
variant="solo" variant="solo"
:rules="rules.required" :rules="rules.required"
v-model="payload.lastName" v-model="payload.lastName"
class="my-2"
></v-text-field> ></v-text-field>
<div class="text-medium-emphasis" style="font-size: 15px">
กรอกเลขบตรประชาชน 13 หล เช 1234567890123
</div>
<v-text-field <v-text-field
label="เลขบัตรประชาชน / ID card number" label="เลขบัตรประชาชน / ID card number"
variant="solo" variant="solo"
:rules="rules.id" :rules="rules.id"
v-model="payload.cid" v-model="payload.cid"
counter counter
type="number"
hide-spin-buttons
class="mb-2"
></v-text-field> ></v-text-field>
<v-row> <v-row>
@@ -90,6 +97,7 @@
variant="solo" variant="solo"
:rules="rules.required" :rules="rules.required"
v-model="payload.education" v-model="payload.education"
class="my-2"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
@@ -97,6 +105,9 @@
variant="solo" variant="solo"
:rules="rules.tel" :rules="rules.tel"
v-model="payload.phone" v-model="payload.phone"
type="number"
hide-spin-buttons
class="my-2"
></v-text-field> ></v-text-field>
</v-col> </v-col>
@@ -131,14 +142,22 @@
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
<div class="btn-next">
<!-- <v-btn @click.prevent="e1++" :disabled="!form1">next</v-btn> --> <v-btn
<v-stepper-actions @click.prevent="e1++"
:disabled="disabled && !form1"
variant="tonal"
class="float-right"
size="large"
>ดไป</v-btn
>
</div>
<!-- <v-stepper-actions
type="submit" type="submit"
:disabled="disabled && !form1" :disabled="disabled && !form1"
@click:next="next" @click:next="next"
@click:prev="prev" @click:prev="prev"
></v-stepper-actions> ></v-stepper-actions> -->
</v-form> </v-form>
<!-- </v-card> --> <!-- </v-card> -->
</v-stepper-window-item> </v-stepper-window-item>
@@ -235,10 +254,9 @@
</v-col> </v-col>
</v-row> </v-row>
<div class="btn-next"> <div class="btn-next">
<v-btn @click="e1--" variant="text" class="float-left" <v-btn @click="e1--" variant="tonal" class="float-left"
>Previous</v-btn size="large" >อนหน</v-btn
> >
<!-- <v-spacer></v-spacer> -->
<v-btn <v-btn
@click="e1++" @click="e1++"
@@ -249,7 +267,8 @@
" "
variant="tonal" variant="tonal"
class="float-right" class="float-right"
>next</v-btn size="large"
>ดไป</v-btn
> >
</div> </div>
<!-- <v-stepper-actions <!-- <v-stepper-actions
@@ -336,8 +355,9 @@
></v-textarea> --> ></v-textarea> -->
<div class="btn-next"> <div class="btn-next">
<v-btn @click="e1--" variant="text" class="float-left" <v-btn @click="e1--" class="float-left" size="large" variant="tonal"
>Previous</v-btn
>อนหน</v-btn
> >
<!-- <v-spacer></v-spacer> --> <!-- <v-spacer></v-spacer> -->
@@ -346,7 +366,8 @@
:disabled="!(checkOpt1.count == checkOpt1.checkcount)" :disabled="!(checkOpt1.count == checkOpt1.checkcount)"
variant="tonal" variant="tonal"
class="float-right" class="float-right"
>next</v-btn size="large"
>ดไป</v-btn
> >
</div> </div>
<!-- {{ checkOpt1 }} --> <!-- {{ checkOpt1 }} -->
@@ -408,7 +429,7 @@
><v-text-field ><v-text-field
variant="solo" variant="solo"
bg-color="#F2EBD1" bg-color="#F2EBD1"
label="X" label="X (twitter)"
v-model="payload.twitter" v-model="payload.twitter"
></v-text-field ></v-text-field
></v-col> ></v-col>
@@ -483,17 +504,24 @@
<span class="text-sub">นท</span> <span class="text-sub">นท</span>
</v-btn> </v-btn>
</div> </div>
<div class="btn-next">
<v-btn @click="e1--" class="float-left" size="large" variant="tonal"
>อนหน</v-btn
>
</div>
</v-card> </v-card>
</div> </div>
</v-stepper-window-item> </v-stepper-window-item>
</v-stepper-window> </v-stepper-window>
<!-- v-show="e1 == 3 || el == 4" --> <!-- v-show="e1 == 3 || el == 4" -->
<v-stepper-actions <!-- <v-stepper-actions
v-show="e1 == 4" v-show="e1 == 4"
:disabled="disabled" :disabled="disabled"
@click:next="next" @click:next="next"
@click:prev="prev" @click:prev="prev"
></v-stepper-actions> ></v-stepper-actions> -->
</template> </template>
</v-stepper> </v-stepper>
</div> </div>
@@ -552,7 +580,7 @@ export default {
(files) => (files) =>
!files || !files ||
!files.some((file) => file.size > 3_097_152) || !files.some((file) => file.size > 3_097_152) ||
"Avatar size should be less than 3 MB!", "ไฟล์รูปต้องไม่เกิน 3MB!",
], ],
// ^[a-zA-Z0-9?><;,{}[\]\-_+=!@#$%\^&*|']*$ // ^[a-zA-Z0-9?><;,{}[\]\-_+=!@#$%\^&*|']*$
space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.", space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
@@ -575,7 +603,7 @@ export default {
const pattern = /[\u0E00-\u0E7F']/; const pattern = /[\u0E00-\u0E7F']/;
return pattern.test(v) || "ใช้ภาษาไทยเท่านั้น"; return pattern.test(v) || "ใช้ภาษาไทยเท่านั้น";
}, },
required: [(value) => !!value || "Please fill out."], required: [(value) => !!value || "กรุณากรอกข้อมูล"],
password: (v) => password: (v) =>
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.test(v) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.test(v) ||
// /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%\^&*|']*$/.test(v) || // /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%\^&*|']*$/.test(v) ||
@@ -588,19 +616,22 @@ export default {
tel: [ tel: [
(v) => (v) =>
// (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง', // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
/^([0-9]{10})$/.test(v) || "Invalid phone number", /^([0-9]{10})$/.test(v) || "เบอร์โทรศัพท์ไม่ถูกต้อง",
], ],
id: [ id: [
(v) => (v) =>
(parseInt(v) == v && v.length == 13 && validateThaiID(v)) || (/^\d+$/.test(v) &&
"Invalid ID card number", parseInt(v) == v &&
v.length == 13 &&
validateThaiID(v)) ||
"เลขบัตรประชาชนไม่ถูกต้อง",
], ],
age: [(v) => parseInt(v) >= 40 || "Age must be over 40"], age: [(v) => parseInt(v) >= 40 || "อายุต้องมากกว่า 40 ปี"],
email: [ email: [
(value) => { (value) => {
const pattern = const pattern =
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || "invalid email"; return pattern.test(value) || "อีเมลไม่ต้องถูก";
}, },
], ],
}, },
@@ -823,7 +854,7 @@ export default {
.mutate({}) .mutate({})
.then((data) => { .then((data) => {
localStorage.setItem("username", data.firstName); localStorage.setItem("username", data.firstName);
console.log('data.image',data); console.log("data.image", data);
localStorage.setItem("img", data.image); localStorage.setItem("img", data.image);
this.$store.commit("setUsername", data.firstName); this.$store.commit("setUsername", data.firstName);
this.$store.commit("setImg", data.image); this.$store.commit("setImg", data.image);

View File

@@ -10,7 +10,24 @@ export default {
components: { components: {
MainVote, MainVote,
}, },
mounted() {
// this.$emitter.on("loginUser", (val) => {
// console.log("user", val);
// if (val) {
// this.username = localStorage.getItem("username");
// }
// });
this.username = localStorage.getItem("username");
this.img = localStorage.getItem("img");
if (this.getUsername == "") {
this.$store.commit("setUsername", this.username);
}
if (this.getImg == ""||this.getImg == null||this.getImg == undefined) {
this.$store.commit("setImg", this.img);
}
},
}; };
</script> </script>
<style></style> <style>
</style>