feat: new layout
This commit is contained in:
MoreStrive
@@ -1,71 +1,289 @@
|
||||
<script setup lang="ts">
|
||||
import AssignComponent from "~/components/dynamic-page/page-component/AssignComponent.vue";
|
||||
import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
|
||||
import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentKey } from "@/definitions/enum";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="border-t bg-white mt-6">
|
||||
<div id="footer-desktop" class="px-4 mx-auto max-w-7xl 2xl:px-0 pt-4">
|
||||
<div class="grid gap-4 font-semibold md:grid-cols-12 text-sm mb-2">
|
||||
<div class="col-span-8">
|
||||
<AssignComponent :type="enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM']" />
|
||||
</div>
|
||||
<div class="col-span-4 grid gap-4 sm:border-l sm:pl-4 auto-rows-max">
|
||||
<div>
|
||||
<p class="mb-2 uppercase text-xl font-bold">Liên hệ</p>
|
||||
<div class="flex flex-col gap-3 whitespace-nowrap">
|
||||
<div class="flex items-center max-w-full gap-2">
|
||||
<Icon name="fa6-solid:building" />
|
||||
<span class="text-sm hover-underline" title="Trụ sở chính: T.5 93A, Thụy Khuê, TP.Hà Nội">Toà Soạn</span>
|
||||
<footer id="footer" class="main-footer">
|
||||
<div class="main-footer-container">
|
||||
<div class="footer-centertab">
|
||||
<div>
|
||||
<div class="footer-navigation-container">
|
||||
<div>
|
||||
<AssignComponent :type="enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]]['NAVIGATION_BOTTOM_DEFAULT']" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-contact-container">
|
||||
<div>
|
||||
<h3>BÁO GIẤY</h3>
|
||||
|
||||
<div class="footer-contact">
|
||||
<div>
|
||||
<div>
|
||||
<span><Icon name="material-symbols:call-outline" /></span>
|
||||
<span>024.39434341</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><Icon name="material-symbols:mail-outline" /></span>
|
||||
<span>toasoan@baotienphong.vn</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-contact-buynow">
|
||||
<img src="~/assets/images/tienphong/muabaogiay-footer.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center max-w-full gap-2">
|
||||
<Icon name="fa6-solid:envelope" />
|
||||
<a href="mailto:ktdtonline@gmail.com" class="text-sm hover-underline">
|
||||
contact@vpress.vn
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center max-w-full gap-2">
|
||||
<Icon name="fa6-solid:handshake" />
|
||||
<span class="text-sm">Hợp tác bản quyền</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3>THEO DÕI TRÊN MẠNG XÃ HỘI</h3>
|
||||
|
||||
<div class="footer-socials">
|
||||
<div>
|
||||
<div>
|
||||
<span><Icon name="ic:baseline-facebook" /></span>
|
||||
<span>facebook.com/baotienphong</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><Icon name="uil:youtube" /></span>
|
||||
<span>youtube.com/baotienphong</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><Icon name="ic:baseline-tiktok" /></span>
|
||||
<span>tiktok.com/baotienphong</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><Icon name="arcticons:zalo" /></span>
|
||||
<span>zalo.vn/baotienphong</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-neutral-500">Đường dây nóng</p>
|
||||
<div class="flex flex-col lg:(flex-row justify-between)">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-lg font-bold tracking-wide">0123456789</span>
|
||||
<p class="text-sm text-neutral-500">(Hà Nội)</p>
|
||||
|
||||
<div class="footer-ads">
|
||||
<h3>LIÊN HỆ QUẢNG CÁO</h3>
|
||||
|
||||
<div class="footer-ads-container">
|
||||
<div class="align-items-center">
|
||||
<span><Icon name="material-symbols:call-outline" /></span>
|
||||
<span class="flex flex-column">
|
||||
<span>024.39434340</span>
|
||||
<span>0909559988</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-lg font-bold tracking-wide">0123456789</span>
|
||||
<p class="text-sm text-neutral-500">(Hồ Chí Minh)</p>
|
||||
<div>
|
||||
<span><Icon name="material-symbols:mail-outline" /></span>
|
||||
<span>kinhdoanh@baotienphong.vn</span>
|
||||
</div>
|
||||
<div class="button-ads-price">
|
||||
<span><Icon name="ic:outline-format-list-bulleted" /></span>
|
||||
<span style="font-size: 16px">Bảng giá quảng cáo</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="flex flex-col items-center justify-between gap-4 my-2 sm:flex-row">
|
||||
<div class="flex items-center justify-center sm:order-1">
|
||||
<span>Hệ thống đang chạy thử nghiệm</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-4 sm:order-3">
|
||||
<a href="https://www.facebook.com" title="Theo dõi chúng tôi trên facebook" class="grid duration-300 border rounded-full w-9 h-9 border-neutral-200 text-neutral-500 place-items-center hover:bg-blue-500 hover:text-white hover:border-blue-500">
|
||||
<Icon name="fa6-brands:facebook-f" />
|
||||
</a>
|
||||
<a href="https://www.youtube.com" title="Theo dõi chúng tôi trên youtube" class="grid duration-300 border rounded-full w-9 h-9 border-neutral-200 text-neutral-500 place-items-center hover:bg-black hover:text-white hover:border-black">
|
||||
<Icon name="ion:logo-youtube" />
|
||||
</a>
|
||||
<a href="https://www.tiktok.com" title="Theo dõi chúng tôi trên tiktok" class="grid border rounded-full w-9 h-9 border-neutral-200 text-neutral-500 place-items-center hover:bg-black hover:text-white hover:border-black">
|
||||
<Icon name="fa6-brands:tiktok" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-4 sm:ml-auto sm:order-2">
|
||||
<a href="#!" class="text-sm lg:text-base text-neutral-500">RSS</a>
|
||||
</div>
|
||||
<div class="footer-bottomtab">
|
||||
<div>
|
||||
<div>
|
||||
<div class="flex justify-between items-end">
|
||||
<div class="w-1/2">
|
||||
<div>
|
||||
<img src="~/assets/images/tienphong/logo-footer.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottomtab-relations w-1/2">
|
||||
<img src="~/assets/images/tienphong/sinhvien-logo.png" alt="" />
|
||||
<img src="~/assets/images/tienphong/hht-online-logo.png" alt="" />
|
||||
<img src="~/assets/images/tienphong/tamviet-logo.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end footer-bottomtab-description">
|
||||
<div class="w-1/2">
|
||||
<p>© Bản quyền thuộc báo điện tử <span class="fw-bold">Tiền Phong</span></p>
|
||||
<p><span class="fw-bold">Tổng Biên tập</span>: LÊ XUÂN SƠN</p>
|
||||
<p>Tòa soạn: 15 Hồ Xuân Hương, Hà Nội - Điện thoại: 024.39431250</p>
|
||||
<p>Email: <span class="fw-bold">online.baotienphong@gmail.com</span> - Hotline: <span class="fw-bold">0865.015.015 - 0977.456.112</span></p>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<p>Giấy phép số <span class="fw-bold">76/GP-BTTTT</span>, cấp ngày 26/02/2020.</p>
|
||||
<p>Cơ quan chủ quản: <span class="fw-bold">Trung ương Đoàn TNCS Hồ Chí Minh</span></p>
|
||||
<p>Cấm sao chép dưới mọi hình thức nếu không có sự chấp thuận bằng văn bản</p>
|
||||
<p>Powered by Hemera Media</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-footer {
|
||||
.main-footer-container {
|
||||
background: #2b2b2b;
|
||||
padding: 54px 15px 20px 15px;
|
||||
}
|
||||
|
||||
.footer-centertab {
|
||||
margin: 0 auto;
|
||||
max-width: 1385px;
|
||||
> div {
|
||||
max-width: 1145px;
|
||||
margin-left: auto;
|
||||
padding: 0 33px;
|
||||
}
|
||||
|
||||
.footer-navigation-container {
|
||||
> div {
|
||||
border-top: 6px solid #ed1c24;
|
||||
border-bottom: 1px solid #ed1c24;
|
||||
padding: 26px 0px 33px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-top: 22px;
|
||||
gap: 60px;
|
||||
border-bottom: 1px solid #ed1c24;
|
||||
padding-bottom: 25px;
|
||||
h3 {
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #3d3d3d;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
margin-top: 20px;
|
||||
padding-left: 4px;
|
||||
.footer-contact-buynow {
|
||||
margin-top: 20px;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 50px;
|
||||
flex-wrap: wrap;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 22px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: #ffffff;
|
||||
line-height: 1.8;
|
||||
}
|
||||
svg {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-socials {
|
||||
margin-top: 20px;
|
||||
> div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 55px;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 22px;
|
||||
}
|
||||
span {
|
||||
color: #ffffff;
|
||||
line-height: 1.8;
|
||||
}
|
||||
svg {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-ads {
|
||||
margin-top: 20px;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
span {
|
||||
color: #ffffff;
|
||||
line-height: 1.8;
|
||||
}
|
||||
svg {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.button-ads-price {
|
||||
color: #ed1c24;
|
||||
font-size: 16px;
|
||||
border: 1px solid;
|
||||
padding: 4px 24px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > span:first-child {
|
||||
color: #ed1c24;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > svg {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bottomtab {
|
||||
width: 100%;
|
||||
padding: 5px 15px;
|
||||
> div {
|
||||
margin: 0 auto;
|
||||
max-width: 1385px;
|
||||
|
||||
> div {
|
||||
max-width: 1145px;
|
||||
margin-left: auto;
|
||||
padding: 0 33px;
|
||||
}
|
||||
}
|
||||
padding: 0 33px;
|
||||
padding-bottom: 80px;
|
||||
padding-top: 24px;
|
||||
.footer-bottomtab-relations {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.footer-bottomtab-description {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user