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

17
assets/css/style.css
View File

@@ -35,7 +35,7 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 16px; font-size: 16px;
background: #fff; background: #fff;
min-width: 1400px; min-width: 1200px;
color: #303030; color: #303030;
} }
@@ -1279,4 +1279,19 @@ html {
#js-box-list-review .list-review { #js-box-list-review .list-review {
max-height: 450px; max-height: 450px;
} }
}
@media (max-width: 1400px) {
body {
font-size: 14px;
}
.container {
width: 1200px !important;
max-width: 1200px !important;
}
.box-category-homepage .list-category {
gap: 20px;
}
.article-classifieds .item-classifieds .map-time {
flex-wrap: wrap;
}
}/*# sourceMappingURL=style.css.map */ }/*# sourceMappingURL=style.css.map */

2
assets/css/style.css.map
View File

File diff suppressed because one or more lines are too long

20
assets/css/style.scss
View File

@@ -37,7 +37,7 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 16px; font-size: 16px;
background: #fff; background: #fff;
min-width: 1400px; min-width: 1200px;
color: #303030; color: #303030;
} }
html { html {
@@ -1347,3 +1347,21 @@ html {
} }
} }
} }
@media (max-width: 1400px) {
body {
font-size: 14px;
}
.container {
width: 1200px !important;
max-width: 1200px !important;
}
.box-category-homepage {
.list-category {
gap: 20px;
}
}
.article-classifieds .item-classifieds .map-time {
flex-wrap: wrap;
}
}

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

