up
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
15
README.md
Normal file
15
README.md
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
# `create-preact`
|
||||||
|
|
||||||
|
<h2 align="center">
|
||||||
|
<img height="256" width="256" src="./src/assets/preact.svg">
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<h3 align="center">Get started using Preact and Vite!</h3>
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
- `npm run dev` - Starts a dev server at http://localhost:5173/
|
||||||
|
|
||||||
|
- `npm run build` - Builds for production, emitting to `dist/`
|
||||||
|
|
||||||
|
- `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally
|
||||||
398
category-detail.html
Normal file
398
category-detail.html
Normal file
@@ -0,0 +1,398 @@
|
|||||||
|
<!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 bg-[#F4F4F4]">
|
||||||
|
<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="box-backgorund px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<!-- Left Sidebar - Filters -->
|
||||||
|
<div class="w-[19%]">
|
||||||
|
<div class="mt-3 box-filter">
|
||||||
|
<h2 class="text-xl font-bold text-black pb-[15px] border-b-[1px] border-[#D3D3D3]">Danh mục
|
||||||
|
sản phẩm</h2>
|
||||||
|
<ul class="mt-2 text-base leading-8 text-black list-cate">
|
||||||
|
<li>
|
||||||
|
<a href="" class="active">
|
||||||
|
Máy tính để bàn, máy tính xác tay và linh phụ kiện
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="">Máy tính xách tay (130)</a></li>
|
||||||
|
<li><a href="">Máy chủ (120)</a></li>
|
||||||
|
<li><a href="">Card màn hình (93)</a></li>
|
||||||
|
<li><a href="">Ổ cứng SSD (32)</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="item-filter mt-2.5">
|
||||||
|
<h3
|
||||||
|
class="text-base font-bold leading-loose text-black pt-[10px] border-t-[1px] border-[#D3D3D3]">
|
||||||
|
Lọc theo
|
||||||
|
</h3>
|
||||||
|
<div class="mt-1 text-base leading-8 text-black max-md:ml-2.5">
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-filter mt-2.5">
|
||||||
|
<h3
|
||||||
|
class="text-base font-bold leading-loose text-black pt-[10px] border-t-[1px] border-[#D3D3D3]">
|
||||||
|
Lọc theo
|
||||||
|
</h3>
|
||||||
|
<div class="mt-1 text-base leading-8 text-black max-md:ml-2.5">
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-filter mt-2.5">
|
||||||
|
<h3
|
||||||
|
class="text-base font-bold leading-loose text-black pt-[10px] border-t-[1px] border-[#D3D3D3]">
|
||||||
|
Lượt đánh giá
|
||||||
|
</h3>
|
||||||
|
<div class="mt-1 text-base leading-8 text-black max-md:ml-2.5">
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2 flex items-center"><b>1</b> <i
|
||||||
|
class="icon-star star-small ml-1"></i></label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2 flex items-center"><b>1</b> <i
|
||||||
|
class="icon-star star-small ml-1"></i></label>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item flex items-center ">
|
||||||
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||||
|
<label for="vehicle1" class="ml-2 flex items-center"><b>1</b> <i
|
||||||
|
class="icon-star star-small ml-1"></i></label>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="ml-5 w-[81%]">
|
||||||
|
<div class="mt-2 mb-4 flex items-center justify-between">
|
||||||
|
<h1 class="text-xl max-md:max-w-full">
|
||||||
|
Máy tính để bàn, máy tính xách tay và linh phụ kiện
|
||||||
|
</h1>
|
||||||
|
<select name="" id=""
|
||||||
|
class="w-[120px] border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||||
|
<option value="">Sắp xếp</option>
|
||||||
|
<option value="">Sản phẩm mới</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-list grid grid-cols-4 gap-[15px]">
|
||||||
|
<div class="product-item">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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">
|
||||||
|
<a href="" class="product-image">
|
||||||
|
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||||
|
<div class="box-saleoff">-20%</div>
|
||||||
|
</a>
|
||||||
|
<div class="info-product">
|
||||||
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||||
|
i7</a>
|
||||||
|
<div class="price">15.000.000đ</div>
|
||||||
|
<div class="flex items-center justify-between mb-[5px]">
|
||||||
|
<del class="old-price">16.500.000đ</del>
|
||||||
|
<i class="icon-star star5"></i>
|
||||||
|
</div>
|
||||||
|
<div class="total-shop flex items-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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
135
category.html
Normal file
135
category.html
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<!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>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
violet: {
|
||||||
|
50: "#f5f3ff",
|
||||||
|
900: "#4c1d95",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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>
|
||||||
|
<main class="flex overflow-hidden flex-col items-center bg-white">
|
||||||
|
|
||||||
|
<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="list grid grid-cols-4 gap-[24px]">
|
||||||
|
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item border border-[#c0c0c0] rounded-[8px] p-[12px]">
|
||||||
|
<img src="./src/assets/images/category-avatar.png"
|
||||||
|
class="block w-[200px] h-[200px] object-contain mb-[10px] mx-auto" alt="">
|
||||||
|
<b class="block text-center text-xl line-clamp-1">Máy chủ</b>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
1675
homepage.html
Normal file
1675
homepage.html
Normal file
File diff suppressed because it is too large
Load Diff
17
index.html
Normal file
17
index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="color-scheme" content="light dark" />
|
||||||
|
<title>Vite + Preact</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- <script type="module" src="/src/index.tsx"></script> -->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
8175
package-lock.json
generated
Normal file
8175
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
package.json
Normal file
23
package.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"preact": "^10.25.3",
|
||||||
|
"preact-iso": "^2.9.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@preact/preset-vite": "^2.9.3",
|
||||||
|
"eslint": "^8.57.1",
|
||||||
|
"eslint-config-preact": "^1.5.0",
|
||||||
|
"typescript": "^5.8.3",
|
||||||
|
"vite": "^6.0.4"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": "preact"
|
||||||
|
}
|
||||||
|
}
|
||||||
1615
product-detail.html
Normal file
1615
product-detail.html
Normal file
File diff suppressed because it is too large
Load Diff
15
public/vite.svg
Normal file
15
public/vite.svg
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%">
|
||||||
|
<stop offset="0%" stop-color="#41D1FF"></stop>
|
||||||
|
<stop offset="100%" stop-color="#BD34FE"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%">
|
||||||
|
<stop offset="0%" stop-color="#FFEA83"></stop>
|
||||||
|
<stop offset="8.333%" stop-color="#FFDD35"></stop>
|
||||||
|
<stop offset="100%" stop-color="#FFA800"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path>
|
||||||
|
<path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
41
src/assets/css/font.css
Normal file
41
src/assets/css/font.css
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "Shopee";
|
||||||
|
font-display: swap;
|
||||||
|
src: url(../font//FVHShopeeText-Bold.otf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
font-display: swap;
|
||||||
|
src: url(../font/ShopeeDisplay-Bold.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Shopee Regular";
|
||||||
|
font-display: swap;
|
||||||
|
src: url(../font/ShopeeDisplay-Regular.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Shopee Medium";
|
||||||
|
font-display: swap;
|
||||||
|
src: url(../font/ShopeeDisplay-Medium.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Shopee Light";
|
||||||
|
font-display: swap;
|
||||||
|
src: url(../font/ShopeeDisplay-Light.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Shopee ExtraBold";
|
||||||
|
font-display: swap;
|
||||||
|
src: url(../font/ShopeeDisplay-ExtraBold.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Shopee Black";
|
||||||
|
font-display: swap;
|
||||||
|
src: url(../font/ShopeeDisplay-Black.ttf);
|
||||||
|
}
|
||||||
737
src/assets/css/style.css
Normal file
737
src/assets/css/style.css
Normal file
@@ -0,0 +1,737 @@
|
|||||||
|
:root {
|
||||||
|
--color-global: #462f91;
|
||||||
|
--color-title: #0d0d9c;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #462f91;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.7, #462f91), color-stop(0.5, transparent), to(transparent));
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 100%;
|
||||||
|
font-family: "Shopee", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1400px !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 1400px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Shopee";
|
||||||
|
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";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_2025 {
|
||||||
|
background: url(../images/icon_2025.png) no-repeat;
|
||||||
|
background-size: 228px 175px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.icon_2025.map {
|
||||||
|
width: 20px;
|
||||||
|
height: 26px;
|
||||||
|
background-position: 1px 0px;
|
||||||
|
}
|
||||||
|
.icon_2025.search {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -70px 0;
|
||||||
|
}
|
||||||
|
.icon_2025.user {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
background-position: -133px 0px;
|
||||||
|
}
|
||||||
|
.icon_2025.bar {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background-position: 1px -40px;
|
||||||
|
}
|
||||||
|
.icon_2025.buildpc {
|
||||||
|
width: 36px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -24px -35px;
|
||||||
|
}
|
||||||
|
.icon_2025.shop {
|
||||||
|
width: 22px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -70px -35px;
|
||||||
|
}
|
||||||
|
.icon_2025.map-2 {
|
||||||
|
width: 15px;
|
||||||
|
height: 23px;
|
||||||
|
background-position: -26px -3px;
|
||||||
|
}
|
||||||
|
.icon_2025.map-3 {
|
||||||
|
width: 13px;
|
||||||
|
height: 18px;
|
||||||
|
background-position: -49px -3px;
|
||||||
|
}
|
||||||
|
.icon_2025.question {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
background-position: -100px -35px;
|
||||||
|
}
|
||||||
|
.icon_2025.prduct-save {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -133px -35px;
|
||||||
|
}
|
||||||
|
.icon_2025.article {
|
||||||
|
width: 30px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -162px -35px;
|
||||||
|
}
|
||||||
|
.icon_2025.heart {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -98px -141px;
|
||||||
|
}
|
||||||
|
.icon_2025.link {
|
||||||
|
width: 14px;
|
||||||
|
height: 10px;
|
||||||
|
background-position: -212px -108px;
|
||||||
|
}
|
||||||
|
.icon_2025.time {
|
||||||
|
width: 15px;
|
||||||
|
height: 14.5px;
|
||||||
|
background-position: -188px -147.5px;
|
||||||
|
}
|
||||||
|
.icon_2025.mouse {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-position: -160px -145px;
|
||||||
|
}
|
||||||
|
.icon_2025.facebook {
|
||||||
|
width: 41px;
|
||||||
|
height: 40px;
|
||||||
|
background-position: 0 -135px;
|
||||||
|
}
|
||||||
|
.icon_2025.zalo {
|
||||||
|
width: 41px;
|
||||||
|
height: 40px;
|
||||||
|
background-position: -50px -135px;
|
||||||
|
}
|
||||||
|
.icon_2025.home {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-position: -207px -129px;
|
||||||
|
}
|
||||||
|
.icon_2025.angle-right {
|
||||||
|
width: 11px;
|
||||||
|
height: 17px;
|
||||||
|
background-position: -212px -152px;
|
||||||
|
}
|
||||||
|
.icon_2025.view {
|
||||||
|
width: 22px;
|
||||||
|
height: 16px;
|
||||||
|
background-position: -205px -8px;
|
||||||
|
}
|
||||||
|
.icon_2025.time-big {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
background-position: -2px -70px;
|
||||||
|
}
|
||||||
|
.icon_2025.share {
|
||||||
|
width: 21px;
|
||||||
|
height: 21px;
|
||||||
|
background-position: -198px -36px;
|
||||||
|
}
|
||||||
|
.icon_2025.map-4 {
|
||||||
|
width: 18px;
|
||||||
|
height: 25px;
|
||||||
|
background-position: -152px -69px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-star {
|
||||||
|
background: url(../images/icon_star.png) no-repeat;
|
||||||
|
display: block;
|
||||||
|
width: 80px;
|
||||||
|
height: 15px;
|
||||||
|
background-size: 79px 95px;
|
||||||
|
}
|
||||||
|
.icon-star.star5 {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
.icon-star.star4 {
|
||||||
|
background-position: 0 -15px;
|
||||||
|
}
|
||||||
|
.icon-star.star3 {
|
||||||
|
background-position: 0 -30px;
|
||||||
|
}
|
||||||
|
.icon-star.star2 {
|
||||||
|
background-position: 0 -47px;
|
||||||
|
}
|
||||||
|
.icon-star.star1 {
|
||||||
|
background-position: 0 -63px;
|
||||||
|
}
|
||||||
|
.icon-star.star0 {
|
||||||
|
background-position: 0 -78px;
|
||||||
|
}
|
||||||
|
.icon-star.star-small {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-global {
|
||||||
|
background: var(--color-global);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-select {
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
.box-select .select {
|
||||||
|
width: 100%;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
color: #fff;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
}
|
||||||
|
.box-select .select:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(70, 47, 145, 0.2);
|
||||||
|
border-color: var(--color-global);
|
||||||
|
}
|
||||||
|
.box-select .select option {
|
||||||
|
background: var(--color-global);
|
||||||
|
font-family: "Shopee";
|
||||||
|
}
|
||||||
|
.box-select::after {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 7px;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 11px;
|
||||||
|
height: 5px;
|
||||||
|
z-index: 1;
|
||||||
|
background: #d9d9d9;
|
||||||
|
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||||
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_arrow {
|
||||||
|
background: #d9d9d9;
|
||||||
|
width: 10px;
|
||||||
|
height: 6px;
|
||||||
|
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||||
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-bottom .box-menu-hover .item {
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
padding: 6px 10px;
|
||||||
|
}
|
||||||
|
.header-bottom .box-menu-hover .item:hover .cate-name {
|
||||||
|
color: var(--color-global);
|
||||||
|
}
|
||||||
|
.header-bottom .box-menu-hover .cate-img {
|
||||||
|
width: 23px;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.header-bottom .box-menu-hover .cate-name {
|
||||||
|
width: calc(100% - 38px);
|
||||||
|
}
|
||||||
|
.header-bottom .box-menu-hover .item:hover .sub-menu {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
.header-bottom .sub-menu {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
left: 225px;
|
||||||
|
top: -1px;
|
||||||
|
width: 860px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 6px 10px;
|
||||||
|
height: 453px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s, transform 0.5s;
|
||||||
|
transition: all 0.45s ease-out 0s;
|
||||||
|
transform: translate(20px, 0);
|
||||||
|
overflow: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.header-bottom .sub-cate {
|
||||||
|
width: 33.3333333333%;
|
||||||
|
padding: 10px 10px 0 0;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-top: 1px solid #efefef;
|
||||||
|
}
|
||||||
|
.header-bottom .sub-cate li {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
.header-bottom .sub-cate a:hover {
|
||||||
|
color: var(--color-global);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.header-bottom .sub-cate:nth-child(1),
|
||||||
|
.header-bottom .sub-cate:nth-child(2),
|
||||||
|
.header-bottom .sub-cate:nth-child(3) {
|
||||||
|
padding: 0 10px 0 0;
|
||||||
|
margin-top: 0;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.effect-image {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.effect-image:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
z-index: 2;
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
|
||||||
|
transform: skewX(-25deg);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.effect-image:hover:before {
|
||||||
|
animation: image 1.1s;
|
||||||
|
}
|
||||||
|
@keyframes image {
|
||||||
|
100% {
|
||||||
|
left: 125%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-button-next,
|
||||||
|
.swiper-button-prev {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-next:after,
|
||||||
|
.swiper-button-prev:after {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-list .tabs-item.active {
|
||||||
|
background: var(--color-global);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.tabs-list .tabs-item {
|
||||||
|
font-family: "Shopee Regular";
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-item {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #d3d3d3;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.product-item .product-image {
|
||||||
|
display: block;
|
||||||
|
height: 240px;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.product-item .product-image img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-o-object-fit: contain;
|
||||||
|
object-fit: contain;
|
||||||
|
transform: translatey(0);
|
||||||
|
transition: 0.2s all ease-in;
|
||||||
|
}
|
||||||
|
.product-item .product-image:hover img {
|
||||||
|
transform: translatey(-5px);
|
||||||
|
}
|
||||||
|
.product-item .product-image .box-saleoff {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #da251c;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 52px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.product-item .product-image .box-saleoff::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px dashed #fff;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.product-item .product-image .icon-save {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.product-item .name-product {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #000;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.product-item .name-product:hover {
|
||||||
|
color: var(--color-title);
|
||||||
|
}
|
||||||
|
.product-item .price {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #d80a00;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.product-item .old-price {
|
||||||
|
color: #b0b0b0;
|
||||||
|
}
|
||||||
|
.product-item .box-shop {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: #ff7a00;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.product-item .box-shop .icon_2025.shop {
|
||||||
|
width: 15px;
|
||||||
|
height: 19px;
|
||||||
|
background-position: -49px -23px;
|
||||||
|
background-size: 160px 125px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-best-rated-products .swiper-button-next {
|
||||||
|
right: -20px;
|
||||||
|
}
|
||||||
|
.box-best-rated-products .swiper-button-prev {
|
||||||
|
left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-category-homepage .item p:hover {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-article {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #efefef;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.item-article .image-article {
|
||||||
|
width: 90px;
|
||||||
|
margin-right: 10px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.item-article .image-article img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-o-object-fit: contain;
|
||||||
|
object-fit: contain;
|
||||||
|
transform: translatey(0);
|
||||||
|
transition: 0.2s all ease-in;
|
||||||
|
}
|
||||||
|
.item-article .info {
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
}
|
||||||
|
.item-article .name-article {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
.item-article .name-article:hover {
|
||||||
|
color: var(--color-title);
|
||||||
|
}
|
||||||
|
.item-article .summary {
|
||||||
|
margin-bottom: 3px;
|
||||||
|
font-family: "Shopee Regular";
|
||||||
|
font-size: 16px;
|
||||||
|
color: #161616;
|
||||||
|
}
|
||||||
|
.item-article .link-article {
|
||||||
|
margin-top: 5px;
|
||||||
|
color: var(--color-global);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 130px;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--color-global);
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 10px;
|
||||||
|
border: 1px solid var(--color-global);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.more-link span {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.more-link:hover {
|
||||||
|
background: var(--color-global);
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid var(--color-global);
|
||||||
|
}
|
||||||
|
.more-link:hover i {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-classifieds {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #efefef;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.item-classifieds .image-classifieds {
|
||||||
|
width: 90px;
|
||||||
|
margin-right: 10px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.item-classifieds .image-classifieds img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-o-object-fit: contain;
|
||||||
|
object-fit: contain;
|
||||||
|
transform: translatey(0);
|
||||||
|
transition: 0.2s all ease-in;
|
||||||
|
}
|
||||||
|
.item-classifieds .info {
|
||||||
|
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-size: 18px;
|
||||||
|
}
|
||||||
|
.item-classifieds .price {
|
||||||
|
font-family: "shopee Bold";
|
||||||
|
font-size: 20px;
|
||||||
|
color: #d80a00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-promotions .box-big {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.box-promotions .box-big::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52.88%, #000000 100%);
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.box-promotions .box-big::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 60px;
|
||||||
|
height: 47px;
|
||||||
|
background: url(../images/icon-play.png) no-repeat;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transition: 0.2s all ease-in;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
.box-promotions .box-big:hover::after {
|
||||||
|
top: 51%;
|
||||||
|
}
|
||||||
|
.box-promotions .box-big.active::after, .box-promotions .box-big.active::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-footer a {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 550;
|
||||||
|
}
|
||||||
|
.main-footer a:hover {
|
||||||
|
color: var(--color-title);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.main-footer .title {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
.main-footer .title::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 75px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--color-title);
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
color: var(--color-title);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
display: block;
|
||||||
|
border: 1px solid #d3d3d3;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-filter label {
|
||||||
|
font-family: "Shopee Light";
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#js-slider-big {
|
||||||
|
height: 680px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#js-slider-big .item img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-o-object-fit: contain;
|
||||||
|
object-fit: contain;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#js-slider-small .item img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-o-object-fit: contain;
|
||||||
|
object-fit: contain;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
#js-slider-small .swiper-slide {
|
||||||
|
border: 1px solid #b1b1b1;
|
||||||
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
#js-slider-small .swiper-slide-thumb-active {
|
||||||
|
border: 1.5px solid var(--color-title);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-product-detail .box-shop {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: #ff7a00;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.box-product-detail .box-shop .icon_2025.shop {
|
||||||
|
width: 15px;
|
||||||
|
height: 19px;
|
||||||
|
background-position: -49px -23px;
|
||||||
|
background-size: 160px 125px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
.box-product-detail .box-shop p {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.box-product-detail .box-summary {
|
||||||
|
font-family: "Shopee Medium";
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.box-product-detail .box-summary li {
|
||||||
|
list-style: inside;
|
||||||
|
}/*# sourceMappingURL=style.css.map */
|
||||||
1
src/assets/css/style.css.map
Normal file
1
src/assets/css/style.css.map
Normal file
File diff suppressed because one or more lines are too long
783
src/assets/css/style.scss
Normal file
783
src/assets/css/style.scss
Normal file
@@ -0,0 +1,783 @@
|
|||||||
|
:root {
|
||||||
|
--color-global: #462f91;
|
||||||
|
--color-title: #0d0d9c;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #462f91;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-image: -webkit-gradient(
|
||||||
|
linear,
|
||||||
|
0 0,
|
||||||
|
0 100%,
|
||||||
|
color-stop(0.7, #462f91),
|
||||||
|
color-stop(0.5, transparent),
|
||||||
|
to(transparent)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
font-size: 100%;
|
||||||
|
font-family: "Shopee", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1400px !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 1400px !important;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: "Shopee";
|
||||||
|
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";
|
||||||
|
}
|
||||||
|
.icon_2025 {
|
||||||
|
background: url(../images/icon_2025.png) no-repeat;
|
||||||
|
background-size: 228px 175px;
|
||||||
|
display: block;
|
||||||
|
&.map {
|
||||||
|
width: 20px;
|
||||||
|
height: 26px;
|
||||||
|
background-position: 1px 0px;
|
||||||
|
}
|
||||||
|
&.search {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -70px 0;
|
||||||
|
}
|
||||||
|
&.user {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
background-position: -133px 0px;
|
||||||
|
}
|
||||||
|
&.bar {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background-position: 1px -40px;
|
||||||
|
}
|
||||||
|
&.buildpc {
|
||||||
|
width: 36px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -24px -35px;
|
||||||
|
}
|
||||||
|
&.shop {
|
||||||
|
width: 22px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -70px -35px;
|
||||||
|
}
|
||||||
|
&.map-2 {
|
||||||
|
width: 15px;
|
||||||
|
height: 23px;
|
||||||
|
background-position: -26px -3px;
|
||||||
|
}
|
||||||
|
&.map-3 {
|
||||||
|
width: 13px;
|
||||||
|
height: 18px;
|
||||||
|
background-position: -49px -3px;
|
||||||
|
}
|
||||||
|
&.question {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
background-position: -100px -35px;
|
||||||
|
}
|
||||||
|
&.prduct-save {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -133px -35px;
|
||||||
|
}
|
||||||
|
&.article {
|
||||||
|
width: 30px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -162px -35px;
|
||||||
|
}
|
||||||
|
&.heart {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: -98px -141px;
|
||||||
|
}
|
||||||
|
&.link {
|
||||||
|
width: 14px;
|
||||||
|
height: 10px;
|
||||||
|
background-position: -212px -108px;
|
||||||
|
}
|
||||||
|
&.time {
|
||||||
|
width: 15px;
|
||||||
|
height: 14.5px;
|
||||||
|
background-position: -188px -147.5px;
|
||||||
|
}
|
||||||
|
&.mouse {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-position: -160px -145px;
|
||||||
|
}
|
||||||
|
&.facebook {
|
||||||
|
width: 41px;
|
||||||
|
height: 40px;
|
||||||
|
background-position: 0 -135px;
|
||||||
|
}
|
||||||
|
&.zalo {
|
||||||
|
width: 41px;
|
||||||
|
height: 40px;
|
||||||
|
background-position: -50px -135px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.home {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-position: -207px -129px;
|
||||||
|
}
|
||||||
|
&.angle-right {
|
||||||
|
width: 11px;
|
||||||
|
height: 17px;
|
||||||
|
background-position: -212px -152px;
|
||||||
|
}
|
||||||
|
&.view {
|
||||||
|
width: 22px;
|
||||||
|
height: 16px;
|
||||||
|
background-position: -205px -8px;
|
||||||
|
}
|
||||||
|
&.time-big {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
background-position: -2px -70px;
|
||||||
|
}
|
||||||
|
&.share {
|
||||||
|
width: 21px;
|
||||||
|
height: 21px;
|
||||||
|
background-position: -198px -36px;
|
||||||
|
}
|
||||||
|
&.map-4 {
|
||||||
|
width: 18px;
|
||||||
|
height: 25px;
|
||||||
|
background-position: -152px -69px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-star {
|
||||||
|
background: url(../images/icon_star.png) no-repeat;
|
||||||
|
display: block;
|
||||||
|
width: 80px;
|
||||||
|
height: 15px;
|
||||||
|
background-size: 79px 95px;
|
||||||
|
&.star5 {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
&.star4 {
|
||||||
|
background-position: 0 -15px;
|
||||||
|
}
|
||||||
|
&.star3 {
|
||||||
|
background-position: 0 -30px;
|
||||||
|
}
|
||||||
|
&.star2 {
|
||||||
|
background-position: 0 -47px;
|
||||||
|
}
|
||||||
|
&.star1 {
|
||||||
|
background-position: 0 -63px;
|
||||||
|
}
|
||||||
|
&.star0 {
|
||||||
|
background-position: 0 -78px;
|
||||||
|
}
|
||||||
|
&.star-small {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-global {
|
||||||
|
background: var(--color-global);
|
||||||
|
}
|
||||||
|
.box-select {
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
.select {
|
||||||
|
width: 100%;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
color: #fff;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(70, 47, 145, 0.2);
|
||||||
|
border-color: var(--color-global);
|
||||||
|
}
|
||||||
|
option {
|
||||||
|
background: var(--color-global);
|
||||||
|
font-family: "Shopee";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 7px;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 11px;
|
||||||
|
height: 5px;
|
||||||
|
z-index: 1;
|
||||||
|
background: #d9d9d9;
|
||||||
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon_arrow {
|
||||||
|
background: #d9d9d9;
|
||||||
|
width: 10px;
|
||||||
|
height: 6px;
|
||||||
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.header-bottom {
|
||||||
|
.box-menu-hover {
|
||||||
|
.item {
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
padding: 6px 10px;
|
||||||
|
&:hover .cate-name {
|
||||||
|
color: var(--color-global);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cate-img {
|
||||||
|
width: 23px;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.cate-name {
|
||||||
|
width: calc(100% - 38px);
|
||||||
|
}
|
||||||
|
.item:hover .sub-menu {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sub-menu {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
left: 225px;
|
||||||
|
top: -1px;
|
||||||
|
width: 860px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 6px 10px;
|
||||||
|
height: 453px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition:
|
||||||
|
opacity 0.5s,
|
||||||
|
-webkit-transform 0.5s;
|
||||||
|
transition:
|
||||||
|
opacity 0.5s,
|
||||||
|
-webkit-transform 0.5s;
|
||||||
|
transition:
|
||||||
|
opacity 0.5s,
|
||||||
|
transform 0.5s;
|
||||||
|
transition:
|
||||||
|
opacity 0.5s,
|
||||||
|
transform 0.5s,
|
||||||
|
-webkit-transform 0.5s;
|
||||||
|
-webkit-transition: all 0.45s ease-out 0s;
|
||||||
|
transition: all 0.45s ease-out 0s;
|
||||||
|
-webkit-transform: translate(20px, 0);
|
||||||
|
transform: translate(20px, 0);
|
||||||
|
overflow: auto;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.sub-cate {
|
||||||
|
width: calc(100% / 3);
|
||||||
|
padding: 10px 10px 0 0;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-top: 1px solid #efefef;
|
||||||
|
li {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: var(--color-global);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sub-cate:nth-child(1),
|
||||||
|
.sub-cate:nth-child(2),
|
||||||
|
.sub-cate:nth-child(3) {
|
||||||
|
padding: 0 10px 0 0;
|
||||||
|
margin-top: 0;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.effect-image {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
z-index: 2;
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
|
||||||
|
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
|
||||||
|
-webkit-transform: skewX(-25deg);
|
||||||
|
transform: skewX(-25deg);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&:hover:before {
|
||||||
|
-webkit-animation: image 1.1s;
|
||||||
|
animation: image 1.1s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes image {
|
||||||
|
100% {
|
||||||
|
left: 125%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes image {
|
||||||
|
100% {
|
||||||
|
left: 125%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-button-next,
|
||||||
|
.swiper-button-prev {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-next:after,
|
||||||
|
.swiper-button-prev:after {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-list {
|
||||||
|
.tabs-item.active {
|
||||||
|
background: var(--color-global);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.tabs-item {
|
||||||
|
font-family: "Shopee Regular";
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-item {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #d3d3d3;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
.product-image {
|
||||||
|
display: block;
|
||||||
|
height: 240px;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
transform: translatey(0);
|
||||||
|
transition: 0.2s all ease-in;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
img {
|
||||||
|
transform: translatey(-5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-saleoff {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #da251c;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 52px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px dashed #fff;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-save {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.name-product {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #000;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-title);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #d80a00;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.old-price {
|
||||||
|
color: #b0b0b0;
|
||||||
|
}
|
||||||
|
.box-shop {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: #ff7a00;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.icon_2025.shop {
|
||||||
|
width: 15px;
|
||||||
|
height: 19px;
|
||||||
|
background-position: -49px -23px;
|
||||||
|
background-size: 160px 125px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-best-rated-products {
|
||||||
|
.swiper-button-next {
|
||||||
|
right: -20px;
|
||||||
|
}
|
||||||
|
.swiper-button-prev {
|
||||||
|
left: -20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-category-homepage {
|
||||||
|
.item p:hover {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-article {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #efefef;
|
||||||
|
align-items: flex-start;
|
||||||
|
.image-article {
|
||||||
|
width: 90px;
|
||||||
|
margin-right: 10px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
transform: translatey(0);
|
||||||
|
transition: 0.2s all ease-in;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
}
|
||||||
|
.name-article {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-title);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.summary {
|
||||||
|
margin-bottom: 3px;
|
||||||
|
font-family: "Shopee Regular";
|
||||||
|
font-size: 16px;
|
||||||
|
color: #161616;
|
||||||
|
}
|
||||||
|
.link-article {
|
||||||
|
margin-top: 5px;
|
||||||
|
color: var(--color-global);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 130px;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--color-global);
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 10px;
|
||||||
|
border: 1px solid var(--color-global);
|
||||||
|
border-radius: 4px;
|
||||||
|
span {
|
||||||
|
font-family: "Shopee Bold";
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: var(--color-global);
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid var(--color-global);
|
||||||
|
i {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-classifieds {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #efefef;
|
||||||
|
align-items: flex-start;
|
||||||
|
.image-classifieds {
|
||||||
|
width: 90px;
|
||||||
|
margin-right: 10px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
transform: translatey(0);
|
||||||
|
transition: 0.2s all ease-in;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
}
|
||||||
|
.summary {
|
||||||
|
font-family: "shopee Regular";
|
||||||
|
font-size: 15px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.name-classifieds {
|
||||||
|
font-family: "shopee Bold";
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
font-family: "shopee Bold";
|
||||||
|
font-size: 20px;
|
||||||
|
color: #d80a00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-promotions {
|
||||||
|
.box-big {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52.88%, #000000 100%);
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 60px;
|
||||||
|
height: 47px;
|
||||||
|
background: url(../images/icon-play.png) no-repeat;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transition: 0.2s all ease-in;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&::after {
|
||||||
|
top: 51%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
&::after,
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-footer {
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 550;
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-title);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
font-size: 22px;
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 75px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--color-title);
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
color: var(--color-title);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
display: block;
|
||||||
|
border: 1px solid #d3d3d3;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.box-filter label {
|
||||||
|
font-family: "Shopee Light";
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#js-slider-big {
|
||||||
|
height: 680px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#js-slider-big .item {
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#js-slider-small {
|
||||||
|
.item {
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-slide {
|
||||||
|
border: 1px solid #b1b1b1;
|
||||||
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.swiper-slide-thumb-active {
|
||||||
|
border: 1.5px solid var(--color-title);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-product-detail {
|
||||||
|
.box-shop {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: #ff7a00;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.icon_2025.shop {
|
||||||
|
width: 15px;
|
||||||
|
height: 19px;
|
||||||
|
background-position: -49px -23px;
|
||||||
|
background-size: 160px 125px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-summary {
|
||||||
|
font-family: "Shopee Medium";
|
||||||
|
font-size: 16px;
|
||||||
|
li {
|
||||||
|
list-style: inside;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
src/assets/font/FVHShopeeText-Bold.otf
Normal file
BIN
src/assets/font/FVHShopeeText-Bold.otf
Normal file
Binary file not shown.
BIN
src/assets/font/ShopeeDisplay-Black.ttf
Normal file
BIN
src/assets/font/ShopeeDisplay-Black.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/ShopeeDisplay-Bold.ttf
Normal file
BIN
src/assets/font/ShopeeDisplay-Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/ShopeeDisplay-ExtraBold.ttf
Normal file
BIN
src/assets/font/ShopeeDisplay-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/ShopeeDisplay-Light.ttf
Normal file
BIN
src/assets/font/ShopeeDisplay-Light.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/ShopeeDisplay-Medium.ttf
Normal file
BIN
src/assets/font/ShopeeDisplay-Medium.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/ShopeeDisplay-Regular.ttf
Normal file
BIN
src/assets/font/ShopeeDisplay-Regular.ttf
Normal file
Binary file not shown.
BIN
src/assets/images/avartar.png
Normal file
BIN
src/assets/images/avartar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/assets/images/banner-right-slider-1.png
Normal file
BIN
src/assets/images/banner-right-slider-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
src/assets/images/banner-right-slider-2.png
Normal file
BIN
src/assets/images/banner-right-slider-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
BIN
src/assets/images/banner-right-slider-3.png
Normal file
BIN
src/assets/images/banner-right-slider-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 464 KiB |
BIN
src/assets/images/banner-right-slider-4.png
Normal file
BIN
src/assets/images/banner-right-slider-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 415 KiB |
BIN
src/assets/images/banner-sale-1.png
Normal file
BIN
src/assets/images/banner-sale-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 488 KiB |
BIN
src/assets/images/banner-sale-2.png
Normal file
BIN
src/assets/images/banner-sale-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
BIN
src/assets/images/banner-sale-3.png
Normal file
BIN
src/assets/images/banner-sale-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
BIN
src/assets/images/banner-sale-4.png
Normal file
BIN
src/assets/images/banner-sale-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
BIN
src/assets/images/banner-slider.png
Normal file
BIN
src/assets/images/banner-slider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/images/big-product-detail-1.jpg
Normal file
BIN
src/assets/images/big-product-detail-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
src/assets/images/big-product-detail-2.jpg
Normal file
BIN
src/assets/images/big-product-detail-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
src/assets/images/big-product-detail-3.jpg
Normal file
BIN
src/assets/images/big-product-detail-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
src/assets/images/big-product-detail-4.jpg
Normal file
BIN
src/assets/images/big-product-detail-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
BIN
src/assets/images/big-product-detail.jpg
Normal file
BIN
src/assets/images/big-product-detail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
src/assets/images/big-product-detail.png
Normal file
BIN
src/assets/images/big-product-detail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 357 KiB |
BIN
src/assets/images/box-image.png
Normal file
BIN
src/assets/images/box-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
src/assets/images/category-avatar.png
Normal file
BIN
src/assets/images/category-avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/assets/images/icon-cate-1.png
Normal file
BIN
src/assets/images/icon-cate-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/icon-cate-10.png
Normal file
BIN
src/assets/images/icon-cate-10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/icon-cate-11.png
Normal file
BIN
src/assets/images/icon-cate-11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
src/assets/images/icon-cate-12.png
Normal file
BIN
src/assets/images/icon-cate-12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
src/assets/images/icon-cate-13.png
Normal file
BIN
src/assets/images/icon-cate-13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/images/icon-cate-14.png
Normal file
BIN
src/assets/images/icon-cate-14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/assets/images/icon-cate-15.png
Normal file
BIN
src/assets/images/icon-cate-15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
src/assets/images/icon-cate-16.png
Normal file
BIN
src/assets/images/icon-cate-16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
src/assets/images/icon-cate-2.png
Normal file
BIN
src/assets/images/icon-cate-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/icon-cate-3.png
Normal file
BIN
src/assets/images/icon-cate-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/images/icon-cate-4.png
Normal file
BIN
src/assets/images/icon-cate-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/icon-cate-5.png
Normal file
BIN
src/assets/images/icon-cate-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/images/icon-cate-6.png
Normal file
BIN
src/assets/images/icon-cate-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/icon-cate-7.png
Normal file
BIN
src/assets/images/icon-cate-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
src/assets/images/icon-cate-8.png
Normal file
BIN
src/assets/images/icon-cate-8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/icon-cate-9.png
Normal file
BIN
src/assets/images/icon-cate-9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/icon-file-save.png
Normal file
BIN
src/assets/images/icon-file-save.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 516 B |
BIN
src/assets/images/icon-play.png
Normal file
BIN
src/assets/images/icon-play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 786 B |
BIN
src/assets/images/icon_2025.png
Normal file
BIN
src/assets/images/icon_2025.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/images/icon_star.png
Normal file
BIN
src/assets/images/icon_star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/images/image-article.png
Normal file
BIN
src/assets/images/image-article.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/assets/images/logo-anphat.png
Normal file
BIN
src/assets/images/logo-anphat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/images/logo-footer.png
Normal file
BIN
src/assets/images/logo-footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src/assets/images/logo-gearvn.png
Normal file
BIN
src/assets/images/logo-gearvn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/logo-hacom.png
Normal file
BIN
src/assets/images/logo-hacom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
src/assets/images/promotions-1.png
Normal file
BIN
src/assets/images/promotions-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 543 KiB |
BIN
src/assets/images/promotions-2.png
Normal file
BIN
src/assets/images/promotions-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 352 KiB |
BIN
src/assets/images/promotions-3.png
Normal file
BIN
src/assets/images/promotions-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 452 KiB |
BIN
src/assets/images/promotions-4.png
Normal file
BIN
src/assets/images/promotions-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 464 KiB |
BIN
src/assets/images/promotions-big.png
Normal file
BIN
src/assets/images/promotions-big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 452 KiB |
BIN
src/assets/images/small-product-detail.png
Normal file
BIN
src/assets/images/small-product-detail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
18
src/components/Header.tsx
Normal file
18
src/components/Header.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { useLocation } from 'preact-iso';
|
||||||
|
|
||||||
|
export function Header() {
|
||||||
|
const { url } = useLocation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<a href="/" class={url == '/' && 'active'}>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a href="/404" class={url == '/404' && 'active'}>
|
||||||
|
404
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/index.tsx
Normal file
23
src/index.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { render } from 'preact';
|
||||||
|
import { LocationProvider, Router, Route } from 'preact-iso';
|
||||||
|
|
||||||
|
import { Header } from './components/Header.jsx';
|
||||||
|
import { Home } from './pages/Home/index.jsx';
|
||||||
|
import { NotFound } from './pages/_404.jsx';
|
||||||
|
import './style.css';
|
||||||
|
|
||||||
|
export function App() {
|
||||||
|
return (
|
||||||
|
<LocationProvider>
|
||||||
|
<Header />
|
||||||
|
<main>
|
||||||
|
<Router>
|
||||||
|
<Route path="/" component={Home} />
|
||||||
|
<Route default component={NotFound} />
|
||||||
|
</Router>
|
||||||
|
</main>
|
||||||
|
</LocationProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<App />, document.getElementById('app'));
|
||||||
39
src/pages/Home/index.tsx
Normal file
39
src/pages/Home/index.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import preactLogo from '../../assets/preact.svg';
|
||||||
|
import './style.css';
|
||||||
|
|
||||||
|
export function Home() {
|
||||||
|
return (
|
||||||
|
<div class="home">
|
||||||
|
<a href="https://preactjs.com" target="_blank">
|
||||||
|
<img src={preactLogo} alt="Preact logo" height="160" width="160" />
|
||||||
|
</a>
|
||||||
|
<h1>Get Started building Vite-powered Preact Apps </h1>
|
||||||
|
<section>
|
||||||
|
<Resource
|
||||||
|
title="Learn Preact"
|
||||||
|
description="If you're new to Preact, try the interactive tutorial to learn important concepts"
|
||||||
|
href="https://preactjs.com/tutorial"
|
||||||
|
/>
|
||||||
|
<Resource
|
||||||
|
title="Differences to React"
|
||||||
|
description="If you're coming from React, you may want to check out our docs to see where Preact differs"
|
||||||
|
href="https://preactjs.com/guide/v10/differences-to-react"
|
||||||
|
/>
|
||||||
|
<Resource
|
||||||
|
title="Learn Vite"
|
||||||
|
description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
|
||||||
|
href="https://vitejs.dev"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Resource(props) {
|
||||||
|
return (
|
||||||
|
<a href={props.href} target="_blank" class="resource">
|
||||||
|
<h2>{props.title}</h2>
|
||||||
|
<p>{props.description}</p>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
47
src/pages/Home/style.css
Normal file
47
src/pages/Home/style.css
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
img {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #673ab8aa);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home section {
|
||||||
|
margin-top: 5rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
column-gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
text-align: left;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #222;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource:hover {
|
||||||
|
border: 1px solid #000;
|
||||||
|
box-shadow: 0 25px 50px -12px #673ab888;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 639px) {
|
||||||
|
.home section {
|
||||||
|
margin-top: 5rem;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
row-gap: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.resource {
|
||||||
|
color: #ccc;
|
||||||
|
background-color: #161616;
|
||||||
|
}
|
||||||
|
.resource:hover {
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
}
|
||||||
|
}
|
||||||
8
src/pages/_404.tsx
Normal file
8
src/pages/_404.tsx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
export function NotFound() {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<h1>404: Not Found</h1>
|
||||||
|
<p>It's gone :(</p>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
70
src/style.css
Normal file
70
src/style.css
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color: #222;
|
||||||
|
background-color: #ffffff;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background-color: #673ab8;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.75rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a.active {
|
||||||
|
background-color: #0005;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a:hover {
|
||||||
|
background-color: #0008;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 639px) {
|
||||||
|
main {
|
||||||
|
margin: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
color: #ccc;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
}
|
||||||
|
}
|
||||||
20
tsconfig.json
Normal file
20
tsconfig.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"noEmit": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
|
||||||
|
/* Preact Config */
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"jsxImportSource": "preact",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"paths": {
|
||||||
|
"react": ["./node_modules/preact/compat/"],
|
||||||
|
"react-dom": ["./node_modules/preact/compat/"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["node_modules/vite/client.d.ts", "**/*"]
|
||||||
|
}
|
||||||
14
vite.config.ts
Normal file
14
vite.config.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import preact from '@preact/preset-vite';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [preact()],
|
||||||
|
server: {
|
||||||
|
watch: {
|
||||||
|
// Thêm thư mục ngoài src mà bạn muốn theo dõi
|
||||||
|
usePolling: true, // Dùng polling để theo dõi thay đổi
|
||||||
|
ignored: ['!**/node_modules/**'], // Loại bỏ các thư mục không cần theo dõi
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user