initial
This commit is contained in:
117
src/App.vue
Normal file
117
src/App.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-main class="bg-main">
|
||||
<div class="d-block w-100 text-right pa-3">
|
||||
<span class="img-logo">
|
||||
<router-link to="/">
|
||||
<span class="float-left">
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
src="./assets/logo.png"
|
||||
width="80"
|
||||
></v-img></span></router-link
|
||||
></span>
|
||||
<span
|
||||
><v-btn
|
||||
icon="mdi-home-variant-outline"
|
||||
variant="text"
|
||||
href="/"
|
||||
></v-btn
|
||||
><v-btn icon="mdi-account-outline" variant="text"></v-btn>
|
||||
<v-btn variant="text"> Sign In </v-btn>
|
||||
<v-btn elevated color="#F4C03F"> Get Started </v-btn></span
|
||||
>
|
||||
</div>
|
||||
<router-view />
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { client } from "./utils/trpc.ts";
|
||||
console.log(client);
|
||||
// import MainVote from "./components/MainVote.vue";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
|
||||
components: {
|
||||
// MainVote,
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
//
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.img-logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
* {
|
||||
font-family: "IBM Plex Sans Thai", sans-serif;
|
||||
}
|
||||
.text-title {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
/* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
|
||||
}
|
||||
.text-normal {
|
||||
font-size: 30px;
|
||||
}
|
||||
.text-subtitle {
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.text-sub {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.text-sub2 {
|
||||
font-size: 20px;
|
||||
/* font-weight: 500; */
|
||||
}
|
||||
.text-sub3 {
|
||||
font-size: 18px;
|
||||
/* font-weight: 500; */
|
||||
}
|
||||
.text-small {
|
||||
font-size: 16px;
|
||||
}
|
||||
.txt-black {
|
||||
color: #37332f;
|
||||
/* color: black; */
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
||||
.img-logo {
|
||||
display: none;
|
||||
}
|
||||
.text-title {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
/* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
|
||||
}
|
||||
.text-normal {
|
||||
font-size: 25px;
|
||||
}
|
||||
.text-subtitle {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.text-sub {
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.text-sub2 {
|
||||
font-size: 20px;
|
||||
/* font-weight: 500; */
|
||||
}
|
||||
.text-sub3 {
|
||||
font-size: 18px;
|
||||
/* font-weight: 500; */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/assets/Group 23.png
Normal file
BIN
src/assets/Group 23.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/Group 42.png
Normal file
BIN
src/assets/Group 42.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/Group 43.png
Normal file
BIN
src/assets/Group 43.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Group 44.png
Normal file
BIN
src/assets/Group 44.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/Group 51.png
Normal file
BIN
src/assets/Group 51.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/Group 7.png
Normal file
BIN
src/assets/Group 7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/assets/Group 9.png
Normal file
BIN
src/assets/Group 9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/Path 14.png
Normal file
BIN
src/assets/Path 14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/Path 18.png
Normal file
BIN
src/assets/Path 18.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/Path 69.png
Normal file
BIN
src/assets/Path 69.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/assets/Rectangle -1.png
Normal file
BIN
src/assets/Rectangle -1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
src/assets/Rectangle -2.png
Normal file
BIN
src/assets/Rectangle -2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
src/assets/Rectangle -3.png
Normal file
BIN
src/assets/Rectangle -3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/Rectangle -4.png
Normal file
BIN
src/assets/Rectangle -4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/Rectangle 3.png
Normal file
BIN
src/assets/Rectangle 3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
src/assets/Rectangle 36.png
Normal file
BIN
src/assets/Rectangle 36.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/assets/Rectangle 37.png
Normal file
BIN
src/assets/Rectangle 37.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/Rectangle 39.png
Normal file
BIN
src/assets/Rectangle 39.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/greenimg.png
Normal file
BIN
src/assets/greenimg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
src/assets/logo-title.png
Normal file
BIN
src/assets/logo-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
6
src/assets/logo.svg
Normal file
6
src/assets/logo.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="488" height="424" viewBox="0 0 488 424" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M249.126 95.017L151.843 263.694L243.959 423.473L365.966 211.973L487.918 0.473206H303.629L249.126 95.017Z" fill="#1697F6"/>
|
||||
<path d="M122.007 211.973L128.396 223.096L219.402 65.2635L256.793 0.473206H243.959H0L122.007 211.973Z" fill="#AEDDFF"/>
|
||||
<path d="M303.629 0.473206C349.743 152.355 243.959 423.473 243.959 423.473L151.843 263.694L303.629 0.473206Z" fill="#1867C0"/>
|
||||
<path d="M256.793 0.473206C62.5042 0.473206 128.397 223.096 128.397 223.096L256.793 0.473206Z" fill="#7BC6FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 598 B |
107
src/components/HeaderHome.vue
Normal file
107
src/components/HeaderHome.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="text-normal mb-5">
|
||||
<div class="d-block w-100 text-normal txt-black">
|
||||
<v-row align="center" justify="center">
|
||||
<v-col cols="auto" sm="12" md="" align="center">
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
src="../assets/logo-title.png"
|
||||
width="600"
|
||||
></v-img>
|
||||
</v-col>
|
||||
<v-col align-self="center" align="center">
|
||||
<div style="width: 90%">
|
||||
สว. ระบบใหม่ <b>“แบ่งกลุ่มอาชีพ”</b> และ
|
||||
<b>“เลือกกันเอง”</b>
|
||||
ศึกษาให้พร้อมแล้วมาร่วมเป็นส่วนหนึ่งของกระบวนการเลือก สว.
|
||||
</div>
|
||||
<v-btn
|
||||
elevated
|
||||
color="#B2C573"
|
||||
class="mt-4"
|
||||
style="color: #0f470f"
|
||||
size="large"
|
||||
href="#started"
|
||||
>
|
||||
มาเริ่มกันเลย
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</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">
|
||||
<div style="position: relative">
|
||||
<v-btn
|
||||
elevated
|
||||
color="#DD6C31"
|
||||
class="text-normal"
|
||||
stacked
|
||||
height="110"
|
||||
to="/check"
|
||||
>
|
||||
ตรวจสอบคุณสมบัติ
|
||||
<br />
|
||||
การเป็น สว.
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
src="../assets/Group 9.png"
|
||||
width="70"
|
||||
style="position: absolute; bottom: -25px; left: -20px"
|
||||
></v-img>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-btn
|
||||
elevated
|
||||
color="#DD6C31"
|
||||
class="text-normal"
|
||||
stacked
|
||||
height="110"
|
||||
to="/forms"
|
||||
>
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
src="../assets/Group 23.png"
|
||||
width="80"
|
||||
style="position: absolute; bottom: -30px; right: 0px"
|
||||
></v-img>
|
||||
แสดงตนเป็นผู้สมัคร
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style>
|
||||
.text-normal .v-btn--size-large {
|
||||
--v-btn-height: 70px;
|
||||
}
|
||||
.v-btn {
|
||||
border-radius: 20px;
|
||||
}
|
||||
.text-normal .v-btn__content {
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.centered {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.bg-curve {
|
||||
background-image: url("/src/assets/Path\ 14.png");
|
||||
height: 400px;
|
||||
|
||||
background-position: center top;
|
||||
/* background: #2b2b26 0% 0% no-repeat padding-box; */
|
||||
}
|
||||
</style>
|
||||
43
src/components/MainVote.vue
Normal file
43
src/components/MainVote.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="bg-main">
|
||||
<Header />
|
||||
<Section2Green />
|
||||
<Section3Base />
|
||||
<Section4White/>
|
||||
<Section5Green/>
|
||||
<Section6Base/>
|
||||
<Section7GreenTab/>
|
||||
<Section8Base/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Header from "./HeaderHome.vue";
|
||||
import Section2Green from "./Section2Green.vue";
|
||||
import Section3Base from "./Section3Base.vue";
|
||||
import Section4White from "./Section4White.vue";
|
||||
import Section5Green from "./Section5Green.vue";
|
||||
import Section6Base from "./Section6Base.vue";
|
||||
import Section7GreenTab from "./Section7GreenTab.vue";
|
||||
import Section8Base from "./Section8Base.vue";
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Section2Green,
|
||||
Section3Base,
|
||||
Section4White,
|
||||
Section5Green,
|
||||
Section6Base,
|
||||
Section7GreenTab,
|
||||
Section8Base
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style >
|
||||
.bg-main {
|
||||
background: #f6ebd5;
|
||||
min-height: 100vh;
|
||||
height:auto;
|
||||
}
|
||||
</style>
|
||||
50
src/components/Section2Green.vue
Normal file
50
src/components/Section2Green.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div style="position: relative" class="bg-green-curve text-normal">
|
||||
<div class="text-center text-white py-5">
|
||||
<div class="text-title my-3">มาศึกษาก่อนจะเป็น สว.</div>
|
||||
<v-row>
|
||||
<v-col class="border-green">
|
||||
<v-icon icon="mdi-circle" color="#B2C573"></v-icon>
|
||||
<div>ใครสมัครสว.ได้บ้าง</div>
|
||||
</v-col>
|
||||
<v-col class="border-green">
|
||||
<v-icon icon="mdi-circle" color="#B2C573"></v-icon>
|
||||
|
||||
<div>หน้าที่ของสว.</div>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-icon icon="mdi-circle" color="#B2C573"></v-icon>
|
||||
|
||||
<div>กระบวนการเลือก สมาชิกวุฒิสภา</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-icon icon="mdi-circle" color="#B2C573"></v-icon>
|
||||
<div>ขั้นตอนการเลือกสว.</div>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-icon icon="mdi-circle" color="#B2C573"></v-icon>
|
||||
|
||||
<div>กลุ่มอาชีพ ผู้สมัครรับเลือกสว.</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style>
|
||||
.bg-green-curve {
|
||||
background-image: url("/src/assets/Rectangle\ 3.png");
|
||||
min-height: 600px;
|
||||
height: auto;
|
||||
background-position: center bottom;
|
||||
/* background: #2b2b26 0% 0% no-repeat padding-box; */
|
||||
}
|
||||
.border-green{
|
||||
border-right: 5px solid #b2c573;
|
||||
}
|
||||
|
||||
</style>
|
||||
21
src/components/Section3Base.vue
Normal file
21
src/components/Section3Base.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div style="position: relative" class="text-normal mb-10">
|
||||
<div class="text-center txt-black py-5">
|
||||
<div class="text-title my-3">ใครสมัครสว.ได้บ้าง</div>
|
||||
<div>
|
||||
สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
|
||||
โดยมีคุณสมบัติดังนี้
|
||||
</div>
|
||||
<div>เช็คคุณสมบัติกันเลย !</div>
|
||||
<v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80">
|
||||
ตรวจสอบคุณสมบัติการเป็น สว.
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
64
src/components/Section4White.vue
Normal file
64
src/components/Section4White.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div style="position: relative" class="bg-white text-normal pb-10">
|
||||
<div class="text-center txt-black py-10 ma-auto" style="width: 90%">
|
||||
<div class="text-title my-3">หน้าที่ของสว.</div>
|
||||
<v-row align="center" justify="center">
|
||||
<v-col
|
||||
class="border-dot"
|
||||
align="center"
|
||||
justify="center"
|
||||
cols="12"
|
||||
sm="12"
|
||||
md="4"
|
||||
>
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
src="../assets/Group 42.png"
|
||||
width="70"
|
||||
></v-img>
|
||||
<div class="text-subtitle my-3">พิจารณากฎหมาย</div>
|
||||
<div class="text-sub">
|
||||
พิจารณาและกลั่นกรองกฎหมาย กลั่นกรองพระราชบัญญัติ อนุมัติพระราชกำหนด
|
||||
แก้ไขเพิ่มเติมรัฐธรรมนูญ
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col class="border-dot" align="center" cols="12" sm="12" md="4">
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
src="../assets/Group 43.png"
|
||||
width="70"
|
||||
></v-img>
|
||||
<div class="text-subtitle my-3">ตรวจสอบการทำงานรัฐบาล</div>
|
||||
|
||||
<div class="text-sub">
|
||||
ควบคุมการบริหารราชการแผ่นดิน ตั้งกระทู้ถาม
|
||||
เปิดอภิปรายทั่วไปในวุฒิสภา หรือที่ประชุมรัฐสภา การตั้งกรรมาธิการ
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col align="center" cols="12" sm="12" md="4">
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
src="../assets/Group 44.png"
|
||||
width="70"
|
||||
></v-img>
|
||||
<div class="text-subtitle my-3">เคาะเลือกคนมาตรวจสอบรัฐบาล</div>
|
||||
<div class="text-sub">
|
||||
ให้คำแนะนำหรือความเห็นชอบให้บุคคล ดำรงตำแหน่งในองค์กรตามรัฐธรรมนูญ
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style>
|
||||
.border-dot {
|
||||
border-right: 3px dashed #b2c573;
|
||||
}
|
||||
.bg-white {
|
||||
background-color: white;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
84
src/components/Section5Green.vue
Normal file
84
src/components/Section5Green.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div style="position: relative" class="bg-green-full text-normal pb-10">
|
||||
<!-- <v-img :aspect-ratio="1" src="../assets/greenimg.png" width="100%"></v-img> -->
|
||||
<div class="text-center txt-black py-10 ma-auto" style="width: 90%">
|
||||
<div class="text-title my-3">กระบวนการเลือกสมาชิกวุฒิสภา</div>
|
||||
|
||||
<v-timeline align="start" side="end" class="text-sub">
|
||||
<v-timeline-item fill-dot size="large" dot-color="white">
|
||||
<template v-slot:icon>
|
||||
<span style="color: #4c884c;">1</span>
|
||||
</template>
|
||||
<div class="d-flex">
|
||||
<div>กกต. ประกาศกำหนดวัน และเวลารับสมัคร</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
|
||||
<v-timeline-item fill-dot size="large" dot-color="#4c884c">
|
||||
<template v-slot:icon>
|
||||
<span>2</span>
|
||||
</template>
|
||||
<div class="d-flex">
|
||||
<div>เปิดสมัครรับเลือกสว.โดยมี ระยะเวลารับสมัคร 5 - 7 วัน</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
|
||||
<v-timeline-item fill-dot size="large" dot-color="white">
|
||||
<template v-slot:icon>
|
||||
<span style="color: #4c884c;">3</span>
|
||||
</template>
|
||||
<div class="d-flex">
|
||||
<div>ประกาศบัญชี รายชื่อผู้สมัคร</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
|
||||
<v-timeline-item fill-dot size="large" dot-color="#4c884c">
|
||||
<template v-slot:icon>
|
||||
<span>4</span>
|
||||
</template>
|
||||
<div class="d-flex">
|
||||
<div>เลือกสว. ระดับอำเภอ (ภายใน 20 วัน)</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
<v-timeline-item fill-dot size="large" dot-color="white">
|
||||
<template v-slot:icon>
|
||||
<span style="color: #4c884c;">5</span>
|
||||
</template>
|
||||
<div class="d-flex">
|
||||
<div>เลือกสว. ระดับจังหวัด (+ 7 วัน )</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
|
||||
<v-timeline-item fill-dot size="large" dot-color="#4c884c">
|
||||
<template v-slot:icon>
|
||||
<span>6</span>
|
||||
</template>
|
||||
<div class="d-flex">
|
||||
<div>เลือกสว.ระดับประเทศ (+ 10 วัน )</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
|
||||
<v-timeline-item fill-dot size="large" dot-color="white">
|
||||
<template v-slot:icon>
|
||||
<span style="color: #4c884c;" >7</span>
|
||||
</template>
|
||||
<div class="d-flex">
|
||||
<div>กกต. ประกาศผล การเลือกสว.</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style>
|
||||
.border-dot {
|
||||
border-right: 3px dashed #b2c573;
|
||||
}
|
||||
.bg-green-full {
|
||||
background-color: #b2c573;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
243
src/components/Section6Base.vue
Normal file
243
src/components/Section6Base.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div style="position: relative" class="text-normal pb-10">
|
||||
<!-- <v-img :aspect-ratio="1" src="../assets/greenimg.png" width="100%"></v-img> -->
|
||||
<div class="text-center txt-black py-10 ma-auto" style="width: 90%">
|
||||
<div class="text-title my-3">ขั้นตอนการเลือกสว.</div>
|
||||
<v-row class="text-left">
|
||||
<v-col cols="12" md="6">
|
||||
<v-row align="center"
|
||||
justify="center" >
|
||||
<v-col cols="12" >
|
||||
<!-- <v-icon icon="mdi-flag-triangle" color="#F4C03F"></v-icon> -->
|
||||
<div class="line-flag">
|
||||
<div class="text-subtitle">
|
||||
ประกาศให้มีการเลือกสว.
|
||||
<v-icon size="50" color="#F4C03F">mdi-menu-left</v-icon>
|
||||
<v-avatar color="#F4C03F"> 1</v-avatar>
|
||||
</div>
|
||||
<div class="text-sub2">
|
||||
ภายใน 5 วันนับตั้งแต่วันที่พระราชกฤษฎีกาให้มีการเลือกสว.
|
||||
ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกอระดับอำเภอ ระดับจังหวัด
|
||||
ระดับประเทศ
|
||||
</div>
|
||||
<!-- <br> -->
|
||||
</div>
|
||||
</v-col>
|
||||
<!-- ------------------------------- -->
|
||||
<v-col cols="12" md="5">
|
||||
<div
|
||||
style="
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
<div class="text-sub3">
|
||||
ผู้สมัครรับเลือกฯ เลือกกันเองในกลุ่ม
|
||||
</div>
|
||||
|
||||
<div class="text-sub3 text-red">
|
||||
เลือกสมัครได้ 1 กลุ่มอาชีพ และ 1 อำเภอเท่านั้น
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="7">
|
||||
<div>
|
||||
<div class="text-subtitle">
|
||||
การสมัครรับเลือกสว.
|
||||
<v-icon size="50" color="#37332F">mdi-menu-left</v-icon>
|
||||
<v-avatar color="#37332F"> 2</v-avatar>
|
||||
</div>
|
||||
<div class="text-sub2">
|
||||
รับสมัครไม่เกิน 15 วันนับแต่วันที่พระราชกฤษฎีกาให้มี
|
||||
การเลือกสว.ใช้บังคับ และกำหนดวันรับสมัครไม่น้อยกว่า 5 วัน
|
||||
แต่ต้องไม่เกิน 7 วัน
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<!-- ------------------------------- -->
|
||||
<v-col cols="12" md="5">
|
||||
<div
|
||||
style="
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
<div class="text-sub3">
|
||||
ผู้สมัครรับเลือกฯ เลือกกันเองในกลุ่ม
|
||||
</div>
|
||||
|
||||
<div class="text-sub3 text-red">
|
||||
เลือกตนเองได้ แต่จะลงคะแนน ให้บุคคลใดเกิน 1 คะแนนไม่ได้
|
||||
</div>
|
||||
|
||||
<div class="text-sub3 mt-3">
|
||||
ผู้สมัครรับเลือกฯ เลือกผู้สมัคร กลุ่มอื่นที่อยู่ในสายเดียวกัน
|
||||
</div>
|
||||
|
||||
<div class="text-sub3 text-red">
|
||||
กลุ่มละ 1 คน แต่จะเลือกกลุ่ม เดียวกันหรือเลือกตนเองไม่ได้
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="7">
|
||||
<div>
|
||||
<div class="text-subtitle">
|
||||
<v-icon size="50" color="#B2C573">mdi-menu-right</v-icon>
|
||||
<v-avatar color="#B2C573" class="mr-2"> 3</v-avatar>
|
||||
การเลือกสว. ระดับอำเภอ
|
||||
</div>
|
||||
|
||||
<div class="text-sub2">
|
||||
<div style="color: #4c884c; font-weight: 500">
|
||||
การเลือกรอบที่ 1 เลือกกลุ่มบุคคลในกลุ่มเดียวกัน
|
||||
</div>
|
||||
ผู้ได้คะแนนสูงสุดลำดับที่ 1-5
|
||||
เป็นผู้ได้รับเลือกขั้นต้นของกลุ่มนั้น และเข้าไปเลือกรอบ 2
|
||||
ต่อไป
|
||||
</div>
|
||||
<br>
|
||||
<div class="text-sub2">
|
||||
<div style="color: #4c884c; font-weight: 500">
|
||||
การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
|
||||
</div>
|
||||
ผู้ได้คะแนนสูงสุดลำดับ 3 ลำดับแรก ของแต่ละกลุ่ม
|
||||
เป็นผู้ได้รับเลือกระดับอำเภอ สำหรับกลุ่มนั้น
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<!-- ------------------------------------------------------------------------------------------------------------------------------- -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col cols="12" md="7">
|
||||
<div>
|
||||
<div class="text-subtitle">
|
||||
การเลือกสว. ระดับจังหวัด
|
||||
<v-icon size="50" color="#dd6c31">mdi-menu-left</v-icon>
|
||||
<v-avatar color="#dd6c31"> 4</v-avatar>
|
||||
</div>
|
||||
<div class="text-sub2">
|
||||
<div style="color: #dd6c31; font-weight: 500">
|
||||
การเลือกรอบที่ 1 เลือกกลุ่มบุคคลในกลุ่มเดียวกัน
|
||||
</div>
|
||||
ผู้ได้คะแนนสูงสุดลำดับที่ 1-5
|
||||
เป็นผู้ได้รับเลือกขั้นต้นของกลุ่มนั้น และเข้าไปเลือกรอบ 2
|
||||
ต่อไป
|
||||
</div>
|
||||
<div class="text-sub2">
|
||||
<div style="color: #dd6c31; font-weight: 500">
|
||||
การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
|
||||
</div>
|
||||
ผู้ได้คะแนนสูงสุดลำดับ 2 ลำดับแรก ของแต่ละกลุ่ม
|
||||
เป็นผู้ได้รับเลือกระดับจังหวัด สำหรับกลุ่มนั้น
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="5">
|
||||
<div
|
||||
style="
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
<div class="text-sub3">
|
||||
ผู้สมัครรับเลือกฯ เลือกกันเองในกลุ่ม
|
||||
</div>
|
||||
<div class="text-sub3 text-red">
|
||||
เลือกตนเองได้ แต่จะลงคะแนน ให้บุคคลใดเกิน 1 คะแนนไม่ได้
|
||||
</div>
|
||||
|
||||
<div class="text-sub3 mt-3">
|
||||
ผู้สมัครรับเลือกฯ เลือกผู้สมัคร กลุ่มอื่นที่อยู่ในสายเดียวกัน
|
||||
</div>
|
||||
<div class="text-sub3 text-red">
|
||||
กลุ่มละ 1 คน แต่จะเลือกกลุ่ม เดียวกันหรือเลือกตนเองไม่ได้
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="7">
|
||||
<div>
|
||||
<div class="text-subtitle">การเลือกสว. ระดับประเทศ
|
||||
<v-icon size="50" color="#1b76ba">mdi-menu-left</v-icon>
|
||||
<v-avatar color="#1b76ba"> 5</v-avatar></div>
|
||||
<div class="text-sub2">
|
||||
<div style="color: #1b76ba; font-weight: 500">
|
||||
การเลือกรอบที่ 1 เลือกกลุ่มบุคคลในกลุ่มเดียวกัน
|
||||
</div>
|
||||
ผู้ได้คะแนนสูงสุดลำดับที่ 1-40
|
||||
เป็นผู้ได้รับเลือกขั้นต้นของกลุ่มนั้น และเข้าไปเลือกรอบ 2
|
||||
ต่อไป
|
||||
</div>
|
||||
<br>
|
||||
<div class="text-sub2">
|
||||
<div style="color: #1b76ba; font-weight: 500">
|
||||
การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
|
||||
</div>
|
||||
ผู้ได้คะแนนสูงสุดลำดับ 1-10 เป็นสว. และ ลำดับที่ 11-15
|
||||
อยู่ในบัญชีสำรองของกลุ่มนั้น
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="5">
|
||||
<div
|
||||
style="
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
<div class="text-sub3">
|
||||
ผู้สมัครรับเลือกฯ เลือกกันเอง ในกลุ่มได้ไม่เกิน 10 คน
|
||||
</div>
|
||||
<div class="text-sub3 text-red">
|
||||
เลือกตนเองก็ได้ แต่จะลงคะแนน ให้บุคคลใดเกิน 1 คะแนนไม่ได้
|
||||
</div>
|
||||
|
||||
<div class="text-sub3 mt-3">
|
||||
ผู้สมัครรับเลือกฯ เลือกผู้สมัคร กลุ่มอื่นที่อยู่ในสายเดียวกัน
|
||||
</div>
|
||||
<div class="text-sub3 text-red">
|
||||
<div><b>กลุ่มละไม่เกิน 5 คน</b></div>
|
||||
แต่จะเลือกกลุ่มเดียวกัน หรือเลือกตนเองไม่ได้
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<div class="text-subtitle">ประกาศผลเลือกสว. <v-icon size="50" color="#4C884C">mdi-menu-left</v-icon>
|
||||
<v-avatar color="#4C884C"> 6</v-avatar></div>
|
||||
<div class="text-sub2">
|
||||
เมื่อกกต. ได้รับรายงานจากผู้อำนวยการการเลือกระดับประเทศแล้ว
|
||||
รอไว้อย่างน้อยไม่เกิน 5 วัน เมื่อพ้นเวลาดังกล่าวแล้ว ถ้า กกต.
|
||||
เห็นว่าการเลือกเป็นไปโดยถูกต้องสุจริต และเที่ยงธรรม
|
||||
ให้ประกาศผลการเลือกในราชกิจจานุเบกษา
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style>
|
||||
.line-flag{
|
||||
border-left: 3px solid #37332F;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.bg-darkgreen-full {
|
||||
background-color: #4c884c;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
100
src/components/Section7GreenTab.vue
Normal file
100
src/components/Section7GreenTab.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div style="position: relative" class="bg-green-full text-normal py-7">
|
||||
<div id="scroll-container">
|
||||
<div id="scroll-text" class="text-sub">
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มบริหารราชการแผ่นดินและความมั่นคง
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มกฎหมายกระบวนการยุติธรรม
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มการศึกษา
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มการสาธารณสุข
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มอาชีพทำนา ปลูกพืชล้มลุก
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มอาชีพทำสวน ป่าไม้ ปศุสัตว์ ประมง
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มพนักงานหรือลูกจ้างของบุคคล(ไม่ใช่หน่วยงานรัฐ)
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มผู้ประกอบอาชีพด้านสิ่งแวดล้อม ผังเมือง อสังหาริมทรัพย์และสาธารณูปโภค ทรัพยากรธรรมชาติ พลังงาน
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มผู้ประกอบกิจการ หรือ SME
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มผู้ประกอบอุตสาหกรรม
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มสตรี
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มผู้สูงอายุ คนพิการหรือทุพพลภาพ กลุ่มชาติพันธุ์ กลุ่มอัตลักษณ์อื่น
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มศิลปะ วัฒนธรรม ดนตรี การแสดงและบันเทิง
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มประชาสังคม องค์กรสาธารณประโยชน์
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มนักกีฬา สื่อสารมวลชน ผู้สร้างสรรค์วรรณกรรม
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มผู้ประกอบวิชาชีพ ผู้ประกอบอาชีพอิสระ
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
กลุ่มอื่นๆ
|
||||
<v-icon icon="mdi-circle" size="20"></v-icon>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#scroll-container {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#scroll-text {
|
||||
/* animation properties */
|
||||
-moz-transform: translateX(100%);
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
|
||||
-moz-animation: my-animation 50s linear infinite;
|
||||
-webkit-animation: my-animation 60s linear infinite;
|
||||
animation: my-animation 60s linear infinite;
|
||||
}
|
||||
|
||||
/* for Firefox */
|
||||
@-moz-keyframes my-animation {
|
||||
from {
|
||||
-moz-transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
-moz-transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* for Chrome */
|
||||
@-webkit-keyframes my-animation {
|
||||
from {
|
||||
-webkit-transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes my-animation {
|
||||
from {
|
||||
-moz-transform: translateX(100%);
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
-moz-transform: translateX(-100%);
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
src/components/Section8Base.vue
Normal file
125
src/components/Section8Base.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div style="position: relative" class="text-normal pb-10">
|
||||
<!-- <v-img :aspect-ratio="1" src="../assets/greenimg.png" width="100%"></v-img> -->
|
||||
<div class="text-center txt-black py-10 ma-auto" style="width: 90%">
|
||||
<!-- <div class="text-title my-3">ขั้นตอนการเลือกสว.</div> -->
|
||||
<br />
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<div style="width: 90%; margin: auto">
|
||||
<div class="text-title">กลุ่มอาชีพผู้สมัครรับเลือกสว.</div>
|
||||
<br />
|
||||
<div>
|
||||
ทุกคนที่มีคุณสมบัติและไม่มีลักษนะต้องห้าม
|
||||
มีสิทธิสมัครรับเลือกเปนสว. ในกลุ่มใดกลุ่มหนึง ในกลุ่มอาชีพ 20
|
||||
กลุ่ม ดังนี้.
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-card
|
||||
class="text-sub mx-auto"
|
||||
color="#F4C03F"
|
||||
variant="elevated"
|
||||
style="width: 90%; margin: auto"
|
||||
rounded="xl"
|
||||
min-height="400"
|
||||
>
|
||||
<v-card-item>
|
||||
<div class="text-right text-sub2">{{ count + 1 }} / 4</div>
|
||||
<div
|
||||
class="py-20 text-left my-4"
|
||||
v-for="(item, k) in listItem()"
|
||||
:key="k"
|
||||
>
|
||||
<v-avatar color="white" size="small"
|
||||
><span style="font-size: 16px"> {{ item.idx }}</span>
|
||||
</v-avatar>
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
<v-btn
|
||||
@click="count++"
|
||||
style="top: -55px"
|
||||
class="float-right"
|
||||
icon="mdi-skip-next"
|
||||
rounded="circle"
|
||||
size="lg"
|
||||
color="#4c884c"
|
||||
></v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
count(val) {
|
||||
if (val > 4) {
|
||||
this.count = 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
listItem() {
|
||||
let cnt = this.count;
|
||||
if (cnt > 3) {
|
||||
this.count = 0;
|
||||
}
|
||||
let s = cnt * 5;
|
||||
let e = 5 * (cnt + 1);
|
||||
console.log("s", s, e);
|
||||
let item = this.items.slice(s, e);
|
||||
return item;
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
count: 0,
|
||||
items: [
|
||||
{ text: "กลุ่มบริหารราชการแผ่นดินและความมั่นคง", idx: 1 },
|
||||
{ text: "กลุ่มกฎหมายกระบวนการยุติธรรม", idx: 2 },
|
||||
{ text: "กลุ่มการศึกษา", idx: 3 },
|
||||
{ text: "กลุ่มการสาธารณสุข", idx: 4 },
|
||||
{ text: "กลุ่มอาชีพทำนา ปลูกพืชล้มลุก", idx: 5 },
|
||||
{ text: "กลุ่มอาชีพทำสวน ป่าไม้ ปศุสัตว์ ประมง", idx: 6 },
|
||||
{ text: "กลุ่มพนักงานหรือลูกจ้างของบุคคล(ไม่ใช่หน่วยงานรัฐ)", idx: 7 },
|
||||
{
|
||||
text: "กลุ่มผู้ประกอบอาชีพด้านสิ่งแวดล้อม ผังเมือง อสังหาริมทรัพย์และสาธารณูปโภค ทรัพยากรธรรมชาติ พลังงาน",
|
||||
idx: 8,
|
||||
},
|
||||
{ text: "กลุ่มผู้ประกอบกิจการ หรือ SME", idx: 9 },
|
||||
{ text: "กลุ่มผู้ประกอบกิจการอื่นนอกจากข้อ (9)", idx: 10 },
|
||||
{ text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
|
||||
{ text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
|
||||
{
|
||||
text: "กลุมผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
|
||||
idx: 13,
|
||||
},
|
||||
{ text: "กลุ่มสตรี", idx: 14 },
|
||||
{
|
||||
text: "กลุ่มผู้สูงอายุ คนพิการหรือทุพพลภาพ กลุ่มชาติพันธุ์ กลุ่มอัตลักษณ์อื่น",
|
||||
idx: 15,
|
||||
},
|
||||
{ text: "กลุ่มศิลปะ วัฒนธรรม ดนตรี การแสดงและบันเทิง", idx: 16 },
|
||||
{ text: "กลุ่มประชาสังคม องค์กรสาธารณประโยชน์", idx: 17 },
|
||||
{ text: "กลุ่มนักกีฬา สื่อสารมวลชน ผู้สร้างสรรค์วรรณกรรม", idx: 18 },
|
||||
{ text: "กลุ่มผู้ประกอบวิชาชีพ ผู้ประกอบอาชีพอิสระ", idx: 19 },
|
||||
{ text: "กลุ่มอื่นๆ", idx: 20 },
|
||||
// { text: "Real-Time" },
|
||||
// { text: "Audience" },
|
||||
],
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.line-flag {
|
||||
border-left: 3px solid #37332f;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.bg-darkgreen-full {
|
||||
background-color: #4c884c;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
51
src/components/check/CheckList.vue
Normal file
51
src/components/check/CheckList.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<v-container class="text-center">
|
||||
<div class="text-title">ใครสมัครสว.ได้บ้าง</div>
|
||||
<div>
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
class="mx-auto"
|
||||
src="@/assets/Group 9.png"
|
||||
width="70"
|
||||
></v-img>
|
||||
</div>
|
||||
<br />
|
||||
<div class="text-sub ma-auto" style="width: 90%">
|
||||
อยากลงสมัครสว. แต่ไม่แน่ใจว่าเราสามารถสมัครได้หรือไม่
|
||||
เราสามารถมาร่วมกันเช็คคุณสมบัติ เช็คเราามารถสมัครกลุ่มไหน เขตอำเภอไหนบ้าง
|
||||
ในการลงสมัคร สว. กัน !
|
||||
</div>
|
||||
<v-btn
|
||||
elevated
|
||||
color="#DD6C31"
|
||||
style="white-space: pre-wrap"
|
||||
class="text-subtitle mt-3"
|
||||
height="70"
|
||||
to="/checklist"
|
||||
><div class="text-wrap" style="width: 100%; margin: auto">
|
||||
ตรวจสอบคุณสมบัติการเป็น สว. 2567
|
||||
</div>
|
||||
</v-btn>
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
class="mx-auto"
|
||||
src="@/assets/Group 51.png"
|
||||
width="230"
|
||||
></v-img>
|
||||
<v-btn variant="text" append color="#3ba8c8" size="lg"
|
||||
><div class="text-wrap text-sub3" style="width: 100%; margin: auto">
|
||||
ตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
|
||||
</div></v-btn
|
||||
>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
16
src/components/check/MainCheck.vue
Normal file
16
src/components/check/MainCheck.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<CheckListVue />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CheckListVue from "./CheckList.vue";
|
||||
export default {
|
||||
components: {
|
||||
CheckListVue,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
476
src/components/check/QuestionList.vue
Normal file
476
src/components/check/QuestionList.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<div
|
||||
style="height: auto; min-height: 100vh"
|
||||
class="d-flex justify-center parent-container"
|
||||
>
|
||||
<!-- {{ model }} -->
|
||||
<!-- {{ slides }} -->
|
||||
<v-btn
|
||||
@click="model++"
|
||||
style="z-index: 999"
|
||||
class="float-right btn-r"
|
||||
rounded="circle"
|
||||
size="lg"
|
||||
color="white"
|
||||
v-if="model < 17"
|
||||
><v-icon icon="mdi-menu-right" size="70" color="#F4C03F"></v-icon
|
||||
></v-btn>
|
||||
<!-- v-if="model > 0" -->
|
||||
<v-btn
|
||||
v-if="model > 0"
|
||||
@click="model--"
|
||||
style="z-index: 999"
|
||||
class="float-right btn-l"
|
||||
rounded="circle"
|
||||
size="lg"
|
||||
color="white"
|
||||
><v-icon icon="mdi-menu-left" size="70" color="#F4C03F"></v-icon
|
||||
></v-btn>
|
||||
|
||||
<!-- hide-delimiters -->
|
||||
<v-carousel
|
||||
style="height: auto; min-height: 100vh"
|
||||
progress="#f4c03f"
|
||||
:show-arrows="false"
|
||||
v-model="model"
|
||||
hide-delimiters
|
||||
>
|
||||
<v-carousel-item v-for="(slide, i) in slides" :key="i">
|
||||
<v-sheet
|
||||
min-height="100vh"
|
||||
:color="slide.color"
|
||||
tile
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<v-container
|
||||
class="text-white text-center ma-auto"
|
||||
style="width: 90%"
|
||||
v-show="model <= 16"
|
||||
>
|
||||
<div class="d-block fill-height justify-center align-center">
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
class="mx-auto mb-4"
|
||||
src="@/assets/Group 9.png"
|
||||
width="70"
|
||||
></v-img>
|
||||
<div class="text-title">คำถามที่ {{ i + 1 }}</div>
|
||||
<div class="border-white my-2"></div>
|
||||
<br />
|
||||
<p class="text-title">{{ slide.txt }}</p>
|
||||
<a
|
||||
:href="slide.link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-normal text-white"
|
||||
>
|
||||
{{ slide.link }}</a
|
||||
>
|
||||
<p class="text-normal">{{ slide.subtxt }}</p>
|
||||
|
||||
<br />
|
||||
<div class="d-flex justify-center align-center">
|
||||
<div>
|
||||
<div>
|
||||
<v-chip-group
|
||||
v-model="slide.vmodel"
|
||||
selected-class="text-white"
|
||||
mandatory
|
||||
:key="i"
|
||||
>
|
||||
<v-chip
|
||||
v-if="i == 0 || i == 1"
|
||||
label
|
||||
@click="check(false, i)"
|
||||
variant="elevated"
|
||||
size="x-large"
|
||||
class="d-flex justify-center align-center"
|
||||
style="width: 80px; font-size: 25px; height: 50px"
|
||||
color="#3AA8C9"
|
||||
>
|
||||
ใช่
|
||||
</v-chip>
|
||||
<v-chip
|
||||
v-else
|
||||
label
|
||||
@click="check(true, i)"
|
||||
variant="elevated"
|
||||
size="x-large"
|
||||
class="d-flex justify-center align-center"
|
||||
style="width: 80px; font-size: 25px; height: 50px"
|
||||
color="#3AA8C9"
|
||||
>
|
||||
ใช่
|
||||
</v-chip>
|
||||
|
||||
<v-chip
|
||||
class="d-flex justify-center align-center"
|
||||
label
|
||||
@click="check(true, i)"
|
||||
variant="elevated"
|
||||
size="x-large"
|
||||
style="width: 80px; font-size: 25px; height: 50px"
|
||||
color="#dd6c31"
|
||||
v-if="i == 0 || i == 1"
|
||||
>
|
||||
ไม่ใช่
|
||||
</v-chip>
|
||||
<v-chip
|
||||
v-else
|
||||
class="d-flex justify-center align-center"
|
||||
label
|
||||
@click="check(false, i)"
|
||||
variant="elevated"
|
||||
size="x-large"
|
||||
style="width: 80px; font-size: 25px; height: 50px"
|
||||
color="#dd6c31"
|
||||
>
|
||||
ไม่ใช่
|
||||
</v-chip>
|
||||
</v-chip-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-container>
|
||||
|
||||
<div
|
||||
v-if="model > 16 && checkNull.length==17"
|
||||
class="text-sub text-white py-8 d-block"
|
||||
>
|
||||
<v-icon icon="mdi-alert-circle-outline"></v-icon>
|
||||
กรุณาตอบคำถามให้ครบ
|
||||
</div>
|
||||
<div
|
||||
class="py-7 parent-container"
|
||||
v-if="model > 16 && checkPass.length == 17"
|
||||
>
|
||||
<v-container>
|
||||
<div
|
||||
class="text-black text-center pa-5 ma-auto vcenter txt-black"
|
||||
style="
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
box-shadow: 0px 0px 0px 12px rgba(255, 255, 255, 0.5);
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<v-icon
|
||||
icon="mdi-check-decagram"
|
||||
color="#4c884c"
|
||||
size="60"
|
||||
></v-icon>
|
||||
<div class="text-title txt-black my-2">สรุปผล</div>
|
||||
|
||||
<hr
|
||||
class="w-75 ma-auto"
|
||||
style="border: 1px solid; color: #37332f"
|
||||
/>
|
||||
<v-icon
|
||||
icon="mdi-crown-outline"
|
||||
size="70"
|
||||
color="#1b76ba"
|
||||
></v-icon>
|
||||
<div class="text-subtitle txt-black">
|
||||
มีคุณสมบัติผ่าน <br />
|
||||
การสมัครเป็น สว.
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-5">
|
||||
<v-btn
|
||||
elevated
|
||||
color="#DD6C31"
|
||||
class="mt-4"
|
||||
stacked
|
||||
height="60"
|
||||
to="/"
|
||||
>
|
||||
<span class="text-sub">เสร็จสิ้น</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<div class="py-7 text-center" v-if="model > 16 && alertList.length">
|
||||
<v-container class="text-black">
|
||||
<div class="text-title mb-2">สรุปผล</div>
|
||||
<div class="border-white mb-5"></div>
|
||||
<v-icon icon="mdi-close-circle" size="60" color="red"></v-icon>
|
||||
<div class="text-sub">มีคุณสมบัติที่ไม่ผ่าน</div>
|
||||
<!-- {{ alertList }} -->
|
||||
<div
|
||||
v-for="(txt, i) in alertList"
|
||||
:key="i"
|
||||
class="text-left my-3 text-sub2"
|
||||
>
|
||||
<v-avatar color="#4c884c" size="35">
|
||||
{{ i + 1 }}
|
||||
</v-avatar>
|
||||
|
||||
{{ txt.not }}
|
||||
</div>
|
||||
<v-btn
|
||||
elevated
|
||||
color="#DD6C31"
|
||||
class="mt-4"
|
||||
stacked
|
||||
height="60"
|
||||
to="/"
|
||||
>
|
||||
<span class="text-sub">เสร็จสิ้น</span>
|
||||
</v-btn>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
|
||||
<!-- <hr style="bolder" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
model() {
|
||||
this.show = false;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
checkNull() {
|
||||
let slides = this.slides;
|
||||
let data = slides.filter((x) => x.check === null);
|
||||
return data;
|
||||
},
|
||||
checkPass() {
|
||||
let slides = this.slides;
|
||||
let data = slides.filter((x) => x.check === false);
|
||||
return data;
|
||||
},
|
||||
alertList() {
|
||||
let slides = this.slides;
|
||||
let data = slides.filter((x) => x.check === true);
|
||||
return data;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
alert: [],
|
||||
selection: null,
|
||||
model: 0,
|
||||
show: false,
|
||||
slides: [
|
||||
{
|
||||
txt: "อายุ 40 ปีเต็ม นับถึงเดือนพฤษภาคม 2567 หรือไม่?",
|
||||
color: "#4C884C",
|
||||
not: "อายุไม่ถึง 40 ปีเต็ม นับถึงเดือนพฤษภาคม 2567",
|
||||
check: null,
|
||||
idx: 1,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "มีสัญชาติไทยตั้งแต่เกิดหรือไม่?",
|
||||
not: "ไม่มีสัญชาติไทยตั้งแต่เกิด",
|
||||
check: null,
|
||||
idx: 2,
|
||||
vmodel: null,
|
||||
color: "#8aa042",
|
||||
},
|
||||
{
|
||||
txt: "ปัจจุบันคุณทำงานเป็นข้าราชการ พนักงาน หรือลูกจ้างของหน่วยงานรัฐ หรือรัฐวิสาหกิจ หรือไม่?",
|
||||
color: "#4C884C",
|
||||
not: "ต้องลาออกจากงานข้าราชการ พนักงานหรือลูกจ้างของรัฐ",
|
||||
check: null,
|
||||
idx: 3,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เป็นตุลาการศาลรัฐธรรมนูญ หรือเป็นผู้ดำรงตำแหน่งในองค์กรอิสระ?",
|
||||
color: "#8aa042",
|
||||
not: "ต้องลาออกจากตำแหน่งตุลาการ หรือกรรมการองค์กรอิสระ",
|
||||
check: null,
|
||||
idx: 4,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เป็นเจ้าของหรือผู้ถือหุ้น ในกิจการหนังสือพิมพ์หรือสื่อมวลชน?",
|
||||
color: "#4C884C",
|
||||
not: "ต้องลาออกหรือขายหุ้นในกิจการสื่อมวลชน",
|
||||
check: null,
|
||||
idx: 5,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เป็นสมาชิกพรรคการเมือง? ตรวจสอบการเป็นสมาชิกพรรคการเมืองได้ที่",
|
||||
link: "https://party.ect.go.th/checkidparty",
|
||||
color: "#8aa042",
|
||||
not: "ต้องลาออกจากการเป็นสมาชิกพรรค",
|
||||
check: null,
|
||||
idx: 6,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เป็นพระภิกษุ สามเณร นักพรต หรือนักบวช?",
|
||||
color: "#4C884C",
|
||||
not: "ต้องลาสิกขา หรือออกจากสถานะนักบวชของศาสนานั้นๆ",
|
||||
check: null,
|
||||
idx: 7,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เป็นบุคคลล้มละลายอยู่จนถึงเดือนพฤษภาคม 2567 หรือเคยเป็นบุคคลล้มละลายทุจริต?",
|
||||
color: "#8aa042",
|
||||
not: "เป็นบุคคลล้มละลายอยู่จนถึงเดือนพฤษภาคม 2567",
|
||||
check: null,
|
||||
idx: 8,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "อยู่ในระหว่างถูกเพิกถอนสิทธิเลือกตั้ง หรือระงับสิทธิสมัครรับเลือกตั้ง?",
|
||||
color: "#4C884C",
|
||||
not: "อยู่ในระหว่างถูกเพิกถอนสิทธิเลือกตั้ง หรือระงับสิทธิสมัครรับเลือกตั้ง",
|
||||
check: null,
|
||||
idx: 9,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เคยต้องคำพิพากษาถึงที่สุดว่า ทำความผิดต่อตำแหน่งหน้าที่ราชการ ความผิดเกี่ยวกับทรัพย์ที่กระทำโดยทุจริต ความผิดฐานฉ้อโกงประชาชน ความผิดฐานเป็นผู้ผลิตหรือผู้ค้ายาเสพติด ความผิดฐานเป็นเจ้ามือการพนัน ความผิดฐานค้ามนุษย์ ความผิดฐานฟอกเงิน?",
|
||||
color: "#8aa042",
|
||||
not: "เคยต้องคำพิพากษาถึงที่สุดว่า ทำความผิดต่อตำแหน่งหน้าที่ราชการ ความผิดเกี่ยวกับทรัพย์ที่กระทำโดยทุจริต ความผิดฐานฉ้อโกงประชาชน ความผิดฐานเป็นผู้ผลิตหรือผู้ค้ายาเสพติด ความผิดฐานเป็นเจ้ามือการพนัน ความผิดฐานค้ามนุษย์ ความผิดฐานฟอกเงิน",
|
||||
check: null,
|
||||
idx: 10,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เคยต้องคำพิพากษาถึงที่สุดว่า ร่ำรวยผิดปกติ หรือมีความผิดตามกฎหมายป.ป.ช. หรือทุจริตการเลือกตั้ง?",
|
||||
color: "#4C884C",
|
||||
not: "เคยต้องคำพิพากษาถึงที่สุดว่า ร่ำรวยผิดปกติ หรือมีความผิดตามกฎหมายป.ป.ช. หรือทุจริตการเลือกตั้ง",
|
||||
check: null,
|
||||
idx: 11,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เคยพ้นจากราชการเพราะทุจริตต่อหน้าที่?",
|
||||
color: "#8aa042",
|
||||
not: "เคยพ้นจากราชการเพราะทุจริตต่อหน้าที่",
|
||||
check: null,
|
||||
idx: 12,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เป็นรัฐมนตรี เป็นสส. เป็นผู้ดำรงตำแหน่งในพรรคการเมือง เป็นผู้บริหารท้องถิ่น เป็นสมาชิกสภาท้องถิ่น และพ้นจากตำแหน่งมาไม่เกิน 5 ปี นับจนถึงพ.ค.67?",
|
||||
color: "#4C884C",
|
||||
not: "เป็นรัฐมนตรี เป็นสส. เป็นผู้ดำรงตำแหน่งในพรรคการเมือง เป็นผู้บริหารท้องถิ่น เป็นสมาชิกสภาท้องถิ่น และพ้นจากตำแหน่งมาไม่เกิน 5 ปี นับจนถึงพ.ค.67",
|
||||
check: null,
|
||||
idx: 13,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
|
||||
color: "#8aa042",
|
||||
not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น",
|
||||
check: null,
|
||||
idx: 14,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัครสว. ในปี 2567?",
|
||||
color: "#4C884C",
|
||||
not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัครสว. ในปี 2567 (ในครอบครัวนึงให้เลือกลงสมัครได้คนเดียวนะ)",
|
||||
check: null,
|
||||
idx: 15,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "คุณถูกจำกัดสิทธิสมัคร สว. 2567 เนื่องจากไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 (เฉพาะเขตที่มีการเลือกตั้งซ่อม) และไม่ได้แจ้งเหตุไม่ไปใช้สิทธิเลือกตั้งตรวจสอบว่าถูกจำกัดสิทธิหรือไม่ ได้ทาง",
|
||||
link: "https://boraservices.bora.dopa.go.th/election/absvote/",
|
||||
color: "#8aa042",
|
||||
not: "ไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 โดยไม่ได้แจ้งเหตุ",
|
||||
check: null,
|
||||
idx: 16,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
txt: "คุณเคยได้รับโทษจำคุก และพ้นโทษมายังไม่ถึง 10 ปีถ้าเป็นกรณีต่อไปนี้ ให้ตอบว่า “ไม่เคย”",
|
||||
subtxt:
|
||||
"คดีนั้นรอลงอาญา / พ้นโทษมายังไม่ถึง 10 ปี แต่เป็นคดีความผิดจากการกระทำโดยประมาท / พ้นโทษมายังไม่ถึง 10 ปี แต่เป็นคดีความผิดลหุโทษ (ความผิดที่กฎหมายกำหนดโทษจำคุกไม่เกินหนึ่งเดือน ปรับไม่เกิน 10,000 บาท)",
|
||||
color: "#4C884C",
|
||||
not: "เคยได้รับโทษจำคุก และพ้นโทษมายังไม่ถึง 10 ปี",
|
||||
check: null,
|
||||
idx: 17,
|
||||
vmodel: null,
|
||||
},
|
||||
{
|
||||
color: "#8aa042",
|
||||
idx: 18,
|
||||
vmodel: null,
|
||||
},
|
||||
],
|
||||
colors: ["primary", "secondary", "yellow darken-2", "#4C884C", "orange"],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
check(val, i) {
|
||||
if (val == true || val == false) {
|
||||
this.slides[i].check = val;
|
||||
// this.slides= this.slides
|
||||
this.show = true;
|
||||
this.model = this.model + 1;
|
||||
}
|
||||
// if(val){
|
||||
// alert.push()
|
||||
// }
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.parent-container {
|
||||
position: relative; /* ตั้งค่าเพื่อให้ .btn-r สามารถตั้งอยู่ส่วนมากในพื้นที่นี้ */
|
||||
display: flex; /* ให้พาเนลหลักของพื้นที่ตรงกลางแนวตั้ง */
|
||||
align-items: center; /* จัดแนวตั้งของ .btn-r ให้อยู่ตรงกลาง */
|
||||
}
|
||||
.btn-r {
|
||||
height: 70px !important;
|
||||
width: 70px !important;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
margin: 15px;
|
||||
margin: 15px;
|
||||
}
|
||||
.btn-l {
|
||||
height: 70px !important;
|
||||
width: 70px !important;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
margin: 15px;
|
||||
margin: 15px;
|
||||
}
|
||||
.vcenter {
|
||||
display: block;
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
}
|
||||
.border-white {
|
||||
border: 2px solid white;
|
||||
width: 350px;
|
||||
margin: auto;
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
||||
.btn-r {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.btn-l {
|
||||
background-color: transparent !important;
|
||||
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
margin: 15px;
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
src/components/form/FormMain.vue
Normal file
33
src/components/form/FormMain.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template lang="">
|
||||
<div>
|
||||
<div class="hearder-form text-center pb-8">
|
||||
<v-img
|
||||
class="mx-auto"
|
||||
:aspect-ratio="1"
|
||||
src="@/assets/logo-title.png"
|
||||
width="250"
|
||||
|
||||
></v-img>
|
||||
<div class="text-title txt-black">
|
||||
แสดงตนเป็นผู้สมัคร
|
||||
</div>
|
||||
<v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon>
|
||||
</div>
|
||||
<FormSteper/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FormSteper from './FormSteper.vue';
|
||||
export default {
|
||||
components:{
|
||||
FormSteper
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.hearder-form {
|
||||
background-color: #f4c03f;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
591
src/components/form/FormSteper.vue
Normal file
591
src/components/form/FormSteper.vue
Normal file
@@ -0,0 +1,591 @@
|
||||
<template>
|
||||
<v-container class="txt-black my-3">
|
||||
<div class="text-subtitle mb-5">กรุณากรอกข้อมูลตามกำหนด</div>
|
||||
|
||||
<div>
|
||||
<v-stepper v-model="e1">
|
||||
<template v-slot:default="{ prev, next }">
|
||||
<v-stepper-header>
|
||||
<template v-for="n in steps" :key="`${n}-step`">
|
||||
<v-stepper-item
|
||||
color="#4C884C"
|
||||
:complete="e1 > n"
|
||||
:step="`Step {{ n }}`"
|
||||
:value="n"
|
||||
></v-stepper-item>
|
||||
|
||||
<v-divider v-if="n !== steps" :key="n"></v-divider>
|
||||
</template>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<!-- -------------------------------------------step1----------------------------------------------- -->
|
||||
<v-stepper-window-item :key="`${1}-content`" :value="1">
|
||||
<v-card color="" class="text-sub2">
|
||||
<div>ช่วงที่ 1</div>
|
||||
<div class="text-subtitle">
|
||||
ข้อมูลส่วนตัว
|
||||
<hr class="my-3" />
|
||||
</div>
|
||||
<v-row class="text-center">
|
||||
<v-col class="py-3" cols="12" md="6">
|
||||
<v-text-field
|
||||
label="ชื่อ / Name"
|
||||
variant="solo"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
label="นามสกุล / LastName"
|
||||
variant="solo"
|
||||
></v-text-field>
|
||||
|
||||
<v-row>
|
||||
<v-col class="py-3" cols="12" md="6">
|
||||
<v-text-field
|
||||
label="อายุ / Age"
|
||||
variant="solo"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col class="py-3" cols="12" md="6">
|
||||
<v-text-field
|
||||
label="อาชีพ / Occupation"
|
||||
variant="solo"
|
||||
></v-text-field>
|
||||
<!-- <v-select
|
||||
label="อาชีพ / Occupation"
|
||||
:items="items"
|
||||
variant="solo"
|
||||
item-title="text"
|
||||
return-object
|
||||
></v-select> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-text-field
|
||||
label="ประวัติการศึกษา / Education"
|
||||
variant="solo"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
label="เบอร์โทรศัพท์"
|
||||
variant="solo"
|
||||
></v-text-field>
|
||||
<div class="text-small text-left font-weight-medium">
|
||||
ส่งผ่าน OTP
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<v-btn color="#DD6C31" class="mt-4" height="40">
|
||||
<span class="text-sub">ยืนยัน</span>
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
<!-- -------------------------------------------step2----------------------------------------------- -->
|
||||
<v-stepper-window-item :key="`${2}-content`" :value="2">
|
||||
<v-card color="" class="text-sub2">
|
||||
<div>ช่วงที่ 2</div>
|
||||
<div class="text-subtitle">
|
||||
ข้อมูลการสมัครสว.
|
||||
<hr class="my-3" />
|
||||
</div>
|
||||
<v-row class="">
|
||||
<v-col class="text-sub" cols="12">
|
||||
ประสงค์จะสมัครในกลุ่ม*
|
||||
</v-col>
|
||||
<v-col class="py-3 col2" cols="12" md="12">
|
||||
<v-radio-group v-model="radio">
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
:label="item.text"
|
||||
:value="item.text"
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-card>
|
||||
<div class="text-sub">
|
||||
จังหวัดที่คุณประสงค์จะลงสมัคร*
|
||||
<span class="text-sub3"
|
||||
>สามารถเลือก 1 อำเภอ/เขต</span
|
||||
>
|
||||
<hr class="my-3" />
|
||||
<div class="text-sub3 text-red font-weight-bold">
|
||||
เงื่อนไข
|
||||
</div>
|
||||
<div class="text-sub2">
|
||||
จังหวัดที่เกิด
|
||||
มีชื่ออยู่ในทะเบียนบ้านติดต่อกันไม่น้อยกว่า 2 ปี
|
||||
(นับถึงวันสมัคร) เคยมีชื่ออยู่ในทะเบียนบ้านไม่น้อยกว่า
|
||||
2 ปี ทำงานติดต่อกันไม่น้อยกว่า 2 ปี
|
||||
เคยทำงานไม่น้อยกว่า 2 ปี
|
||||
เป็นที่ตั้งของสถานศึกษาที่เคยศึกษา
|
||||
ติดต่อกันไม่น้อยกว่า 2 ปีการศึกษา
|
||||
</div>
|
||||
<!-- {{ province }} -->
|
||||
<v-autocomplete
|
||||
label="จังหวัด"
|
||||
:items="provinceItems"
|
||||
variant="solo"
|
||||
item-title="provinceNameTh"
|
||||
return-object
|
||||
v-model="province"
|
||||
placeholder="จังหวัด"
|
||||
@update:modelValue="filterData"
|
||||
></v-autocomplete>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card>
|
||||
<div class="text-sub">
|
||||
อำเภอที่คุณประสงค์จะลงสมัคร*
|
||||
<span class="text-sub3"
|
||||
>สามารถเลือก 1 อำเภอ/เขต</span
|
||||
>
|
||||
<hr class="my-3" />
|
||||
<div class="text-sub3 text-red font-weight-bold">
|
||||
เงื่อนไข
|
||||
</div>
|
||||
<div class="text-sub2">
|
||||
อำเภอที่เกิด
|
||||
มีชื่ออยู่ในทะเบียนบ้านติดต่อกันไม่น้อยกว่า 2 ปี
|
||||
(นับถึงวันสมัคร) เคยมีชื่ออยู่ในทะเบียนบ้านไม่น้อยกว่า
|
||||
2 ปี ทำงานติดต่อกันไม่น้อยกว่า 2 ปี
|
||||
เคยทำงานไม่น้อยกว่า 2 ปี
|
||||
เป็นที่ตั้งของสถานศึกษาที่เคยศึกษา
|
||||
ติดต่อกันไม่น้อยกว่า 2 ปีการศึกษา
|
||||
</div>
|
||||
<!-- {{ district }} -->
|
||||
<v-autocomplete
|
||||
label="อำเภอ / เขต"
|
||||
:items="districtItems"
|
||||
variant="solo"
|
||||
item-title="districtNameTh"
|
||||
return-object
|
||||
v-model="district"
|
||||
placeholder="อำเภอ / เขต"
|
||||
></v-autocomplete>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<!-- -------------------------------------------step3----------------------------------------------- -->
|
||||
<v-stepper-window-item :key="`${3}-content`" :value="3">
|
||||
<v-card color="" class="text-sub2">
|
||||
<div>ช่วงที่ 3</div>
|
||||
<div class="text-subtitle">
|
||||
จุดยืนในฐานะสมาชิกรัฐสภา (สว.)
|
||||
<hr class="my-3" />
|
||||
</div>
|
||||
<v-row>
|
||||
<v-col class="text-sub" cols="12">
|
||||
คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
|
||||
</v-col>
|
||||
<v-col cols="12" md="12">
|
||||
<!-- {{ opnitem1 }} -->
|
||||
<v-row>
|
||||
<v-col></v-col>
|
||||
<v-col>
|
||||
<v-row class="text-sub3 font-weight-medium">
|
||||
<v-col class="rot-box" cols="4">เห็นด้วย</v-col
|
||||
><v-col class="rot-box" cols="4">ไม่เห็นด้วย</v-col
|
||||
><v-col class="rot-box" cols="4">พิจารณา</v-col>
|
||||
</v-row>
|
||||
</v-col></v-row
|
||||
>
|
||||
<v-row
|
||||
v-for="(item, i) in opnitem1"
|
||||
:key="i"
|
||||
align="center"
|
||||
justify="center"
|
||||
style="border-bottom: 1px solid #e4e4e4"
|
||||
>
|
||||
<v-col class="">
|
||||
{{ item.text }}
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-radio-group inline hide>
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
value="เห็นด้วย"
|
||||
@click="item.check = 'เห็นด้วย'"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
value="ไม่เห็นด้วย"
|
||||
@click="item.check = 'ไม่เห็นด้วย'"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
value="พิจารณา"
|
||||
@click="item.check = 'พิจารณา'"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-card>
|
||||
<div class="text-sub">
|
||||
คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
|
||||
</div>
|
||||
<hr class="my-3" />
|
||||
<v-row>
|
||||
<v-col></v-col>
|
||||
<v-col>
|
||||
<!-- <v-row class="text-sub3 font-weight-bold ">
|
||||
<v-col class="rot-box" cols="3">เห็นด้วย</v-col><v-col class="rot-box" cols="3">ไม่เห็นด้วย</v-col
|
||||
><v-col class="rot-box" cols="3">พิจารณา</v-col>
|
||||
<v-col class="rot-box" cols="3">ไม่แสดงความเห็น</v-col>
|
||||
</v-row> -->
|
||||
</v-col></v-row
|
||||
>
|
||||
<v-row
|
||||
v-for="(item, i) in opnitem2"
|
||||
:key="i"
|
||||
align="center"
|
||||
justify="center"
|
||||
style="border-bottom: 1px solid #e4e4e4"
|
||||
>
|
||||
<v-col class="text-sub2 font-weight-medium" cols="12">
|
||||
{{ item.text }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-radio-group inline class="col4">
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
value="เห็นด้วย"
|
||||
@click="item.check = 'เห็นด้วย'"
|
||||
label="เห็นด้วย"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
value="ไม่เห็นด้วย"
|
||||
@click="item.check = 'ไม่เห็นด้วย'"
|
||||
label="ไม่เห็นด้วย"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
value="พิจารณา"
|
||||
@click="item.check = 'พิจารณา'"
|
||||
label="พิจารณา"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
value="ไม่แสดงความเห็น"
|
||||
@click="item.check = 'ไม่แสดงความเห็น'"
|
||||
label="ไม่แสดงความเห็น"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
<v-card class="mt-8">
|
||||
<div class="text-sub">
|
||||
คำอธิบายจุดยืนในฐานะสมาชิกรัฐสภาเพิ่มเติมที่ต้องการจะให้คนอื่นทราบ
|
||||
*
|
||||
</div>
|
||||
<hr class="my-3" />
|
||||
<v-textarea
|
||||
label=""
|
||||
variant="solo"
|
||||
bg-color="#F2EBD1"
|
||||
></v-textarea>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<!-- -------------------------------------------step4----------------------------------------------- -->
|
||||
<v-stepper-window-item :key="`${4}-content`" :value="4">
|
||||
<v-card class="mt-8 text-sub">
|
||||
<div>ช่วงที่ 4</div>
|
||||
<div class="text-subtitle">
|
||||
คำถามอื่นเกี่ยวกับสว.
|
||||
<hr class="my-3" />
|
||||
</div>
|
||||
<v-card class="mt-8 text-sub">
|
||||
<div class="text-sub">
|
||||
แนวทางการพิจารณาเห็นชอบผู้ดำรงตำแหน่งในองค์กรอิสระ.
|
||||
</div>
|
||||
<v-textarea
|
||||
label="เหตุผลความตั้งใจในการลงสมัคร สว. ครั้งนี้"
|
||||
variant="solo"
|
||||
bg-color="#F2EBD1"
|
||||
></v-textarea>
|
||||
</v-card>
|
||||
<v-card class="mt-8 text-sub">
|
||||
<div class="text-sub">
|
||||
ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
|
||||
</div>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
variant="solo"
|
||||
bg-color="#F2EBD1"
|
||||
label="โทรศัพท์"
|
||||
></v-text-field
|
||||
></v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col
|
||||
><v-text-field
|
||||
variant="solo"
|
||||
bg-color="#F2EBD1"
|
||||
label="Facebook"
|
||||
></v-text-field
|
||||
></v-col>
|
||||
<v-col
|
||||
><v-text-field
|
||||
variant="solo"
|
||||
bg-color="#F2EBD1"
|
||||
label="X"
|
||||
></v-text-field
|
||||
></v-col>
|
||||
<v-col
|
||||
><v-text-field
|
||||
variant="solo"
|
||||
bg-color="#F2EBD1"
|
||||
label="TikTok"
|
||||
></v-text-field
|
||||
></v-col>
|
||||
</v-row>
|
||||
<v-text-field
|
||||
variant="solo"
|
||||
bg-color="#F2EBD1"
|
||||
label="ช่องทางอื่นๆ"
|
||||
></v-text-field>
|
||||
<div class="text-sub">ช่องทางการติดต่อ (สำหรับทีมงาน)*</div>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
variant="solo"
|
||||
bg-color="#F2EBD1"
|
||||
label="โทรศัพท์"
|
||||
></v-text-field
|
||||
></v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
<v-card class="mt-8 text-sub">
|
||||
<div class="text-sub">กรุณายืนยันการส่งคำตอบ</div>
|
||||
<v-checkbox
|
||||
color="success"
|
||||
value="true"
|
||||
style="font-size: 24px"
|
||||
></v-checkbox>
|
||||
<div class="text-sub3">
|
||||
ข้าพเจ้าขอสาบานตนต่อสิ่งศักดิ์สิทธิ์ทั้งหลายที่ข้าพเจ้านับถือ
|
||||
และ/หรือหลักการใดๆ ที่ข้าพเจ้ายึดถือว่า
|
||||
ข้อมูลที่ข้าพเจ้าได้ให้ไว้นั้นเป็นความสัตย์จริง ทั้งสิ้น
|
||||
และหากข้าพเจ้าได้รับเลือกเป็นสมาชิกวุฒิสภา (สว.) ในครั้งนี้
|
||||
จะทำหน้าที่ต่างๆ
|
||||
โดยยึดเอาหลักการประชาธิปไตยและประชาชนเป็นที่ตั้ง
|
||||
หากข้าพเจ้าให้ความเท็จหรือกระทำการใดอันขัดต่อหลักประชาธิปไตยและสิทธิมนุษยชน
|
||||
ขอภยันตรายและความวิบัติทั้งปวงจงบังเกิดแก่ข้าพเจ้า โดยพลัน
|
||||
*ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น สว.67
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<v-btn color="#DD6C31" class="mt-4" height="40">
|
||||
<span class="text-sub">บันทึก</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
:disabled="disabled"
|
||||
@click:next="next"
|
||||
@click:prev="prev"
|
||||
></v-stepper-actions>
|
||||
</template>
|
||||
</v-stepper>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import Provinces from "./provinces.json";
|
||||
import Districts from "./districts.json";
|
||||
export default {
|
||||
computed: {
|
||||
disabled() {
|
||||
return this.e1 === 1
|
||||
? "prev"
|
||||
: this.e1 === this.steps
|
||||
? "next"
|
||||
: undefined;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
province: null,
|
||||
district: null,
|
||||
districtItems: [],
|
||||
provinceItems: Provinces,
|
||||
radio: null,
|
||||
e1: 1,
|
||||
steps: 4,
|
||||
opnitem2: [
|
||||
{ text: "แก้ไข มาตรา 112", idx: 1, check: null },
|
||||
{
|
||||
text: "สามจังหวัดชายแดนภาคใต้เป็นเขตปกครองพิเศษ",
|
||||
idx: 2,
|
||||
check: null,
|
||||
},
|
||||
{
|
||||
text: "ควบคุมองค์กร NGO (องค์กรเอกชนเพื่อสาธารณประโยชน์)",
|
||||
idx: 3,
|
||||
check: null,
|
||||
},
|
||||
],
|
||||
opnitem1: [
|
||||
{ text: "สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี", idx: 1, check: null },
|
||||
{ text: "แก้ไขรัฐธรรมนูญ 2560", idx: 2, check: null },
|
||||
{ text: "เขียนรัฐธรรมนูญใหม่ “ทั้งฉบับ” ", idx: 3, check: null },
|
||||
{
|
||||
text: "เขียนรัฐธรรมนูญใหม่ แต่ยกเว้นหมวด 1 หมวด 2",
|
||||
idx: 4,
|
||||
check: null,
|
||||
},
|
||||
{
|
||||
text: "ให้มีสภาร่างรัฐธรรมนูญ (สสร.) ใหม่ จากการเลือกตั้ง100%",
|
||||
idx: 5,
|
||||
check: null,
|
||||
},
|
||||
{
|
||||
text: "แก้ไขที่มาของสว. ยกเลิกสว. ใช้ระบบสภาเดี่ยว",
|
||||
idx: 6,
|
||||
check: null,
|
||||
},
|
||||
{ text: "นิรโทษกรรมคดีการเมือง “ทุกคดี”", idx: 7, check: null },
|
||||
{
|
||||
text: "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
|
||||
idx: 8,
|
||||
check: null,
|
||||
},
|
||||
{ text: "ป้องกันภัยคุกคามจากต่างประเทศ", idx: 9, check: null },
|
||||
{ text: "ควบคุมสื่อสังคมออนไลน์", idx: 10, check: null },
|
||||
// { text: "ยกเลิกกฎหมายปราบปรามการค้าประเวณี", idx: 11, check: null },
|
||||
{
|
||||
text: "กัญชาเสรี บำนาญให้ประชาชนทุกคน เดือนละ 3,000 บาท",
|
||||
idx: 11,
|
||||
check: null,
|
||||
},
|
||||
{
|
||||
text: "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
|
||||
idx: 12,
|
||||
check: null,
|
||||
},
|
||||
{ text: "กระจายอำนาจ เพิ่มงบประมาณให้ท้องถิ่น", idx: 13, check: null },
|
||||
{
|
||||
text: "เพิ่มอำนาจให้จังหวัดจัดการตัวเอง ถ่ายทอดสดการประชุมกรรมาธิการสว.",
|
||||
idx: 14,
|
||||
},
|
||||
],
|
||||
items: [
|
||||
{ text: "กลุ่มบริหารราชการแผ่นดินและความมั่นคง", idx: 1 },
|
||||
{ text: "กลุ่มกฎหมายกระบวนการยุติธรรม", idx: 2 },
|
||||
{ text: "กลุ่มการศึกษา", idx: 3 },
|
||||
{ text: "กลุ่มการสาธารณสุข", idx: 4 },
|
||||
{ text: "กลุ่มอาชีพทำนา ปลูกพืชล้มลุก", idx: 5 },
|
||||
{ text: "กลุ่มอาชีพทำสวน ป่าไม้ ปศุสัตว์ ประมง", idx: 6 },
|
||||
{ text: "กลุ่มพนักงานหรือลูกจ้างของบุคคล(ไม่ใช่หน่วยงานรัฐ)", idx: 7 },
|
||||
{
|
||||
text: "กลุ่มผู้ประกอบอาชีพด้านสิ่งแวดล้อม ผังเมือง อสังหาริมทรัพย์และสาธารณูปโภค ทรัพยากรธรรมชาติ พลังงาน",
|
||||
idx: 8,
|
||||
},
|
||||
{ text: "กลุ่มผู้ประกอบกิจการ หรือ SME", idx: 9 },
|
||||
{ text: "กลุ่มผู้ประกอบกิจการอื่นนอกจากข้อ (9)", idx: 10 },
|
||||
{ text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
|
||||
{ text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
|
||||
{
|
||||
text: "กลุ่มผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
|
||||
idx: 13,
|
||||
},
|
||||
{ text: "กลุ่มสตรี", idx: 14 },
|
||||
{
|
||||
text: "กลุ่มผู้สูงอายุ คนพิการหรือทุพพลภาพ กลุ่มชาติพันธุ์ กลุ่มอัตลักษณ์อื่น",
|
||||
idx: 15,
|
||||
},
|
||||
{ text: "กลุ่มศิลปะ วัฒนธรรม ดนตรี การแสดงและบันเทิง", idx: 16 },
|
||||
{ text: "กลุ่มประชาสังคม องค์กรสาธารณประโยชน์", idx: 17 },
|
||||
{ text: "กลุ่มนักกีฬา สื่อสารมวลชน ผู้สร้างสรรค์วรรณกรรม", idx: 18 },
|
||||
{ text: "กลุ่มผู้ประกอบวิชาชีพ ผู้ประกอบอาชีพอิสระ", idx: 19 },
|
||||
{ text: "กลุ่มอื่นๆ", idx: 20 },
|
||||
// { text: "Real-Time" },
|
||||
// { text: "Audience" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
filterData() {
|
||||
// กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
|
||||
if (this.province && this.province.provinceCode) {
|
||||
this.districtItems = [...Districts].filter(
|
||||
(item) => item.provinceCode === this.province.provinceCode
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.v-selection-control-group--inline > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.v-radio-group .v-input__details {
|
||||
display: none;
|
||||
}
|
||||
.v-stepper-item__avatar.v-avatar {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
font-size: 20px;
|
||||
}
|
||||
.v-label.v-field-label {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.col2 {
|
||||
column-count: 2 !important;
|
||||
}
|
||||
.v-selection-control .v-label {
|
||||
font-size: 20px;
|
||||
opacity: 1;
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
||||
.col2 {
|
||||
column-count: 1 !important;
|
||||
}
|
||||
.rot-box {
|
||||
transform: rotate(-90deg);
|
||||
white-space: nowrap;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.v-stepper-item__avatar.v-avatar {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
font-size: 15px;
|
||||
}
|
||||
.v-selection-control .v-label {
|
||||
font-size: 17px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7426
src/components/form/districts.json
Normal file
7426
src/components/form/districts.json
Normal file
File diff suppressed because it is too large
Load Diff
464
src/components/form/provinces.json
Normal file
464
src/components/form/provinces.json
Normal file
@@ -0,0 +1,464 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"provinceCode": 10,
|
||||
"provinceNameEn": "Bangkok",
|
||||
"provinceNameTh": "กรุงเทพมหานคร"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"provinceCode": 11,
|
||||
"provinceNameEn": "Samut Prakan",
|
||||
"provinceNameTh": "สมุทรปราการ"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"provinceCode": 12,
|
||||
"provinceNameEn": "Nonthaburi",
|
||||
"provinceNameTh": "นนทบุรี"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"provinceCode": 13,
|
||||
"provinceNameEn": "Pathum Thani",
|
||||
"provinceNameTh": "ปทุมธานี"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"provinceCode": 14,
|
||||
"provinceNameEn": "Phra Nakhon Si Ayutthaya",
|
||||
"provinceNameTh": "พระนครศรีอยุธยา"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"provinceCode": 15,
|
||||
"provinceNameEn": "Ang Thong",
|
||||
"provinceNameTh": "อ่างทอง"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"provinceCode": 16,
|
||||
"provinceNameEn": "Loburi",
|
||||
"provinceNameTh": "ลพบุรี"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"provinceCode": 17,
|
||||
"provinceNameEn": "Sing Buri",
|
||||
"provinceNameTh": "สิงห์บุรี"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"provinceCode": 18,
|
||||
"provinceNameEn": "Chai Nat",
|
||||
"provinceNameTh": "ชัยนาท"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"provinceCode": 19,
|
||||
"provinceNameEn": "Saraburi",
|
||||
"provinceNameTh": "สระบุรี"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"provinceCode": 20,
|
||||
"provinceNameEn": "Chon Buri",
|
||||
"provinceNameTh": "ชลบุรี"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"provinceCode": 21,
|
||||
"provinceNameEn": "Rayong",
|
||||
"provinceNameTh": "ระยอง"
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"provinceCode": 22,
|
||||
"provinceNameEn": "Chanthaburi",
|
||||
"provinceNameTh": "จันทบุรี"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"provinceCode": 23,
|
||||
"provinceNameEn": "Trat",
|
||||
"provinceNameTh": "ตราด"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"provinceCode": 24,
|
||||
"provinceNameEn": "Chachoengsao",
|
||||
"provinceNameTh": "ฉะเชิงเทรา"
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"provinceCode": 25,
|
||||
"provinceNameEn": "Prachin Buri",
|
||||
"provinceNameTh": "ปราจีนบุรี"
|
||||
},
|
||||
{
|
||||
"id": 17,
|
||||
"provinceCode": 26,
|
||||
"provinceNameEn": "Nakhon Nayok",
|
||||
"provinceNameTh": "นครนายก"
|
||||
},
|
||||
{
|
||||
"id": 18,
|
||||
"provinceCode": 27,
|
||||
"provinceNameEn": "Sa Kaeo",
|
||||
"provinceNameTh": "สระแก้ว"
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
"provinceCode": 30,
|
||||
"provinceNameEn": "Nakhon Ratchasima",
|
||||
"provinceNameTh": "นครราชสีมา"
|
||||
},
|
||||
{
|
||||
"id": 20,
|
||||
"provinceCode": 31,
|
||||
"provinceNameEn": "Buri Ram",
|
||||
"provinceNameTh": "บุรีรัมย์"
|
||||
},
|
||||
{
|
||||
"id": 21,
|
||||
"provinceCode": 32,
|
||||
"provinceNameEn": "Surin",
|
||||
"provinceNameTh": "สุรินทร์"
|
||||
},
|
||||
{
|
||||
"id": 22,
|
||||
"provinceCode": 33,
|
||||
"provinceNameEn": "Si Sa Ket",
|
||||
"provinceNameTh": "ศรีสะเกษ"
|
||||
},
|
||||
{
|
||||
"id": 23,
|
||||
"provinceCode": 34,
|
||||
"provinceNameEn": "Ubon Ratchathani",
|
||||
"provinceNameTh": "อุบลราชธานี"
|
||||
},
|
||||
{
|
||||
"id": 24,
|
||||
"provinceCode": 35,
|
||||
"provinceNameEn": "Yasothon",
|
||||
"provinceNameTh": "ยโสธร"
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"provinceCode": 36,
|
||||
"provinceNameEn": "Chaiyaphum",
|
||||
"provinceNameTh": "ชัยภูมิ"
|
||||
},
|
||||
{
|
||||
"id": 26,
|
||||
"provinceCode": 37,
|
||||
"provinceNameEn": "Amnat Charoen",
|
||||
"provinceNameTh": "อำนาจเจริญ"
|
||||
},
|
||||
{
|
||||
"id": 27,
|
||||
"provinceCode": 38,
|
||||
"provinceNameEn": "Bueng Kan",
|
||||
"provinceNameTh": "บึงกาฬ"
|
||||
},
|
||||
{
|
||||
"id": 28,
|
||||
"provinceCode": 39,
|
||||
"provinceNameEn": "Nong Bua Lam Phu",
|
||||
"provinceNameTh": "หนองบัวลำภู"
|
||||
},
|
||||
{
|
||||
"id": 29,
|
||||
"provinceCode": 40,
|
||||
"provinceNameEn": "Khon Kaen",
|
||||
"provinceNameTh": "ขอนแก่น"
|
||||
},
|
||||
{
|
||||
"id": 30,
|
||||
"provinceCode": 41,
|
||||
"provinceNameEn": "Udon Thani",
|
||||
"provinceNameTh": "อุดรธานี"
|
||||
},
|
||||
{
|
||||
"id": 31,
|
||||
"provinceCode": 42,
|
||||
"provinceNameEn": "Loei",
|
||||
"provinceNameTh": "เลย"
|
||||
},
|
||||
{
|
||||
"id": 32,
|
||||
"provinceCode": 43,
|
||||
"provinceNameEn": "Nong Khai",
|
||||
"provinceNameTh": "หนองคาย"
|
||||
},
|
||||
{
|
||||
"id": 33,
|
||||
"provinceCode": 44,
|
||||
"provinceNameEn": "Maha Sarakham",
|
||||
"provinceNameTh": "มหาสารคาม"
|
||||
},
|
||||
{
|
||||
"id": 34,
|
||||
"provinceCode": 45,
|
||||
"provinceNameEn": "Roi Et",
|
||||
"provinceNameTh": "ร้อยเอ็ด"
|
||||
},
|
||||
{
|
||||
"id": 35,
|
||||
"provinceCode": 46,
|
||||
"provinceNameEn": "Kalasin",
|
||||
"provinceNameTh": "กาฬสินธุ์"
|
||||
},
|
||||
{
|
||||
"id": 36,
|
||||
"provinceCode": 47,
|
||||
"provinceNameEn": "Sakon Nakhon",
|
||||
"provinceNameTh": "สกลนคร"
|
||||
},
|
||||
{
|
||||
"id": 37,
|
||||
"provinceCode": 48,
|
||||
"provinceNameEn": "Nakhon Phanom",
|
||||
"provinceNameTh": "นครพนม"
|
||||
},
|
||||
{
|
||||
"id": 38,
|
||||
"provinceCode": 49,
|
||||
"provinceNameEn": "Mukdahan",
|
||||
"provinceNameTh": "มุกดาหาร"
|
||||
},
|
||||
{
|
||||
"id": 39,
|
||||
"provinceCode": 50,
|
||||
"provinceNameEn": "Chiang Mai",
|
||||
"provinceNameTh": "เชียงใหม่"
|
||||
},
|
||||
{
|
||||
"id": 40,
|
||||
"provinceCode": 51,
|
||||
"provinceNameEn": "Lamphun",
|
||||
"provinceNameTh": "ลำพูน"
|
||||
},
|
||||
{
|
||||
"id": 41,
|
||||
"provinceCode": 52,
|
||||
"provinceNameEn": "Lampang",
|
||||
"provinceNameTh": "ลำปาง"
|
||||
},
|
||||
{
|
||||
"id": 42,
|
||||
"provinceCode": 53,
|
||||
"provinceNameEn": "Uttaradit",
|
||||
"provinceNameTh": "อุตรดิตถ์"
|
||||
},
|
||||
{
|
||||
"id": 43,
|
||||
"provinceCode": 54,
|
||||
"provinceNameEn": "Phrae",
|
||||
"provinceNameTh": "แพร่"
|
||||
},
|
||||
{
|
||||
"id": 44,
|
||||
"provinceCode": 55,
|
||||
"provinceNameEn": "Nan",
|
||||
"provinceNameTh": "น่าน"
|
||||
},
|
||||
{
|
||||
"id": 45,
|
||||
"provinceCode": 56,
|
||||
"provinceNameEn": "Phayao",
|
||||
"provinceNameTh": "พะเยา"
|
||||
},
|
||||
{
|
||||
"id": 46,
|
||||
"provinceCode": 57,
|
||||
"provinceNameEn": "Chiang Rai",
|
||||
"provinceNameTh": "เชียงราย"
|
||||
},
|
||||
{
|
||||
"id": 47,
|
||||
"provinceCode": 58,
|
||||
"provinceNameEn": "Mae Hong Son",
|
||||
"provinceNameTh": "แม่ฮ่องสอน"
|
||||
},
|
||||
{
|
||||
"id": 48,
|
||||
"provinceCode": 60,
|
||||
"provinceNameEn": "Nakhon Sawan",
|
||||
"provinceNameTh": "นครสวรรค์"
|
||||
},
|
||||
{
|
||||
"id": 49,
|
||||
"provinceCode": 61,
|
||||
"provinceNameEn": "Uthai Thani",
|
||||
"provinceNameTh": "อุทัยธานี"
|
||||
},
|
||||
{
|
||||
"id": 50,
|
||||
"provinceCode": 62,
|
||||
"provinceNameEn": "Kamphaeng Phet",
|
||||
"provinceNameTh": "กำแพงเพชร"
|
||||
},
|
||||
{
|
||||
"id": 51,
|
||||
"provinceCode": 63,
|
||||
"provinceNameEn": "Tak",
|
||||
"provinceNameTh": "ตาก"
|
||||
},
|
||||
{
|
||||
"id": 52,
|
||||
"provinceCode": 64,
|
||||
"provinceNameEn": "Sukhothai",
|
||||
"provinceNameTh": "สุโขทัย"
|
||||
},
|
||||
{
|
||||
"id": 53,
|
||||
"provinceCode": 65,
|
||||
"provinceNameEn": "Phitsanulok",
|
||||
"provinceNameTh": "พิษณุโลก"
|
||||
},
|
||||
{
|
||||
"id": 54,
|
||||
"provinceCode": 66,
|
||||
"provinceNameEn": "Phichit",
|
||||
"provinceNameTh": "พิจิตร"
|
||||
},
|
||||
{
|
||||
"id": 55,
|
||||
"provinceCode": 67,
|
||||
"provinceNameEn": "Phetchabun",
|
||||
"provinceNameTh": "เพชรบูรณ์"
|
||||
},
|
||||
{
|
||||
"id": 56,
|
||||
"provinceCode": 70,
|
||||
"provinceNameEn": "Ratchaburi",
|
||||
"provinceNameTh": "ราชบุรี"
|
||||
},
|
||||
{
|
||||
"id": 57,
|
||||
"provinceCode": 71,
|
||||
"provinceNameEn": "Kanchanaburi",
|
||||
"provinceNameTh": "กาญจนบุรี"
|
||||
},
|
||||
{
|
||||
"id": 58,
|
||||
"provinceCode": 72,
|
||||
"provinceNameEn": "Suphan Buri",
|
||||
"provinceNameTh": "สุพรรณบุรี"
|
||||
},
|
||||
{
|
||||
"id": 59,
|
||||
"provinceCode": 73,
|
||||
"provinceNameEn": "Nakhon Pathom",
|
||||
"provinceNameTh": "นครปฐม"
|
||||
},
|
||||
{
|
||||
"id": 60,
|
||||
"provinceCode": 74,
|
||||
"provinceNameEn": "Samut Sakhon",
|
||||
"provinceNameTh": "สมุทรสาคร"
|
||||
},
|
||||
{
|
||||
"id": 61,
|
||||
"provinceCode": 75,
|
||||
"provinceNameEn": "Samut Songkhram",
|
||||
"provinceNameTh": "สมุทรสงคราม"
|
||||
},
|
||||
{
|
||||
"id": 62,
|
||||
"provinceCode": 76,
|
||||
"provinceNameEn": "Phetchaburi",
|
||||
"provinceNameTh": "เพชรบุรี"
|
||||
},
|
||||
{
|
||||
"id": 63,
|
||||
"provinceCode": 77,
|
||||
"provinceNameEn": "Prachuap Khiri Khan",
|
||||
"provinceNameTh": "ประจวบคีรีขันธ์"
|
||||
},
|
||||
{
|
||||
"id": 64,
|
||||
"provinceCode": 80,
|
||||
"provinceNameEn": "Nakhon Si Thammarat",
|
||||
"provinceNameTh": "นครศรีธรรมราช"
|
||||
},
|
||||
{
|
||||
"id": 65,
|
||||
"provinceCode": 81,
|
||||
"provinceNameEn": "Krabi",
|
||||
"provinceNameTh": "กระบี่"
|
||||
},
|
||||
{
|
||||
"id": 66,
|
||||
"provinceCode": 82,
|
||||
"provinceNameEn": "Phangnga",
|
||||
"provinceNameTh": "พังงา"
|
||||
},
|
||||
{
|
||||
"id": 67,
|
||||
"provinceCode": 83,
|
||||
"provinceNameEn": "Phuket",
|
||||
"provinceNameTh": "ภูเก็ต"
|
||||
},
|
||||
{
|
||||
"id": 68,
|
||||
"provinceCode": 84,
|
||||
"provinceNameEn": "Surat Thani",
|
||||
"provinceNameTh": "สุราษฎร์ธานี"
|
||||
},
|
||||
{
|
||||
"id": 69,
|
||||
"provinceCode": 85,
|
||||
"provinceNameEn": "Ranong",
|
||||
"provinceNameTh": "ระนอง"
|
||||
},
|
||||
{
|
||||
"id": 70,
|
||||
"provinceCode": 86,
|
||||
"provinceNameEn": "Chumphon",
|
||||
"provinceNameTh": "ชุมพร"
|
||||
},
|
||||
{
|
||||
"id": 71,
|
||||
"provinceCode": 90,
|
||||
"provinceNameEn": "Songkhla",
|
||||
"provinceNameTh": "สงขลา"
|
||||
},
|
||||
{
|
||||
"id": 72,
|
||||
"provinceCode": 91,
|
||||
"provinceNameEn": "Satun",
|
||||
"provinceNameTh": "สตูล"
|
||||
},
|
||||
{
|
||||
"id": 73,
|
||||
"provinceCode": 92,
|
||||
"provinceNameEn": "Trang",
|
||||
"provinceNameTh": "ตรัง"
|
||||
},
|
||||
{
|
||||
"id": 74,
|
||||
"provinceCode": 93,
|
||||
"provinceNameEn": "Phatthalung",
|
||||
"provinceNameTh": "พัทลุง"
|
||||
},
|
||||
{
|
||||
"id": 75,
|
||||
"provinceCode": 94,
|
||||
"provinceNameEn": "Pattani",
|
||||
"provinceNameTh": "ปัตตานี"
|
||||
},
|
||||
{
|
||||
"id": 76,
|
||||
"provinceCode": 95,
|
||||
"provinceNameEn": "Yala",
|
||||
"provinceNameTh": "ยะลา"
|
||||
},
|
||||
{
|
||||
"id": 77,
|
||||
"provinceCode": 96,
|
||||
"provinceNameEn": "Narathiwat",
|
||||
"provinceNameTh": "นราธิวาส"
|
||||
}
|
||||
]
|
||||
66926
src/components/form/subdistricts.json
Normal file
66926
src/components/form/subdistricts.json
Normal file
File diff suppressed because it is too large
Load Diff
311
src/components/search/CardUser.vue
Normal file
311
src/components/search/CardUser.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div class="pa-lg-8 pa-md-8 pa-sm-3">
|
||||
<div
|
||||
style="
|
||||
background-color: #4c884c;
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
|
||||
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
||||
border-radius: 20px;
|
||||
"
|
||||
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-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="auto" class="text-left">
|
||||
<v-avatar color="#DD6C31" 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">
|
||||
{{ item.name }}
|
||||
<span class="ml-3">
|
||||
{{ item.lastname }}
|
||||
<span v-if="item.age" class="text-sub2"> ( {{ item.age }}ปี )</span></span
|
||||
>
|
||||
<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>
|
||||
<div class="font-weight-medium">
|
||||
การศึกษา : {{ item.education }}
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="text-left text-small my-3">
|
||||
<div class="text-small font-weight-bold">ช่องทางติดต่อ</div>
|
||||
<v-divider class="my-1"></v-divider>
|
||||
<span>
|
||||
<span v-if="item.social.email" class="mr-2"
|
||||
><v-icon icon="mdi-email"></v-icon>
|
||||
{{ item.social.email }}</span
|
||||
>
|
||||
<span v-if="item.social.fb" class="mr-2"
|
||||
><v-icon icon="mdi-facebook"></v-icon>
|
||||
{{ item.social.fb }}</span
|
||||
>
|
||||
<span v-if="item.social.x" class="mr-2"
|
||||
><v-icon icon="mdi-twitter"></v-icon>
|
||||
{{ item.social.x }}</span
|
||||
>
|
||||
<span v-if="item.phone" class="mr-2 d-none"
|
||||
><v-icon icon="mdi-cellphone"></v-icon>
|
||||
{{ item.phone }}</span
|
||||
>
|
||||
</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>
|
||||
</v-card-item>
|
||||
</v-card></v-col
|
||||
>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
profile: [
|
||||
{
|
||||
name: "ศรราม",
|
||||
lastname: "ใจดี",
|
||||
province: "กรุงเทพ",
|
||||
district: "บางเขน",
|
||||
phone: "08952402xx",
|
||||
age: "42",
|
||||
edit: "บางเขน",
|
||||
education: "ปริญญาโท ด้านเศรษฐศาสตร์",
|
||||
group: "กลุ่มการศึกษา",
|
||||
occupation:
|
||||
"อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
|
||||
email: "sornram.j@gmail.com",
|
||||
social: {
|
||||
fb: "Sornram jadee",
|
||||
x: "Sornram jadee",
|
||||
email: "sornram.j@gmail.com",
|
||||
},
|
||||
opinion: {
|
||||
agree: [
|
||||
"แก้ไข มาตรา 112",
|
||||
"แก้ไขรัฐธรรมนูญ 2560",
|
||||
"ยกเลิกการเกณฑ์ทหารแบบบังคับ",
|
||||
],
|
||||
disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "ศรราม",
|
||||
lastname: "ใจดี",
|
||||
province: "กรุงเทพมหานคร",
|
||||
district: "บางเขนบางเขน",
|
||||
phone: "08952402xx",
|
||||
age: "42",
|
||||
education: "ปริญญาโท ด้านเศรษฐศาสตร์",
|
||||
group:
|
||||
"กลุ่มผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
|
||||
occupation:
|
||||
"อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
|
||||
email: "sornram.j@gmail.com",
|
||||
social: { fb: "Sornram jadee", x: "Sornram jadee" },
|
||||
opinion: {
|
||||
agree: [
|
||||
"แก้ไข มาตรา 112",
|
||||
"แก้ไขรัฐธรรมนูญ 2560",
|
||||
"ยกเลิกการเกณฑ์ทหารแบบบังคับ",
|
||||
"นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
|
||||
],
|
||||
disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "ศรราม",
|
||||
lastname: "ใจดี",
|
||||
province: "กรุงเทพ",
|
||||
district: "บางเขน",
|
||||
phone: "08952402xx",
|
||||
age: "42",
|
||||
edit: "บางเขน",
|
||||
education: "ปริญญาโท ด้านเศรษฐศาสตร์",
|
||||
group: "กลุ่มการศึกษา",
|
||||
occupation:
|
||||
"อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
|
||||
email: "sornram.j@gmail.com",
|
||||
social: { fb: "Sornram jadee", x: "Sornram jadee" },
|
||||
opinion: {
|
||||
agree: [
|
||||
"แก้ไข มาตรา 112",
|
||||
"แก้ไขรัฐธรรมนูญ 2560",
|
||||
"ยกเลิกการเกณฑ์ทหารแบบบังคับ",
|
||||
],
|
||||
disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "ศรราม",
|
||||
lastname: "ใจดี",
|
||||
province: "กรุงเทพ",
|
||||
district: "บางเขน",
|
||||
phone: "08952402xx",
|
||||
age: "42",
|
||||
edit: "บางเขน",
|
||||
education: "ปริญญาโท ด้านเศรษฐศาสตร์",
|
||||
group: "กลุ่มการศึกษา",
|
||||
occupation:
|
||||
"อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
|
||||
email: "sornram.j@gmail.com",
|
||||
social: { fb: "Sornram jadee", x: "Sornram jadee" },
|
||||
opinion: {
|
||||
agree: [
|
||||
"แก้ไข มาตรา 112",
|
||||
"แก้ไขรัฐธรรมนูญ 2560",
|
||||
"ยกเลิกการเกณฑ์ทหารแบบบังคับ",
|
||||
],
|
||||
disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "ศรราม",
|
||||
lastname: "ใจดี",
|
||||
province: "กรุงเทพ",
|
||||
district: "บางเขน",
|
||||
phone: "08952402xx",
|
||||
age: "42",
|
||||
edit: "บางเขน",
|
||||
education: "ปริญญาโท ด้านเศรษฐศาสตร์",
|
||||
group: "กลุ่มการศึกษา",
|
||||
occupation:
|
||||
"อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
|
||||
email: "sornram.j@gmail.com",
|
||||
social: { fb: "Sornram jadee", x: "Sornram jadee" },
|
||||
opinion: {
|
||||
agree: [
|
||||
"แก้ไข มาตรา 112",
|
||||
"แก้ไขรัฐธรรมนูญ 2560",
|
||||
"ยกเลิกการเกณฑ์ทหารแบบบังคับ",
|
||||
],
|
||||
disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "ศรราม",
|
||||
lastname: "ใจดี",
|
||||
province: "กรุงเทพมหานคร",
|
||||
district: "บางเขนบางเขน",
|
||||
phone: "08952402xx",
|
||||
age: "42",
|
||||
education: "ปริญญาโท ด้านเศรษฐศาสตร์",
|
||||
group: "กลุ่มการศึกษา",
|
||||
occupation:
|
||||
"อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
|
||||
email: "sornram.j@gmail.com",
|
||||
social: { fb: "Sornram jadee", x: "Sornram jadee" },
|
||||
opinion: {
|
||||
agree: [
|
||||
"แก้ไข มาตรา 112",
|
||||
"แก้ไขรัฐธรรมนูญ 2560",
|
||||
"ยกเลิกการเกณฑ์ทหารแบบบังคับ",
|
||||
"นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
|
||||
],
|
||||
disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "ศรราม",
|
||||
lastname: "ใจดี",
|
||||
province: "กรุงเทพมหานคร",
|
||||
district: "บางเขนบางเขน",
|
||||
phone: "08952402xx",
|
||||
age: "42",
|
||||
education: "ปริญญาโท ด้านเศรษฐศาสตร์",
|
||||
group: "กลุ่มการศึกษา",
|
||||
occupation:
|
||||
"อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
|
||||
email: "sornram.j@gmail.com",
|
||||
social: { fb: "Sornram jadee", x: "Sornram jadee" },
|
||||
opinion: {
|
||||
agree: [
|
||||
"แก้ไข มาตรา 112",
|
||||
"แก้ไขรัฐธรรมนูญ 2560",
|
||||
"ยกเลิกการเกณฑ์ทหารแบบบังคับ",
|
||||
"นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
|
||||
],
|
||||
disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.more{
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.box-province {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #f4c03f;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
||||
.box-province {
|
||||
position: unset;
|
||||
display: block;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #f4c03f;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
src/components/search/ResultMain.vue
Normal file
14
src/components/search/ResultMain.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<CardUser />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CardUser from "./CardUser";
|
||||
export default {
|
||||
components: {
|
||||
CardUser,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
127
src/components/search/SearchMain.vue
Normal file
127
src/components/search/SearchMain.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="text-center pb-8">
|
||||
<v-img
|
||||
class="mx-auto"
|
||||
:aspect-ratio="1"
|
||||
src="@/assets/logo-title.png"
|
||||
width="250"
|
||||
></v-img>
|
||||
<div class="text-title txt-black">ค้นหาผู้สมัครสว.</div>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12" md="3">
|
||||
<v-autocomplete
|
||||
label="จังหวัด"
|
||||
:items="provinceItems"
|
||||
variant="solo"
|
||||
item-title="provinceNameTh"
|
||||
return-object
|
||||
v-model="province"
|
||||
placeholder="จังหวัด"
|
||||
@update:modelValue="filterData"
|
||||
hide-details
|
||||
></v-autocomplete
|
||||
></v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-autocomplete
|
||||
label="อำเภอ / เขต"
|
||||
:items="districtItems"
|
||||
variant="solo"
|
||||
item-title="districtNameTh"
|
||||
return-object
|
||||
v-model="district"
|
||||
placeholder="อำเภอ / เขต"
|
||||
hide-details
|
||||
></v-autocomplete
|
||||
></v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-autocomplete
|
||||
label="กลุ่มอาชีพ"
|
||||
:items="items"
|
||||
variant="solo"
|
||||
item-title="text"
|
||||
return-object
|
||||
placeholder="กลุ่มอาชีพ"
|
||||
hide-details
|
||||
></v-autocomplete>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-text-field
|
||||
label="ชื่อ"
|
||||
variant="solo"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-btn color="#DD6C31" class="mt-8" elevated size="large">
|
||||
<span class="text-sub">ค้นหา</span>
|
||||
</v-btn>
|
||||
</v-container>
|
||||
<ResultMain />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Provinces from "@/components/form/provinces.json";
|
||||
import Districts from "@/components/form/districts.json";
|
||||
import ResultMain from "./ResultMain.vue";
|
||||
export default {
|
||||
components: {
|
||||
ResultMain,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
province: null,
|
||||
district: null,
|
||||
districtItems: [],
|
||||
provinceItems: Provinces,
|
||||
items: [
|
||||
{ text: "กลุ่มบริหารราชการแผ่นดินและความมั่นคง", idx: 1 },
|
||||
{ text: "กลุ่มกฎหมายกระบวนการยุติธรรม", idx: 2 },
|
||||
{ text: "กลุ่มการศึกษา", idx: 3 },
|
||||
{ text: "กลุ่มการสาธารณสุข", idx: 4 },
|
||||
{ text: "กลุ่มอาชีพทำนา ปลูกพืชล้มลุก", idx: 5 },
|
||||
{ text: "กลุ่มอาชีพทำสวน ป่าไม้ ปศุสัตว์ ประมง", idx: 6 },
|
||||
{ text: "กลุ่มพนักงานหรือลูกจ้างของบุคคล(ไม่ใช่หน่วยงานรัฐ)", idx: 7 },
|
||||
{
|
||||
text: "กลุ่มผู้ประกอบอาชีพด้านสิ่งแวดล้อม ผังเมือง อสังหาริมทรัพย์และสาธารณูปโภค ทรัพยากรธรรมชาติ พลังงาน",
|
||||
idx: 8,
|
||||
},
|
||||
{ text: "กลุ่มผู้ประกอบกิจการ หรือ SME", idx: 9 },
|
||||
{ text: "กลุ่มผู้ประกอบกิจการอื่นนอกจากข้อ (9)", idx: 10 },
|
||||
{ text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
|
||||
{ text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
|
||||
{
|
||||
text: "กลุมผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
|
||||
idx: 13,
|
||||
},
|
||||
{ text: "กลุ่มสตรี", idx: 14 },
|
||||
{
|
||||
text: "กลุ่มผู้สูงอายุ คนพิการหรือทุพพลภาพ กลุ่มชาติพันธุ์ กลุ่มอัตลักษณ์อื่น",
|
||||
idx: 15,
|
||||
},
|
||||
{ text: "กลุ่มศิลปะ วัฒนธรรม ดนตรี การแสดงและบันเทิง", idx: 16 },
|
||||
{ text: "กลุ่มประชาสังคม องค์กรสาธารณประโยชน์", idx: 17 },
|
||||
{ text: "กลุ่มนักกีฬา สื่อสารมวลชน ผู้สร้างสรรค์วรรณกรรม", idx: 18 },
|
||||
{ text: "กลุ่มผู้ประกอบวิชาชีพ ผู้ประกอบอาชีพอิสระ", idx: 19 },
|
||||
{ text: "กลุ่มอื่นๆ", idx: 20 },
|
||||
// { text: "Real-Time" },
|
||||
// { text: "Audience" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
filterData() {
|
||||
// กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
|
||||
|
||||
if (this.province && this.province.provinceCode) {
|
||||
this.districtItems = [...Districts].filter(
|
||||
(item) => item.provinceCode === this.province.provinceCode
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
9
src/main.js
Normal file
9
src/main.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import store from "./store";
|
||||
import vuetify from "./plugins/vuetify";
|
||||
import { loadFonts } from "./plugins/webfontloader";
|
||||
import router from './router'
|
||||
loadFonts();
|
||||
|
||||
createApp(App).use(store).use(vuetify).use(router).mount("#app");
|
||||
9
src/plugins/vuetify.js
Normal file
9
src/plugins/vuetify.js
Normal file
@@ -0,0 +1,9 @@
|
||||
// Styles
|
||||
import "@mdi/font/css/materialdesignicons.css";
|
||||
import "vuetify/styles";
|
||||
|
||||
// Vuetify
|
||||
import { createVuetify } from "vuetify";
|
||||
|
||||
export default createVuetify();
|
||||
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||
17
src/plugins/webfontloader.js
Normal file
17
src/plugins/webfontloader.js
Normal file
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* plugins/webfontloader.js
|
||||
*
|
||||
* webfontloader documentation: https://github.com/typekit/webfontloader
|
||||
*/
|
||||
|
||||
export async function loadFonts() {
|
||||
const webFontLoader = await import(
|
||||
/* webpackChunkName: "webfontloader" */ "webfontloader"
|
||||
);
|
||||
|
||||
webFontLoader.load({
|
||||
google: {
|
||||
families: ["Roboto:100,300,400,500,700,900&display=swap"],
|
||||
},
|
||||
});
|
||||
}
|
||||
36
src/router/index.js
Normal file
36
src/router/index.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import { createWebHistory, createRouter } from "vue-router";
|
||||
import HomePage from "@/views/HomePage.vue";
|
||||
import CheckSurvey from "@/views/CheckSurvey.vue";
|
||||
import QuestionList from "@/views/QuestionList.vue";
|
||||
import RegisterForm from "@/views/RegisterForm.vue";
|
||||
import SearchUser from "@/views/SearchUser.vue";
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "HomePage",
|
||||
component: HomePage,
|
||||
},
|
||||
{
|
||||
path: "/check",
|
||||
component: CheckSurvey,
|
||||
},
|
||||
{
|
||||
path: "/checklist",
|
||||
component: QuestionList,
|
||||
},
|
||||
{
|
||||
path: "/forms",
|
||||
component: RegisterForm,
|
||||
},
|
||||
{
|
||||
path: "/search",
|
||||
component: SearchUser,
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
9
src/store/index.js
Normal file
9
src/store/index.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createStore } from "vuex";
|
||||
|
||||
export default createStore({
|
||||
state: {},
|
||||
getters: {},
|
||||
mutations: {},
|
||||
actions: {},
|
||||
modules: {},
|
||||
});
|
||||
10
src/utils/trpc.ts
Normal file
10
src/utils/trpc.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import {} from "@trpc/client";
|
||||
import { httpBatchLink, createTRPCProxyClient } from "@trpc/client";
|
||||
|
||||
export const client = createTRPCProxyClient({
|
||||
links: [
|
||||
httpBatchLink({
|
||||
url: "http://localhost:3000",
|
||||
}),
|
||||
],
|
||||
});
|
||||
19
src/views/CheckSurvey.vue
Normal file
19
src/views/CheckSurvey.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<MainCheckVue/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainCheckVue from '@/components/check/MainCheck.vue'
|
||||
export default {
|
||||
components:{
|
||||
MainCheckVue
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
16
src/views/HomePage.vue
Normal file
16
src/views/HomePage.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div><MainVote /></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainVote from "@/components/MainVote.vue";
|
||||
|
||||
export default {
|
||||
name: "HomePage",
|
||||
components: {
|
||||
MainVote,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
19
src/views/QuestionList.vue
Normal file
19
src/views/QuestionList.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<QuestionListVue/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QuestionListVue from '@/components/check/QuestionList.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
QuestionListVue
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
12
src/views/RegisterForm.vue
Normal file
12
src/views/RegisterForm.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template lang="">
|
||||
<div>
|
||||
<FormMain />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FormMain from "../components/form/FormMain.vue";
|
||||
export default {
|
||||
components: { FormMain },
|
||||
};
|
||||
</script>
|
||||
<style lang=""></style>
|
||||
14
src/views/SearchUser.vue
Normal file
14
src/views/SearchUser.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<FormMain />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FormMain from "../components/search/SearchMain.vue";
|
||||
export default {
|
||||
components: {
|
||||
FormMain,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user