update 16:18 12/05
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,17 @@
|
||||
import { h } from "preact";
|
||||
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">
|
||||
@@ -17,7 +28,7 @@ export function ProductDetail() {
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
href="/template/homepage/homepage.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center text-[#637381]"
|
||||
>
|
||||
@@ -62,6 +73,474 @@ export function ProductDetail() {
|
||||
</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