upload 14/5
This commit is contained in:
@@ -1,18 +0,0 @@
|
||||
import { useLocation } from 'preact-iso';
|
||||
|
||||
export function Header() {
|
||||
const { url } = useLocation();
|
||||
|
||||
return (
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/" class={url == '/' && 'active'}>
|
||||
Home
|
||||
</a>
|
||||
<a href="/404" class={url == '/404' && 'active'}>
|
||||
404
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
68
src/components/footer/Footer.tsx
Normal file
68
src/components/footer/Footer.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
export function Footer() {
|
||||
return (
|
||||
<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"
|
||||
/>
|
||||
</a>
|
||||
<div class="main-footer grid grid-cols-4">
|
||||
<div class="item">
|
||||
<h3 class="title font-bold">Về chúng tôi</h3>
|
||||
<a href="" class="block">
|
||||
Độc quyền
|
||||
</a>
|
||||
<a href="" class="block">
|
||||
Mua online
|
||||
</a>
|
||||
<a href="" class="block">
|
||||
Bộ sưu tập
|
||||
</a>
|
||||
<a href="/tin-tuc" class="block">
|
||||
Blog
|
||||
</a>
|
||||
<div class="list-social flex items-center mt-[45px]">
|
||||
<a href="" target="_blank" class="mr-[10px]">
|
||||
<i class="icon_2025 facebook"></i>
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
<i class="icon_2025 zalo"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3 class="title font-bold">Tuyển dụng</h3>
|
||||
<a href="">Liên hệ</a>
|
||||
<a href="">Điều khoản</a>
|
||||
<a href="">Chính sách bảo mật</a>
|
||||
<a href="">Trở thành đối tác</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3 class="title font-bold">Liên kết</h3>
|
||||
<a href="hurasoft.com">Hurasoft.com</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3 class="title font-bold">Giới thiệu</h3>
|
||||
<b class="text-[16px]">
|
||||
BESTPC là kênh tổng hợp tin khuyến mãi chuyên nghiệp đầu tiên ở
|
||||
Việt Nam, cho phép bạn tìm kiếm mã giảm giá, tin ưu đãi từ nghành
|
||||
hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu hình PC
|
||||
chuyên nghiệp. Và còn rất nhiều mã giảm giá độc quyền dành riêng
|
||||
cho bạn.
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom bg-[#ebebeb] py-[15px]">
|
||||
<b class="text-center block">
|
||||
© Copyright 2025 by Hurasoft. All Rights Reserved.
|
||||
</b>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
859
src/components/header/Header.tsx
Normal file
859
src/components/header/Header.tsx
Normal file
@@ -0,0 +1,859 @@
|
||||
export function Header() {
|
||||
return (
|
||||
<header class="w-full">
|
||||
<div class="header-main px-16 py-6 bg-[var(--color-global)]">
|
||||
<div class="container">
|
||||
<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"
|
||||
/>
|
||||
</a>
|
||||
<div class="flex items-center mr-[100px]">
|
||||
<i class="icon_2025 map"></i>
|
||||
<div class="ml-[20px] ">
|
||||
<span class="text-xs text-white block mb-[5px]">
|
||||
Bạn đang ở
|
||||
</span>
|
||||
<div class="box-select">
|
||||
<select name="" id="" class="select select_location">
|
||||
<option value="">Hà Nội</option>
|
||||
<option value="">TP HCM</option>
|
||||
<option value="">Đà Nẵng</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
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">
|
||||
<p>TỪ KHOÁ HOT</p>
|
||||
<ul class="ul">
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-user">
|
||||
<div class="flex items-center">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Navigation Section */}
|
||||
<nav class="header-bottom px-16 py-2.5 w-full bg-white shadow-[0px_4px_4px_rgba(149,149,149,0.25)]">
|
||||
<div class="container">
|
||||
<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">
|
||||
<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]">
|
||||
<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>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/008-mouse.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/010-computer.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/013-fan.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/gamepad-1.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/server-4.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/008-mouse.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/010-computer.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/013-fan.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/gamepad-1.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/server-4.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/server-4.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* end copy */}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[40px] header-bottom-right">
|
||||
<a href="/buildpc" class="flex items-center group">
|
||||
<i class="icon_2025 buildpc"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
|
||||
Build PC
|
||||
</span>
|
||||
</a>
|
||||
<a href="/tim-nguoi-ban" class="flex items-center group">
|
||||
<i class="icon_2025 shop"></i>
|
||||
<span class="ml-[7px] hover:text-[var(--color-global)]">
|
||||
Tìm người bán
|
||||
</span>
|
||||
</a>
|
||||
<a href="/" 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>
|
||||
</a>
|
||||
<a href="/" 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>
|
||||
</a>
|
||||
<a href="/" 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>
|
||||
</a>
|
||||
<a href="/" 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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
128
src/components/product/FormReview.tsx
Normal file
128
src/components/product/FormReview.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
export function FormReview() {
|
||||
function closeReview() {}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="backgroundPopup" onClick={() => closeReview()}></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 m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
class="block w-[100px] h-[100px] m-[0_auto]"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a href="" class="text-center block mb-[10px]">
|
||||
Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6" FHD)
|
||||
- Hàng Chính Hãng
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
285
src/components/product/MemberReview.tsx
Normal file
285
src/components/product/MemberReview.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
export function MemberReview() {
|
||||
return (
|
||||
<div class="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 class="text-xl font-bold">Thành viên BestPC đánh giá</h3>
|
||||
<div class="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
class=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Top review</option>
|
||||
<option value="">Review mới nhất</option>
|
||||
</select>
|
||||
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[25px]">
|
||||
<div class="left w-[20%]">
|
||||
<b class="text-center block pt-[20px] pb-[5px] text-2xl">
|
||||
54 đánh giá
|
||||
</b>
|
||||
<div class="flex items-center justify-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.8</span>
|
||||
</div>
|
||||
<div class="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star5"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star3"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star2"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star1"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
|
||||
<p class="text-center mt-[10px]">Đánh giá của bạn về sản phẩm</p>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
id="js-show-form"
|
||||
class="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
|
||||
>
|
||||
Gửi đánh giá của bạn về sản phẩm
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right w-[80%]">
|
||||
<div class="list-review mt-[15px]">
|
||||
<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="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="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] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img
|
||||
src="/assets/images/avartar-review-2.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="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] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img
|
||||
src="/assets/images/avartar-review-3.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="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>
|
||||
{/* end list review */}
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="pt-[15px] text-[#FF7A00] btn-more-review"
|
||||
>
|
||||
Xem thêm <span>23</span> bình luận khác
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
447
src/components/product/ProductDescription.tsx
Normal file
447
src/components/product/ProductDescription.tsx
Normal file
@@ -0,0 +1,447 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Fancybox } from "@fancyapps/ui";
|
||||
import "@fancyapps/ui/dist/fancybox/fancybox.css";
|
||||
|
||||
export function ProductDescription() {
|
||||
const [isContentExpanded, setContentExpanded] = useState(false);
|
||||
const contentRef = useRef(null);
|
||||
const moreAllRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const content = contentRef.current;
|
||||
if (content && content.scrollHeight >= 580) {
|
||||
moreAllRef.current.style.display = "flex";
|
||||
content.style.height = "580px";
|
||||
}
|
||||
|
||||
Fancybox.bind('[data-fancybox="gallery"]');
|
||||
}, []);
|
||||
|
||||
const toggleContent = () => {
|
||||
setContentExpanded((prevState) => !prevState);
|
||||
const content = contentRef.current;
|
||||
content.classList.toggle("active");
|
||||
|
||||
if (isContentExpanded) {
|
||||
window.scrollTo({
|
||||
top: content.getBoundingClientRect().top + window.scrollY - 200,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="product-information mt-5">
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="left w-[60%]">
|
||||
<div class="box-desc bg-white p-[12px] rounded-[8px]">
|
||||
<h3 class="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
|
||||
Thông tin sản phẩm
|
||||
</h3>
|
||||
<div id="content-desciption">
|
||||
<div class="content nd" ref={contentRef}>
|
||||
<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)"
|
||||
ref={moreAllRef}
|
||||
className="more-all js-viewmore-content item-btn flex items-center"
|
||||
onClick={toggleContent}
|
||||
>
|
||||
{isContentExpanded ? (
|
||||
<>
|
||||
<span>Thu gọn</span>{" "}
|
||||
<i className="icon_2025 angle-top mt-[10px]"></i>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>Xem thêm </span>
|
||||
<i className="icon_2025 angle-bottom"></i>
|
||||
</>
|
||||
)}
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- end box desc --> */}
|
||||
</div>
|
||||
<div class="right w-[40%]">
|
||||
<div class="box-spec bg-white p-[12px] rounded-[8px]">
|
||||
<h3 class="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
|
||||
Thông tin chi tiết
|
||||
</h3>
|
||||
|
||||
<div class="content table">
|
||||
<table width="638">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mã sản phẩm</td>
|
||||
<td>VA3416WC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc</td>
|
||||
<td>Đen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Độ sáng</td>
|
||||
<td>Max 300cd/m²</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Độ tương phản</td>
|
||||
<td>3000:1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc hiển thị</td>
|
||||
<td>16.7M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc hỗ trợ</td>
|
||||
<td>6500K</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Loại màn hình</td>
|
||||
<td>Cong R1500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kích cỡ màn hình</td>
|
||||
<td>34"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tấm nền</td>
|
||||
<td>VA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Góc nhìn</td>
|
||||
<td>89°/89° (H/V)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tính năng đặc biệt</td>
|
||||
<td>
|
||||
<br />
|
||||
1. Flicker-Free Backlight adjustment
|
||||
<br />
|
||||
2. Dynamic Contrast Ratio: DCR
|
||||
<br />
|
||||
3. Adaptive Sync
|
||||
<br />
|
||||
4.FPS/RTS
|
||||
<br />
|
||||
5.PIP/PBP
|
||||
<br />
|
||||
6. PQ
|
||||
<br />
|
||||
7. GAME PLUS
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="content-specification" class="hidden table">
|
||||
<table width="638">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mã sản phẩm</td>
|
||||
<td>VA3416WC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc</td>
|
||||
<td>Đen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Độ sáng</td>
|
||||
<td>Max 300cd/m²</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Độ tương phản</td>
|
||||
<td>3000:1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc hiển thị</td>
|
||||
<td>16.7M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc hỗ trợ</td>
|
||||
<td>6500K</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Loại màn hình</td>
|
||||
<td>Cong R1500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kích cỡ màn hình</td>
|
||||
<td>34"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tấm nền</td>
|
||||
<td>VA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Góc nhìn</td>
|
||||
<td>89°/89° (H/V)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tính năng đặc biệt</td>
|
||||
<td>
|
||||
<br />
|
||||
1. Flicker-Free Backlight adjustment
|
||||
<br />
|
||||
2. Dynamic Contrast Ratio: DCR
|
||||
<br />
|
||||
3. Adaptive Sync
|
||||
<br />
|
||||
4.FPS/RTS
|
||||
<br />
|
||||
5.PIP/PBP
|
||||
<br />
|
||||
6. PQ
|
||||
<br />
|
||||
7. GAME PLUS
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<a
|
||||
href="#content-specification"
|
||||
data-fancybox
|
||||
class="more-all flex items-center justify-center"
|
||||
>
|
||||
Xem thêm thông số <i class="icon_2025 angle-bottom"></i>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- box spec --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
190
src/components/product/ProductReview.tsx
Normal file
190
src/components/product/ProductReview.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
export function ProductReview() {
|
||||
return (
|
||||
<div class="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 class="text-xl font-bold">Đánh giá trên internet</h3>
|
||||
<div class="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
class=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Top review</option>
|
||||
<option value="">Review mới nhất</option>
|
||||
</select>
|
||||
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-[25px]">
|
||||
<div class="left w-[20%]">
|
||||
<b class="text-center block pt-[20px] pb-[5px] text-2xl">
|
||||
54 đánh giá
|
||||
</b>
|
||||
<div class="flex items-center justify-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.8</span>
|
||||
</div>
|
||||
<div class="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Hanoicomputer{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Anphatpc{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star4"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Mygear{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star3"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Hoangphatpc{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star2"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Phucanhpc{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star1"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
|
||||
<p class="text-center mt-[10px]">Đánh giá của bạn về sản phẩm</p>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
|
||||
>
|
||||
Gửi đánh giá của bạn về sản phẩm
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right w-[80%]">
|
||||
<div class="list-review mt-[15px]">
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" class="text-[#1877F2]">
|
||||
Hacom.vn
|
||||
</a>
|
||||
<div class="time mt-[5px]">
|
||||
<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] text-base">
|
||||
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>
|
||||
<a href="javascript:void(0)" class="flex items-start">
|
||||
<span class="text-[16px] mr-[7px] underline">
|
||||
Xem link nguồn
|
||||
</span>
|
||||
<i class="icon_2025 link-review"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" class="text-[#1877F2]">
|
||||
Hacom.vn
|
||||
</a>
|
||||
<div class="time mt-[5px]">
|
||||
<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] text-base">
|
||||
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>
|
||||
<a href="javascript:void(0)" class="flex items-start">
|
||||
<span class="text-[16px] mr-[7px] underline">
|
||||
Xem link nguồn
|
||||
</span>
|
||||
<i class="icon_2025 link-review"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" class="text-[#1877F2]">
|
||||
Hacom.vn
|
||||
</a>
|
||||
<div class="time mt-[5px]">
|
||||
<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] text-base">
|
||||
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>
|
||||
<a href="javascript:void(0)" class="flex items-start">
|
||||
<span class="text-[16px] mr-[7px] underline">
|
||||
Xem link nguồn
|
||||
</span>
|
||||
<i class="icon_2025 link-review"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end list review */}
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="pt-[15px] text-[#FF7A00] btn-more-review"
|
||||
>
|
||||
Xem thêm <span>23</span> bình luận khác
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
250
src/components/product/SupplierListBox.tsx
Normal file
250
src/components/product/SupplierListBox.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
export function SupplierListBox() {
|
||||
return (
|
||||
<div class="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 class="text-xl font-bold">Nhà cung cấp trên BestPC - Tại Hà Nội</h3>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]">
|
||||
<i class="icon_2025 map-2"></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
|
||||
class="outline-none ml-[5px] h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
class=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Sắp xếp</option>
|
||||
<option value="">Mới</option>
|
||||
</select>
|
||||
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]">
|
||||
<div>
|
||||
<b>Nhà cung cấp</b>
|
||||
</div>
|
||||
<div>
|
||||
<b>Chính sách vận chuyển</b>
|
||||
</div>
|
||||
<div>
|
||||
<b>Giá</b>
|
||||
</div>
|
||||
<div>
|
||||
<b>Sản phẩm</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list ">
|
||||
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div class="flex items-start supplier">
|
||||
<div class="logo mr-[10px]">
|
||||
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
class="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-2">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" class="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" class="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
|
||||
ngày thứ 7, CN
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<div class="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b>
|
||||
</div>
|
||||
<b class="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div class="flex items-start supplier">
|
||||
<div class="logo mr-[10px]">
|
||||
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
class="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-2">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" class="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" class="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
|
||||
ngày thứ 7, CN
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<div class="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b>
|
||||
</div>
|
||||
<b class="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div class="flex items-start supplier">
|
||||
<div class="logo mr-[10px]">
|
||||
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
class="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-2">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" class="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" class="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
|
||||
ngày thứ 7, CN
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<div class="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b>
|
||||
</div>
|
||||
<b class="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end list */}
|
||||
|
||||
<a
|
||||
href=""
|
||||
class="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
|
||||
>
|
||||
Xem thêm
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +1,22 @@
|
||||
import { render } from "preact";
|
||||
import { LocationProvider, Router, Route } from "preact-iso";
|
||||
|
||||
import { Header } from "./components/header/Header";
|
||||
import { Footer } from "./components/footer/Footer";
|
||||
import { Home } from "./pages/Home/index.jsx";
|
||||
import { ProductDetail } from "./pages/product/ProductPage";
|
||||
import { ProductDetail } from "./pages/product/ProductDetail";
|
||||
import { NotFound } from "./pages/_404.jsx";
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<LocationProvider>
|
||||
<main>
|
||||
<Header />
|
||||
<Router>
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/product-detail" component={ProductDetail} />
|
||||
<Route default component={NotFound} />
|
||||
</Router>
|
||||
<Footer />
|
||||
</main>
|
||||
</LocationProvider>
|
||||
);
|
||||
|
||||
@@ -1,870 +1,10 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
|
||||
|
||||
export function Home() {
|
||||
return (
|
||||
<main class="flex overflow-hidden flex-col items-center bg-white">
|
||||
{/* <!-- Header Section --> */}
|
||||
<header class="w-full">
|
||||
<div class="header-main px-16 py-6 bg-[var(--color-global)]">
|
||||
<div class="container">
|
||||
<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"
|
||||
/>
|
||||
</a>
|
||||
<div class="flex items-center mr-[100px]">
|
||||
<i class="icon_2025 map"></i>
|
||||
<div class="ml-[20px] ">
|
||||
<span class="text-xs text-white block mb-[5px]">
|
||||
Bạn đang ở
|
||||
</span>
|
||||
<div class="box-select">
|
||||
<select name="" id="" class="select select_location">
|
||||
<option value="">Hà Nội</option>
|
||||
<option value="">TP HCM</option>
|
||||
<option value="">Đà Nẵng</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
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">
|
||||
<p>TỪ KHOÁ HOT</p>
|
||||
<ul class="ul">
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-user">
|
||||
<div class="flex items-center">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Navigation Section */}
|
||||
<nav class="header-bottom px-16 py-2.5 w-full bg-white shadow-[0px_4px_4px_rgba(149,149,149,0.25)]">
|
||||
<div class="container">
|
||||
<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">
|
||||
<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]">
|
||||
<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>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/008-mouse.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/010-computer.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/013-fan.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/gamepad-1.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/server-4.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/008-mouse.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/010-computer.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/013-fan.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/gamepad-1.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/server-4.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/server-4.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* end copy */}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[40px] header-bottom-right">
|
||||
<a href="/buildpc" class="flex items-center group">
|
||||
<i class="icon_2025 buildpc"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
|
||||
Build PC
|
||||
</span>
|
||||
</a>
|
||||
<a href="/tim-nguoi-ban" class="flex items-center group">
|
||||
<i class="icon_2025 shop"></i>
|
||||
<span class="ml-[7px] hover:text-[var(--color-global)]">
|
||||
Tìm người bán
|
||||
</span>
|
||||
</a>
|
||||
<a href="/" 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>
|
||||
</a>
|
||||
<a href="/" 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>
|
||||
</a>
|
||||
<a href="/" 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>
|
||||
</a>
|
||||
<a href="/" 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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<>
|
||||
{/* Banner Section */}
|
||||
<div class="banner mt-[10px]">
|
||||
<div class="container">
|
||||
@@ -2296,7 +1436,7 @@ export function Home() {
|
||||
</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]"></div>
|
||||
@@ -2362,71 +1502,6 @@ export function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="mt-20 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"
|
||||
/>
|
||||
</a>
|
||||
<div class="main-footer grid grid-cols-4">
|
||||
<div class="item">
|
||||
<h3 class="title">Về chúng tôi</h3>
|
||||
<a href="" class="block">
|
||||
Độc quyền
|
||||
</a>
|
||||
<a href="" class="block">
|
||||
Mua online
|
||||
</a>
|
||||
<a href="" class="block">
|
||||
Bộ sưu tập
|
||||
</a>
|
||||
<a href="/tin-tuc" class="block">
|
||||
Blog
|
||||
</a>
|
||||
<div class="list-social flex items-center mt-[45px]">
|
||||
<a href="" target="_blank" class="mr-[10px]">
|
||||
<i class="icon_2025 facebook"></i>
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
<i class="icon_2025 zalo"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3 class="title">Tuyển dụng</h3>
|
||||
<a href="">Liên hệ</a>
|
||||
<a href="">Điều khoản</a>
|
||||
<a href="">Chính sách bảo mật</a>
|
||||
<a href="">Trở thành đối tác</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3 class="title">Liên kết</h3>
|
||||
<a href="hurasoft.com">Hurasoft.com</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3 class="title">Giới thiệu</h3>
|
||||
<b class="text-[16px]">
|
||||
BESTPC là kênh tổng hợp tin khuyến mãi chuyên nghiệp đầu tiên ở
|
||||
Việt Nam, cho phép bạn tìm kiếm mã giảm giá, tin ưu đãi từ
|
||||
nghành hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu
|
||||
hình PC chuyên nghiệp. Và còn rất nhiều mã giảm giá độc quyền
|
||||
dành riêng cho bạn.
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom bg-[#ebebeb] py-[15px]">
|
||||
<b class="text-center block">
|
||||
© Copyright 2025 by Hurasoft. All Rights Reserved.
|
||||
</b>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
911
src/pages/product/ProductDetail.tsx
Normal file
911
src/pages/product/ProductDetail.tsx
Normal file
@@ -0,0 +1,911 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { SupplierListBox } from "../../components/product/SupplierListBox";
|
||||
import { ProductDescription } from "../../components/product/ProductDescription";
|
||||
import { MemberReview } from "../../components/product/MemberReview";
|
||||
import { ProductReview } from "../../components/product/ProductReview";
|
||||
import { FormReview } from "../../components/product/FormReview";
|
||||
|
||||
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
|
||||
|
||||
export function ProductDetail() {
|
||||
// const [activeImage, setActiveImage] = useState(
|
||||
// "/src/assets/images/big-product-detail.png"
|
||||
// );
|
||||
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState(null);
|
||||
|
||||
const prevButtonRef = useRef(null);
|
||||
const nextButtonRef = useRef(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="box-product-detail bg-[#F4F4F4] pb-[100px]">
|
||||
<div className="container">
|
||||
<div className="breadcrumb p-[12px_0]">
|
||||
<ol
|
||||
itemscope
|
||||
itemtype="http://schema.org/BreadcrumbList"
|
||||
className="ul flex flex-wrap items-center"
|
||||
>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/template/homepage/homepage.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center text-[#637381]"
|
||||
>
|
||||
<span itemprop="name">
|
||||
<span style="font-size: 0; display: none;">Trang chủ</span>
|
||||
<i className="icon_2025 home mr-[5px] mb-[5px]" />
|
||||
</span>
|
||||
</a>{" "}
|
||||
<i className="icon_2025 angle-right ml-[12px]" />
|
||||
<meta itemprop="position" content="1" />
|
||||
</li>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/man-hinh.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center"
|
||||
>
|
||||
<span itemprop="name">Màn hình máy tính</span>
|
||||
<i className="icon_2025 angle-right text-[#637381] ml-[12px]" />
|
||||
</a>
|
||||
<meta itemprop="position" content="2" />
|
||||
</li>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/aivision.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center"
|
||||
>
|
||||
<span itemprop="name">AIVISION</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="3" />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="p-[15px] grid grid-cols-2 gap-[15px] rounded-[8px] bg-white">
|
||||
<div className="left">
|
||||
<div className="relative">
|
||||
<Swiper
|
||||
spaceBetween={10}
|
||||
navigation={true}
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
className="swiper border border-[#B1B1B1 rounded-[12px]"
|
||||
id="js-slider-big"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/big-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/big-product-detail.jpg" alt="" />
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/big-product-detail-2.jpg" alt="" />
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/big-product-detail-3.jpg" alt="" />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/big-product-detail-4.jpg" alt="" />
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
<div className="relative mt-[12px]">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
spaceBetween={15}
|
||||
slidesPerView={5}
|
||||
navigation={{
|
||||
prevEl: prevButtonRef.current, // Link to the 'prev' button
|
||||
nextEl: nextButtonRef.current, // Link to the 'next' button
|
||||
}}
|
||||
freeMode={true}
|
||||
watchSlidesProgress={true}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
className="swiper"
|
||||
id="js-slider-small"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/small-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/small-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/small-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/small-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/small-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/small-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/small-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img src="/assets/images/small-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div className="btn-small swiper-navigation">
|
||||
<button
|
||||
ref={prevButtonRef}
|
||||
className="swiper-button-prev"
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "-15px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
ref={nextButtonRef}
|
||||
className="swiper-button-next"
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: "-20px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="right">
|
||||
<h1 className="text-[24px] text-black mb-[5px]">
|
||||
Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6"
|
||||
FHD) - Hàng Chính Hãng
|
||||
</h1>
|
||||
<div className="flex items-center text-base">
|
||||
<div className="info-review flex items-center mr-[15px]">
|
||||
<i className="icon-star star-small" />
|
||||
<span className="ml-[5px] mt-[2px]">5/5</span>
|
||||
</div>
|
||||
<div className="info-view flex items-center mr-[15px]">
|
||||
<i className="icon_2025 view" />
|
||||
<span className="text-[#1877F2] ml-[5px]">120</span>
|
||||
</div>
|
||||
<div className="info-date flex items-center mr-[15px]">
|
||||
<i className="icon_2025 time-big" />
|
||||
<span className="text-[#1877F2] ml-[5px]">12/03/2025</span>
|
||||
</div>
|
||||
<a href="" className="info-share flex items-center">
|
||||
<i className="icon_2025 share" />
|
||||
<span className="ml-[5px] mt-[2px]">Chia sẻ</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center mt-[5px] text-base">
|
||||
<div className="source-review flex items-centermr-[10px]">
|
||||
<span>Reviews trên:</span>
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
Internet
|
||||
</a>
|
||||
<p className="ml-[5px]">1233 đánh giá</p>
|
||||
</div>
|
||||
<div className="pl-[10px] ml-[10px] flex items-center border-l-[1.5px] border-[#000]">
|
||||
<a href="" className="mr-[5px] text-[#462F91]">
|
||||
BestPC
|
||||
</a>
|
||||
<p>12003 đánh giá</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="box-price flex items-center my-[10px]">
|
||||
<span className="mr-[10px]">Giá:</span>
|
||||
<b className="text-[#D80A00] text-[28px]">
|
||||
9.000.000đ - 12.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<div className="total-shop flex items-center">
|
||||
<div className="box-shop">
|
||||
<i className="icon_2025 shop" />
|
||||
</div>
|
||||
<p className="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
|
||||
<div className="box-summary mt-[15px]">
|
||||
<ul>
|
||||
<li>
|
||||
CPU: Intel Core i7-8750H ( 2.2 GHz - 4.1 GHz / 9MB / 6 nhân,
|
||||
12 luồng )
|
||||
</li>
|
||||
<li>Màn hình: 15.6" ( 1920 x 1080 ) , không cảm ứng</li>
|
||||
<li>RAM: 1 x 8GB DDR4 2666MHz</li>
|
||||
<li>
|
||||
Đồ họa: Intel UHD Graphics 630 / NVIDIA GeForce GTX 1050Ti
|
||||
4GB GDDR5
|
||||
</li>
|
||||
<li>Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD 5400RPM</li>
|
||||
<li>Hệ điều hành: Windows 10 Home SL 64-bit</li>
|
||||
<li>Pin: 4 cell 64 Wh Pin liền</li>
|
||||
<li>khối lượng: 2.5 kg</li>
|
||||
<li>Cổng giao tiếp: 1x USB 2.0,</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href=""
|
||||
className="group mt-4 flex items-center justify-center w-ful py-[10px] border border-[#D3D3D3] rounded-[4px] text-center hover:bg-[var(--color-global)] hover:text-white"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/icon-file-save.png"
|
||||
className="w-[18px] h-[24px] block group-hover:brightness-[0] group-hover:invert-[1]"
|
||||
alt="save"
|
||||
/>
|
||||
<b className="ml-[10px] text-base">Lưu sản phẩm lại xem sau</b>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* end thông tin sản phẩm */}
|
||||
|
||||
<SupplierListBox />
|
||||
{/* end nhà cung cấp */}
|
||||
|
||||
<MemberReview />
|
||||
{/* đánh giá thành viên bestpc */}
|
||||
|
||||
<ProductReview />
|
||||
{/* đánh giá trên internet */}
|
||||
|
||||
<ProductDescription />
|
||||
{/* thông tin sản phẩm */}
|
||||
|
||||
<div class="mt-5 bg-white rounded-[8px] p-[15px]">
|
||||
<div class="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<h3 class="text-xl font-bold">Sản phẩm tương tự</h3>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
|
||||
>
|
||||
<span>Xem tất cả</span>
|
||||
<i class="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative mt-[15px]">
|
||||
<Swiper
|
||||
slidesPerView={5}
|
||||
spaceBetween={15}
|
||||
navigation={{
|
||||
prevEl: "#js-product-similar-btn .swiper-button-prev", // Link to the 'prev' button
|
||||
nextEl: "#js-product-similar-btn .swiper-button-next", // Link to the 'next' button
|
||||
}}
|
||||
freeMode={true}
|
||||
watchSlidesProgress={true}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
className="product-list swiper relative"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div class="btn-slider" id="js-product-similar-btn">
|
||||
<div class="swiper-button-next right-[-15px]"></div>
|
||||
<div class="swiper-button-prev left-[-15px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* sản phẩm tương tự */}
|
||||
|
||||
<div class="mt-5 bg-white rounded-[8px] p-[15px]">
|
||||
<div class="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<h3 class="text-xl font-bold">Sản phẩm bạn có thể thích</h3>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
|
||||
>
|
||||
<span>Xem tất cả</span>
|
||||
<i class="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative mt-[15px]">
|
||||
<Swiper
|
||||
slidesPerView={5}
|
||||
spaceBetween={15}
|
||||
navigation={{
|
||||
prevEl: "#js-product-like-btn .swiper-button-prev", // Link to the 'prev' button
|
||||
nextEl: "#js-product-like-btn .swiper-button-next", // Link to the 'next' button
|
||||
}}
|
||||
freeMode={true}
|
||||
watchSlidesProgress={true}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
className="product-list swiper relative"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<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="locahost-pro flex items-center mb-[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 mb-[5px]">
|
||||
<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 class="price">15.000.000đ</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>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div class="btn-slider" id="js-product-like-btn">
|
||||
<div class="swiper-button-next right-[-15px]"></div>
|
||||
<div class="swiper-button-prev left-[-15px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* sản phẩm yêu thích */}
|
||||
</div>
|
||||
</div>
|
||||
<FormReview />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,547 +0,0 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
|
||||
|
||||
export function ProductDetail() {
|
||||
// const [activeImage, setActiveImage] = useState(
|
||||
// "/src/assets/images/big-product-detail.png"
|
||||
// );
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState(null);
|
||||
|
||||
const prevButtonRef = useRef(null);
|
||||
const nextButtonRef = useRef(null);
|
||||
|
||||
return (
|
||||
<div className="box-product-detail bg-[#F4F4F4]">
|
||||
<div className="container">
|
||||
<div className="breadcrumb p-[12px_0]">
|
||||
<ol
|
||||
itemscope
|
||||
itemtype="http://schema.org/BreadcrumbList"
|
||||
className="ul flex flex-wrap items-center"
|
||||
>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/template/homepage/homepage.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center text-[#637381]"
|
||||
>
|
||||
<span itemprop="name">
|
||||
<span style="font-size: 0; display: none;">Trang chủ</span>
|
||||
<i className="icon_2025 home mr-[5px] mb-[5px]" />
|
||||
</span>
|
||||
</a>{" "}
|
||||
<i className="icon_2025 angle-right ml-[12px]" />
|
||||
<meta itemprop="position" content="1" />
|
||||
</li>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/man-hinh.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center"
|
||||
>
|
||||
<span itemprop="name">Màn hình máy tính</span>
|
||||
<i className="icon_2025 angle-right text-[#637381] ml-[12px]" />
|
||||
</a>
|
||||
<meta itemprop="position" content="2" />
|
||||
</li>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/aivision.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center"
|
||||
>
|
||||
<span itemprop="name">AIVISION</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="3" />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="p-[15px] grid grid-cols-2 gap-[15px] rounded-[8px] bg-white">
|
||||
<div className="left">
|
||||
<div className="relative">
|
||||
<Swiper
|
||||
spaceBetween={10}
|
||||
navigation={true}
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
className="swiper border border-[#B1B1B1 rounded-[12px]"
|
||||
id="js-slider-big"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<img src="/src/assets/images/big-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<img src="/src/assets/images/big-product-detail.jpg" alt="" />
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/big-product-detail-2.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/big-product-detail-3.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/big-product-detail-4.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
<div className="relative mt-[12px]">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
spaceBetween={15}
|
||||
slidesPerView={5}
|
||||
navigation={{
|
||||
prevEl: prevButtonRef.current, // Link to the 'prev' button
|
||||
nextEl: nextButtonRef.current, // Link to the 'next' button
|
||||
}}
|
||||
freeMode={true}
|
||||
watchSlidesProgress={true}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
className="swiper"
|
||||
id="js-slider-small"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/small-product-detail.png"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/small-product-detail.png"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/small-product-detail.png"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/small-product-detail.png"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/small-product-detail.png"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/small-product-detail.png"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/small-product-detail.png"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/src/assets/images/small-product-detail.png"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div className="btn-small swiper-navigation">
|
||||
<button
|
||||
ref={prevButtonRef}
|
||||
className="swiper-button-prev"
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "-15px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
ref={nextButtonRef}
|
||||
className="swiper-button-next"
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: "-20px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="right">
|
||||
<h1 className="text-[24px] text-black mb-[5px]">
|
||||
Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6"
|
||||
FHD) - Hàng Chính Hãng
|
||||
</h1>
|
||||
<div className="flex items-center text-base">
|
||||
<div className="info-review flex items-center mr-[15px]">
|
||||
<i className="icon-star star-small" />
|
||||
<span className="ml-[5px] mt-[2px]">5/5</span>
|
||||
</div>
|
||||
<div className="info-view flex items-center mr-[15px]">
|
||||
<i className="icon_2025 view" />
|
||||
<span className="text-[#1877F2] ml-[5px]">120</span>
|
||||
</div>
|
||||
<div className="info-date flex items-center mr-[15px]">
|
||||
<i className="icon_2025 time-big" />
|
||||
<span className="text-[#1877F2] ml-[5px]">12/03/2025</span>
|
||||
</div>
|
||||
<a href="" className="info-share flex items-center">
|
||||
<i className="icon_2025 share" />
|
||||
<span className="ml-[5px] mt-[2px]">Chia sẻ</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center mt-[5px] text-base">
|
||||
<div className="source-review flex items-centermr-[10px]">
|
||||
<span>Reviews trên:</span>
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
Internet
|
||||
</a>
|
||||
<p className="ml-[5px]">1233 đánh giá</p>
|
||||
</div>
|
||||
<div className="pl-[10px] ml-[10px] flex items-center border-l-[1.5px] border-[#000]">
|
||||
<a href="" className="mr-[5px] text-[#462F91]">
|
||||
BestPC
|
||||
</a>
|
||||
<p>12003 đánh giá</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="box-price flex items-center my-[10px]">
|
||||
<span className="mr-[10px]">Giá:</span>
|
||||
<b className="text-[#D80A00] text-[28px]">
|
||||
9.000.000đ - 12.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<div className="total-shop flex items-center">
|
||||
<div className="box-shop">
|
||||
<i className="icon_2025 shop" />
|
||||
</div>
|
||||
<p className="ml-[7px]">Có 12 cửa hàng bán</p>
|
||||
</div>
|
||||
|
||||
<div className="box-summary mt-[15px]">
|
||||
<ul>
|
||||
<li>
|
||||
CPU: Intel Core i7-8750H ( 2.2 GHz - 4.1 GHz / 9MB / 6 nhân,
|
||||
12 luồng )
|
||||
</li>
|
||||
<li>Màn hình: 15.6" ( 1920 x 1080 ) , không cảm ứng</li>
|
||||
<li>RAM: 1 x 8GB DDR4 2666MHz</li>
|
||||
<li>
|
||||
Đồ họa: Intel UHD Graphics 630 / NVIDIA GeForce GTX 1050Ti 4GB
|
||||
GDDR5
|
||||
</li>
|
||||
<li>Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD 5400RPM</li>
|
||||
<li>Hệ điều hành: Windows 10 Home SL 64-bit</li>
|
||||
<li>Pin: 4 cell 64 Wh Pin liền</li>
|
||||
<li>khối lượng: 2.5 kg</li>
|
||||
<li>Cổng giao tiếp: 1x USB 2.0,</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href=""
|
||||
className="group mt-4 flex items-center justify-center w-ful py-[10px] border border-[#D3D3D3] rounded-[4px] text-center hover:bg-[var(--color-global)] hover:text-white"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/icon-file-save.png"
|
||||
className="w-[18px] h-[24px] block group-hover:brightness-[0] group-hover:invert-[1]"
|
||||
alt="save"
|
||||
/>
|
||||
<b className="ml-[10px] text-base">Lưu sản phẩm lại xem sau</b>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* end thông tin sản phẩm */}
|
||||
|
||||
<div class="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 class="text-xl ">Nhà cung cấp trên BestPC - Tại Hà Nội</h3>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]">
|
||||
<i class="icon_2025 map-2"></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
|
||||
class="outline-none ml-[5px] h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
class=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Sắp xếp</option>
|
||||
<option value="">Mới</option>
|
||||
</select>
|
||||
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]">
|
||||
<div>
|
||||
<b>Nhà cung cấp</b>
|
||||
</div>
|
||||
<div>
|
||||
<b>Chính sách vận chuyển</b>
|
||||
</div>
|
||||
<div>
|
||||
<b>Giá</b>
|
||||
</div>
|
||||
<div>
|
||||
<b>Sản phẩm</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list ">
|
||||
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div class="flex items-start supplier">
|
||||
<div class="logo mr-[10px]">
|
||||
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/src/assets/images/logo-hacom.png"
|
||||
class="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-2">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" class="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" class="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
|
||||
cả ngày thứ 7, CN
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<div class="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b class="ml-[5px] text-[#D80A00]">
|
||||
9.000.000đ - 20.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
<b class="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div class="flex items-start supplier">
|
||||
<div class="logo mr-[10px]">
|
||||
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/src/assets/images/logo-hacom.png"
|
||||
class="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-2">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" class="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" class="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
|
||||
cả ngày thứ 7, CN
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<div class="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b class="ml-[5px] text-[#D80A00]">
|
||||
9.000.000đ - 20.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
<b class="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div class="flex items-start supplier">
|
||||
<div class="logo mr-[10px]">
|
||||
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/src/assets/images/logo-hacom.png"
|
||||
class="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-2">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" class="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" class="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
|
||||
cả ngày thứ 7, CN
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<div class="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b class="ml-[5px] text-[#D80A00]">
|
||||
9.000.000đ - 20.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
<b class="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end list */}
|
||||
|
||||
<a
|
||||
href=""
|
||||
class="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
|
||||
>
|
||||
Xem thêm
|
||||
</a>
|
||||
</div>
|
||||
{/* end nhà cung cấp */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user