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
assets/styles/style.scss
+14 -1
View File
@@ -180,4 +180,17 @@ div[layout="ARTICLE_PAGE"] {
@apply mt-12 first:mt-0; @apply mt-12 first:mt-0;
} }
} }
@media (max-width: 640px) {
.collection-container {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
& > article.basic-article {
flex-direction: row!important;
& > .basic-article_thumbnail {
width: 50%!important;
}
}
}
}
components/dynamic-page/page-component/templates/articles/cards/Audio.vue
+11 -9
View File
@@ -21,7 +21,7 @@ const parseData = computed(() => {
const result = getInputValue(props.dataResult, "OBJECT"); const result = getInputValue(props.dataResult, "OBJECT");
switch (result?.contentType) { switch (result?.contentType) {
case 1: case 1:
type.value = ""; type.value = "Default";
// type.value = "Image"; // type.value = "Image";
break; break;
case 2: case 2:
@@ -54,8 +54,8 @@ const parseData = computed(() => {
<article class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']"> <article class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
<img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" /> <img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" />
<div class="card-audio__content"> <div class="card-audio__content">
<span> <span class="flex justify-center">
<template v-if="type === 'Image'"> <template v-if="['Image', 'Default', 'Infographics', 'Emagazine'].includes(type)">
<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M25.25 0.5H7.25C5.98438 0.5 5 1.53125 5 2.75V14.75C5 16.0156 5.98438 17 7.25 17H25.25C26.4688 17 27.5 16.0156 27.5 14.75V2.75C27.5 1.53125 26.4688 0.5 25.25 0.5ZM10.9531 3.5C11.75 3.5 12.4531 4.20312 12.4531 5C12.4531 5.84375 11.7969 6.5 10.9531 6.5C10.1094 6.5 9.45312 5.84375 9.45312 5C9.45312 4.20312 10.1562 3.5 10.9531 3.5ZM23.6562 13.625C23.5156 13.8594 23.2344 14 23 14H9.5C9.17188 14 8.9375 13.8594 8.79688 13.625C8.70312 13.3438 8.70312 13.0625 8.89062 12.8281L12.1719 8.32812C12.3125 8.14062 12.5 8 12.7812 8C13.0156 8 13.2031 8.14062 13.3438 8.32812L14.4219 9.78125L17.375 5.375C17.4688 5.14062 17.7031 5 17.9844 5C18.2188 5 18.4531 5.14062 18.5938 5.375L23.6094 12.875C23.75 13.0625 23.75 13.3906 23.6562 13.625ZM21.875 19.25H6.125C4.25 19.25 2.75 17.75 2.75 15.875V4.625C2.75 4.01562 2.23438 3.5 1.625 3.5C0.96875 3.5 0.5 4.01562 0.5 4.625V15.875C0.5 19.0156 2.98438 21.5 6.125 21.5H21.875C22.4844 21.5 23 21.0312 23 20.375C23 19.7656 22.4844 19.25 21.875 19.25Z" d="M25.25 0.5H7.25C5.98438 0.5 5 1.53125 5 2.75V14.75C5 16.0156 5.98438 17 7.25 17H25.25C26.4688 17 27.5 16.0156 27.5 14.75V2.75C27.5 1.53125 26.4688 0.5 25.25 0.5ZM10.9531 3.5C11.75 3.5 12.4531 4.20312 12.4531 5C12.4531 5.84375 11.7969 6.5 10.9531 6.5C10.1094 6.5 9.45312 5.84375 9.45312 5C9.45312 4.20312 10.1562 3.5 10.9531 3.5ZM23.6562 13.625C23.5156 13.8594 23.2344 14 23 14H9.5C9.17188 14 8.9375 13.8594 8.79688 13.625C8.70312 13.3438 8.70312 13.0625 8.89062 12.8281L12.1719 8.32812C12.3125 8.14062 12.5 8 12.7812 8C13.0156 8 13.2031 8.14062 13.3438 8.32812L14.4219 9.78125L17.375 5.375C17.4688 5.14062 17.7031 5 17.9844 5C18.2188 5 18.4531 5.14062 18.5938 5.375L23.6094 12.875C23.75 13.0625 23.75 13.3906 23.6562 13.625ZM21.875 19.25H6.125C4.25 19.25 2.75 17.75 2.75 15.875V4.625C2.75 4.01562 2.23438 3.5 1.625 3.5C0.96875 3.5 0.5 4.01562 0.5 4.625V15.875C0.5 19.0156 2.98438 21.5 6.125 21.5H21.875C22.4844 21.5 23 21.0312 23 20.375C23 19.7656 22.4844 19.25 21.875 19.25Z"
@@ -63,11 +63,16 @@ const parseData = computed(() => {
/> />
</svg> </svg>
</template> </template>
</span> <template v-if="['Postcard', 'Video'].includes(type)">
<svg width="28" height="18" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5 2.25V15.75C18.5 17.0156 17.4688 18 16.25 18H2.75C1.48438 18 0.5 17.0156 0.5 15.75V2.25C0.5 1.03125 1.48438 0 2.75 0H16.25C17.4688 0 18.5 1.03125 18.5 2.25ZM27.5 3V15.0469C27.5 16.2188 26.0938 16.9219 25.1094 16.2656L20 12.7031V5.34375L25.1094 1.78125C26.0938 1.125 27.5 1.82812 27.5 3Z" fill="white"/>
</svg>
<div class="card-audio__type-category"> </template>
</span>
<div class="card-audio__type-category" >
<div class="card-audio__type" v-if="type">{{ type }}</div> <div class="card-audio__type" v-if="type">{{ type }}</div>
<nuxt-link to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ <nuxt-link v-if="parseData.category" to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
parseData?.category?.title parseData?.category?.title
}}</nuxt-link> }}</nuxt-link>
</div> </div>
@@ -78,9 +83,6 @@ const parseData = computed(() => {
</div> </div>
</article> </article>
<div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div> <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
<!-- <div>
aaaaaaa
</div> -->
</template> </template>
<style lang="scss"> <style lang="scss">
components/dynamic-page/page-component/templates/articles/cards/Card.vue
+12 -1
View File
@@ -60,7 +60,7 @@ const parseData = computed(() => {
}}</span> }}</span>
<nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link> <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
</div> </div>
<p class="mb-0 line-clamp" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']"> <p class="mb-0 line-clamp-5" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
<template v-if="parseData"> <template v-if="parseData">
{{ parseData.intro?.replace(/<[^>]+>/g, "") }} {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
</template> </template>
@@ -239,5 +239,16 @@ p {
height: 100px; height: 100px;
display: block; display: block;
} }
@media (max-width: 640px) {
padding-left: 0px!important;
padding-right: 0px!important;
border: 0px solid transparent!important;
flex-direction: column !important;
& .basic-article_thumbnail {
width: 100% !important;
}
}
} }
</style> </style>
components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue
+12
View File
@@ -111,6 +111,18 @@ const mapActivesToItems = (index: number) => {
-moz-column-count: 4; -moz-column-count: 4;
gap: 16px; gap: 16px;
@media (min-width: 640px) and (max-width: 1024px) {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
@media (max-width: 640px) {
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}
.wrap { .wrap {
position: relative; position: relative;
width: 100%; width: 100%;
components/dynamic-page/page-section/layouts/none/Default.vue
+53 -46
View File
@@ -166,8 +166,9 @@ const CLASS_FOR_SECTION = computed(() => {
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
_classForSection = { _classForSection = {
section_layout: "section_layout three_col_layout", section_layout: "section_layout twelve_col_layout",
0: "col-span-2", 0: "sm:col-span-8 col-span-12",
1: "sm:col-span-4 col-span-12",
}; };
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
@@ -178,8 +179,9 @@ const CLASS_FOR_SECTION = computed(() => {
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
_classForSection = { _classForSection = {
section_layout: "section_layout six_col_layout", section_layout: "section_layout grid-cols-12",
1: "col-span-5", 0: "lg:col-span-2 lg:block hidden",
1: "lg:col-span-10 col-span-12",
}; };
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]:
@@ -202,7 +204,7 @@ const CLASS_FOR_SECTION = computed(() => {
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
_classForSection = { _classForSection = {
section_layout: "section_layout twelve_col_layout", section_layout: "section_layout grid-cols-12 123",
0: "col-span-2", 0: "col-span-2",
1: "col-span-5", 1: "col-span-5",
2: "col-span-3", 2: "col-span-3",
@@ -217,7 +219,10 @@ const CLASS_FOR_SECTION = computed(() => {
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
_classForSection = { _classForSection = {
section_layout: "section_layout three_col_layout", section_layout: "section_layout grid-cols-12",
0: "sm:col-span-4 col-span-12",
1: "sm:col-span-4 col-span-12",
2: "sm:col-span-4 col-span-12"
}; };
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
@@ -239,15 +244,19 @@ const CLASS_FOR_SECTION = computed(() => {
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
_classForSection = { _classForSection = {
section_layout: "section_layout six_col_layout", section_layout: "section_layout grid-cols-12",
1: "col-span-4", 0: "lg:col-span-2 md:col-span-6 col-span-12 lg:order-1 md:order-2 order-2",
1: "lg:col-span-8 md:col-span-12 col-span-12 lg:order-2 md:order-1 order-1",
2: "lg:col-span-2 md:col-span-6 col-span-12 lg:order-3 md:order-3 order-3",
}; };
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
_classForSection = { _classForSection = {
section_layout: "section_layout six_col_layout", section_layout: "section_layout grid-cols-12",
1: "col-span-2", 0: "col-span-2 lg:block hidden",
2: "col-span-3", 1: "lg:col-span-4 md:col-span-5 col-span-12",
2: "lg:col-span-6 md:col-span-7 col-span-12",
}; };
break; break;
default: default:
@@ -295,8 +304,6 @@ const mapActivesToItems = (index: number) => {
:key="index" :key="index"
:class="['border-custom', CLASS_FOR_SECTION[index]]" :class="['border-custom', CLASS_FOR_SECTION[index]]"
:style="mapActivesToItems(index)['div.section_child']" :style="mapActivesToItems(index)['div.section_child']"
@dragover.prevent
@drop.stop.prevent="dropPlacementInSection($event, index, position.data)"
> >
<RecusiveSection :type="position.type" :id="position.data" :section="props.section" /> <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
</div> </div>
@@ -366,39 +373,39 @@ const mapActivesToItems = (index: number) => {
&.twelve_col_layout { &.twelve_col_layout {
grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-columns: repeat(12, minmax(0, 1fr));
} }
.col-span-2 { // .col-span-2 {
grid-column: span 2 / span 2; // grid-column: span 2 / span 2;
} // }
.col-span-3 { // .col-span-3 {
grid-column: span 3 / span 3; // grid-column: span 3 / span 3;
} // }
.col-span-4 { // .col-span-4 {
grid-column: span 4 / span 4; // grid-column: span 4 / span 4;
} // }
.col-span-5 { // .col-span-5 {
grid-column: span 5 / span 5; // grid-column: span 5 / span 5;
} // }
.col-span-6 { // .col-span-6 {
grid-column: span 6 / span 6; // grid-column: span 6 / span 6;
} // }
.col-span-7 { // .col-span-7 {
grid-column: span 7 / span 7; // grid-column: span 7 / span 7;
} // }
.col-span-8 { // .col-span-8 {
grid-column: span 8 / span 8; // grid-column: span 8 / span 8;
} // }
.col-span-9 { // .col-span-9 {
grid-column: span 9 / span 9; // grid-column: span 9 / span 9;
} // }
.col-span-10 { // .col-span-10 {
grid-column: span 10 / span 10; // grid-column: span 10 / span 10;
} // }
.col-span-11 { // .col-span-11 {
grid-column: span 11 / span 11; // grid-column: span 11 / span 11;
} // }
.col-span-12 { // .col-span-12 {
grid-column: span 12 / span 12; // grid-column: span 12 / span 12;
} // }
.border-custom { .border-custom {
border-color: #e5e5e5 !important; border-color: #e5e5e5 !important;
} }
components/dynamic-page/page/layouts/Default.vue
+2
View File
@@ -51,6 +51,7 @@ const LAYOUT_PARSE = computed(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.page_container { .page_container {
// padding: 20px 0;
&.full-size-page { &.full-size-page {
width: 100%; width: 100%;
} }
@@ -65,6 +66,7 @@ const LAYOUT_PARSE = computed(() => {
&.center-layout { &.center-layout {
max-width: 1385px; max-width: 1385px;
padding: 0 12px;
margin: auto; 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="main-footer-container">
<div class="footer-centertab"> <div class="footer-centertab">
<div> <div>
<div class="footer-navigation-container"> <div class="footer-navigation-container md:block hidden">
<div> <div>
<AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT']" /> <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT']" />
</div> </div>
</div> </div>
<div class="footer-contact-container"> <div class="footer-contact-container md:grid-cols-2 grid-cols-1">
<div> <div class="md:order-1 order-2">
<h3>BÁO GIẤY</h3> <h3 class="md:text-left text-center">BÁO GIẤY</h3>
<div class="footer-contact"> <div class="footer-contact">
<div> <div class="md:justify-start justify-center">
<div> <div>
<span><Icon name="material-symbols:call-outline" /></span> <span><Icon name="material-symbols:call-outline" /></span>
<span>0123456789</span> <span>0123456789</span>
@@ -30,31 +30,31 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
</div> </div>
</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="" /> <img src="~/assets/images/tienphong/muabaogiay-footer.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
<div> <div class="md:order-2 order-1">
<h3>THEO DÕI TRÊN MẠNG XÃ HỘI</h3> <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 class="footer-socials">
<div> <div class="flex flex-wrap md:gap-50px gap-32px md:justify-start justify-center">
<div> <div>
<span><Icon name="ic:baseline-facebook" /></span> <span><Icon name="ic:baseline-facebook" /></span>
<span>facebook.com/vpress</span> <span class="md:inline hidden">facebook.com/vpress</span>
</div> </div>
<div> <div>
<span><Icon name="uil:youtube" /></span> <span><Icon name="uil:youtube" /></span>
<span>youtube.com/vpress</span> <span class="md:inline hidden">youtube.com/vpress</span>
</div> </div>
<div> <div>
<span><Icon name="ic:baseline-tiktok" /></span> <span><Icon name="ic:baseline-tiktok" /></span>
<span>tiktok.com/vpress</span> <span class="md:inline hidden">tiktok.com/vpress</span>
</div> </div>
<div> <div>
<span><Icon name="arcticons:zalo" /></span> <span><Icon name="arcticons:zalo" /></span>
<span>zalo.vn/vpress</span> <span class="md:inline hidden">zalo.vn/vpress</span>
</div> </div>
</div> </div>
</div> </div>
@@ -62,9 +62,9 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
</div> </div>
<div class="footer-ads"> <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"> <div class="align-items-center">
<span><Icon name="material-symbols:call-outline" /></span> <span><Icon name="material-symbols:call-outline" /></span>
<span class="flex flex-column"> <span class="flex flex-column">
@@ -89,26 +89,26 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
<div> <div>
<div> <div>
<div class="flex justify-between items-end"> <div class="flex justify-between items-end">
<div class="w-1/2"> <div class="flex-1 flex md:justify-start justify-center">
<div> <div>
<img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="" /> <img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="" />
</div> </div>
</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/sinhvien-logo.png" alt="" />
<img src="~/assets/images/tienphong/hht-online-logo.png" alt="" /> <img src="~/assets/images/tienphong/hht-online-logo.png" alt="" />
<img src="~/assets/images/tienphong/tamviet-logo.png" alt="" /> --> <img src="~/assets/images/tienphong/tamviet-logo.png" alt="" /> -->
</div> </div>
</div> </div>
<div class="flex justify-between items-end footer-bottomtab-description"> <div class="flex justify-between md:flex-row flex-col gap-20px footer-bottomtab-description md:text-left text-center">
<div class="w-1/2 space-y-10px"> <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>© 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><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>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> <p>Email: <span class="fw-bold">online.vpress@gmail.com</span> - Hotline: <span class="fw-bold">0123456789</span></p>
</div> </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>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ơ 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> <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 { .footer-contact-container {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); // grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 22px; margin-top: 22px;
gap: 60px; gap: 60px;
border-bottom: 1px solid #ed1c24; border-bottom: 1px solid #ed1c24;
@@ -189,9 +189,9 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
.footer-socials { .footer-socials {
margin-top: 20px; margin-top: 20px;
> div { > div {
display: grid; // display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); // grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 55px; // gap: 55px;
> div { > div {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@@ -213,7 +213,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
> div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 60px; // gap: 60px;
> div { > div {
display: flex; display: flex;
align-items: flex-end; 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(() => { onMounted(() => {
currentDateTime.value = dayjs().format("dddd, DD/MM/YYYY, HH:mm"); currentDateTime.value = dayjs().format("dddd, DD/MM/YYYY, HH:mm");
}); });
const showMenuMobile = ref(false)
</script> </script>
<template> <template>
<header id="header" class="main-header"> <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"> <div class="flex items-center !py-3px">
<time class="text-capitalize text-white text-12px" :datetime="currentDateTime">{{ currentDateTime }} GMT+7</time> <time class="text-capitalize text-white text-12px" :datetime="currentDateTime">{{ currentDateTime }} GMT+7</time>
<div class="main-header-topbar-listag"> <div class="main-header-topbar-listag"></div>
</div>
<div class="main-header-topbar-infor flex items-center"> <div class="main-header-topbar-infor flex items-center">
<div> <div>
<div class="text-white text-12px"> <div class="text-white text-12px">
@@ -34,10 +34,10 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="main-header-centerbar"> <div class="main-header-centerbar lg:block hidden">
<div class="flex items-center"> <div class="flex items-center">
<div class="main-header-logo"> <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>
<div class="main-header-control"> <div class="main-header-control">
<div class="main-header-relations"> <div class="main-header-relations">
@@ -51,14 +51,14 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="main-ads"> <div class="main-ads lg:block hidden">
<div class="main-ads-container"> <div class="main-ads-container">
<div class="main-ads-content"> <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>
</div> </div>
<div class="main-header-control"> <div class="main-header-control lg:block hidden">
<div class="header-control-container !py-2"> <div class="header-control-container !py-2">
<div> <div>
<div class="header-control_tag"> <div class="header-control_tag">
@@ -72,22 +72,67 @@ onMounted(() => {
<Icon name="material-symbols-light:search" /> <Icon name="material-symbols-light:search" />
</div> </div>
<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>
</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> </header>
</template> </template>
<style lang="scss" scoped> <style lang="scss">
.main-header { .main-header {
.main-header-topbar { .main-header-topbar {
background: #ED1C24; background: #ed1c24;
>div { > div {
max-width: 1385px; max-width: 1385px;
padding: 5px 15px; padding: 5px 20px;
margin: 0 auto; margin: 0 auto;
justify-content: space-between; justify-content: space-between;
} }
@@ -112,7 +157,7 @@ onMounted(() => {
> div { > div {
max-width: 1385px; max-width: 1385px;
margin: 0 auto; margin: 0 auto;
padding: 0px 15px; padding: 0px 20px;
} }
.main-header-control { .main-header-control {
flex: 1; flex: 1;
@@ -130,13 +175,15 @@ onMounted(() => {
.main-ads { .main-ads {
max-width: 1385px; max-width: 1385px;
margin: 0px auto; margin: 0px auto;
padding: 20px 0px; padding: 20px 20px;
border-top: 1px solid #000000; border-top: 1px solid #000000;
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
.main-ads-content { .main-ads-content {
width: 970px; width: 100%;
height: 250px; max-width: 970px;
// height: 250px;
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -149,7 +196,7 @@ onMounted(() => {
.header-control-container { .header-control-container {
max-width: 1385px; max-width: 1385px;
margin: 0px auto 10px auto; margin: 0px auto 10px auto;
padding: 10px 0px; padding: 10px 20px;
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
> div { > div {
display: flex; display: flex;
@@ -164,27 +211,27 @@ onMounted(() => {
position: relative; position: relative;
height: 30px; height: 30px;
label { label {
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
padding: 0 16px 0 12px; padding: 0 16px 0 12px;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
margin: 0; margin: 0;
border: 1px solid #000; border: 1px solid #000;
line-height: 1.8; line-height: 1.8;
font-weight: 300; 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 { &_article {
flex: 1; 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>