340 lines
19 KiB
HTML
340 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>BESTPC - Trang chủ</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="../src/assets/css/font.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||
<link rel="stylesheet" href="../src/assets/css/style.css" rel="stylesheet" />
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="page-buildpc pb-[100px]">
|
||
<div class="container">
|
||
<div class="breadcrumb p-[12px_0]">
|
||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||
class="flex items-center pr-[12px]">
|
||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||
<meta itemprop="position" content="1">
|
||
</li>
|
||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||
class="flex items-center pr-[12px]">
|
||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||
<p class="font-[600]" itemprop="name">
|
||
Tạo máy tính riêng của bạn
|
||
</p>
|
||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||
<meta itemprop="position" content="2">
|
||
</li>
|
||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||
class="flex items-center pr-[12px]">
|
||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||
<p class="font-[600]" itemprop="name">
|
||
Tham khảo giá sản phẩm
|
||
</p>
|
||
</a>
|
||
<meta itemprop="position" content="2">
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<h1 class="text-2xl mb-5 block font-bold">Tham khảo giá sản phẩm</h1>
|
||
|
||
<div class="flex gap-[20px] mb-[30px]">
|
||
<div class="w-[450px] p-[15px] rounded-[8px] border border-[#d7d7d7]">
|
||
<div class="swiper" id="js-slider-build-big">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="../src/assets/images/big-product-detail.png"
|
||
class="block w-full h-[400px] object-contain" alt="">
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="../src/assets/images/big-product-detail-3.jpg"
|
||
class="block w-full h-[400px] object-contain" alt="">
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="../src/assets/images/big-product-detail-4.jpg"
|
||
class="block w-full h-[400px] object-contain" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="relative mt-[12px] w-[80%] mx-[auto]">
|
||
<div thumbsSlider="" class="swiper " id="js-slider-build-small">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-full block h-[80px] object-contain " alt="">
|
||
</div>
|
||
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-full block h-[80px] object-contain" alt="">
|
||
</div>
|
||
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-full block h-[80px] object-contain" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-small" id="btn-slider-small">
|
||
<div class="swiper-button-next right-[-15px] w-[25px] h-[25px]">
|
||
</div>
|
||
<div class="swiper-button-prev left-[-15px] w-[25px] h-[25px] text-sm"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box-review mt-3">
|
||
<div class="flex items-center justify-center">
|
||
<b>Người đánh giá</b>
|
||
<div class="flex items-center ml-[10px]">(40 ratings, 4.9 <i
|
||
class="icon-star star-small ml-1"></i>)</div>
|
||
</div>
|
||
<div class="">
|
||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||
<p class="w-[11%] text-[var(--color-hover)] font-bold">5 sao</p>
|
||
<div class="relative w-[79%]">
|
||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||
</div>
|
||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||
</div>
|
||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||
<p class="w-[11%] text-[var(--color-hover)] font-bold">4 sao</p>
|
||
<div class="relative w-[79%]">
|
||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||
</div>
|
||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||
</div>
|
||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||
<p class="w-[11%] text-[var(--color-hover)] font-bold">3 sao</p>
|
||
<div class="relative w-[79%]">
|
||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||
</div>
|
||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||
</div>
|
||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||
<p class="w-[11%] text-[var(--color-hover)] font-bold">2 sao</p>
|
||
<div class="relative w-[79%]">
|
||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||
</div>
|
||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||
</div>
|
||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||
<p class="w-[11%] text-[var(--color-hover)] font-bold">1 sao</p>
|
||
<div class="relative w-[79%]">
|
||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||
</div>
|
||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-565px)]">
|
||
<div class="grid grid-cols-7 gap-[5px] items-center pb-2.5 border-b-[1px] border-[#ababab]">
|
||
<b>Nhà cung cấp</b>
|
||
<b>Giá gốc</b>
|
||
<b>Khuyến mãi</b>
|
||
<b>Tình trạng</b>
|
||
<b>Giao hàng</b>
|
||
<b class="col-span-2">Thành tiền</b>
|
||
</div>
|
||
<div class="list">
|
||
<div
|
||
class="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
|
||
<a href="" class="block">
|
||
<img src="../src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||
class="w-full block h-[28px] object-contain" alt="">
|
||
</a>
|
||
<div class="price font-bold">3.700.000Vnđ</div>
|
||
<div class="saleoff text-center font-bold">20%</div>
|
||
<div class="status text-blue-500 font-bold">Còn hàng</div>
|
||
<div class="ship underline">Liên hệ</div>
|
||
<div class="flex items-center justify-between col-span-2">
|
||
<div class="total-price font-bold">3.000.000Vnđ</div>
|
||
<a href=""
|
||
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">Mua
|
||
ngay</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div
|
||
class="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
|
||
<a href="" class="block">
|
||
<img src="../src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||
class="w-full block h-[28px] object-contain" alt="">
|
||
</a>
|
||
<div class="price font-bold">3.700.000Vnđ</div>
|
||
<div class="saleoff text-center font-bold">20%</div>
|
||
<div class="status text-red-500 font-bold">Còn hàng</div>
|
||
<div class="ship underline text-green-500">free</div>
|
||
<div class="flex items-center justify-between col-span-2">
|
||
<div class="total-price font-bold">3.000.000Vnđ</div>
|
||
<a href=""
|
||
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">Mua
|
||
ngay</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="flex gap-[20px]">
|
||
<div class="w-[450px]">
|
||
<h3 class="title text-2xl font-bold pb-2.5 border-b-[1px] border-[#ababab]">Thông số kỹ thuật</h3>
|
||
<div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Manufacturer</b>
|
||
<p>AMD</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Part #</b>
|
||
<ul>
|
||
<li>100-1000001084WOF</li>
|
||
<li>AMD Ryzen 7 9800X3D</li>
|
||
<li>100-100001084WOF</li>
|
||
</ul>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Series</b>
|
||
<p>AMD Ryzen 7</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Microarchitecture</b>
|
||
<p>Zen 5</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Core Family</b>
|
||
<p>Granite Ridge</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Socket</b>
|
||
<p>AM5</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Core</b>
|
||
<p>8</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Thread Count</b>
|
||
<p>16</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Performance Core Clock</b>
|
||
<p>4.7 GHz</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>Performance Core Boost Clock</b>
|
||
<p>5.2 GHz</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>L2 Cache</b>
|
||
<p>8 MB</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>L3 Cache</b>
|
||
<p>96 MB</p>
|
||
</div>
|
||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||
<b>TDP</b>
|
||
<p>120 W</p>
|
||
</div>
|
||
<div class="item py-2">
|
||
<b>Integrated Graphics</b>
|
||
<p>Radeon</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-470px)]">
|
||
<div class="flex items-center justify-between pb-2.5 border-b-[1px] border-[#ababab]">
|
||
<h3 class="title text-2xl font-bold">Đánh giá
|
||
</h3>
|
||
<a href=""
|
||
class="inline-block py-1 px-5 bg-blue-600 text-white font-bold rounded-[4px] hover:bg-blue-800">Xem
|
||
tất
|
||
cả bình luận</a>
|
||
</div>
|
||
<div class="list mt-3">
|
||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||
<div class="w-[80px] mr-[20px]">
|
||
<img src="../src/assets/images/avartar-review-1.png" width="75px" height="75px"
|
||
alt="avartar">
|
||
<div class="mt-[10px]">
|
||
<i class="icon-star star5"></i>
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-100px)]">
|
||
<b class="mb-[10px]">Dino</b>
|
||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||
typesetting
|
||
industry. Lorem Ipsum has been the industry's standard
|
||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||
and scrambled it to make a type specimen
|
||
book. I</p>
|
||
<div class="btn flex items-center">
|
||
<div class="flex items-center mr-[10px]">
|
||
<b class="mr-[5px]">120</b>
|
||
<i class="icon_2025 view"></i>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<b class="mr-[5px]">120</b>
|
||
<i class="icon_2025 comment"></i>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||
|
||
<script>
|
||
var swiper_small = new Swiper("#js-slider-build-small", {
|
||
loop: true,
|
||
spaceBetween: 10,
|
||
slidesPerView: 3,
|
||
freeMode: true,
|
||
watchSlidesProgress: true,
|
||
navigation: {
|
||
nextEl: "#btn-slider-build-small .swiper-button-next",
|
||
prevEl: " #btn-slider-build-small .swiper-button-prev",
|
||
},
|
||
});
|
||
var swiper_big = new Swiper("#js-slider-build-big", {
|
||
loop: true,
|
||
spaceBetween: 10,
|
||
navigation: {
|
||
nextEl: "#btn-slider-build-big .swiper-button-next",
|
||
prevEl: " #btn-slider-build-big .swiper-button-prev",
|
||
},
|
||
thumbs: {
|
||
swiper: swiper_small,
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |