Add support API for header, footer, Home image and small adjust.

This commit is contained in:
schooltechx 2023-04-07 23:56:23 +07:00
parent 692e6f3e24
commit 5af1f48150
10 changed files with 50 additions and 93 deletions

View file

@ -1,6 +1,11 @@
<script>
<script lang="ts">
// make dynamic date to be added to footer
let date = new Date().getFullYear();
export let logo_url:string = "/images/logo.png"
export let address:string ="173 ถนนดินสอ แขวงเสาชิงช้า เขตพระนคร กรุงเทพมหานคร 10200"
export let organization:string = "กองสรรหาบุคคล yyy"
export let divisions:{title:string,url:string}[] =[]
export let institutes:{title:string,url:string}[] =[]
</script>
<footer class="relative bg-blueGray-200 pt-8 pb-6">
@ -28,12 +33,12 @@
<div class="w-full lg:w-6/12 px-4">
<div class=" mb-4">
<div class="w-12 rounded-full">
<img src="/images/logo.png" alt="logo">
<img src="{logo_url}" alt="logo">
</div>
</div>
<h5 class="text-2xl font-semibold">กองสรรหาบุคคล</h5>
<h5 class="text-2xl font-semibold">{organization}</h5>
<h6 class="text-md mt-1 mb-2 text-blueGray-600">
173 ถนนดินสอ แขวงเสาชิงช้า เขตพระนคร กรุงเทพมหานคร 10200
{address}
</h6>
<div class="mt-6 lg:mb-0 mb-6">
@ -60,42 +65,17 @@
ส่วนราชการ
</span>
<ul class="list-none">
{#each divisions as d}
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/KSB"
href="{d.url}"
target="_blank"
>
กองสรรหาบุคคล
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/pdbma"
target="_blank"
>
กองพัฒนาระบบราชการ
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/csc_personal"
target="_blank"
>
กองอัตรากำลัง
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="http://203.155.220.238/csc/index.php/en/discipline-morality"
target="_blank"
>
กองทะเบียนประวัติข้าราชการ
{d.title}
</a>
</li>
{/each}
</ul>
</div>
<div class="w-full lg:w-4/12 px-4">
@ -105,42 +85,17 @@
หน่วยงาน
</span>
<ul class="list-none">
{#each institutes as i}
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://main.bangkok.go.th/"
href="{i.url}"
target="_blank"
>
กรุงเทพมหานคร
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/pdd"
target="_blank"
>
สนป.กทม./กองการเจ้าหน้าที่
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/bangkokeducation"
target="_blank"
>
สำนักการศึกษา กทม.
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://www.ocsc.go.th/"
target="_blank"
>
สำนักงาน ก.พ.
{i.title}
</a>
</li>
{/each}
</ul>
</div>
</div>

View file

@ -1,3 +1,10 @@
<script lang="ts">
export let logo_url:string = "/images/logo.png"
export let organization:string = "กองสรรหาบุคคล yyy"
export let supervised:string = "สำนักงาน ก.ก.xx"
</script>
<div class="navbar bg-white w-full top-0 z-50 fixed flex-wrap items-center justify-between px-4 ">
<div
class="container px-4 mx-auto flex flex-no-wrap items-center justify-between"
@ -7,17 +14,13 @@
<div class="content-center grid">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="/images/logo.png" alt="logo">
<img src="{logo_url}" alt="logo">
</div>
</div>
</div>
<div class="content-center grid pl-4">
<a class="textline1"
target="_blank"
href="https://webportal.bangkok.go.th/KSB">
กองสรรหาบุคคล
</a>
<div class="textline2">สำนักงาน ก.ก.</div>
{organization}
<div class="textline2">{supervised}</div>
</div>
</div>
</div>
@ -50,11 +53,13 @@
</div>
</div>
<style>
/*
.textline1{
line-height:1.2rem !important;
font-weight: 400;
/* color: #02A998; */
}
color: #02A998;
}
*/
.textline2{
font-size: 0.80rem;
line-height:1.3rem !important;