update
This commit is contained in:
@@ -1,137 +1,92 @@
|
||||
<div class="w-[100%]">
|
||||
<div
|
||||
class="bg-white m-[16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
|
||||
<p class="leading-[30px] mb-[13px] font-bold text-[24px]"> Bài viết </p>
|
||||
{% assign no_image_url = 'no-image.png' | asset_url %}
|
||||
<div class="layout-container flex flex-col gap-4 py-4">
|
||||
|
||||
<form method="get" enctype="multipart/form-data" action="/"
|
||||
class="border border-[#F6F6F6] m-[12px_0_16px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
|
||||
<input type="text" name="q" id="keyword" value="" placeholder=""
|
||||
class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
||||
<input type="submit" value="Tìm kiếm"
|
||||
class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
|
||||
</form>
|
||||
<!-- 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>
|
||||
|
||||
<div class="flex items-center flex-wrap justify-between mb-[20px]">
|
||||
<div class="flex items-center">
|
||||
<select
|
||||
class="min-w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[15px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
||||
<option value=""> Chọn danh mục </option>
|
||||
<option value=""> option </option>
|
||||
</select>
|
||||
<!-- News Tabs + Cards -->
|
||||
<div class="bg-white rounded-xl p-4">
|
||||
|
||||
<a href=""
|
||||
class="leading-[35px] mr-[16px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
|
||||
Xem nội dung đang ẩn
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="leading-[35px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
|
||||
Xem nội dung nổi bật
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center font-[500] leading-[35px]">
|
||||
<a href="/article/form"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_16px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span
|
||||
class="border-[1px] border-[#0041E8] h-[13px] w-[13px] leading-[10.2px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span>Thêm nội dung mới</span>
|
||||
</a>
|
||||
|
||||
<a href="/article/category"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<i class="far fa-folder mr-2"></i>
|
||||
<span>Quản lý danh mục</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<thead class="bg-[#F6F6F6] text-[#000] text-[14px] font-500">
|
||||
<tr>
|
||||
<td width="40"> STT </td>
|
||||
<td width="130"> Ảnh </td>
|
||||
<td> Sản phẩm (Tổng số: 1.742) </td>
|
||||
<td> Thống kê </td>
|
||||
<td> Quản trị </td>
|
||||
<td width="160"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td align="center"> 1 </td>
|
||||
|
||||
<td>
|
||||
<img src="https://via.placeholder.com/880x350" class="block m-auto" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span> [#2481] </span>
|
||||
<a href=""> Elgato – Happy New Year 2024 Deal Hot Đầu Xuân </a>
|
||||
|
||||
<div class="m-[5px_0]"> Thời gian chương trình : 15.02.2024 – 24.02.2024 </div>
|
||||
|
||||
<div>
|
||||
STT
|
||||
<input type="text" value="0"
|
||||
class="w-[140px] h-[32px] border border-[#D8D8D8] m-[0_0_0_10px] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<p> - Xem: 90 </p>
|
||||
<p> - Thích: 0 </p>
|
||||
<p> - Comment: 0 </p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<p> Cập nhật: Nguyễn MInh Hải </p>
|
||||
<p> (15-02-2024, 2:57 pm) </p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="items-center flex">
|
||||
<a href="/article/form?id=1" title="Sửa lại"
|
||||
class="border-[1px] border-[#0041E8_!important] icons icon-edit mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Xem tại web"
|
||||
class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Cho nổi bật"
|
||||
class="fas fa-crown bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Hạ nổi bật"
|
||||
class="fas fa-crown bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Hạ xuống"
|
||||
class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Cho Hiển thị"
|
||||
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
|
||||
</a>
|
||||
|
||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="paging">
|
||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
||||
<a href="" class="current">1</a>
|
||||
<a href="">2</a>
|
||||
<a href="">3</a>
|
||||
<a href="">4</a>
|
||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user