update ui to match data

This commit is contained in:
schooltechx 2023-04-05 18:03:58 +07:00
parent 11ab0b68d0
commit 4b397f0a26
4 changed files with 73 additions and 44 deletions

View file

@ -3,7 +3,6 @@
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";
@ -13,7 +12,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">
@ -24,8 +23,7 @@
Recruitment Division
</h2>
<p class="mt-4 text-lg leading-relaxed text-blueGray-500">
การสรรหาและเลือกสรรบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ และข้าราชการครูกรุงเทพมหานครเฉพาะสังกัดสำนักพัฒนา
ชุมชน
{data.content}
</p>
<div class="mt-12">
<a
@ -82,8 +80,7 @@
ประกาศเกี่ยวกับ<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"
>
ประกาศทั้งหมด
@ -96,15 +93,15 @@
>
<div class="card bg-white shadow-xl w-full ">
<figure style="height: 250px;" class="img-hover-zoom--brightness">
<img src="{sel1}" alt="1" />
<img src={qualify_exams[0].img} alt="1" />
</figure>
<div class="card-body">
<div class="text-sm font-medium text-gray-500">
ข่าววันที่ : 24 มี.ค. 2566
ข่าววันที่ : {qualify_exams[0].date}
<div class="badge badge-secondary text-white ml-4">NEW</div>
</div>
<div class="card-title font-medium">
ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.
{qualify_exams[0].title}
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
@ -124,14 +121,14 @@
<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" />
<img src={qualify_exams[1].img} 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
{qualify_exams[1].date}
</h2>
<div class="card-title font-medium">
ประกาศรายชื่อผู้มีสิทธิเข้ารับการคัดเลือกบุคลากรกทม.เป็นข้าราชการฯ ครั้งที่ 1/2565
{qualify_exams[1].title}
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
@ -149,14 +146,14 @@
<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"/>
<img src={qualify_exams[2].img} 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
{qualify_exams[2].date}
</div>
<div class="card-title font-medium">
ประกาศรับสมัครคัดเลือกบุคลากรกทม. !!
{qualify_exams[2].title}
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
@ -185,8 +182,7 @@
ประกาศเกี่ยวกับ<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"
>
ประกาศทั้งหมด
@ -194,20 +190,18 @@
</a>
</div>
<div
class="w-full lg:w-6/12 cardxl"
>
<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" />
<img src={competitive_exams[0].img} alt="1" />
</figure>
<div class="card-body">
<div class="text-sm font-medium text-gray-500">
ข่าววันที่ : 24 มี.ค. 2566
ข่าววันที่ : {competitive_exams[0].date}
<div class="badge badge-secondary text-white ml-4">NEW</div>
</div>
<div class="card-title font-medium">
ประกาศรายชื่อผู้ผ่านภาค ข. และมีสิทธิสอบภาค ค. ในการคัดเลือกคนพิการ ครั้งที่ 1/2565
{competitive_exams[0].title}
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
@ -227,14 +221,14 @@
<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" />
<img src={competitive_exams[1].img} 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
{competitive_exams[1].date}
</h2>
<div class="card-title font-medium">
ใครลืมส่งเอกสาร !! สำหรับการคัดเลือกคนพิการฯ ครั้งที่ 1/2565 ส่งเอกสารเพิ่มได้
{competitive_exams[1].title}
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
@ -252,14 +246,14 @@
<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"/>
<img src={competitive_exams[2].img} 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
{competitive_exams[2].title}
</div>
<div class="card-title font-medium">
แผนที่การเดินทางมาสนามสอบคนพิการฯ ครั้งที่ 1/2565
{competitive_exams[2].title}
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>

View file

@ -8,9 +8,8 @@
<section class="items-start h-screen flex max-h-860-px pt-10 bg-blueGray-100">
<div class="container mx-auto items-start flex flex-wrap px-4">
<div >
{@html data.detail}
{@html data.content}
</div>
<div>{data.contact.description}</div>
<div>{ver.version}</div>
<div>{ver.builddate}</div>
</div>

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"
>

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>