This commit is contained in:
nguyen van thai
2024-07-16 11:37:38 +07:00
parent 5f72a107ce
commit 174a596db9
4 changed files with 146 additions and 3 deletions
@@ -19,11 +19,83 @@ console.log(currentArticle.value, 'currentArticle')
</div> -->
<h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
<div v-html="currentArticle.detail"></div>
</div>
</template>
<style scoped lang="scss">
.breadcrumb {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
&__list {
margin: 0;
padding: 0px;
display: flex;
overflow-x: auto;
gap: 1.5rem;
align-items: center;
font-size: 0.875rem;
line-height: 1.25rem;
&__item {
display: inline-block;
position: relative;
&__title {
margin: 0;
font-size: 18px;
color: #000;
font-weight: 500;
text-transform: uppercase;
line-height: 180%;
}
// &:first-child {
// color: blue;
// }
&:not(:first-child):before {
content: "\\";
position: absolute;
left: -18px;
}
}
}
.article-card-default__topic {
position: relative;
// background-color: #151411;
display: inline-block;
h5 {
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
// color: #fff;
padding: 0 12px;
height: 100%;
margin: 0;
border: 1px solid #000;
line-height: 180%;
font-weight: 300;
}
&::after {
position: absolute;
content: "";
display: block;
width: 12px;
height: 100%;
background-color: #ed1c24;
left: -12px;
top: 0;
}
}
}
.content {
width: auto;
}
@@ -18,13 +18,83 @@ console.log(currentArticle.value, 'currentArticle')
<div class="px-44px pb-30px my-30px max-w-660px mx-auto border-b-1px border-#000">
</div> -->
<h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
<div v-html="currentArticle.detail"></div>
</div>
</template>
<style scoped lang="scss">
.breadcrumb {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
&__list {
margin: 0;
padding: 0px;
display: flex;
overflow-x: auto;
gap: 1.5rem;
align-items: center;
font-size: 0.875rem;
line-height: 1.25rem;
&__item {
display: inline-block;
position: relative;
&__title {
margin: 0;
font-size: 18px;
color: #000;
font-weight: 500;
text-transform: uppercase;
line-height: 180%;
}
// &:first-child {
// color: blue;
// }
&:not(:first-child):before {
content: "\\";
position: absolute;
left: -18px;
}
}
}
.article-card-default__topic {
position: relative;
// background-color: #151411;
display: inline-block;
h5 {
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
// color: #fff;
padding: 0 12px;
height: 100%;
margin: 0;
border: 1px solid #000;
line-height: 180%;
font-weight: 300;
}
&::after {
position: absolute;
content: "";
display: block;
width: 12px;
height: 100%;
background-color: #ed1c24;
left: -12px;
top: 0;
}
}
}
.center-y {
width: auto;
}
@@ -29,7 +29,7 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
<nuxt-link class="font-raleway text-18px font-500 leading-180% uppercase" :to="`/${category.code}`">{{ category.title }}</nuxt-link>
</li>
</ul>
<h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
<div class="video-content" v-html="currentArticle.detail"></div>
</div>
</template>