782 lines
48 KiB
HTML
782 lines
48 KiB
HTML
<!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-account 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ài khoản
|
||
</span>
|
||
</a>
|
||
<meta itemprop="position" content="2">
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
|
||
<div class="mt-5 flex gap-[10px]">
|
||
<div class="left w-[20%]">
|
||
|
||
<div class="bg-white p-2 mb-2">
|
||
<div class="flex items-center">
|
||
<img src="../src/assets/images/avartar.png"
|
||
class="w-[50px] h-[50px] rounded-full block mr-[10px] object-contain" alt="">
|
||
<div class="w-[calc(100%-60px)]">
|
||
<b class="block mb-0.3">Chi phạm</b>
|
||
<p class="text-[#707070]">Chipham2z@gmail.com</p>
|
||
</div>
|
||
</div>
|
||
<a href="" class="text-[#1877F2] font-bold mt-0.5 block">Xem hồ sơ</a>
|
||
</div>
|
||
|
||
<div class="bg-white py-3 mb-3">
|
||
<a href="" class="item active flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 list_faq"></i>
|
||
<span>Danh sách câu hỏi</span>
|
||
</a>
|
||
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 list_raovat"></i>
|
||
<span>Danh sách tin rao vặt</span>
|
||
</a>
|
||
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 list_inbox"></i>
|
||
<span>Danh sách tin nhắn</span>
|
||
</a>
|
||
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 info_save"></i>
|
||
<span>Danh sách các thông tin đã lưu</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="right w-[80%]">
|
||
|
||
<div class="bg-white p-3">
|
||
<b class="mb-5 text-xl block">Thông tin cá nhân</b>
|
||
|
||
<img src="../src/assets/images/avartar_acc.png"
|
||
class="block w-[120px] h-[120px] rounded-full m-[0_auto_30px_auto] object-contain" alt="">
|
||
|
||
<div class="w-[620px] mx-auto pb-[100px]">
|
||
|
||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||
<b>Họ và tên</b>
|
||
<b>Chi phạm</b>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||
<b>Email</b>
|
||
<b class="text-[#707070]">Chipham2z@gmail.com</b>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||
<b>Số điện thoại</b>
|
||
<b class="text-[#707070]">098.240.2013</b>
|
||
</div>
|
||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||
<b>Ngày sinh</b>
|
||
<b class="text-[#707070]">13/03/1999</b>
|
||
</div>
|
||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||
<b>Tỉnh thành</b>
|
||
<b class="text-[#707070]">Hà nội</b>
|
||
</div>
|
||
<div class="flex items-center justify-between py-2">
|
||
<b>Giới tính</b>
|
||
<b class="text-[#707070]">Nữ</b>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="page-account 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ài khoản
|
||
</span>
|
||
</a>
|
||
<meta itemprop="position" content="2">
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
|
||
<div class="mt-5 flex gap-[10px]">
|
||
<div class="left w-[20%]">
|
||
|
||
<div class="bg-white p-2 mb-2">
|
||
<div class="flex items-center">
|
||
<img src="../src/assets/images/avartar.png"
|
||
class="w-[50px] h-[50px] rounded-full block mr-[10px] object-contain" alt="">
|
||
<div class="w-[calc(100%-60px)]">
|
||
<b class="block mb-0.3">Chi phạm</b>
|
||
<p class="text-[#707070]">Chipham2z@gmail.com</p>
|
||
</div>
|
||
</div>
|
||
<a href="" class="text-[#1877F2] font-bold mt-0.5 block">Xem hồ sơ</a>
|
||
</div>
|
||
|
||
<div class="bg-white py-3 mb-3">
|
||
<a href="" class="item active flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 list_faq"></i>
|
||
<span>Danh sách câu hỏi</span>
|
||
</a>
|
||
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 list_raovat"></i>
|
||
<span>Danh sách tin rao vặt</span>
|
||
</a>
|
||
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 list_inbox"></i>
|
||
<span>Danh sách tin nhắn</span>
|
||
</a>
|
||
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 info_save"></i>
|
||
<span>Danh sách các thông tin đã lưu</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="right w-[80%]">
|
||
|
||
<div class="bg-white p-3">
|
||
|
||
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
|
||
<h3 class="text-xl font-bold">Tất cả (203)</h3>
|
||
|
||
<select name="" id=""
|
||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||
<option value="">Tất cả</option>
|
||
<option value="">Sản phẩm mới</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="list mt-3 max-h-[1000px] overflow-auto">
|
||
<div
|
||
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||
<div class="w-[40px]">
|
||
<div
|
||
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
|
||
01
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-100px)]">
|
||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||
typesetting
|
||
industry. Lorem Ipsum has been the industry's standard
|
||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||
and scrambled it to make a type specimen
|
||
book. I</p>
|
||
<div class="flex items-center mb-[10px]">
|
||
<a href="../src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||
class="w-[80px] block mr-[10px]">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
|
||
<div class="btn flex items-center">
|
||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 view"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 comment"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||
<div class="w-[40px]">
|
||
<div
|
||
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
|
||
01
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-100px)]">
|
||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||
typesetting
|
||
industry. Lorem Ipsum has been the industry's standard
|
||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||
and scrambled it to make a type specimen
|
||
book. I</p>
|
||
<div class="flex items-center mb-[10px]">
|
||
<a href="../src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||
class="w-[80px] block mr-[10px]">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
|
||
<div class="btn flex items-center">
|
||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 view"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 comment"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||
<div class="w-[40px]">
|
||
<div
|
||
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
|
||
01
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-100px)]">
|
||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||
typesetting
|
||
industry. Lorem Ipsum has been the industry's standard
|
||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||
and scrambled it to make a type specimen
|
||
book. I</p>
|
||
<div class="flex items-center mb-[10px]">
|
||
<a href="../src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||
class="w-[80px] block mr-[10px]">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
|
||
<div class="btn flex items-center">
|
||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 view"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 comment"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||
<div class="w-[40px]">
|
||
<div
|
||
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
|
||
01
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-100px)]">
|
||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||
typesetting
|
||
industry. Lorem Ipsum has been the industry's standard
|
||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||
and scrambled it to make a type specimen
|
||
book. I</p>
|
||
<div class="flex items-center mb-[10px]">
|
||
<a href="../src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||
class="w-[80px] block mr-[10px]">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
|
||
<div class="btn flex items-center">
|
||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 view"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 comment"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||
<div class="w-[40px]">
|
||
<div
|
||
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
|
||
01
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-100px)]">
|
||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||
typesetting
|
||
industry. Lorem Ipsum has been the industry's standard
|
||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||
and scrambled it to make a type specimen
|
||
book. I</p>
|
||
<div class="flex items-center mb-[10px]">
|
||
<a href="../src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||
class="w-[80px] block mr-[10px]">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
|
||
<div class="btn flex items-center">
|
||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 view"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 comment"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||
<div class="w-[40px]">
|
||
<div
|
||
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
|
||
01
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-100px)]">
|
||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||
typesetting
|
||
industry. Lorem Ipsum has been the industry's standard
|
||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||
and scrambled it to make a type specimen
|
||
book. I</p>
|
||
<div class="flex items-center mb-[10px]">
|
||
<a href="../src/assets/images/small-product-detail.png" data-fancybox="gallery"
|
||
class="w-[80px] block mr-[10px]">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
<a href="../src/assets/images/small-product-detail.png"
|
||
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
|
||
<img src="../src/assets/images/small-product-detail.png"
|
||
class="w-[100%] block" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
|
||
<div class="btn flex items-center">
|
||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 view"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
|
||
<span class="mr-[5px] text-[#595959]">23</span> <i
|
||
class="icon_2025 comment"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end list -->
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="page-account 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ài khoản
|
||
</span>
|
||
</a>
|
||
<meta itemprop="position" content="2">
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
|
||
<div class="mt-5 flex gap-[10px]">
|
||
<div class="left w-[20%]">
|
||
|
||
<div class="bg-white p-2 mb-2">
|
||
<div class="flex items-center">
|
||
<img src="../src/assets/images/avartar.png"
|
||
class="w-[50px] h-[50px] rounded-full block mr-[10px] object-contain" alt="">
|
||
<div class="w-[calc(100%-60px)]">
|
||
<b class="block mb-0.3">Chi phạm</b>
|
||
<p class="text-[#707070]">Chipham2z@gmail.com</p>
|
||
</div>
|
||
</div>
|
||
<a href="" class="text-[#1877F2] font-bold mt-0.5 block">Xem hồ sơ</a>
|
||
</div>
|
||
|
||
<div class="bg-white py-3 mb-3">
|
||
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 list_faq"></i>
|
||
<span>Danh sách câu hỏi</span>
|
||
</a>
|
||
<a href="" class="item active flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 list_raovat"></i>
|
||
<span>Danh sách tin rao vặt</span>
|
||
</a>
|
||
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 list_inbox"></i>
|
||
<span>Danh sách tin nhắn</span>
|
||
</a>
|
||
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
|
||
<i class="icon_2025 info_save"></i>
|
||
<span>Danh sách các thông tin đã lưu</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="right w-[80%]">
|
||
|
||
<div class="bg-white">
|
||
<div class="flex items-center justify-between py-2 px-3 border-b-[1px] border-[#e3e3e3]">
|
||
<h3 class="text-xl font-bold">Tất cả (203)</h3>
|
||
|
||
<select name="" id=""
|
||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||
<option value="">Tất cả</option>
|
||
<option value="">Sản phẩm mới</option>
|
||
</select>
|
||
</div>
|
||
<div class="list sort_list mt-3">
|
||
|
||
<div class="product-item flex gap-[10px]">
|
||
<a href="" class="product-image">
|
||
<img src="../src/assets/images/box-image.png" alt="Laptop Dell"
|
||
class="w-full h-full block object-contain" />
|
||
</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="summary line-clamp-1">
|
||
Intel Core i5 / 8GB / 256GB / SSD
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<div class="price">15.000.000đ</div>
|
||
<div class="flex items-center mb-[5px]">
|
||
<div class="locahost-pro flex items-center mr-[5px]">
|
||
<i class="icon_2025 map-3"></i>
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||
Xuân</span>
|
||
</div>
|
||
<div class="time-pro flex items-center">
|
||
<i class="icon_2025 time-gray"></i>
|
||
<div class="flex items-center mt-[1px]">
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||
<span class="ml-[5px]">|</span>
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||
ngày</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href=""
|
||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||
<b class="group-hover:text-white">Chi tiết</b>
|
||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="user-pro flex items-center">
|
||
<img src="../src/assets/images/avartar.png"
|
||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||
alt="avartar" />
|
||
<b class="ml-[7px]">Thanh Mai</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-item flex gap-[10px]">
|
||
<a href="" class="product-image">
|
||
<img src="../src/assets/images/box-image.png" alt="Laptop Dell"
|
||
class="w-full h-full block object-contain" />
|
||
</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="summary line-clamp-1">
|
||
Intel Core i5 / 8GB / 256GB / SSD
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<div class="price">15.000.000đ</div>
|
||
<div class="flex items-center mb-[5px]">
|
||
<div class="locahost-pro flex items-center mr-[5px]">
|
||
<i class="icon_2025 map-3"></i>
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||
Xuân</span>
|
||
</div>
|
||
<div class="time-pro flex items-center">
|
||
<i class="icon_2025 time-gray"></i>
|
||
<div class="flex items-center mt-[1px]">
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||
<span class="ml-[5px]">|</span>
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||
ngày</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href=""
|
||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||
<b class="group-hover:text-white">Chi tiết</b>
|
||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="user-pro flex items-center">
|
||
<img src="../src/assets/images/avartar.png"
|
||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||
alt="avartar" />
|
||
<b class="ml-[7px]">Thanh Mai</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-item flex gap-[10px]">
|
||
<a href="" class="product-image">
|
||
<img src="../src/assets/images/box-image.png" alt="Laptop Dell"
|
||
class="w-full h-full block object-contain" />
|
||
</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="summary line-clamp-1">
|
||
Intel Core i5 / 8GB / 256GB / SSD
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<div class="price">15.000.000đ</div>
|
||
<div class="flex items-center mb-[5px]">
|
||
<div class="locahost-pro flex items-center mr-[5px]">
|
||
<i class="icon_2025 map-3"></i>
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||
Xuân</span>
|
||
</div>
|
||
<div class="time-pro flex items-center">
|
||
<i class="icon_2025 time-gray"></i>
|
||
<div class="flex items-center mt-[1px]">
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||
<span class="ml-[5px]">|</span>
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||
ngày</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href=""
|
||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||
<b class="group-hover:text-white">Chi tiết</b>
|
||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="user-pro flex items-center">
|
||
<img src="../src/assets/images/avartar.png"
|
||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||
alt="avartar" />
|
||
<b class="ml-[7px]">Thanh Mai</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-item flex gap-[10px]">
|
||
<a href="" class="product-image">
|
||
<img src="../src/assets/images/box-image.png" alt="Laptop Dell"
|
||
class="w-full h-full block object-contain" />
|
||
</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="summary line-clamp-1">
|
||
Intel Core i5 / 8GB / 256GB / SSD
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<div class="price">15.000.000đ</div>
|
||
<div class="flex items-center mb-[5px]">
|
||
<div class="locahost-pro flex items-center mr-[5px]">
|
||
<i class="icon_2025 map-3"></i>
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||
Xuân</span>
|
||
</div>
|
||
<div class="time-pro flex items-center">
|
||
<i class="icon_2025 time-gray"></i>
|
||
<div class="flex items-center mt-[1px]">
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||
<span class="ml-[5px]">|</span>
|
||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||
ngày</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href=""
|
||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||
<b class="group-hover:text-white">Chi tiết</b>
|
||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="user-pro flex items-center">
|
||
<img src="../src/assets/images/avartar.png"
|
||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||
alt="avartar" />
|
||
<b class="ml-[7px]">Thanh Mai</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- end list -->
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |