minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive

Browse Source
This commit is contained in:
nguyen van thai
2024-07-08 17:38:54 +07:00
parent 76b2fa4771
commit 08ad924483
8 changed files with 253 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page/layouts/Default.vue
+2
View File
@@ -51,6 +51,7 @@ const LAYOUT_PARSE = computed(() => {
<style lang="scss" scoped>
.page_container {
// padding: 20px 0;
&.full-size-page {
width: 100%;
}
@@ -65,6 +66,7 @@ const LAYOUT_PARSE = computed(() => {
&.center-layout {
max-width: 1385px;
padding: 0 12px;
margin: auto;
}
}
components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue
+25 -25
View File
@@ -8,18 +8,18 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
<div class="main-footer-container">
<div class="footer-centertab">
<div>
<div class="footer-navigation-container">
<div class="footer-navigation-container md:block hidden">
<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-container md:grid-cols-2 grid-cols-1">
<div class="md:order-1 order-2">
<h3 class="md:text-left text-center">BÁO GIẤY</h3>
<div class="footer-contact">
<div>
<div class="md:justify-start justify-center">
<div>
<span><Icon name="material-symbols:call-outline" /></span>
<span>0123456789</span>
@@ -30,31 +30,31 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
</div>
</div>
<div class="footer-contact-buynow">
<div class="footer-contact-buynow md:justify-start justify-center">
<img src="~/assets/images/tienphong/muabaogiay-footer.png" alt="" />
</div>
</div>
</div>
<div>
<h3>THEO DÕI TRÊN MẠNG XÃ HỘI</h3>
<div class="md:order-2 order-1">
<h3 class="md:text-left text-center md:!border-#3d3d3d !border-transparent">THEO DÕI TRÊN MẠNG XÃ HỘI</h3>
<div class="footer-socials">
<div>
<div class="flex flex-wrap md:gap-50px gap-32px md:justify-start justify-center">
<div>
<span><Icon name="ic:baseline-facebook" /></span>
<span>facebook.com/vpress</span>
<span class="md:inline hidden">facebook.com/vpress</span>
</div>
<div>
<span><Icon name="uil:youtube" /></span>
<span>youtube.com/vpress</span>
<span class="md:inline hidden">youtube.com/vpress</span>
</div>
<div>
<span><Icon name="ic:baseline-tiktok" /></span>
<span>tiktok.com/vpress</span>
<span class="md:inline hidden">tiktok.com/vpress</span>
</div>
<div>
<span><Icon name="arcticons:zalo" /></span>
<span>zalo.vn/vpress</span>
<span class="md:inline hidden">zalo.vn/vpress</span>
</div>
</div>
</div>
@@ -62,9 +62,9 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
</div>
<div class="footer-ads">
<h3>LIÊN HỆ QUẢNG CÁO</h3>
<h3 class="md:text-left text-center">LIÊN HỆ QUẢNG CÁO</h3>
<div class="footer-ads-container">
<div class="footer-ads-container flex-wrap lg:gap-60px gap-20px md:flex-row flex-col">
<div class="align-items-center">
<span><Icon name="material-symbols:call-outline" /></span>
<span class="flex flex-column">
@@ -89,26 +89,26 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
<div>
<div>
<div class="flex justify-between items-end">
<div class="w-1/2">
<div class="flex-1 flex md:justify-start justify-center">
<div>
<img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="" />
</div>
</div>
<div class="footer-bottomtab-relations w-1/2">
<div class="footer-bottomtab-relations">
<!-- <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 space-y-10px">
<div class="flex justify-between md:flex-row flex-col gap-20px footer-bottomtab-description md:text-left text-center">
<div class="flex-1 space-y-10px">
<p>© Bản quyền thuộc báo điện tử <span class="fw-bold">....</span></p>
<p><span class="fw-bold">Tổng Biên tập</span>: ...</p>
<p>Tòa soạn: Hà Nội - Điện thoại: 0123456789</p>
<p>Email: <span class="fw-bold">online.vpress@gmail.com</span> - Hotline: <span class="fw-bold">0123456789</span></p>
</div>
<div class="w-1/2 space-y-10px">
<div class="flex-1 space-y-10px">
<p>Giấy phép số <span class="fw-bold">...</span>, cấp ngày ....</p>
<p>Cơ quan chủ quản: <span class="fw-bold">....</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>
@@ -147,7 +147,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
.footer-contact-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
// grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 22px;
gap: 60px;
border-bottom: 1px solid #ed1c24;
@@ -189,9 +189,9 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
.footer-socials {
margin-top: 20px;
> div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 55px;
// display: grid;
// grid-template-columns: repeat(2, minmax(0, 1fr));
// gap: 55px;
> div {
display: flex;
align-items: flex-end;
@@ -213,7 +213,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
> div {
display: flex;
align-items: center;
gap: 60px;
// gap: 60px;
> div {
display: flex;
align-items: flex-end;
components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
+124 -37
View File
@@ -8,16 +8,16 @@ const currentDateTime = ref<string>("");
onMounted(() => {
currentDateTime.value = dayjs().format("dddd, DD/MM/YYYY, HH:mm");
});
const showMenuMobile = ref(false)
</script>
<template>
<header id="header" class="main-header">
<div class="main-header-topbar ">
<div class="main-header-topbar lg:block hidden">
<div class="flex items-center !py-3px">
<time class="text-capitalize text-white text-12px" :datetime="currentDateTime">{{ currentDateTime }} GMT+7</time>
<div class="main-header-topbar-listag">
</div>
<div class="main-header-topbar-listag"></div>
<div class="main-header-topbar-infor flex items-center">
<div>
<div class="text-white text-12px">
@@ -34,10 +34,10 @@ onMounted(() => {
</div>
</div>
</div>
<div class="main-header-centerbar">
<div class="main-header-centerbar lg:block hidden">
<div class="flex items-center">
<div class="main-header-logo">
<nuxt-link to="/"><img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="logo"></nuxt-link>
<nuxt-link to="/"><img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="logo" /></nuxt-link>
</div>
<div class="main-header-control">
<div class="main-header-relations">
@@ -51,14 +51,14 @@ onMounted(() => {
</div>
</div>
</div>
<div class="main-ads">
<div class="main-ads lg:block hidden">
<div class="main-ads-container">
<div class="main-ads-content">
<img src="~/assets/images/tienphong/main-ads.png" alt="">
<img src="~/assets/images/tienphong/main-ads.png" alt="" />
</div>
</div>
</div>
<div class="main-header-control">
<div class="main-header-control lg:block hidden">
<div class="header-control-container !py-2">
<div>
<div class="header-control_tag">
@@ -72,22 +72,67 @@ onMounted(() => {
<Icon name="material-symbols-light:search" />
</div>
<div>
<img src="http://picsum.photos/1024/600?random=1" width="40" height="40" class="rounded-circle" alt="">
<img src="http://picsum.photos/1024/600?random=1" width="40" height="40" class="rounded-circle" alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="main-header-mobile px-3 lg:hidden block">
<div class="flex items-center justify-between py-4 border-b-1px border-solid border-#000">
<div class="main-header-mobile-logo">
<nuxt-link to="/"><img class="w-128px" src="~/assets/images/tienphong/logo.png" alt="logo" /></nuxt-link>
</div>
<div class="main-header-mobile-control flex gap-20px">
<button class="bg-transparent" @click="showMenuMobile = true">
<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 0.75C0 0.375 0.328125 0 0.75 0H20.25C20.625 0 21 0.375 21 0.75C21 1.17188 20.625 1.5 20.25 1.5H0.75C0.328125 1.5 0 1.17188 0 0.75ZM0 8.25C0 7.875 0.328125 7.5 0.75 7.5H20.25C20.625 7.5 21 7.875 21 8.25C21 8.67188 20.625 9 20.25 9H0.75C0.328125 9 0 8.67188 0 8.25ZM20.25 16.5H0.75C0.328125 16.5 0 16.1719 0 15.75C0 15.375 0.328125 15 0.75 15H20.25C20.625 15 21 15.375 21 15.75C21 16.1719 20.625 16.5 20.25 16.5Z"
fill="black"
/>
</svg>
</button>
<button class="bg-transparent">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7656 22.7344L17.1094 16.125C18.6094 14.3906 19.4531 12.1875 19.4531 9.75C19.4531 4.40625 15.0469 0 9.70312 0C4.3125 0 0 4.40625 0 9.75C0 15.1406 4.35938 19.5 9.70312 19.5C12.0938 19.5 14.2969 18.6562 16.0312 17.1562L22.6406 23.8125C22.8281 23.9531 23.0156 24 23.25 24C23.4375 24 23.625 23.9531 23.7656 23.8125C24.0469 23.5312 24.0469 23.0156 23.7656 22.7344ZM9.75 18C5.15625 18 1.5 14.2969 1.5 9.75C1.5 5.20312 5.15625 1.5 9.75 1.5C14.2969 1.5 18 5.20312 18 9.75C18 14.3438 14.2969 18 9.75 18Z" fill="black"/>
</svg>
</button>
</div>
</div>
</div>
<!-- navigation header -->
<div class="main-header-mobile-navigation fixed inset-0 bg-white z-999" v-if="showMenuMobile">
<div class="main-header-mobile px-3">
<div class="flex items-center justify-between py-4">
<div class="main-header-mobile-logo" @click="showMenuMobile = false">
<nuxt-link to="/"><img class="w-128px" src="~/assets/images/tienphong/logo.png" alt="logo" /></nuxt-link>
</div>
<div class="main-header-mobile-control flex gap-20px">
<button class="bg-transparent" @click="showMenuMobile = false">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>
</button>
</div>
</div>
</div>
<div class="p-3">
<AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT']" />
</div>
</div>
</header>
</template>
<style lang="scss" scoped>
<style lang="scss">
.main-header {
.main-header-topbar {
background: #ED1C24;
>div {
background: #ed1c24;
> div {
max-width: 1385px;
padding: 5px 15px;
padding: 5px 20px;
margin: 0 auto;
justify-content: space-between;
}
@@ -112,7 +157,7 @@ onMounted(() => {
> div {
max-width: 1385px;
margin: 0 auto;
padding: 0px 15px;
padding: 0px 20px;
}
.main-header-control {
flex: 1;
@@ -130,13 +175,15 @@ onMounted(() => {
.main-ads {
max-width: 1385px;
margin: 0px auto;
padding: 20px 0px;
padding: 20px 20px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
.main-ads-content {
width: 970px;
height: 250px;
width: 100%;
max-width: 970px;
// height: 250px;
text-align: center;
display: flex;
flex-direction: column;
@@ -149,7 +196,7 @@ onMounted(() => {
.header-control-container {
max-width: 1385px;
margin: 0px auto 10px auto;
padding: 10px 0px;
padding: 10px 20px;
border-bottom: 1px solid #000000;
> div {
display: flex;
@@ -164,27 +211,27 @@ onMounted(() => {
position: relative;
height: 30px;
label {
font-size: 12px;
font-size: 12px;
text-transform: uppercase;
padding: 0 16px 0 12px;
display: flex;
align-items: center;
height: 100%;
margin: 0;
border: 1px solid #000;
line-height: 1.8;
font-weight: 300;
align-items: center;
height: 100%;
margin: 0;
border: 1px solid #000;
line-height: 1.8;
font-weight: 300;
}
&::after {
position: absolute;
content: "";
display: block;
width: 12px;
height: 100%;
background-color: #ed1c24;
left: -12px;
top: 0;
}
&::after {
position: absolute;
content: "";
display: block;
width: 12px;
height: 100%;
background-color: #ed1c24;
left: -12px;
top: 0;
}
}
&_article {
flex: 1;
@@ -211,5 +258,45 @@ onMounted(() => {
}
}
}
.main-header-mobile-navigation {
& > div > nav > div {
justify-content: flex-start;
}
& .navigation-container {
flex-direction: column;
gap: 0px;
width: 100%;
align-items: start;
& > .navigation-branch {
width: 100%;
border-top: 1px solid #dee2e6;
&:first-child {
border: transparent;
}
& > .navigation-item {
width: 100%;
height: 100%;
& > a {
font-family: "Gelasio", serif !important;
text-transform: uppercase;
font-weight: 800!important;
display: block;
font-size: 16px;
padding: 8px 0;
width: 100%;
height: 100%;
}
}
}
}
}
}
</style>
</style>