@@ -1,7 +1,7 @@
export function Header() { export function Header() {
return ( return (
<header class="w-full"> <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="container">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="/" class="logo block mr-[100px]"> <a href="/" class="logo block mr-[100px]">
@@ -84,7 +84,7 @@ export function Header() {
</div> </div>
</div> </div>
{/* Navigation Section */} {/* 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="container">
<div class="flex items-center justify-between w-full"> <div class="flex items-center justify-between w-full">
<div class="header-menu relative group"> <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 Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="price">19.999.000đ</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"> <div class="flex items-center">
<i class="icon_2025 map-3"></i> <i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p> <p class="ml-[5px]">Quận thanh xuân</p>
@@ -1282,7 +1319,7 @@ export function Home() {
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="price">19.999.000đ</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"> <div class="flex items-center">
<i class="icon_2025 map-3"></i> <i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p> <p class="ml-[5px]">Quận thanh xuân</p>
@@ -1319,44 +1356,7 @@ export function Home() {
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="price">19.999.000đ</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>
</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="flex items-center"> <div class="flex items-center">
<i class="icon_2025 map-3"></i> <i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p> <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> </ol>
</div> </div>
{/* <!-- Action Bar --> */} {/* <!-- 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="grid grid-cols-10 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="col-span-4 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<a className="w-[24px] ml-[10px]" href="javascript:void()"> <a className="w-[24px] ml-[10px]" href="javascript:void()">
<i className="icon_2025 copy"></i> <i className="icon_2025 copy"></i>
</a> </a>
@@ -54,7 +54,7 @@ export function Buildpc() {
value="https://bestpc.vn/restricted.php" value="https://bestpc.vn/restricted.php"
/> />
</div> </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> <p className="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
<input <input
type="text" type="text"
@@ -62,7 +62,7 @@ export function Buildpc() {
value="" value=""
/> />
</div> </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 <a
href="javascript:void(0)" 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" 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> </ol>
</div> </div>
{/* <!-- Action Bar --> */} {/* <!-- 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="grid grid-cols-10 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="col-span-4 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<a className="w-[24px] ml-[10px]" href="javascript:void()"> <a className="w-[24px] ml-[10px]" href="javascript:void()">
<i className="icon_2025 copy"></i> <i className="icon_2025 copy"></i>
</a> </a>
@@ -54,7 +54,7 @@ export function CompareBuildpc() {
value="https://bestpc.vn/restricted.php" value="https://bestpc.vn/restricted.php"
/> />
</div> </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> <p className="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
<input <input
type="text" type="text"
@@ -62,7 +62,7 @@ export function CompareBuildpc() {
value="" value=""
/> />
</div> </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 <a
href="javascript:void(0)" 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" 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 Tham khảo giá sản phẩm
</h1> </h1>
<div className="flex gap-[20px] mb-[30px]"> <div className="grid grid-cols-3 gap-[20px] mb-[30px]">
<div className="w-[450px] p-[15px] rounded-[8px] border border-[#d7d7d7]"> <div className="col-span-1 p-[15px] rounded-[8px] border border-[#d7d7d7]">
<Swiper <Swiper
spaceBetween={10} spaceBetween={10}
navigation={true} navigation={true}
@@ -238,7 +238,7 @@ export function DetailBuildpc() {
</div> </div>
</div> </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]"> <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>Nhà cung cấp</b>
<b>Giá gốc</b> <b>Giá gốc</b>
@@ -300,8 +300,8 @@ export function DetailBuildpc() {
</div> </div>
</div> </div>
<div className="flex gap-[20px]"> <div className="grid grid-cols-3 gap-[20px]">
<div className="w-[450px]"> <div className="col-span-1">
<h3 className="title text-2xl font-bold pb-2.5 border-b-[1px] border-[#ababab]"> <h3 className="title text-2xl font-bold pb-2.5 border-b-[1px] border-[#ababab]">
Thông số kỹ thuật Thông số kỹ thuật
</h3> </h3>
@@ -368,7 +368,7 @@ export function DetailBuildpc() {
</div> </div>
</div> </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]"> <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> <h3 className="title text-2xl font-bold">Đánh giá</h3>
<a <a

18
template/homepage/homepage.html
View File

@@ -28,7 +28,7 @@
<main class="flex overflow-hidden flex-col items-center bg-white"> <main class="flex overflow-hidden flex-col items-center bg-white">
<!-- Header Section --> <!-- Header Section -->
<header class="w-full"> <header class="w-full">
<div class="header-main px-16 py-6 bg-[var(--color-global)]"> <div class="header-main py-6 bg-[var(--color-global)]">
<div class="container"> <div class="container">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="/" class="logo block mr-[100px]"> <a href="/" class="logo block mr-[100px]">
@@ -82,7 +82,7 @@
</div> </div>
</div> </div>
<!-- Navigation Section --> <!-- 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 py-2.5 w-full bg-white shadow-[0px_4px_4px_rgba(149,149,149,0.25)]">
<div class="container"> <div class="container">
<div class="flex items-center justify-between w-full"> <div class="flex items-center justify-between w-full">
<div class="header-menu relative group"> <div class="header-menu relative group">
@@ -448,35 +448,34 @@
<div class="flex gap-[40px] header-bottom-right"> <div class="flex gap-[40px] header-bottom-right">
<a href="/buildpc" class="flex items-center group"> <a href="/buildpc" class="flex items-center group">
<i class="icon_2025 buildpc group-hover:buildpc-hover"></i> <i class="icon_2025 buildpc group-hover:buildpc-hover"></i>
<span <span class="ml-[7px] group-hover:text-[var(--color-global)]">Build
class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Build
PC</span> PC</span>
</a> </a>
<a href="/tim-nguoi-ban" class="flex items-center group"> <a href="/tim-nguoi-ban" class="flex items-center group">
<i class="icon_2025 shop"></i> <i class="icon_2025 shop"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Tìm <span class="ml-[7px] group-hover:text-[var(--color-global)]">Tìm
người bán</span> người bán</span>
</a> </a>
<a href="/" class="flex items-center group"> <a href="/" class="flex items-center group">
<i class="icon_2025 map-2"></i> <i class="icon_2025 map-2"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Địa <span class="ml-[7px] group-hover:text-[var(--color-global)]">Địa
chỉ chỉ
sửa chữa</span> sửa chữa</span>
</a> </a>
<a href="/" class="flex items-center group"> <a href="/" class="flex items-center group">
<i class="icon_2025 question"></i> <i class="icon_2025 question"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Hỏi <span class="ml-[7px] group-hover:text-[var(--color-global)">Hỏi
đáp</span> đáp</span>
</a> </a>
<a href="/" class="flex items-center group"> <a href="/" class="flex items-center group">
<i class="icon_2025 prduct-save"></i> <i class="icon_2025 prduct-save"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Sản <span class="ml-[7px] group-hover:text-[var(--color-global)]">Sản
phẩm phẩm
đã lưu</span> đã lưu</span>
</a> </a>
<a href="/" class="flex items-center group"> <a href="/" class="flex items-center group">
<i class="icon_2025 article"></i> <i class="icon_2025 article"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Tin <span class="ml-[7px] group-hover:text-[var(--color-global)]">Tin
rạo rạo
vặt</span> vặt</span>
</a> </a>
@@ -1666,6 +1665,7 @@
} }
</script> </script>
</body> </body>
</html> </html>