up
This commit is contained in:
246
account-mb.html
246
account-mb.html
@@ -6,28 +6,31 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
|
||||
<title>Đấu giá</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="./assets/css/style-mb.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./assets/css/style-global-mb.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-mb">
|
||||
<div class="header">
|
||||
<div class="header background-blue p-[6px_0] duration-[0.5s] delay-[0] top-[-50px]">
|
||||
<div class="container">
|
||||
<div class="content-main-header d-flex align-items space-between">
|
||||
<a href="/" class="logo">
|
||||
<img src="./assets/images/logo-mobile.png" width="100%" height="100%" alt="logo">
|
||||
<div class="content-main-header flex items-center justify-between">
|
||||
<a href="/" class="logo w-[66px]">
|
||||
<img src="./assets/images/logo-mobile.png" class="w-[100%] h-[26px] block" width="100%"
|
||||
height="100%" alt="logo">
|
||||
</a>
|
||||
<div class="header-right d-flex align-items">
|
||||
<a href="" class="item">
|
||||
<img src="./assets/images/icon-clipboard.png" alt="">
|
||||
<span>Thể lệ đấu giá</span>
|
||||
<div class="header-right flex items-center">
|
||||
<a href="" class="item flex items-center">
|
||||
<img src="./assets/images/icon-clipboard.png" class="w-[14px] block" alt="">
|
||||
<span class="ml-[3px] text-[12px] uppercase text-white">Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<a href="/taikhoan" class="item">
|
||||
<img src="./assets/images/icon-user.png" alt="">
|
||||
<span>Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down"></i>
|
||||
<a href="/taikhoan" class="item flex items-center ml-[10px]">
|
||||
<img src="./assets/images/icon-user.png" class="w-[14px] block" alt="">
|
||||
<span class="ml-[3px] text-[12px] uppercase text-white">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down ml-[5px] text-white"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,68 +38,89 @@
|
||||
</div>
|
||||
<div class="page-account">
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a href="javascript:void(0)" onclick="history.back()" class="link-back">
|
||||
<div class="breadcrumb mt-[10px] flex items-center justify-between">
|
||||
<a href="javascript:void(0)" onclick="history.back()"
|
||||
class="link-back shadow-[0_1px_2px_0_#00000029] w-[32px] h-[32px] leading-[32px] text-center block rounded-[50%]">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</a>
|
||||
<a href="" class="name text-center block line-clamp-1">Tài khoản</a>
|
||||
<a href="" class="name text-center w-[calc(100%_-32px)] mr-[16px] line-clamp-1">Tài khoản</a>
|
||||
</div>
|
||||
<div class="content-account mb-[20px]">
|
||||
<div class="name-avatar flex items-center mb-[20px]">
|
||||
<div
|
||||
class="avatar w-[40px] h-[40px] mr-[10px] leading-[40px] text-[24px] font-[600] bg-[#d9d9d9] rounded-[50%] text-center">
|
||||
P
|
||||
</div>
|
||||
<div class="content-account">
|
||||
<div class="name-avatar d-flex align-items">
|
||||
<div class="avatar">P</div>
|
||||
<div class="info">
|
||||
<span>Tài khoản của</span>
|
||||
<b>Phương Phạm</b>
|
||||
<b class="block text-[18px] leading-[20px]">Phương Phạm</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab d-flex align-items">
|
||||
<a href="javascript:void(0)" data-id="#form-info" class="item-tab active">
|
||||
<i class="fas fa-address-card"></i>
|
||||
<span>Thông tin tài khoản</span>
|
||||
<div class="tab">
|
||||
<a href="javascript:void(0)" data-id="#form-info"
|
||||
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px] active">
|
||||
<i class="fas fa-address-card mr-[15px]"></i>
|
||||
<span class="text-[14px]">Thông tin tài khoản</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" data-id="#table-history" class="item-tab">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
<span>Lịch sửa mua hàng</span>
|
||||
<a href="javascript:void(0)" data-id="#table-history"
|
||||
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
|
||||
<i class="fas fa-shopping-cart mr-[15px]"></i>
|
||||
<span class="text-[14px]">Lịch sửa mua hàng</span>
|
||||
</a>
|
||||
<a href="/logout.php" class="item-tab">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
<span>Đăng xuất tài khoản</span>
|
||||
<a href="/logout.php"
|
||||
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
|
||||
<i class="fas fa-sign-in-alt mr-[15px]"></i>
|
||||
<span class="text-[14px]">Đăng xuất tài khoản</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-tab active" id="form-info">
|
||||
<div class="content-tab hidden active active" id="form-info">
|
||||
<div class="form-info" id="">
|
||||
<input type="text" class="input" name="name" placeholder="Họ và tên">
|
||||
<input type="text" class="input" name="email" placeholder="Email">
|
||||
<div class="d-flex align-items box-phone">
|
||||
<input type="text" class="input" name="phone" placeholder="Số điện thoại">
|
||||
<a href="javascript:void(0)" class="btn-otp" onclick="checkOTP()">Gửi mã xác
|
||||
<input type="text"
|
||||
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
||||
name="name" placeholder="Họ và tên">
|
||||
<input type="text"
|
||||
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
||||
name="email" placeholder="Email">
|
||||
<div class="flex items-center box-phone relative">
|
||||
<input type="text"
|
||||
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
||||
name="phone" placeholder="Số điện thoại">
|
||||
<a href="javascript:void(0)"
|
||||
class="btn-otp absolute right-[0] top-0 block w-[130px] h-[40px] leading-[40px] text-center bg-[#f1b510] rounded-[8px] text-white hover:background-white hover:text-yellow hover:border-yellow"
|
||||
onclick="checkOTP()">Gửi mã
|
||||
xác
|
||||
thực</a>
|
||||
</div>
|
||||
|
||||
<div class="box-sex d-flex align-items">
|
||||
<div class="box-sex flex items-center mb-[10px]">
|
||||
<span>Giới tính</span>
|
||||
<div class="item">
|
||||
<div class="item ml-[15px]">
|
||||
<label class="radio-checkbox">Nam
|
||||
<input type="radio" checked="checked" name="sex" value="1" name="radio">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item ml-[15px]">
|
||||
<label class="radio-checkbox">Nữ
|
||||
<input type="radio" checked="checked" name="sex" value="2" name="radio">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="input" name="address" placeholder="Địa chỉ">
|
||||
<input type="text"
|
||||
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
||||
name="address" placeholder="Địa chỉ">
|
||||
|
||||
<button type="submit" class="btn-update">Cập nhật</button>
|
||||
<button type="submit"
|
||||
class="btn-update block m-[20px_auto_auto_auto] w-[180px] h-[42px] leading-[42px] text-center text-white bg-[#f00000] rounded-[8px] outline-none border-0 text-[18px] font-[700] uppercase">Cập
|
||||
nhật</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-tab" id="table-history">
|
||||
<div class="table-history">
|
||||
<h2 class="title">Lịch sử mua hàng</h2>
|
||||
<table class="table">
|
||||
<div class="content-tab hidden" id="table-history">
|
||||
<div class="table-history w-full">
|
||||
<h2 class="title text-[20px] font-[600] text-center uppercase mb-[20px]">Lịch sử mua hàng
|
||||
</h2>
|
||||
<table class="table text-left">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tên sản phẩm</th>
|
||||
@@ -221,54 +245,72 @@
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="box-faq">
|
||||
<div class="box-faq mt-[15px]">
|
||||
<div class="container">
|
||||
<div class="background-faq">
|
||||
<h2 class="title">Câu hỏi thường gặp</h2>
|
||||
<div class="background-faq border-[2px] border-[#166dd8] p-[10px] rounded-[15px]">
|
||||
<h2 class="title text-center text-[24px] font-[600] uppercase text-[#110e83] mb-[20px]">Câu hỏi
|
||||
thường gặp
|
||||
</h2>
|
||||
<div class="content-faq">
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||
<span>Đấu giá trực tuyến có phức tạp không?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -276,57 +318,69 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer">
|
||||
<div class="main-footer bg-[#110e83] mt-[15px] pb-[20px]">
|
||||
<div class="container">
|
||||
<div class="footer-policies d-flex flex-wrap">
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
|
||||
<div
|
||||
class="footer-policies flex flex-wrap items-center p-[25px_0] border-b-[1px] border-[#646386] mr-[-20px]">
|
||||
<div
|
||||
class="item-policies flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
|
||||
<div class="icons w-[40px] h-[30px] block mb-[13px]">
|
||||
<img src="./assets/images/icon-ship.png" width="100%" height="100%"
|
||||
class="block w-[100%] h-[100%] object-contain" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Chính sách giao hàng</b>
|
||||
<div class="txt text-center text-white text-[13px]">
|
||||
<b class="uppercase">Chính sách giao hàng</b>
|
||||
<p>Nhận hàng & thanh toán tại nhà</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
|
||||
<div
|
||||
class="item-policies flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
|
||||
<div class="icons w-[40px] h-[30px] block mb-[13px]">
|
||||
<img src="./assets/images/icon-return.png" width="100%" height="100%"
|
||||
class="block w-[100%] h-[100%] object-contain" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Đổi mới 15 ngày đầu</b>
|
||||
<div class="txt text-center text-white text-[13px]">
|
||||
<b class="uppercase">Đổi mới 15 ngày đầu</b>
|
||||
<p>Áp dụng với sản phẩm laptop</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
|
||||
<div
|
||||
class="item-policies flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
|
||||
<div class="icons w-[40px] h-[30px] block mb-[13px]">
|
||||
<img src="./assets/images/icon-pay.png" width="100%" height="100%"
|
||||
class="block w-[100%] h-[100%] object-contain" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Thanh toán tiện lợi</b>
|
||||
<div class="txt text-center text-white text-[13px]">
|
||||
<b class="uppercase">Thanh toán tiện lợi</b>
|
||||
<p>Trả tiền mặt, CK, trả góp 0%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
|
||||
<div
|
||||
class="item-policies flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
|
||||
<div class="icons w-[40px] h-[30px] block mb-[13px]">
|
||||
<img src="./assets/images/icon-chat.png" width="100%" height="100%"
|
||||
class="block w-[100%] h-[100%] object-contain" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Hỗ trợ nhiệt tình</b>
|
||||
<div class="txt text-center text-white text-[13px]">
|
||||
<b class="uppercase">Hỗ trợ nhiệt tình</b>
|
||||
<p>Tư vấn, giải pháp mọi thắc mắc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-footer">
|
||||
<div class="info-contact text-center">
|
||||
<b>Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<p>Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày
|
||||
<div class="contact-footer relative">
|
||||
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
|
||||
<b class="uppercase text-[15px] mb-[2px] block">Công ty cổ phần thương mại máy tính an
|
||||
phát</b>
|
||||
<p class="font-[300]">Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố
|
||||
Hà Nội cấp ngày
|
||||
11/10/2019</p>
|
||||
<p>Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành phố Hà nội,
|
||||
<p class="font-[300]">Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa,
|
||||
Thành phố Hà nội,
|
||||
Việt
|
||||
Nam</p>
|
||||
<p>Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
<p class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
</div>
|
||||
<a href="tel:19000323" class="btn-phone">
|
||||
<a href="tel:19000323" class="btn-phone m-[0_auto] w-[270px] block">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
304
account.html
304
account.html
@@ -4,31 +4,31 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<title>Đấu giá</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./assets/css/style-global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="header bg-[#166dd8] p-[6px_0]">
|
||||
<div class="container">
|
||||
<div class="header-main d-flex align-items space-between">
|
||||
<div class="header-main flex items-center justify-between">
|
||||
<div class="header-left">
|
||||
<a href="/" class="logo">
|
||||
<img src="./assets/images/logo.png" alt="logo">
|
||||
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-right d-flex align-items">
|
||||
<a href="" class="item">
|
||||
<img src="./assets/images/icon-clipboard.png" alt="">
|
||||
<span>Thể lệ đấu giá</span>
|
||||
<div class="header-right flex items-center">
|
||||
<a href="" class="item flex items-center">
|
||||
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
|
||||
<span class="text-white p-[0_5px] hover:text-yellow">Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<a href="./account.html" class="item">
|
||||
<img src="./assets/images/icon-user.png" alt="">
|
||||
<span>Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down"></i>
|
||||
<a href="./account.html" class="item flex items-center ml-[20px]">
|
||||
<img src="./assets/images/icon-user.png" class="w-[15px]" alt="">
|
||||
<span class="text-white p-[0_5px] hover:text-yellow">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down text-white"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,17 +36,20 @@
|
||||
</div>
|
||||
<div class="page-account">
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<a href="/" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name"><span>Trang chủ</span></span>
|
||||
</a> <i>/</i>
|
||||
<div class="breadcrumb w-full float-left p-0 m-0 bg-none">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item" class="nopad-l text-[14px]">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
|
||||
chủ</span></span>
|
||||
</a> <i class="leading-[40px] m-[0_10px]">/</i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item">
|
||||
<span itemprop="name">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||
Tài khoản
|
||||
</span>
|
||||
</a>
|
||||
@@ -55,67 +58,87 @@
|
||||
</ol>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="content-account">
|
||||
<div class="name-avatar d-flex align-items">
|
||||
<div class="avatar">P</div>
|
||||
<div class="content-account mb-[20px]">
|
||||
<div class="name-avatar flex items-center mb-[20px]">
|
||||
<div
|
||||
class="avatar w-[40px] h-[40px] mr-[10px] leading-[40px] text-[24px] font-[600] bg-[#d9d9d9] rounded-[50%] text-center">
|
||||
P
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>Tài khoản của</span>
|
||||
<b>Phương Phạm</b>
|
||||
<b class="block text-[18px] leading-[20px]">Phương Phạm</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content d-flex">
|
||||
<div class="content-left">
|
||||
<div class="content flex">
|
||||
<div class="content-left w-[187px] mr-[32px]">
|
||||
<div class="tab">
|
||||
<a href="javascript:void(0)" data-id="#form-info" class="item-tab active">
|
||||
<i class="fas fa-address-card"></i>
|
||||
<span>Thông tin tài khoản</span>
|
||||
<a href="javascript:void(0)" data-id="#form-info"
|
||||
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px] active">
|
||||
<i class="fas fa-address-card mr-[15px]"></i>
|
||||
<span class="text-[13px]">Thông tin tài khoản</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" data-id="#table-history" class="item-tab">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
<span>Lịch sửa mua hàng</span>
|
||||
<a href="javascript:void(0)" data-id="#table-history"
|
||||
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
|
||||
<i class="fas fa-shopping-cart mr-[15px]"></i>
|
||||
<span class="text-[13px]">Lịch sửa mua hàng</span>
|
||||
</a>
|
||||
<a href="/logout.php" class="item-tab">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
<span>Đăng xuất tài khoản</span>
|
||||
<a href="/logout.php"
|
||||
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
|
||||
<i class="fas fa-sign-in-alt mr-[15px]"></i>
|
||||
<span class="text-[13px]">Đăng xuất tài khoản</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-tab active" id="form-info">
|
||||
<div class="form-info" id="">
|
||||
<input type="text" class="input" name="name" placeholder="Họ và tên">
|
||||
<input type="text" class="input" name="email" placeholder="Email">
|
||||
<div class="d-flex align-items box-phone">
|
||||
<input type="text" class="input" name="phone" placeholder="Số điện thoại">
|
||||
<a href="javascript:void(0)" class="btn-otp" onclick="checkOTP()">Gửi mã xác
|
||||
<div class="content-right w-[calc(100%_-187px_-32px)]">
|
||||
<div class="content-tab hidden active" id="form-info">
|
||||
<div class="form-info w-[567px]" id="">
|
||||
<input type="text"
|
||||
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
||||
name="name" placeholder="Họ và tên">
|
||||
<input type="text"
|
||||
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
||||
name="email" placeholder="Email">
|
||||
<div class="flex items-center box-phone relative">
|
||||
<input type="text"
|
||||
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
||||
name="phone" placeholder="Số điện thoại">
|
||||
<a href="javascript:void(0)"
|
||||
class="btn-otp absolute right-[0] top-0 block w-[130px] h-[40px] leading-[40px] text-center bg-[#f1b510] rounded-[8px] text-white hover:background-white hover:text-yellow hover:border-yellow"
|
||||
onclick="checkOTP()">Gửi mã
|
||||
xác
|
||||
thực</a>
|
||||
</div>
|
||||
|
||||
<div class="box-sex d-flex align-items">
|
||||
<div class="box-sex flex items-center mb-[10px]">
|
||||
<span>Giới tính</span>
|
||||
<div class="item">
|
||||
<div class="item ml-[15px]">
|
||||
<label class="radio-checkbox">Nam
|
||||
<input type="radio" checked="checked" name="sex" value="1" name="radio">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item ml-[15px]">
|
||||
<label class="radio-checkbox">Nữ
|
||||
<input type="radio" checked="checked" name="sex" value="2" name="radio">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="input" name="address" placeholder="Địa chỉ">
|
||||
<input type="text"
|
||||
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
||||
name="address" placeholder="Địa chỉ">
|
||||
|
||||
<button type="submit" class="btn-update">Cập nhật</button>
|
||||
<button type="submit"
|
||||
class="btn-update block m-[20px_auto_auto_auto] w-[180px] h-[42px] leading-[42px] text-center text-white bg-[#f00000] rounded-[8px] outline-none border-0 text-[18px] font-[700] uppercase">Cập
|
||||
nhật</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-tab" id="table-history">
|
||||
<div class="table-history">
|
||||
<h2 class="title">Lịch sử mua hàng</h2>
|
||||
<table class="table">
|
||||
<div class="content-tab hidden" id="table-history">
|
||||
<div class="table-history w-full">
|
||||
<h2 class="title text-[24px] font-[600] text-center uppercase mb-[20px]">Lịch sử mua
|
||||
hàng</h2>
|
||||
<table class="table text-left">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tên sản phẩm</th>
|
||||
@@ -144,7 +167,7 @@
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status cancel">
|
||||
Đã hủ<y></y>
|
||||
Đã hủy
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -217,76 +240,108 @@
|
||||
|
||||
<div class="overlay"></div>
|
||||
<div class="box-popup popup-thongbao">
|
||||
<div class="title">Vui lòng xác thực SĐT của bạn</div>
|
||||
<a href="javascript:void(0)" class='click-close' onclick="closePopop()">
|
||||
<div class="title text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Vui lòng xác thực SĐT của bạn
|
||||
</div>
|
||||
<a href="javascript:void(0)"
|
||||
class='click-close absolute
|
||||
top-[-15px] right-[-10px] text-[24px] w-[42px] h-[42px] leading-[42px] bg-black border-[3px] border-[#f1b510] rounded-[50%] text-center text-white'
|
||||
onclick="closePopop()">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
|
||||
<p>Vui lòng xác thực SĐT của bạn tại trang tài khoản</p>
|
||||
<p class="text-center text-[14px]">Vui lòng xác thực SĐT của bạn tại trang tài khoản</p>
|
||||
|
||||
<a href="javascript:void(0)" class="btn-submit" onclick="SendcheckOTP()">
|
||||
<a href="javascript:void(0)"
|
||||
class="btn-submit block w-[168px] h-[42px] leading-[42px] text-center m-[20px_auto] uppercase text-white font-[700] rounded-[26px] outline-none border-0 background-blue hover:background-white hover:text-blue hover:border-blue"
|
||||
onclick="SendcheckOTP()">
|
||||
ok
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box-popup popup-input-opt">
|
||||
<div class="title">Vui lòng xác nhận bằng mã OTP</div>
|
||||
<a href="javascript:void(0)" class='click-close' onclick="closePopop()">
|
||||
<div class="title text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Vui lòng xác nhận bằng mã OTP
|
||||
</div>
|
||||
<a href="javascript:void(0)"
|
||||
class='click-close absolute
|
||||
top-[-15px] right-[-10px] text-[24px] w-[42px] h-[42px] leading-[42px] bg-black border-[3px] border-[#f1b510] rounded-[50%] text-center text-white'
|
||||
onclick="closePopop()">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
|
||||
<input type="text" class="input-otp" placeholder="Vui lòng nhập OTP">
|
||||
<input type="text"
|
||||
class="input-otp w-[390px] h-[40px] outline-none border-b-[1px] border-[#bdbdbd] m-[0_auto] block text-center"
|
||||
placeholder="Vui lòng nhập OTP">
|
||||
|
||||
<a href="javascript:void(0)" class="btn-submit" onclick="checkOTP()">
|
||||
<a href="javascript:void(0)"
|
||||
class="btn-submit block w-[168px] h-[42px] leading-[42px] text-center m-[20px_auto_0_auto] uppercase text-white font-[700] rounded-[26px] outline-none border-0 background-blue hover:background-white hover:text-blue hover:border-blue"
|
||||
onclick="checkOTP()">
|
||||
Xác nhận
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="box-faq">
|
||||
<div class="box-faq mt-[25px]">
|
||||
<div class="container">
|
||||
<div class="background-faq">
|
||||
<h2 class="title">Câu hỏi thường gặp</h2>
|
||||
<div class="background-faq border-[2px] border-[#166dd8] p-[10px] rounded-[15px]">
|
||||
<h2 class="title text-center text-[32px] font-[600] uppercase text-[#110e83] mb-[20px]">Câu hỏi
|
||||
thường gặp
|
||||
</h2>
|
||||
<div class="content-faq">
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Đấu giá trực tuyến có phức tạp không?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -294,56 +349,59 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer">
|
||||
<div class="main-footer background-footer mt-[20px]">
|
||||
<div class="container">
|
||||
<div class="footer-policies d-flex align-items space-between">
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div
|
||||
class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#646386]">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Chính sách giao hàng</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Chính sách giao hàng</b>
|
||||
<p>Nhận hàng & thanh toán tại nhà</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[26px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Đổi mới 15 ngày đầu</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Đổi mới 15 ngày đầu</b>
|
||||
<p>Áp dụng với sản phẩm laptop</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Thanh toán tiện lợi</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Thanh toán tiện lợi</b>
|
||||
<p>Trả tiền mặt, CK, trả góp 0%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Hỗ trợ nhiệt tình</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Hỗ trợ nhiệt tình</b>
|
||||
<p>Tư vấn, giải pháp mọi thắc mắc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-footer">
|
||||
<div class="info-contact text-center">
|
||||
<b>Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<div class="contact-footer relative">
|
||||
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
|
||||
<b class="uppercase text-[15px] mb-[2px]">Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<p>Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày
|
||||
11/10/2019</p>
|
||||
<p>Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành phố Hà nội, Việt
|
||||
<p class="font-[300]">Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành
|
||||
phố Hà nội, Việt
|
||||
Nam</p>
|
||||
<p>Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
<p class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
</div>
|
||||
<a href="tel:19000323" class="btn-phone">
|
||||
<a href="tel:19000323"
|
||||
class="btn-phone w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
@@ -353,7 +411,41 @@
|
||||
</body>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script src="./assets/js/main.js"></script>
|
||||
<!-- <script src="./assets/js/main.js"></script> -->
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
Tab();
|
||||
function Tab() {
|
||||
$(".tab .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab .item-tab").removeClass("active");
|
||||
$('.content-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
|
||||
function checkOTP() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-thongbao').addClass('active')
|
||||
}
|
||||
|
||||
function SendcheckOTP() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-input-opt').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
614
assets/css/style-global-mb.css
Normal file
614
assets/css/style-global-mb.css
Normal file
@@ -0,0 +1,614 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
|
||||
/* thay đổi màu sắc */
|
||||
:root {
|
||||
--main-color: #166dd8; /* màu chính */
|
||||
--color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
|
||||
--color-bg-title-2: #f1b510; /* màu nền chữ vàng */
|
||||
--color-box-auction: #166dd8; /* màu nền đấu giá kịch tính */
|
||||
--color-bg-footer: #110e83; /* màu nền footer */
|
||||
--bg-header: #166dd8; /* màu nền header */
|
||||
--bg-top-auction: #ea3e00; /* màu nền tiêu đề top đấu giá sôi động */
|
||||
--bg-list-auction: #166dd8; /* màu nền danh sách đấu giá */
|
||||
--color-list-auction: #f1b510; /* màu nền tiều đề danh sách đấu giá */
|
||||
--bg-deal: #ea3e00; /* màu nền box deal */
|
||||
--border-faq: #110e83; /* màu border câu hỏi thường gặp */
|
||||
--color-faq: #110e83; /* màu tiêu đề câu hỏi thường gặp */
|
||||
--title-faq: #f8f8f8; /* màu tiêu đề faq */
|
||||
--bg-time-auction: #166dd8; /* màu nền ngày hội đấu giá */
|
||||
--bg-timeout-detail: #ea3e00; /* màu nền thời gian đếm ngược đấu giá */
|
||||
--bg-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */
|
||||
--bg-btn-auction: #f00000; /* màu nền nút tham gia đấu giá */
|
||||
--bg-time-deal: #ee4d2d; /* màu nền thời gian đếm ngược deal */
|
||||
--bg-btn-deal: #166dd8; /* màu nền nút mua sp deal */
|
||||
--bg-list-deal-ongoing: #ee4d2d; /* màu nền danh sách sản phẩm đang diễn ra chi tiết deal */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #a4a4a4;
|
||||
border-radius: 20px;
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
0 0,
|
||||
0 100%,
|
||||
color-stop(0.7, #a4a4a4),
|
||||
color-stop(0.5, transparent),
|
||||
to(transparent)
|
||||
);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Kanit", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #222;
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-size: 15px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
font-family: "Kanit", sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ol,
|
||||
.ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.container-mb {
|
||||
padding: 0;
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon_auction {
|
||||
background: url(../images/icon-auction.png) no-repeat;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
}
|
||||
.icon-deal {
|
||||
display: block;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
background: url(../images/icon-flash.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-star {
|
||||
background: url(../images/icon-star.png) no-repeat;
|
||||
width: 80px;
|
||||
height: 12px;
|
||||
display: block;
|
||||
background-size: 100%;
|
||||
}
|
||||
.icon-star.star5 {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.icon-star.star4 {
|
||||
background-position: 0 -17px;
|
||||
}
|
||||
.icon-star.star3 {
|
||||
background-position: 0 -34px;
|
||||
}
|
||||
.icon-star.star2 {
|
||||
background-position: 0 -50px;
|
||||
}
|
||||
.icon-star.star1 {
|
||||
background-position: 0 -67px;
|
||||
}
|
||||
.icon-star.star0 {
|
||||
background-position: 0 -84px;
|
||||
}
|
||||
.icon.auction {
|
||||
background: url(../images/icon-auction.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.icon.time {
|
||||
background: url(../images/icon-fire-time.png) no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.icon-cup {
|
||||
background: url(../images/icon-cup.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.saleoff {
|
||||
width: 42px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding-left: 10px;
|
||||
background: #f00000;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
.saleoff::before {
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
top: 0;
|
||||
width: 15px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
background: url(../images/icon-flash.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.background-blue {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
.background-red {
|
||||
background: var(var(--color-bg-title-1)) !important;
|
||||
}
|
||||
.background-yellow {
|
||||
background: var(var(--color-bg-title-2)) !important;
|
||||
}
|
||||
.background-footer {
|
||||
background: var(--color-bg-footer) !important;
|
||||
}
|
||||
|
||||
.hover\:text-blue:hover {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
.hover\:background-blue:hover {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
.hover\:background-yellow:hover {
|
||||
background: var(var(--color-bg-title-2)) !important;
|
||||
}
|
||||
|
||||
.hover\:background-white:hover {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.hover\:text-yellow:hover {
|
||||
color: var(var(--color-bg-title-2)) !important;
|
||||
}
|
||||
|
||||
.hover\:text-red:hover {
|
||||
color: #f00000 !important;
|
||||
}
|
||||
.hover\:border-red:hover {
|
||||
border: 1px solid #f00000 !important;
|
||||
}
|
||||
|
||||
.hover\:border-blue:hover {
|
||||
border: 1px solid var(--main-color) !important;
|
||||
}
|
||||
|
||||
.hover\:border-yellow:hover {
|
||||
border: 1px solid var(var(--color-bg-title-2)) !important;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #f00000;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
width: 140px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #f00000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 26px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
border: 1px solid #f00000;
|
||||
color: #f00000;
|
||||
background: #fff;
|
||||
}
|
||||
.btn-add.continue {
|
||||
background: #5f00b1;
|
||||
}
|
||||
|
||||
.btn-add.continue:hover {
|
||||
border: 1px solid #5f00b1;
|
||||
color: #5f00b1;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.btn-add.coming {
|
||||
background: #afafaf;
|
||||
}
|
||||
.btn-add.coming:hover {
|
||||
border: 1px solid #afafaf;
|
||||
color: #afafaf;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header.header-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
background: var(var(--color-bg-title-2));
|
||||
}
|
||||
|
||||
.box-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.box-time .item-time {
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.box-time .item-time b {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.box-time .item-time b::after {
|
||||
content: ":";
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
color: #fff;
|
||||
top: 0;
|
||||
}
|
||||
.box-time .item-time:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.box-time .item-time:last-child b {
|
||||
margin: 0;
|
||||
}
|
||||
.box-time .item-time:last-child b::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.item-tab.active {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
.item-tab:hover {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
.tab-list .box-time b {
|
||||
background: #000;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-more-all {
|
||||
width: 110px;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #fff;
|
||||
margin: 0 auto auto auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-more-all:hover {
|
||||
background: #fff;
|
||||
color: #ee4d2d;
|
||||
}
|
||||
.box-faq .item.active .content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-auction .item-tab.active,
|
||||
.page-auction .item-tab:hover {
|
||||
background: #fff;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.page-detail .swiper-pagination {
|
||||
width: 41px !important;
|
||||
height: 28px;
|
||||
background: #0000004d;
|
||||
border-radius: 14px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: unset !important;
|
||||
}
|
||||
.page-detail .swiper-pagination {
|
||||
color: #fff !important;
|
||||
}
|
||||
.active {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.tab-history .item-tab.active,
|
||||
.tab-history .item-tab:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 4px 0px #00000040;
|
||||
color: #000;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.table-tab thead {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.table-tab th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: calc(100% / 3);
|
||||
height: 35px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
font-size: 13px;
|
||||
}
|
||||
.table-tab td {
|
||||
font-size: 13px;
|
||||
width: calc(100% / 3);
|
||||
height: 35px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
.overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 2px solid var(var(--color-bg-title-2));
|
||||
width: 97%;
|
||||
border-radius: 30px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
margin-top: 12px;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.input-checkbox input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.input-checkbox input:checked ~ .checkmark {
|
||||
background-color: #3194fc;
|
||||
}
|
||||
.input-checkbox .checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #eee;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.input-checkbox .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
.input-checkbox:hover input ~ .checkmark {
|
||||
background-color: #3194fc;
|
||||
}
|
||||
.input-checkbox input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
.input-checkbox .checkmark:after {
|
||||
left: 8px;
|
||||
top: 4px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.radio-checkbox {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
line-height: 20px;
|
||||
}
|
||||
.radio-checkbox input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-checkbox .checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.radio-checkbox:hover input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.radio-checkbox input:checked ~ .checkmark {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
.radio-checkbox .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
.radio-checkbox input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
.radio-checkbox .checkmark:after {
|
||||
top: 6px;
|
||||
left: 5.5px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.popup-success::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url(../images/background-firework.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 100px;
|
||||
height: 85px;
|
||||
left: 0;
|
||||
top: 20px;
|
||||
}
|
||||
.popup-success::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url(../images/background-firework.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 100px;
|
||||
height: 85px;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.table-history thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.table-history th {
|
||||
background: #e2e2e2;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.table-history td {
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
border-bottom: 0.5px solid #e2e2e2;
|
||||
}
|
||||
.table-history .status.ship {
|
||||
color: #17c967;
|
||||
}
|
||||
.table-history .status.cancel {
|
||||
color: #d00000;
|
||||
}
|
||||
.table-history .status.processing {
|
||||
color: #f48320;
|
||||
}
|
||||
.table-history .status.success {
|
||||
color: #0caaf9;
|
||||
}
|
||||
622
assets/css/style-global.css
Normal file
622
assets/css/style-global.css
Normal file
@@ -0,0 +1,622 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
|
||||
/* thay đổi màu sắc */
|
||||
:root {
|
||||
--main-color: #166dd8; /* màu chính */
|
||||
--color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
|
||||
--color-bg-title-2: #f1b510; /* màu nền chữ vàng */
|
||||
--color-box-auction: #166dd8; /* màu nền đấu giá kịch tính */
|
||||
--color-bg-footer: #110e83; /* màu nền footer */
|
||||
--bg-header: #166dd8; /* màu nền header */
|
||||
--bg-top-auction: #ea3e00; /* màu nền tiêu đề top đấu giá sôi động */
|
||||
--bg-list-auction: #166dd8; /* màu nền danh sách đấu giá */
|
||||
--color-list-auction: #f1b510; /* màu nền tiều đề danh sách đấu giá */
|
||||
--bg-deal: #ea3e00; /* màu nền box deal */
|
||||
--border-faq: #110e83; /* màu border câu hỏi thường gặp */
|
||||
--color-faq: #110e83; /* màu tiêu đề câu hỏi thường gặp */
|
||||
--title-faq: #f8f8f8; /* màu tiêu đề faq */
|
||||
--bg-time-auction: #166dd8; /* màu nền ngày hội đấu giá */
|
||||
--bg-timeout-detail: #ea3e00; /* màu nền thời gian đếm ngược đấu giá */
|
||||
--bg-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */
|
||||
--bg-btn-auction: #f00000; /* màu nền nút tham gia đấu giá */
|
||||
--bg-time-deal: #ee4d2d; /* màu nền thời gian đếm ngược deal */
|
||||
--bg-btn-deal: #166dd8; /* màu nền nút mua sp deal */
|
||||
--bg-list-deal-ongoing: #ee4d2d; /* màu nền danh sách sản phẩm đang diễn ra chi tiết deal */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #a4a4a4;
|
||||
border-radius: 20px;
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
0 0,
|
||||
0 100%,
|
||||
color-stop(0.7, #a4a4a4),
|
||||
color-stop(0.5, transparent),
|
||||
to(transparent)
|
||||
);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Kanit", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #222;
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-size: 15px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
font-family: "Kanit", sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ol,
|
||||
.ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
width: 1210px !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon_auction {
|
||||
background: url(../images/icon-auction.png) no-repeat;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
}
|
||||
.icon-deal {
|
||||
display: block;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
background: url(../images/icon-flash.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-star {
|
||||
background: url(../images/icon-star.png) no-repeat;
|
||||
width: 80px;
|
||||
height: 12px;
|
||||
display: block;
|
||||
background-size: 100%;
|
||||
}
|
||||
.icon-star.star5 {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.icon-star.star4 {
|
||||
background-position: 0 -17px;
|
||||
}
|
||||
.icon-star.star3 {
|
||||
background-position: 0 -34px;
|
||||
}
|
||||
.icon-star.star2 {
|
||||
background-position: 0 -50px;
|
||||
}
|
||||
.icon-star.star1 {
|
||||
background-position: 0 -67px;
|
||||
}
|
||||
.icon-star.star0 {
|
||||
background-position: 0 -84px;
|
||||
}
|
||||
.icon.auction {
|
||||
background: url(../images/icon-auction.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.icon.time {
|
||||
background: url(../images/icon-fire-time.png) no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.icon-cup {
|
||||
background: url(../images/icon-cup.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.background-blue {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
.background-red {
|
||||
background: var(--color-bg-title-1) !important;
|
||||
}
|
||||
.background-yellow {
|
||||
background: var(--color-bg-title-2) !important;
|
||||
}
|
||||
.background-footer {
|
||||
background: var(--color-bg-footer) !important;
|
||||
}
|
||||
|
||||
.hover\:text-blue:hover {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
.hover\:background-blue:hover {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
.hover\:background-yellow:hover {
|
||||
background: var(--color-bg-title-2) !important;
|
||||
}
|
||||
|
||||
.hover\:background-white:hover {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.hover\:text-yellow:hover {
|
||||
color: var(--color-bg-title-2) !important;
|
||||
}
|
||||
|
||||
.hover\:text-red:hover {
|
||||
color: #f00000 !important;
|
||||
}
|
||||
.hover\:border-red:hover {
|
||||
border: 1px solid #f00000 !important;
|
||||
}
|
||||
|
||||
.hover\:border-blue:hover {
|
||||
border: 1px solid var(--main-color) !important;
|
||||
}
|
||||
|
||||
.hover\:border-yellow:hover {
|
||||
border: 1px solid var(--color-bg-title-2) !important;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #f00000;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
width: 140px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #f00000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 26px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
border: 1px solid #f00000;
|
||||
color: #f00000;
|
||||
background: #fff;
|
||||
}
|
||||
.btn-add.continue {
|
||||
background: #5f00b1;
|
||||
}
|
||||
|
||||
.btn-add.continue:hover {
|
||||
border: 1px solid #5f00b1;
|
||||
color: #5f00b1;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.box-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.box-time .item-time {
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.box-time .item-time b {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.box-time .item-time b::after {
|
||||
content: ":";
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
color: #fff;
|
||||
top: 0;
|
||||
}
|
||||
.box-time .item-time:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.box-time .item-time:last-child b {
|
||||
margin: 0;
|
||||
}
|
||||
.box-time .item-time:last-child b::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.tab-list .box-time b {
|
||||
background: #000;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.more-all {
|
||||
width: 110px;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #fff;
|
||||
margin: 10px auto auto auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.more-all:hover {
|
||||
background: #fff;
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.saleoff {
|
||||
width: 42px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding-left: 10px;
|
||||
background: #f00000;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
.saleoff::before {
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
top: 0;
|
||||
width: 15px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
background: url(../images/icon-flash.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.box-faq .item.active .content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-button-next::after {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-button-next {
|
||||
position: absolute;
|
||||
top: 468px;
|
||||
transform: rotate(90deg);
|
||||
left: 35%;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-button-prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: rotate(90deg);
|
||||
left: 35%;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-button-prev::after {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-slide {
|
||||
cursor: pointer;
|
||||
}
|
||||
.box-thumbImage img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-slide-thumb-active img {
|
||||
opacity: 1;
|
||||
border: 1px solid transparent;
|
||||
border-image: linear-gradient(
|
||||
359.53deg,
|
||||
#3935c8 82.81%,
|
||||
#1355f0 92%,
|
||||
#0caaf9 99.12%
|
||||
);
|
||||
border-image-slice: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.item-tab.active {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.item-tab:hover {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab-history .item-tab.active,
|
||||
.tab-history .item-tab:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 4px 0px #00000040;
|
||||
color: #000;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.table-tab thead {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.table-tab th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 30%;
|
||||
height: 35px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.table-tab td {
|
||||
width: 30%;
|
||||
height: 35px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
.overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 2px solid var(--color-bg-title-2);
|
||||
width: 590px;
|
||||
border-radius: 30px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
margin-top: 12px;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.input-checkbox input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.input-checkbox input:checked ~ .checkmark {
|
||||
background-color: #3194fc;
|
||||
}
|
||||
.input-checkbox .checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #eee;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.input-checkbox .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
.input-checkbox:hover input ~ .checkmark {
|
||||
background-color: #3194fc;
|
||||
}
|
||||
.input-checkbox input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
.input-checkbox .checkmark:after {
|
||||
left: 8px;
|
||||
top: 4px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.radio-checkbox {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
line-height: 20px;
|
||||
}
|
||||
.radio-checkbox input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-checkbox .checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.radio-checkbox:hover input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.radio-checkbox input:checked ~ .checkmark {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
.radio-checkbox .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
.radio-checkbox input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
.radio-checkbox .checkmark:after {
|
||||
top: 6px;
|
||||
left: 5.5px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.popup-success::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url(../images/background-firework.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 120px;
|
||||
height: 85px;
|
||||
left: 0;
|
||||
top: 20px;
|
||||
}
|
||||
.popup-success::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url(../images/background-firework.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 120px;
|
||||
height: 85px;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.item-input.error .note-error {
|
||||
color: #f00000;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-history thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.table-history th {
|
||||
background: #e2e2e2;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.table-history td {
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.table-history .status.ship {
|
||||
color: #17c967;
|
||||
}
|
||||
.table-history .status.cancel {
|
||||
color: #d00000;
|
||||
}
|
||||
.table-history .status.processing {
|
||||
color: #f48320;
|
||||
}
|
||||
.table-history .status.success {
|
||||
color: #0caaf9;
|
||||
}
|
||||
.tab-list.auction .item.active,
|
||||
.tab-list.auction .item:hover {
|
||||
background: var(--color-bg-title-2);
|
||||
display: flex !important;
|
||||
}
|
||||
@@ -13,7 +13,14 @@
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #a4a4a4;
|
||||
border-radius: 20px;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.7, #a4a4a4), color-stop(0.5, transparent), to(transparent));
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
0 0,
|
||||
0 100%,
|
||||
color-stop(0.7, #a4a4a4),
|
||||
color-stop(0.5, transparent),
|
||||
to(transparent)
|
||||
);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -333,7 +340,8 @@ table {
|
||||
background: #afafaf;
|
||||
color: #fff;
|
||||
}
|
||||
.box-list-auction .tab-list .item.active, .box-list-auction .tab-list .item:hover {
|
||||
.box-list-auction .tab-list .item.active,
|
||||
.box-list-auction .tab-list .item:hover {
|
||||
background: #f1b510;
|
||||
}
|
||||
.box-list-auction .tab-list .item p {
|
||||
@@ -439,7 +447,8 @@ table {
|
||||
background: #afafaf;
|
||||
color: #fff;
|
||||
}
|
||||
.box-deal-hot .tab-list .item.active, .box-deal-hot .tab-list .item:hover {
|
||||
.box-deal-hot .tab-list .item.active,
|
||||
.box-deal-hot .tab-list .item:hover {
|
||||
background: #166dd8;
|
||||
}
|
||||
.box-deal-hot .tab-list .item p {
|
||||
@@ -811,7 +820,8 @@ table {
|
||||
background: #afafaf;
|
||||
color: #fff;
|
||||
}
|
||||
.page-auction .tab-list .item.active, .page-auction .tab-list .item:hover {
|
||||
.page-auction .tab-list .item.active,
|
||||
.page-auction .tab-list .item:hover {
|
||||
background: #f1b510;
|
||||
}
|
||||
.page-auction .tab-list .item p {
|
||||
@@ -873,7 +883,8 @@ table {
|
||||
display: block;
|
||||
color: #fff;
|
||||
}
|
||||
.paging .item.active, .paging .item:hover {
|
||||
.paging .item.active,
|
||||
.paging .item:hover {
|
||||
background: #f1b510;
|
||||
border: 1px solid #f1b510;
|
||||
}
|
||||
@@ -953,8 +964,18 @@ table {
|
||||
.page-detail .box-thumbImage .swiper-slide-thumb-active img {
|
||||
opacity: 1;
|
||||
border: 1px solid transparent;
|
||||
-o-border-image: linear-gradient(359.53deg, #3935c8 82.81%, #1355f0 92%, #0caaf9 99.12%);
|
||||
border-image: linear-gradient(359.53deg, #3935c8 82.81%, #1355f0 92%, #0caaf9 99.12%);
|
||||
-o-border-image: linear-gradient(
|
||||
359.53deg,
|
||||
#3935c8 82.81%,
|
||||
#1355f0 92%,
|
||||
#0caaf9 99.12%
|
||||
);
|
||||
border-image: linear-gradient(
|
||||
359.53deg,
|
||||
#3935c8 82.81%,
|
||||
#1355f0 92%,
|
||||
#0caaf9 99.12%
|
||||
);
|
||||
border-image-slice: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -1243,7 +1264,8 @@ table {
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.page-detail .box-info-product .item-tab.active, .page-detail .box-info-product .item-tab:hover {
|
||||
.page-detail .box-info-product .item-tab.active,
|
||||
.page-detail .box-info-product .item-tab:hover {
|
||||
background: #166dd8;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -1774,7 +1796,8 @@ table {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.box-history .tab-history .item-tab.active, .box-history .tab-history .item-tab:hover {
|
||||
.box-history .tab-history .item-tab.active,
|
||||
.box-history .tab-history .item-tab:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
|
||||
color: #000;
|
||||
@@ -2078,14 +2101,26 @@ table {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
background: linear-gradient(90deg, #d00000 11.46%, #ff2929 29.26%, #eb2121 47.05%, #d00000 88.22%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#d00000 11.46%,
|
||||
#ff2929 29.26%,
|
||||
#eb2121 47.05%,
|
||||
#d00000 88.22%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
.popup-success .note-title {
|
||||
background: linear-gradient(90deg, #d00000 11.46%, #ff2929 29.26%, #eb2121 47.05%, #d00000 88.22%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#d00000 11.46%,
|
||||
#ff2929 29.26%,
|
||||
#eb2121 47.05%,
|
||||
#d00000 88.22%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 20px;
|
||||
@@ -2389,7 +2424,8 @@ table {
|
||||
.page-account .item-tab span {
|
||||
font-size: 13px;
|
||||
}
|
||||
.page-account .item-tab.active, .page-account .item-tab:hover {
|
||||
.page-account .item-tab.active,
|
||||
.page-account .item-tab:hover {
|
||||
background: #116dd8;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -2532,7 +2568,8 @@ table {
|
||||
background: #afafaf;
|
||||
color: #fff;
|
||||
}
|
||||
.page-list-deal .tab-list .item.active, .page-list-deal .tab-list .item:hover {
|
||||
.page-list-deal .tab-list .item.active,
|
||||
.page-list-deal .tab-list .item:hover {
|
||||
background: #166dd8;
|
||||
}
|
||||
.page-list-deal .tab-list .item p {
|
||||
@@ -2862,4 +2899,4 @@ table {
|
||||
.popup-buy-success .content b {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
} /*# sourceMappingURL=style.css.map */
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 363 B |
157
assets/js/deal_detail.js
Normal file
157
assets/js/deal_detail.js
Normal file
@@ -0,0 +1,157 @@
|
||||
var swiper_thumb = new Swiper(".thumbImage", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 4,
|
||||
direction: "vertical",
|
||||
loop: true,
|
||||
on: {
|
||||
init: (swiper) => {
|
||||
let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
|
||||
let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
|
||||
swiper.el.style.height = containerHeight + 'px';
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
var swiper_big = new Swiper(".BigImage", {
|
||||
spaceBetween: 10,
|
||||
watchSlidesProgress: true,
|
||||
noSwiping: true,
|
||||
navigation: {
|
||||
nextEl: "#js-image-next",
|
||||
prevEl: "#js-image-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper_thumb,
|
||||
},
|
||||
});
|
||||
|
||||
function addDealCart() {
|
||||
$('.box-popup').removeClass('active')
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-add-cart').addClass('active')
|
||||
}
|
||||
|
||||
function checkbuy() {
|
||||
var number_regex1 = /^[0]\d{9}$/i;
|
||||
var number_regex2 = /^[0]\d{10}$/i;
|
||||
var error = false;
|
||||
var name = $('#name').val();
|
||||
var $name = $('#name');
|
||||
var email = $('#email').val();
|
||||
var $email = $('#email');
|
||||
var phone = $('#phone').val();
|
||||
var $phone = $('#phone');
|
||||
var city = $('#city').val();
|
||||
var $city = $('#city');
|
||||
var district = $('#district').val();
|
||||
var $district = $('#district');
|
||||
var address = $('#address').val();
|
||||
var $address = $('#address');
|
||||
|
||||
var item_name = $name.parents(".item-input");
|
||||
if (name.length < 4) {
|
||||
item_name.addClass('error');
|
||||
item_name.find($('.note-error')).html('Tên quá ngắn')
|
||||
} else if (name.indexOf('<script') > -1) {
|
||||
item_name.addClass('error');
|
||||
item_name.find($('.note-error')).html('Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại');
|
||||
}
|
||||
|
||||
var item_email = $email.parents(".item-input");
|
||||
if (email.length < 4) {
|
||||
item_email.addClass('error')
|
||||
item_email.find($('.note-error')).html("Bạn chưa nhập Email");
|
||||
error = true;
|
||||
} else if (!validateEmail(email)) {
|
||||
item_email.addClass('error')
|
||||
item_email.find($('.note-error')).html("Địa chỉ email chưa chính xác");
|
||||
error = true;
|
||||
} else {
|
||||
item_email.removeClass('error');
|
||||
item_email.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
var item_phone = $phone.parents(".item-input");
|
||||
if (phone.length < 4) {
|
||||
item_phone.addClass('error')
|
||||
item_phone.find($('.note-error')).html("Bạn chưa nhập SĐT");
|
||||
error = true;
|
||||
} else if (!phone.match(number_regex1) && !phone.match(number_regex2)) {
|
||||
item_phone.addClass('error')
|
||||
item_phone.find($('.note-error')).html("Số điện thoại chưa chính xác");
|
||||
error = true;
|
||||
} else {
|
||||
item_phone.removeClass('error');
|
||||
item_phone.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
|
||||
var item_city = $city.parents('.item-input');
|
||||
if (city == 0) {
|
||||
item_city.addClass('error');
|
||||
item_city.find($('.note-error')).html("Bạn chưa chọn Tỉnh/Thành phố");
|
||||
error = true;
|
||||
} else {
|
||||
item_city.removeClass('error');
|
||||
item_city.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
var item_district = $district.parents('.item-input');
|
||||
if (district == 0) {
|
||||
item_district.addClass('error');
|
||||
item_district.find($('.note-error')).html("Bạn chưa chọn Quận/Huyện");
|
||||
error = true;
|
||||
} else {
|
||||
item_district.removeClass('error');
|
||||
item_district.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
var item_check_add = $address.parents(".item-input");
|
||||
if (address.length < 5) {
|
||||
item_check_add.addClass('error')
|
||||
item_check_add.find($('.note-error')).html("Địa chỉ quá ngắn");
|
||||
error = true;
|
||||
} else if (address.indexOf('<script') > -1) {
|
||||
item_check_add.addClass('error')
|
||||
item_check_add.find($('.note-error')).html("Địa chỉ chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại");
|
||||
error = true;
|
||||
} else {
|
||||
item_check_add.removeClass('error');
|
||||
item_check_add.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
|
||||
if (error) {
|
||||
alert('Vui lòng kiểm tra lại thông tin đơn hàng');
|
||||
return false;
|
||||
} else {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-buy-success').addClass('active')
|
||||
$('.overlay').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
|
||||
function validateEmail(sEmail) {
|
||||
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
|
||||
if (filter.test(sEmail)) {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function validatePhoneNumber(a) {
|
||||
var number_regex1 = /^[0]\d{9}$/i;
|
||||
var number_regex2 = /^[0]\d{10}$/i;
|
||||
|
||||
if (number_regex1.test(a) == false && number_regex2.test(a) == false) return false;
|
||||
return true;
|
||||
}
|
||||
1004
deal-detail.html
1004
deal-detail.html
File diff suppressed because it is too large
Load Diff
1161
detail-mobile.html
1161
detail-mobile.html
File diff suppressed because it is too large
Load Diff
1033
detail.html
1033
detail.html
File diff suppressed because it is too large
Load Diff
1097
home-mobile.html
1097
home-mobile.html
File diff suppressed because it is too large
Load Diff
731
home.html
731
home.html
@@ -6,122 +6,154 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Đấu giá</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./assets/css/style-global.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="header bg-[var(--bg-header)] p-[6px_0]">
|
||||
<div class="container">
|
||||
<div class="header-main d-flex align-items space-between">
|
||||
<div class="header-main flex items-center justify-between">
|
||||
<div class="header-left">
|
||||
<a href="/" class="logo">
|
||||
<img src="./assets/images/logo.png" alt="logo">
|
||||
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-right d-flex align-items">
|
||||
<a href="" class="item">
|
||||
<img src="./assets/images/icon-clipboard.png" alt="">
|
||||
<span>Thể lệ đấu giá</span>
|
||||
<div class="header-right flex items-center">
|
||||
<a href="" class="item flex items-center">
|
||||
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
|
||||
<span class="text-white p-[0_5px] hover:text-yellow">Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<a href="./account.html" class="item">
|
||||
<img src="./assets/images/icon-user.png" alt="">
|
||||
<span>Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down"></i>
|
||||
<a href="./account.html" class="item flex items-center ml-[20px]">
|
||||
<img src="./assets/images/icon-user.png" class="w-[15px]" alt="">
|
||||
<span class="text-white p-[0_5px] hover:text-yellow">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down text-white"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homepage">
|
||||
<div class="banner">
|
||||
<div class="banner mb-[30px]">
|
||||
<a href="">
|
||||
<img src="./assets/images/banner.png" alt="">
|
||||
<img src="./assets/images/banner.png" class="w-[100%] block" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-top-auction">
|
||||
<div class="container">
|
||||
<h2 class="title">Top đấu giá sôi động</h2>
|
||||
<div class="list-auction d-flex">
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<h2
|
||||
class="title uppercase w-[390px] h-[55px] leading-[55px] rounded-[26px] font-[600] text-[32px] text-center text-white background-red bg-[var(--bg-top-auction)]">
|
||||
Top đấu giá sôi động</h2>
|
||||
<div class="list-auction flex mt-[20px] mr-[-15px] ">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-list-auction">
|
||||
<div class="box-list-auction mt-[65px]">
|
||||
<div class="container">
|
||||
<div class="background-auction">
|
||||
<h2 class="title">Đấu giá kịch tính từ 0Đ</h2>
|
||||
<div class="tab-list d-flex align-items space-center">
|
||||
<a href="javascript:void(0)" class="item active">
|
||||
<p>Đang diễn ra 20:00</p>
|
||||
<span>Còn lại</span>
|
||||
<div class="bg-[var(--bg-list-auction)] rounded-[15px] p-[15px]">
|
||||
<h2
|
||||
class="title bg-[var(--color-list-auction)] w-[430px] h-[70px] leading-[70px] text-center text-[32px] font-[600] uppercase m-[-45px_auto_auto_auto] text-white rounded-[35px]">
|
||||
Đấu giá kịch tính từ 0Đ</h2>
|
||||
<div class="tab-list auction flex items-center justify-center m-[25px_0_30px_0]">
|
||||
<a href="javascript:void(0)"
|
||||
class="item flex items-center justify-center text-white p-[10px] rounded-[15px_15px_0_0] mr-[15px] active">
|
||||
<p class="text-[16px] font-[700] pr-[5px] uppercase">Đang diễn ra 20:00</p>
|
||||
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
||||
<div class="box-time">
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
<div class="item-time"><b>42</b></div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<p>Sắp diễn ra 22:00</p>
|
||||
<span>Còn lại</span>
|
||||
<a href="javascript:void(0)"
|
||||
class="item flex items-center justify-center bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-yellow">
|
||||
<p class="text-[16px] font-[700] pr-[5px] uppercase">Sắp diễn ra 20:00</p>
|
||||
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
||||
<div class="box-time">
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
@@ -129,131 +161,173 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-auction d-flex flex-wrap">
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div class="list-auction flex flex-wrap">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add continue">Tiếp tục Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="/detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="/detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -263,26 +337,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-deal-hot">
|
||||
<div class="box-deal-hot mt-[30px]">
|
||||
<div class="container">
|
||||
<div class="background-deal">
|
||||
<h2 class="title">
|
||||
<div class="background-deal bg-[var(--bg-deal)] rounded-[15px] p-[15px]">
|
||||
<h2 class="title flex items-center justify-center">
|
||||
<i class="icon-deal"></i>
|
||||
<p>Deal hot</p>
|
||||
<p class="uppercase text-[32px] font-[700] text-white">Deal hot</p>
|
||||
</h2>
|
||||
<div class="tab-list d-flex align-items space-center">
|
||||
<a href="javascript:void(0)" class="item active">
|
||||
<p>Đang diễn ra 20:00</p>
|
||||
<span>Còn lại</span>
|
||||
<div class="tab-list flex items-center justify-center m-[25px_0_30px_0]">
|
||||
<a href="javascript:void(0)"
|
||||
class="item flex items-center justify-center text-white p-[10px] rounded-[15px_15px_0_0] mr-[15px] background-blue hover:background-blue">
|
||||
<p class="text-[16px] font-[700] pr-[5px] uppercase">Đang diễn ra 20:00</p>
|
||||
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
||||
<div class="box-time">
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
<div class="item-time"><b>42</b></div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<p>Sắp diễn ra 22:00</p>
|
||||
<span>Còn lại</span>
|
||||
<a href="javascript:void(0)"
|
||||
class="item flex items-center justify-center bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-blue">
|
||||
<p class="text-[16px] font-[700] pr-[5px] uppercase">Sắp diễn ra 20:00</p>
|
||||
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
||||
<div class="box-time">
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
@@ -290,125 +369,198 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-list d-flex">
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="product-list flex mr-[-15px]">
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div
|
||||
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;"></div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div
|
||||
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div
|
||||
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div
|
||||
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div
|
||||
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;"></div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -420,49 +572,68 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="box-faq">
|
||||
<div class="box-faq mt-[25px]">
|
||||
<div class="container">
|
||||
<div class="background-faq">
|
||||
<h2 class="title">Câu hỏi thường gặp</h2>
|
||||
<div class="background-faq border-[2px] border-[var(--border-faq)] p-[10px] rounded-[15px]">
|
||||
<h2 class="title text-center text-[32px] font-[600] uppercase text-[var(--color-faq)] mb-[20px]">Câu
|
||||
hỏi
|
||||
thường gặp
|
||||
</h2>
|
||||
<div class="content-faq">
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Đấu giá trực tuyến có phức tạp không?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -470,56 +641,59 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer">
|
||||
<div class="main-footer background-footer mt-[20px]">
|
||||
<div class="container">
|
||||
<div class="footer-policies d-flex align-items space-between">
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div
|
||||
class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#646386]">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Chính sách giao hàng</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Chính sách giao hàng</b>
|
||||
<p>Nhận hàng & thanh toán tại nhà</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[26px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Đổi mới 15 ngày đầu</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Đổi mới 15 ngày đầu</b>
|
||||
<p>Áp dụng với sản phẩm laptop</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Thanh toán tiện lợi</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Thanh toán tiện lợi</b>
|
||||
<p>Trả tiền mặt, CK, trả góp 0%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Hỗ trợ nhiệt tình</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Hỗ trợ nhiệt tình</b>
|
||||
<p>Tư vấn, giải pháp mọi thắc mắc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-footer">
|
||||
<div class="info-contact text-center">
|
||||
<b>Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<div class="contact-footer relative">
|
||||
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
|
||||
<b class="uppercase text-[15px] mb-[2px]">Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<p>Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày
|
||||
11/10/2019</p>
|
||||
<p>Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành phố Hà nội, Việt
|
||||
<p class="font-[300]">Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành
|
||||
phố Hà nội, Việt
|
||||
Nam</p>
|
||||
<p>Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
<p class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
</div>
|
||||
<a href="tel:19000323" class="btn-phone">
|
||||
<a href="tel:19000323"
|
||||
class="btn-phone w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
@@ -528,6 +702,9 @@
|
||||
</div>
|
||||
</body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
|
||||
<script src="./assets/js/main.js"></script>
|
||||
|
||||
|
||||
|
||||
472
listdaugia.html
472
listdaugia.html
@@ -4,29 +4,30 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<title>Đấu giá</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./assets/css/style-global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="header bg-[var(--bg-header)] p-[6px_0]">
|
||||
<div class="container">
|
||||
<div class="header-main d-flex align-items space-between">
|
||||
<div class="header-main flex items-center justify-between">
|
||||
<div class="header-left">
|
||||
<a href="/" class="logo">
|
||||
<img src="./assets/images/logo.png" alt="logo">
|
||||
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-right d-flex align-items">
|
||||
<a href="" class="item">
|
||||
<img src="./assets/images/icon-clipboard.png" alt="">
|
||||
<span>Thể lệ đấu giá</span>
|
||||
<div class="header-right flex items-center">
|
||||
<a href="" class="item flex items-center">
|
||||
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
|
||||
<span class="text-white p-[0_5px] hover:text-yellow">Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<a href="/taikhoan" class="item">
|
||||
<img src="./assets/images/icon-user.png" alt="">
|
||||
<span>Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down"></i>
|
||||
<a href="./account.html" class="item flex items-center ml-[20px]">
|
||||
<img src="./assets/images/icon-user.png" class="w-[15px]" alt="">
|
||||
<span class="text-white p-[0_5px] hover:text-yellow">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down text-white"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,17 +35,20 @@
|
||||
</div>
|
||||
<div class="page-auction">
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<a href="/" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name"><span>Trang chủ</span></span>
|
||||
</a> <i>/</i>
|
||||
<div class="breadcrumb w-full float-left p-0 m-0 bg-none">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item" class="nopad-l text-[14px]">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
|
||||
chủ</span></span>
|
||||
</a> <i class="leading-[40px] m-[0_10px]">/</i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item">
|
||||
<span itemprop="name">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||
Đấu giá
|
||||
</span>
|
||||
</a>
|
||||
@@ -53,21 +57,30 @@
|
||||
</ol>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="background-aution">
|
||||
<h2 class="title">Đấu giá kịch tính từ 0Đ</h2>
|
||||
<div class="tab-list d-flex align-items space-center">
|
||||
<a href="javascript:void(0)" class="item active">
|
||||
<p>Đang diễn ra 20:00</p>
|
||||
<span>Còn lại</span>
|
||||
<div class="background-aution bg-[var(--bg-list-auction)] mt-[65px] p-[15px] rounded-[15px]">
|
||||
<h2
|
||||
class="title w-[430px] block leading-[70px] h-[70px] m-[-50px_auto_auto_auto] bg-[--color-list-auction] text-[32px] text-white font-[600] text-center uppercase rounded-[35px]">
|
||||
Đấu
|
||||
giá kịch tính từ
|
||||
0Đ</h2>
|
||||
<div class="tab-list flex items-center justify-center m-[25px_0_30px_0]">
|
||||
<a href="javascript:void(0)"
|
||||
class="item flex items-center justify-center text-white p-[10px] rounded-[15px_15px_0_0] mr-[15px] background-yellow hover:background-yellow">
|
||||
<p class="text-[16px] font-[700] pr-[5px] uppercase">Đang diễn ra 20:00</p>
|
||||
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
||||
<div class="box-time">
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
<div class="item-time"><b>42</b></div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<p>Sắp diễn ra 22:00</p>
|
||||
<span>Còn lại</span>
|
||||
<a href="javascript:void(0)"
|
||||
class="item flex items-center justify-center bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-yellow">
|
||||
<p class="text-[16px] font-[700] pr-[5px] uppercase">Sắp diễn ra 20:00</p>
|
||||
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
||||
<div class="box-time">
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
@@ -75,188 +88,310 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-auction d-flex flex-wrap">
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div class="list-auction flex flex-wrap mr-[-15px]">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add continue">Tiếp tục Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction">
|
||||
<div class="images">
|
||||
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="box-join">
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span>220</span>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
|
||||
inch - 4K -
|
||||
IPS
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
|
||||
<div class="price-auction d-flex align-items">
|
||||
<p class="txt">Trả cao nhất:</p>
|
||||
<p class="price-highest">230.490.000 <u>đ</u></p>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[calc(100%_-_130px)]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
|
||||
UltraSharp U2723QE (27.0
|
||||
inch - 4K - IPS
|
||||
Black</a>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="paging d-flex align-items space-center">
|
||||
<a href="" class="item active">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<div class="paging flex items-center justify-center">
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#f1b510] background-yellow hover:background-yellow hover:border-yellow">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-yellow hover:border-yellow">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-yellow hover:border-yellow">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-yellow hover:border-yellow">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-yellow hover:border-yellow">1</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="box-faq">
|
||||
<div class="box-faq mt-[25px]">
|
||||
<div class="container">
|
||||
<div class="background-faq">
|
||||
<h2 class="title">Câu hỏi thường gặp</h2>
|
||||
<div class="background-faq border-[2px] border-[var(--border-faq)] p-[10px] rounded-[15px]">
|
||||
<h2 class="title text-center text-[32px] font-[600] uppercase text-[var(--color-faq)] mb-[20px]">Câu
|
||||
hỏi
|
||||
thường gặp
|
||||
</h2>
|
||||
<div class="content-faq">
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Đấu giá trực tuyến có phức tạp không?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -264,56 +399,59 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer">
|
||||
<div class="main-footer background-footer mt-[20px]">
|
||||
<div class="container">
|
||||
<div class="footer-policies d-flex align-items space-between">
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div
|
||||
class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#646386]">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Chính sách giao hàng</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Chính sách giao hàng</b>
|
||||
<p>Nhận hàng & thanh toán tại nhà</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[26px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Đổi mới 15 ngày đầu</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Đổi mới 15 ngày đầu</b>
|
||||
<p>Áp dụng với sản phẩm laptop</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Thanh toán tiện lợi</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Thanh toán tiện lợi</b>
|
||||
<p>Trả tiền mặt, CK, trả góp 0%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Hỗ trợ nhiệt tình</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Hỗ trợ nhiệt tình</b>
|
||||
<p>Tư vấn, giải pháp mọi thắc mắc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-footer">
|
||||
<div class="info-contact text-center">
|
||||
<b>Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<div class="contact-footer relative">
|
||||
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
|
||||
<b class="uppercase text-[15px] mb-[2px]">Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<p>Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày
|
||||
11/10/2019</p>
|
||||
<p>Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành phố Hà nội, Việt
|
||||
<p class="font-[300]">Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành
|
||||
phố Hà nội, Việt
|
||||
Nam</p>
|
||||
<p>Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
<p class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
</div>
|
||||
<a href="tel:19000323" class="btn-phone">
|
||||
<a href="tel:19000323"
|
||||
class="btn-phone w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
@@ -321,5 +459,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
|
||||
|
||||
</html>
|
||||
588
listdeal-mb.html
588
listdeal-mb.html
@@ -7,233 +7,399 @@
|
||||
<title>Đấu giá</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="./assets/css/style-mb.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./assets/css/style-global-mb.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-mb">
|
||||
<div class="header bg-[var(--bg-header)] p-[6px_0] duration-[0.5s] delay-[0] top-[-50px]">
|
||||
<div class="container">
|
||||
<div class="content-main-header flex items-center justify-between">
|
||||
<a href="/" class="logo w-[66px]">
|
||||
<img src="./assets/images/logo-mobile.png" class="w-[100%] h-[26px] block" width="100%"
|
||||
height="100%" alt="logo">
|
||||
</a>
|
||||
<div class="header-right flex items-center">
|
||||
<a href="" class="item flex items-center">
|
||||
<img src="./assets/images/icon-clipboard.png" class="w-[14px] block" alt="">
|
||||
<span class="ml-[3px] text-[12px] uppercase text-white">Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<a href="/taikhoan" class="item flex items-center ml-[10px]">
|
||||
<img src="./assets/images/icon-user.png" class="w-[14px] block" alt="">
|
||||
<span class="ml-[3px] text-[12px] uppercase text-white">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down ml-[5px] text-white"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-list-deal">
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a href="javascript:void(0)" onclick="history.back()" class="link-back">
|
||||
<div class="breadcrumb mt-[10px] flex items-center justify-between">
|
||||
<a href="javascript:void(0)" onclick="history.back()"
|
||||
class="link-back shadow-[0_1px_2px_0_#00000029] w-[32px] h-[32px] leading-[32px] text-center block rounded-[50%]">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</a>
|
||||
<a href="" class="name text-center block">Deal hot</a>
|
||||
<a href="" class="name text-center w-[calc(100%_-32px)] mr-[16px]">Đấu giá</a>
|
||||
</div>
|
||||
|
||||
<div class="background-deal bg-[var(--bg-deal)] rounded-[15px] p-[10px] mt-[10px]">
|
||||
<h2 class="title flex items-center justify-center mb-[10px]">
|
||||
<i class="icon-deal"></i>
|
||||
<p class="uppercase text-[24px] font-[700] text-white">Deal hot</p>
|
||||
</h2>
|
||||
<div class="tab-list flex items-center justify-between mb-[10px]">
|
||||
<a href="javascript:void(0)"
|
||||
class="item w-[calc(100%_/2_-5px)] text-white p-[10px] rounded-[15px_15px_0_0] background-blue hover:background-blue">
|
||||
<p class="text-[16px] text-center font-[700] mb-[5px] uppercase">Đang diễn ra 20:00</p>
|
||||
<div class="box-time flex items-center">
|
||||
<span class="text-[13px]">Còn lại</span>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)"
|
||||
class="item w-[calc(100%_/2_-5px)] bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-blue">
|
||||
<p class="text-[16px] text-center font-[700] mb-[5px] uppercase">Sắp diễn ra 20:00</p>
|
||||
<div class="box-time flex items-center">
|
||||
<span class="text-[13px]">Còn lại</span>
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
<div class="item-time"><b>42</b></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-list flex flex-wrap mr-[-10px]">
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info ">
|
||||
<div
|
||||
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">
|
||||
28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info ">
|
||||
<div
|
||||
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">
|
||||
28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info ">
|
||||
<div
|
||||
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">
|
||||
28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info ">
|
||||
<div
|
||||
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">
|
||||
28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="paging flex items-center justify-center">
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#166dd8] background-blue hover:background-blue hover:border-blue">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="box-faq mt-[15px]">
|
||||
<div class="container">
|
||||
<div class="background-faq border-[2px] border-[var(--border-faq)] p-[10px] rounded-[15px]">
|
||||
<h2
|
||||
class="title text-center text-[24px] font-[600] uppercase text-[var(--color-faq)] mb-[20px]">
|
||||
Câu hỏi
|
||||
thường gặp
|
||||
</h2>
|
||||
<div class="content-faq">
|
||||
<div
|
||||
class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||
<span>Đấu giá trực tuyến có phức tạp không?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item float-left w-[100%] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||
gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<div class="background-deal">
|
||||
<h2 class="title">
|
||||
<i class="icon-deal"></i>
|
||||
<p>Deal hot</p>
|
||||
</h2>
|
||||
<div class="tab-list d-flex align-items space-between">
|
||||
<a href="javascript:void(0)" class="item active">
|
||||
<p>Đang diễn ra 20:00</p>
|
||||
<div class="box-time">
|
||||
<span>Còn lại</span>
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
<div class="item-time"><b>42</b></div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<p>Sắp diễn ra 22:00</p>
|
||||
<div class="box-time">
|
||||
<span>Còn lại</span>
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
<div class="item-time"><b>42</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer bg-[var(--color-bg-footer)] mt-[15px] pb-[20px]">
|
||||
<div class="container">
|
||||
<div
|
||||
class="footer-policies flex flex-wrap items-center p-[25px_0] border-b-[1px] border-[#646386] mr-[-20px]">
|
||||
<div
|
||||
class="item-policies flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
|
||||
<div class="icons w-[40px] h-[30px] block mb-[13px]">
|
||||
<img src="./assets/images/icon-ship.png" width="100%" height="100%"
|
||||
class="block w-[100%] h-[100%] object-contain" alt="ship">
|
||||
</div>
|
||||
<div class="txt text-center text-white text-[13px]">
|
||||
<b class="uppercase">Chính sách giao hàng</b>
|
||||
<p>Nhận hàng & thanh toán tại nhà</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-policies flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
|
||||
<div class="icons w-[40px] h-[30px] block mb-[13px]">
|
||||
<img src="./assets/images/icon-return.png" width="100%" height="100%"
|
||||
class="block w-[100%] h-[100%] object-contain" alt="ship">
|
||||
</div>
|
||||
<div class="txt text-center text-white text-[13px]">
|
||||
<b class="uppercase">Đổi mới 15 ngày đầu</b>
|
||||
<p>Áp dụng với sản phẩm laptop</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-policies flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
|
||||
<div class="icons w-[40px] h-[30px] block mb-[13px]">
|
||||
<img src="./assets/images/icon-pay.png" width="100%" height="100%"
|
||||
class="block w-[100%] h-[100%] object-contain" alt="ship">
|
||||
</div>
|
||||
<div class="txt text-center text-white text-[13px]">
|
||||
<b class="uppercase">Thanh toán tiện lợi</b>
|
||||
<p>Trả tiền mặt, CK, trả góp 0%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-policies flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
|
||||
<div class="icons w-[40px] h-[30px] block mb-[13px]">
|
||||
<img src="./assets/images/icon-chat.png" width="100%" height="100%"
|
||||
class="block w-[100%] h-[100%] object-contain" alt="ship">
|
||||
</div>
|
||||
<div class="txt text-center text-white text-[13px]">
|
||||
<b class="uppercase">Hỗ trợ nhiệt tình</b>
|
||||
<p>Tư vấn, giải pháp mọi thắc mắc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-footer relative">
|
||||
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
|
||||
<b class="uppercase text-[15px] mb-[2px] block">Công ty cổ phần thương mại máy tính an
|
||||
phát</b>
|
||||
<p class="font-[300]">Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố
|
||||
Hà Nội cấp ngày
|
||||
11/10/2019</p>
|
||||
<p class="font-[300]">Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa,
|
||||
Thành phố Hà nội,
|
||||
Việt
|
||||
Nam</p>
|
||||
<p class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
</div>
|
||||
<a href="tel:19000323" class="btn-phone m-[0_auto] w-[270px] block">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-list d-flex flex-wrap">
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="name line-clamp-2">Loa Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="paging d-flex align-items space-center">
|
||||
<a href="" class="item active">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
615
listdeal.html
615
listdeal.html
@@ -4,31 +4,30 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<title>Đấu giá</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./assets/css/style-global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="header bg-[#166dd8] p-[6px_0]">
|
||||
<div class="container">
|
||||
<div class="header-main d-flex align-items space-between">
|
||||
<div class="header-main flex items-center justify-between">
|
||||
<div class="header-left">
|
||||
<a href="/" class="logo">
|
||||
<img src="./assets/images/logo.png" alt="logo">
|
||||
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-right d-flex align-items">
|
||||
<a href="" class="item">
|
||||
<img src="./assets/images/icon-clipboard.png" alt="">
|
||||
<span>Thể lệ đấu giá</span>
|
||||
<div class="header-right flex items-center">
|
||||
<a href="" class="item flex items-center">
|
||||
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
|
||||
<span class="text-white p-[0_5px] hover:text-yellow">Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<a href="./account.html" class="item">
|
||||
<img src="./assets/images/icon-user.png" alt="">
|
||||
<span>Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down"></i>
|
||||
<a href="./account.html" class="item flex items-center ml-[20px]">
|
||||
<img src="./assets/images/icon-user.png" class="w-[15px]" alt="">
|
||||
<span class="text-white p-[0_5px] hover:text-yellow">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down text-white"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,17 +35,20 @@
|
||||
</div>
|
||||
<div class="page-list-deal">
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<a href="/" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name"><span>Trang chủ</span></span>
|
||||
</a> <i>/</i>
|
||||
<div class="breadcrumb w-full float-left p-0 m-0 bg-none">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item" class="nopad-l text-[14px]">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
|
||||
chủ</span></span>
|
||||
</a> <i class="leading-[40px] m-[0_10px]">/</i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item">
|
||||
<span itemprop="name">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||
Deal hot
|
||||
</span>
|
||||
</a>
|
||||
@@ -56,25 +58,29 @@
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
|
||||
<div class="background-deal">
|
||||
<h2 class="title">
|
||||
<div class="background-deal bg-[var(--bg-deal)] rounded-[15px] p-[15px]">
|
||||
<h2 class="title flex items-center justify-center mb-[10px]">
|
||||
<i class="icon-deal"></i>
|
||||
<p>Deal hot</p>
|
||||
<p class="uppercase text-white text-[32px] font-[700]">Deal hot</p>
|
||||
</h2>
|
||||
<div class="tab-list d-flex align-items space-center">
|
||||
<a href="javascript:void(0)" class="item active">
|
||||
<p>Đang diễn ra 20:00</p>
|
||||
<span>Còn lại</span>
|
||||
<div class="tab-list flex items-center justify-center m-[25px_0_30px_0]">
|
||||
<a href="javascript:void(0)"
|
||||
class="item flex items-center justify-center text-white p-[10px] rounded-[15px_15px_0_0] mr-[15px] background-blue hover:background-blue">
|
||||
<p class="text-[16px] font-[700] pr-[5px] uppercase">Đang diễn ra 20:00</p>
|
||||
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
||||
<div class="box-time">
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
<div class="item-time"><b>42</b></div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<p>Sắp diễn ra 22:00</p>
|
||||
<span>Còn lại</span>
|
||||
<a href="javascript:void(0)"
|
||||
class="item flex items-center justify-center bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-blue">
|
||||
<p class="text-[16px] font-[700] pr-[5px] uppercase">Sắp diễn ra 20:00</p>
|
||||
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
||||
<div class="box-time">
|
||||
<div class="item-time"><b>02</b></div>
|
||||
<div class="item-time"><b>16</b></div>
|
||||
@@ -82,294 +88,428 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-list d-flex flex-wrap">
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div class="product-list flex flex-wrap mr-[-15px]">
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="./deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker
|
||||
Aria Evo X
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
<div class="info ">
|
||||
<div class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||
style="width: 90%;">
|
||||
</div>
|
||||
<a href="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="/deal-detail.html"
|
||||
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
|
||||
Floorstanding Focal
|
||||
Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="group-price mb-[10px]">
|
||||
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||
<u>đ</u>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||
<u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="" class="btn-add">Mua ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal">
|
||||
<div class="images">
|
||||
<a href="./deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="box-sold">
|
||||
<div class="line" style="width: 90%;"></div>
|
||||
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
|
||||
class="ql-conlai">10</span> Sản phẩm</div>
|
||||
</div>
|
||||
<a href="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
|
||||
N4</a>
|
||||
|
||||
<div class="group-price">
|
||||
<div class="price">28.490.000 <u>đ</u></div>
|
||||
<div class="d-flex align-items space-center">
|
||||
<del class="old-price">30.490.000 <u>đ</u></del>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="" class="btn-add">Mua ngay</a>
|
||||
<a href="./deal-detail.html"
|
||||
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="paging d-flex align-items space-center">
|
||||
<a href="" class="item active">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<a href="" class="item">1</a>
|
||||
<div class="paging flex items-center justify-center">
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#166dd8] background-blue hover:background-blue hover:border-blue">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="box-faq">
|
||||
<div class="box-faq mt-[25px]">
|
||||
<div class="container">
|
||||
<div class="background-faq">
|
||||
<h2 class="title">Câu hỏi thường gặp</h2>
|
||||
<div class="background-faq border-[2px] border-[#166dd8] p-[10px] rounded-[15px]">
|
||||
<h2 class="title text-center text-[32px] font-[600] uppercase text-[#110e83] mb-[20px]">Câu hỏi
|
||||
thường gặp
|
||||
</h2>
|
||||
<div class="content-faq">
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Đấu giá trực tuyến có phức tạp không?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và
|
||||
internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
||||
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
|
||||
<a href="javascript:void(0)"
|
||||
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
||||
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -377,56 +517,59 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer">
|
||||
<div class="main-footer background-footer mt-[20px]">
|
||||
<div class="container">
|
||||
<div class="footer-policies d-flex align-items space-between">
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div
|
||||
class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#646386]">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Chính sách giao hàng</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Chính sách giao hàng</b>
|
||||
<p>Nhận hàng & thanh toán tại nhà</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[26px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Đổi mới 15 ngày đầu</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Đổi mới 15 ngày đầu</b>
|
||||
<p>Áp dụng với sản phẩm laptop</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Thanh toán tiện lợi</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Thanh toán tiện lợi</b>
|
||||
<p>Trả tiền mặt, CK, trả góp 0%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
||||
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
||||
<img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Hỗ trợ nhiệt tình</b>
|
||||
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
||||
<b class="uppercase">Hỗ trợ nhiệt tình</b>
|
||||
<p>Tư vấn, giải pháp mọi thắc mắc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-footer">
|
||||
<div class="info-contact text-center">
|
||||
<b>Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<div class="contact-footer relative">
|
||||
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
|
||||
<b class="uppercase text-[15px] mb-[2px]">Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<p>Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày
|
||||
11/10/2019</p>
|
||||
<p>Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành phố Hà nội, Việt
|
||||
<p class="font-[300]">Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành
|
||||
phố Hà nội, Việt
|
||||
Nam</p>
|
||||
<p>Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
<p class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
</div>
|
||||
<a href="tel:19000323" class="btn-phone">
|
||||
<a href="tel:19000323"
|
||||
class="btn-phone w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user