update
This commit is contained in:
@@ -1,163 +0,0 @@
|
||||
<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]"> Danh mục nội dung </p>
|
||||
|
||||
<div class="flex items-center justify-end font-[500] leading-[35px] mb-[20px]">
|
||||
<a href="/article/category-add"
|
||||
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 danh mục mới</span>
|
||||
</a>
|
||||
|
||||
<a href="/article"
|
||||
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>Danh sách nội dung</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<table>
|
||||
<thead class="bg-[#f6f6f6] text-[#000] text-[14px] font-[500]">
|
||||
<tr>
|
||||
<td width="600"> Danh mục </td>
|
||||
<td width="50" align="center"> ID </td>
|
||||
<td width="100" align="center"> Hiển thị </td>
|
||||
<td width="100" align="center"> STT </td>
|
||||
<td width="120" align="center"> Số bài viết </td>
|
||||
<td width="172" align="center"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr align="center">
|
||||
<td align="left"> 1. Danh mục cấp 1 </td>
|
||||
|
||||
<td> 1 </td>
|
||||
|
||||
<td> child_article </td>
|
||||
|
||||
<td>
|
||||
<input type="text" value="0"
|
||||
class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
|
||||
<a href=""
|
||||
class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
|
||||
Xem
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="items-center flex justify-center">
|
||||
<a href="/article/category-add?id=1" title="Sửa lại"
|
||||
class="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="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>
|
||||
|
||||
<!-- Danh mục cấp 2 -->
|
||||
<tr align="center">
|
||||
<td align="left" style="padding-left: 30px;"> 1.1 Danh mục cấp 2 </td>
|
||||
|
||||
<td> 1 </td>
|
||||
|
||||
<td> child_article </td>
|
||||
|
||||
<td>
|
||||
<input type="text" value="0"
|
||||
class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
|
||||
<a href=""
|
||||
class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
|
||||
Xem
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="items-center flex justify-center">
|
||||
<a href="/article/category-add?id=1" title="Sửa lại"
|
||||
class="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="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>
|
||||
|
||||
<!-- Danh mục cấp 3 -->
|
||||
<tr align="center">
|
||||
<td align="left" style="padding-left: 60px;"> 1.1.1 Danh mục cấp 3 </td>
|
||||
|
||||
<td> 1 </td>
|
||||
|
||||
<td> child_article </td>
|
||||
|
||||
<td>
|
||||
<input type="text" value="0"
|
||||
class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
|
||||
<a href=""
|
||||
class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
|
||||
Xem
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="items-center flex justify-center">
|
||||
<a href="/article/category-add?id=1" title="Sửa lại"
|
||||
class="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="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>
|
||||
</div>
|
||||
158
template/article/detail.html
Normal file
158
template/article/detail.html
Normal file
@@ -0,0 +1,158 @@
|
||||
{% assign no_image_url = 'no-image.png' | asset_url %}
|
||||
{% assign _article = page.article_detail %}
|
||||
{% assign _article_cat_url = _article.categoryInfo[0].request_path | default: _article.categoryInfo[0].url %}
|
||||
{% if _article_cat_url != '' %}
|
||||
{% unless _article_cat_url contains '/' %}
|
||||
{% assign _article_cat_url = '/' | append: _article_cat_url %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
<div class="layout-container flex flex-col gap-4 py-4">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<div class="flex items-center gap-2 text-[12px] tracking-[-0.24px]">
|
||||
<a href="/article" class="text-[#888] hover:text-[#e4057c]">Tin tức</a>
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||
<span class="text-black">Chi tiết tin tức</span>
|
||||
</div>
|
||||
|
||||
<!-- Main layout: article + sidebar -->
|
||||
<div class="flex gap-5">
|
||||
|
||||
<!-- Article Content -->
|
||||
<article class="flex flex-col gap-5 w-[864px] mx-auto bg-white p-[20px] shrink-0">
|
||||
|
||||
<!-- Category badge -->
|
||||
{% if _article.categoryInfo.size > 0 %}
|
||||
<div class="inline-flex items-center self-start bg-[#eff6ff] border border-[#bedbff] rounded-full px-4 py-2">
|
||||
<a href="{{ _article_cat_url }}" class="text-[14px] text-[#364153] hover:text-[#e4057c]">
|
||||
{{ _article.categoryInfo[0].name }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="font-medium text-[32px] leading-normal text-black">
|
||||
{{ _article.title }}
|
||||
</h1>
|
||||
|
||||
<!-- Meta: date + author -->
|
||||
<div class="flex items-center gap-4 border-b border-black/10 pb-3">
|
||||
<div class="flex items-center gap-1.5 text-[14px] text-[#4a5565]">
|
||||
<svg class="w-4 h-4" 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>
|
||||
{% if _article.author != '' %}
|
||||
<div class="flex items-center gap-1.5 text-[14px] text-[#4a5565]">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
{{ _article.author }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Summary box -->
|
||||
{% if _article.summary != '' %}
|
||||
<div class="bg-[#e5e7eb] rounded-[10px] p-6 flex flex-col gap-3">
|
||||
<p class="font-bold text-[20px] leading-[30px] text-[#101828]">
|
||||
{{ _article.summary }}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Article Content -->
|
||||
<div class="font-inter text-[16px] leading-6 text-[#364153] flex flex-col gap-4 article-content">
|
||||
{{ _article.content }}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TIN KHUYẾN MẠI + VIDEO REVIEW từ bà i liên quan -->
|
||||
{% assign _promo_articles = page.home_article_list[19] %}
|
||||
{% assign _video_articles = page.home_article_list[29] %}
|
||||
{% if _promo_articles.size > 0 or _video_articles.size > 0 %}
|
||||
<div class="bg-white rounded-xl px-3 py-4 flex gap-3">
|
||||
|
||||
{% if _promo_articles.size > 0 %}
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">TIN KHUYẾN MẠI</h2>
|
||||
<div class="flex gap-3">
|
||||
{% assign _main_promo = _promo_articles[0] %}
|
||||
<a href="{{ _main_promo.url }}" class="flex flex-col gap-2 w-[481px] shrink-0">
|
||||
<div class="overflow-hidden rounded-[4px]">
|
||||
<img src="{{ _main_promo.image.thum }}" alt="{{ _main_promo.title }}"
|
||||
class="h-[300px] w-full object-cover rounded-[4px] hover:scale-105 transition-transform duration-300"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||
</div>
|
||||
<p class="text-[20px] font-bold text-black tracking-[-0.4px] leading-snug">{{ _main_promo.title }}</p>
|
||||
</a>
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
{% for _article in _promo_articles offset:1 limit:3 %}
|
||||
<a href="{{ _article.url }}" class="flex gap-3 items-start no-underline">
|
||||
<img src="{{ _article.image.thum }}" alt="{{ _article.title }}"
|
||||
class="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-[#e4057c]">
|
||||
{{ _article.title }}
|
||||
</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if _promo_articles.size > 0 and _video_articles.size > 0 %}
|
||||
<div class="w-px bg-gray-200 self-stretch"></div>
|
||||
{% endif %}
|
||||
|
||||
{% if _video_articles.size > 0 %}
|
||||
<div class="flex flex-col gap-3 w-[279px] shrink-0">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">VIDEO REVIEW</h2>
|
||||
<div class="flex flex-col gap-3">
|
||||
{% assign _main_video = _video_articles[0] %}
|
||||
<a href="{{ _main_video.url }}" class="relative block rounded-[4px] overflow-hidden group">
|
||||
<img src="{{ _main_video.image.thum }}" alt="{{ _main_video.title }}"
|
||||
class="h-[159px] w-full object-cover rounded-[4px]"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||
<div class="absolute inset-0 bg-black/20 flex items-center justify-center rounded-[4px]">
|
||||
<div
|
||||
class="w-10 h-10 bg-white/80 rounded-full flex items-center justify-center group-hover:bg-white transition-colors">
|
||||
<svg class="w-5 h-5 text-[#e4057c] ml-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% for _video in _video_articles offset:1 limit:2 %}
|
||||
<a href="{{ _video.url }}" class="flex gap-3 items-start group no-underline">
|
||||
<div class="relative w-[107px] h-[64px] rounded-[4px] overflow-hidden shrink-0">
|
||||
<img src="{{ _video.image.thum }}" alt="{{ _video.title }}" class="w-full h-full object-cover rounded-[4px]"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||
<div class="absolute inset-0 bg-black/20 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-2 group-hover:text-[#e4057c]">
|
||||
{{ _video.title }}
|
||||
</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,502 +0,0 @@
|
||||
<div class="global-breadcrumb-container">
|
||||
<a href="/article"> Bài viết </a>
|
||||
<a href=""> Form cập nhật Bài viết </a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[1141px] m-auto p-[0_15px]">
|
||||
<div class="flex flex-wrap items-start m-[16px_0]">
|
||||
<div
|
||||
class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px] flex flex-wrap items-center justify-between">
|
||||
{% if global.url contains 'id=' %}
|
||||
<p class="font-bold text-[20px]"> Sửa nội dung </p>
|
||||
|
||||
<p class="w-[100%] text-[#6B7280] order-[1]">
|
||||
ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ CHUYỆN NHỎ
|
||||
</p>
|
||||
{% else %}
|
||||
<p class="font-bold text-[20px]"> Thêm mới </p>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex items-center">
|
||||
<a href="/article/form"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span
|
||||
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span>Thêm nội dung mới</span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="far fa-folder mr-2"></span>
|
||||
<span>Quản lý danh mục</span>
|
||||
</a>
|
||||
|
||||
<a href="/article" title="Danh sách nội dung"
|
||||
class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[25%] mr-[16px]">
|
||||
<div
|
||||
class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
||||
<a href="javascript:void(0)" style="color: #Fff;background: #0041E8;"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa
|
||||
</a>
|
||||
|
||||
{% if global.url contains 'id=' %}
|
||||
<a href="/article/tag?id=1"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
|
||||
<a href="/article/relation?id=1&related_item_type=product"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên
|
||||
quan:
|
||||
Sản phẩm </a>
|
||||
<a href="/article/relation?id=1&related_item_type=product-category"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên
|
||||
quan:
|
||||
Danh mục sản phẩm </a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="post" enctype="multipart/form-data"
|
||||
class="w-[calc(100%_-25%_-16px)] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Thông tin cơ bản </p>
|
||||
|
||||
<div class="mb-[15px] flex flex-wrap items-center">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">Ảnh đại diện </p>
|
||||
|
||||
<div class="inline-block">
|
||||
<img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
|
||||
</div>
|
||||
|
||||
<label class="cursor-pointer">
|
||||
<span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
|
||||
|
||||
<input type="file" name="file_thumbnail"
|
||||
class="file-input h-[40px] rounded-[4px] file-input-bordered file-input-primary w-full max-w-xs">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px] flex flex-wrap items-center">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Ảnh nền trong chi tiết </p>
|
||||
|
||||
<div class="inline-block">
|
||||
<img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
|
||||
</div>
|
||||
|
||||
<label class="cursor-pointer">
|
||||
<span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
|
||||
|
||||
<input type="file" name="file_thumbnail"
|
||||
class="file-input h-[40px] rounded-[4px] file-input-bordered file-input-primary w-full max-w-xs">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-[12px_20px] m-[15px_0] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] rounded-[4px]">
|
||||
<p class="font-bold mb-2"> Danh mục <i class="font-[300] text-[#6B7280]"> * có thể chọn nhiều danh
|
||||
mục </i> </p>
|
||||
|
||||
<div class="overflow-auto max-h-[250px]">
|
||||
<div class="mb-1">
|
||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
||||
<input type="checkbox" value="1" class="checkbox checkbox-success">
|
||||
<b class="label-text ml-[5px]"> Danh mục cấp 1 </b>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
|
||||
<p class="font-bold mb-[5px]"> Danh mục cấp 1 </p>
|
||||
|
||||
<div class="pl-[25px]">
|
||||
<!-- KHÔNG CÓ danh mục con -->
|
||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
||||
<input type="checkbox" value="2" class="checkbox checkbox-success">
|
||||
<span class="label-text ml-[5px] text-[#6B7280]"> Danh mục
|
||||
cấp 2 </span>
|
||||
</label> <br>
|
||||
|
||||
<!-- CÓ danh mục con -->
|
||||
<div>
|
||||
<p class="font-bold mb-[5px]"> Danh mục cấp 2 </p>
|
||||
|
||||
<div class="pl-[25px]">
|
||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
||||
<input type="checkbox" value="2" class="checkbox checkbox-success">
|
||||
<span class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 3 </span>
|
||||
</label> <br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br>
|
||||
<div>
|
||||
<p class="font-bold mb-[5px]"> Danh mục cấp 2 </p>
|
||||
<div class="pl-[25px]"> <label
|
||||
class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 3 </span>
|
||||
</label> <br></div>
|
||||
</div><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- clone -->
|
||||
<div class="mb-1"> <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
||||
<input type="checkbox" value="1" class="checkbox checkbox-success">
|
||||
<b class="label-text ml-[5px]"> Danh mục cấp 1</b>
|
||||
</label> </div>
|
||||
<div class="mb-1">
|
||||
<p class="font-bold mb-[5px]"> Danh mục cấp 1 </p>
|
||||
<div class="pl-[25px]"> <label
|
||||
class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Tiêu đề </p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Link Index </p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Link tham khảo (link web ngoài nếu có) </p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Tóm tắt chính </p>
|
||||
|
||||
<textarea
|
||||
class="w-[100%] min-h-[90px] max-h-[150px] textarea textarea-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Tags (Mỗi cụm từ 1 dòng) </p>
|
||||
|
||||
<textarea
|
||||
class="w-[100%] min-h-[90px] max-h-[150px] rounded-[4px] textarea textarea-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
||||
<div class="flex flex-wrap items-center justify-between mb-3">
|
||||
<p class="font-bold text-[20px] leading-[20px]"> Mô tả (nếu có) </p>
|
||||
|
||||
<div class="flex items-center font-[500] leading-[35px]">
|
||||
<a href=""
|
||||
class="group flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="icons icon-upload group-hover:filter-none"></span>
|
||||
<span> Upload ảnh </span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<i class="far fa-folder mr-2"></i>
|
||||
<span> Quản lý </span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="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="fa fa-image mr-2"></i>
|
||||
<span> Chọn ảnh trong kho ảnh </span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex overflow-auto pb-2 w-[100%]">
|
||||
|
||||
<a href="javascript:void(0)" class="min-w-[100px] m-[10px_10px_0_0]">
|
||||
<img src="https://via.placeholder.com/2000x800" class="h-[40px] block" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<textarea id="js-desc"> </textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Thứ tự <i class="font-[300] text-[13px]"> (* số cao xếp
|
||||
trước)</i> </p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Dùng cho SEO </p>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">
|
||||
Url canonical
|
||||
<i class="text-[13px] font-[300]"> * để trống sẽ dùng link mặc định của hệ thống </i>
|
||||
</p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">
|
||||
Meta Title
|
||||
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ </i>
|
||||
</p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">
|
||||
Meta Keywords
|
||||
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ </i>
|
||||
</p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">
|
||||
Meta Description
|
||||
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ (Khuyến nghị: 160 ký tự) </i>
|
||||
</p>
|
||||
|
||||
<textarea
|
||||
class="w-[100%] min-h-[90px] max-h-[150px] rounded-[4px] textarea textarea-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px] flex items-start">
|
||||
<p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Cho phép Google Index </p>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" class="checkbox checkbox-success">
|
||||
<span class="label-text ml-[15px]"> Cho phép Google Index </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Hiển thị Mục lục đầu bài viết </p>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" class="checkbox checkbox-success">
|
||||
<span class="label-text ml-[15px]"> Cho phép hiển thị </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Quản trị hiển thị </p>
|
||||
|
||||
|
||||
<div class="mb-[15px] flex flex-wrap">
|
||||
<p class="w-[230px] font-bold">Thời gian của bài viết</p>
|
||||
|
||||
<div>
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="0" name="info[article_time_set]"
|
||||
class="radio checked:bg-blue-500" checked="">
|
||||
<span class="label-text ml-[10px]"> Thời gian tạo bài </span>
|
||||
</label>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="1" name="info[article_time_set]"
|
||||
class="radio checked:bg-blue-500">
|
||||
<span class="label-text ml-[10px]"> Chọn thời gian </span>
|
||||
</label>
|
||||
|
||||
<div class="w-[100%] hidden" id="js-publish_time">
|
||||
<div class="flex items-center m-[10px_0]">
|
||||
<div class="relative mr-[20px]">
|
||||
<i
|
||||
class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
|
||||
<input type="date" name="from_time_date" value="" placeholder="Từ ngày"
|
||||
class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
|
||||
</div>
|
||||
|
||||
<p class="mr-[10px]"> Giờ </p>
|
||||
|
||||
<select name="info[from_time_minute]" id="from_time_minute" style="width: 85px;"
|
||||
class="border border-[#d8d8d8] h-[36px] rounded-[4px] pl-[5px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
||||
<option value="00:00">00:00</option>
|
||||
<option value="00:30">00:30</option>
|
||||
<option value="01:00">01:00</option>
|
||||
<option value="01:30">01:30</option>
|
||||
<option value="02:00">02:00</option>
|
||||
<option value="02:30">02:30</option>
|
||||
<option value="03:00">03:00</option>
|
||||
<option value="03:30">03:30</option>
|
||||
<option value="04:00">04:00</option>
|
||||
<option value="04:30">04:30</option>
|
||||
<option value="05:00">05:00</option>
|
||||
<option value="05:30">05:30</option>
|
||||
<option value="06:00">06:00</option>
|
||||
<option value="06:30">06:30</option>
|
||||
<option value="07:00">07:00</option>
|
||||
<option value="07:30">07:30</option>
|
||||
<option value="08:00">08:00</option>
|
||||
<option value="08:30">08:30</option>
|
||||
<option value="09:00">09:00</option>
|
||||
<option value="09:30">09:30</option>
|
||||
<option value="10:00">10:00</option>
|
||||
<option value="10:30">10:30</option>
|
||||
<option value="11:00">11:00</option>
|
||||
<option value="11:30">11:30</option>
|
||||
<option value="12:00">12:00</option>
|
||||
<option value="12:30">12:30</option>
|
||||
<option value="13:00">13:00</option>
|
||||
<option value="13:30">13:30</option>
|
||||
<option value="14:00">14:00</option>
|
||||
<option value="14:30">14:30</option>
|
||||
<option value="15:00">15:00</option>
|
||||
<option value="15:30">15:30</option>
|
||||
<option value="16:00">16:00</option>
|
||||
<option value="16:30">16:30</option>
|
||||
<option value="17:00">17:00</option>
|
||||
<option value="17:30">17:30</option>
|
||||
<option value="18:00">18:00</option>
|
||||
<option value="18:30">18:30</option>
|
||||
<option value="19:00">19:00</option>
|
||||
<option value="19:30">19:30</option>
|
||||
<option value="20:00">20:00</option>
|
||||
<option value="20:30">20:30</option>
|
||||
<option value="21:00">21:00</option>
|
||||
<option value="21:30">21:30</option>
|
||||
<option value="22:00">22:00</option>
|
||||
<option value="22:30">22:30</option>
|
||||
<option value="23:00">23:00</option>
|
||||
<option value="23:30">23:30</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<i class="w-[100%] font-[300] text-[#6B7280] mt-[5px]">(Hiển thị cho người xem thời gian thật của
|
||||
bài thay vì thời gian cập nhật)</i>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-[15px] flex flex-wrap">
|
||||
<p class="w-[230px] font-bold"> Trạng thái </p>
|
||||
|
||||
<div>
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="0" name="info[status]" class="radio checked:bg-blue-500"
|
||||
checked="">
|
||||
<span class="label-text ml-[10px]"> Bản nháp </span>
|
||||
</label>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="1" name="info[status]" class="radio checked:bg-blue-500">
|
||||
<span class="label-text ml-[10px]"> Cho hiển thị </span>
|
||||
</label>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="-1" name="info[status]" class="radio checked:bg-blue-500">
|
||||
<span class="label-text ml-[10px]"> Chờ duyệt </span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-wrap items-center">
|
||||
<p class="w-[230px] font-bold"> Xem thử </p>
|
||||
|
||||
<a href="" target="_blank"
|
||||
class="inline-block font-[600] border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[30px] p-[0_12px] transition hover:bg-[#0041E8] hover:text-white">
|
||||
Xem bài viết tại trang web
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Cập nhật"
|
||||
class="inline-block m-[16px] cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
|
||||
|
||||
<script>
|
||||
tinymce.init({
|
||||
selector: 'textarea#js-desc',
|
||||
height: 350,
|
||||
menubar: true,
|
||||
plugins: [
|
||||
'advlist autolink lists link image charmap print preview anchor',
|
||||
'searchreplace visualblocks code fullscreen',
|
||||
'insertdatetime media table paste code help wordcount'
|
||||
],
|
||||
toolbar: 'undo redo | formatselect | ' +
|
||||
'bold italic backcolor | alignleft aligncenter ' +
|
||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
||||
'removeformat | help',
|
||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$("input[name='info[article_time_set]']").click(function () {
|
||||
if ($(this).val() == 1) $("#js-publish_time").show();
|
||||
else $("#js-publish_time").hide();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -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>
|
||||
@@ -1,124 +0,0 @@
|
||||
{% assign _check_type = global.url | split: 'related_item_type=' %}
|
||||
|
||||
<div class="global-breadcrumb-container">
|
||||
<a href="/article"> Bài viết </a>
|
||||
<a href=""> Form cập nhật Bài viết </a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[1141px] m-[0_auto_20px]">
|
||||
<div class="flex flex-wrap items-start justify-center">
|
||||
|
||||
<div
|
||||
class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] flex flex-wrap items-center justify-between">
|
||||
<p class="font-bold text-[20px]"> Sửa nội dung </p>
|
||||
|
||||
<p class="text-[#6B7280] mt-[10px] order-[1] w-[100%]"> ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ
|
||||
CHUYỆN NHỎ </p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<a href="/article/form"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span
|
||||
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span>Thêm nội dung mới</span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="far fa-folder mr-2"></span>
|
||||
<span>Quản lý danh mục</span>
|
||||
</a>
|
||||
|
||||
<a href="/article" title="Danh sách nội dung"
|
||||
class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- col left -->
|
||||
<div
|
||||
class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
||||
<a href="/article/form?id=1"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa
|
||||
</a>
|
||||
|
||||
<a href="/article/tag?id=1"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
|
||||
|
||||
<a href="/article/relation?id=1&related_item_type=product"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition" {% if
|
||||
_check_type[1]=='product' %}style="color: #Fff;background: #0041E8;" {% endif %}> Liên quan: Sản phẩm
|
||||
</a>
|
||||
|
||||
<a href="/article/relation?id=1&related_item_type=product-category"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition" {% if
|
||||
_check_type[1]=='product-category' %}style="color: #Fff;background: #0041E8;" {% endif %}> Liên quan:
|
||||
Danh mục sản phẩm </a>
|
||||
</div>
|
||||
|
||||
<!-- col right -->
|
||||
<div
|
||||
class="w-[852px] bg-white p-[16pX_16px_20px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
{% if _check_type[1] == 'product'%}
|
||||
|
||||
{% include 'article/relation_product' %}
|
||||
|
||||
{% elsif _check_type[1] == 'product-category' %}
|
||||
|
||||
{% include 'article/relation_product_category' %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Popup chọn tag -->
|
||||
<div id="popup-tag" class="hidden bg-white w-[852px] p-[16px] rounded-[15px]">
|
||||
<p class="mb-[14px] font-bold text-[20px] leading-[26px]"> Chọn Tag </p>
|
||||
|
||||
<form method="get" enctype="multipart/form-data" action="/"
|
||||
class="border border-[#F6F6F6] m-[12px_0_20px] 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="Tìm link truy cập"
|
||||
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] mr-[12px] cursor-pointer rounded-[4px]">
|
||||
<p class="inline-block leading-[36px]"> (v.d. abc-xyz) </p>
|
||||
</form>
|
||||
|
||||
<div class="order-page-table max-h-[400px] overflow-auto">
|
||||
<table class="table">
|
||||
<thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-700">
|
||||
<tr>
|
||||
<td width="40">STT</td>
|
||||
<td>Thương hiệu</td>
|
||||
<td width="80"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr align="center">
|
||||
<td class="text-center"> 1 </td>
|
||||
<td align="left"> Laptop AMD Ryzen 3 </td>
|
||||
<td>
|
||||
<a href=""
|
||||
class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_7px] text-[#fff_!important]">
|
||||
Chọn
|
||||
</a>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
@@ -1,70 +0,0 @@
|
||||
{% assign _check_type = global.url | split: 'related_item_type=' %}
|
||||
|
||||
<div class="global-breadcrumb-container">
|
||||
<a href="/article"> Bài viết </a>
|
||||
<a href="/article/form?id=1"> Form cập nhật Bài viết </a>
|
||||
<a href=""> Thêm liên quan </a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[1141px] m-auto">
|
||||
<div class="flex flex-wrap items-start m-[16px_0]">
|
||||
<div class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px]">
|
||||
<p class="font-bold text-[20px] mb-[6px] leading-[26px]"> Thêm liên quan </p>
|
||||
|
||||
<p class="w-[100%] text-[#6B7280] order-[1]">
|
||||
Thêm liên quan: HuraSoft - Test tin tức
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
||||
<a href="/article/relation-add?id=1&related_item_type=product" {% if _check_type[1] == 'product' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
|
||||
Sản phẩm (2)
|
||||
</a>
|
||||
|
||||
<a href="/article/relation-add?id=1&related_item_type=product-category" {% if _check_type[1] == 'product-category' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
|
||||
Danh mục sản phẩm (0)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if _check_type[1] == 'product' %}
|
||||
|
||||
{% include 'article/relation_product_add' %}
|
||||
|
||||
{% elsif _check_type[1] == 'product-category' %}
|
||||
|
||||
{% include 'article/relation_product_category_add' %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
|
||||
|
||||
<script>
|
||||
tinymce.init({
|
||||
selector: 'textarea#js-desc',
|
||||
height: 350,
|
||||
menubar: true,
|
||||
plugins: [
|
||||
'advlist autolink lists link image charmap print preview anchor',
|
||||
'searchreplace visualblocks code fullscreen',
|
||||
'insertdatetime media table paste code help wordcount'
|
||||
],
|
||||
toolbar: 'undo redo | formatselect | ' +
|
||||
'bold italic backcolor | alignleft aligncenter ' +
|
||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
||||
'removeformat | help',
|
||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$("input[name='info[article_time_set]']").click(function(){
|
||||
if($(this).val() == 1) $("#js-publish_time").show();
|
||||
else $("#js-publish_time").hide();
|
||||
}) ;
|
||||
});
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
<div class="flex flex-wrap items-center justify-between">
|
||||
<p class="font-bold leading-[20px] text-[20px] mr-3 mb-[13px]"> Danh sách liên quan: HuraSoft - Test tin tức </p>
|
||||
|
||||
<a href="/article/relation-add?id=1&related_item_type=product" class="flex items-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mb-[13px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span> Thêm liên quan mới </span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="order-page-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="40"> STT </td>
|
||||
<td width="70"> Ảnh </td>
|
||||
<td width="270"> Tên </td>
|
||||
<td> Thông tin bán hàng </td>
|
||||
<td width="70"> Cài đặt </td>
|
||||
<td > Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr align="center">
|
||||
<td> 1 </td>
|
||||
|
||||
<td> <img src="https://via.placeholder.com/500x500" class="block"> </td>
|
||||
|
||||
<td align="left">
|
||||
<a href=""> CPU Intel Pentium Gold G6405 (Intel LGA1200 - 2 Core - 4 Thread - Base 4.1Ghz - Cache 4MB </a>
|
||||
</td>
|
||||
|
||||
<td align="left">
|
||||
<p> - Mã kho : <b> CPUI0132 </b> </p>
|
||||
<p> - Lượt xem: <b> 21577 </b> </p>
|
||||
<p> - Giá bán : <b class="text-[red]"> 1.999.000 vnđ </b> </p>
|
||||
<p> - Kho hàng : <b> 3 </b> </p>
|
||||
<p> - Bảo hành : <b> 36 Tháng </b> </p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<p class="mb-[5px]"> STT </p>
|
||||
<input type="text" value="0" class="w-[100%] text-center h-[34px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="flex items-center flex-wrap justify-center">
|
||||
<a href="" class="inline-block text-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mr-[5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Bỏ lựa chọn
|
||||
</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]"></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>
|
||||
@@ -1,78 +0,0 @@
|
||||
<div class="p-[16px] w-[852px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Chọn sản phẩm liên quan - Tổng số: 28872 </p>
|
||||
|
||||
<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)] flex items-center">
|
||||
<input type="text" name="q" id="keyword" value="" placeholder="Tìm sản phẩm liên quan" class="w-[245px] h-[36px] border border-[#D8D8D8] mr-[10px] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
||||
|
||||
<p class="mr-[10px]"> Chọn danh mục </p>
|
||||
|
||||
<select class="w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[10px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
||||
<option value=""> Tất cả sản phẩm </option>
|
||||
<option value=""> option </option>
|
||||
</select>
|
||||
|
||||
<select class="w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[10px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
||||
<option value=""> Thương hiệu </option>
|
||||
<option value=""> option </option>
|
||||
</select>
|
||||
|
||||
<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>
|
||||
|
||||
<a href="" class="inline-block leading-[35px] mr-[16px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
|
||||
Chọn toàn bộ danh sách
|
||||
</a>
|
||||
|
||||
<div class="order-page-table m-[20px_0]">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="40"> STT </td>
|
||||
<td width="80"> Ảnh </td>
|
||||
<td> Tên </td>
|
||||
<td width="220"> Thông tin bán hàng </td>
|
||||
<td> 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>
|
||||
<a href=""> CPU Intel Pentium Gold G6405 Intel LGA1200 - 2 Core - 4 Thread - Base 4.1Ghz - Cache 4MB </a>
|
||||
<p> Cập nhật: Hôm nay, 11:11 am </p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
- Mã kho : <b> CPUI0132 </b> <br>
|
||||
- Lượt xem: <b> 21577 </b> <br>
|
||||
- Giá bán : <b> 1.999.000 vnđ </b> <br>
|
||||
- Kho hàng : <b> 3 </b> <br>
|
||||
- Bảo hành : <b> 36 Tháng </b>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
@@ -1,53 +0,0 @@
|
||||
<div class="flex flex-wrap items-center justify-between">
|
||||
<p class="font-bold leading-[20px] text-[20px] mr-3 mb-[13px]"> Danh sách liên quan: HuraSoft - Test tin tức </p>
|
||||
|
||||
<a href="/article/relation-add?id=1&related_item_type=product-category"
|
||||
class="flex items-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mb-[13px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span
|
||||
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span> Thêm liên quan mới </span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<table>
|
||||
<thead class="bg-[#f6f6f6] text-[#f6f6f6] font-700 text-[14px]">
|
||||
<tr>
|
||||
<td width="40"> STT </td>
|
||||
<td> Tên </td>
|
||||
<td width="120"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr align="center">
|
||||
<td> 1 </td>
|
||||
|
||||
<td align="left">
|
||||
<p class="mb-[7px]"> Laptop - Tablet - Mobile </p>
|
||||
|
||||
<p class="mr-[10px] inline-block"> STT </p>
|
||||
<input type="text" value="0"
|
||||
class="w-[70px] text-center h-[34px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href=""
|
||||
class="block text-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Bỏ lựa chọn
|
||||
</a>
|
||||
</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>
|
||||
@@ -1,60 +0,0 @@
|
||||
<form method="post" enctype="multipart/form-data" class="p-[16px] w-[852px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[20px]"> Chọn danh mục liên quan </p>
|
||||
|
||||
<div class="order-page-table table-vertical-inherit">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td> Danh mục </td>
|
||||
<td width="140"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> 1 Danh mục cấp 1 </td>
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
|
||||
<p class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#000] rounded-[4px] p-[0_5px]"> Đã chọn </p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Danh mục cấp 2 -->
|
||||
<tr>
|
||||
<td style="padding-left: 30px;"> 1.1 Danh mục cấp 2 </td>
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Danh mục cấp 3 -->
|
||||
<tr>
|
||||
<td style="padding-left: 50px;"> 1.1.1 Danh mục cấp 3 </td>
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Danh mục cấp 4 -->
|
||||
<tr>
|
||||
<td style="padding-left: 70px;"> 1.1.1.1 Danh mục cấp 4 </td>
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,123 +0,0 @@
|
||||
<div class="global-breadcrumb-container">
|
||||
<a href="/article"> Bài viết </a>
|
||||
<a href=""> Form cập nhật Bài viết </a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[1141px] m-[0_auto_20px]">
|
||||
<div class="flex flex-wrap items-start justify-center">
|
||||
|
||||
<div class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] flex flex-wrap items-center justify-between">
|
||||
<p class="font-bold text-[20px]"> Sửa nội dung </p>
|
||||
|
||||
<p class="text-[#6B7280] mt-[10px] order-[1] w-[100%]"> ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ CHUYỆN NHỎ </p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<a href="/article/form" class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span>Thêm nội dung mới</span>
|
||||
</a>
|
||||
|
||||
<a href="" class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="far fa-folder mr-2"></span>
|
||||
<span>Quản lý danh mục</span>
|
||||
</a>
|
||||
|
||||
<a href="/article" title="Danh sách nội dung" class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- col left -->
|
||||
<div class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
||||
<a href="/article/form?id=1" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa </a>
|
||||
|
||||
{% if global.url contains 'id=' %}
|
||||
<a href="javascript:void(0)" style="color: #Fff;background: #0041E8;" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
|
||||
<a href="/article/relation?id=1&related_item_type=product" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên quan: Sản phẩm </a>
|
||||
<a href="/article/relation?id=1&related_item_type=product-category" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên quan: Danh mục sản phẩm </a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- col right -->
|
||||
<form method="post" enctype="multipart/form-data" class="w-[852px] bg-white p-[16pX_16px_20px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
|
||||
<a href="#popup-tag" data-fancybox class="inline-block border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn tag mới
|
||||
</a>
|
||||
|
||||
<div class="order-page-table mt-[13px]">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="70"> STT </td>
|
||||
<td> Tag </td>
|
||||
<td width="70"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr align="center">
|
||||
<td> 1 </td>
|
||||
<td align="left"> Laptop GTX 1050 </td>
|
||||
<td>
|
||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<hr class="border-[4px] border-[#FAFAFB] m-[16px_-16px]">
|
||||
|
||||
<input name="commit" type="submit" value="Cập nhật" class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Popup chọn tag -->
|
||||
<div id="popup-tag" class="hidden bg-white w-[852px] p-[16px] rounded-[15px]">
|
||||
<p class="mb-[14px] font-bold text-[20px] leading-[26px]"> Chọn Tag </p>
|
||||
|
||||
<form method="get" enctype="multipart/form-data" action="/" class="border border-[#F6F6F6] m-[12px_0_20px] 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="Tìm link truy cập" 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] mr-[12px] cursor-pointer rounded-[4px]">
|
||||
<p class="inline-block leading-[36px]"> (v.d. abc-xyz) </p>
|
||||
</form>
|
||||
|
||||
<div class="order-page-table max-h-[400px] overflow-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="40">STT</td>
|
||||
<td>Thương hiệu</td>
|
||||
<td width="80"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr align="center">
|
||||
<td> 1 </td>
|
||||
<td align="left"> Laptop AMD Ryzen 3 </td>
|
||||
<td>
|
||||
<a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_7px] text-[#fff_!important]">
|
||||
Chọn
|
||||
</a>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user