up
This commit is contained in:
437
account-mb.html
Normal file
437
account-mb.html
Normal file
@@ -0,0 +1,437 @@
|
|||||||
|
<!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 bg-[var(--bg-header)] shadow-[0_1px_6px_#00000040] 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.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-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-[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-[#fff] 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-[var(--bg-header)] p-[6px_0] shadow-[0_1px_6px_#00000040]">
|
||||||
|
<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-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-[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/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>
|
||||||
645
assets/css/style-global-mb.css
Normal file
645
assets/css/style-global-mb.css
Normal file
@@ -0,0 +1,645 @@
|
|||||||
|
@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&display=swap");
|
||||||
|
|
||||||
|
/* thay đổi màu sắc */
|
||||||
|
:root {
|
||||||
|
--main-color: #3fb125; /* màu chính */
|
||||||
|
--color-icon-action: #d00307; /* màu nền icon đấu giá */
|
||||||
|
--color-hover-text: #2578e7; /* màu nền hover vào text */
|
||||||
|
--color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
|
||||||
|
--color-bg-title-2: #ffca00; /* màu nền chữ vàng */
|
||||||
|
--color-box-auction: #2578e7; /* màu nền đấu giá kịch tính */
|
||||||
|
--color-bg-footer: #2a8810; /* 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: #2578e7; /* màu nền danh sách đấu giá */
|
||||||
|
--color-list-auction: #ffca00; /* màu nền tiều đề danh sách đấu giá */
|
||||||
|
--bg-deal: #ea3e00; /* màu nền box deal */
|
||||||
|
--border-faq: #110e83; /* màu border câu hỏi thường gặp */
|
||||||
|
--color-faq: #110e83; /* màu 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: #166dd8; /* màu nền ngày hội đấu giá */
|
||||||
|
--bg-timeout-detail: #ea3e00; /* màu nền thời gian đếm ngược đấu giá */
|
||||||
|
--bg-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */
|
||||||
|
--bg-btn-auction: #f00000; /* màu nền nút tham gia đấu giá */
|
||||||
|
--bg-time-deal: #ee4d2d; /* màu nền thời gian đếm ngược deal */
|
||||||
|
--bg-btn-deal: #166dd8; /* màu nền nút mua sp deal */
|
||||||
|
--bg-list-deal-ongoing: #ee4d2d; /* màu nền danh sách sản phẩm đang diễn ra chi tiết deal */
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #a4a4a4;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-image: -webkit-gradient(
|
||||||
|
linear,
|
||||||
|
0 0,
|
||||||
|
0 100%,
|
||||||
|
color-stop(0.7, #a4a4a4),
|
||||||
|
color-stop(0.5, transparent),
|
||||||
|
to(transparent)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Be Vietnam Pro", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #222;
|
||||||
|
font-family: "Be Vietnam Pro", sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: block;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
.icon-deal {
|
||||||
|
display: block;
|
||||||
|
width: 29px;
|
||||||
|
height: 29px;
|
||||||
|
background: url(../images/icon-flash.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-star {
|
||||||
|
background: url(../images/icon-star.png) no-repeat;
|
||||||
|
width: 80px;
|
||||||
|
height: 12px;
|
||||||
|
display: block;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.icon-star.star5 {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
.icon-star.star4 {
|
||||||
|
background-position: 0 -17px;
|
||||||
|
}
|
||||||
|
.icon-star.star3 {
|
||||||
|
background-position: 0 -34px;
|
||||||
|
}
|
||||||
|
.icon-star.star2 {
|
||||||
|
background-position: 0 -50px;
|
||||||
|
}
|
||||||
|
.icon-star.star1 {
|
||||||
|
background-position: 0 -67px;
|
||||||
|
}
|
||||||
|
.icon-star.star0 {
|
||||||
|
background-position: 0 -84px;
|
||||||
|
}
|
||||||
|
.icon.auction {
|
||||||
|
background: url(../images/icon-auction.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
display: block;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
.icon.time {
|
||||||
|
background: url(../images/icon-fire-time.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-cup {
|
||||||
|
background: url(../images/icon-cup.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
display: block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.saleoff {
|
||||||
|
width: 42px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
|
background: #f00000;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.saleoff::before {
|
||||||
|
position: absolute;
|
||||||
|
left: -6px;
|
||||||
|
top: 0;
|
||||||
|
width: 15px;
|
||||||
|
height: 20px;
|
||||||
|
content: "";
|
||||||
|
background: url(../images/icon-flash.png) no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-blue {
|
||||||
|
background: var(--main-color) !important;
|
||||||
|
}
|
||||||
|
.background-red {
|
||||||
|
background: var(var(--color-bg-title-1)) !important;
|
||||||
|
}
|
||||||
|
.background-yellow {
|
||||||
|
background: var(var(--color-bg-title-2)) !important;
|
||||||
|
}
|
||||||
|
.background-footer {
|
||||||
|
background: var(--color-bg-footer) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:text-blue:hover {
|
||||||
|
color: var(--main-color) !important;
|
||||||
|
}
|
||||||
|
.hover\:background-blue:hover {
|
||||||
|
background: var(--main-color) !important;
|
||||||
|
}
|
||||||
|
.hover\:background-yellow:hover {
|
||||||
|
background: var(var(--color-bg-title-2)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:background-white:hover {
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:text-yellow:hover {
|
||||||
|
color: var(var(--color-bg-title-2)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:text-red:hover {
|
||||||
|
color: #f00000 !important;
|
||||||
|
}
|
||||||
|
.hover\:border-red:hover {
|
||||||
|
border: 1px solid #f00000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:border-blue:hover {
|
||||||
|
border: 1px solid var(--main-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:border-yellow:hover {
|
||||||
|
border: 1px solid var(var(--color-bg-title-2)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-red {
|
||||||
|
color: #f00000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add {
|
||||||
|
width: 100%;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
background: #f00000;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 26px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add:hover {
|
||||||
|
border: 1px solid #f00000;
|
||||||
|
color: #f00000;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.btn-add.continue {
|
||||||
|
background: #5f00b1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add.continue:hover {
|
||||||
|
border: 1px solid #5f00b1;
|
||||||
|
color: #5f00b1;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add.coming {
|
||||||
|
background: #afafaf;
|
||||||
|
}
|
||||||
|
.btn-add.coming:hover {
|
||||||
|
border: 1px solid #afafaf;
|
||||||
|
color: #afafaf;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header.header-fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-pagination {
|
||||||
|
bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||||
|
background: var(var(--color-bg-title-2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.box-time .item-time {
|
||||||
|
margin-left: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.box-time .item-time b {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.box-time .item-time b::after {
|
||||||
|
content: ":";
|
||||||
|
position: absolute;
|
||||||
|
right: -8px;
|
||||||
|
color: #fff;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.box-time .item-time:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.box-time .item-time:last-child b {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.box-time .item-time:last-child b::after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-tab.active {
|
||||||
|
background: var(--main-color);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.item-tab:hover {
|
||||||
|
background: var(--main-color);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.tab-list .box-time b {
|
||||||
|
background: #000;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-more-all {
|
||||||
|
width: 110px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 31px;
|
||||||
|
display: block;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
margin: 0 auto auto auto;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-more-all:hover {
|
||||||
|
background: #fff;
|
||||||
|
color: #ee4d2d;
|
||||||
|
}
|
||||||
|
.box-faq .item.active .content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-auction .item-tab.active,
|
||||||
|
.page-auction .item-tab:hover {
|
||||||
|
background: #fff;
|
||||||
|
color: var(--main-color);
|
||||||
|
}
|
||||||
|
.page-detail .swiper-pagination {
|
||||||
|
width: 41px !important;
|
||||||
|
height: 28px;
|
||||||
|
background: #0000004d;
|
||||||
|
border-radius: 14px;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
left: unset !important;
|
||||||
|
}
|
||||||
|
.page-detail .swiper-pagination {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-history .item-tab.active,
|
||||||
|
.tab-history .item-tab:hover {
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 4px 4px 0px #00000040;
|
||||||
|
color: #000;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-tab thead {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-tab th {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
width: calc(100% / 3);
|
||||||
|
height: 35px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #dfdfdf;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.table-tab td {
|
||||||
|
font-size: 13px;
|
||||||
|
width: calc(100% / 3);
|
||||||
|
height: 35px;
|
||||||
|
border-bottom: 1px solid #dfdfdf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
z-index: 999;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.overlay.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-popup {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border: 2px solid var(var(--color-bg-title-2));
|
||||||
|
width: 97%;
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 15px;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 999;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-checkbox {
|
||||||
|
margin-top: 12px;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 30px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.input-checkbox input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.input-checkbox input:checked ~ .checkmark {
|
||||||
|
background-color: #3194fc;
|
||||||
|
}
|
||||||
|
.input-checkbox .checkmark {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.input-checkbox .checkmark:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.input-checkbox:hover input ~ .checkmark {
|
||||||
|
background-color: #3194fc;
|
||||||
|
}
|
||||||
|
.input-checkbox input:checked ~ .checkmark:after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.input-checkbox .checkmark:after {
|
||||||
|
left: 8px;
|
||||||
|
top: 4px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
border: solid white;
|
||||||
|
border-width: 0 3px 3px 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-checkbox {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.radio-checkbox input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.radio-checkbox .checkmark {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.radio-checkbox:hover input ~ .checkmark {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
.radio-checkbox input:checked ~ .checkmark {
|
||||||
|
background-color: var(--main-color);
|
||||||
|
}
|
||||||
|
.radio-checkbox .checkmark:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.radio-checkbox input:checked ~ .checkmark:after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.radio-checkbox .checkmark:after {
|
||||||
|
top: 6px;
|
||||||
|
left: 5.5px;
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-success::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background: url(../images/background-firework.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
width: 100px;
|
||||||
|
height: 85px;
|
||||||
|
left: 0;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
.popup-success::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background: url(../images/background-firework.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
width: 100px;
|
||||||
|
height: 85px;
|
||||||
|
right: 0;
|
||||||
|
top: 20px;
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-history thead {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.table-history th {
|
||||||
|
background: #e2e2e2;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.table-history td {
|
||||||
|
height: 40px;
|
||||||
|
padding: 5px;
|
||||||
|
border-bottom: 0.5px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
.table-history .status.ship {
|
||||||
|
color: #17c967;
|
||||||
|
}
|
||||||
|
.table-history .status.cancel {
|
||||||
|
color: #d00000;
|
||||||
|
}
|
||||||
|
.table-history .status.processing {
|
||||||
|
color: #f48320;
|
||||||
|
}
|
||||||
|
.table-history .status.success {
|
||||||
|
color: #0caaf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-list-auction .main-title .item-time b {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
background: #fff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-list-auction .main-title .item-time b::after {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.box-deal-hot .coming {
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.box-deal-hot .coming .box-time b {
|
||||||
|
background: transparent;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.box-deal-hot .coming .box-time b::after {
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.box-deal-hot .box-time b {
|
||||||
|
background: #fff;
|
||||||
|
background: #f0292b;
|
||||||
|
}
|
||||||
|
.box-deal-hot .box-time b::after {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
720
assets/css/style-global.css
Normal file
720
assets/css/style-global.css
Normal file
@@ -0,0 +1,720 @@
|
|||||||
|
@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: #3fb125; /* màu chính */
|
||||||
|
--color-icon-action: #d00307; /* màu nền icon đấu giá */
|
||||||
|
--color-hover-text: #2578e7; /* màu nền hover vào text */
|
||||||
|
--color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
|
||||||
|
--color-bg-title-2: #2a8810; /* màu nền chữ vàng */
|
||||||
|
--color-box-auction: #2578e7; /* màu nền đấu giá kịch tính */
|
||||||
|
--color-bg-footer: #2a8810; /* 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: #2578e7; /* màu nền danh sách đấu giá */
|
||||||
|
--color-list-auction: #2a8810; /* màu nền tiều đề danh sách đấu giá */
|
||||||
|
--bg-deal: #ea3e00; /* màu nền box deal */
|
||||||
|
--border-faq: #110e83; /* màu border câu hỏi thường gặp */
|
||||||
|
--color-faq: #110e83; /* màu 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: #166dd8; /* màu nền ngày hội đấu giá */
|
||||||
|
--bg-timeout-detail: #ea3e00; /* màu nền thời gian đếm ngược đấu giá */
|
||||||
|
--bg-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */
|
||||||
|
--bg-btn-auction: #f00000; /* màu nền nút tham gia đấu giá */
|
||||||
|
--bg-time-deal: #ee4d2d; /* màu nền thời gian đếm ngược deal */
|
||||||
|
--bg-btn-deal: #166dd8; /* màu nền nút mua sp deal */
|
||||||
|
--bg-list-deal-ongoing: #ee4d2d; /* màu nền danh sách sản phẩm đang diễn ra chi tiết deal */
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #a4a4a4;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-image: -webkit-gradient(
|
||||||
|
linear,
|
||||||
|
0 0,
|
||||||
|
0 100%,
|
||||||
|
color-stop(0.7, #a4a4a4),
|
||||||
|
color-stop(0.5, transparent),
|
||||||
|
to(transparent)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Kanit";
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #222;
|
||||||
|
font-family: "Kanit";
|
||||||
|
font-size: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 100%;
|
||||||
|
font-family: "Kanit", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
li,
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol,
|
||||||
|
.ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
padding: 0 10px;
|
||||||
|
width: 1210px !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_auction {
|
||||||
|
background: url(../images/icon-auction.png) no-repeat;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: block;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
.icon-deal {
|
||||||
|
display: block;
|
||||||
|
width: 29px;
|
||||||
|
height: 29px;
|
||||||
|
background: url(../images/icon-flash.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-star {
|
||||||
|
background: url(../images/icon-star.png) no-repeat;
|
||||||
|
width: 80px;
|
||||||
|
height: 12px;
|
||||||
|
display: block;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.icon-star.star5 {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
.icon-star.star4 {
|
||||||
|
background-position: 0 -17px;
|
||||||
|
}
|
||||||
|
.icon-star.star3 {
|
||||||
|
background-position: 0 -34px;
|
||||||
|
}
|
||||||
|
.icon-star.star2 {
|
||||||
|
background-position: 0 -50px;
|
||||||
|
}
|
||||||
|
.icon-star.star1 {
|
||||||
|
background-position: 0 -67px;
|
||||||
|
}
|
||||||
|
.icon-star.star0 {
|
||||||
|
background-position: 0 -84px;
|
||||||
|
}
|
||||||
|
.icon.auction {
|
||||||
|
background: url(../images/icon-auction.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
display: block;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
.icon.time {
|
||||||
|
background: url(../images/icon-fire-time.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-cup {
|
||||||
|
background: url(../images/icon-cup.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
display: block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-blue {
|
||||||
|
background: var(--main-color) !important;
|
||||||
|
}
|
||||||
|
.background-red {
|
||||||
|
background: var(--color-bg-title-1) !important;
|
||||||
|
}
|
||||||
|
.background-yellow {
|
||||||
|
background: var(--color-bg-title-2) !important;
|
||||||
|
}
|
||||||
|
.background-footer {
|
||||||
|
background: var(--color-bg-footer) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:text-blue:hover {
|
||||||
|
color: var(--main-color) !important;
|
||||||
|
}
|
||||||
|
.hover\:background-blue:hover {
|
||||||
|
background: var(--main-color) !important;
|
||||||
|
}
|
||||||
|
.hover\:background-yellow:hover {
|
||||||
|
background: var(--color-bg-title-2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:background-white:hover {
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:text-yellow:hover {
|
||||||
|
color: var(--color-bg-title-2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:text-red:hover {
|
||||||
|
color: #f00000 !important;
|
||||||
|
}
|
||||||
|
.hover\:border-red:hover {
|
||||||
|
border: 1px solid #f00000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:border-blue:hover {
|
||||||
|
border: 1px solid var(--main-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:border-yellow:hover {
|
||||||
|
border: 1px solid var(--color-bg-title-2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-red {
|
||||||
|
color: #f00000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add {
|
||||||
|
width: 140px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
background: #f00000;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 26px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add:hover {
|
||||||
|
border: 1px solid #f00000;
|
||||||
|
color: #f00000;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.btn-add.continue {
|
||||||
|
background: #5f00b1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add.continue:hover {
|
||||||
|
border: 1px solid #5f00b1;
|
||||||
|
color: #5f00b1;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.box-time .item-time {
|
||||||
|
margin-left: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.box-time .item-time b {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.box-time .item-time b::after {
|
||||||
|
content: ":";
|
||||||
|
position: absolute;
|
||||||
|
right: -8px;
|
||||||
|
color: #fff;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.box-time .item-time:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.box-time .item-time:last-child b {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.box-time .item-time:last-child b::after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-list .box-time b {
|
||||||
|
background: #000;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-all {
|
||||||
|
width: 110px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 31px;
|
||||||
|
display: block;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
margin: 10px auto auto auto;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-all:hover {
|
||||||
|
background: #fff;
|
||||||
|
color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.saleoff {
|
||||||
|
width: 42px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
|
background: #f00000;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.saleoff::before {
|
||||||
|
position: absolute;
|
||||||
|
left: -6px;
|
||||||
|
top: 0;
|
||||||
|
width: 15px;
|
||||||
|
height: 20px;
|
||||||
|
content: "";
|
||||||
|
background: url(../images/icon-flash.png) no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-faq .item.active .content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-thumbImage .swiper-button-next::after {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-thumbImage .swiper-button-next {
|
||||||
|
position: absolute;
|
||||||
|
top: 468px;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
left: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-thumbImage .swiper-button-prev {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
left: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-thumbImage .swiper-button-prev::after {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-thumbImage .swiper-slide {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.box-thumbImage img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-thumbImage .swiper-slide-thumb-active img {
|
||||||
|
opacity: 1;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-image: linear-gradient(
|
||||||
|
359.53deg,
|
||||||
|
#3935c8 82.81%,
|
||||||
|
#1355f0 92%,
|
||||||
|
#0caaf9 99.12%
|
||||||
|
);
|
||||||
|
border-image-slice: 1;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-tab.active {
|
||||||
|
background: var(--main-color);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-tab:hover {
|
||||||
|
background: var(--main-color);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-history .item-tab.active,
|
||||||
|
.tab-history .item-tab:hover {
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 4px 4px 0px #00000040;
|
||||||
|
color: #000;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-tab thead {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-tab th {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
width: 30%;
|
||||||
|
height: 35px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #dfdfdf;
|
||||||
|
}
|
||||||
|
.table-tab td {
|
||||||
|
width: 30%;
|
||||||
|
height: 35px;
|
||||||
|
border-bottom: 1px solid #dfdfdf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
z-index: 99;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.overlay.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-popup {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border: 2px solid var(--color-bg-title-2);
|
||||||
|
width: 590px;
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 15px;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 999;
|
||||||
|
display: none;
|
||||||
|
&.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-checkbox {
|
||||||
|
margin-top: 12px;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 30px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.input-checkbox input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.input-checkbox input:checked ~ .checkmark {
|
||||||
|
background-color: #3194fc;
|
||||||
|
}
|
||||||
|
.input-checkbox .checkmark {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.input-checkbox .checkmark:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.input-checkbox:hover input ~ .checkmark {
|
||||||
|
background-color: #3194fc;
|
||||||
|
}
|
||||||
|
.input-checkbox input:checked ~ .checkmark:after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.input-checkbox .checkmark:after {
|
||||||
|
left: 8px;
|
||||||
|
top: 4px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
border: solid white;
|
||||||
|
border-width: 0 3px 3px 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-checkbox {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.radio-checkbox input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.radio-checkbox .checkmark {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.radio-checkbox:hover input ~ .checkmark {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
.radio-checkbox input:checked ~ .checkmark {
|
||||||
|
background-color: var(--main-color);
|
||||||
|
}
|
||||||
|
.radio-checkbox .checkmark:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.radio-checkbox input:checked ~ .checkmark:after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.radio-checkbox .checkmark:after {
|
||||||
|
top: 6px;
|
||||||
|
left: 5.5px;
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-success::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background: url(../images/background-firework.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
width: 120px;
|
||||||
|
height: 85px;
|
||||||
|
left: 0;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
.popup-success::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background: url(../images/background-firework.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
width: 120px;
|
||||||
|
height: 85px;
|
||||||
|
right: 0;
|
||||||
|
top: 20px;
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-input.error .note-error {
|
||||||
|
color: #f00000;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-history thead {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.table-history th {
|
||||||
|
background: #e2e2e2;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.table-history td {
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.table-history .status.ship {
|
||||||
|
color: #17c967;
|
||||||
|
}
|
||||||
|
.table-history .status.cancel {
|
||||||
|
color: #d00000;
|
||||||
|
}
|
||||||
|
.table-history .status.processing {
|
||||||
|
color: #f48320;
|
||||||
|
}
|
||||||
|
.table-history .status.success {
|
||||||
|
color: #0caaf9;
|
||||||
|
}
|
||||||
|
.tab-list.auction .item.active,
|
||||||
|
.tab-list.auction .item:hover {
|
||||||
|
background: var(--color-bg-title-2);
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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
2904
assets/css/style.css
Normal file
2904
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: 272 KiB |
BIN
assets/images/banner-sale-top.png
Normal file
BIN
assets/images/banner-sale-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 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/banner_giadung.png
Normal file
BIN
assets/images/banner_giadung.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
assets/images/banner_mb_giadung.png
Normal file
BIN
assets/images/banner_mb_giadung.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
BIN
assets/images/bg-title-auction-coming.png
Normal file
BIN
assets/images/bg-title-auction-coming.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
assets/images/bg-title-auction.png
Normal file
BIN
assets/images/bg-title-auction.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
BIN
assets/images/bg-top-auction.png
Normal file
BIN
assets/images/bg-top-auction.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 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: 409 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: 1.7 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: 902 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: 1.1 MiB |
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: 1.2 MiB |
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: 1.2 MiB |
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: 610 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: 20 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: 1.7 MiB |
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}`);
|
||||||
|
});
|
||||||
1009
deal-detail-mb.html
Normal file
1009
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)] p-[6px_0] shadow-[0_1px_6px_#00000040]">
|
||||||
|
<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/image-thumb-1.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="./assets/images/image-thumb-2.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="./assets/images/image-thumb-3.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="./assets/images/image-thumb-4.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="./assets/images/image-thumb-5.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/product-detail-big.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="./assets/images/product-detail-big.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="./assets/images/product-detail-big.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="./assets/images/product-detail-big.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="./assets/images/product-detail-big.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>
|
||||||
1666
detail-mobile.html
Normal file
1666
detail-mobile.html
Normal file
File diff suppressed because it is too large
Load Diff
1250
detail.html
Normal file
1250
detail.html
Normal file
File diff suppressed because it is too large
Load Diff
887
home-mobile.html
Normal file
887
home-mobile.html
Normal file
@@ -0,0 +1,887 @@
|
|||||||
|
<!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="banner-sale-top">
|
||||||
|
<a href="">
|
||||||
|
<img src="./assets/images/banner-sale-top.png" width="100%" height="100%" alt="sale">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="header bg-[var(--bg-header)] shadow-[0_1px_1px_#00000020] p-[6px_0] duration-[0.5s] delay-[0] top-[-50px]">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content-main-header flex items-center justify-between p-[10px_0]">
|
||||||
|
<a href="/" class="logo w-[90px]">
|
||||||
|
<img src="./assets/images/logo-mobile.png" class="w-[100%] h-[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 text-[23px]"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="homepage">
|
||||||
|
<div class="box-top-auction">
|
||||||
|
|
||||||
|
<div class="box-title w-[100%] h-[47px] bg-center bg-cover bg-no-repeat"
|
||||||
|
style="background-image: url(./assets/images/bg-top-auction.png);">
|
||||||
|
<h2 class="title leading-[47px] text-center mb-[12px] text-[16px] text-white uppercase font-[600]">
|
||||||
|
Top đấu giá sôi động</h2>
|
||||||
|
</div>
|
||||||
|
<div class="container bg-[#FCF6B4] p-[18px_15px]">
|
||||||
|
<div class="list-auction flex flex-wrap mr-[-10px]">
|
||||||
|
<div
|
||||||
|
class="item-auction w-[calc(100%_/_2_-10px)] mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[100%]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction w-[calc(100%_/_2_-10px)] mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[100%]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction w-[calc(100%_/_2_-10px)] mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[100%]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction w-[calc(100%_/_2_-10px)] mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[100%]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-list-auction bg-[#F4F4F4] pb-[10px]">
|
||||||
|
<div class="box-auction mb-[30px] going-on">
|
||||||
|
<div class="main-title w-[100%] bg-center bg-cover bg-no-repeat p-[14px]"
|
||||||
|
style="background-image: url(./assets/images/bg-title-auction.png);">
|
||||||
|
<div
|
||||||
|
class="w-[212px] h-[80px] shadow-[0px_4px_15px_0px_#00000033] bg-[#ffdd66] m-[10px_auto] rounded-[14px] flex items-center justify-center flex-col">
|
||||||
|
<span class="text-[14px] text-[#000] font-[700] uppercase">Đang diễn ra</span>
|
||||||
|
<div class="box-time flex mt-[5px]">
|
||||||
|
<span class="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>
|
||||||
|
<div class="container">
|
||||||
|
<div class="list-auction flex mt-[10px] overflow-x-auto">
|
||||||
|
<div
|
||||||
|
class="item-auction mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="more-all block bg-[#fff] m-[18px_auto] text-center w-[126px] h-[40px] leading-[40px] rounded-[20px] uppercase font-bold">Xem
|
||||||
|
tất cả</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box-auction coming-soon">
|
||||||
|
<div class="main-title w-[100%] bg-center bg-cover bg-no-repeat p-[14px]"
|
||||||
|
style="background-image: url(./assets/images/bg-title-auction-coming.png);">
|
||||||
|
<div
|
||||||
|
class="w-[245px] h-[80px] shadow-[0px_4px_15px_0px_#00000033] bg-[#b9ddff] m-[10px_auto] rounded-[14px] flex items-center justify-center flex-col">
|
||||||
|
<span class="text-[14px] text-[#000] font-[700] uppercase">Sắp diễn ra</span>
|
||||||
|
<div class="box-time flex mt-[5px]">
|
||||||
|
<span class="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>
|
||||||
|
<div class="container">
|
||||||
|
<div class="list-auction flex mt-[10px] overflow-x-auto">
|
||||||
|
<div
|
||||||
|
class="item-auction mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction mr-[10px] mb-[10px] p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[100%] h-[150px] mb-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#FFD6B7] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] bg-[#FF750E] 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-[12px]">
|
||||||
|
<div class="box-time flex justify-center text-white">
|
||||||
|
<p class="font-bold">Hết sau</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] mt-[10px]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="price-auction flex items-center mt-[10px]">
|
||||||
|
<p class="txt text-[12px] mr-[5px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[12px] font-bold">230.490.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="more-all block bg-[#fff] m-[18px_auto] text-center w-[126px] h-[40px] leading-[40px] rounded-[20px] uppercase font-bold">Xem
|
||||||
|
tất cả</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-deal-hot bg-[#F0292B] pb-[10px]">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="title flex items-center justify-center p-[10px]">
|
||||||
|
<p class="ml-[7px] uppercase text-[16px] font-[700] text-white">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 overflow-x-auto mr-[-10px]">
|
||||||
|
<div class="item-deal mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||||
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||||
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<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%] bg-[#FF750E] rounded-[26px]"
|
||||||
|
style="width: 90%;">
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="txt text-white absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[12px] font-bold">
|
||||||
|
Đã 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-4 mt-[8px] text-[14px] font-bold">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
|
||||||
|
<div class="group-price flex items-center mb-[10px]">
|
||||||
|
<del class="old-price text-[#afafaf] text-[13px] mr-[10px]">30.490.000
|
||||||
|
</del>
|
||||||
|
<div class="price text-center text-[14px] font-[700] text-red">
|
||||||
|
28.490.000
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="./deal-detail.html"
|
||||||
|
class="btn-add font-bold m-[auto] bg-[#FFD9D9] text-[#FF0002]">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-deal mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||||
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||||
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<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%] bg-[#FF750E] rounded-[26px]"
|
||||||
|
style="width: 90%;">
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="txt text-white absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[12px] font-bold">
|
||||||
|
Đã 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-4 mt-[8px] text-[14px] font-bold">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
|
||||||
|
<div class="group-price flex items-center mb-[10px]">
|
||||||
|
<del class="old-price text-[#afafaf] text-[13px] mr-[10px]">30.490.000
|
||||||
|
</del>
|
||||||
|
<div class="price text-center text-[14px] font-[700] text-red">
|
||||||
|
28.490.000
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="./deal-detail.html"
|
||||||
|
class="btn-add font-bold m-[auto] bg-[#FFD9D9] text-[#FF0002]">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-deal mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||||
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||||
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<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%] bg-[#FF750E] rounded-[26px]"
|
||||||
|
style="width: 90%;">
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="txt text-white absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[12px] font-bold">
|
||||||
|
Đã 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-4 mt-[8px] text-[14px] font-bold">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
|
||||||
|
<div class="group-price flex items-center mb-[10px]">
|
||||||
|
<del class="old-price text-[#afafaf] text-[13px] mr-[10px]">30.490.000
|
||||||
|
</del>
|
||||||
|
<div class="price text-center text-[14px] font-[700] text-red">
|
||||||
|
28.490.000
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="./deal-detail.html"
|
||||||
|
class="btn-add font-bold m-[auto] bg-[#FFD9D9] text-[#FF0002]">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-deal mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||||
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||||
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[180px]">
|
||||||
|
<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%] bg-[#FF750E] rounded-[26px]"
|
||||||
|
style="width: 90%;">
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="txt text-white absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[12px] font-bold">
|
||||||
|
Đã 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-4 mt-[8px] text-[14px] font-bold">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
|
||||||
|
<div class="group-price flex items-center mb-[10px]">
|
||||||
|
<del class="old-price text-[#afafaf] text-[13px] mr-[10px]">30.490.000
|
||||||
|
</del>
|
||||||
|
<div class="price text-center text-[14px] font-[700] text-red">
|
||||||
|
28.490.000
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="./deal-detail.html"
|
||||||
|
class="btn-add font-bold m-[auto] bg-[#FFD9D9] text-[#FF0002]">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="/listdeal-mb.html"
|
||||||
|
class="more-all block bg-[#fff] m-[18px_auto] text-center w-[126px] h-[40px] leading-[40px] rounded-[20px] uppercase font-bold text-[#F0292B]">
|
||||||
|
Xem tất cả
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer pb-[70px]">
|
||||||
|
<div class="box-faq mt-[15px]">
|
||||||
|
<div class="container">
|
||||||
|
<h2
|
||||||
|
class="title text-center text-[16px] font-[600] uppercase text-[#000000] m-[30px_auto_15px_auto]">
|
||||||
|
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 class="main-footer bg-[#000] 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>
|
||||||
|
var swiper = new Swiper("#js-list-auction-top", {
|
||||||
|
slidesPerView: 1,
|
||||||
|
spaceBetween: 10,
|
||||||
|
pagination: {
|
||||||
|
el: ".swiper-pagination",
|
||||||
|
clickable: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
$(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>
|
||||||
417
listdaugia-mb.html
Normal file
417
listdaugia-mb.html
Normal file
@@ -0,0 +1,417 @@
|
|||||||
|
<!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)] shadow-[0_1px_6px_#00000040] 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.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-white">
|
||||||
|
<span class="font-[300]">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 class="list-auction mt-[10px]">
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[100%] mb-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||||
|
280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[100%] mb-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||||
|
280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[100%] mb-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||||
|
280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[100%] mb-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||||
|
280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[100%] mb-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||||
|
280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[100%] mb-[10px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span>220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
|
||||||
|
280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="paging 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-[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>
|
||||||
448
listdaugia.html
Normal file
448
listdaugia.html
Normal file
@@ -0,0 +1,448 @@
|
|||||||
|
<!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)] p-[6px_0] shadow-[0_1px_6px_#00000040]">
|
||||||
|
<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 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 flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span class="ml-[3px]">220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Smart Tivi Samsung
|
||||||
|
Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span class="ml-[3px]">220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Smart Tivi Samsung
|
||||||
|
Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span class="ml-[3px]">220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Smart Tivi Samsung
|
||||||
|
Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span class="ml-[3px]">220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Smart Tivi Samsung
|
||||||
|
Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span class="ml-[3px]">220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Smart Tivi Samsung
|
||||||
|
Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span class="ml-[3px]">220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Smart Tivi Samsung
|
||||||
|
Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span class="ml-[3px]">220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Smart Tivi Samsung
|
||||||
|
Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
||||||
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
||||||
|
<a href="./detail.html">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
||||||
|
<div
|
||||||
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
|
||||||
|
<i class="icon_auction"></i>
|
||||||
|
<span class="ml-[3px]">220</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info w-[calc(100%_-_130px)]">
|
||||||
|
<a href="./detail.html"
|
||||||
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Smart Tivi Samsung
|
||||||
|
Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="price-auction flex items-center">
|
||||||
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
||||||
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
||||||
|
</div>
|
||||||
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="paging 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>
|
||||||
402
listdeal-mb.html
Normal file
402
listdeal-mb.html
Normal file
@@ -0,0 +1,402 @@
|
|||||||
|
<!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)] shadow-[0_1px_6px_#00000040] 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.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 bg-[var(--bg-deal)] rounded-[15px] p-[10px] mt-[10px]">
|
||||||
|
<h2 class="title flex items-center justify-center mb-[10px]">
|
||||||
|
<i class="icon-deal"></i>
|
||||||
|
<p class="uppercase text-[24px] font-[700] text-white">Deal hot</p>
|
||||||
|
</h2>
|
||||||
|
<div class="tab-list flex items-center justify-between mb-[10px]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="item w-[calc(100%_/2_-5px)] text-white p-[10px] rounded-[15px_15px_0_0] background-blue hover:background-blue">
|
||||||
|
<p class="text-[16px] text-center font-[700] mb-[5px] uppercase">Đang diễn ra 20:00</p>
|
||||||
|
<div class="box-time flex items-center">
|
||||||
|
<span class="text-[13px]">Còn lại</span>
|
||||||
|
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
|
||||||
|
</div>
|
||||||
|
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
|
||||||
|
</div>
|
||||||
|
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="item w-[calc(100%_/2_-5px)] bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-blue">
|
||||||
|
<p class="text-[16px] text-center font-[700] mb-[5px] uppercase">Sắp diễn ra 20:00</p>
|
||||||
|
<div class="box-time flex items-center">
|
||||||
|
<span class="text-[13px]">Còn lại</span>
|
||||||
|
<div class="item-time"><b>02</b></div>
|
||||||
|
<div class="item-time"><b>16</b></div>
|
||||||
|
<div class="item-time"><b>42</b></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="product-list flex flex-wrap mr-[-10px]">
|
||||||
|
<div
|
||||||
|
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||||
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||||
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="info ">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||||
|
style="width: 90%;">
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||||
|
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||||
|
phẩm</div>
|
||||||
|
</div>
|
||||||
|
<a href="/deal-detail.html"
|
||||||
|
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
|
||||||
|
<div class="group-price mb-[10px]">
|
||||||
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">
|
||||||
|
28.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||||
|
<u>đ</u></del>
|
||||||
|
<div class="saleoff">-30%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="./deal-detail.html"
|
||||||
|
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||||
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||||
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="info ">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||||
|
style="width: 90%;">
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||||
|
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||||
|
phẩm</div>
|
||||||
|
</div>
|
||||||
|
<a href="/deal-detail.html"
|
||||||
|
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
|
||||||
|
<div class="group-price mb-[10px]">
|
||||||
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">
|
||||||
|
28.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||||
|
<u>đ</u></del>
|
||||||
|
<div class="saleoff">-30%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="./deal-detail.html"
|
||||||
|
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||||
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||||
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="info ">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||||
|
style="width: 90%;">
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||||
|
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||||
|
phẩm</div>
|
||||||
|
</div>
|
||||||
|
<a href="/deal-detail.html"
|
||||||
|
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
|
||||||
|
<div class="group-price mb-[10px]">
|
||||||
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">
|
||||||
|
28.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||||
|
<u>đ</u></del>
|
||||||
|
<div class="saleoff">-30%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="./deal-detail.html"
|
||||||
|
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[140px] block m-[auto_auto_10px_auto] overflow-hidden">
|
||||||
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
||||||
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
||||||
|
alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="info ">
|
||||||
|
<div
|
||||||
|
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
||||||
|
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
||||||
|
style="width: 90%;">
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
|
||||||
|
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
||||||
|
phẩm</div>
|
||||||
|
</div>
|
||||||
|
<a href="/deal-detail.html"
|
||||||
|
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
|
||||||
|
<div class="group-price mb-[10px]">
|
||||||
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">
|
||||||
|
28.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||||
|
<u>đ</u></del>
|
||||||
|
<div class="saleoff">-30%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="./deal-detail.html"
|
||||||
|
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="paging flex items-center justify-center">
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#166dd8] background-blue hover:background-blue hover:border-blue">1</a>
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="box-faq mt-[15px]">
|
||||||
|
<div class="container">
|
||||||
|
<div class="background-faq border-[2px] border-[var(--border-faq)] p-[10px] rounded-[15px]">
|
||||||
|
<h2
|
||||||
|
class="title text-center text-[24px] font-[600] uppercase text-[var(--color-faq)] mb-[20px]">
|
||||||
|
Câu hỏi
|
||||||
|
thường gặp
|
||||||
|
</h2>
|
||||||
|
<div class="content-faq">
|
||||||
|
<div
|
||||||
|
class="item float-left w-[100%] mb-[10px]
|
||||||
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||||
|
<span>Đấu giá trực tuyến có phức tạp không?</span>
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</a>
|
||||||
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||||
|
gia
|
||||||
|
mọi lúc mọi nơi chỉ cần có smartphone và
|
||||||
|
internet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item float-left w-[100%] mb-[10px]
|
||||||
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||||
|
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</a>
|
||||||
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||||
|
gia
|
||||||
|
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item float-left w-[100%] mb-[10px]
|
||||||
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||||
|
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</a>
|
||||||
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||||
|
gia
|
||||||
|
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item float-left w-[100%] mb-[10px]
|
||||||
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="faqlink flex items-center justify-between text-[15px] font-[600] text-[#3a3a3a]">
|
||||||
|
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</a>
|
||||||
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||||
|
gia
|
||||||
|
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item float-left w-[100%] mb-[10px]
|
||||||
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
||||||
|
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</a>
|
||||||
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham
|
||||||
|
gia
|
||||||
|
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
563
listdeal.html
Normal file
563
listdeal.html
Normal file
@@ -0,0 +1,563 @@
|
|||||||
|
<!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)] p-[6px_0] shadow-[0_1px_6px_#00000040]">
|
||||||
|
<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 bg-[var(--bg-deal)] rounded-[15px] p-[15px]">
|
||||||
|
<h2 class="title flex items-center justify-center mb-[10px]">
|
||||||
|
<i class="icon-deal"></i>
|
||||||
|
<p class="uppercase text-white 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 flex-wrap mr-[-15px]">
|
||||||
|
<div
|
||||||
|
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[150px] 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">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</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%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[150px] 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">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</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%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[150px] 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">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</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%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[150px] 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">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</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%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[150px] 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">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</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%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[150px] 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">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</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%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[150px] 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">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</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%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[150px] 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">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</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%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
||||||
|
<div class="images w-[100%] h-[150px] 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">Smart
|
||||||
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
||||||
|
|
||||||
|
<div class="group-price mb-[10px]">
|
||||||
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
||||||
|
<u>đ</u>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
||||||
|
<u>đ</u></del>
|
||||||
|
<div class="saleoff">-30%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="./deal-detail.html"
|
||||||
|
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
|
||||||
|
ngay</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="paging flex items-center justify-center">
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#166dd8] background-blue hover:background-blue hover:border-blue">1</a>
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||||
|
<a href=""
|
||||||
|
class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="box-faq mt-[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