upload 28/5
This commit is contained in:
106
template/account/home.html
Normal file
106
template/account/home.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<div class="page-account bg-[#EFEFEF] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<span itemprop="name">
|
||||
Tài khoản
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-5 flex gap-[10px]">
|
||||
<div class="left w-[20%]">
|
||||
|
||||
<div class="bg-white p-2 mb-2">
|
||||
<div class="flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[50px] h-[50px] rounded-full block mr-[10px] object-contain" alt="">
|
||||
<div class="w-[calc(100%-60px)]">
|
||||
<b class="block mb-0.3">Chi phạm</b>
|
||||
<p class="text-[#707070]">Chipham2z@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/taikhoan" class="text-[#1877F2] font-bold mt-0.5 block">Xem hồ sơ</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white py-3 mb-3">
|
||||
<a href="/danh-sach-cau-hoi" class="item active flex items-center gap-[5px] p-2 mb-1">
|
||||
<i class="icon_2025 list_faq"></i>
|
||||
<span>Danh sách câu hỏi</span>
|
||||
</a>
|
||||
<a href="/danh-sach-tin-rao-vat" class="item flex items-center gap-[5px] p-2 mb-1">
|
||||
<i class="icon_2025 list_raovat"></i>
|
||||
<span>Danh sách tin rao vặt</span>
|
||||
</a>
|
||||
<a href="/danh-sach-tin-nhan" class="item flex items-center gap-[5px] p-2 mb-1">
|
||||
<i class="icon_2025 list_inbox"></i>
|
||||
<span>Danh sách tin nhắn</span>
|
||||
</a>
|
||||
<a href="/danh-sach-thong-tin-da-luu" class="item flex items-center gap-[5px] p-2 mb-1">
|
||||
<i class="icon_2025 info_save"></i>
|
||||
<span>Danh sách các thông tin đã lưu</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="right w-[80%]">
|
||||
|
||||
<div class="bg-white p-3">
|
||||
<b class="mb-5 text-xl block">Thông tin cá nhân</b>
|
||||
|
||||
<img src="../../assets/images/avartar_acc.png"
|
||||
class="block w-[120px] h-[120px] rounded-full m-[0_auto_30px_auto] object-contain" alt="">
|
||||
|
||||
<div class="w-[620px] mx-auto pb-[100px]">
|
||||
|
||||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||||
<b>Họ và tên</b>
|
||||
<b>Chi phạm</b>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||||
<b>Email</b>
|
||||
<b class="text-[#707070]">Chipham2z@gmail.com</b>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||||
<b>Số điện thoại</b>
|
||||
<b class="text-[#707070]">098.240.2013</b>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||||
<b>Ngày sinh</b>
|
||||
<b class="text-[#707070]">13/03/1999</b>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||||
<b>Tỉnh thành</b>
|
||||
<b class="text-[#707070]">Hà nội</b>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<b>Giới tính</b>
|
||||
<b class="text-[#707070]">Nữ</b>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,2 @@
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/assets/builder/index.js"></script>
|
||||
377
template/category/detail.html
Normal file
377
template/category/detail.html
Normal file
@@ -0,0 +1,377 @@
|
||||
<div class="page-category bg-[#F4F4F4]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<span itemprop="name">
|
||||
Màn hình máy tính
|
||||
</span> <i class="icon_2025 angle-right text-[#637381] ml-[12px]"></i>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/aivision.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<span itemprop="name">
|
||||
AIVISION
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="3">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="box-backgorund px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||
|
||||
<div class="flex">
|
||||
<!-- Left Sidebar - Filters -->
|
||||
<div class="w-[19%]">
|
||||
<div class="mt-3 box-filter">
|
||||
<h2 class="text-xl font-bold text-black pb-[15px] border-b-[1px] border-[#D3D3D3]">Danh mục
|
||||
sản phẩm</h2>
|
||||
<ul class="mt-2 text-base leading-8 text-black list-cate">
|
||||
<li>
|
||||
<a href="" class="active">
|
||||
Máy tính để bàn, máy tính xác tay và linh phụ kiện
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="">Máy tính xách tay (130)</a></li>
|
||||
<li><a href="">Máy chủ (120)</a></li>
|
||||
<li><a href="">Card màn hình (93)</a></li>
|
||||
<li><a href="">Ổ cứng SSD (32)</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="item-filter mt-2.5">
|
||||
<h3
|
||||
class="text-base font-bold leading-loose text-black pt-[10px] border-t-[1px] border-[#D3D3D3]">
|
||||
Lọc theo
|
||||
</h3>
|
||||
<div class="mt-1 text-base leading-8 text-black max-md:ml-2.5">
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-filter mt-2.5">
|
||||
<h3
|
||||
class="text-base font-bold leading-loose text-black pt-[10px] border-t-[1px] border-[#D3D3D3]">
|
||||
Lọc theo
|
||||
</h3>
|
||||
<div class="mt-1 text-base leading-8 text-black max-md:ml-2.5">
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-filter mt-2.5">
|
||||
<h3
|
||||
class="text-base font-bold leading-loose text-black pt-[10px] border-t-[1px] border-[#D3D3D3]">
|
||||
Lượt đánh giá
|
||||
</h3>
|
||||
<div class="mt-1 text-base leading-8 text-black max-md:ml-2.5">
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2 flex items-center"><b>1</b> <i
|
||||
class="icon-star star-small ml-1"></i></label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2 flex items-center"><b>1</b> <i
|
||||
class="icon-star star-small ml-1"></i></label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2 flex items-center"><b>1</b> <i
|
||||
class="icon-star star-small ml-1"></i></label>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="ml-5 w-[81%]">
|
||||
<div class="mt-2 mb-4 flex items-center justify-between">
|
||||
<h1 class="text-xl font-bold max-md:max-w-full">
|
||||
Máy tính để bàn, máy tính xách tay và linh phụ kiện
|
||||
</h1>
|
||||
<select name="" id=""
|
||||
class="w-[120px] border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Sắp xếp</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="product-list grid grid-cols-4 gap-[15px]">
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="box-saleoff">-20%</div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center justify-between mb-[5px]">
|
||||
<del class="old-price">16.500.000đ</del>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total-shop flex items-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
90
template/category/home.html
Normal file
90
template/category/home.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<div class="page-category mb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/danh-muc-cap1.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<span itemprop="name">
|
||||
Màn hình máy tính
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="list grid grid-cols-4 gap-[24px]">
|
||||
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
<a href="/danh-muc-cap2.html" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||
<img src="../../assets/images/category-avatar.png"
|
||||
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
496
template/classifieds/detail.html
Normal file
496
template/classifieds/detail.html
Normal file
@@ -0,0 +1,496 @@
|
||||
<div class="page-classifieds bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Tin rao vặt
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="bg-white px-3 pt-2.5 pb-12">
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="w-[40%]">
|
||||
<div class="relative">
|
||||
<div class="swiper border border-[#B1B1B1 rounded-[12px]" id="js-slider-big">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="../../assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="../../assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="../../assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="../../assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="../../assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="btn-slider-big">
|
||||
<div class="swiper-button-next right-0"></div>
|
||||
<div class="swiper-button-prev left-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-[12px]">
|
||||
<div thumbsSlider="" class="swiper mySwiper" id="js-slider-small">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item video">
|
||||
<img src="../../assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="../../assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="../../assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="../../assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="../../assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="../../assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-small" id="btn-slider-small">
|
||||
<div class="swiper-button-next right-0 w-[30px] h-[30px]"></div>
|
||||
<div class="swiper-button-prev left-0 w-[30px] h-[30px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[60%]">
|
||||
<div class="flex justify-between mb-2">
|
||||
<h1 class="text-2xl font-bold w-[calc(100%-200px)]">iphone 11 vs 11 Pro 11 Pro Max 64GB
|
||||
256GB
|
||||
likenew</h1>
|
||||
|
||||
<a href="javavsript:void(0)"
|
||||
class="flex items-center w-[150px] h-[40px] justify-center border rounded-full border-[#999999] group hover:bg-red-500">
|
||||
<span class="font-[500] mr-[5px] text-lg group-hover:text-white">Xem sau</span>
|
||||
<i class="icon_2025 heart-2 group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="box-spec">
|
||||
<div class="item flex items-center gap-[10px] mb-2">
|
||||
<span class="block w-[24px]"><i class="icon_2025 spec"></i></span>
|
||||
<span class="text-lg text-[#303030]">Cấu hình: Intel Core i5 / 8GB / 256GB /
|
||||
SSD</span>
|
||||
</div>
|
||||
<div class="item flex items-center gap-[10px] mb-2">
|
||||
<span class="block w-[24px]"><i class="icon_2025 faq"></i></span>
|
||||
<p class="text-lg text-[#303030]">Tình trạng: <span
|
||||
class="text-[var(--color-hover)]">Likenew</span></p>
|
||||
</div>
|
||||
<div class="item flex items-center gap-[10px] mb-2">
|
||||
<span class="block w-[24px]"><i class="icon_2025 map-2 ml-[2px]"></i></span>
|
||||
<p class="text-lg text-[#303030]">Địa chỉ: Quận Thanh Xuân</p>
|
||||
</div>
|
||||
<div class="item flex items-center gap-[10px] mb-2">
|
||||
<span class="block w-[24px]"><i class="icon_2025 time-big ml-[2px]" style="background-size: 200px 206px;
|
||||
background-position: -2px -62px;width: 22px;height: 22px;"></i></span>
|
||||
<p class="text-lg text-[#303030]">Ngày đăng 12/04/2025 còn <span>2</span> ngày</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-end my-4">
|
||||
<b class="mr-[10px]">Giá sản phẩm</b>
|
||||
<b class="text-[#D80A00] text-5xl">19.999.000đ</b>
|
||||
</div>
|
||||
|
||||
<a href="tel:"
|
||||
class="w-full h-[60px] block text-center leading-[60px] text-white text-xl bg-[#2EB000] mt-2 mb-1 rounded-[8px] font-bold hover:bg-green-700">
|
||||
Gọi cho người bán 098.234.****
|
||||
</a>
|
||||
|
||||
<div class="p-[15px] border border-[#d3d3d3] rounded-[12px] my-3 flex items-center">
|
||||
<div class="w-1/2 border-r-[1px] border-[#d3d3d3]">
|
||||
<div class="flex">
|
||||
<img src="../../assets/images/avartar.png" width="100%" height="100%"
|
||||
class="block w-[45px] h-[45px] object-contain rounded-full" alt="">
|
||||
<div class="ml-2">
|
||||
<div class="flex items-end">
|
||||
<b class="mr-2">Thanh Mai</b>
|
||||
<i class="icon_2025 shop-3"></i>
|
||||
</div>
|
||||
|
||||
<div class="status online flex items-center">
|
||||
<i class="w-[8px] h-[8px] block rounded-full bg-[#34a853]"></i>
|
||||
<span class="ml-1 text-[#33c600]">Đang hoạt động</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<div class="flex items-center justify-center">
|
||||
<i class="icon-star star-small mt-[2px]"></i>
|
||||
<b class="ml-1 underline">28 Đánh giá</b>
|
||||
</div>
|
||||
<p class="text-center block text-[#303030]">6 Tin đăng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center m-2 gap-[10px]">
|
||||
<a href=""
|
||||
class="px-4 py-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
|
||||
tính này còn không?</a>
|
||||
<a href=""
|
||||
class="px-4 py-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
|
||||
tính này còn không?</a>
|
||||
<a href=""
|
||||
class="px-4 py-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
|
||||
tính này còn không?</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="font-bold text-xl mb-2">Thông tin sản phẩm</h3>
|
||||
<ul class="ml-[20px]">
|
||||
<li class="list-disc">Chính sách bảo hành:>12 tháng</li>
|
||||
<li class="list-disc">Kích cỡ màn hình:>= 21 inch</li>
|
||||
<li class="list-disc">Bộ vi xử lý:Intel Core i5</li>
|
||||
<li class="list-disc">RAM:8 GB</li>
|
||||
<li class="list-disc">Card màn hình:Khác</li>
|
||||
<li class="list-disc">Ổ cứng:256 GB</li>
|
||||
<li class="list-disc">Xuất xứ:Việt Nam</li>
|
||||
<Li class="list-disc">Loại ổ cứng:SSD Thông tin sử dụng:In trên bao bì</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex mt-5 gap-[15px]">
|
||||
<div class="w-[70%]">
|
||||
<div class="box-desc bg-white p-[12px] rounded-[8px]">
|
||||
<h3 class="title text-2xl font-bold block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1]">
|
||||
Mô tả chi
|
||||
tiết</h3>
|
||||
<div id="content-desciption">
|
||||
<div class="content nd overflow-hidden">
|
||||
<p style="text-align: justify;"><strong>Laptop HP Victus 16 R0376TX AY8Z2PA
|
||||
</strong> sở
|
||||
hữu chip xử lý Intel Core i7
|
||||
13700HX cùng VGA RTX 3050 6GB để có được trải nghiệm chơi game, làm việc hiệu
|
||||
quả.
|
||||
Mẫu <a href="https://cellphones.com.vn/laptop/hp/victus.html" title="HP Victus"
|
||||
target="_blank"><strong>HP
|
||||
Victus</strong></a> này còn được trang bị màn hình 16 inch FHD 165Hz
|
||||
giúp
|
||||
tái tạo hình ảnh sắc nét, mượt mà.
|
||||
Kèm theo đó là thiết kế bền bỉ, hiện đại để có thể sử dụng ở nhiều không gian.
|
||||
</p>
|
||||
|
||||
<h2 style="scroll-margin : 154px;"
|
||||
id="laptop-hp-victus-16-r0376tx-ay8z2pa-hieu-nang-manh-me-hien-thi-an-tuong">
|
||||
<strong>
|
||||
Laptop HP Victus 16 R0376TX AY8Z2PA - Hiệu năng mạnh mẽ, hiển thị ấn tượng
|
||||
</strong>
|
||||
</h2>
|
||||
<p style="text-align: justify;">HP Victus 16 R0376TX AY8Z2PA với bộ vi xử lý và card
|
||||
đồ
|
||||
họa rời mạnh mẽ sẽ mang tới trải
|
||||
nghiệm chơi game, làm việc mượt mà, hiệu quả. Hãy cùng tìm hiểu thêm những điểm
|
||||
nổi
|
||||
bật mà mẫu laptop gaming của
|
||||
<strong> HP Victus </strong> này sở hữu trong bài viết sau.
|
||||
</p>
|
||||
<h3 style="scroll-margin : 154px;" id="nang-cao-hieu-suat-xu-ly-voi-chip-core-i7-13700hx">
|
||||
<strong> Nâng cao
|
||||
hiệu
|
||||
suất
|
||||
xử
|
||||
lý với chip Core i7 13700HX</strong>
|
||||
</h3>
|
||||
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị
|
||||
con
|
||||
chip xử lý Core i7 13700HX của
|
||||
Intel. Con chip Core i7 16 lõi, 24 luồng này sở hữu khả năng ép xung cực đại lên
|
||||
tới
|
||||
5GHz để luôn có thể xử lý dữ
|
||||
liệu trong thời gian ngắn. Với bộ nhớ đệm 30MB, hiệu suất xử lý các tác vụ phức
|
||||
tạp
|
||||
của laptop sẽ được giảm đi đáng
|
||||
kể.</p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-1.jpg"
|
||||
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
|
||||
<p style="text-align: justify;">Để nâng cao khả năng xử lý đồ hoạ, HP còn trang bị
|
||||
cho
|
||||
phiên bản <a href="https://cellphones.com.vn/laptop/hp/victus/victus-16.html"
|
||||
title="laptop Victus 16" target="_blank"><strong>laptop Victus
|
||||
16</strong></a>
|
||||
này card đồ hoạ rời NVIDIA GeForce RTX 3050 6GB GDDR6. Nhờ
|
||||
vậy mà người dùng có thể tự tin trải nghiệm các tựa game với mức cấu hình cao.
|
||||
Không
|
||||
dừng ở đó, các nhu cầu chỉnh
|
||||
sửa hình ảnh, dựng phim, tạo hình 3D,...chuyên nghiệp cũng được thực hiện mượt
|
||||
mà.
|
||||
</p>
|
||||
<h3 style="scroll-margin : 154px;" id="tich-hop-o-cung-toc-do-cao-cung-dung-luong-ram-lon">
|
||||
<strong> Tích hợp
|
||||
ổ cứng
|
||||
tốc
|
||||
độ cao cùng dung lượng RAM lớn </strong>
|
||||
</h3>
|
||||
<p style="text-align: justify;">HP Victus 16 R0376TX AY8Z2PA được trang bị sẵn 2
|
||||
thanh
|
||||
RAM chuẩn DDR5 có tốc độ bus lên
|
||||
tới 4800MT/s. Với tổng dung lượng RAM 16GB, mẫu laptop gaming HP này sẽ đáp ứng
|
||||
tốt
|
||||
nhu cầu đa nhiệm. Không chỉ các
|
||||
tác vụ cơ bản mà nhu cầu đa nhiệm nâng cao trong công việc cũng sẽ được thực
|
||||
hiện
|
||||
mượt mà mà không cần phải nâng cấp
|
||||
cấu hình. Ngoài ra, laptop HP Victus 16 R0376TX AY8Z2PA còn sở hữu một ổ cứng
|
||||
SSD
|
||||
tốc độ cao có dung lượng
|
||||
512GB. </p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-2.jpg"
|
||||
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
|
||||
<h3 style="scroll-margin : 154px;" id="thiet-ke-hien-dai-ben-bi"><strong> Thiết kế
|
||||
hiện
|
||||
đại, bền bỉ </strong></h3>
|
||||
<p style="text-align: justify;">Laptop Victus 16 R0376TX AY8Z2PA được HP thiết kế
|
||||
hướng
|
||||
tới phong cách hiện đại, tối
|
||||
giản. Tuy vậy nhưng sản phẩm vẫn mang đậm dấu ấn gaming với tông màu đen thu hút
|
||||
và
|
||||
mạnh mẽ. Kèm theo đó là một tổng
|
||||
thể chắc chắn, bền bỉ cùng phần bản lề kích thước lớn.</p>
|
||||
<p style="text-align: justify;">Với trọng lượng khoảng 2.31kg, người dùng vẫn có thể
|
||||
tiện lợi mang theo phiên bản laptop
|
||||
HP Victus này mà không gặp bất tiện. So với các mẫu laptop gaming khác, đây được
|
||||
coi
|
||||
là một điểm cộng giúp sản phẩm
|
||||
đáp ứng nhu cầu chơi game ở nhiều không gian của người dùng.</p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-3.jpg"
|
||||
alt="Thiết kế laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
|
||||
<p style="text-align: justify;">Để hỗ trợ tốt cả nhu cầu chơi game và làm việc, HP
|
||||
đã
|
||||
trang bị cho laptop Victus 16
|
||||
R0376TX AY8Z2PA bộ bàn phím Full-size. Với phần bàn phím số riêng biệt, người
|
||||
dùng
|
||||
sẽ cải thiện được tốc độ nhập
|
||||
liệu trong khi làm việc. Bàn phím của laptop còn được tích hợp hệ thống đèn nền
|
||||
RGB
|
||||
1 để hỗ trợ việc gõ phím trong
|
||||
điều kiện thiếu sáng.</p>
|
||||
<h3 style="scroll-margin : 154px;" id="hien-thi-sac-net-va-muot-ma"><strong> Hiển
|
||||
thị
|
||||
sắc nét và mượt mà </strong></h3>
|
||||
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA sở hữu không
|
||||
giản
|
||||
hiển thị cực lớn khi được trang bị
|
||||
màn hình có kích thước 16.1 inch. Kèm theo đó là độ phân giải FHD (1920 x 1080p)
|
||||
giúp nội dung hiển thị luôn có được
|
||||
độ rõ nét. Nhờ việc sử dụng tấm nền IPS, người dùng còn có thể điều chỉnh góc
|
||||
nghiêng linh hoạt mà không gây ảnh
|
||||
hưởng tới chất lượng hình ảnh.</p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-4.jpg"
|
||||
alt="Hiển thị sắc nét và mượt mà" loading="lazy"></p>
|
||||
<p style="text-align: justify;">Điểm nổi bật có trên màn hình HP Victus 16 R0376TX
|
||||
AY8Z2PA chính là tần số quét và độ
|
||||
phủ màu. Với độ phủ màu 100% sRGB, mẫu laptop gaming HP này sẽ hỗ trợ người dùng
|
||||
làm
|
||||
các công việc liên quan tới
|
||||
sáng tạo hiệu quả. Tần số quét ở mức 165Hz sẽ giúp màn hình tái hiện các chuyển
|
||||
động
|
||||
một cách uyển chuyển, mượt mà.
|
||||
</p>
|
||||
<p style="text-align: justify;">Ngoài ra, màn hình HP Victus 16 R0376TX AY8Z2PA còn
|
||||
được
|
||||
phủ lớp chống chói và có độ
|
||||
sáng 300 nits để thoải mái sử dụng ở những nơi có ánh sáng mạnh. Với chuẩn Low
|
||||
Blue
|
||||
Light, màn hình còn giảm thiểu
|
||||
lượng ánh sáng xanh phát ra để hạn chế tình trạng mỏi mắt khi sử dụng laptop
|
||||
trong
|
||||
thời gian dài.</p>
|
||||
<h3 style="scroll-margin : 154px;" id="thoi-luong-pin-dai-ket-noi-phong-phu-va-on-dinh">
|
||||
<strong> Thời lượng pin dài, kết
|
||||
nối phong phú và ổn định </strong>
|
||||
</h3>
|
||||
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị
|
||||
viên
|
||||
pin Li-ion Polymer 4-cell có dung
|
||||
lượng ở mức 70Wh. Với dung lượng này, viên pin có thể duy trì trạng thái hoạt
|
||||
động
|
||||
cho laptop lên tới nhiều giờ với
|
||||
các tác vụ hỗn hợp. Laptop còn được trang bị bộ nguồn 200W Smart AC power
|
||||
adapter để
|
||||
hỗ trợ sạc pin nhanh 50% trong
|
||||
khoảng 30 phút.</p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-5.jpg"
|
||||
alt="Thời lượng pin dài, kết nối phong phú và ổn định" loading="lazy"></p>
|
||||
<p style="text-align: justify;">Để hỗ trợ việc liên kết có dây và chia sẻ dữ liệu,
|
||||
HP
|
||||
còn trang bị cho mẫu laptop Victus
|
||||
của hàng đầy đủ các cổng kết nối thông dụng. Hai cạnh bên laptop được tích hợp
|
||||
các
|
||||
cổng USB Type-A, USB Type-C,
|
||||
RJ-45, HDMI 2.1, jack audio 3.5mm và bộ chuyển đổi điện xoay chiều thông minh.
|
||||
</p>
|
||||
<p style="text-align: justify;">Laptop Victus 16 R0376TX AY8Z2PA còn được trang bị
|
||||
card
|
||||
wireless Bluetooth 5.3 và Intel
|
||||
Wi-Fi 6E AX211 (2x2). Điều này sẽ đảm bảo được khả năng kết nối với các thiết bị
|
||||
ngoại vi, kết nối mạng ổn định,
|
||||
nhanh chóng cho laptop.</p>
|
||||
<h2 style="scroll-margin : 154px;"
|
||||
id="mua-laptop-hp-victus-16-r0376tx-ay8z2pa-gia-tot-tai-cellphones">
|
||||
<strong> Mua
|
||||
laptop HP Victus 16 R0376TX AY8Z2PA giá tốt tại CellphoneS </strong>
|
||||
</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Hãy tới ngay các cửa hàng CellphoneS trên cả
|
||||
nước để
|
||||
trải nghiệm và đặt mua <strong>
|
||||
Laptop HP Victus 16 R0376TX AY8Z2PA </strong> . Mẫu laptop gaming HP này
|
||||
còn có
|
||||
mức giá cực kỳ hấp dẫn khi đi
|
||||
kèm nhiều chương trình ưu đãi, hỗ trợ thu cũ - đổi mới,...
|
||||
</li>
|
||||
<li>
|
||||
Với chính sách hỗ trợ trả góp lãi suất thấp,
|
||||
khách hàng
|
||||
sẽ còn dễ dàng sở hữu và trải
|
||||
nghiệm chiếc laptop này. Ngoài ra, CellphoneS còn hỗ trợ giao hàng toàn quốc
|
||||
để
|
||||
khách hàng tiện lợi đặt mua dù ở nơi
|
||||
đâu.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="javascript:void(0)"
|
||||
class="more-all js-viewmore-content item-btn flex items-center mt-1 text-[#ff7a00]"
|
||||
data-content="#content-desciption">
|
||||
Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- end box desc -->
|
||||
</div>
|
||||
<div class="w-[30%]">
|
||||
<a href="" class="block">
|
||||
<img src="../../assets/images/banner_canhbao.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
var swiper_small = new Swiper("#js-slider-small", {
|
||||
loop: true,
|
||||
spaceBetween: 12,
|
||||
slidesPerView: 5,
|
||||
freeMode: true,
|
||||
watchSlidesProgress: true,
|
||||
navigation: {
|
||||
nextEl: "#btn-slider-small .swiper-button-next",
|
||||
prevEl: " #btn-slider-small .swiper-button-prev",
|
||||
},
|
||||
});
|
||||
var swiper_big = new Swiper("#js-slider-big", {
|
||||
loop: true,
|
||||
spaceBetween: 10,
|
||||
navigation: {
|
||||
nextEl: "#btn-slider-big .swiper-button-next",
|
||||
prevEl: " #btn-slider-big .swiper-button-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper_small,
|
||||
},
|
||||
});
|
||||
|
||||
collapse_content('#content-desciption', 580);
|
||||
|
||||
// show content
|
||||
function collapse_content(item, contentHeight) {
|
||||
var content = $(item).find($('.content'));
|
||||
if (content.height() >= contentHeight) {
|
||||
$(item).find($(".more-all")).css('display', 'flex');
|
||||
content.css('height', contentHeight);
|
||||
} else {
|
||||
$(this).find($(".more-all")).remove();
|
||||
content.addClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
$(".js-viewmore-content").click(function () {
|
||||
var id = $(this).attr("data-content");
|
||||
var content = $(id).find($('.content'));
|
||||
$(this).toggleClass("active");
|
||||
content.toggleClass("active");
|
||||
|
||||
if ($(this).hasClass("active")) {
|
||||
$(this).html('Thu gọn <i class="icon_2025 angle-top ml-[5px]"></i>');
|
||||
} else {
|
||||
$(this).html('Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>');
|
||||
$('html,body').animate({ scrollTop: $(content).offset().top }, 500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
392
template/classifieds/home.html
Normal file
392
template/classifieds/home.html
Normal file
@@ -0,0 +1,392 @@
|
||||
<div class="page-classifieds bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Tin rao vặt
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||
<div class="flex gap-[20px]">
|
||||
<div class="w-[20%]">
|
||||
<h3 class="text-xl uppercase my-4 font-bold">Danh mục</h3>
|
||||
<div class="list">
|
||||
<a href="" class="block mb-2.5 font-bold">Laptop văn phòng</a>
|
||||
<a href="" class=" block mb-2.5">Laptop gaming</a>
|
||||
<a href="" class="block mb-2.5">Pc gaming</a>
|
||||
<a href="" class="block mb-2.5">Máy chủ</a>
|
||||
<a href="" class="block mb-2.5">Linh kiện máy tính</a>
|
||||
<a href="" class="block mb-2.5"> Card màn hình</a>
|
||||
<a href="" class="block mb-2.5">Ổ SSD</a>
|
||||
<a href="" class="block mb-2.5"> Màn hình máy tính</a>
|
||||
<a href="" class="block mb-2.5">Bàn phím, chuột, ghế</a>
|
||||
<a href="" class="block mb-2.5">Phụ kiện laptop</a>
|
||||
<a href="" class="block mb-2.5">Phụ kiện PC</a>
|
||||
<a href="" class="block mb-2.5"> Tản nhiệt, Fan, đèn Led</a>
|
||||
<a href="" class="block mb-2.5">PS5, Game</a>
|
||||
<a href="" class="block mb-2.5">Loa, tai nghe, mic,webcam</a>
|
||||
<a href="" class="block mb-2.5">Camera, chuông, khoá</a>
|
||||
<a href="" class="block mb-2.5">Thiết bị văn phòng</a>
|
||||
<a href="" class="block mb-2.5">Thiết bị mạng, lưu trữ, phần mềm</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[80%]">
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<h2 class="text-xl font-bold">Laptop văn phòng <span class="ml-[10px]">(127)</span></h2>
|
||||
<div class="flex items-center">
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px] mr-[10px]">
|
||||
<option value="">Sắp xếp</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
|
||||
<div class="relative border w-[90px] border-[#dbdbdb] pl-[5px] h-[36px] rounded-[4px]">
|
||||
<a href="javscript:void(0)" class="flex items-center justify-center h-[36px]">
|
||||
<i class="icon_2025 sort_list mr-[5px]"></i>
|
||||
<i class="icon_2025 angle-right rotate-[90deg]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 p-[10px] bg-[#f8f8f8] flex items-center flex-wrap gap-[10px]">
|
||||
<b>Bộ lọc</b>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="list sort_list mt-3">
|
||||
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/san-pham-nguoi-ban"
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/san-pham-nguoi-ban"
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/san-pham-nguoi-ban"
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/san-pham-nguoi-ban"
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/san-pham-nguoi-ban"
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/san-pham-nguoi-ban"
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
316
template/faq/detail.html
Normal file
316
template/faq/detail.html
Normal file
@@ -0,0 +1,316 @@
|
||||
<div class="page-faq-form bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Hỏi đáp
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="w-[70%]">
|
||||
<div class="p-2.5 bg-white">
|
||||
<div class="pb-2.5 border-b-[1px] border-neutral-200">
|
||||
<h1 class="mb-1.5 text-2xl font-bold">Máy tính của mình đang bị lỗi, mình không khởi động
|
||||
lại
|
||||
được, mọi
|
||||
người ai
|
||||
biết giúp
|
||||
mình với?</h1>
|
||||
<div class="flex items-center flex-wrap">
|
||||
<div class="flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[32px] h-[32px] block object-contain" width="100%" height="100%" alt="">
|
||||
<b class="ml-[5px]">Dino</b>
|
||||
<span class="ml-[5px] text-gray-500">10:00pm 20/02/2025</span>
|
||||
</div>
|
||||
<div class="flex items-center py-2 ml-[10px]">
|
||||
<p class="mr-1">Tags:</p>
|
||||
<div class="list flex flex-wrap gap-[10px]">
|
||||
<a href=""
|
||||
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content leading-[25px] mt-3">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
|
||||
Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen
|
||||
book. It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially
|
||||
unchanged. It was popularised in the 1960s with the release of Letraset sheets
|
||||
containing Lorem Ipsum passages, and more
|
||||
recently with desktop publishing software like Aldus PageMaker including versions of
|
||||
Lorem Ipsum.</p>
|
||||
|
||||
<a href="" class="block mx-auto my-2 ">
|
||||
<img src="https://placehold.co/950x600" class="w-full h-full object-contain block m-auto"
|
||||
alt="">
|
||||
</a>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
|
||||
Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen
|
||||
book. It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially
|
||||
unchanged. It was popularised in the 1960s with the release of Letraset sheets
|
||||
containing Lorem Ipsum passages, and more
|
||||
recently with desktop publishing software like Aldus PageMaker including versions of
|
||||
Lorem Ipsum.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-comment mt-2.5 py-2.5 border-t-[1px] border-neutral-200">
|
||||
<form class="form flex gap-[20px]">
|
||||
<div class="avartar w-[60px] block h-[60px] rounded-[50%]">
|
||||
<img src="../../assets/images/avartar.png" width="100%" height="100%"
|
||||
class="block object-contain w-full h-full" alt="">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)]">
|
||||
<div
|
||||
class="relative w-full h-[120px] border-[1px] border-[#d9d9d9] rounded-[8px] overflow-hidden">
|
||||
<input type="text" class="w-full h-full rounded-[8px]" />
|
||||
|
||||
<div class="absolute right-[10px] bottom-[10px] w-[140px]">
|
||||
<div class="flex items-center gap-[10px]">
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 earth"></i>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 images"></i>
|
||||
</a>
|
||||
<button type="submit"
|
||||
class="px-5 py-0.5 text-white rounded-[4px] text-center bg-gray-400 uppercase">Gửi</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="list mt-5">
|
||||
<div class="item-review flex mb-[15px] pb-[15px]">
|
||||
<div class="w-[60px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
|
||||
alt="avartar">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)]">
|
||||
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing
|
||||
and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley
|
||||
of
|
||||
type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 like"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-review flex mb-[15px] pb-[15px]">
|
||||
<div class="w-[60px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
|
||||
alt="avartar">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)]">
|
||||
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing
|
||||
and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley
|
||||
of
|
||||
type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 like"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-reply mt-8">
|
||||
<div
|
||||
class="item-review flex pb-[30px] border-l-[1px] border-[#d4d4d4] pl-[10px]">
|
||||
<div class="w-[60px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px"
|
||||
height="75px" alt="avartar">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)] relative">
|
||||
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of
|
||||
the printing
|
||||
and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer
|
||||
took a galley
|
||||
of
|
||||
type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 like"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-[-15px] w-[25px] h-[15px] bg-[#f8f8f8] left-[10px]"
|
||||
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-review flex pb-[15px] border-l-[1px] border-[#d4d4d4] pl-[10px]">
|
||||
<div class="w-[60px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px"
|
||||
height="75px" alt="avartar">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)] relative">
|
||||
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of
|
||||
the printing
|
||||
and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer
|
||||
took a galley
|
||||
of
|
||||
type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 like"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-[-15px] w-[25px] h-[15px] bg-[#f8f8f8] left-[10px]"
|
||||
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="" class="font-bold text-[#FF7A00] hover:underline">Xem thêm 192 câu trả lời
|
||||
khác</a>
|
||||
|
||||
</div>
|
||||
<!-- form commet -->
|
||||
</div>
|
||||
</div>
|
||||
<div class=" w-[30%]">
|
||||
<div class="p-2.5 bg-white">
|
||||
<h3 class="text-xl block pb-2 border-b-[1px] border-[#95989a]">Top các câu hỏi được
|
||||
quan tâm
|
||||
</h3>
|
||||
<div class="list mt-2">
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
94
template/faq/form.html
Normal file
94
template/faq/form.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<div class="page-faq-form bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Hỏi đáp
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<h1 class="text-2xl block mb-3">Nhập câu hỏi của bạn</h1>
|
||||
|
||||
<div class="px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="w-[65%]">
|
||||
<div class="form-input faq mb-[20px]">
|
||||
<label for="" class="mb-1.5 block font-bold">Tiêu đề</label>
|
||||
<input type="text" name="title"
|
||||
class="bg-[#f8f8f8] rounded-[4px_4px_2px_2px] border-0 border-b-[1px] border-[#dddddd]"
|
||||
placeholder="Mời bạn nhập tiêu đề..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input faq mb-[20px]">
|
||||
<label for="" class="mb-1.5 block font-bold">Nội dung</label>
|
||||
|
||||
<textarea id="product-desc"> </textarea>
|
||||
</div>
|
||||
<div class="form-input faq mb-[20px]">
|
||||
<label for="" class="mb-1.5 block font-bold">Tag</label>
|
||||
<input type="text" name="title"
|
||||
class="bg-[#f8f8f8] rounded-[4px_4px_2px_2px] border-0 border-b-[1px] border-[#dddddd]"
|
||||
placeholder="Mời bạn nhập tiêu đề..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="rounded-[4px] hover:bg-purple-900 px-5 py-2 bg-[var(--color-global)] text-white">Gửi
|
||||
câu hỏi</button>
|
||||
|
||||
</div>
|
||||
<div class="w-[35%]">
|
||||
<h3 class="text-xl block pb-2 border-b-[1px] border-[#95989a]">Top các câu hỏi được quan tâm
|
||||
</h3>
|
||||
<div class="list mt-2">
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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#product-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>
|
||||
193
template/faq/home.html
Normal file
193
template/faq/home.html
Normal file
@@ -0,0 +1,193 @@
|
||||
<div class="page-faq bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Hỏi đáp
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||
<div class="flex items-center justify-between border-b-[1px] border-neutral-200 pb-2.5 ">
|
||||
<h1 class="text-2xl font-bold">Hỏi đáp</h1>
|
||||
<div class="right flex items-center">
|
||||
<form action="/search" enctype="text/plain" method="get" class="flex items-center">
|
||||
<div
|
||||
class="w-[520px] h-[45px] relative rounded-[8px] mr-[10px] input-search border border-[#dddddd]">
|
||||
|
||||
<input type="text" name="q" placeholder="Nhập địa chỉ cửa bạn để tìm cửa hàng gần nhất"
|
||||
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
|
||||
onclick="$('.autocomplete-suggestions').show();">
|
||||
<div class="absolute left-0 top-0 w-[40px] h-[45px] flex items-center justify-center"><i
|
||||
class="icon_2025 search-2 "></i></div>
|
||||
</div>
|
||||
<a href="/question-form"
|
||||
class="h-[43px] text-center leading-[43px] w-[100px] bg-blue-900 rounded-[4px] text-white font-bold hover:bg-blue-800 ">Đặt
|
||||
câu
|
||||
hỏi</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-3 flex gap-[15px]">
|
||||
<div class="w-[15%]">
|
||||
<div class="list-tab">
|
||||
<a href=""
|
||||
class="w-full bg-[var(--color-hover)] rounded-[4px] h-[40px] flex items-center px-[10px] mb-[5px]">
|
||||
<i class="block w-[20px] h-[20px] border-2 border-white text-white rounded-[50%] leading-[20px] text-center not-italic
|
||||
">?</i>
|
||||
<span class="font-bold ml-[5px] text-white ">Tất cả câu hỏi</span>
|
||||
</a>
|
||||
<a href=""
|
||||
class="w-full h-[40px] flex items-center rounded-[4px] px-[10px] group hover:bg-[var(--color-hover)] mb-[5px]">
|
||||
<i class="icon_2025 tag group-hover:brightness-0 group-hover:invert-[1] "></i>
|
||||
<span class="font-bold ml-[5px] group-hover:text-white">Tag</span>
|
||||
</a>
|
||||
<a href=""
|
||||
class="w-full h-[40px] flex items-center px-[10px] mb-[10px] group hover:bg-[var(--color-hover)]">
|
||||
<i class="icon_2025 faq group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<span class="font-bold ml-[5px] group-hover:text-white">Quy định</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[70%]">
|
||||
<div
|
||||
class="flex items-center text-lg gap-[15px] border-b-[1px] border-neutral-200 h-[40px] leading-[30px]">
|
||||
<a href="" class="block underline font-bold text-[#FF7A00] ">Câu hỏi thường gặp</a>
|
||||
<a href="" class="block hover:underline hover:font-bold hover:text-[#FF7A00] ">Mới</a>
|
||||
<a href="" class="block hover:underline hover:font-bold hover:text-[#FF7A00]">Nhiều vote
|
||||
nhất</a>
|
||||
<a href="" class="block hover:underline hover:font-bold hover:text-[#FF7A00]">Chưa trả
|
||||
lời</a>
|
||||
</div>
|
||||
<div class="list mt-3">
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
|
||||
alt="avartar">
|
||||
<div class="mt-[10px]">
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<a href="/chi-tiet-cau-hoi-dap"
|
||||
class="content mb-[5px] font-bold hover:text-[var(--color-hover)]">Lorem Ipsum is
|
||||
simply
|
||||
dummy text of the
|
||||
printing
|
||||
and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</a>
|
||||
|
||||
<div class="flex py-2">
|
||||
<p class="mr-1">Tags:</p>
|
||||
<div class="list flex flex-wrap gap-[10px]">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 view"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="padding flex items-center justify-center mt-[20px]">
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 angle-right scale-x-[-1]"></i>
|
||||
</a>
|
||||
<a href="" class="active">
|
||||
<span>1</span>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<span>2</span>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<span>3</span>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="w-[15%]">
|
||||
<b class="block mb-1 mt-[40px]">Hot tags</b>
|
||||
<div class="list">
|
||||
<div class="flex items-center mb-2">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<span>(130 câu hỏi)</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<span>(130 câu hỏi)</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<span>(130 câu hỏi)</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<span>(130 câu hỏi)</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void" class="text-blue-600 underline">Xem thêm tags >></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -6,26 +6,26 @@
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
|
||||
<img src="../../assets/images/banner-slider.png"
|
||||
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/banner-slider.png" class="block w-full h-full object-contain"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
|
||||
<img src="../../assets/images/banner-slider.png"
|
||||
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/banner-slider.png" class="block w-full h-full object-contain"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
|
||||
<img src="../../assets/images/banner-slider.png"
|
||||
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/banner-slider.png" class="block w-full h-full object-contain"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
|
||||
<img src="../../assets/images/banner-slider.png"
|
||||
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/banner-slider.png" class="block w-full h-full object-contain"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,20 +35,20 @@
|
||||
<div class="banner-right w-1/2 grid grid-cols-2 gap-[10px]">
|
||||
<a href="" class="item relative effect-image block rounded-[12px] overflow-hidden">
|
||||
<img src="../../assets/images/banner-right-slider-1.png"
|
||||
class="block w-full h-full object-contain transition-all duration-500 ease-in-out"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-full h-full object-contain transition-all duration-500 ease-in-out" width="100%"
|
||||
height="100%" alt="">
|
||||
</a>
|
||||
<a href="" class="item block effect-image rounded-[12px] overflow-hidden">
|
||||
<img src="../../assets/images/banner-right-slider-2.png"
|
||||
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/banner-right-slider-2.png" class="block w-full h-full object-contain"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
<a href="" class="item block effect-image rounded-[12px] overflow-hidden">
|
||||
<img src="../../assets/images/banner-right-slider-3.png"
|
||||
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/banner-right-slider-3.png" class="block w-full h-full object-contain"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
<a href="" class="item block effect-image rounded-[12px] overflow-hidden">
|
||||
<img src="../../assets/images/banner-right-slider-4.png"
|
||||
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/banner-right-slider-4.png" class="block w-full h-full object-contain"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,17 +74,17 @@
|
||||
|
||||
<div class="tabs-list flex items-center justify-center gap-[10px] mt-[15px]">
|
||||
<a href="javascript:void(0)"
|
||||
class="tabs-item active text-lg font-[400] px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px]">Laptop</a>
|
||||
class="tabs-item active text-lg font-[400] px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px]">Laptop</a>
|
||||
<a href="javascript:void(0)"
|
||||
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">Màn
|
||||
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">Màn
|
||||
hình</a>
|
||||
<a href="javascript:void(0)"
|
||||
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">CPU</a>
|
||||
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">CPU</a>
|
||||
<a href="javascript:void(0)"
|
||||
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">Bàn
|
||||
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">Bàn
|
||||
phím, chuột</a>
|
||||
<a href="javascript:void(0)"
|
||||
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">VGA</a>
|
||||
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">VGA</a>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-[15px]">
|
||||
@@ -264,9 +264,9 @@
|
||||
<!-- Category 1 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-1.png" class="object-contain aspect-[1.29] w-[90px]"
|
||||
alt="Laptop văn phòng" />
|
||||
alt="Laptop văn phòng" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Laptop văn phòng
|
||||
@@ -276,9 +276,9 @@
|
||||
<!-- Category 2 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-2.png" class="object-contain aspect-[0.96] w-[89px]"
|
||||
alt="Tản nhiệt, đèn" />
|
||||
alt="Tản nhiệt, đèn" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Tản nhiệt, đèn
|
||||
@@ -288,9 +288,9 @@
|
||||
<!-- Category 3 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[1111px] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-3.png"
|
||||
class="object-contain aspect-[1.06] w-[104px]" alt="Linh kiện máy tính" />
|
||||
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[1111px] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-3.png" class="object-contain aspect-[1.06] w-[104px]"
|
||||
alt="Linh kiện máy tính" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Linh kiện máy tính
|
||||
@@ -300,9 +300,9 @@
|
||||
<!-- Category 4 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-4.png"
|
||||
class="object-contain aspect-[1.24] w-[107px]" alt="Bàn phím, chuột" />
|
||||
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-4.png" class="object-contain aspect-[1.24] w-[107px]"
|
||||
alt="Bàn phím, chuột" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Bàn phím, chuột
|
||||
@@ -312,10 +312,10 @@
|
||||
<!-- Category 5 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-5.png"
|
||||
class="object-contain aspect-[1.02] rounded-[50%] w-[122px] effect-image"
|
||||
alt="Màn hình, tay treo" />
|
||||
class="object-contain aspect-[1.02] rounded-[50%] w-[122px] effect-image"
|
||||
alt="Màn hình, tay treo" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Màn hình,tay treo</p>
|
||||
@@ -324,9 +324,9 @@
|
||||
<!-- Category 6 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-6.png" class="object-contain aspect-[0.88] w-[81px]"
|
||||
alt="Lưu trữ, phần mềm" />
|
||||
alt="Lưu trữ, phần mềm" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Lưu trữ,phần mềm
|
||||
@@ -336,9 +336,9 @@
|
||||
<!-- Category 7 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] effect-image w-[120px]">
|
||||
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] effect-image w-[120px]">
|
||||
<img src="../../assets/images/icon-cate-7.png" class="object-contain aspect-[0.93] w-[92px]"
|
||||
alt="Phụ kiện laptop" />
|
||||
alt="Phụ kiện laptop" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Phụ kiện laptop
|
||||
@@ -348,9 +348,9 @@
|
||||
<!-- Category 8 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-8.png" class="object-contain w-20 aspect-[1.18]"
|
||||
alt="Phụ kiện PC" />
|
||||
alt="Phụ kiện PC" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[--color-global]">
|
||||
Phụ kiện PC
|
||||
@@ -360,9 +360,9 @@
|
||||
<!-- Category 9 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-9.png" class="object-contain aspect-[1.29] w-[90px]"
|
||||
alt="Laptop Gaming" />
|
||||
alt="Laptop Gaming" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Laptop Gaming
|
||||
@@ -372,9 +372,9 @@
|
||||
<!-- Category 10 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-10.png"
|
||||
class="object-contain aspect-[0.83] w-[85px]" alt="Phụ kiện đi kèm" />
|
||||
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-10.png" class="object-contain aspect-[0.83] w-[85px]"
|
||||
alt="Phụ kiện đi kèm" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Phụ kiện đi kèm
|
||||
@@ -384,9 +384,9 @@
|
||||
<!-- Category 11 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-11.png"
|
||||
class="object-contain aspect-[0.93] w-[100px]" alt="PC đồ hoạ, gaming" />
|
||||
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-11.png" class="object-contain aspect-[0.93] w-[100px]"
|
||||
alt="PC đồ hoạ, gaming" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
PC đồ hoạ, gaming
|
||||
@@ -396,9 +396,9 @@
|
||||
<!-- Category 12 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-start px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-12.png"
|
||||
class="object-contain aspect-[0.93] w-[100px]" alt="PC Văn phòng" />
|
||||
class="flex flex-col justify-center items-start px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-12.png" class="object-contain aspect-[0.93] w-[100px]"
|
||||
alt="PC Văn phòng" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
PC Văn phòng
|
||||
@@ -408,9 +408,9 @@
|
||||
<!-- Category 13 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-13.png"
|
||||
class="object-contain aspect-[0.95] w-[95px]" alt="Thiết bị mạng" />
|
||||
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-13.png" class="object-contain aspect-[0.95] w-[95px]"
|
||||
alt="Thiết bị mạng" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Thiết bị mạng
|
||||
@@ -420,9 +420,9 @@
|
||||
<!-- Category 14 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-6 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-14.png"
|
||||
class="object-contain aspect-[0.67] w-[67px]" alt="Loa, tai nghe, mic" />
|
||||
class="flex flex-col justify-center items-center px-6 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-14.png" class="object-contain aspect-[0.67] w-[67px]"
|
||||
alt="Loa, tai nghe, mic" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Loa, tai nghe, mic,..
|
||||
@@ -432,9 +432,9 @@
|
||||
<!-- Category 15 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-15.png"
|
||||
class="object-contain aspect-[1.15] w-[100px]" alt="Thiết bị văn phòng" />
|
||||
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-15.png" class="object-contain aspect-[1.15] w-[100px]"
|
||||
alt="Thiết bị văn phòng" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Thiết bị văn phòng
|
||||
@@ -444,9 +444,9 @@
|
||||
<!-- Category 16 -->
|
||||
<a href="" class="item">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-16.png"
|
||||
class="object-contain aspect-[1.75] w-[98px]" alt="Game pad" />
|
||||
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img src="../../assets/images/icon-cate-16.png" class="object-contain aspect-[1.75] w-[98px]"
|
||||
alt="Game pad" />
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
||||
Game pad
|
||||
@@ -474,74 +474,74 @@
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<a href=""
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
<img src="../../assets/images/logo-hacom.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
<img src="../../assets/images/logo-anphat.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
<img src="../../assets/images/logo-gearvn.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
<img src="../../assets/images/logo-hacom.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
<img src="../../assets/images/logo-anphat.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
<img src="../../assets/images/logo-gearvn.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
<img src="../../assets/images/logo-hacom.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
<img src="../../assets/images/logo-anphat.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
||||
<img src="../../assets/images/logo-gearvn.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -666,8 +666,7 @@
|
||||
<h2 class="mx-[5px] text-3xl">
|
||||
THÔNG TIN NGÀNH
|
||||
</h2>
|
||||
<div
|
||||
class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
||||
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="list mt-5">
|
||||
@@ -765,8 +764,7 @@
|
||||
<h2 class="mx-[5px] text-3xl">
|
||||
THÔNG TIN khuyến mãi
|
||||
</h2>
|
||||
<div
|
||||
class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
||||
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="list mt-5">
|
||||
@@ -863,8 +861,7 @@
|
||||
<h2 class="mx-[5px] text-3xl">
|
||||
Bản tin rao vặt
|
||||
</h2>
|
||||
<div
|
||||
class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
||||
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="list mt-5">
|
||||
@@ -893,8 +890,8 @@
|
||||
</div>
|
||||
<a href="" class="staff flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
||||
height="100%" alt="avartar">
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
||||
height="100%" alt="avartar">
|
||||
<b class="ml-[5px]">Thanh mai</b>
|
||||
</a>
|
||||
</div>
|
||||
@@ -924,8 +921,8 @@
|
||||
</div>
|
||||
<a href="" class="staff flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
||||
height="100%" alt="avartar">
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
||||
height="100%" alt="avartar">
|
||||
<b class="ml-[5px]">Thanh mai</b>
|
||||
</a>
|
||||
</div>
|
||||
@@ -955,8 +952,8 @@
|
||||
</div>
|
||||
<a href="" class="staff flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
||||
height="100%" alt="avartar">
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
||||
height="100%" alt="avartar">
|
||||
<b class="ml-[5px]">Thanh mai</b>
|
||||
</a>
|
||||
</div>
|
||||
@@ -986,8 +983,8 @@
|
||||
</div>
|
||||
<a href="" class="staff flex items-center">
|
||||
<img src="../../assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
||||
height="100%" alt="avartar">
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
||||
height="100%" alt="avartar">
|
||||
<b class="ml-[5px]">Thanh mai</b>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1010,26 +1007,26 @@
|
||||
<div class="flex gap-[8px]">
|
||||
<a href="" class="item effect-image">
|
||||
<img src="../../assets/images/banner-sale-1.png" width="100%" height="100%"
|
||||
class="object-contain w-full h-full rounded-xl" alt="">
|
||||
class="object-contain w-full h-full rounded-xl" alt="">
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img src="../../assets/images/banner-sale-2.png" width="100%" height="100%"
|
||||
class="object-contain w-full h-full rounded-xl" alt="">
|
||||
class="object-contain w-full h-full rounded-xl" alt="">
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img src="../../assets/images/banner-sale-3.png" width="100%" height="100%"
|
||||
class="object-contain w-full h-full rounded-xl" alt="">
|
||||
class="object-contain w-full h-full rounded-xl" alt="">
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img src="../../assets/images/banner-sale-4.png" width="100%" height="100%"
|
||||
class="object-contain w-full h-full rounded-xl" alt="">
|
||||
class="object-contain w-full h-full rounded-xl" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Promotions Section -->
|
||||
<div class="box-promotions mt-20">
|
||||
<div class="box-promotions my-20">
|
||||
<div class="container">
|
||||
<div class="flex justify-center text-3xl font-bold text-[var(--color-title)] uppercase">
|
||||
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
||||
@@ -1043,29 +1040,29 @@
|
||||
|
||||
<div class="list flex gap-[8px] mt-6">
|
||||
<a class="box-big w-full w-[47%] h-[365px]" href="javascript:void(0)" id="js-video"
|
||||
data-url="https://www.youtube.com/watch?v=LcQBXGLWX8I">
|
||||
data-url="https://www.youtube.com/watch?v=LcQBXGLWX8I">
|
||||
<img src="../../assets/images/promotions-big.png" width="100%" height="100%"
|
||||
class="object-cover w-full h-full rounded-xl" alt="">
|
||||
class="object-cover w-full h-full rounded-xl" alt="">
|
||||
</a>
|
||||
<div class="grid grid-cols-2 w-[53%] gap-[8px]">
|
||||
<a href="" class="item effect-image">
|
||||
<img src="../../assets/images/promotions-1.png"
|
||||
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/promotions-1.png" class="object-contain w-full h-full rounded-xl"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img src="../../assets/images/promotions-2.png"
|
||||
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/promotions-2.png" class="object-contain w-full h-full rounded-xl"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img src="../../assets/images/promotions-3.png"
|
||||
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/promotions-3.png" class="object-contain w-full h-full rounded-xl"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img src="../../assets/images/promotions-4.png"
|
||||
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
|
||||
<img src="../../assets/images/promotions-4.png" class="object-contain w-full h-full rounded-xl"
|
||||
width="100%" height="100%" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
2
template/product/detail.html
Normal file
2
template/product/detail.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/assets/builder/index.js"></script>
|
||||
243
template/product/productsave.html
Normal file
243
template/product/productsave.html
Normal file
@@ -0,0 +1,243 @@
|
||||
<div class="page-category mt-[20px] mb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/san-pham-da-luu" itemprop="item" class="nopad-l flex items-center">
|
||||
<span itemprop="name">
|
||||
Sản phẩm đã lưu
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="slider-banner">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="product-list grid grid-cols-5 gap-[15px]">
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item save">
|
||||
<a href="" class="product-image">
|
||||
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
|
||||
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
||||
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="flex items-center justify-center mt-[5px]">
|
||||
<div class="price">15.000.000đ</div>
|
||||
<del class="old-price ml-[5px]">16.500.000đ</del>
|
||||
</div>
|
||||
<div class="total-shop flex items-center justify-center">
|
||||
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
||||
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="padding flex items-center justify-center mt-[20px]">
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 angle-right scale-x-[-1]"></i>
|
||||
</a>
|
||||
<a href="" class="active">
|
||||
<span>1</span>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<span>2</span>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<span>3</span>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
504
template/repair/home.html
Normal file
504
template/repair/home.html
Normal file
@@ -0,0 +1,504 @@
|
||||
<div class="page-list-store bg-[#EFEFEF] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<span itemprop="name">
|
||||
Tìm người bán
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="box-backgorund p-[15px] rounded-[12px] mt-3.5 bg-white">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-2xl text-black font-bold">Danh sách cửa hàng</h3>
|
||||
|
||||
<div class="right flex items-center">
|
||||
<div class="w-[520px] relative rounded-[8px] mr-[15px] input-search border border-[#dddddd]">
|
||||
<form action="/search" enctype="text/plain" method="get"
|
||||
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden">
|
||||
<input type="text" name="q" placeholder="Nhập địa chỉ cửa bạn để tìm cửa hàng gần nhất"
|
||||
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
|
||||
onclick="$('.autocomplete-suggestions').show();">
|
||||
<button type="submit" class="absolute left-[10px] top-[5px] w-[40px] h-[35px] "><i
|
||||
class="icon_2025 search-2 "></i></button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<a href="javascript:void()" onclick="showFormStoreNew()"
|
||||
class="block w-[190px] h-[45px] leading-[45px] border-[1px] border-[#462f91] rounded-[8px] text-center text-[#462f91] font-[500] hover:bg-[#462f91] hover:text-white">Giới
|
||||
thiệu cửa hàng mới</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter flex items-center justify-between p-[10px] bg-[#f4f4f4] mt-[10px]">
|
||||
<div class="flex items-center">
|
||||
<a href=""
|
||||
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[var(--color-global)] text-white mr-[10px]">Gần
|
||||
tôi
|
||||
nhất</a>
|
||||
<a href=""
|
||||
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đánh
|
||||
giá tốt nhất</a>
|
||||
<a href=""
|
||||
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đã
|
||||
xem</a>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-[10px]">Lọc theo</span>
|
||||
<div class="select-two-arrow mr-[10px]">
|
||||
<select name="" id="" class="">
|
||||
<option value="">Tỉnh/Thành phố</option>
|
||||
<option value="">Hà nội</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select-two-arrow mr-[10px]">
|
||||
<select name="" id="" class="">
|
||||
<option value="">Quận/Huyện</option>
|
||||
<option value="">Hà nội</option>
|
||||
</select>
|
||||
</div>
|
||||
<select name="" id="" class="p-[10px] border-[1px] border-[#d5d5d5] rounded-[4px]">
|
||||
<option value="">Cách tôi 3km</option>
|
||||
<option value="">10km</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] flex ">
|
||||
<div class="logo w-[100px] h-[100px] border border-[#d4d4d4] mr-[10px]">
|
||||
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
|
||||
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
|
||||
</div>
|
||||
<div class="info w-[calc(100%-390px)] mr-[10px]">
|
||||
<a href="#" class="name-store line-clamp-1 font-bold mb-[3px] text-xl">
|
||||
Hanoicomputer - Công cổ phần máy tính Hà Nội
|
||||
</a>
|
||||
<a href="" class="flex items-center">
|
||||
<i class="icon_2025 shop-blue"></i>
|
||||
<span class="ml-[5px] text-[#1877f2]">Chuyên mua bán trao đổi PC, laptop,
|
||||
linh phụ kiện máy tính</span>
|
||||
</a>
|
||||
<div class="flex items-center mt-[5px]">
|
||||
<div class="flex items-center mr-[15px]">
|
||||
<div class="w-[24px]">
|
||||
<i class="icon_2025 map-2"></i>
|
||||
</div>
|
||||
<p class="ml-[5px]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh Khai, phường 6,
|
||||
quận 3, TP. Hồ
|
||||
Chí Minh</p>
|
||||
</div>
|
||||
<a href="" class="flex items-center mr-[15px]">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
|
||||
</a>
|
||||
<a href="" class="flex items-center">
|
||||
<i class="icon_2025 showroom"></i>
|
||||
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7 showroom</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="" class="flex items-center mt-[5px]">
|
||||
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
|
||||
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
|
||||
</a>
|
||||
<a href="" class="flex items-center mt-[5px]">
|
||||
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
|
||||
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- end info -->
|
||||
<div class="btn w-[270px] flex flex-col justify-between">
|
||||
<div class="top">
|
||||
<a href="javascript:void()" onclick="showReview()"
|
||||
class="text-right block underline hover:text-[#1877f2]">Đánh giá về chất
|
||||
lượng
|
||||
dịch vụ</a>
|
||||
<div class="flex items-center justify-end mt-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="mx-[5px]">4.6</span>
|
||||
<a href="javascript:void(0)" onclick="showListReview()"
|
||||
class="font-[500] underline hover:text[var(--color-hover)]">(Xem 47 đánh
|
||||
giá)</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn flex items-center gap-[10px]">
|
||||
<a href=""
|
||||
class="block border w-[50%] h-[38px] leading-[38px] text-center border-[#303030] border rounded-[4px] font-bold hover:bg-[#303030] hover:text-white">
|
||||
Lưu địa chỉ
|
||||
</a>
|
||||
<a href=""
|
||||
class="block w-[50%] h-[38px] leading-[38px] text-center bg-[#FF7A00] text-white font-bold rounded-[4px] text-center hover:bg-orange-600">Liên
|
||||
hệ</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="backgroundPopup" onclick="closeBackground()"></div>
|
||||
<div class="box-form-review hidden fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||
id="js-box-review">
|
||||
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<b class="text-center text-xl block">Đánh giá sản phẩm</b>
|
||||
<a href="javascript:void(0)" onclick="closeReview()" id="js-close-review"
|
||||
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
|
||||
</div>
|
||||
<div class="info-form-review w-[500px] mx-[auto]">
|
||||
<a href="" class="block w-[100px] h-[100px] m-[10px_auto] p-[10px] rounded-[4px] border border-[#d4d4d4]">
|
||||
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
|
||||
class="block w-full h-[100%] m-[auto] object-contain" alt="">
|
||||
</a>
|
||||
<a href="" class="text-center block mb-[10px]">Hanoicomputer - Công cổ phần máy tính Hà Nội</a>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="rating-selection">
|
||||
<input type="radio" class="rating-input" id="star5" name="rating" value="5">
|
||||
<label for="star5" class="rating-star"></label>
|
||||
|
||||
<input type="radio" class="rating-input" id="star4" name="rating" value="4">
|
||||
<label for="star4" class="rating-star"></label>
|
||||
|
||||
<input type="radio" class="rating-input" id="star3" name="rating" value="3">
|
||||
<label for="star3" class="rating-star"></label>
|
||||
|
||||
<input type="radio" class="rating-input" id="star2" name="rating" value="2">
|
||||
<label for="star2" class="rating-star"></label>
|
||||
|
||||
<input type="radio" class="rating-input" id="star1" name="rating" value="1">
|
||||
<label for="star1" class="rating-star"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</div>
|
||||
<div class="form-input mt-[20px]">
|
||||
<input type="text" name="title" placeholder="Mời bạn nhập tiêu đề..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input mt-[10px]">
|
||||
<textarea name="content" placeholder="Mời bạn chia sẻ cảm nhận..." id=""></textarea>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<input id="js-file-upload-id" type="hidden" value="">
|
||||
<div id="js-container-selector" class="mt-[10px] flex items-center">
|
||||
<a href="javascript:void(0)" class="flex items-center" id="js-select-file">
|
||||
<i class="icon_2025 upload_image"></i>
|
||||
<span class="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
|
||||
<span class="px-[5px]">(tối đa 3 ảnh)</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-[15px] flex items-center">
|
||||
<p class="mr-[10px]">Chấm điểm theo trải nghiệm cá nhân</p>
|
||||
<input type="number" name="point" min="1" max="10"
|
||||
class="w-[60px] h-[40px] p-[10px] border border-[#c1c1c1] rounded-[4px]" />
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]">Gửi
|
||||
đánh
|
||||
giá</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box-list-review hidden fixed left-[50%] top-[50%] w-[800px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||
id="js-box-list-review">
|
||||
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<b class="text-center text-xl block">Đánh giá của khách hàng</b>
|
||||
<span class="mt-[5px] text-center block">(102 đánh giá)</span>
|
||||
<a href="javascript:void(0)" onclick="closeReview()" id="js-close-review"
|
||||
class="absolute right-0 top-[-5px] text-[#808080] text-[22px] ">x</a>
|
||||
</div>
|
||||
|
||||
<div class="list-review max-h-[900px] overflow-auto">
|
||||
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box-form-store hidden fixed left-[50%] top-[50%] w-[800px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||
id="js-form-store">
|
||||
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<b class="text-center text-xl block">Giới thiệu cửa hàng mới</b>
|
||||
<a href="javascript:void(0)" onclick="closeFormStore()" id="js-close-store"
|
||||
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Tên cửa hàng</label>
|
||||
<input type="text" name="title" placeholder="Mời bạn nhập tên cửa hàng..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Website</label>
|
||||
<input type="text" name="web" placeholder="Mời bạn nhập link website..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Tỉnh thành</label>
|
||||
<div class="relative select-arrow">
|
||||
<select name="" id="">
|
||||
<option value="">Chọn tỉnh thành</option>
|
||||
<option value="">Hà nội</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Địa chỉ</label>
|
||||
<input type="text" name="address" placeholder="Mời bạn nhập địa chỉ cửu hàng..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Mô tả</label>
|
||||
<textarea type="text" name="note" placeholder="Mời bạn nhập mô tả..."></textarea>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Thông tin người liên hệ</label>
|
||||
<input type="text" name="info" placeholder="Mời bạn nhập thông tin..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]">Gửi
|
||||
đánh
|
||||
giá</button>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script>
|
||||
function showReview() {
|
||||
$("#js-box-review").removeClass('hidden');
|
||||
$("#backgroundPopup").addClass('active');
|
||||
}
|
||||
|
||||
function showListReview() {
|
||||
$("#js-box-list-review").removeClass('hidden');
|
||||
$("#backgroundPopup").addClass('active');
|
||||
}
|
||||
|
||||
function closeReview() {
|
||||
$("#js-box-review").addClass('hidden');
|
||||
$('#js-box-list-review').addClass('hidden');
|
||||
$("#backgroundPopup").removeClass('active');
|
||||
}
|
||||
|
||||
function closeFormStore() {
|
||||
$("#js-form-store").addClass('hidden');
|
||||
$("#backgroundPopup").removeClass('active');
|
||||
}
|
||||
|
||||
function closeBackground() {
|
||||
$("#js-box-review").addClass('hidden');
|
||||
$('#js-box-list-review').addClass('hidden');
|
||||
$("#js-form-store").addClass('hidden');
|
||||
$("#backgroundPopup").removeClass('active');
|
||||
}
|
||||
|
||||
function showFormStoreNew() {
|
||||
$("#js-form-store").removeClass('hidden');
|
||||
$("#backgroundPopup").addClass('active');
|
||||
}
|
||||
</script>
|
||||
@@ -1,8 +1,8 @@
|
||||
<footer class="mt-20 border-t-[11px] border-[#1c039b] w-full">
|
||||
<footer class="border-t-[11px] border-[#1c039b] w-full">
|
||||
<div class="container">
|
||||
<a href="/" class="block my-[30px]">
|
||||
<img src="../../assets/images/logo-footer.png" class="block w-[180px] h-[45px] object-contain"
|
||||
width="100%" height="100%" alt="logo">
|
||||
<img src="../../assets/images/logo-footer.png" class="block w-[180px] h-[45px] object-contain" width="100%"
|
||||
height="100%" alt="logo">
|
||||
</a>
|
||||
<div class="main-footer grid grid-cols-4">
|
||||
<div class="item">
|
||||
@@ -41,4 +41,4 @@
|
||||
<div class="footer-bottom bg-[#ebebeb] py-[15px]">
|
||||
<b class="text-center block">© Copyright 2025 by Hurasoft. All Rights Reserved.</b>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="/" class="logo block mr-[100px]">
|
||||
<img src="../../assets/images/logo.png" class="object-contain w-[173px] h-[45px] block"
|
||||
alt="Location icon" />
|
||||
alt="Location icon" />
|
||||
</a>
|
||||
<div class="flex items-center mr-[100px]">
|
||||
<i class="icon_2025 map"></i>
|
||||
@@ -22,12 +22,11 @@
|
||||
</div>
|
||||
<div class="w-[670px] relative mr-[135px] input-search">
|
||||
<form action="/search" enctype="text/plain" method="get"
|
||||
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden">
|
||||
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden">
|
||||
<input type="text" name="q" placeholder="Tìm kiếm khuyến mãi, cửa hàng, sản phẩm,..."
|
||||
class="search-input w-full h-full p-[0_10px] rounded-[8px] text-base"
|
||||
onclick="$('.autocomplete-suggestions').show();">
|
||||
class="search-input w-full h-full p-[0_10px] rounded-[8px] text-base" />
|
||||
<button type="submit"
|
||||
class="absolute right-[10px] top-[5px] w-[40px] h-[35px] border-l-[1.5px] border-[#B3B3B3] pl-[10px]"><i
|
||||
class="absolute right-[10px] top-[5px] w-[40px] h-[35px] border-l-[1.5px] border-[#B3B3B3] pl-[10px]"><i
|
||||
class="icon_2025 search "></i></button>
|
||||
</form>
|
||||
<div class="autocomplete-suggestions hidden">
|
||||
@@ -44,11 +43,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-user">
|
||||
<div class="flex items-center">
|
||||
<a class="flex items-center" href="/taikhoan">
|
||||
<i class="icon_2025 user"></i>
|
||||
<b class="text-white p-[0_5px] whitespace-nowrap">Tài khoản</b>
|
||||
<i class="icon_arrow"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,12 +58,12 @@
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="header-menu relative group">
|
||||
<div
|
||||
class="title-menu flex items-center justify-center w-[219px] h-[45px] rounded-[4px] border-[1px] border-[#e3e3e3] bg-[#F6F6F6] cursor-pointer">
|
||||
class="title-menu flex items-center justify-center w-[219px] h-[45px] rounded-[4px] border-[1px] border-[#e3e3e3] bg-[#F6F6F6] cursor-pointer">
|
||||
<i class="icon_2025 bar"></i>
|
||||
<b class="ml-[8px] uppercase">Danh mục sản phẩm</b>
|
||||
</div>
|
||||
<div
|
||||
class="box-menu-hover group-hover:block absolute hidden shadow-[0_0_8px_2px_rgba(0,0,0,0.1)] rounded-[5px] bg-white top-[47px] z-[99] w-[220px]">
|
||||
class="box-menu-hover group-hover:block absolute hidden shadow-[0_0_8px_2px_rgba(0,0,0,0.1)] rounded-[5px] bg-white top-[47px] z-[99] w-[220px]">
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img"> <img src="/dev/images/laptop.png" alt=""> </span>
|
||||
@@ -421,38 +420,38 @@
|
||||
<a href="/buildpc" class="flex items-center group">
|
||||
<i class="icon_2025 buildpc group-hover:buildpc-hover"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Build
|
||||
PC</span>
|
||||
PC</span>
|
||||
</a>
|
||||
<a href="/tim-nguoi-ban" class="flex items-center group">
|
||||
<i class="icon_2025 shop"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Tìm
|
||||
người bán</span>
|
||||
người bán</span>
|
||||
</a>
|
||||
<a href="/" class="flex items-center group">
|
||||
<a href="/dia-chi-sua-chua" class="flex items-center group">
|
||||
<i class="icon_2025 map-2"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Địa
|
||||
chỉ
|
||||
sửa chữa</span>
|
||||
chỉ
|
||||
sửa chữa</span>
|
||||
</a>
|
||||
<a href="/" class="flex items-center group">
|
||||
<a href="/hoi-dap" class="flex items-center group">
|
||||
<i class="icon_2025 question"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)">Hỏi
|
||||
đáp</span>
|
||||
đáp</span>
|
||||
</a>
|
||||
<a href="/" class="flex items-center group">
|
||||
<a href="/san-pham-da-luu" class="flex items-center group">
|
||||
<i class="icon_2025 prduct-save"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Sản
|
||||
phẩm
|
||||
đã lưu</span>
|
||||
phẩm
|
||||
đã lưu</span>
|
||||
</a>
|
||||
<a href="/" class="flex items-center group">
|
||||
<a href="/tin-rao-vat" class="flex items-center group">
|
||||
<i class="icon_2025 article"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Tin
|
||||
rạo
|
||||
vặt</span>
|
||||
rạo
|
||||
vặt</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</header>
|
||||
504
template/shop/home.html
Normal file
504
template/shop/home.html
Normal file
@@ -0,0 +1,504 @@
|
||||
<div class="page-list-store bg-[#EFEFEF] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<span itemprop="name">
|
||||
Tìm người bán
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="box-backgorund p-[15px] rounded-[12px] mt-3.5 bg-white">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-2xl text-black font-bold">Danh sách cửa hàng</h3>
|
||||
|
||||
<div class="right flex items-center">
|
||||
<div class="w-[520px] relative rounded-[8px] mr-[15px] input-search border border-[#dddddd]">
|
||||
<form action="/search" enctype="text/plain" method="get"
|
||||
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden">
|
||||
<input type="text" name="q" placeholder="Nhập địa chỉ cửa bạn để tìm cửa hàng gần nhất"
|
||||
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
|
||||
onclick="$('.autocomplete-suggestions').show();">
|
||||
<button type="submit" class="absolute left-[10px] top-[5px] w-[40px] h-[35px] "><i
|
||||
class="icon_2025 search-2 "></i></button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<a href="javascript:void()" onclick="showFormStoreNew()"
|
||||
class="block w-[190px] h-[45px] leading-[45px] border-[1px] border-[#462f91] rounded-[8px] text-center text-[#462f91] font-[500] hover:bg-[#462f91] hover:text-white">Giới
|
||||
thiệu cửa hàng mới</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter flex items-center justify-between p-[10px] bg-[#f4f4f4] mt-[10px]">
|
||||
<div class="flex items-center">
|
||||
<a href=""
|
||||
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[var(--color-global)] text-white mr-[10px]">Gần
|
||||
tôi
|
||||
nhất</a>
|
||||
<a href=""
|
||||
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đánh
|
||||
giá tốt nhất</a>
|
||||
<a href=""
|
||||
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đã
|
||||
xem</a>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-[10px]">Lọc theo</span>
|
||||
<div class="select-two-arrow mr-[10px]">
|
||||
<select name="" id="" class="">
|
||||
<option value="">Tỉnh/Thành phố</option>
|
||||
<option value="">Hà nội</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select-two-arrow mr-[10px]">
|
||||
<select name="" id="" class="">
|
||||
<option value="">Quận/Huyện</option>
|
||||
<option value="">Hà nội</option>
|
||||
</select>
|
||||
</div>
|
||||
<select name="" id="" class="p-[10px] border-[1px] border-[#d5d5d5] rounded-[4px]">
|
||||
<option value="">Cách tôi 3km</option>
|
||||
<option value="">10km</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] flex ">
|
||||
<div class="logo w-[100px] h-[100px] border border-[#d4d4d4] mr-[10px]">
|
||||
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
|
||||
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
|
||||
</div>
|
||||
<div class="info w-[calc(100%-390px)] mr-[10px]">
|
||||
<a href="#" class="name-store line-clamp-1 font-bold mb-[3px] text-xl">
|
||||
Hanoicomputer - Công cổ phần máy tính Hà Nội
|
||||
</a>
|
||||
<a href="" class="flex items-center">
|
||||
<i class="icon_2025 shop-blue"></i>
|
||||
<span class="ml-[5px] text-[#1877f2]">Chuyên mua bán trao đổi PC, laptop,
|
||||
linh phụ kiện máy tính</span>
|
||||
</a>
|
||||
<div class="flex items-center mt-[5px]">
|
||||
<div class="flex items-center mr-[15px]">
|
||||
<div class="w-[24px]">
|
||||
<i class="icon_2025 map-2"></i>
|
||||
</div>
|
||||
<p class="ml-[5px]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh Khai, phường 6,
|
||||
quận 3, TP. Hồ
|
||||
Chí Minh</p>
|
||||
</div>
|
||||
<a href="" class="flex items-center mr-[15px]">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
|
||||
</a>
|
||||
<a href="" class="flex items-center">
|
||||
<i class="icon_2025 showroom"></i>
|
||||
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7 showroom</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="" class="flex items-center mt-[5px]">
|
||||
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
|
||||
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
|
||||
</a>
|
||||
<a href="" class="flex items-center mt-[5px]">
|
||||
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
|
||||
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- end info -->
|
||||
<div class="btn w-[270px] flex flex-col justify-between">
|
||||
<div class="top">
|
||||
<a href="javascript:void()" onclick="showReview()"
|
||||
class="text-right block underline hover:text-[#1877f2]">Đánh giá về chất
|
||||
lượng
|
||||
dịch vụ</a>
|
||||
<div class="flex items-center justify-end mt-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="mx-[5px]">4.6</span>
|
||||
<a href="javascript:void(0)" onclick="showListReview()"
|
||||
class="font-[500] underline hover:text[var(--color-hover)]">(Xem 47 đánh
|
||||
giá)</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn flex items-center gap-[10px]">
|
||||
<a href=""
|
||||
class="block border w-[50%] h-[38px] leading-[38px] text-center border-[#303030] border rounded-[4px] font-bold hover:bg-[#303030] hover:text-white">
|
||||
Lưu địa chỉ
|
||||
</a>
|
||||
<a href=""
|
||||
class="block w-[50%] h-[38px] leading-[38px] text-center bg-[#FF7A00] text-white font-bold rounded-[4px] text-center hover:bg-orange-600">Liên
|
||||
hệ</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="backgroundPopup" onclick="closeBackground()"></div>
|
||||
<div class="box-form-review hidden fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||
id="js-box-review">
|
||||
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<b class="text-center text-xl block">Đánh giá sản phẩm</b>
|
||||
<a href="javascript:void(0)" onclick="closeReview()" id="js-close-review"
|
||||
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
|
||||
</div>
|
||||
<div class="info-form-review w-[500px] mx-[auto]">
|
||||
<a href="" class="block w-[100px] h-[100px] m-[10px_auto] p-[10px] rounded-[4px] border border-[#d4d4d4]">
|
||||
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
|
||||
class="block w-full h-[100%] m-[auto] object-contain" alt="">
|
||||
</a>
|
||||
<a href="" class="text-center block mb-[10px]">Hanoicomputer - Công cổ phần máy tính Hà Nội</a>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="rating-selection">
|
||||
<input type="radio" class="rating-input" id="star5" name="rating" value="5">
|
||||
<label for="star5" class="rating-star"></label>
|
||||
|
||||
<input type="radio" class="rating-input" id="star4" name="rating" value="4">
|
||||
<label for="star4" class="rating-star"></label>
|
||||
|
||||
<input type="radio" class="rating-input" id="star3" name="rating" value="3">
|
||||
<label for="star3" class="rating-star"></label>
|
||||
|
||||
<input type="radio" class="rating-input" id="star2" name="rating" value="2">
|
||||
<label for="star2" class="rating-star"></label>
|
||||
|
||||
<input type="radio" class="rating-input" id="star1" name="rating" value="1">
|
||||
<label for="star1" class="rating-star"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</div>
|
||||
<div class="form-input mt-[20px]">
|
||||
<input type="text" name="title" placeholder="Mời bạn nhập tiêu đề..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input mt-[10px]">
|
||||
<textarea name="content" placeholder="Mời bạn chia sẻ cảm nhận..." id=""></textarea>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<input id="js-file-upload-id" type="hidden" value="">
|
||||
<div id="js-container-selector" class="mt-[10px] flex items-center">
|
||||
<a href="javascript:void(0)" class="flex items-center" id="js-select-file">
|
||||
<i class="icon_2025 upload_image"></i>
|
||||
<span class="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
|
||||
<span class="px-[5px]">(tối đa 3 ảnh)</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-[15px] flex items-center">
|
||||
<p class="mr-[10px]">Chấm điểm theo trải nghiệm cá nhân</p>
|
||||
<input type="number" name="point" min="1" max="10"
|
||||
class="w-[60px] h-[40px] p-[10px] border border-[#c1c1c1] rounded-[4px]" />
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]">Gửi
|
||||
đánh
|
||||
giá</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box-list-review hidden fixed left-[50%] top-[50%] w-[800px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||
id="js-box-list-review">
|
||||
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<b class="text-center text-xl block">Đánh giá của khách hàng</b>
|
||||
<span class="mt-[5px] text-center block">(102 đánh giá)</span>
|
||||
<a href="javascript:void(0)" onclick="closeReview()" id="js-close-review"
|
||||
class="absolute right-0 top-[-5px] text-[#808080] text-[22px] ">x</a>
|
||||
</div>
|
||||
|
||||
<div class="list-review max-h-[900px] overflow-auto">
|
||||
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery">
|
||||
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box-form-store hidden fixed left-[50%] top-[50%] w-[800px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||
id="js-form-store">
|
||||
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<b class="text-center text-xl block">Giới thiệu cửa hàng mới</b>
|
||||
<a href="javascript:void(0)" onclick="closeFormStore()" id="js-close-store"
|
||||
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Tên cửa hàng</label>
|
||||
<input type="text" name="title" placeholder="Mời bạn nhập tên cửa hàng..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Website</label>
|
||||
<input type="text" name="web" placeholder="Mời bạn nhập link website..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Tỉnh thành</label>
|
||||
<div class="relative select-arrow">
|
||||
<select name="" id="">
|
||||
<option value="">Chọn tỉnh thành</option>
|
||||
<option value="">Hà nội</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Địa chỉ</label>
|
||||
<input type="text" name="address" placeholder="Mời bạn nhập địa chỉ cửu hàng..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Mô tả</label>
|
||||
<textarea type="text" name="note" placeholder="Mời bạn nhập mô tả..."></textarea>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-input mt-[10px]">
|
||||
<label for="" class="block mb-[5px]">Thông tin người liên hệ</label>
|
||||
<input type="text" name="info" placeholder="Mời bạn nhập thông tin..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]">Gửi
|
||||
đánh
|
||||
giá</button>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script>
|
||||
function showReview() {
|
||||
$("#js-box-review").removeClass('hidden');
|
||||
$("#backgroundPopup").addClass('active');
|
||||
}
|
||||
|
||||
function showListReview() {
|
||||
$("#js-box-list-review").removeClass('hidden');
|
||||
$("#backgroundPopup").addClass('active');
|
||||
}
|
||||
|
||||
function closeReview() {
|
||||
$("#js-box-review").addClass('hidden');
|
||||
$('#js-box-list-review').addClass('hidden');
|
||||
$("#backgroundPopup").removeClass('active');
|
||||
}
|
||||
|
||||
function closeFormStore() {
|
||||
$("#js-form-store").addClass('hidden');
|
||||
$("#backgroundPopup").removeClass('active');
|
||||
}
|
||||
|
||||
function closeBackground() {
|
||||
$("#js-box-review").addClass('hidden');
|
||||
$('#js-box-list-review').addClass('hidden');
|
||||
$("#js-form-store").addClass('hidden');
|
||||
$("#backgroundPopup").removeClass('active');
|
||||
}
|
||||
|
||||
function showFormStoreNew() {
|
||||
$("#js-form-store").removeClass('hidden');
|
||||
$("#backgroundPopup").addClass('active');
|
||||
}
|
||||
</script>
|
||||
@@ -25,80 +25,84 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="flex overflow-hidden flex-col items-center bg-white">
|
||||
|
||||
{% include shared/header %}
|
||||
{{global|show_var}}
|
||||
|
||||
{{ page_content }}
|
||||
<main>
|
||||
|
||||
{% include shared/footer %}
|
||||
{% include shared/header %}
|
||||
|
||||
</main>
|
||||
{{ page_content }}
|
||||
|
||||
{% include javascript/index %}
|
||||
{% include shared/footer %}
|
||||
|
||||
</main>
|
||||
|
||||
{% include javascript/index %}
|
||||
|
||||
|
||||
<script>
|
||||
var swiper = new Swiper("#js-banner-slider", {
|
||||
slidesPerView: 1,
|
||||
navigation: {
|
||||
nextEl: "#js-banner-slider .swiper-button-next",
|
||||
prevEl: "#js-banner-slider .swiper-button-prev",
|
||||
},
|
||||
});
|
||||
|
||||
var swiper_product = new Swiper("#js-product-best", {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 15,
|
||||
loop: false,
|
||||
rewind: false,
|
||||
lazy: true,
|
||||
navigation: {
|
||||
nextEl: "#js-product-best-btn .swiper-button-next",
|
||||
prevEl: "#js-product-best-btn .swiper-button-prev",
|
||||
},
|
||||
});
|
||||
|
||||
var swiper_businesses = new Swiper("#list-businesses", {
|
||||
slidesPerView: 7,
|
||||
spaceBetween: 20,
|
||||
loop: false,
|
||||
rewind: false,
|
||||
lazy: true,
|
||||
});
|
||||
|
||||
runVideo("#js-video");
|
||||
|
||||
|
||||
function runVideo(holder) {
|
||||
$(holder).on("click", function () {
|
||||
$(this).addClass("active");
|
||||
let url = $(holder).attr("data-url");
|
||||
let width = $(holder).width();
|
||||
let height = $(holder).height();
|
||||
const videoUrl = getEmbedVideoUrl(url);
|
||||
if (videoUrl) {
|
||||
$(holder).html(`<iframe width="${width}" height="${height}" src="${videoUrl}?mute=1&autoplay=1" frameborder="0" allowfullscreen></iframe>`);
|
||||
}
|
||||
<script>
|
||||
var swiper = new Swiper("#js-banner-slider", {
|
||||
slidesPerView: 1,
|
||||
navigation: {
|
||||
nextEl: "#js-banner-slider .swiper-button-next",
|
||||
prevEl: "#js-banner-slider .swiper-button-prev",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
var swiper_product = new Swiper("#js-product-best", {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 15,
|
||||
loop: false,
|
||||
rewind: false,
|
||||
lazy: true,
|
||||
navigation: {
|
||||
nextEl: "#js-product-best-btn .swiper-button-next",
|
||||
prevEl: "#js-product-best-btn .swiper-button-prev",
|
||||
},
|
||||
});
|
||||
|
||||
var swiper_businesses = new Swiper("#list-businesses", {
|
||||
slidesPerView: 7,
|
||||
spaceBetween: 20,
|
||||
loop: false,
|
||||
rewind: false,
|
||||
lazy: true,
|
||||
});
|
||||
|
||||
runVideo("#js-video");
|
||||
|
||||
|
||||
function getEmbedVideoUrl(url) {
|
||||
const youtubeRegex = /(?:youtube\.com\/(?:shorts\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/(?:shorts\/)?)([a-zA-Z0-9_-]{11})/;
|
||||
const tiktokRegex = /(?:tiktok\.com\/@[^\/]+\/video\/)(\d+)/;
|
||||
function runVideo(holder) {
|
||||
$(holder).on("click", function () {
|
||||
$(this).addClass("active");
|
||||
let url = $(holder).attr("data-url");
|
||||
let width = $(holder).width();
|
||||
let height = $(holder).height();
|
||||
const videoUrl = getEmbedVideoUrl(url);
|
||||
if (videoUrl) {
|
||||
$(holder).html(`<iframe width="${width}" height="${height}" src="${videoUrl}?mute=1&autoplay=1" frameborder="0" allowfullscreen></iframe>`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const youtubeMatch = url.match(youtubeRegex);
|
||||
if (youtubeMatch) return 'https://www.youtube.com/embed/' + youtubeMatch[1];
|
||||
|
||||
const tiktokMatch = url.match(tiktokRegex);
|
||||
if (tiktokMatch) return 'https://www.tiktok.com/player/v1/' + tiktokMatch[1];
|
||||
function getEmbedVideoUrl(url) {
|
||||
const youtubeRegex = /(?:youtube\.com\/(?:shorts\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/(?:shorts\/)?)([a-zA-Z0-9_-]{11})/;
|
||||
const tiktokRegex = /(?:tiktok\.com\/@[^\/]+\/video\/)(\d+)/;
|
||||
|
||||
return null;
|
||||
}
|
||||
const youtubeMatch = url.match(youtubeRegex);
|
||||
if (youtubeMatch) return 'https://www.youtube.com/embed/' + youtubeMatch[1];
|
||||
|
||||
</script>
|
||||
const tiktokMatch = url.match(tiktokRegex);
|
||||
if (tiktokMatch) return 'https://www.tiktok.com/player/v1/' + tiktokMatch[1];
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user