up
This commit is contained in:
429
account-mb.html
Normal file
429
account-mb.html
Normal file
@@ -0,0 +1,429 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="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 background-blue 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-account">
|
||||
<div class="container">
|
||||
<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 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="info">
|
||||
<span>Tài khoản của</span>
|
||||
<b class="block text-[18px] leading-[20px]">Phương Phạm</b>
|
||||
</div>
|
||||
</div>
|
||||
<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 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 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 hidden active active" id="form-info">
|
||||
<div class="form-info" 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 flex items-center mb-[10px]">
|
||||
<span>Giới tính</span>
|
||||
<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 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 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 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 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>
|
||||
<th>Giá</th>
|
||||
<th>Thời gian</th>
|
||||
<th>Số lượng</th>
|
||||
<th>Trạng thái</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status ship">
|
||||
Đang vận chuyển
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status cancel">
|
||||
Đã hủ<y></y>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status processing">
|
||||
Đang chờ xác nhận
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status success">
|
||||
Thành công
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status">
|
||||
Đang vận chuyển
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status">
|
||||
Đang vận chuyển
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status">
|
||||
Đang vận chuyển
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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()">
|
||||
<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>
|
||||
|
||||
<a href="javascript:void(0)" class="btn-submit" 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()">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
|
||||
<input type="text" class="input-otp" inputmode="numeric" pattern="[0-9]*" placeholder="Vui lòng nhập OTP">
|
||||
|
||||
<a href="javascript:void(0)" class="btn-submit" onclick="checkOTP()">
|
||||
Xác nhận
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="box-faq mt-[15px]">
|
||||
<div class="container">
|
||||
<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 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 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-[#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 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-[#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 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-[#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 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-[#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 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer bg-[#110e83] 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
|
||||
<script>
|
||||
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')
|
||||
}
|
||||
|
||||
|
||||
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");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
451
account.html
Normal file
451
account.html
Normal file
@@ -0,0 +1,451 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="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 bg-[#166dd8] p-[6px_0]">
|
||||
<div class="container">
|
||||
<div class="header-main flex items-center justify-between">
|
||||
<div class="header-left">
|
||||
<a href="/" class="logo">
|
||||
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<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 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="page-account">
|
||||
<div class="container">
|
||||
<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"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||
Tài khoản
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="clearfix"></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 class="block text-[18px] leading-[20px]">Phương Phạm</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 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 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 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 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 flex items-center mb-[10px]">
|
||||
<span>Giới tính</span>
|
||||
<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 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 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 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 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>
|
||||
<th>Giá</th>
|
||||
<th>Thời gian</th>
|
||||
<th>Số lượng</th>
|
||||
<th>Trạng thái</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status ship">
|
||||
Đang vận chuyển
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status cancel">
|
||||
Đã hủy
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status processing">
|
||||
Đang chờ xác nhận
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status success">
|
||||
Thành công
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status">
|
||||
Đang vận chuyển
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status">
|
||||
Đang vận chuyển
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<p class="status">
|
||||
Đang vận chuyển
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="overlay"></div>
|
||||
<div class="box-popup popup-thongbao">
|
||||
<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 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 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 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 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 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 mt-[25px]">
|
||||
<div class="container">
|
||||
<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 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 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-[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 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-[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 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-[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 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-[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 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer background-footer mt-[20px]">
|
||||
<div class="container">
|
||||
<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 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 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 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 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 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 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 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 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 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 w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
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>
|
||||
648
assets/css/style-global-mb.css
Normal file
648
assets/css/style-global-mb.css
Normal file
@@ -0,0 +1,648 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro: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&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: #e7d9b7; /* màu chính */
|
||||
--color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
|
||||
--color-bg-title-2: #a50e43; /* màu nền chữ vàng */
|
||||
--color-box-auction: #a50e43; /* màu nền đấu giá kịch tính */
|
||||
--color-bg-footer: #000; /* màu nền footer */
|
||||
--bg-header: #fff; /* màu nền header */
|
||||
--bg-top-auction: #ea3e00; /* màu nền tiêu đề top đấu giá sôi động */
|
||||
--bg-list-auction: #ffdbe7; /* màu nền danh sách đấu giá */
|
||||
--color-list-auction: #a50e43; /* màu nền tiều đề danh sách đấu giá */
|
||||
--bg-deal: #a50e43; /* màu nền box deal */
|
||||
--border-faq: #a50e43; /* màu border câu hỏi thường gặp */
|
||||
--color-faq: #a50e43; /* màu chữ tiêu đề câu hỏi thường gặp */
|
||||
--title-faq: #f8f8f8; /* màu nền tiêu đề câu hỏi */
|
||||
--bg-time-auction: #a50e43; /* 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: "Be Vietnam Pro", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #222;
|
||||
font-family: "Be Vietnam Pro", sans-serif;
|
||||
|
||||
font-size: 15px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
font-family: "Be Vietnam Pro", 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: 16px;
|
||||
height: 16px;
|
||||
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: 100%;
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background: var(--main-color);
|
||||
color: #000;
|
||||
text-align: center;
|
||||
border-radius: 26px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
border: 1px solid var(--main-color);
|
||||
color: var(--main-color);
|
||||
background: #fff;
|
||||
}
|
||||
.btn-add.continue {
|
||||
background: #5f00b1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.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: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.box-time .item-time b {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.box-time .item-time b::after {
|
||||
content: ":";
|
||||
position: absolute;
|
||||
right: -11px;
|
||||
color: #000;
|
||||
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: 130px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: block;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #fff;
|
||||
margin: 0 auto auto auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
color: #f0292b;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.page-detail .item-time b {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page-detail .item-time b::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.box-deal-hot .box-time b {
|
||||
background: #fff;
|
||||
color: #f0292b;
|
||||
}
|
||||
.box-deal-hot .box-time b::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.box-deal-hot .coming b {
|
||||
height: unset;
|
||||
background: transparent;
|
||||
line-height: unset;
|
||||
color: #fff;
|
||||
}
|
||||
731
assets/css/style-global.css
Normal file
731
assets/css/style-global.css
Normal file
@@ -0,0 +1,731 @@
|
||||
@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: #a50e43; /* màu chính */
|
||||
--color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
|
||||
--color-bg-title-2: #a50e43; /* màu nền chữ vàng */
|
||||
--color-box-auction: #166dd8; /* màu nền đấu giá kịch tính */
|
||||
--color-bg-footer: #a50e43; /* màu nền footer */
|
||||
--bg-header: #fff; /* màu nền header */
|
||||
--bg-top-auction: #ea3e00; /* màu nền tiêu đề top đấu giá sôi động */
|
||||
--bg-list-auction: #ffdbe7; /* màu nền danh sách đấu giá */
|
||||
--color-list-auction: #a50e43; /* màu nền tiều đề danh sách đấu giá */
|
||||
--bg-deal: #a50e43; /* màu nền box deal */
|
||||
--border-faq: #a50e43; /* màu border câu hỏi thường gặp */
|
||||
--color-faq: #a50e43; /* màu chữ tiêu đề câu hỏi thường gặp */
|
||||
--title-faq: #f8f8f8; /* màu nền tiêu đề câu hỏi */
|
||||
--bg-time-auction: #a50e43; /* 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: var(--main-color);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 26px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
border: 1px solid var(--main-color);
|
||||
color: var(--main-color);
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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: #000;
|
||||
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: 20px;
|
||||
border: 1px solid #000;
|
||||
margin: 10px auto auto auto;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.more-all:hover {
|
||||
background: var(--main-color);
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.box-deal-hot .item.active,
|
||||
.box-deal-hot .item:hover {
|
||||
background: var(--main-color);
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.box-deal-hot .item.active,
|
||||
.box-deal-hot .item:hover {
|
||||
background: var(--main-color);
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.mode-edit {
|
||||
top: -50px;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.mode-edit.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#toggleEditMode {
|
||||
background: #2578e7;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.editable-element {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
right: 0;
|
||||
background-color: #2578e7;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editable-element.editable {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.editable-element.editable .edit-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 50px;
|
||||
width: 400px;
|
||||
height: 520px;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.editable-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.apply-button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.apply-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.edit-position.active {
|
||||
border: 1px solid #2578e7;
|
||||
background: #2578e7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.box-faq .editable-element.editable {
|
||||
border: 2px solid #110e83;
|
||||
}
|
||||
2878
assets/css/style-mb.css
Normal file
2878
assets/css/style-mb.css
Normal file
File diff suppressed because it is too large
Load Diff
1
assets/css/style-mb.css.map
Normal file
1
assets/css/style-mb.css.map
Normal file
File diff suppressed because one or more lines are too long
2945
assets/css/style-mb.scss
Normal file
2945
assets/css/style-mb.scss
Normal file
File diff suppressed because it is too large
Load Diff
2902
assets/css/style.css
Normal file
2902
assets/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
1
assets/css/style.css.map
Normal file
1
assets/css/style.css.map
Normal file
File diff suppressed because one or more lines are too long
2941
assets/css/style.scss
Normal file
2941
assets/css/style.scss
Normal file
File diff suppressed because it is too large
Load Diff
BIN
assets/images/avatar-admin.png
Normal file
BIN
assets/images/avatar-admin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
assets/images/avatar-user.png
Normal file
BIN
assets/images/avatar-user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
assets/images/background-firework.png
Normal file
BIN
assets/images/background-firework.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
assets/images/banner-mobile.png
Normal file
BIN
assets/images/banner-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
assets/images/banner-sale-2.png
Normal file
BIN
assets/images/banner-sale-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
assets/images/banner-sale.png
Normal file
BIN
assets/images/banner-sale.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
assets/images/banner.png
Normal file
BIN
assets/images/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 778 KiB |
BIN
assets/images/btn-phone.png
Normal file
BIN
assets/images/btn-phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
assets/images/icon-auction-2.png
Normal file
BIN
assets/images/icon-auction-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
assets/images/icon-auction.png
Normal file
BIN
assets/images/icon-auction.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 728 B |
BIN
assets/images/icon-chat.png
Normal file
BIN
assets/images/icon-chat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
assets/images/icon-clipboard.png
Normal file
BIN
assets/images/icon-clipboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
BIN
assets/images/icon-cup.png
Normal file
BIN
assets/images/icon-cup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 706 B |
BIN
assets/images/icon-facebook-login.png
Normal file
BIN
assets/images/icon-facebook-login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/images/icon-facebook.png
Normal file
BIN
assets/images/icon-facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/icon-fire-time.png
Normal file
BIN
assets/images/icon-fire-time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
assets/images/icon-flash.png
Normal file
BIN
assets/images/icon-flash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 773 B |
BIN
assets/images/icon-google.png
Normal file
BIN
assets/images/icon-google.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/images/icon-home.png
Normal file
BIN
assets/images/icon-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
BIN
assets/images/icon-locahost.png
Normal file
BIN
assets/images/icon-locahost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/images/icon-pay.png
Normal file
BIN
assets/images/icon-pay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/images/icon-pro-top.png
Normal file
BIN
assets/images/icon-pro-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
assets/images/icon-return.png
Normal file
BIN
assets/images/icon-return.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/images/icon-ship.png
Normal file
BIN
assets/images/icon-ship.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/images/icon-star.png
Normal file
BIN
assets/images/icon-star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/images/icon-user.png
Normal file
BIN
assets/images/icon-user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 523 B |
BIN
assets/images/icon-zalo.png
Normal file
BIN
assets/images/icon-zalo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/images/image-checkbox.png
Normal file
BIN
assets/images/image-checkbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
assets/images/image-qr.png
Normal file
BIN
assets/images/image-qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
assets/images/image-review-1.png
Normal file
BIN
assets/images/image-review-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/images/image-review-2.png
Normal file
BIN
assets/images/image-review-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/images/image-review-3.png
Normal file
BIN
assets/images/image-review-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/images/image-thumb-1.png
Normal file
BIN
assets/images/image-thumb-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
assets/images/image-thumb-2.png
Normal file
BIN
assets/images/image-thumb-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
assets/images/image-thumb-3.png
Normal file
BIN
assets/images/image-thumb-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
assets/images/image-thumb-4.png
Normal file
BIN
assets/images/image-thumb-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
assets/images/image-thumb-5.png
Normal file
BIN
assets/images/image-thumb-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
assets/images/logo-mobile.png
Normal file
BIN
assets/images/logo-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/images/logo.png
Normal file
BIN
assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
assets/images/product-detail-big.png
Normal file
BIN
assets/images/product-detail-big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 784 KiB |
BIN
assets/images/tuiluonvuituoi.png
Normal file
BIN
assets/images/tuiluonvuituoi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
assets/images/vay1.png
Normal file
BIN
assets/images/vay1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
assets/images/vay2.png
Normal file
BIN
assets/images/vay2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
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;
|
||||
}
|
||||
365
assets/js/edit.js
Normal file
365
assets/js/edit.js
Normal file
@@ -0,0 +1,365 @@
|
||||
let historyStates = [];
|
||||
let currentStateIndex = -1;
|
||||
|
||||
|
||||
const $toggleEditModeButton = $('#toggleEditMode');
|
||||
const $tabBar = $('#tabBar');
|
||||
const $textOptions = $('#textOptions');
|
||||
const $imageOptions = $('#imageOptions');
|
||||
const $BoxOptions = $('#BoxOptions');
|
||||
const $textColorInput = $('#textColor');
|
||||
const $textBackgroundInput = $('#textBackground');
|
||||
const $textContentInput = $('#textContent');
|
||||
const $imageURLInput = $('#imageURL');
|
||||
const $imageUploadInput = $('#imageUpload');
|
||||
const $logoSizeInput = $('#logoSize');
|
||||
const $sizeValueSpan = $('#sizeValue');
|
||||
const $lineHeightInput = $('#lineHeight');
|
||||
let currentElement = null;
|
||||
let isEditMode = false;
|
||||
|
||||
|
||||
$(window).scroll(function () {
|
||||
|
||||
if ($(window).scrollTop() > 100) {
|
||||
$(".mode-edit").addClass('fixed');
|
||||
}
|
||||
else {
|
||||
$(".mode-edit").removeClass('fixed');
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
$toggleEditModeButton.on('click', function () {
|
||||
isEditMode = !isEditMode;
|
||||
$('.editable-element').toggleClass('editable', isEditMode);
|
||||
$toggleEditModeButton.html(isEditMode ? '<i class="fas fa-sign-out-alt"></i> Thoát chỉnh sửa' : '<i class="far fa-edit"></i> Chỉnh sửa');
|
||||
$tabBar.hide();
|
||||
});
|
||||
|
||||
$imageUploadInput.on('change', function (event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = function () {
|
||||
currentElement.find('img').attr('src', reader.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
$textColorInput.on('input', function (e) {
|
||||
updateTextColor($(this).val());
|
||||
});
|
||||
|
||||
$textBackgroundInput.on('input', function (e) {
|
||||
updateBackgroundColor($(this).val());
|
||||
});
|
||||
|
||||
$logoSizeInput.on('input', function () {
|
||||
$sizeValueSpan.text(`${$logoSizeInput.val()}px`);
|
||||
currentElement.find('img').css('width', `${$logoSizeInput.val()}px`);
|
||||
});
|
||||
|
||||
$lineHeightInput.on('input', function () {
|
||||
if (currentElement && currentElement.data('type') === 'title') {
|
||||
currentElement.find('.title').css('line-height', `${$lineHeightInput.val()}px`);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function startEditing(event, button) {
|
||||
if (!isEditMode) return;
|
||||
event.stopPropagation();
|
||||
currentElement = $(button).closest('.editable-element');
|
||||
$tabBar.show();
|
||||
setupOptions();
|
||||
}
|
||||
|
||||
function setupOptions() {
|
||||
if (currentElement.data('type') === 'box') {
|
||||
$BoxOptions.show();
|
||||
$textOptions.hide();
|
||||
$imageOptions.hide();
|
||||
const $title = currentElement.find('.title');
|
||||
$('#BackgroundColor').val(extractColor(currentElement, 'bg'));
|
||||
$('#InputCodeBg').val(extractColor(currentElement, 'bg'));
|
||||
$('#changeInputBg').val(extractColor(currentElement, 'bg'));
|
||||
$textContentInput.val($title.text().trim());
|
||||
$textColorInput.val(extractColor($title, 'text'));
|
||||
$textBackgroundInput.val(extractColor($title, 'bg'));
|
||||
$lineHeightInput.val(parseFloat($title.css('line-height')));
|
||||
$('#fontSize').val(parseFloat($title.css('font-size')));
|
||||
$('#fontFamily').val($title.css('font-family'));
|
||||
$('#BgcolorCode').val(extractColor($title, 'bg'));
|
||||
$('#colorCodeTitle').val(extractColor($title, 'text'));
|
||||
$('#borderColorBg').val(extractColor(currentElement, 'border'))
|
||||
} else if (currentElement.data('type') === 'title') {
|
||||
$textOptions.show();
|
||||
$BoxOptions.hide();
|
||||
$imageOptions.hide();
|
||||
|
||||
const $title = currentElement.find('.title');
|
||||
$textContentInput.val($title.text().trim());
|
||||
$textColorInput.val(extractColor($title, 'text'));
|
||||
$textBackgroundInput.val(extractColor($title, 'bg'));
|
||||
$lineHeightInput.val(parseFloat($title.css('line-height')));
|
||||
$('#fontSize').val(parseFloat($title.css('font-size')));
|
||||
$('#fontFamily').val($title.css('font-family'));
|
||||
$('#BgcolorCode').val(extractColor($title, 'bg'));
|
||||
$('#colorCodeTitle').val(extractColor($title, 'text'));
|
||||
$('#borderColorBg').val(extractColor($title, 'bg'))
|
||||
} else if (currentElement.data('type') === 'background') {
|
||||
|
||||
} else {
|
||||
$imageOptions.show();
|
||||
$textOptions.hide();
|
||||
$BoxOptions.hide();
|
||||
|
||||
const $img = currentElement.find('img');
|
||||
|
||||
$imageURLInput.attr('src', $img.attr('src'));
|
||||
$imageUploadInput.val('');
|
||||
|
||||
const $logoImage = currentElement.find('img');
|
||||
$logoSizeInput.val($logoImage.width());
|
||||
$sizeValueSpan.text(`${$logoImage.width()}px`);
|
||||
}
|
||||
}
|
||||
|
||||
function applyChanges() {
|
||||
if (!currentElement) return;
|
||||
if (currentElement.data('type') === 'title') {
|
||||
updateTextStyles();
|
||||
} else if (currentElement.data('type') === 'image') {
|
||||
updateImage();
|
||||
} else if (currentElement.data('type') === 'background') {
|
||||
updateBgStyles()
|
||||
}
|
||||
saveCurrentState()
|
||||
$tabBar.hide();
|
||||
}
|
||||
|
||||
function updateTextStyles() {
|
||||
const $title = currentElement.find('h2');
|
||||
$title.text($textContentInput.val());
|
||||
updateClass($title, 'text', $textColorInput.val());
|
||||
updateClass($title, 'bg', $textBackgroundInput.val());
|
||||
}
|
||||
|
||||
function updateImage() {
|
||||
const $img = currentElement.find('img');
|
||||
$img.attr('src', $imageURLInput.val() || $img.attr('src'));
|
||||
}
|
||||
|
||||
function updateBgStyles() {
|
||||
updateClass(currentElement, 'bg', $('#changeInputBg').val());
|
||||
updateClass(currentElement, 'bg', $('#InputCodeBg').val());
|
||||
}
|
||||
|
||||
|
||||
function updateTextColor(color) {
|
||||
if (!currentElement) return;
|
||||
updateClass(currentElement.find('h2'), 'text', color);
|
||||
}
|
||||
|
||||
function updateBackgroundColor(color) {
|
||||
if (!currentElement) return;
|
||||
updateClass(currentElement.find('h2'), 'bg', color);
|
||||
}
|
||||
|
||||
function updateClass($element, type, color) {
|
||||
const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`;
|
||||
const regex = new RegExp(`^${type}-\\[#[0-9A-Fa-f]{3,6}\\]$`);
|
||||
$element.attr('class', function (i, c) {
|
||||
return c.split(' ').filter(cls => !regex.test(cls)).concat(className).join(' ');
|
||||
});
|
||||
}
|
||||
|
||||
function extractColor($element, type) {
|
||||
const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
|
||||
const match = $element.attr('class').match(regex);
|
||||
return match ? match[1] : '#000000';
|
||||
}
|
||||
|
||||
function formatText(command, value) {
|
||||
let $title = '';
|
||||
if (currentElement.data('type') === 'title' || currentElement.data('type') == 'box') {
|
||||
$title = currentElement.find('.title');
|
||||
} else {
|
||||
$title = currentElement;
|
||||
}
|
||||
switch (command) {
|
||||
case 'size':
|
||||
$title.css('font-size', `${value}px`);
|
||||
break;
|
||||
case 'bold':
|
||||
$title.toggleClass('font-bold');
|
||||
break;
|
||||
case 'italic':
|
||||
$title.toggleClass('italic');
|
||||
break;
|
||||
case 'underline':
|
||||
$title.toggleClass('underline');
|
||||
break;
|
||||
case 'line-through':
|
||||
$title.toggleClass('line-through');
|
||||
break;
|
||||
case 'justifyLeft':
|
||||
$title.removeClass('text-center text-right text-justify').addClass('text-left');
|
||||
break;
|
||||
case 'justifyCenter':
|
||||
$title.removeClass('text-left text-right text-justify').addClass('text-center');
|
||||
break;
|
||||
case 'justifyRight':
|
||||
$title.removeClass('text-left text-center text-justify').addClass('text-right');
|
||||
break;
|
||||
case 'justifyFull':
|
||||
$title.removeClass('text-left text-center text-right').addClass('text-justify');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function updateColorPicker(event, type) {
|
||||
const textColor = $("#textColor");
|
||||
const textCodeColor = $("#colorCodeTitle");
|
||||
const BgColor = $("#textBackground");
|
||||
let element = '';
|
||||
if (currentElement.data('type') === 'title') {
|
||||
element = currentElement.find('.title');
|
||||
|
||||
} else {
|
||||
element = currentElement;
|
||||
}
|
||||
|
||||
if (type === 'text') {
|
||||
const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test(textCodeColor.val());
|
||||
if (isValidHex) {
|
||||
textColor.val(textCodeColor.val());
|
||||
element.css('color', textCodeColor.val());
|
||||
} else {
|
||||
alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733).");
|
||||
}
|
||||
} else if (type === 'background') {
|
||||
const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val());
|
||||
if (isValidHex) {
|
||||
BgColor.val($(event.target).val());
|
||||
element.css('background', $(event.target).val());
|
||||
} else {
|
||||
alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733).");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function syncColorInputs(event, type) {
|
||||
const inputColorText = $('#colorCodeTitle');
|
||||
let inputBg = '';
|
||||
let Bg = '';
|
||||
if (currentElement.data('type') === 'title') {
|
||||
inputBg = $('#BgcolorCode');
|
||||
bg = $(currentElement).find('.title');
|
||||
} else {
|
||||
inputBg = $('#InputCodeBg');
|
||||
bg = $(currentElement);
|
||||
}
|
||||
|
||||
if (type == 'text') {
|
||||
inputColorText.val($(event.target).val());
|
||||
} else {
|
||||
inputBg.val($(event.target).val());
|
||||
bg.css('background', $(event.target).val());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function updatePosition(event, action) {
|
||||
$('.edit-position').removeClass('active')
|
||||
$(event.target).addClass('active');
|
||||
console.log(action)
|
||||
if (action == 'left') {
|
||||
currentElement.find('.title').css({ 'margin': 'auto auto auto 0', 'justify-content': 'start' });
|
||||
} else if (action == 'center') {
|
||||
currentElement.find('.title').css({ 'margin': '0 auto', 'justify-content': 'center' });
|
||||
} else if (action == 'right') {
|
||||
console.log('aaa', currentElement)
|
||||
currentElement.find('.title').css({ 'margin': 'auto 0 auto auto', 'justify-content': 'end' });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateSizeBox(type, value) {
|
||||
if (type == 'width') {
|
||||
currentElement.find('.title').css('width', value + 'px')
|
||||
} else if (type == 'height') {
|
||||
currentElement.find('.title').css('height', value + 'px')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateBoderRadius(type, key, value) {
|
||||
let element = '';
|
||||
if (key == 'background') {
|
||||
element = currentElement;
|
||||
} else if (key == 'text') {
|
||||
element = currentElement.find('.title');
|
||||
}
|
||||
|
||||
if (type == 'top-left') {
|
||||
element.css('border-top-left-radius', value + 'px');
|
||||
} else if (type == 'top-right') {
|
||||
element.css('border-top-right-radius', value + 'px');
|
||||
} else if (type == 'bottom-left') {
|
||||
element.css('border-bottom-left-radius', value + 'px');
|
||||
} else if (type == 'bottom-right') {
|
||||
element.css('border-bottom-right-radius', value + 'px');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateBorder(type, key, value) {
|
||||
let element = '';
|
||||
if (key == 'background') {
|
||||
element = currentElement;
|
||||
} else if (key == 'text') {
|
||||
element = currentElement.find('.title');
|
||||
}
|
||||
|
||||
if (type == 'border-width') {
|
||||
element.css('border-width', value + 'px');
|
||||
} else if (type == 'border-color') {
|
||||
element.css('border-color', value);
|
||||
} else if (type == 'border-style') {
|
||||
element.css('border-style', value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function saveCurrentState() {
|
||||
// Lưu HTML hiện tại của giao diện
|
||||
const currentHTML = document.documentElement.innerHTML;
|
||||
|
||||
// Nếu không ở cuối mảng (khi đã dùng nút back hoặc forward), loại bỏ các trạng thái phía sau
|
||||
if (currentStateIndex < historyStates.length - 1) {
|
||||
historyStates = historyStates.slice(0, currentStateIndex + 1);
|
||||
}
|
||||
|
||||
// Lưu trạng thái mới và cập nhật chỉ số trạng thái hiện tại
|
||||
historyStates.push(currentHTML);
|
||||
currentStateIndex++;
|
||||
}
|
||||
|
||||
|
||||
function goBack() {
|
||||
if (currentStateIndex > 0) {
|
||||
currentStateIndex--;
|
||||
document.documentElement.innerHTML = historyStates[currentStateIndex];
|
||||
}
|
||||
}
|
||||
|
||||
function goForward() {
|
||||
if (currentStateIndex < historyStates.length - 1) {
|
||||
currentStateIndex++;
|
||||
document.documentElement.innerHTML = historyStates[currentStateIndex];
|
||||
}
|
||||
}
|
||||
196
assets/js/main.js
Normal file
196
assets/js/main.js
Normal file
@@ -0,0 +1,196 @@
|
||||
$(document).ready(function () {
|
||||
$('.faqlink').click(function () {
|
||||
$(this).parents('.item').toggleClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const showButton = document.getElementById('click-show');
|
||||
const priceList = document.getElementById('price-list');
|
||||
let currentIndex = 4; // Ban đầu hiển thị 4 item
|
||||
|
||||
showButton.addEventListener('click', () => {
|
||||
const itemWidth = document.querySelector('.item').offsetWidth;
|
||||
priceList.scrollBy({ left: itemWidth, behavior: 'smooth' });
|
||||
currentIndex++;
|
||||
|
||||
// Nếu đã scroll qua hết các item thì ẩn nút
|
||||
if (currentIndex >= document.querySelectorAll('.item').length) {
|
||||
showButton.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function formatCurrency(a) {
|
||||
var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
|
||||
var len = b.length;
|
||||
b = b.substring(0, len - 3);
|
||||
return b;
|
||||
}
|
||||
|
||||
$('#price-list .item').on('click', function () {
|
||||
var price = $(this).attr('data-price');
|
||||
$('#js-input-price').val(formatCurrency(price));
|
||||
})
|
||||
|
||||
|
||||
|
||||
productDetailTab()
|
||||
function productDetailTab() {
|
||||
$(".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");
|
||||
});
|
||||
}
|
||||
|
||||
TabHistory();
|
||||
function TabHistory() {
|
||||
$(".tab-history .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab-history .item-tab").removeClass("active");
|
||||
$('.table-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
checkRules();
|
||||
function checkRules() {
|
||||
$('#submit_rules').on('click', function () {
|
||||
if ($('#check_rules').is(':checked')) {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-login').addClass('active')
|
||||
} else {
|
||||
alert('Quý khách cần đồng ý với thể lệ của chương trình')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
|
||||
|
||||
|
||||
function checkAucton() {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-rules').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
function checklogin() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-yeucau').addClass('active')
|
||||
}
|
||||
|
||||
function showInfoPay() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-info-pay').addClass('active')
|
||||
}
|
||||
|
||||
formatPrice();
|
||||
function formatPrice() {
|
||||
$('#js-input-price').on('input', function () {
|
||||
let inputValue = $(this).val().replace(/\D/g, '');
|
||||
let formattedValue = new Intl.NumberFormat().format(inputValue);
|
||||
|
||||
$(this).val(formattedValue);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function checkSendAuction() {
|
||||
$('.box-popup').removeClass('active');
|
||||
|
||||
const price_present = _strToNumber($('#js-price-present').html());
|
||||
const price_auction = _strToNumber($('#js-input-price').val());
|
||||
|
||||
const price_min = price_present + 300000;
|
||||
|
||||
if (price_auction > price_present) {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-success').addClass('active')
|
||||
} else {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-error').addClass('active')
|
||||
$('#js-price-min').html(formatCurrency(price_min))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function _strToNumber(str) {
|
||||
str += '';
|
||||
while (str.indexOf(".") > 0) {
|
||||
str = str.replace('.', '');
|
||||
}
|
||||
var result = parseFloat(str);
|
||||
return isNaN(result) ? 0 : result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
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')
|
||||
}
|
||||
|
||||
|
||||
|
||||
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");
|
||||
});
|
||||
}
|
||||
21
assets/js/server.js
Normal file
21
assets/js/server.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// server.js
|
||||
const express = require('express');
|
||||
const bodyParser = require('body-parser');
|
||||
const cors = require('cors');
|
||||
const app = express();
|
||||
const port = 5500;
|
||||
|
||||
app.use(cors()); // Cho phép CORS
|
||||
app.use(bodyParser.json()); // Middleware để phân tích JSON
|
||||
|
||||
// Endpoint để nhận yêu cầu POST
|
||||
app.post('/submit-bid', (req, res) => {
|
||||
console.log(req.body); // In ra thông tin đã gửi
|
||||
// Xử lý thông tin ở đây (lưu vào DB hoặc làm gì đó)
|
||||
res.status(200).json({ message: 'Bid received', data: req.body });
|
||||
});
|
||||
|
||||
// Khởi động server
|
||||
app.listen(port, () => {
|
||||
console.log(`Server is running at 192.168.1.71:${port}`);
|
||||
});
|
||||
1001
deal-detail-mb.html
Normal file
1001
deal-detail-mb.html
Normal file
File diff suppressed because it is too large
Load Diff
848
deal-detail.html
Normal file
848
deal-detail.html
Normal file
@@ -0,0 +1,848 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="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 bg-[var(--bg-header)] shadow-[0_1px_6px_#00000040] p-[6px_0]">
|
||||
<div class="container">
|
||||
<div class="header-main flex items-center justify-between">
|
||||
<div class="header-left">
|
||||
<a href="/" class="logo">
|
||||
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<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-black p-[0_5px] hover:text-[var(--main-color)]">Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<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-black p-[0_5px] hover:text-[var(--main-color)]">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down text-black"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-detail deal">
|
||||
<div class="container">
|
||||
<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"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||
Flash sale
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="content-main-detail flex mt-[20px]">
|
||||
<div class="content-left w-[calc(100%_-490px_-32px)] mr-[32px]">
|
||||
<div class="box-group-images flex">
|
||||
<div class="box-thumbImage w-[85px] h-[560px] relative p-[30px_0]">
|
||||
<div class="swiper-button swiper-button-next" id="js-image-next"></div>
|
||||
<div thumbsSlider="" class="swiper thumbImage h-[400px]">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button swiper-button-prev" id="js-image-prev"></div>
|
||||
</div>
|
||||
<div class="swiper BigImage w-[calc(100%_-_85px_-_32px)]
|
||||
ml-[32px]">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./assets/images/icon-pro-top.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right w-[490px]">
|
||||
<h2 class="product-name text-[20px] font-[400] mb-[15px]">
|
||||
Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007 (Intel Core i5-12450H | Đen)
|
||||
</h2>
|
||||
<div
|
||||
class="box-deal-time flex items-center justify-between bg-[var(--bg-time-deal)] p-[10px] rounded-[5px]">
|
||||
<div class="left flex items-center">
|
||||
<img src="./assets/images/icon-flash.png" class="w-[22px] h-[29px] block mr-[10px]"
|
||||
width="100%" height="100%" alt="flash">
|
||||
<p class="title text-[20px] uppercase font-[700] text-white">Deal hot</p>
|
||||
</div>
|
||||
<div class="right flex items-center text-white">
|
||||
<span class="mr-[10px]">Kết thúc trong</span>
|
||||
<div class="p-box-time d-flex align-items">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-price-deail mt-[10px] p-[10px_0] border-b-[1px] border-dashed border-[#e2e2e2]">
|
||||
<div class="main-price flex items-center">
|
||||
<div class="price text-[26px] font-[600] mr-[10px] text-[#f00000]">29.490.000 <u>đ</u></div>
|
||||
<div class="old-price text-[#afafaf] text-[14px] mr-[15px]">29.990.000 <u>đ</u></div>
|
||||
<div class="saleoff">-30%</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-sold-detail w-[290px] h-[18px] leading-[18px] rounded-[26px] relative bg-[#ffe9c2]">
|
||||
<div class="line absolute left-[0] top-[0] h-[100%] bg-[#f48320] rounded-[26px]"
|
||||
style="width: 90%;"></div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-center text-[10px] font-[500]">
|
||||
Đã bán
|
||||
<span class="ql-sold">8</span>/ <span class="ql-conlai">10</span>
|
||||
Sản phẩm
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-specification m-[15px_0]">
|
||||
<div class="item flex mb-[15px]">
|
||||
<i class="fas fa-check-circle text-[#166dd8] mr-[10px] mt-[4.3px]"></i>
|
||||
<p class="text-[14px]">CPU: Intel Core i5-12450H (3.3GHz up to 4.4GHz 12MB)</p>
|
||||
</div>
|
||||
<div class="item flex mb-[15px">
|
||||
<i class="fas fa-check-circle text-[#166dd8] mr-[10px] mt-[4.3px]"></i>
|
||||
<p class="text-[14px]">VGA: NVIDIA® GeForce RTX™ 2050 4GB GDDR6 + Intel UHD Graphics</p>
|
||||
</div>
|
||||
<div class="item flex mb-[15px">
|
||||
<i class="fas fa-check-circle text-[#166dd8] mr-[10px] mt-[4.3px]"></i>
|
||||
<p class="text-[14px]">Màn hình: 15.6inch FHD (1920 x 1080) IPS, 144Hz, Slim Bezel, Acer
|
||||
ComfyView™</p>
|
||||
</div>
|
||||
<div class="item flex mb-[15px">
|
||||
<i class="fas fa-check-circle text-[#166dd8] mr-[10px] mt-[4.3px]"></i>
|
||||
<p class="text-[14px]">RAM: 8GB (8x1) DDR4 3200MHz (2x SO-DIMM socket, up to 32GB SDRAM)</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0)"
|
||||
class="btn-deal w-full text-center h-[42px] leading-[42px] rounded-[26px] text-white background-blue uppercase text-[18px] font-[700] block hover:background-white hover:border-blue hover:text-blue"
|
||||
onclick="addDealCart()">Mua giá sốc</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-revew-history flex mt-[22px]">
|
||||
<div class="content-left w-[calc(100%_-490px_-18px)] mr-[18px]">
|
||||
<div class="box-review shadow-[0_4px_4px_4px_#00000026] bg-white rounded-[15px] p-[20px_15px]">
|
||||
<div class="main-title flex items-center justify-between">
|
||||
<div class="title-left">
|
||||
<div class="title flex items-center">
|
||||
<h2 class="text-[16px] mr-[10px] font-[700]">Đánh giá sản phẩm</h2>
|
||||
<span>(100 đánh giá)</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="rating">
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="total block ml-[5px] text-[14px]">
|
||||
<span>4.9</span>
|
||||
<span>/</span>
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0)"
|
||||
class="btn-review w-[146px] h-[32px] leading-[32px] text-center background-blue text-white rounded-[26px] hover:background-white hover:text-blue hover:border-blue">Gửi
|
||||
đánh giá</a>
|
||||
</div>
|
||||
|
||||
<div class="list-review mt-[15px]">
|
||||
<div class="item-review flex flex-wrap mb-[10px] relative">
|
||||
<div class="avatar w-[40px] h-[40px] mr-[7px]">
|
||||
<img src="./assets/images/avatar-user.png" width="100%" height="100%"
|
||||
class="w-[100%] h-[100%] object-contain block" alt="avatar">
|
||||
</div>
|
||||
<div class="info-cnt w-[calc(100%_-47px)]">
|
||||
<div class="name-user font-[700]">Anh quang</div>
|
||||
<div class="total-view text-[14px]">
|
||||
5.0 <i class="fa fa-star text-[#f1b510]"></i>
|
||||
</div>
|
||||
<p class="cnt text-[13px]">Tuần trc mới chơi trúng đấu giá máy tính này xong. Xịn
|
||||
nha, mượt lắm,
|
||||
giao hành nhanh, uy tín.</p>
|
||||
<div class="time-reply flex items-center">
|
||||
<span class="time text-[13px] text-[#afafaf] mr-[10px]">20-06-2024, 10:46
|
||||
am</span>
|
||||
<a href="javascript:void(0)" class="btn-reply text-[#166dd8]">Trả lời</a>
|
||||
</div>
|
||||
<div class="list-image flex items-center mt-[10px] mb-[20px]">
|
||||
<a href="" class="item w-[65px] h-[65px] block mr-[10px]">
|
||||
<img src="./assets/images/image-review-1.png" class="block w-full h-[100%]"
|
||||
alt="">
|
||||
</a>
|
||||
<a href="" class="item w-[65px] h-[65px] block mr-[10px]">
|
||||
<img src="./assets/images/image-review-2.png" class="block w-full h-[100%]"
|
||||
alt="">
|
||||
</a>
|
||||
<a href="" class="item item w-[65px] h-[65px] block mr-[10px]">
|
||||
<img src="./assets/images/image-review-3.png" class="block w-full h-[100%]"
|
||||
alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-reppy w-[100%] ml-[45px]">
|
||||
<div
|
||||
class="item-reply flex relative mb-[10px] after:absolute after:w-[26px] after:h-[115%] after:rounded-[0_0_0_18px] after:content-[''] after:bg-transparent after:left-[-27px] after:bottom-[84%] after:border-t-0 after:border-r-0 after:border-[1px] after:border-[#e2e2e2]">
|
||||
<div class="avatar w-[40px] h-[40px] mr-[7px]">
|
||||
<img src="./assets/images/avatar-admin.png"
|
||||
class="w-[100%] h-[100%] object-contain block" width="100%"
|
||||
height="100%" alt="avatar">
|
||||
</div>
|
||||
<div class="info-cnt w-[calc(100%_-47px)]">
|
||||
<div class="name-user font-[700]">Anphatcomputer</div>
|
||||
<p class="cnt text-[13px]">Anphat xin cảm ơn anh Quang đã ủng hộ.
|
||||
<br> <br>
|
||||
Anh có thể truy cập website anphatpc.com.vn để cập nhật và nhận thêm
|
||||
thông tin chương trình khuyến mãi hấp dẫn từ Anphat
|
||||
ạ! <br>
|
||||
Trân trọng cảm ơn anh!
|
||||
</p>
|
||||
<div class="time-reply flex items-center">
|
||||
<span class="time text-[13px] text-[#afafaf] mr-[10px]">20-06-2024,
|
||||
10:46 am</span>
|
||||
<a href="javascript:void(0)" class="btn-reply text-[#166dd8]">Trả
|
||||
lời</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-reply flex relative mb-[10px] after:absolute after:w-[26px] after:h-[115%] after:rounded-[0_0_0_18px] after:content-[''] after:bg-transparent after:left-[-27px] after:bottom-[84%] after:border-t-0 after:border-r-0 after:border-[1px] after:border-[#e2e2e2]">
|
||||
<div class="avatar w-[40px] h-[40px] mr-[7px]">
|
||||
<img src="./assets/images/avatar-admin.png"
|
||||
class="w-[100%] h-[100%] object-contain block" width="100%"
|
||||
height="100%" alt="avatar">
|
||||
</div>
|
||||
<div class="info-cnt w-[calc(100%_-47px)]">
|
||||
<div class="name-user font-[700]">Anphatcomputer</div>
|
||||
<p class="cnt text-[13px]">Anphat xin cảm ơn anh Quang đã ủng hộ.
|
||||
<br> <br>
|
||||
Anh có thể truy cập website anphatpc.com.vn để cập nhật và nhận thêm
|
||||
thông tin chương trình khuyến mãi hấp dẫn từ Anphat
|
||||
ạ! <br>
|
||||
Trân trọng cảm ơn anh!
|
||||
</p>
|
||||
<div class="time-reply flex items-center">
|
||||
<span class="time text-[13px] text-[#afafaf] mr-[10px]">20-06-2024,
|
||||
10:46 am</span>
|
||||
<a href="javascript:void(0)" class="btn-reply text-[#166dd8]">Trả
|
||||
lời</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex flex-wrap mb-[10px] relative">
|
||||
<div class="avatar w-[40px] h-[40px] mr-[7px]">
|
||||
<img src="./assets/images/avatar-user.png"
|
||||
class="w-[100%] h-[100%] object-contain block" width="100%" height="100%"
|
||||
alt="avatar">
|
||||
</div>
|
||||
<div class="info-cnt w-[calc(100%_-47px)]">
|
||||
<div class="name-user font-[700]">Anh quang</div>
|
||||
<div class="total-view text-[14px]">
|
||||
5.0 <i class="fa fa-star text-[#f1b510]"></i>
|
||||
</div>
|
||||
<p class="cnt text-[13px]">Tuần trc mới chơi trúng đấu giá máy tính này xong. Xịn
|
||||
nha, mượt lắm,
|
||||
giao hành nhanh, uy tín.</p>
|
||||
<div class="time-reply flex items-center">
|
||||
<span class="time text-[13px] text-[#afafaf] mr-[10px]">20-06-2024, 10:46
|
||||
am</span>
|
||||
<a href="javascript:void(0)" class="btn-reply text-[#166dd8]">Trả lời</a>
|
||||
</div>
|
||||
<div class="list-image flex items-center mt-[10px] mb-[20px]">
|
||||
<a href="" class="item w-[65px] h-[65px] block mr-[10px]">
|
||||
<img src="./assets/images/image-review-1.png" class="block w-full h-[100%]"
|
||||
alt="">
|
||||
</a>
|
||||
<a href="" class="item w-[65px] h-[65px] block mr-[10px]">
|
||||
<img src="./assets/images/image-review-2.png" class="block w-full h-[100%]"
|
||||
alt="">
|
||||
</a>
|
||||
<a href="" class="item item w-[65px] h-[65px] block mr-[10px]">
|
||||
<img src="./assets/images/image-review-3.png" class="block w-full h-[100%]"
|
||||
alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0)"
|
||||
class="more-review flex items-center justify-center text-blue pt-[15px] mt-[15px] border-t-[1px] border-[#f5f5f5]">
|
||||
<span>Xem tất cả đánh giá</span> <i class="fas fa-chevron-right ml-[5px] mt-[2px]"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="box-question mt-[25px] bg-[#f5f5f5] p-[15px] rounded-[15px]">
|
||||
<h2 class="title text-[16px] mb-[10px] font-[700]">Hỏi đáp <span
|
||||
class="text-[14px] font-[400]">(100 bình
|
||||
luận)</span></h2>
|
||||
<div class="form-question flex">
|
||||
<textarea name="" id=""
|
||||
class="input-question shadow-[0_4px_4px_0px_#00000026] bg-white w-[calc(100%_-70px)] h-[94px] rounded-[10px] border-0 outline-none p-[10px_15px]"
|
||||
placeholder="Xin mời để lại câu hỏi, Anphat sẽ trả lời lại trong 1h, các câu hỏi sau 22h - 8h sẽ được trả lời vào sáng hôm sau"
|
||||
height=""></textarea>
|
||||
<button type="submit"
|
||||
class="btn-question w-[60px] ml-[10px] h-[32px] leading-[32px] background-blue text-white rounded-[26px]">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
<span>Gửi</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="list-question mt-[15px]">
|
||||
<div class="item-question flex flex-wrap mb-[15px]">
|
||||
<div class="avatar w-[20px] h-[20px] mr-[10px] mt-[3px]">
|
||||
<img src="./assets/images/avatar-user.png" class="w-full h-[100%] block"
|
||||
width="100%" height="100%" alt="avatar">
|
||||
</div>
|
||||
<div class="info-cnt w-[calc(100%_-30px)]">
|
||||
<div class="info-user flex items-center">
|
||||
<div class="name-user font-[600] mr-[15px]">Anh Quang</div>
|
||||
<span class="time text-[#afafaf] text-[13px]">20-06-2024, 10:46 am</span>
|
||||
</div>
|
||||
<div
|
||||
class="cnt bg-white shadow-[0_4px_4px_0px_#00000026] p-[10px_15px] rounded-[10px] text-[13px] font-[300]">
|
||||
<p>Sau khi thắng đấu gía thời gian bao lâu để thanh toán nhận hàng</p>
|
||||
<a href="javascript:void(0)"
|
||||
class="click-question mt-[10px] text-[#166dd8] flex items-center justify-end ">
|
||||
<i class="fas fa-comments"></i> <span>Trả lời</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-reply w-full mt-[15px] ml-[30px]">
|
||||
<div class="reply-question flex mb-[15px]">
|
||||
<div class="avatar w-[20px] h-[20px] mr-[10px] mt-[3px]">
|
||||
<img src="./assets/images/avatar-user.png" class="w-full h-[100%] block"
|
||||
width="100%" height="100%" alt="avatar">
|
||||
</div>
|
||||
<div class="info-cnt w-[calc(100%_-30px)]">
|
||||
<div class="info-user flex items-center">
|
||||
<div class="name-user font-[600] mr-[15px]">Anh Quang</div>
|
||||
<span class="time text-[#afafaf] text-[13px]">20-06-2024, 10:46
|
||||
am</span>
|
||||
</div>
|
||||
<div
|
||||
class="cnt bg-white shadow-[0_4px_4px_0px_#00000026] p-[10px_15px] rounded-[10px] text-[13px] font-[300]">
|
||||
<p>Sau khi thắng đấu gía thời gian bao lâu để thanh toán nhận hàng</p>
|
||||
<a href="javascript:void(0)"
|
||||
class="click-question mt-[10px] text-[#166dd8] flex items-center justify-end ">
|
||||
<i class="fas fa-comments"></i> <span>Trả lời</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0)"
|
||||
class="more-question mt-[10px] flex items-center justify-center font-[400] text-[#166dd8]">
|
||||
<span>Xem tất cả hỏi đáp</span> <i class="fas fa-chevron-right ml-[5px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-info-product mt-[20px]">
|
||||
<a href="javascrit:void(0)" data-id="#tab-info"
|
||||
class="item-tab active block w-[222px] h-[50px] leading-[50px] text-center rounded-[15px_15px_0_0] bg-[#f5f5f5] text-black text-[16px] font-[600] mr-[5px] ">Thông
|
||||
tin sản
|
||||
phẩm</a>
|
||||
|
||||
<div class="content-tab" id="tab-info">
|
||||
<div class="flex info mt-[15px]">
|
||||
<img class="w-[290px] h-[290px] block mr-[10px] object-contain"
|
||||
src="./assets/images/product-detail-big.png" width="100%" height="100%" alt="">
|
||||
<ul class="w-[calc(100%_-300px)] inside">
|
||||
<li class="list-disc ml-[20px]">Tên sản phẩm: Laptop Acer Aspire 7 A715-76-53PJ
|
||||
NH.QGESV.007
|
||||
</li>
|
||||
<li class="list-disc ml-[20px]">Dòng Laptop: Laptop | Laptop Acer Aspire | Laptop Đồ
|
||||
Họa |
|
||||
Laptop văn phòng</li>
|
||||
<b>Bộ vi xử lý</b>
|
||||
<li class="list-disc ml-[20px]">Công nghệ CPU: Intel Core i5-12450H</li>
|
||||
<li class="list-disc ml-[20px]">Số nhân: 8</li>
|
||||
<li class="list-disc ml-[20px]">Số luồng: 12</li>
|
||||
<li class="list-disc ml-[20px]">Tốc độ tối đa: 4.4GHz</li>
|
||||
<li class="list-disc ml-[20px]">Bộ nhớ đệm: 12MB</li>
|
||||
<b>Bộ nhớ trong (RAM)</b>
|
||||
<li class="list-disc ml-[20px]">RAM: 16GB (2x8GB)</li>
|
||||
<li class="list-disc ml-[20px]">Loại RAM: DDR4</li>
|
||||
<li class="list-disc ml-[20px]">Tốc độ Bus RAM: 3200Mhz</li>
|
||||
<li class="list-disc ml-[20px]">Số khe cắm: 2 khe</li>
|
||||
<li class="list-disc ml-[20px]">Hỗ trợ RAM tối đa: Nâng cấp tối đa 32GB</li>
|
||||
<b>Ổ cứng</b>
|
||||
<li class="list-disc ml-[20px]">Dung lượng: 512GB PCIe NVMe SSD</li>
|
||||
<li class="list-disc ml-[20px]">Tốc độ vòng quay</li>
|
||||
<li class="list-disc ml-[20px]">Khe cắm SSD mở rộng: nâng cấp tối đa 1 TB SSD PCIe
|
||||
Gen4, 16
|
||||
Gb/s, NVMe</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right w-[490px]">
|
||||
<div class="list-product-deal bg-[var(--bg-list-deal-ongoing)] mt-[15px] rounded-[15px] p-[15px]">
|
||||
<h2 class="title text-[20px] font-[700] uppercase text-center mb-[10px] text-white">Flash sale
|
||||
đang diễn ra
|
||||
</h2>
|
||||
<div class="list flex flex-wrap mr-[-15px]">
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_2_-_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 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_-_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 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_-_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 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_-_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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="overlay" onclick="closePopop()"></div>
|
||||
<div class="box-popup popup-add-cart ">
|
||||
<h2 class="title text-[24px] font-700 uppercase text-center mb-[15px]">Thông tin đặt hàng</h2>
|
||||
<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>
|
||||
<div class="form-cart">
|
||||
<div class="title-form flex items-center mb-[10px]">
|
||||
<i
|
||||
class="fas fa-map-marker-alt text-[23px] mr-[10px] text-[#f1b510] relative after:absolute after:contnet-[''] after:right-[-3px] after:top-[-2px] after:bg-[#f1b510] after:w-[8px] after:h-[8px] after:rounded-[50%] after:z-[999] after:border-[2px] after:border-[#fff]"></i>
|
||||
Địa chỉ nhân hàng
|
||||
</div>
|
||||
<div class="item-input mb-[10px]">
|
||||
<input type="text"
|
||||
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
|
||||
id="name" name="name" placeholder="Họ và tên">
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="item-input mb-[10px]">
|
||||
<input type="text"
|
||||
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
|
||||
id="email" name="email" placeholder="Email">
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="item-input mb-[10px]">
|
||||
<input type="text"
|
||||
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
|
||||
id="phone" name="phone" placeholder="Số điện thoại">
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between box-select mb-[10px]">
|
||||
<div class="item-input w-[calc(100%_/2_-5px)]">
|
||||
<select name="" id="city"
|
||||
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[0_10px] bg-[#f5f5f5] outline-none rounded-[8px]">
|
||||
<option value="0">Tỉnh/Thành phố</option>
|
||||
<option value="28">Hà nội</option>
|
||||
</select>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="item-input w-[calc(100%_/2_-5px)]">
|
||||
<select name="" id="district"
|
||||
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[0_10px] bg-[#f5f5f5] outline-none rounded-[8px]">
|
||||
<option value="0">Quận/Huyện</option>
|
||||
<option value="2">Láng hạ</option>
|
||||
</select>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-input mb-[10px]">
|
||||
<input type="text"
|
||||
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
|
||||
id="address" name="address" placeholder="Tòa nhà, Tên đường..">
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="item-input mb-[10px]">
|
||||
<input type="text"
|
||||
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
|
||||
name="note" placeholder="Nhập ghi chú cho chúng tôi">
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="box-total-price">
|
||||
<div class="box-provisional flex items-center justify-between mb-[10px]">
|
||||
<span>Tạm tính <span>(1 sản phẩm)</span></span>
|
||||
<div class="provisional">29.000.000 <u>đ</u></div>
|
||||
</div>
|
||||
<div class="box-total-amount flex items-center justify-between">
|
||||
<b>Tổng tiền</b>
|
||||
<div class="total-amount text-[20px] font-[700] text-[#f00000]">29.000.000 <u>đ</u></div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0)"
|
||||
class="btn-send-cart block w-[390px] 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="checkbuy()">
|
||||
Đặt mua
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box-popup popup-buy-success">
|
||||
<div class="title text-[24px] font-[700] text-center uppercase text-[#a0d427]">
|
||||
<img src="./assets/images/image-checkbox.png" class="block w-[58px] h-[58px] m-[auto_auto_15px_auto]"
|
||||
width="100%" height="100%" alt="checkbox">
|
||||
<h2>Đặt hàng thành công</h2>
|
||||
</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>
|
||||
<div class="content text-center">
|
||||
<p class="italic">Cảm ơn bạn đã mua hàng tại <a href="#" class="text-red">Anphatpc.com.vn.</a> <br>
|
||||
Nhân viên <a href="#" class="text-red">Anphatpc.com.vn</a> sẽ liên hệ với bạn trong thời gian sớm nhất.
|
||||
</p>
|
||||
<b class="block m-[15px_0] text-[16px]">Mã đơn hàng của bạn <a href="#" class="text-red">#0061</a></b>
|
||||
<i>Khi cần hỗ trợ vui lòng liên hệ hotline 1800xx</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="box-faq mt-[25px]">
|
||||
<div class="container">
|
||||
<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 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 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-[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 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-[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 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-[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 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-[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 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer background-footer mt-[20px]">
|
||||
<div class="container">
|
||||
<div class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#fff]">
|
||||
<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 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 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 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 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 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 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 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 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 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 w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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/deal_detail.js"></script>
|
||||
|
||||
</html>
|
||||
1720
detail-mobile.html
Normal file
1720
detail-mobile.html
Normal file
File diff suppressed because it is too large
Load Diff
1249
detail.html
Normal file
1249
detail.html
Normal file
File diff suppressed because it is too large
Load Diff
673
home-mobile.html
Normal file
673
home-mobile.html
Normal file
@@ -0,0 +1,673 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="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-mb.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-mb">
|
||||
<div
|
||||
class="header bg-[var(--bg-header)] p-[10px_0] duration-[0.5s] delay-[0] top-[-50px] shadow-[0_1px_6px_#00000040]">
|
||||
<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%] block" width="100%" height="100%"
|
||||
alt="logo">
|
||||
</a>
|
||||
<div class="header-right flex items-center">
|
||||
<a href="javascript:void(0)" class="item flex items-center">
|
||||
<i class="fas fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homepage">
|
||||
<div class="banner w-full block">
|
||||
<a href="" class="item">
|
||||
<img src="./assets/images/banner-mobile.png" class="block h-[100%]" width="100%" height="100%"
|
||||
alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-top-auction">
|
||||
<div class="container">
|
||||
|
||||
<h2 class="title uppercase font-[600] text-[24px] text-center p-[10px_0_20px_0]">
|
||||
Top đấu giá sôi động</h2>
|
||||
<div class="list-auction pb-[10px]" id="js-list-auction-top">
|
||||
<div class="item-auction relative flex p-[12px] rounded-[14px] bg-[#F4F4F4] mb-[40px]">
|
||||
<div
|
||||
class="info w-[calc(100%_-142px)] mr-[12px] p-[10px] bg-[#fff] rounded-[14px] absolute left-[12px] top-[12px]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[700] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price block m-[5px_0] text-[14px] text-[#000]">
|
||||
Giá gốc: <span class="font-[700] mr-[3px]">280.490.000</span><u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[14px] mr-[5px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-[#FF0002] text-[14px] font-[700]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
<div
|
||||
class="images block relative w-[120px] h-[120px] overflow-hidden ml-[calc(100%_-120px)]">
|
||||
<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/tuiluonvuituoi.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute right-[0] top-[0] text-center flex items-center justify-center">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[5px] text-[12px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction relative flex p-[12px] rounded-[14px] bg-[#F4F4F4] mb-[40px]">
|
||||
<div
|
||||
class="info w-[calc(100%_-142px)] mr-[12px] p-[10px] bg-[#fff] rounded-[14px] absolute left-[12px] top-[12px]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[700] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price block m-[5px_0] text-[14px] text-[#000]">
|
||||
Giá gốc: <span class="font-[700] mr-[3px]">280.490.000</span><u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[14px] mr-[5px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-[#FF0002] text-[14px] font-[700]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
<div
|
||||
class="images block relative w-[120px] h-[120px] overflow-hidden ml-[calc(100%_-120px)]">
|
||||
<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/tuiluonvuituoi.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute right-[0] top-[0] text-center flex items-center justify-center">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[5px] text-[12px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction relative flex p-[12px] rounded-[14px] bg-[#F4F4F4] mb-[40px]">
|
||||
<div
|
||||
class="info w-[calc(100%_-142px)] mr-[12px] p-[10px] bg-[#fff] rounded-[14px] absolute left-[12px] top-[12px]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[700] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price block m-[5px_0] text-[14px] text-[#000]">
|
||||
Giá gốc: <span class="font-[700] mr-[3px]">280.490.000</span><u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[14px] mr-[5px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-[#FF0002] text-[14px] font-[700]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
<div
|
||||
class="images block relative w-[120px] h-[120px] overflow-hidden ml-[calc(100%_-120px)]">
|
||||
<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/tuiluonvuituoi.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute right-[0] top-[0] text-center flex items-center justify-center">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[5px] text-[12px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction relative flex p-[12px] rounded-[14px] bg-[#F4F4F4] mb-[40px]">
|
||||
<div
|
||||
class="info w-[calc(100%_-142px)] mr-[12px] p-[10px] bg-[#fff] rounded-[14px] absolute left-[12px] top-[12px]">
|
||||
<a href="./detail.html"
|
||||
class="name line-clamp-2 font-[700] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price block m-[5px_0] text-[14px] text-[#000]">
|
||||
Giá gốc: <span class="font-[700] mr-[3px]">280.490.000</span><u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[14px] mr-[5px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-[#FF0002] text-[14px] font-[700]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html" class="btn-add text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
<div
|
||||
class="images block relative w-[120px] h-[120px] overflow-hidden ml-[calc(100%_-120px)]">
|
||||
<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/tuiluonvuituoi.png" alt=""></a>
|
||||
<div
|
||||
class="box-join absolute right-[0] top-[0] text-center flex items-center justify-center">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[5px] text-[12px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner-sale">
|
||||
<a href="" class="block"><img src="./assets/images/banner-sale.png" width="100%" height="100%"
|
||||
alt="sale"></a>
|
||||
</div>
|
||||
|
||||
<div class="box-list-auction p-[20px_0] bg-[#F4F4F4]">
|
||||
<div class="container">
|
||||
<div class="box-auction mb-[20px] going-on">
|
||||
<div class="main-title">
|
||||
<span class="text-[14px] block text-center font-[700] uppercase">Đang diễn
|
||||
ra</span>
|
||||
<div class="box-time flex items-center justify-center mt-[2px]">
|
||||
<span class="font-[500] text-[#666666]">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="list-auction flex mr-[-10px] mt-[10px] pt-[10px] overflow-auto">
|
||||
<div class="item-auction rounded-[14px] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[200px] overflow-hidden rounded-[14px_14px_0_0]">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-cover scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/vay1.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info w-[224px] p-[20px_12px_10px_12px]">
|
||||
<a href="./detail.html" class="name line-clamp-2 font-[700] text-[14px]">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc: <span class="font-[700]">280.490.000 <u>đ</u></span>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[13px] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-[#FF0002] text-[14px] font-[700]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction rounded-[14px] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[200px] overflow-hidden rounded-[14px_14px_0_0]">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-cover scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/vay2.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info w-[224px] p-[20px_12px_10px_12px]">
|
||||
<a href="./detail.html" class="name line-clamp-2 font-[700] text-[14px]">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc: <span class="font-[700]">280.490.000 <u>đ</u></span>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[13px] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-[#FF0002] text-[14px] font-[700]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/listdaugia-mb.html"
|
||||
class="more-all w-[125px] h-[40px] leading-[40px] m-[0_auto] text-center block border-[1px] border-[#000] rounded-[100px] uppercase font-bold text-[14px]">Xem
|
||||
tất cả</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-sale mb-[15px]">
|
||||
<a href="" class="block"><img src="./assets/images/banner-sale-2.png" width="100%" height="100%"
|
||||
alt="sale"></a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="box-auction coming-soon">
|
||||
<div class="main-title">
|
||||
<span class="text-[14px] block text-center font-[700] uppercase">Sắp diễn
|
||||
ra</span>
|
||||
<div class="box-time flex items-center justify-center mt-[2px]">
|
||||
<span class="font-[500] text-[#666666]">Bắt đầu sau</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="list-auction flex mr-[-10px] mt-[10px] pt-[10px] overflow-auto">
|
||||
<div class="item-auction rounded-[14px] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[200px] overflow-hidden rounded-[14px_14px_0_0]">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-cover scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/vay1.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info w-[224px] p-[20px_12px_10px_12px]">
|
||||
<a href="./detail.html" class="name line-clamp-2 font-[700] text-[14px]">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc: <span class="font-[700]">280.490.000 <u>đ</u></span>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[13px] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-[#FF0002] text-[14px] font-[700]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-auction rounded-[14px] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[200px] overflow-hidden rounded-[14px_14px_0_0]">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-cover scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/vay2.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info w-[224px] p-[20px_12px_10px_12px]">
|
||||
<a href="./detail.html" class="name line-clamp-2 font-[700] text-[14px]">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc: <span class="font-[700]">280.490.000 <u>đ</u></span>
|
||||
</div>
|
||||
<div class="price-auction flex items-center">
|
||||
<p class="txt text-[13px] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-[#FF0002] text-[14px] font-[700]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/listdaugia-mb.html"
|
||||
class="more-all w-[125px] h-[40px] leading-[40px] m-[0_auto] text-center block border-[1px] border-[#000] rounded-[100px] uppercase font-bold text-[14px]">Xem
|
||||
tất cả</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-deal-hot bg-[#F0292B] pb-[15px]">
|
||||
<div class="container">
|
||||
<h2 class="title flex items-center justify-center p-[10px_0]">
|
||||
<p class="ml-[7px] uppercase text-[16px] font-[700] text-[#fff]">Deal hot
|
||||
</p>
|
||||
</h2>
|
||||
<div class="tab-list">
|
||||
<a href="javascript:void(0)"
|
||||
class="item coming flex items-center justify-between w-full bg-[#afafaf] text-white p-[5px_10px] rounded-[15px]">
|
||||
<p class="text-[14px] text-center font-[700]">Sắp diễn ra
|
||||
</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>
|
||||
<a href="javascript:void(0)"
|
||||
class="item flex items-center justify-between mt-[10px] w-full text-white p-[5px_0] rounded-[15px]">
|
||||
<p
|
||||
class="text-[14px] text-center font-[700] mb-[5px] bg-[#FFD9D9] text-[#F0292B] p-[5px_10px] rounded-[20px]">
|
||||
Đang diễn
|
||||
ra
|
||||
</p>
|
||||
<div class="box-time flex items-center">
|
||||
<span class="text-[13px]">Còn lại</span>
|
||||
<div class="item-time"><b class="bg-[#fff] w-[26px] h-[26px] leading-[26px] ">02</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-[#fff] w-[26px] h-[26px] leading-[26px] ">16</b>
|
||||
</div>
|
||||
<div class="item-time"><b class="bg-[#fff] w-[26px] h-[26px] leading-[26px] ">42</b>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="product-list flex mr-[-10px] overflow-auto pt-[10px]">
|
||||
<div class="item-deal rounded-[14px] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[200px] overflow-hidden rounded-[14px_14px_0_0]">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-cover scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/vay1.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info w-[255px] p-[20px_12px_10px_12px]">
|
||||
<a href="./detail.html" class="name line-clamp-2 font-[700] text-[14px]">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="flex items-center m-[5px_0]">
|
||||
<del class="old-price flex items-center text-[14px] text-[#666666]">
|
||||
280.490.000
|
||||
<u>đ</u>
|
||||
</del>
|
||||
<div class="price-highest text-[#FF0002] text-[14px] font-[700] ml-[5px]">
|
||||
2.300.490.000<u>đ</u>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-sold w-full bg-[#FFF7E3] relative h-[18px] leading-[18px] rounded-[26px] mt-[10px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] bg-[#E7D9B7] 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] font-[700]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span>
|
||||
Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal rounded-[14px] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[200px] overflow-hidden rounded-[14px_14px_0_0]">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-cover scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/vay1.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info w-[255px] p-[20px_12px_10px_12px]">
|
||||
<a href="./detail.html" class="name line-clamp-2 font-[700] text-[14px]">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="flex items-center m-[5px_0]">
|
||||
<del class="old-price flex items-center text-[14px] text-[#666666]">
|
||||
280.490.000
|
||||
<u>đ</u>
|
||||
</del>
|
||||
<div class="price-highest text-[#FF0002] text-[14px] font-[700] ml-[5px]">
|
||||
2.300.490.000<u>đ</u>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-sold w-full bg-[#FFF7E3] relative h-[18px] leading-[18px] rounded-[26px] mt-[10px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] bg-[#E7D9B7] 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] font-[700]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span>
|
||||
Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-deal rounded-[14px] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[200px] overflow-hidden rounded-[14px_14px_0_0]">
|
||||
<a href="./detail.html">
|
||||
<img class="block w-[100%] h-[100%] object-cover scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||
src="./assets/images/vay1.png" alt=""></a>
|
||||
</div>
|
||||
<div class="info w-[255px] p-[20px_12px_10px_12px]">
|
||||
<a href="./detail.html" class="name line-clamp-2 font-[700] text-[14px]">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="flex items-center m-[5px_0]">
|
||||
<del class="old-price flex items-center text-[14px] text-[#666666]">
|
||||
280.490.000
|
||||
<u>đ</u>
|
||||
</del>
|
||||
<div class="price-highest text-[#FF0002] text-[14px] font-[700] ml-[5px]">
|
||||
2.300.490.000<u>đ</u>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-sold w-full bg-[#FFF7E3] relative h-[18px] leading-[18px] rounded-[26px] mt-[10px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] bg-[#E7D9B7] 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] font-[700]">
|
||||
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span>
|
||||
Sản
|
||||
phẩm</div>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/listdeal-mb.html" class="btn-more-all">
|
||||
Xem tất cả
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="box-faq mt-[15px]">
|
||||
<div class="container">
|
||||
<div class="p-[10px]">
|
||||
<h2 class="title text-center text-[16px] font-[600] uppercase text-[#000] 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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="btn-fixed shadow-[0_-2px_15px_0px_#00000026] left-[0] bottom-[0] bg-white fixed w-[100%] flex items-center h-[70px]">
|
||||
<a href="/" class="w-[25%] block text-center text-[#3D52BE]">
|
||||
<i class="fas fa-home text-[14px]"></i>
|
||||
<span class="block font-[700]">Trang chủ</span>
|
||||
</a>
|
||||
<a href="/listdaugia-mb.html" class="w-[25%] block text-center text-[#666666]">
|
||||
<i class="fas fa-database text-[14px]"></i>
|
||||
<span class="block font-[700]">Đấu giá</span>
|
||||
</a>
|
||||
<a href="/listdeal-mb.html" class="w-[25%] block text-center text-[#FF0002]">
|
||||
<i class="fas fa-fire-alt text-[18px]"></i>
|
||||
<span class="block font-[700]">Deal hot</span>
|
||||
</a>
|
||||
<a href="/account-mb.html" class="w-[25%] block text-center text-[#666666]">
|
||||
<i class="far fa-user-circle text-[14px]"></i>
|
||||
<span class="block font-[700]">Tài khoản</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</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>
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.faqlink').click(function () {
|
||||
$(this).parents('.item').toggleClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
$(window).scroll(function () {
|
||||
|
||||
if ($(window).scrollTop() > 100) {
|
||||
$(".header").addClass('header-fixed');
|
||||
}
|
||||
else {
|
||||
$(".header").removeClass('header-fixed');
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
</html>
|
||||
499
listdaugia-mb.html
Normal file
499
listdaugia-mb.html
Normal file
@@ -0,0 +1,499 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="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-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] shadow-[0_1px_6px_#00000040]">
|
||||
<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-black">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-black">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down ml-[5px] text-black"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-auction">
|
||||
<div class="container">
|
||||
<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 w-[calc(100%_-32px)] mr-[16px]">Đấu giá</a>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="background-aution bg-[var(--bg-list-auction)] mt-[45px] p-[10px] rounded-[15px]">
|
||||
<h2
|
||||
class="title w-[100%] block h-[60px] leading-[60px] text-center bg-[var(--color-list-auction)] text-white uppercase text-[24px] m-[-40px_auto_auto_auto] font-[600] rounded-[35px]">
|
||||
Đấu giá kịch tính từ 0Đ</h2>
|
||||
<div class="tab-list flex items-center justify-between mt-[10px]">
|
||||
<a href="javascript:void(0)"
|
||||
class="item-tab w-[calc(100%_/2_-5px)] bg-[#afafaf] p-[7px] rounded-[5px] text-center text-white active">
|
||||
<p class="text-[20px] font-[700] leading-[29px]">20:00</p>
|
||||
<span class="text-[13px] uppercase">Đang diễn ra</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)"
|
||||
class="item-tab w-[calc(100%_/2_-5px)] bg-[#afafaf] p-[7px] rounded-[5px] text-center text-white">
|
||||
<p class="text-[20px] font-[700] leading-[29px]">22:00</p>
|
||||
<span class="text-[13px] uppercase">Sắp diễn ra</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-time m-[15px_0] flex items-center justify-end text-black">
|
||||
<span class="font-[300]">Còn lại</span>
|
||||
<div class="item-time"><b class="text-white">02</b></div>
|
||||
<div class="item-time"><b class="text-white">16</b></div>
|
||||
<div class="item-time"><b class="text-white">42</b></div>
|
||||
</div>
|
||||
<div class="list-auction flex flex-wrap mr-[-10px] mt-[10px]">
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-center">
|
||||
<p class="txt text-[12px] font-[500] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[13px] font-[600]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-center">
|
||||
<p class="txt text-[12px] font-[500] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[13px] font-[600]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-center">
|
||||
<p class="txt text-[12px] font-[500] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[13px] font-[600]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-center">
|
||||
<p class="txt text-[12px] font-[500] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[13px] font-[600]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-center">
|
||||
<p class="txt text-[12px] font-[500] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[13px] font-[600]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-center">
|
||||
<p class="txt text-[12px] font-[500] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[13px] font-[600]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-center">
|
||||
<p class="txt text-[12px] font-[500] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[13px] font-[600]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá
|
||||
gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-center">
|
||||
<p class="txt text-[12px] font-[500] mr-[3px]">Trả cao nhất:</p>
|
||||
<p class="price-highest text-red text-[13px] font-[600]">230.490.000
|
||||
<u>đ</u>
|
||||
</p>
|
||||
</div>
|
||||
<a href="./detail.html"
|
||||
class="btn-add continue text-center m-[10px_auto_auto_auto]">Tiếc tục Đấu
|
||||
giá</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-[#f1b510] bg-[var(--main-color)] hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[#fff] hover:text-white hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[#fff] hover:text-white hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[#fff] hover:text-white hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[#fff] hover:text-white hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
473
listdaugia.html
Normal file
473
listdaugia.html
Normal file
@@ -0,0 +1,473 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./assets/css/style-global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header bg-[var(--bg-header)] shadow-[0_1px_6px_#00000040] p-[6px_0]">
|
||||
<div class="container">
|
||||
<div class="header-main flex items-center justify-between">
|
||||
<div class="header-left">
|
||||
<a href="/" class="logo">
|
||||
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<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-black p-[0_5px] hover:text-[var(--main-color)]">Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<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-black p-[0_5px] hover:text-[var(--main-color)]">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down text-black"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-auction">
|
||||
<div class="container">
|
||||
<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"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||
Đấu giá
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<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 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] 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 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 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>
|
||||
<div class="item-time"><b>42</b></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-auction flex flex-wrap mr-[-15px]">
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_4_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[280px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-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 text-center m-[10px_auto_auto_auto]">Tiếc
|
||||
tục Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_4_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[280px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-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 text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_4_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[280px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-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 text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_4_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[280px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-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 text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_4_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[280px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-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 text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_4_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[280px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-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 text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_4_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[280px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-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 text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-auction p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_4_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||
<div
|
||||
class="images block relative w-[100%] h-[280px] mb-[10px] overflow-hidden pb-[10px] border-b-[2px] border-[var(--main-color)]">
|
||||
<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-[var(--main-color)] flex items-center justify-center rounded-[10px]">
|
||||
<i class="icon_auction"></i>
|
||||
<span class="ml-[3px]">220</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info w-[100%]">
|
||||
<a href="./detail.html"
|
||||
class="name text-center line-clamp-2 font-[500] leading-[16px] hover:text-blue">Túi
|
||||
Neverfull Bandoulière Inside Out GM</a>
|
||||
<div class="old-price text-center block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||
280.490.000 <u>đ</u>
|
||||
</div>
|
||||
<div class="price-auction flex items-center justify-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 text-center m-[10px_auto_auto_auto]">Đấu
|
||||
giá</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-[#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 mt-[25px]">
|
||||
<div class="container">
|
||||
<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 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 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-[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 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-[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 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-[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 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-[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 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer background-footer mt-[20px]">
|
||||
<div class="container">
|
||||
<div class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#fff]">
|
||||
<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 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 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 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 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 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 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 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 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 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 w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
|
||||
|
||||
</html>
|
||||
531
listdeal-mb.html
Normal file
531
listdeal-mb.html
Normal file
@@ -0,0 +1,531 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="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-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] shadow-[0_1px_6px_#00000040]">
|
||||
<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-black">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-black">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down ml-[5px] text-black"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-list-deal">
|
||||
<div class="container">
|
||||
<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 w-[calc(100%_-32px)] mr-[16px]">Đấu giá</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="background-deal shadow-[0_0_0_3px_var(--bg-deal)] bg-[#fff] 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-[var(--main-color)]">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] 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] 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 border-[1px] border-[#e2e2e2]">
|
||||
<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 border-[1px] border-[#e2e2e2]">
|
||||
<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 border-[1px] border-[#e2e2e2]">
|
||||
<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 border-[1px] border-[#e2e2e2]">
|
||||
<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 border-[1px] border-[#e2e2e2]">
|
||||
<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 border-[1px] border-[#e2e2e2]">
|
||||
<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 border-[1px] border-[#e2e2e2]">
|
||||
<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-[var(--main-color)] bg-[var(--main-color)] hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[var(--main-color)] hover:text-white hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[var(--main-color)] hover:text-white hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[var(--main-color)] hover:text-white hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[var(--main-color)] hover:text-white hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
|
||||
</html>
|
||||
379
listdeal.html
Normal file
379
listdeal.html
Normal file
@@ -0,0 +1,379 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./assets/css/style-global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header bg-[var(--bg-header)] shadow-[0_1px_6px_#00000040] p-[6px_0]">
|
||||
<div class="container">
|
||||
<div class="header-main flex items-center justify-between">
|
||||
<div class="header-left">
|
||||
<a href="/" class="logo">
|
||||
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<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-black p-[0_5px] hover:text-[var(--main-color)]">Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<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-black p-[0_5px] hover:text-[var(--main-color)]">Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down text-black"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-list-deal">
|
||||
<div class="container">
|
||||
<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"
|
||||
class="float-left list-none">
|
||||
<a href="/" itemprop="item">
|
||||
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||
Deal hot
|
||||
</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<div class="background-deal shadow-[0_0_0_3px_var(--bg-deal)] bg-[#fff] rounded-[15px] p-[15px]">
|
||||
<h2 class="title flex items-center justify-center mb-[10px]">
|
||||
<i class="icon-deal"></i>
|
||||
<p class="uppercase text-[var(--main-color)] text-[32px] font-[700]">Deal hot</p>
|
||||
</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-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 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 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>
|
||||
<div class="item-time"><b>42</b></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-list flex mr-[-15px]">
|
||||
<div
|
||||
class="item-deal w-[calc(100%_/_4_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white border-[1px] border-[#e2e2e2]">
|
||||
<div class="images w-[100%] h-[280px] 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-[#ffdbe7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] bg-[var(--main-color)] rounded-[26px]"
|
||||
style="width: 90%;"></div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-white 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">Túi
|
||||
Neverfull Bandoulière Inside Out GM</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%_/_4_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white border-[1px] border-[#e2e2e2]">
|
||||
<div class="images w-[100%] h-[280px] 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-[#ffdbe7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] bg-[var(--main-color)] rounded-[26px]"
|
||||
style="width: 90%;"></div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-white 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">Túi
|
||||
Neverfull Bandoulière Inside Out GM</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%_/_4_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white border-[1px] border-[#e2e2e2]">
|
||||
<div class="images w-[100%] h-[280px] 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-[#ffdbe7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] bg-[var(--main-color)] rounded-[26px]"
|
||||
style="width: 90%;"></div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-white 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">Túi
|
||||
Neverfull Bandoulière Inside Out GM</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%_/_4_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white border-[1px] border-[#e2e2e2]">
|
||||
<div class="images w-[100%] h-[280px] 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-[#ffdbe7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||
<div class="line absolute left-[0] top-0 h-[100%] bg-[var(--main-color)] rounded-[26px]"
|
||||
style="width: 90%;"></div>
|
||||
<div
|
||||
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-white 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">Túi
|
||||
Neverfull Bandoulière Inside Out GM</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-[var(--main-color)] bg-[var(--main-color)] hover:bg-[var(--main-color)] hover:border-[var(--main-color)]">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[var(--main-color)] hover:bg-[var(--main-color)] hover:border-[var(--main-color)] hover:text-white">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[var(--main-color)] hover:bg-[var(--main-color)] hover:border-[var(--main-color)] hover:text-white">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[var(--main-color)] hover:bg-[var(--main-color)] hover:border-[var(--main-color)] hover:text-white">1</a>
|
||||
<a href=""
|
||||
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-[var(--main-color)] border-[1px] border-[var(--main-color)] hover:bg-[var(--main-color)] hover:border-[var(--main-color)] hover:text-white">1</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="box-faq mt-[25px]">
|
||||
<div class="container">
|
||||
<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 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 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-[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 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-[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 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-[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 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-[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 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer background-footer mt-[20px]">
|
||||
<div class="container">
|
||||
<div class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#fff]">
|
||||
<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 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 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 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 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 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 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 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 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 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 w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user