312 lines
No EOL
12 KiB
Svelte
312 lines
No EOL
12 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
export let data: PageData;
|
|
const qualify_exams = data.qualify_exams;
|
|
const competitive_exams = data.competitive_exams;
|
|
const detail = data.detail;
|
|
const patternVue = "/images/pattern.png";
|
|
const sel1 = "/images/sel1.png";
|
|
const sel2 = "/images/sel2.png";
|
|
const sel3 = "/images/sel3.png";
|
|
const c1 = "/images/c1.jpg";
|
|
const c2 = "/images/c2.jpg";
|
|
const c3 = "/images/c3.jpg";
|
|
|
|
</script>
|
|
<section class="header relative items-start mt-12 flex max-h-860-px">
|
|
<div class="container mx-auto items-start flex flex-wrap">
|
|
<div class="w-full md:w-6/12 lg:w-6/12 xl:w-6/12 px-6">
|
|
<div class="pt-16 sm:pt-18">
|
|
<h2 class="font-semibold text-3xl text-blueGray-600">
|
|
กองสรรหาบุคคล
|
|
</h2>
|
|
<h2 class="pt-1 text-2xl text-red-400">
|
|
Recruitment Division
|
|
</h2>
|
|
<p class="mt-4 text-lg leading-relaxed text-blueGray-500">
|
|
การสรรหาและเลือกสรรบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ และข้าราชการครูกรุงเทพมหานครเฉพาะสังกัดสำนักพัฒนา
|
|
ชุมชน
|
|
</p>
|
|
<div class="mt-12">
|
|
<a
|
|
href="/qualifying"
|
|
target="_blank"
|
|
class=" text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
|
|
>
|
|
การสอบคัดเลือก
|
|
</a>
|
|
<a
|
|
href="/competitive"
|
|
class=" ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
|
|
target="_blank"
|
|
>
|
|
การสอบแข่งขัน
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img
|
|
class="absolute top-0 b-auto right-0 sm:w-5/12 -mt-48 sm:mt-0 w-9/12 hidden md:flex"
|
|
src="{patternVue}"
|
|
alt="..."
|
|
/>
|
|
</section>
|
|
<section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100">
|
|
<div
|
|
class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
|
|
style="transform: translateZ(0);"
|
|
>
|
|
<svg
|
|
class="absolute bottom-0 overflow-hidden"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
preserveAspectRatio="none"
|
|
version="1.1"
|
|
viewBox="0 0 2560 100"
|
|
x="0"
|
|
y="0"
|
|
>
|
|
<polygon
|
|
class="text-blueGray-100 fill-current"
|
|
points="2560 0 2560 100 0 100"
|
|
></polygon>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- ประกาศเกี่ยวกับการคัดเลือกบุคลากรกทม. -->
|
|
<div class="container mx-auto">
|
|
<div class="flex flex-wrap px-6">
|
|
<div
|
|
class="w-full pt-20 mb-10 flex flex-wrap justify-between">
|
|
<h6 class="text-2xl font-semibold ">
|
|
ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
|
|
</h6>
|
|
<a
|
|
href="/"
|
|
target="_blank"
|
|
class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
|
|
>
|
|
ประกาศทั้งหมด
|
|
<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full lg:w-6/12 cardxl"
|
|
>
|
|
<div class="card bg-white shadow-xl w-full ">
|
|
<figure style="height: 250px;" class="img-hover-zoom--brightness">
|
|
<img src="{sel1}" alt="1" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 24 มี.ค. 2566
|
|
<div class="badge badge-secondary text-white ml-4">NEW</div>
|
|
</div>
|
|
<div class="card-title font-medium">
|
|
ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-6/12">
|
|
<div class="flex flex-wrap space-y-8">
|
|
<div class="flex flex-col w-full">
|
|
<div class="card card-side bg-white shadow-xl w-full">
|
|
<figure class="w-full lg:w-5/12 imgCard">
|
|
<img src="{sel2}" alt="1" class="h-full" />
|
|
</figure>
|
|
<div class="card-body w-full lg:w-7/12">
|
|
<h2 class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 3 มี.ค. 2566
|
|
</h2>
|
|
<div class="card-title font-medium">
|
|
ประกาศรายชื่อผู้มีสิทธิเข้ารับการคัดเลือกบุคลากรกทม.เป็นข้าราชการฯ ครั้งที่ 1/2565
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" flex flex-col w-full">
|
|
<div class="card card-side bg-white shadow-xl w-full">
|
|
<figure class="w-full lg:w-5/12 imgCard">
|
|
<img src="{sel3}" alt="1" class="h-full"/>
|
|
</figure>
|
|
<div class="card-body w-full lg:w-7/12">
|
|
<div class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 20 ธันวาคม 2566
|
|
</div>
|
|
<div class="card-title font-medium">
|
|
ประกาศรับสมัครคัดเลือกบุคลากรกทม. !!
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ประกาศเกี่ยวกับการสอบแข่งขัน -->
|
|
<div class="container mx-auto mt-4">
|
|
<div class="flex flex-wrap px-6">
|
|
<div
|
|
class="w-full pt-20 mb-10 flex flex-wrap justify-between">
|
|
<h6 class="text-2xl font-semibold ">
|
|
ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
|
|
</h6>
|
|
<a
|
|
href="/"
|
|
target="_blank"
|
|
class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
|
|
>
|
|
ประกาศทั้งหมด
|
|
<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full lg:w-6/12 cardxl"
|
|
>
|
|
<div class="card bg-white shadow-xl w-full ">
|
|
<figure style="height: 250px;" class="img-hover-zoom--brightness">
|
|
<img src="{c1}" alt="1" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 24 มี.ค. 2566
|
|
<div class="badge badge-secondary text-white ml-4">NEW</div>
|
|
</div>
|
|
<div class="card-title font-medium">
|
|
ประกาศรายชื่อผู้ผ่านภาค ข. และมีสิทธิสอบภาค ค. ในการคัดเลือกคนพิการ ครั้งที่ 1/2565
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-6/12">
|
|
<div class="flex flex-wrap space-y-8">
|
|
<div class="flex flex-col w-full">
|
|
<div class="card card-side bg-white shadow-xl w-full">
|
|
<figure class="w-full lg:w-5/12 imgCard">
|
|
<img src="{c2}" alt="1" class="h-full" />
|
|
</figure>
|
|
<div class="card-body w-full lg:w-7/12">
|
|
<h2 class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 13 มี.ค. 2566
|
|
</h2>
|
|
<div class="card-title font-medium">
|
|
ใครลืมส่งเอกสาร !! สำหรับการคัดเลือกคนพิการฯ ครั้งที่ 1/2565 ส่งเอกสารเพิ่มได้
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" flex flex-col w-full">
|
|
<div class="card card-side bg-white shadow-xl w-full">
|
|
<figure class="w-full lg:w-5/12 imgCard">
|
|
<img src="{c3}" alt="1" class="h-full"/>
|
|
</figure>
|
|
<div class="card-body w-full lg:w-7/12">
|
|
<div class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 9 มี.ค. 2566
|
|
</div>
|
|
<div class="card-title font-medium">
|
|
แผนที่การเดินทางมาสนามสอบคนพิการฯ ครั้งที่ 1/2565
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<style>
|
|
@media only screen and (max-width: 1024px) {
|
|
.card-side{
|
|
flex-direction: column !important;
|
|
|
|
}
|
|
.card-side :where(figure:first-child){
|
|
border-start-end-radius: 1rem !important;
|
|
border-end-start-radius: 0rem !important;
|
|
}
|
|
.imgCard{
|
|
height: 250px;
|
|
}
|
|
}
|
|
.card-side{
|
|
flex-direction: row;
|
|
}
|
|
.card-title{
|
|
height: 80px;
|
|
align-items: start;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
.imgCard{
|
|
max-height: 220px;
|
|
}
|
|
</style> |