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

update 6/5

Browse Source
This commit is contained in:
Tieptk
2025-05-06 13:51:24 +07:00
parent d02a1aa1c7
commit fc94c6fd1a
10 changed files with 754 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,7 @@
}
html {
font-size: 100%;
font-family: "Shopee", sans-serif;
font-family: "Roboto", sans-serif;
}
.container {
@@ -33,29 +33,14 @@ html {
width: 1400px !important;
}
body {
font-family: "Shopee";
font-family: "Roboto", sans-serif;
font-size: 14px;
background: #fff;
min-width: 1400px;
color: #303030;
}
html {
font-family: "Shopee";
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Shopee Bold";
}
b {
font-family: "Shopee Bold";
}
p,
span {
font-family: "Shopee Medium";
font-family: "Roboto", sans-serif;
}
.icon_2025 {
background: url(../images/icon_2025.png) no-repeat;
@@ -198,6 +183,16 @@ span {
background-position: -190px -133px;
transform: rotate(180deg);
}
&.upload_image {
width: 24px;
height: 24px;
background-position: -88px -70px;
}
&.remove {
width: 24px;
height: 24px;
background-position: -126px -124px;
}
}
.icon-star {
@@ -249,7 +244,7 @@ span {
position: relative;
background: transparent;
cursor: pointer;
font-family: "Shopee Bold";
font-weight: 700;
&:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(70, 47, 145, 0.2);
@@ -257,7 +252,6 @@ span {
}
option {
background: var(--color-global);
font-family: "Shopee";
}
}
&::after {
@@ -420,7 +414,6 @@ span {
font-weight: 700;
}
.tabs-item {
font-family: "Shopee Regular";
font-weight: 400;
}
}
@@ -479,9 +472,14 @@ span {
right: 0;
top: 0;
}
.icon-remove {
position: absolute;
right: 0;
top: 0;
}
}
.name-product {
font-family: "Shopee Bold";
font-weight: 700;
font-size: 18px;
color: #000;
margin-bottom: 5px;
@@ -490,7 +488,7 @@ span {
}
}
.price {
font-family: "Shopee Bold";
font-weight: 700;
font-size: 18px;
color: #d80a00;
margin-bottom: 5px;
@@ -515,10 +513,14 @@ span {
}
}
.summary {
font-family: "Shopee medium";
margin-bottom: 5px;
color: #595959;
}
&.save {
.icon-save {
right: 30px;
}
}
}
.box-best-rated-products {
@@ -532,7 +534,7 @@ span {
.box-category-homepage {
.item p:hover {
font-family: "Shopee Bold";
font-weight: 700;
}
}
@@ -559,7 +561,7 @@ span {
width: calc(100% - 100px);
}
.name-article {
font-family: "Shopee Bold";
font-weight: bold;
font-size: 16px;
color: #000;
margin-bottom: 3px;
@@ -569,7 +571,6 @@ span {
}
.summary {
margin-bottom: 3px;
font-family: "Shopee Regular";
font-size: 16px;
color: #161616;
}
@@ -594,7 +595,7 @@ span {
border: 1px solid var(--color-global);
border-radius: 4px;
span {
font-family: "Shopee Bold";
font-weight: 700;
margin-right: 5px;
}
&:hover {
@@ -629,16 +630,15 @@ span {
width: calc(100% - 100px);
}
.summary {
font-family: "shopee Regular";
font-size: 15px;
margin-bottom: 5px;
}
.name-classifieds {
font-family: "shopee Bold";
font-weight: bold;
font-size: 18px;
}
.price {
font-family: "shopee Bold";
font-weight: bold;
font-size: 20px;
color: #d80a00;
}
@@ -715,15 +715,12 @@ span {
.breadcrumb {
span {
font-size: 18px;
font-family: "Shopee Medium";
}
}
.page-category {
.list-cate a {
font-family: "Shopee Regular";
&.active {
font-family: "Shopee Bold";
font-weight: 600;
}
&:hover {
@@ -741,7 +738,6 @@ span {
border-radius: 3px;
}
.box-filter label {
font-family: "Shopee Light";
cursor: pointer;
}
#js-slider-big {
@@ -800,14 +796,13 @@ span {
}
}
.box-summary {
font-family: "Shopee Medium";
font-size: 16px;
li {
list-style: inside;
}
}
.btn-more-review {
font-family: "Shopee Bold";
font-weight: bold;
}
.box-desc {
.content {
@@ -889,11 +884,10 @@ span {
}
.table td {
padding: 14px 20px;
font-family: "Shopee medium";
}
.table td:first-child {
width: 230px;
font-family: "Shopee Bold";
font-weight: bold;
font-weight: inherit;
}
.table tr {
@@ -917,33 +911,139 @@ span {
display: block;
}
}
.star-rating {
display: flex;
justify-content: center;
align-items: center;
.rating-selection {
float: left;
display: inline;
}
.star-rating input {
display: none; /* Ẩn các input radio */
}
.star-rating label {
.rating-selection input {
float: right;
width: 15px;
height: 15px;
padding: 0;
margin: 0 0 0 -15px;
opacity: 0;
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 */
.rating-selection .rating-star {
position: relative;
float: right;
display: block;
width: 28px;
height: 26px;
background: url(../images/star_min.png) 0 -33px;
cursor: pointer;
margin-right: 7px;
}
/* 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 */
.rating-selection .rating-star:hover {
background-position: 0 0;
}
.rating-selection .rating-star:hover,
.rating-star:hover ~ .rating-star {
background-position: 0 0;
}
.rating-selection .rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
background-position: 0 0;
}
.form-input {
input,
textarea {
width: 100%;
height: 44px;
padding: 0 20px;
border-radius: 12px;
border: 1px solid #c1c1c1;
font-size: 13px;
color: #9c9c9c;
&:focus {
outline: 2px solid var(--color-global);
border: none;
}
}
textarea {
height: 100px;
padding: 15px 20px;
resize: none;
}
}
.padding {
border: 1px solid #cdcdcd;
width: fit-content;
margin: 20px auto 0 auto;
border-radius: 4px;
a {
border-right: 1px solid #cdcdcd;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 40px;
width: 40px;
height: 40px;
&:last-child {
border: 0;
}
}
a:hover,
.active {
border-radius: 4px;
border: 1px solid #1877f2;
color: #1877f2;
}
}
.select-two-arrow {
position: relative;
background: #fff;
height: 40px;
border: 1px solid #d5d5d5;
border-radius: 4px;
line-height: 40px;
select {
position: relative;
appearance: none;
border: 0;
background: transparent;
outline: 0;
width: 100%;
padding: 0 30px 0 10px;
z-index: 2;
}
&::before {
position: absolute;
content: "";
right: 7px;
top: 5px;
width: 11px;
height: 17px;
background: url(../images/icon_2025.png) no-repeat;
background-size: 228px 175px;
display: block;
background-position: -212px -152px;
transform: rotate(270deg);
z-index: 1;
}
&::after {
position: absolute;
content: "";
right: 7px;
bottom: 5px;
width: 11px;
height: 17px;
background: url(../images/icon_2025.png) no-repeat;
background-size: 228px 175px;
display: block;
background-position: -212px -152px;
transform: rotate(90deg);
z-index: 1;
}
}