ปรับ css หน้ารายละเอียดประกาศ แก้ตามประชุมวันนี้
This commit is contained in:
Tanyalak
parent
faaae95956
commit
b8bf44ba3a
12 changed files with 142 additions and 90 deletions
|
|
@ -12,7 +12,7 @@
|
|||
const c3 = "/images/c3.jpg";
|
||||
|
||||
</script>
|
||||
<section class="reative flex bg-gradient pt-10 pb-48 md:pb-38">
|
||||
<section class="reative flex bg-gradient pt-10 pb-44 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">
|
||||
|
|
@ -96,13 +96,13 @@
|
|||
<div class="card-body">
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
ข่าววันที่ : {qualify_exams[0].date}
|
||||
<div class="badge badge-secondary text-white ml-4">NEW</div>
|
||||
<div class="badge bg-blue-100 text-blue-500 border-none ml-4">NEW</div>
|
||||
</div>
|
||||
<div class="card-title font-medium">
|
||||
{qualify_exams[0].title}
|
||||
<a class="hover:text-gray-500" href="/qualifying/{qualify_exams[0].id}">{qualify_exams[0].title}</a>
|
||||
</div>
|
||||
<div class="mt-4 text-sm flex flex-wrap justify-between">
|
||||
<div>
|
||||
<div class="text-sm flex flex-wrap justify-end">
|
||||
<!-- <div>
|
||||
<i class="fab fa-twitter text-blue-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
|
||||
<i class="fab fa-line text-green-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<a
|
||||
href="/qualifying/{qualify_exams[0].id}"
|
||||
|
|
@ -136,10 +136,10 @@
|
|||
{qualify_exams[1].date}
|
||||
</h2>
|
||||
<div class="card-title font-medium">
|
||||
{qualify_exams[1].title}
|
||||
<a class="hover:text-gray-500" href="/qualifying/{qualify_exams[1].id}">{qualify_exams[1].title}</a>
|
||||
</div>
|
||||
<div class="mt-4 text-sm flex flex-wrap justify-between">
|
||||
<div>
|
||||
<div class="text-sm flex flex-wrap justify-end">
|
||||
<!-- <div>
|
||||
<i class="fab fa-twitter text-blue-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
|
||||
<i class="fab fa-line text-green-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<a
|
||||
href="/qualifying/{qualify_exams[1].id}"
|
||||
|
|
@ -171,10 +171,10 @@
|
|||
{qualify_exams[2].date}
|
||||
</div>
|
||||
<div class="card-title font-medium">
|
||||
{qualify_exams[2].title}
|
||||
<a class="hover:text-gray-500" href="/qualifying/{qualify_exams[2].id}">{qualify_exams[2].title}</a>
|
||||
</div>
|
||||
<div class="mt-4 text-sm flex flex-wrap justify-between">
|
||||
<div>
|
||||
<div class="text-sm flex flex-wrap justify-end">
|
||||
<!-- <div>
|
||||
<i class="fab fa-twitter text-blue-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
|
||||
<i class="fab fa-line text-green-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<a
|
||||
href="/qualifying/{qualify_exams[2].id}"
|
||||
|
|
@ -226,13 +226,14 @@
|
|||
<div class="card-body">
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
ข่าววันที่ : {competitive_exams[0].date}
|
||||
<div class="badge badge-secondary text-white ml-4">NEW</div>
|
||||
<div class="badge ml-4 bg-blue-100 text-blue-500 border-none">NEW</div>
|
||||
</div>
|
||||
<div class="card-title font-medium">
|
||||
{competitive_exams[0].title}
|
||||
<a class="hover:text-gray-500" href="/competitive/{competitive_exams[0].id}">{competitive_exams[0].title}</a>
|
||||
</div>
|
||||
<div class="mt-4 text-sm flex flex-wrap justify-between">
|
||||
<div>
|
||||
<!-- <div class="mt-4 text-sm flex flex-wrap justify-between"> -->
|
||||
<div class="text-sm flex flex-wrap justify-end">
|
||||
<!-- <div>
|
||||
<i class="fab fa-twitter text-blue-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
|
||||
|
|
@ -241,7 +242,7 @@
|
|||
|
||||
<i class="fab fa-line text-green-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<a
|
||||
href="/competitive/{competitive_exams[0].id}"
|
||||
|
|
@ -266,10 +267,10 @@
|
|||
{competitive_exams[1].date}
|
||||
</h2>
|
||||
<div class="card-title font-medium">
|
||||
{competitive_exams[1].title}
|
||||
<a class="hover:text-gray-500" href="/competitive/{competitive_exams[1].id}">{competitive_exams[1].title}</a>
|
||||
</div>
|
||||
<div class="mt-4 text-sm flex flex-wrap justify-between">
|
||||
<div>
|
||||
<div class="text-sm flex flex-wrap justify-end">
|
||||
<!-- <div>
|
||||
<i class="fab fa-twitter text-blue-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
|
||||
|
|
@ -278,7 +279,7 @@
|
|||
|
||||
<i class="fab fa-line text-green-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<a
|
||||
href="/competitive/{competitive_exams[1].id}"
|
||||
|
|
@ -298,13 +299,13 @@
|
|||
</figure>
|
||||
<div class="card-body w-full lg:w-7/12">
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
{competitive_exams[2].title}
|
||||
{competitive_exams[2].date}
|
||||
</div>
|
||||
<div class="card-title font-medium">
|
||||
{competitive_exams[2].title}
|
||||
<a class="hover:text-gray-500" href="/competitive/{competitive_exams[2].id}">{competitive_exams[2].title}</a>
|
||||
</div>
|
||||
<div class="mt-4 text-sm flex flex-wrap justify-between">
|
||||
<div>
|
||||
<div class="text-sm flex flex-wrap justify-end">
|
||||
<!-- <div>
|
||||
<i class="fab fa-twitter text-blue-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
|
||||
|
|
@ -313,7 +314,7 @@
|
|||
|
||||
<i class="fab fa-line text-green-500"></i>
|
||||
<span class="pl-1 pr-3 text-gray-400">0</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<a
|
||||
href="/competitive/{competitive_exams[2].id}"
|
||||
|
|
@ -365,6 +366,6 @@
|
|||
|
||||
}
|
||||
.imgCard{
|
||||
max-height: 220px;
|
||||
height: 210px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@ export const load: PageServerLoad = async () => {
|
|||
const exams = await getCompetitiveExams()
|
||||
const events:CalendarEvent[]=[]
|
||||
exams.forEach(({id,title,start})=>{
|
||||
const backgroundColor ="#9999FF"
|
||||
const backgroundColor ="rgb(153 153 255 / 34%)"
|
||||
const url = "/competitive/"+id
|
||||
events.push({id,title,start,url,backgroundColor})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="pb-40 relative bg-blueGray-100">
|
||||
<div class="p-3">{@html data.content}</div>
|
||||
<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>
|
||||
|
|
@ -27,6 +27,9 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="w-full row pt-8 justify-start px-7">
|
||||
<div class="full-width text-left">{@html data.content}</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
|
||||
<div class="w-full lg:w-7/12 cardxl">
|
||||
|
|
@ -50,18 +53,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<table class="items-center w-full bg-transparent border-collapse">
|
||||
<table class="items-center w-full bg-transparent border-collapse tableScroll">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each exams as exam}
|
||||
<tr>
|
||||
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href="/competitive/{exam.id}">{exam.date}</a></th>
|
||||
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href="/competitive/{exam.id}">{exam.title}</a></td>
|
||||
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-left"><a href="/competitive/{exam.id}">{exam.date}</a></th>
|
||||
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-left"><a href="/competitive/{exam.id}">{exam.title}</a></td>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="breadTaxt">{data.title}</span>
|
||||
<span class="breadTaxt">ประกาศเกี่ยวกับการสอบแข่งขัน</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -26,26 +26,36 @@
|
|||
</div>
|
||||
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
|
||||
<div class="card bg-white shadow-xl w-full p-8 max-w-4xl ">
|
||||
<div>
|
||||
<div class="text-2xl mb-3 font-medium">{data.title}</div>
|
||||
<div class="text-sm">
|
||||
<i class="fa-regular fa-calendar mr-4 text-blue-500"></i><span class="text-blue-500">{data.date}</span>
|
||||
</div>
|
||||
<hr class="border-blueGray-200 my-7" />
|
||||
<div class="">
|
||||
{@html data.detail}
|
||||
</div>
|
||||
<div></div>
|
||||
{#if data.docUrl}
|
||||
<div><a href={data.docUrl} >เอกสาร</a></div>
|
||||
<hr class="border-blueGray-200 mb-4 mt-7" />
|
||||
<div class="text-lg py-1">
|
||||
<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={data.docUrl} class="text-blue-400 hover:text-blue-600" target="_blank">คลิกที่นี่เพื่ออ่าน </a><span class="font-medium">เอกสารประกอบ</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if data.files}
|
||||
{#each data.files as file}
|
||||
<hr class="border-blueGray-200 mb-4 mt-4" />
|
||||
<div class="text-lg py-1">
|
||||
<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600" target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
<hr class="border-blueGray-200 my-7" />
|
||||
<div>
|
||||
<a href="javascript:history.back()" class="btn btn-outline text-gray-500">
|
||||
<i class="fa-solid fa-arrow-left mr-4"></i>
|
||||
ย้อนกลับ
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if data.files}
|
||||
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
|
||||
<div class="card bg-white shadow-xl w-full p-8 max-w-4xl">
|
||||
{#each data.files as file}
|
||||
<div>
|
||||
<a href={file.url}>{file.title}</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</section>
|
||||
|
|
@ -12,8 +12,9 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="pb-40 relative bg-blueGray-100">
|
||||
<div class="p-3">{@html data.content}</div>
|
||||
|
||||
<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>
|
||||
|
|
@ -28,6 +29,9 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="w-full row pt-8 justify-start px-7">
|
||||
<div class="full-width text-left">{@html data.content}</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
|
||||
<div class="w-full lg:w-7/12 cardxl">
|
||||
|
|
@ -48,20 +52,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<table class="items-center w-full bg-transparent border-collapse">
|
||||
<table class="items-center w-full bg-transparent border-collapse tableScroll">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">หน่วยงาน</th>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th>
|
||||
<th class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">หน่วยงาน</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each exams as exam}
|
||||
<tr>
|
||||
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href={"/qualifying/"+exam.id}>{exam.date}</a></th>
|
||||
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href={"/qualifying/"+exam.id}>{exam.title}</a></td>
|
||||
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.institute}</td>
|
||||
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-left"><a href={"/qualifying/"+exam.id}>{exam.date}</a></th>
|
||||
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-left"><a href={"/qualifying/"+exam.id}>{exam.title}</a></td>
|
||||
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-left">{exam.institute}</td>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="breadTaxt">{data.title}</span>
|
||||
<span class="breadTaxt">ประกาศเกี่ยวกับการคัดเลือกบุคลากรกทม.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -29,27 +29,37 @@
|
|||
</div>
|
||||
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
|
||||
<div class="card bg-white shadow-xl w-full p-8 max-w-4xl ">
|
||||
<div>
|
||||
<div class="text-2xl mb-3 font-medium">{data.title}</div>
|
||||
<div class="text-sm">
|
||||
<i class="fa-regular fa-calendar mr-4 text-blue-500"></i><span class="text-blue-500">{data.date}</span>
|
||||
</div>
|
||||
<hr class="border-blueGray-200 my-7" />
|
||||
<div class="">
|
||||
{@html data.detail}
|
||||
</div>
|
||||
<div></div>
|
||||
{#if data.docUrl}
|
||||
<div><a href={data.docUrl} >เอกสาร</a></div>
|
||||
<hr class="border-blueGray-200 my-4" />
|
||||
<div class="text-lg py-1">
|
||||
<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={data.docUrl} class="text-blue-400 hover:text-blue-600" target="_blank">คลิกที่นี่เพื่ออ่าน </a><span class="font-medium">เอกสารประกอบ</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if data.files}
|
||||
{#each data.files as file}
|
||||
<hr class="border-blueGray-200 mb-4 mt-4" />
|
||||
<div class="text-lg py-1">
|
||||
<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600" target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
<hr class="border-blueGray-200 my-7" />
|
||||
<div>
|
||||
<a href="javascript:history.back()" class="btn btn-outline text-gray-500">
|
||||
<i class="fa-solid fa-arrow-left mr-4"></i>
|
||||
ย้อนกลับ
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if data.files}
|
||||
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
|
||||
<div class="card bg-white shadow-xl w-full p-8 max-w-4xl">
|
||||
{#each data.files as file}
|
||||
<div>
|
||||
<a href={file.url}>{file.title}</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue