ปรับ css กล่องแสดงรายละเอียดวันสมัคร ชำระ สอบ

This commit is contained in:
Tanyalak 2023-04-25 10:43:07 +07:00
parent 430bba79d1
commit daa8263c0c
3 changed files with 17 additions and 13 deletions

View file

@ -138,4 +138,9 @@
color: #02A998;
box-shadow: rgba(149, 157, 165, 0.15) 0px 5px 10px;
}
.card-detail{
border: 1px solid rgba(51, 65, 85, 0.129);
background-color: rgba(197, 209, 227, 0.064);
border-radius: 5px;
}
}

View file

@ -37,15 +37,15 @@
<i class="fa-regular fa-calendar mr-4 text-blue-500"></i><span class="text-blue-500">{data.date}</span>
</div>
{#if data.announcementExam}
<div class="text-sm">
<div class="text-md card-detail p-4 mt-5 space-y-2">
{#if data.register_startDate}
<div>สมัคร: {formatDate(data.register_startDate,data.register_endDate)}</div>
<div><span class="pr-1 font-semibold ">สมัคร :</span> {formatDate(data.register_startDate,data.register_endDate)}</div>
{/if}
{#if data.payment_startDate}
<div>ชำระเงิน: {formatDate(data.payment_startDate,data.payment_endDate)} </div>
<div><span class="pr-1 font-semibold">ชำระเงิน :</span> {formatDate(data.payment_startDate,data.payment_endDate)} </div>
{/if}
{#if data.examDate }
<div>สอบ: {formatDate(data.examDate)}</div>
<div><span class="pr-1 font-semibold">สอบ :</span> {formatDate(data.examDate)}</div>
{/if}
</div>
{/if}
@ -61,7 +61,7 @@
{/if}
{#if data.regi}
<div class="{data.regi.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium'}">สมัครสอบ</div>
<div class="{data.regi.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium pt-6'}">สมัครสอบ</div>
{#each data.regi as regi}
<hr class="border-blueGray-200 my-2" />

View file

@ -33,21 +33,21 @@
</div>
</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 class="card bg-white shadow-xl w-full p-8 max-w-4xl ">
<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>
<i class="fa-regular fa-calendar mr-4 text-blue-500"></i><span class="text-blue-500">วันประกาศ : {data.date}</span>
</div>
{#if data.announcementExam}
<div class="text-sm">
<div class="text-md card-detail p-4 mt-5 space-y-2">
{#if data.register_startDate}
<div>สมัคร: {formatDate(data.register_startDate,data.register_endDate)}</div>
<div><span class="pr-1 font-semibold ">สมัคร :</span> {formatDate(data.register_startDate,data.register_endDate)}</div>
{/if}
{#if data.payment_startDate}
<div>ชำระเงิน: {formatDate(data.payment_startDate,data.payment_endDate)} </div>
<div><span class="pr-1 font-semibold">ชำระเงิน :</span> {formatDate(data.payment_startDate,data.payment_endDate)} </div>
{/if}
{#if data.examDate }
<div>สอบ: {formatDate(data.examDate)}</div>
<div><span class="pr-1 font-semibold">สอบ :</span> {formatDate(data.examDate)}</div>
{/if}
</div>
{/if}
@ -61,7 +61,7 @@
{/each}
{/if}
{#if data.announcementExam  && data.positions}
<div class="w-12/12 text-lg font-medium">สมัครสอบ</div>
<div class="w-12/12 text-lg font-medium pt-6">สมัครสอบ</div>
{#each data.positions as p}
<hr class="border-blueGray-200 my-2" />
@ -112,4 +112,3 @@
</section>