92 lines
3.5 KiB
HTML
92 lines
3.5 KiB
HTML
{% assign no_image_url = 'no-image.png' | asset_url %}
|
|
<div class="layout-container flex flex-col gap-4 py-4">
|
|
|
|
<!-- Breadcrumb -->
|
|
<div class="flex items-center gap-2 text-[12px] text-[#888]">
|
|
<a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
|
|
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<path d="M9 18l6-6-6-6" />
|
|
</svg>
|
|
<span class="text-black">Tin tức</span>
|
|
</div>
|
|
|
|
<!-- News Tabs + Cards -->
|
|
<div class="bg-white rounded-xl p-4">
|
|
|
|
<!-- Tab Navigation -->
|
|
<nav class="flex border-b border-[#e5e7eb] mb-5">
|
|
{% for _cat in page.home_article_category %}
|
|
{% assign _cat_id = _cat.id %}
|
|
<a href="{{ _cat.url }}"
|
|
class="border-b-2 border-transparent pb-2.5 pt-2 px-5 text-[13px] text-[#6a7282] uppercase tracking-[0.35px] whitespace-nowrap hover:text-[#e91e63] js-article-tab"
|
|
data-cat="{{ _cat_id }}">
|
|
{{ _cat.name }}
|
|
</a>
|
|
{% endfor %}
|
|
</nav>
|
|
|
|
<!-- News Cards - mỗi category một section, JS toggle show/hide -->
|
|
{% for _cat in page.home_article_category %}
|
|
{% assign _cat_id = _cat.id %}
|
|
{% assign _articles = page.home_article_list[_cat_id] %}
|
|
{% if _articles.size > 0 %}
|
|
<div class="js-article-section" data-cat="{{ _cat_id }}" style="display:none">
|
|
<div class="grid grid-cols-3 gap-3 mb-6">
|
|
{% for _article in _articles %}
|
|
<article class="flex flex-col gap-2">
|
|
<a href="{{ _article.url }}" class="block overflow-hidden rounded-lg">
|
|
<img src="{{ _article.image.original }}" alt="{{ _article.title }}"
|
|
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300"
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
|
</a>
|
|
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
|
|
{{ _article.title }}
|
|
</h3>
|
|
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
|
|
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" />
|
|
<path d="M16 2v4M8 2v4M3 10h18" />
|
|
</svg>
|
|
{{ _article.createDate }}
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<!-- Tab switcher script -->
|
|
<script>
|
|
(function () {
|
|
var tabs = document.querySelectorAll('.js-article-tab');
|
|
var sections = document.querySelectorAll('.js-article-section');
|
|
function activate(catId) {
|
|
tabs.forEach(function (t) {
|
|
var active = t.dataset.cat === catId;
|
|
t.classList.toggle('border-[#e91e63]', active);
|
|
t.classList.toggle('text-[#e91e63]', active);
|
|
t.classList.toggle('font-bold', active);
|
|
t.classList.toggle('border-transparent', !active);
|
|
t.classList.toggle('text-[#6a7282]', !active);
|
|
});
|
|
sections.forEach(function (s) {
|
|
s.style.display = s.dataset.cat === catId ? '' : 'none';
|
|
});
|
|
}
|
|
if (tabs.length > 0) {
|
|
activate(tabs[0].dataset.cat);
|
|
tabs.forEach(function (t) {
|
|
t.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
activate(t.dataset.cat);
|
|
});
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
</div>
|
|
|
|
|
|
</div> |