hrms-bangkok/hrms-exam
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ FullCalendar และหัวข้อปแต่ละหน้า

Browse source
This commit is contained in:
Tanyalak 2023-04-05 16:56:04 +07:00
parent 08bd7b0b6a
commit 9fc92cfbcd
11 changed files with 352 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

213
cms/src/routes/+page.svelte
View file

@ -13,7 +13,7 @@
const c3 = "/images/c3.jpg";
</script>
<section class="header relative items-start mt-12 flex max-h-860-px">
<section class="reative flex bg-gradient pt-10 pb-48 md:pb-38">
<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">
@ -30,7 +30,6 @@
<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"
>
การสอบคัดเลือก
@ -38,7 +37,6 @@
<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>
@ -47,12 +45,12 @@
</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"
class="absolute top-0 b-auto right-0 sm:w-5/12 sm:mt-32 pr-10 hidden md:flex"
src="{patternVue}"
alt="..."
/>
</section>
<section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100">
<section class="pb-40 relative bg-blueGray-100"><!-- mt-48 md:mt-40 -->
<div
class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
style="transform: translateZ(0);"
@ -77,13 +75,12 @@
<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 ">
class="w-full pt-20 mb-8 flex flex-wrap justify-between">
<h6 class="text-2xl font-semibold pb-2">
ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
</h6>
<a
href="/"
target="_blank"
href="/qualifying"
class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
>
ประกาศทั้งหมด
@ -95,26 +92,36 @@
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">
<figure style="height: 250px;" class="img-drop">
<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 class="badge bg-blue-100 text-blue-500 ml-4 border-0">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>
<div class="mt-4 text-sm flex flex-wrap justify-between">
<div>
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-1 pr-3 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>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
</div>
<a
href="/"
class=" text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
>
อ่านต่อ
<i class="fa fa-angle-double-right ml-1 text-xs"></i>
</a>
</div>
</div>
</div>
@ -123,7 +130,7 @@
<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">
<figure class="w-full lg:w-5/12 img-drop">
<img src="{sel2}" alt="1" class="h-full" />
</figure>
<div class="card-body w-full lg:w-7/12">
@ -133,22 +140,32 @@
<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>
<div class="mt-4 text-sm flex flex-wrap justify-between">
<div>
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-1 pr-3 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>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
</div>
<a
href="/"
class=" text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
>
อ่านต่อ
<i class="fa fa-angle-double-right ml-1 text-xs"></i>
</a>
</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">
<figure class="w-full lg:w-5/12 img-drop">
<img src="{sel3}" alt="1" class="h-full"/>
</figure>
<div class="card-body w-full lg:w-7/12">
@ -158,16 +175,26 @@
<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>
<div class="mt-4 text-sm flex flex-wrap justify-between">
<div>
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-1 pr-3 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>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
</div>
<a
href="/"
class=" text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
>
อ่านต่อ
<i class="fa fa-angle-double-right ml-1 text-xs"></i>
</a>
</div>
</div>
</div>
</div>
@ -180,13 +207,12 @@
<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 ">
class="w-full pt-20 mb-8 flex flex-wrap justify-between">
<h6 class="text-2xl font-semibold pb-2">
ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
</h6>
<a
href="/"
target="_blank"
href="/competitive"
class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
>
ประกาศทั้งหมด
@ -198,27 +224,37 @@
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">
<figure style="height: 250px;" class="img-drop">
<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 class="badge bg-blue-100 text-blue-500 ml-4 border-0">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>
<div class="mt-4 text-sm flex flex-wrap justify-between">
<div>
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-1 pr-3 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>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
</div>
<a
href="/"
class=" text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
>
อ่านต่อ
<i class="fa fa-angle-double-right ml-1 text-xs"></i>
</a>
</div>
</div>
</div>
</div>
@ -226,7 +262,7 @@
<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">
<figure class="w-full lg:w-5/12 imgCard img-drop">
<img src="{c2}" alt="1" class="h-full" />
</figure>
<div class="card-body w-full lg:w-7/12">
@ -236,22 +272,32 @@
<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>
<div class="mt-4 text-sm flex flex-wrap justify-between">
<div>
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-1 pr-3 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>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
</div>
<a
href="/"
class=" text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
>
อ่านต่อ
<i class="fa fa-angle-double-right ml-1 text-xs"></i>
</a>
</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">
<figure class="w-full lg:w-5/12 imgCard img-drop">
<img src="{c3}" alt="1" class="h-full"/>
</figure>
<div class="card-body w-full lg:w-7/12">
@ -261,16 +307,26 @@
<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>
<div class="mt-4 text-sm flex flex-wrap justify-between">
<div>
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-1 pr-3 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>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-1 pr-3 text-gray-400">0</span>
</div>
<a
href="/"
class=" text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
>
อ่านต่อ
<i class="fa fa-angle-double-right ml-1 text-xs"></i>
</a>
</div>
</div>
</div>
</div>
@ -292,6 +348,12 @@
.imgCard{
height: 250px;
}
}
@media only screen and (max-width: 640px) {
.bg-gradient{
background-image: linear-gradient(300deg, rgba(255,0,0,0), #faecf0b4);
}
}
.card-side{
flex-direction: row;
@ -309,4 +371,7 @@
.imgCard{
max-height: 220px;
}
.img-drop {
filter: brightness(0.98);
}
</style>

29
cms/src/routes/competitive/+page.svelte
View file

@ -3,12 +3,29 @@
export let data: PageData;
const exams = data.exams
</script>
<section class="items-start h-screen flex max-h-860-px pt-12 bg-blueGray-100">
<div class="container mx-auto items-start flex flex-wrap px-4">
<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
การสอบแข่งขัน
</h2>
<section>
<div class="p-one parallax-inner">
<h2>การสอบแข่งขัน</h2>
</div>
</section>
<section class="pb-40 relative bg-blueGray-100">
<div class="container mx-auto justify-center flex flex-wrap">
<div class=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md" >
<div class="text-sm breadcrumbs">
<ul>
<li class="text-pink-500 hover:text-pink-700 ">
<a href="/" >
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
</a>
</li>
<li>
<span class="breadTaxt">การสอบแข่งขัน</span>
</li>
</ul>
</div>
</div>
</div>
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
<div
class=" relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white"
>

33
cms/src/routes/qualifying/+page.svelte
View file

@ -6,14 +6,31 @@
const events = data.events
</script>
<section class="items-start flex pt-12 pb-20 bg-blueGray-100">
<div class="container mx-auto items-start flex flex-wrap px-4">
<h2 class="font-semibold text-2xl text-blueGray-600 mb-4 w-full">
การสอบคัดเลือก
</h2>
<section>
<div class="p-one parallax-inner">
<h2>การสอบคัดเลือก</h2>
</div>
</section>
<section class="pb-40 relative bg-blueGray-100">
<div class="container mx-auto justify-center flex flex-wrap">
<div class=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md" >
<div class="text-sm breadcrumbs">
<ul>
<li class="text-pink-500 hover:text-pink-700 ">
<a href="/" >
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
</a>
</li>
<li>
<span class="breadTaxt">การสอบคัดเลือก</span>
</li>
</ul>
</div>
</div>
</div>
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
<div class="w-full lg:w-6/12 cardxl">
<div class="card bg-white shadow-xl w-full p-4">
<div class="card bg-white shadow-xl w-full">
<ActivityCalendar {events} />
</div>
</div>
@ -55,4 +72,6 @@
</div>
</div>
</section>
<style>
</style>