This commit is contained in:
2024-10-22 10:07:59 +07:00
parent 6911b0180e
commit 888e9948ff
4 changed files with 805 additions and 464 deletions

View File

@@ -13,8 +13,8 @@
--color-list-auction: #f1b510; /* màu nền tiều đề danh sách đấu giá */ --color-list-auction: #f1b510; /* màu nền tiều đề danh sách đấu giá */
--bg-deal: #ea3e00; /* màu nền box deal */ --bg-deal: #ea3e00; /* màu nền box deal */
--border-faq: #110e83; /* màu border câu hỏi thường gặp */ --border-faq: #110e83; /* màu border câu hỏi thường gặp */
--color-faq: #110e83; /* màu tiêu đề câu hỏi thường gặp */ --color-faq: #110e83; /* màu chữ tiêu đề câu hỏi thường gặp */
--title-faq: #f8f8f8; /* màu tiêu đề faq */ --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-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-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-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */

View File

@@ -13,8 +13,8 @@
--color-list-auction: #f1b510; /* màu nền tiều đề danh sách đấu giá */ --color-list-auction: #f1b510; /* màu nền tiều đề danh sách đấu giá */
--bg-deal: #ea3e00; /* màu nền box deal */ --bg-deal: #ea3e00; /* màu nền box deal */
--border-faq: #110e83; /* màu border câu hỏi thường gặp */ --border-faq: #110e83; /* màu border câu hỏi thường gặp */
--color-faq: #110e83; /* màu tiêu đề câu hỏi thường gặp */ --color-faq: #110e83; /* màu chữ tiêu đề câu hỏi thường gặp */
--title-faq: #f8f8f8; /* màu tiêu đề faq */ --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-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-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-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */

File diff suppressed because it is too large Load Diff

View File

