update 6/5
This commit is contained in:
@@ -48,6 +48,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="box-backgorund px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
<div class="box-backgorund px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||||
|
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|||||||
110
list-store.html
Normal file
110
list-store.html
Normal 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>
|
||||||
@@ -463,7 +463,7 @@
|
|||||||
|
|
||||||
<div class="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
|
<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>
|
<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
|
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>
|
đánh giá của bạn về sản phẩm</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -1559,18 +1559,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="backgroundPopup" class="active"></div>
|
<div id="backgroundPopup" onclick="closeReview()"></div>
|
||||||
<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]"
|
||||||
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]">
|
id="js-box-review">
|
||||||
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
<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>
|
<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>
|
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-form-review w-[500px] mx-[auto]">
|
<div class="info-form-review w-[500px] mx-[auto]">
|
||||||
<a href="" class="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]">
|
<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%"
|
<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>
|
||||||
<a href="" class="text-center block mb-[10px]">Laptop Gaming Asus TUF FX505GE-BQ037T Core
|
<a href="" class="text-center block mb-[10px]">Laptop Gaming Asus TUF FX505GE-BQ037T Core
|
||||||
i7-8750H/Win10(15.6" FHD) -
|
i7-8750H/Win10(15.6" FHD) -
|
||||||
@@ -1578,23 +1578,48 @@
|
|||||||
Chính
|
Chính
|
||||||
Hãng</a>
|
Hãng</a>
|
||||||
|
|
||||||
<div class="star-rating">
|
<div class="flex justify-center">
|
||||||
<input type="radio" id="star1" name="rating" value="1">
|
<div class="rating-selection">
|
||||||
<label for="star1"></label>
|
<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">
|
<input type="radio" class="rating-input" id="star4" name="rating" value="4">
|
||||||
<label for="star2"></label>
|
<label for="star4" class="rating-star"></label>
|
||||||
|
|
||||||
<input type="radio" id="star3" name="rating" value="3">
|
<input type="radio" class="rating-input" id="star3" name="rating" value="3">
|
||||||
<label for="star3"></label>
|
<label for="star3" class="rating-star"></label>
|
||||||
|
|
||||||
<input type="radio" id="star4" name="rating" value="4">
|
<input type="radio" class="rating-input" id="star2" name="rating" value="2">
|
||||||
<label for="star4"></label>
|
<label for="star2" class="rating-star"></label>
|
||||||
|
|
||||||
<input type="radio" id="star5" name="rating" value="5">
|
<input type="radio" class="rating-input" id="star1" name="rating" value="1">
|
||||||
<label for="star5"></label>
|
<label for="star1" class="rating-star"></label>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
@@ -1681,7 +1706,15 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
function showReview() {
|
||||||
|
$("#js-box-review").removeClass('hidden');
|
||||||
|
$("#backgroundPopup").addClass('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeReview() {
|
||||||
|
$("#js-box-review").addClass('hidden');
|
||||||
|
$("#backgroundPopup").removeClass('active');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
271
product-save.html
Normal file
271
product-save.html
Normal 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>
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
:root {
|
:root {
|
||||||
--color-global: #462f91;
|
--color-global: #462f91;
|
||||||
--color-title: #0d0d9c;
|
--color-title: #0d0d9c;
|
||||||
@@ -22,7 +21,7 @@
|
|||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font-family: "Shopee", sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -32,7 +31,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Shopee";
|
font-family: "Roboto", sans-serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
min-width: 1400px;
|
min-width: 1400px;
|
||||||
@@ -40,25 +39,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: "Shopee";
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-family: "Shopee Bold";
|
|
||||||
}
|
|
||||||
|
|
||||||
b {
|
|
||||||
font-family: "Shopee Bold";
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
span {
|
|
||||||
font-family: "Shopee Medium";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon_2025 {
|
.icon_2025 {
|
||||||
@@ -202,6 +183,16 @@ span {
|
|||||||
background-position: -190px -133px;
|
background-position: -190px -133px;
|
||||||
transform: rotate(180deg);
|
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 {
|
.icon-star {
|
||||||
background: url(../images/icon_star.png) no-repeat;
|
background: url(../images/icon_star.png) no-repeat;
|
||||||
@@ -254,7 +245,7 @@ span {
|
|||||||
position: relative;
|
position: relative;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.box-select .select:focus {
|
.box-select .select:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
@@ -263,7 +254,6 @@ span {
|
|||||||
}
|
}
|
||||||
.box-select .select option {
|
.box-select .select option {
|
||||||
background: var(--color-global);
|
background: var(--color-global);
|
||||||
font-family: "Shopee";
|
|
||||||
}
|
}
|
||||||
.box-select::after {
|
.box-select::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -394,7 +384,6 @@ span {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.tabs-list .tabs-item {
|
.tabs-list .tabs-item {
|
||||||
font-family: "Shopee Regular";
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -453,8 +442,13 @@ span {
|
|||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
.product-item .product-image .icon-remove {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
.product-item .name-product {
|
.product-item .name-product {
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
@@ -463,7 +457,7 @@ span {
|
|||||||
color: var(--color-title);
|
color: var(--color-title);
|
||||||
}
|
}
|
||||||
.product-item .price {
|
.product-item .price {
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #d80a00;
|
color: #d80a00;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
@@ -488,10 +482,12 @@ span {
|
|||||||
filter: brightness(0) invert(1);
|
filter: brightness(0) invert(1);
|
||||||
}
|
}
|
||||||
.product-item .summary {
|
.product-item .summary {
|
||||||
font-family: "Shopee medium";
|
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
color: #595959;
|
color: #595959;
|
||||||
}
|
}
|
||||||
|
.product-item.save .icon-save {
|
||||||
|
right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.box-best-rated-products .swiper-button-next {
|
.box-best-rated-products .swiper-button-next {
|
||||||
right: -20px;
|
right: -20px;
|
||||||
@@ -501,7 +497,7 @@ span {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.box-category-homepage .item p:hover {
|
.box-category-homepage .item p:hover {
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-article {
|
.item-article {
|
||||||
@@ -529,7 +525,7 @@ span {
|
|||||||
width: calc(100% - 100px);
|
width: calc(100% - 100px);
|
||||||
}
|
}
|
||||||
.item-article .name-article {
|
.item-article .name-article {
|
||||||
font-family: "Shopee Bold";
|
font-weight: bold;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
@@ -539,7 +535,6 @@ span {
|
|||||||
}
|
}
|
||||||
.item-article .summary {
|
.item-article .summary {
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
font-family: "Shopee Regular";
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #161616;
|
color: #161616;
|
||||||
}
|
}
|
||||||
@@ -564,7 +559,7 @@ span {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.more-link span {
|
.more-link span {
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.more-link:hover {
|
.more-link:hover {
|
||||||
@@ -601,16 +596,15 @@ span {
|
|||||||
width: calc(100% - 100px);
|
width: calc(100% - 100px);
|
||||||
}
|
}
|
||||||
.item-classifieds .summary {
|
.item-classifieds .summary {
|
||||||
font-family: "shopee Regular";
|
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
.item-classifieds .name-classifieds {
|
.item-classifieds .name-classifieds {
|
||||||
font-family: "shopee Bold";
|
font-weight: bold;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.item-classifieds .price {
|
.item-classifieds .price {
|
||||||
font-family: "shopee Bold";
|
font-weight: bold;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #d80a00;
|
color: #d80a00;
|
||||||
}
|
}
|
||||||
@@ -676,14 +670,9 @@ span {
|
|||||||
|
|
||||||
.breadcrumb span {
|
.breadcrumb span {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: "Shopee Medium";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-category .list-cate a {
|
|
||||||
font-family: "Shopee Regular";
|
|
||||||
}
|
|
||||||
.page-category .list-cate a.active {
|
.page-category .list-cate a.active {
|
||||||
font-family: "Shopee Bold";
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.page-category .list-cate a:hover {
|
.page-category .list-cate a:hover {
|
||||||
@@ -700,7 +689,6 @@ span {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.box-filter label {
|
.box-filter label {
|
||||||
font-family: "Shopee Light";
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -756,14 +744,13 @@ span {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.box-product-detail .box-summary {
|
.box-product-detail .box-summary {
|
||||||
font-family: "Shopee Medium";
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.box-product-detail .box-summary li {
|
.box-product-detail .box-summary li {
|
||||||
list-style: inside;
|
list-style: inside;
|
||||||
}
|
}
|
||||||
.box-product-detail .btn-more-review {
|
.box-product-detail .btn-more-review {
|
||||||
font-family: "Shopee Bold";
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.box-product-detail .box-desc .content {
|
.box-product-detail .box-desc .content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -837,12 +824,11 @@ span {
|
|||||||
|
|
||||||
.table td {
|
.table td {
|
||||||
padding: 14px 20px;
|
padding: 14px 20px;
|
||||||
font-family: "Shopee medium";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table td:first-child {
|
.table td:first-child {
|
||||||
width: 230px;
|
width: 230px;
|
||||||
font-family: "Shopee Bold";
|
font-weight: bold;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -869,33 +855,140 @@ span {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.star-rating {
|
.rating-selection {
|
||||||
display: flex;
|
float: left;
|
||||||
justify-content: center;
|
display: inline;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.star-rating input {
|
.rating-selection input {
|
||||||
display: none; /* Ẩn các input radio */
|
float: right;
|
||||||
}
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
.star-rating label {
|
padding: 0;
|
||||||
|
margin: 0 0 0 -15px;
|
||||||
|
opacity: 0;
|
||||||
cursor: pointer;
|
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 */
|
.rating-selection .rating-star {
|
||||||
.star-rating input:checked ~ label {
|
position: relative;
|
||||||
background-image: url("../images/icon-star-active.png"); /* Đặt hình sao màu vàng khi chọn */
|
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 */
|
.rating-selection .rating-star:hover {
|
||||||
.star-rating label:hover,
|
background-position: 0 0;
|
||||||
.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,
|
||||||
|
.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 */
|
}/*# sourceMappingURL=style.css.map */
|
||||||
File diff suppressed because one or more lines are too long
@@ -24,7 +24,7 @@
|
|||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font-family: "Shopee", sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -33,29 +33,14 @@ html {
|
|||||||
width: 1400px !important;
|
width: 1400px !important;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
font-family: "Shopee";
|
font-family: "Roboto", sans-serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
min-width: 1400px;
|
min-width: 1400px;
|
||||||
color: #303030;
|
color: #303030;
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
font-family: "Shopee";
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-family: "Shopee Bold";
|
|
||||||
}
|
|
||||||
b {
|
|
||||||
font-family: "Shopee Bold";
|
|
||||||
}
|
|
||||||
p,
|
|
||||||
span {
|
|
||||||
font-family: "Shopee Medium";
|
|
||||||
}
|
}
|
||||||
.icon_2025 {
|
.icon_2025 {
|
||||||
background: url(../images/icon_2025.png) no-repeat;
|
background: url(../images/icon_2025.png) no-repeat;
|
||||||
@@ -198,6 +183,16 @@ span {
|
|||||||
background-position: -190px -133px;
|
background-position: -190px -133px;
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
&.upload_image {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -88px -70px;
|
||||||
|
}
|
||||||
|
&.remove {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -126px -124px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-star {
|
.icon-star {
|
||||||
@@ -249,7 +244,7 @@ span {
|
|||||||
position: relative;
|
position: relative;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: 0 0 0 2px rgba(70, 47, 145, 0.2);
|
box-shadow: 0 0 0 2px rgba(70, 47, 145, 0.2);
|
||||||
@@ -257,7 +252,6 @@ span {
|
|||||||
}
|
}
|
||||||
option {
|
option {
|
||||||
background: var(--color-global);
|
background: var(--color-global);
|
||||||
font-family: "Shopee";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&::after {
|
&::after {
|
||||||
@@ -420,7 +414,6 @@ span {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.tabs-item {
|
.tabs-item {
|
||||||
font-family: "Shopee Regular";
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -479,9 +472,14 @@ span {
|
|||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
.icon-remove {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.name-product {
|
.name-product {
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
@@ -490,7 +488,7 @@ span {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.price {
|
.price {
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #d80a00;
|
color: #d80a00;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
@@ -515,10 +513,14 @@ span {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.summary {
|
.summary {
|
||||||
font-family: "Shopee medium";
|
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
color: #595959;
|
color: #595959;
|
||||||
}
|
}
|
||||||
|
&.save {
|
||||||
|
.icon-save {
|
||||||
|
right: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-best-rated-products {
|
.box-best-rated-products {
|
||||||
@@ -532,7 +534,7 @@ span {
|
|||||||
|
|
||||||
.box-category-homepage {
|
.box-category-homepage {
|
||||||
.item p:hover {
|
.item p:hover {
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -559,7 +561,7 @@ span {
|
|||||||
width: calc(100% - 100px);
|
width: calc(100% - 100px);
|
||||||
}
|
}
|
||||||
.name-article {
|
.name-article {
|
||||||
font-family: "Shopee Bold";
|
font-weight: bold;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
@@ -569,7 +571,6 @@ span {
|
|||||||
}
|
}
|
||||||
.summary {
|
.summary {
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
font-family: "Shopee Regular";
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #161616;
|
color: #161616;
|
||||||
}
|
}
|
||||||
@@ -594,7 +595,7 @@ span {
|
|||||||
border: 1px solid var(--color-global);
|
border: 1px solid var(--color-global);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
span {
|
span {
|
||||||
font-family: "Shopee Bold";
|
font-weight: 700;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
@@ -629,16 +630,15 @@ span {
|
|||||||
width: calc(100% - 100px);
|
width: calc(100% - 100px);
|
||||||
}
|
}
|
||||||
.summary {
|
.summary {
|
||||||
font-family: "shopee Regular";
|
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
.name-classifieds {
|
.name-classifieds {
|
||||||
font-family: "shopee Bold";
|
font-weight: bold;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.price {
|
.price {
|
||||||
font-family: "shopee Bold";
|
font-weight: bold;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #d80a00;
|
color: #d80a00;
|
||||||
}
|
}
|
||||||
@@ -715,15 +715,12 @@ span {
|
|||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
span {
|
span {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: "Shopee Medium";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-category {
|
.page-category {
|
||||||
.list-cate a {
|
.list-cate a {
|
||||||
font-family: "Shopee Regular";
|
|
||||||
&.active {
|
&.active {
|
||||||
font-family: "Shopee Bold";
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
@@ -741,7 +738,6 @@ span {
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
.box-filter label {
|
.box-filter label {
|
||||||
font-family: "Shopee Light";
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#js-slider-big {
|
#js-slider-big {
|
||||||
@@ -800,14 +796,13 @@ span {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.box-summary {
|
.box-summary {
|
||||||
font-family: "Shopee Medium";
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
li {
|
li {
|
||||||
list-style: inside;
|
list-style: inside;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn-more-review {
|
.btn-more-review {
|
||||||
font-family: "Shopee Bold";
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.box-desc {
|
.box-desc {
|
||||||
.content {
|
.content {
|
||||||
@@ -889,11 +884,10 @@ span {
|
|||||||
}
|
}
|
||||||
.table td {
|
.table td {
|
||||||
padding: 14px 20px;
|
padding: 14px 20px;
|
||||||
font-family: "Shopee medium";
|
|
||||||
}
|
}
|
||||||
.table td:first-child {
|
.table td:first-child {
|
||||||
width: 230px;
|
width: 230px;
|
||||||
font-family: "Shopee Bold";
|
font-weight: bold;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
}
|
}
|
||||||
.table tr {
|
.table tr {
|
||||||
@@ -917,33 +911,139 @@ span {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.star-rating {
|
|
||||||
display: flex;
|
.rating-selection {
|
||||||
justify-content: center;
|
float: left;
|
||||||
align-items: center;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.star-rating input {
|
.rating-selection input {
|
||||||
display: none; /* Ẩn các input radio */
|
float: right;
|
||||||
}
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
.star-rating label {
|
padding: 0;
|
||||||
|
margin: 0 0 0 -15px;
|
||||||
|
opacity: 0;
|
||||||
cursor: pointer;
|
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 */
|
.rating-selection .rating-star {
|
||||||
.star-rating input:checked ~ label {
|
position: relative;
|
||||||
background-image: url("../images/icon-star-active.png"); /* Đặt hình sao màu vàng khi chọn */
|
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 */
|
.rating-selection .rating-star:hover {
|
||||||
.star-rating label:hover,
|
background-position: 0 0;
|
||||||
.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,
|
||||||
|
.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
BIN
src/assets/images/banner-list-product-save.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 620 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 41 KiB |
BIN
src/assets/images/star_min.png
Normal file
BIN
src/assets/images/star_min.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 942 B |
Reference in New Issue
Block a user