tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upload 19.5

Browse Source
This commit is contained in:
Tieptk
2025-05-19 11:07:57 +07:00
parent 333bb01f4e
commit d3ff98b39f
9 changed files with 101 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/header/Header.tsx
View File

@@ -1,7 +1,7 @@
export function Header() {
return (
<header class="w-full">
<div class="header-main px-16 py-6 bg-[var(--color-global)]">
<div class="header-main px-[10px] py-6 bg-[var(--color-global)]">
<div class="container">
<div class="flex items-center justify-between">
<a href="/" class="logo block mr-[100px]">
@@ -84,7 +84,7 @@ export function Header() {
</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)]">
<nav class="header-bottom px-[10px] 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">

80
src/pages/Home/index.tsx
View File

@@ -1245,7 +1245,44 @@ export function Home() {
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price">19.999.000đ</div>
<div class="flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="map-time flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="flex items-center">
<i class="icon_2025 map-3"></i>
<p class="ml-[5px] map">Quận thanh xuân</p>
</div>
<div class="flex items-center">
<i class="icon_2025 time-gray"></i>
<p class="ml-[5px] time">30 phút trước</p>
</div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
<p>Còn 5 ngày</p>
</div>
</div>
<a href="" class="staff flex items-center">
<img
src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block object-contain rounded-full"
width="100%"
height="100%"
alt="avartar"
/>
<b class="ml-[5px]">Thanh mai</b>
</a>
</div>
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="/assets/images/image-article.png" alt="" />
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">
Xu hướng công nghệ nhìn từ CES 2025
</a>
<div class="summary line-clamp-2 text-[#595959]">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price">19.999.000đ</div>
<div class="map-time flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="flex items-center">
<i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p>
@@ -1282,7 +1319,7 @@ export function Home() {
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price">19.999.000đ</div>
<div class="flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="map-time flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="flex items-center">
<i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p>
@@ -1319,44 +1356,7 @@ export function Home() {
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price">19.999.000đ</div>
<div class="flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="flex items-center">
<i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p>
</div>
<div class="flex items-center">
<i class="icon_2025 time-gray"></i>
<p class="ml-[5px]">30 phút trước</p>
</div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
<p>Còn 5 ngày</p>
</div>
</div>
<a href="" class="staff flex items-center">
<img
src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block object-contain rounded-full"
width="100%"
height="100%"
alt="avartar"
/>
<b class="ml-[5px]">Thanh mai</b>
</a>
</div>
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="/assets/images/image-article.png" alt="" />
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">
Xu hướng công nghệ nhìn từ CES 2025
</a>
<div class="summary line-clamp-2 text-[#595959]">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price">19.999.000đ</div>
<div class="flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="map-time flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="flex items-center">
<i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p>

8
src/pages/buildpc/Buildpc.tsx
View File

@@ -43,8 +43,8 @@ export function Buildpc() {
</ol>
</div>
{/* <!-- Action Bar --> */}
<div className="flex gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
<div className="w-[615px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<div className="grid grid-cols-10 gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
<div className="col-span-4 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<a className="w-[24px] ml-[10px]" href="javascript:void()">
<i className="icon_2025 copy"></i>
</a>
@@ -54,7 +54,7 @@ export function Buildpc() {
value="https://bestpc.vn/restricted.php"
/>
</div>
<div className="w-[370px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<div className="col-span-3 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<p className="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
<input
type="text"
@@ -62,7 +62,7 @@ export function Buildpc() {
value=""
/>
</div>
<div className="grid grid-cols-3 gap-[10px] w-[calc(100%-615px-370px)]">
<div className="grid grid-cols-3 gap-[10px] col-span-3">
<a
href="javascript:void(0)"
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"

8
src/pages/buildpc/CompareBuildpc.tsx
View File

@@ -43,8 +43,8 @@ export function CompareBuildpc() {
</ol>
</div>
{/* <!-- Action Bar --> */}
<div className="flex gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
<div className="w-[615px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<div className="grid grid-cols-10 gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
<div className="col-span-4 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<a className="w-[24px] ml-[10px]" href="javascript:void()">
<i className="icon_2025 copy"></i>
</a>
@@ -54,7 +54,7 @@ export function CompareBuildpc() {
value="https://bestpc.vn/restricted.php"
/>
</div>
<div className="w-[370px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<div className="col-span-3 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<p className="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
<input
type="text"
@@ -62,7 +62,7 @@ export function CompareBuildpc() {
value=""
/>
</div>
<div className="grid grid-cols-3 gap-[10px] w-[calc(100%-615px-370px)]">
<div className="grid grid-cols-3 gap-[10px] col-span-3">
<a
href="javascript:void(0)"
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"

12
src/pages/buildpc/DetailBuildpc.tsx
View File

@@ -63,8 +63,8 @@ export function DetailBuildpc() {
Tham khảo giá sản phẩm
</h1>
<div className="flex gap-[20px] mb-[30px]">
<div className="w-[450px] p-[15px] rounded-[8px] border border-[#d7d7d7]">
<div className="grid grid-cols-3 gap-[20px] mb-[30px]">
<div className="col-span-1 p-[15px] rounded-[8px] border border-[#d7d7d7]">
<Swiper
spaceBetween={10}
navigation={true}
@@ -238,7 +238,7 @@ export function DetailBuildpc() {
</div>
</div>
</div>
<div className="w-[calc(100%-565px)]">
<div className="col-span-2">
<div className="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>
@@ -300,8 +300,8 @@ export function DetailBuildpc() {
</div>
</div>
<div className="flex gap-[20px]">
<div className="w-[450px]">
<div className="grid grid-cols-3 gap-[20px]">
<div className="col-span-1">
<h3 className="title text-2xl font-bold pb-2.5 border-b-[1px] border-[#ababab]">
Thông số kỹ thuật
</h3>
@@ -368,7 +368,7 @@ export function DetailBuildpc() {
</div>
</div>
</div>
<div className="w-[calc(100%-470px)]">
<div className="col-span-2">
<div className="flex items-center justify-between pb-2.5 border-b-[1px] border-[#ababab]">
<h3 className="title text-2xl font-bold">Đánh giá</h3>
<a