@@ -7,174 +7,326 @@
<title>Đấu giá</title> <title>Đấu giá</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> <link rel="stylesheet" href="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://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="./assets/css/style-mb.css"> <script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./assets/css/style-global-mb.css">
</head> </head>
<body> <body>
<div class="container-mb"> <div class="container-mb">
<div class="header bg-[var(--bg-header)] p-[6px_0] duration-[0.5s] delay-[0] top-[-50px]">
<div class="container">
<div class="content-main-header flex items-center justify-between">
<a href="/" class="logo w-[66px]">
<img src="./assets/images/logo-mobile.png" class="w-[100%] h-[26px] block" width="100%"
height="100%" alt="logo">
</a>
<div class="header-right flex items-center">
<a href="" class="item flex items-center">
<img src="./assets/images/icon-clipboard.png" class="w-[14px] block" alt="">
<span class="ml-[3px] text-[12px] uppercase text-white">Thể lệ đấu giá</span>
</a>
<a href="/taikhoan" class="item flex items-center ml-[10px]">
<img src="./assets/images/icon-user.png" class="w-[14px] block" alt="">
<span class="ml-[3px] text-[12px] uppercase text-white">Tài khoản</span>
<i class="fa-solid fa-caret-down ml-[5px] text-white"></i>
</a>
</div>
</div>
</div>
</div>
<div class="page-auction"> <div class="page-auction">
<div class="container"> <div class="container">
<div class="breadcrumb"> <div class="breadcrumb mt-[10px] flex items-center justify-between">
<a href="javascript:void(0)" onclick="history.back()" class="link-back"> <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> <i class="fas fa-chevron-left"></i>
</a> </a>
<a href="" class="name text-center block">Đấu giá</a> <a href="" class="name text-center w-[calc(100%_-32px)] mr-[16px]">Đấu giá</a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="background-aution"> <div class="background-aution bg-[var(--bg-list-auction)] mt-[45px] p-[10px] rounded-[15px]">
<h2 class="title">Đấu giá kịch tính từ 0Đ</h2> <h2
<div class="tab-list d-flex align-items space-between"> 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]">
<a href="javascript:void(0)" class="item active"> Đấu giá kịch tính từ 0Đ</h2>
<p>20:00</p> <div class="tab-list flex items-center justify-between mt-[10px]">
<span>Đang diễn ra</span> <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>
<a href="javascript:void(0)" class="item"> <a href="javascript:void(0)"
<p>22:00</p> class="item-tab w-[calc(100%_/2_-5px)] bg-[#afafaf] p-[7px] rounded-[5px] text-center text-white">
<span>Sắp diễn ra</span> <p class="text-[20px] font-[700] leading-[29px]">22:00</p>
<span class="text-[13px] uppercase">Sắp diễn ra</span>
</a> </a>
</div> </div>
<div class="box-time"> <div class="box-time m-[15px_0] flex items-center justify-end text-white">
<span>Còn lại</span> <span class="font-[300]">Còn lại</span>
<div class="item-time"><b>02</b></div> <div class="item-time"><b>02</b></div>
<div class="item-time"><b>16</b></div> <div class="item-time"><b>16</b></div>
<div class="item-time"><b>42</b></div> <div class="item-time"><b>42</b></div>
</div> </div>
<div class="list-auction d-flex flex-wrap"> <div class="list-auction flex flex-wrap">
<div class="item-auction"> <div
<div class="images"> class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[100%] mb-[10px] bg-white">
<a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png" alt=""></a> <div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<div class="box-join"> <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> <i class="icon_auction"></i>
<span>220</span> <span>220</span>
</div> </div>
</div> </div>
<div class="info"> <div class="info w-[calc(100%_-_130px)]">
<a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell UltraSharp <a href="./detail.html"
U2723QE (27.0 inch - 4K - class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình
IPS Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a> Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div> <div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
<div class="price-auction d-flex align-items"> 280.490.000
<p class="txt">Trả cao nhất:</p> <u>đ</u>
<p class="price-highest">230.490.000 <u>đ</u></p>
</div> </div>
<a href="./detail-mobile.html" class="btn-add continue">Tiếp tục Đấu giá</a> <div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000
<u>đ</u>
</p>
</div>
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
</div> </div>
</div> </div>
<div class="item-auction"> <div
<div class="images"> class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[100%] mb-[10px] bg-white">
<a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png" alt=""></a> <div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<div class="box-join"> <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> <i class="icon_auction"></i>
<span>220</span> <span>220</span>
</div> </div>
</div> </div>
<div class="info"> <div class="info w-[calc(100%_-_130px)]">
<a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell UltraSharp <a href="./detail.html"
U2723QE (27.0 inch - 4K - class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình
IPS Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a> Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div> <div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
<div class="price-auction d-flex align-items"> 280.490.000
<p class="txt">Trả cao nhất:</p> <u>đ</u>
<p class="price-highest">230.490.000 <u>đ</u></p>
</div> </div>
<a href="./detail-mobile.html" class="btn-add continue">Tiếp tục Đấu giá</a> <div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000
<u>đ</u>
</p>
</div>
<a href="./detail.html" class="btn-add">Đấu giá</a>
</div> </div>
</div> </div>
<div class="item-auction"> <div
<div class="images"> class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[100%] mb-[10px] bg-white">
<a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png" alt=""></a> <div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<div class="box-join"> <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> <i class="icon_auction"></i>
<span>220</span> <span>220</span>
</div> </div>
</div> </div>
<div class="info"> <div class="info w-[calc(100%_-_130px)]">
<a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell UltraSharp <a href="./detail.html"
U2723QE (27.0 inch - 4K - class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình
IPS Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a> Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div> <div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc:
<div class="price-auction d-flex align-items"> 280.490.000
<p class="txt">Trả cao nhất:</p> <u>đ</u>
<p class="price-highest">230.490.000 <u>đ</u></p>
</div> </div>
<a href="./detail-mobile.html" class="btn-add continue">Tiếp tục Đấu giá</a> <div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000
<u>đ</u>
</p>
</div> </div>
</div> <a href="./detail.html" class="btn-add">Đấu giá</a>
<div class="item-auction">
<div class="images">
<a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<i class="icon_auction"></i>
<span>220</span>
</div>
</div>
<div class="info">
<a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell UltraSharp
U2723QE (27.0 inch - 4K -
IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
</div>
<a href="./detail-mobile.html" class="btn-add continue">Tiếp tục Đấu giá</a>
</div>
</div>
<div class="item-auction">
<div class="images">
<a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<i class="icon_auction"></i>
<span>220</span>
</div>
</div>
<div class="info">
<a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell UltraSharp
U2723QE (27.0 inch - 4K -
IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
</div>
<a href="./detail-mobile.html" class="btn-add continue">Tiếp tục Đấu giá</a>
</div>
</div>
<div class="item-auction">
<div class="images">
<a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<i class="icon_auction"></i>
<span>220</span>
</div>
</div>
<div class="info">
<a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell UltraSharp
U2723QE (27.0 inch - 4K -
IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
</div>
<a href="./detail-mobile.html" class="btn-add continue">Tiếp tục Đấu giá</a>
</div> </div>
</div> </div>
</div> </div>
<div class="paging d-flex align-items space-center"> <div class="paging flex items-center justify-center">
<a href="" class="item active">1</a> <a href=""
<a href="" class="item">1</a> 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">1</a> <a href=""
<a href="" class="item">1</a> 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">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> </div>