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

update

Browse Source
This commit is contained in:
Tieptk
2025-05-05 17:28:22 +07:00
parent b26fc7d61a
commit d02a1aa1c7
13 changed files with 1772 additions and 1338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -11,7 +11,7 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- <script type="module" src="/src/index.tsx"></script> --> <script type="module" src="/src/index.tsx"></script>
</body> </body>
</html> </html>

2589
product-detail.html
View File

File diff suppressed because it is too large Load Diff

166
src/assets/css/style.css
View File

@@ -1,3 +1,4 @@
@charset "UTF-8";
:root { :root {
--color-global: #462f91; --color-global: #462f91;
--color-title: #0d0d9c; --color-title: #0d0d9c;
@@ -135,6 +136,11 @@ span {
height: 14.5px; height: 14.5px;
background-position: -188px -147.5px; background-position: -188px -147.5px;
} }
.icon_2025.time-gray {
width: 16px;
height: 16px;
background-position: -34px -73px;
}
.icon_2025.mouse { .icon_2025.mouse {
width: 20px; width: 20px;
height: 20px; height: 20px;
@@ -180,6 +186,22 @@ span {
height: 25px; height: 25px;
background-position: -152px -69px; background-position: -152px -69px;
} }
.icon_2025.link-review {
width: 18px;
height: 18px;
background-position: -27px -104px;
}
.icon_2025.angle-bottom {
width: 15px;
height: 12px;
background-position: -190px -133px;
}
.icon_2025.angle-top {
width: 15px;
height: 12px;
background-position: -190px -133px;
transform: rotate(180deg);
}
.icon-star { .icon-star {
background: url(../images/icon_star.png) no-repeat; background: url(../images/icon_star.png) no-repeat;
@@ -435,7 +457,7 @@ span {
font-family: "Shopee Bold"; font-family: "Shopee Bold";
font-size: 18px; font-size: 18px;
color: #000; color: #000;
margin-bottom: 10px; margin-bottom: 5px;
} }
.product-item .name-product:hover { .product-item .name-product:hover {
color: var(--color-title); color: var(--color-title);
@@ -465,6 +487,11 @@ span {
background-size: 160px 125px; background-size: 160px 125px;
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
} }
.product-item .summary {
font-family: "Shopee medium";
margin-bottom: 5px;
color: #595959;
}
.box-best-rated-products .swiper-button-next { .box-best-rated-products .swiper-button-next {
right: -20px; right: -20px;
@@ -734,4 +761,141 @@ span {
} }
.box-product-detail .box-summary li { .box-product-detail .box-summary li {
list-style: inside; list-style: inside;
}
.box-product-detail .btn-more-review {
font-family: "Shopee Bold";
}
.box-product-detail .box-desc .content {
width: 100%;
display: block;
overflow: hidden;
position: relative;
}
.box-product-detail .box-desc .content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100px;
background: linear-gradient(transparent, #fff);
}
.box-product-detail .box-desc .content.active {
height: auto !important;
}
.box-product-detail .box-desc .content.active::after {
display: none;
}
.box-product-detail .box-spec .content {
width: 100%;
height: 580px;
display: block;
overflow: hidden;
position: relative;
}
.box-product-detail .box-spec .content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100px;
background: linear-gradient(transparent, #fff);
}
.box-product-detail .box-spec .content.active {
height: auto !important;
}
.box-product-detail .box-spec .content.active::after {
display: none;
}
.box-product-detail .more-all {
display: flex;
justify-content: center;
align-items: center;
color: #ff7a00;
}
.box-product-detail .more-all i {
margin-bottom: 4px;
margin-left: 5px;
}
.nd p,
.nd span {
line-height: 23px;
margin-bottom: 10px;
}
.nd ul {
margin-top: 10px;
}
.nd li {
list-style: inside;
}
.table table {
width: 100%;
}
.table td {
padding: 14px 20px;
font-family: "Shopee medium";
}
.table td:first-child {
width: 230px;
font-family: "Shopee Bold";
font-weight: inherit;
}
.table tr {
background: #f3f3f3;
}
.table tr:nth-child(2n+1) {
background: #fff;
}
#backgroundPopup {
display: none;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2784313725);
border: 1px solid #cecece;
z-index: 99;
}
#backgroundPopup.active {
display: block;
}
.star-rating {
display: flex;
justify-content: center;
align-items: center;
}
.star-rating input {
display: none; /* Ẩn các input radio */
}
.star-rating label {
cursor: pointer;
width: 45px;
height: 45px;
margin: 0 5px;
background-size: cover;
transition: background-image 0.3s ease-in-out;
background-image: url("../images/icon-star-gray.png");
}
/* Sao đã chọn, sử dụng hình ảnh ngôi sao màu vàng */
.star-rating input:checked ~ label {
background-image: url("../images/icon-star-active.png"); /* Đặt hình sao màu vàng khi chọn */
}
/* Sao khi hover, thay đổi màu sắc của sao */
.star-rating label:hover,
.star-rating input:checked ~ label:hover {
background-image: url("../images/icon-star-active.png"); /* Thay đổi hình sao khi hover */
}/*# sourceMappingURL=style.css.map */ }/*# sourceMappingURL=style.css.map */

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

File diff suppressed because one or more lines are too long

168
src/assets/css/style.scss
View File

@@ -131,6 +131,11 @@ span {
height: 14.5px; height: 14.5px;
background-position: -188px -147.5px; background-position: -188px -147.5px;
} }
&.time-gray {
width: 16px;
height: 16px;
background-position: -34px -73px;
}
&.mouse { &.mouse {
width: 20px; width: 20px;
height: 20px; height: 20px;
@@ -177,6 +182,22 @@ span {
height: 25px; height: 25px;
background-position: -152px -69px; background-position: -152px -69px;
} }
&.link-review {
width: 18px;
height: 18px;
background-position: -27px -104px;
}
&.angle-bottom {
width: 15px;
height: 12px;
background-position: -190px -133px;
}
&.angle-top {
width: 15px;
height: 12px;
background-position: -190px -133px;
transform: rotate(180deg);
}
} }
.icon-star { .icon-star {
@@ -463,7 +484,7 @@ span {
font-family: "Shopee Bold"; font-family: "Shopee Bold";
font-size: 18px; font-size: 18px;
color: #000; color: #000;
margin-bottom: 10px; margin-bottom: 5px;
&:hover { &:hover {
color: var(--color-title); color: var(--color-title);
} }
@@ -493,6 +514,11 @@ span {
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
} }
} }
.summary {
font-family: "Shopee medium";
margin-bottom: 5px;
color: #595959;
}
} }
.box-best-rated-products { .box-best-rated-products {
@@ -780,4 +806,144 @@ span {
list-style: inside; list-style: inside;
} }
} }
.btn-more-review {
font-family: "Shopee Bold";
}
.box-desc {
.content {
width: 100%;
display: block;
overflow: hidden;
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100px;
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
background: linear-gradient(transparent, #fff);
}
&.active {
height: auto !important;
&::after {
display: none;
}
}
}
}
.box-spec {
.content {
width: 100%;
height: 580px;
display: block;
overflow: hidden;
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100px;
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
background: linear-gradient(transparent, #fff);
}
&.active {
height: auto !important;
&::after {
display: none;
}
}
}
}
.more-all {
display: flex;
justify-content: center;
align-items: center;
color: #ff7a00;
i {
margin-bottom: 4px;
margin-left: 5px;
}
}
}
.nd {
p,
span {
line-height: 23px;
margin-bottom: 10px;
}
ul {
margin-top: 10px;
}
li {
list-style: inside;
}
}
.table table {
width: 100%;
}
.table td {
padding: 14px 20px;
font-family: "Shopee medium";
}
.table td:first-child {
width: 230px;
font-family: "Shopee Bold";
font-weight: inherit;
}
.table tr {
background: #f3f3f3;
}
.table tr:nth-child(2n + 1) {
background: #fff;
}
#backgroundPopup {
display: none;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #00000047;
border: 1px solid #cecece;
z-index: 99;
&.active {
display: block;
}
}
.star-rating {
display: flex;
justify-content: center;
align-items: center;
}
.star-rating input {
display: none; /* Ẩn các input radio */
}
.star-rating label {
cursor: pointer;
width: 45px;
height: 45px;
margin: 0 5px;
background-size: cover;
transition: background-image 0.3s ease-in-out;
background-image: url("../images/icon-star-gray.png");
}
/* Sao đã chọn, sử dụng hình ảnh ngôi sao màu vàng */
.star-rating input:checked ~ label {
background-image: url("../images/icon-star-active.png"); /* Đặt hình sao màu vàng khi chọn */
}
/* Sao khi hover, thay đổi màu sắc của sao */
.star-rating label:hover,
.star-rating input:checked ~ label:hover {
background-image: url("../images/icon-star-active.png"); /* Thay đổi hình sao khi hover */
} }

