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>
|
||||
|
||||
@@ -1,99 +1,205 @@
|
||||
<script lang="ts" setup>
|
||||
import { CurrentDateTime, LangSwitcher, TopNavigation, Mega } from "./index";
|
||||
import dayjs from "dayjs";
|
||||
import AssignComponent from "~/components/dynamic-page/page-component/AssignComponent.vue";
|
||||
const widgetsStore = useWidgetsStore();
|
||||
const layoutstore = useLayoutStore();
|
||||
import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
|
||||
const { weather } = storeToRefs(widgetsStore);
|
||||
const { megaMenuActive } = storeToRefs(layoutstore);
|
||||
import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentKey } from "@/definitions/enum";
|
||||
|
||||
const navClass = ref("");
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 0) {
|
||||
navClass.value = "shadow-md";
|
||||
} else {
|
||||
navClass.value = "";
|
||||
}
|
||||
};
|
||||
const currentDateTime = ref<string>("");
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
await widgetsStore.fetchWeatherByLocation();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
onMounted(() => {
|
||||
currentDateTime.value = dayjs().format("dddd, DD/MM/YYYY, HH:mm");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header id="header" class="relative">
|
||||
<div class="w-full mx-auto px-4 max-w-8xl py-1">
|
||||
<div id="top-bar-inner" class="flex items-center justify-between md:justify-center md:divide-x">
|
||||
<NuxtLink to="/" id="logo" class="pr-6">
|
||||
<img src="/images/200.png" alt="logo" class="object-cover w-24" />
|
||||
</NuxtLink>
|
||||
<header id="header" class="main-header">
|
||||
<div class="main-header-topbar ">
|
||||
<div class="flex items-center">
|
||||
<time class="text-capitalize text-white" :datetime="currentDateTime">{{ currentDateTime }} GMT+7</time>
|
||||
<div class="main-header-topbar-listag">
|
||||
|
||||
<ClientOnly>
|
||||
<CurrentDateTime class="md:px-4 pt-5px" />
|
||||
</ClientOnly>
|
||||
|
||||
<div class="items-center hidden px-6 ml-auto space-x-8 lg:flex">
|
||||
</div>
|
||||
<div class="main-header-topbar-infor flex items-center">
|
||||
<div>
|
||||
<ClientOnly>
|
||||
<div v-if="weather" class="flex items-center space-x-1">
|
||||
<p class="text-l">{{ weather.location.name }}</p>
|
||||
<img :src="weather.current.condition.icon" alt="Weather Icon" class="h-8" />
|
||||
<p class="text-l">{{ weather.current.temp_c }}°C</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Đang tải thông tin thời tiết...</p>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<div class="text-white">
|
||||
<span>HOTLINE: </span>
|
||||
<a href="tel:0865015015"> 0865.015.015</a>
|
||||
<span> - </span>
|
||||
<a href="tel:0977456112">0977.456.112</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href=""><Icon class="" name="ic:baseline-facebook" /></a>
|
||||
<a href=""><Icon class="" name="ion:logo-youtube" /></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex gap-4 items-center px-4">
|
||||
<button class="outline-none flex py-2 bg-transparent">
|
||||
<Icon name="gg:search" size="18" />
|
||||
</button>
|
||||
<NuxtLink :to="`/subscriptions/paper`">
|
||||
<Icon name="material-symbols:book-4-outline" />
|
||||
</NuxtLink>
|
||||
<!-- <Auth /> -->
|
||||
<button class="outline-none flex py-2 bg-transparent">
|
||||
<Icon name="fa6-regular:circle-user" size="16" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-header-centerbar">
|
||||
<div class="flex items-center">
|
||||
<div class="main-header-logo">
|
||||
<img src="~/assets/images/tienphong/logo.png" alt="logo">
|
||||
</div>
|
||||
|
||||
<LangSwitcher class="hidden md:block px-4 pt-5px" />
|
||||
|
||||
<div class="xl:hidden block pl-4">
|
||||
<button
|
||||
type="button"
|
||||
v-show="!megaMenuActive"
|
||||
@click="layoutstore.setStatus(true)"
|
||||
class="py-1 duration-300 hover:text-blue-500 bg-transparent"
|
||||
>
|
||||
<Icon name="fa6-solid:bars" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
v-show="megaMenuActive"
|
||||
@click="layoutstore.setStatus(false)"
|
||||
class="py-1 duration-300 hover:text-red-500 bg-transparent"
|
||||
>
|
||||
<Icon name="fa6-solid:xmark" />
|
||||
</button>
|
||||
<div class="main-header-control">
|
||||
<div class="main-header-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 class="main-header-navbar">
|
||||
<AssignComponent :type="enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]]['NAVIGATION_TOP_DEFAULT']" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-ads">
|
||||
<div class="main-ads-container">
|
||||
<div class="main-ads-content">
|
||||
<img src="~/assets/images/tienphong/main-ads.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-header-control">
|
||||
<div class="header-control-container">
|
||||
<div>
|
||||
<div class="header-control_tag">
|
||||
<h5>Xu hướng</h5>
|
||||
</div>
|
||||
<div class="header-control_article">
|
||||
<h4>Thư du học sinh: Hoa Học Trò là “cánh cửa thần kỳ” dẫn tớ đến thế giới rộng lớn hơn</h4>
|
||||
</div>
|
||||
<div class="header-control_control">
|
||||
<div>
|
||||
<Icon name="material-symbols-light:search" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwdIVSqaMsmZyDbr9mDPk06Nss404fosHjLg&s" width="40" height="40" class="rounded-circle" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="top-navigation">
|
||||
<AssignComponent :type="enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP']" />
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<Mega />
|
||||
</Teleport>
|
||||
</template>
|
||||
<style></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-header {
|
||||
.main-header-topbar {
|
||||
background: #ED1C24;
|
||||
>div {
|
||||
max-width: 1385px;
|
||||
padding: 5px 15px;
|
||||
margin: 0 auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main-header-topbar-listag {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.main-header-topbar-infor {
|
||||
gap: 30px;
|
||||
a {
|
||||
color: #ffffff;
|
||||
padding: 0 6px;
|
||||
svg {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-header-centerbar {
|
||||
padding: 20px 0px;
|
||||
> div {
|
||||
max-width: 1385px;
|
||||
margin: 0 auto;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
.main-header-control {
|
||||
flex: 1;
|
||||
.main-header-relations {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
.main-header-navbar {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.main-ads {
|
||||
max-width: 1385px;
|
||||
margin: 0px auto;
|
||||
padding: 20px 0px;
|
||||
border-top: 1px solid #000000;
|
||||
border-bottom: 1px solid #000000;
|
||||
|
||||
.main-ads-content {
|
||||
width: 970px;
|
||||
height: 250px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.main-header-control {
|
||||
.header-control-container {
|
||||
max-width: 1385px;
|
||||
margin: 0px auto 10px auto;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #000000;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-control {
|
||||
&_tag {
|
||||
position: relative;
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 12px 0 12px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&_article {
|
||||
flex: 1;
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&_control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
svg {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user