tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
333bb01f4e1be9f6a5d4c4ba403a430f92e4c087
bestpc/template/buildpc/buildpc-detail.html

338 lines
19 KiB
HTML
Raw Normal View History

upload
2025-05-11 21:25:48 +07:00
<!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="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" />
update 17/5
2025-05-17 10:10:23 +07:00
<link rel="stylesheet" href="../../assets/css/style.css" rel="stylesheet" />
upload
2025-05-11 21:25:48 +07:00
</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">
update 17/5
2025-05-17 10:10:23 +07:00
<img src="../../assets/images/big-product-detail.png"
upload
2025-05-11 21:25:48 +07:00
class="block w-full h-[400px] object-contain" alt="">
</div>
<div class="swiper-slide">
update 17/5
2025-05-17 10:10:23 +07:00
<img src="../../assets/images/big-product-detail-3.jpg"
upload
2025-05-11 21:25:48 +07:00
class="block w-full h-[400px] object-contain" alt="">
</div>
<div class="swiper-slide">
update 17/5
2025-05-17 10:10:23 +07:00
<img src="../../assets/images/big-product-detail-4.jpg"
upload
2025-05-11 21:25:48 +07:00
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]">
update 17/5
2025-05-17 10:10:23 +07:00
<img src="../../assets/images/small-product-detail.png"
upload
2025-05-11 21:25:48 +07:00
class="w-full block h-[80px] object-contain " alt="">
</div>
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
update 17/5
2025-05-17 10:10:23 +07:00
<img src="../../assets/images/small-product-detail.png"
upload
2025-05-11 21:25:48 +07:00
class="w-full block h-[80px] object-contain" alt="">
</div>
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
update 17/5
2025-05-17 10:10:23 +07:00
<img src="../../assets/images/small-product-detail.png"
upload
2025-05-11 21:25:48 +07:00
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">
update 17/5
2025-05-17 10:10:23 +07:00
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
upload
2025-05-11 21:25:48 +07:00
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">
update 17/5
2025-05-17 10:10:23 +07:00
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
upload
2025-05-11 21:25:48 +07:00
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]">
update 17/5
2025-05-17 10:10:23 +07:00
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar">
upload
2025-05-11 21:25:48 +07:00
<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>
<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>
Reference in New Issue Copy Permalink