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

1
category-detail.html
View File

@@ -48,6 +48,7 @@
</div>
<div class="box-backgorund px-3 pt-2.5 pb-12 mt-3.5 bg-white">
<div class="flex">

110
list-store.html Normal file
View File

@@ -0,0 +1,110 @@
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="page-list-store bg-[#EFEFEF] pb-[100px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Tìm người bán
</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="box-backgorund p-[15px] rounded-[12px] mt-3.5 bg-white">
<div class="flex items-center justify-between">
<h3 class="text-2xl text-black font-bold">Danh sách cửa hàng</h3>
<div class="right flex items-center">
<div class="w-[520px] relative rounded-[8px] mr-[15px] input-search border border-[#dddddd]">
<form action="/search" enctype="text/plain" method="get"
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden">
<input type="text" name="q" placeholder="Nhập địa chỉ cửa bạn để tìm cửa hàng gần nhất"
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
onclick="$('.autocomplete-suggestions').show();">
<button type="submit" class="absolute left-[10px] top-[5px] w-[40px] h-[35px] "><i
class="icon_2025 search "></i></button>
</form>
</div>
<a href=""
class="block w-[190px] h-[45px] leading-[45px] border-[1px] border-[#462f91] rounded-[8px] text-center text-[#462f91] font-[500] hover:bg-[#462f91] hover:text-white">Giới
thiệu cửa hàng mới</a>
</div>
</div>
<div class="filter flex items-center justify-between p-[10px] bg-[#f4f4f4] mt-[10px]">
<div class="flex items-center">
<a href=""
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[var(--color-global)] text-white mr-[10px]">Gần
tôi
nhất</a>
<a href=""
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đánh
giá tốt nhất</a>
<a href=""
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[40px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đã
xem</a>
</div>
<div class="flex items-center">
<span class="mr-[10px]">Lọc theo</span>
<div class="select-two-arrow mr-[10px]">
<select name="" id="" class="">
<option value="">Tỉnh/Thành phố</option>
<option value="">Hà nội</option>
</select>
</div>
<div class="select-two-arrow mr-[10px]">
<select name="" id="" class="">
<option value="">Quận/Huyện</option>
<option value="">Hà nội</option>
</select>
</div>
<select name="" id="" class="p-[10px] border-[1px] border-[#d5d5d5] rounded-[4px]">
<option value="">Cách tôi 3km</option>
<option value="">10km</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

67
product-detail.html
View File

@@ -463,7 +463,7 @@
<div class="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
<p class="text-center mt-[10px]">Đánh giá của bạn về sản phẩm</p>
<a href="javascript:void(0)"
<a href="javascript:void(0)" onclick="showReview()"
class="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]">Gửi
đánh giá của bạn về sản phẩm</a>
</div>
@@ -1559,18 +1559,18 @@
</div>
</div>
<div id="backgroundPopup" class="active"></div>
<div
class="box-form-review fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]">
<div id="backgroundPopup" onclick="closeReview()"></div>
<div class="box-form-review hidden fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
id="js-box-review">
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
<b class="text-center text-xl block">Đánh giá sản phẩm</b>
<a href="javascript:void(0)" id="js-close-review"
<a href="javascript:void(0)" onclick="closeReview()" id="js-close-review"
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
</div>
<div class="info-form-review w-[500px] mx-[auto]">
<a href="" class="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]">
<img src="./src/assets/images/small-product-detail.png" width="100%" height="100%"
class="block w-[140px] h-[140px] m-[0_auto]" alt="">
class="block w-[100px] h-[100px] m-[0_auto]" alt="">
</a>
<a href="" class="text-center block mb-[10px]">Laptop Gaming Asus TUF FX505GE-BQ037T Core
i7-8750H/Win10(15.6" FHD) -
@@ -1578,23 +1578,48 @@
Chính
Hãng</a>
<div class="star-rating">
<input type="radio" id="star1" name="rating" value="1">
<label for="star1"></label>
<div class="flex justify-center">
<div class="rating-selection">
<input type="radio" class="rating-input" id="star5" name="rating" value="5">
<label for="star5" class="rating-star"></label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2"></label>
<input type="radio" class="rating-input" id="star4" name="rating" value="4">
<label for="star4" class="rating-star"></label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3"></label>
<input type="radio" class="rating-input" id="star3" name="rating" value="3">
<label for="star3" class="rating-star"></label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4"></label>
<input type="radio" class="rating-input" id="star2" name="rating" value="2">
<label for="star2" class="rating-star"></label>
<input type="radio" id="star5" name="rating" value="5">
<label for="star5"></label>
<input type="radio" class="rating-input" id="star1" name="rating" value="1">
<label for="star1" class="rating-star"></label>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="form-input mt-[20px]">
<input type="text" name="title" placeholder="Mời bạn nhập tiêu đề..." />
<div class="note-error"></div>
</div>
<div class="form-input mt-[10px]">
<textarea name="content" placeholder="Mời bạn chia sẻ cảm nhận..." id=""></textarea>
<div class="note-error"></div>
</div>
<input id="js-file-upload-id" type="hidden" value="">
<div id="js-container-selector" class="mt-[10px] flex items-center">
<a href="javascript:void(0)" class="flex items-center" id="js-select-file">
<i class="icon_2025 upload_image"></i>
<span class="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
<span class="px-[5px]">(tối đa 3 ảnh)</span>
</a>
</div>
<button type="submit"
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]">Gửi
đánh
giá</button>
</div>
@@ -1681,7 +1706,15 @@
</script>
<script>
function showReview() {
$("#js-box-review").removeClass('hidden');
$("#backgroundPopup").addClass('active');
}
function closeReview() {
$("#js-box-review").addClass('hidden');
$("#backgroundPopup").removeClass('active');
}
</script>
</body>

271
product-save.html Normal file
View File

@@ -0,0 +1,271 @@
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./src/assets/css/font.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="page-category">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Màn hình máy tính
</span> <i class="icon_2025 angle-right text-[#637381] ml-[12px]"></i>
</a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/aivision.html" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
AIVISION
</span>
</a>
<meta itemprop="position" content="3">
</li>
</ol>
</div>
<div class="slider-banner">
</div>
<div class="product-list grid grid-cols-5 gap-[15px]">
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item save">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
<div class="icon-remove"><i class="icon_2025 remove"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2 text-center">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
</div>
<div class="padding flex items-center justify-center mt-[20px]">
<a href="" class="">
<i class="icon_2025 angle-right scale-x-[-1]"></i>
</a>
<a href="" class="active">
<span>1</span>
</a>
<a href="" class="">
<span>2</span>
</a>
<a href="" class="">
<span>3</span>
</a>
<a href="" class="">
<i class="icon_2025 angle-right"></i>
</a>
</div>
</div>
</div>
</body>
</html>

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

@@ -1,4 +1,3 @@
@charset "UTF-8";
:root {
--color-global: #462f91;
--color-title: #0d0d9c;
@@ -22,7 +21,7 @@
html {
font-size: 100%;
font-family: "Shopee", sans-serif;
font-family: "Roboto", sans-serif;
}
.container {
@@ -32,7 +31,7 @@ html {
}
body {
font-family: "Shopee";
font-family: "Roboto", sans-serif;
font-size: 14px;
background: #fff;
min-width: 1400px;
@@ -40,25 +39,7 @@ body {
}
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 {
@@ -202,6 +183,16 @@ span {
background-position: -190px -133px;
transform: rotate(180deg);
}
.icon_2025.upload_image {
width: 24px;
height: 24px;
background-position: -88px -70px;
}
.icon_2025.remove {
width: 24px;
height: 24px;
background-position: -126px -124px;
}
.icon-star {
background: url(../images/icon_star.png) no-repeat;
@@ -254,7 +245,7 @@ span {
position: relative;
background: transparent;
cursor: pointer;
font-family: "Shopee Bold";
font-weight: 700;
}
.box-select .select:focus {
outline: none;
@@ -263,7 +254,6 @@ span {
}
.box-select .select option {
background: var(--color-global);
font-family: "Shopee";
}
.box-select::after {
position: absolute;
@@ -394,7 +384,6 @@ span {
font-weight: 700;
}
.tabs-list .tabs-item {
font-family: "Shopee Regular";
font-weight: 400;
}
@@ -453,8 +442,13 @@ span {
right: 0;
top: 0;
}
.product-item .product-image .icon-remove {
position: absolute;
right: 0;
top: 0;
}
.product-item .name-product {
font-family: "Shopee Bold";
font-weight: 700;
font-size: 18px;
color: #000;
margin-bottom: 5px;
@@ -463,7 +457,7 @@ span {
color: var(--color-title);
}
.product-item .price {
font-family: "Shopee Bold";
font-weight: 700;
font-size: 18px;
color: #d80a00;
margin-bottom: 5px;
@@ -488,10 +482,12 @@ span {
filter: brightness(0) invert(1);
}
.product-item .summary {
font-family: "Shopee medium";
margin-bottom: 5px;
color: #595959;
}
.product-item.save .icon-save {
right: 30px;
}
.box-best-rated-products .swiper-button-next {
right: -20px;
@@ -501,7 +497,7 @@ span {
}
.box-category-homepage .item p:hover {
font-family: "Shopee Bold";
font-weight: 700;
}
.item-article {
@@ -529,7 +525,7 @@ span {
width: calc(100% - 100px);
}
.item-article .name-article {
font-family: "Shopee Bold";
font-weight: bold;
font-size: 16px;
color: #000;
margin-bottom: 3px;
@@ -539,7 +535,6 @@ span {
}
.item-article .summary {
margin-bottom: 3px;
font-family: "Shopee Regular";
font-size: 16px;
color: #161616;
}
@@ -564,7 +559,7 @@ span {
border-radius: 4px;
}
.more-link span {
font-family: "Shopee Bold";
font-weight: 700;
margin-right: 5px;
}
.more-link:hover {
@@ -601,16 +596,15 @@ span {
width: calc(100% - 100px);
}
.item-classifieds .summary {
font-family: "shopee Regular";
font-size: 15px;
margin-bottom: 5px;
}
.item-classifieds .name-classifieds {
font-family: "shopee Bold";
font-weight: bold;
font-size: 18px;
}
.item-classifieds .price {
font-family: "shopee Bold";
font-weight: bold;
font-size: 20px;
color: #d80a00;
}
@@ -676,14 +670,9 @@ span {
.breadcrumb span {
font-size: 18px;
font-family: "Shopee Medium";
}
.page-category .list-cate a {
font-family: "Shopee Regular";
}
.page-category .list-cate a.active {
font-family: "Shopee Bold";
font-weight: 600;
}
.page-category .list-cate a:hover {
@@ -700,7 +689,6 @@ span {
}
.box-filter label {
font-family: "Shopee Light";
cursor: pointer;
}
@@ -756,14 +744,13 @@ span {
font-weight: 700;
}
.box-product-detail .box-summary {
font-family: "Shopee Medium";
font-size: 16px;
}
.box-product-detail .box-summary li {
list-style: inside;
}
.box-product-detail .btn-more-review {
font-family: "Shopee Bold";
font-weight: bold;
}
.box-product-detail .box-desc .content {
width: 100%;
@@ -837,12 +824,11 @@ 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;
}
@@ -869,33 +855,140 @@ 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,
.form-input textarea {
width: 100%;
height: 44px;
padding: 0 20px;
border-radius: 12px;
border: 1px solid #c1c1c1;
font-size: 13px;
color: #9c9c9c;
}
.form-input input:focus,
.form-input textarea:focus {
outline: 2px solid var(--color-global);
border: none;
}
.form-input textarea {
height: 100px;
padding: 15px 20px;
resize: none;
}
.padding {
border: 1px solid #cdcdcd;
width: -moz-fit-content;
width: fit-content;
margin: 20px auto 0 auto;
border-radius: 4px;
}
.padding a {
border-right: 1px solid #cdcdcd;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 40px;
width: 40px;
height: 40px;
}
.padding a:last-child {
border: 0;
}
.padding a:hover,
.padding .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-two-arrow select {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: transparent;
outline: 0;
width: 100%;
padding: 0 30px 0 10px;
z-index: 2;
}
.select-two-arrow::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;
}
.select-two-arrow::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;
}/*# sourceMappingURL=style.css.map */

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

File diff suppressed because one or more lines are too long

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;
}
}

BIN
src/assets/images/banner-list-product-save.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 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: 41 KiB

BIN
src/assets/images/star_min.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 942 B