BIN
src/assets/images/avartar-review-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
src/assets/images/avartar-review-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/images/avartar-review-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/assets/images/icon-star-active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/icon-star-gray.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/icon_2025.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

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

@@ -1,12 +1,9 @@
import preactLogo from '../../assets/preact.svg'; import "./style.css";
import './style.css';
export function Home() { export function Home() {
return ( return (
<div class="home"> <div class="home">
<a href="https://preactjs.com" target="_blank"> <a href="https://preactjs.com" target="_blank"></a>
<img src={preactLogo} alt="Preact logo" height="160" width="160" />
</a>
<h1>Get Started building Vite-powered Preact Apps </h1> <h1>Get Started building Vite-powered Preact Apps </h1>
<section> <section>
<Resource <Resource

34
src/pages/product/ProductPage.jsx Normal file
View File

@@ -0,0 +1,34 @@
import "./style.css";
const ProductPage = () => {
const { id } = useParams(); // Lấy id sản phẩm từ URL
const product = {
id: id,
name: `Product ${id}`,
description: "Detailed description of the product.",
price: 99.99,
imageUrl: "https://via.placeholder.com/400",
features: ["Feature 1", "Feature 2", "Feature 3"],
reviews: [
{ text: "Great product!", rating: 5 },
{ text: "Good value for money.", rating: 4 },
{ text: "Could be better.", rating: 3 },
],
};
return (
<div className="product-page">
<ProductImage imageUrl={product.imageUrl} altText={product.name} />
<ProductDetail
name={product.name}
description={product.description}
price={product.price}
/>
<ProductFeatures features={product.features} />
<ProductReviews reviews={product.reviews} />
</div>
);
};
export default ProductPage;