379 lines
25 KiB
HTML
379 lines
25 KiB
HTML
<!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-[#166dd8] p-[6px_0] editable-element" data-type="background">
|
|
<div class="container">
|
|
<div class="header-main flex items-center justify-between">
|
|
<div class="header-left editable-element" data-type="image">
|
|
<a href="/" class="logo">
|
|
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
|
|
</a>
|
|
<button class="edit-button" onclick="startEditing(event, this)" style="right: -100%;top: 0;"><i
|
|
class="far fa-edit"></i>
|
|
Sửa</button>
|
|
</div>
|
|
<div class="header-right flex items-center">
|
|
<a href="" class="item flex items-center">
|
|
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
|
|
<span class="text-white p-[0_5px] hover:text-yellow">Thể lệ đấu giá</span>
|
|
</a>
|
|
<a href="./account.html" class="item flex items-center ml-[20px]">
|
|
<img src="./assets/images/icon-user.png" class="w-[15px]" alt="">
|
|
<span class="text-white p-[0_5px] hover:text-yellow">Tài khoản</span>
|
|
<i class="fa-solid fa-caret-down text-white"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<button class="edit-button" onclick="startEditing(event, this)" style="right: 110px;top: 0;"><i
|
|
class="far fa-edit"></i>
|
|
Sửa</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="aution-details-page">
|
|
<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>
|
|
<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]">
|
|
Laptop Acer Aspire 7 A715-76-53PJ ...
|
|
</span>
|
|
</a>
|
|
<meta itemprop="position" content="2">
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
|
|
<div class="w-[1000px] m-[0_auto_100px_auto]">
|
|
<div class="info-product flex m-[25px_auto_auto] w-[750px]">
|
|
<div class="image w-[150px] h-[150px] block mr-[52px]">
|
|
<img class="block w-[100%] h-[100%] object-contain" src="./assets/images/image-thumb-1.png"
|
|
width="100%" height="100%" alt="">
|
|
</div>
|
|
<div class="info mt-[5px]">
|
|
<div class="name text-[20px] text-[#000] mb-[10px]">Laptop Acer Aspire 7 A715-76-53PJ
|
|
NH.QGESV.007 (Intel
|
|
Core
|
|
i5-12450H | Đen)
|
|
</div>
|
|
<div class="box-price-live flex">
|
|
<i class="fas fa-caret-up text-[#2ad363] text-[32px] mt-[8px] mr-[5px]"></i>
|
|
<div class="current-price text-[28px] font-[700] text-[#ef0000]" id="js-price-present">
|
|
125.000.000</div>
|
|
<div class="unit-price mt-[12px] ml-[5px]">VNĐ</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-user flex">
|
|
<div class="left w-[592px] mr-[50px]">
|
|
<div class="text-[20px] mb-[12px] uppercase">Diễn biến đấu giá</div>
|
|
<div class="list flex items-center">
|
|
<p class="uppercase mr-[10px]">Chọn đấu ngay</p>
|
|
<div class="flex items-center mr-[-10px]">
|
|
<a href="javascript:void(0)"
|
|
class="p-[10px_26px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
|
TR</a>
|
|
<a href="javascript:void(0)"
|
|
class="p-[10px_26px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
|
TR</a>
|
|
<a href="javascript:void(0)"
|
|
class="p-[10px_26px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
|
TR</a>
|
|
<a href="javascript:void(0)"
|
|
class="p-[10px_26px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
|
TR</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-user-auction bg-[#fff5e5] p-[10px] rounded-[15px] overflow-hidden mt-[15px]">
|
|
<div class="content-user overflow-x-hidden overflow-y-scroll max-h-[210px] pr-[10px]">
|
|
<div
|
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
|
<div class="info-left flex items-center">
|
|
<i class="fas fa-caret-up font-[16px] mt-[3px] mr-[5px] text-[#2ad363]"></i>
|
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
|
|
<div class="info-user flex items-center">
|
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
|
<span>trả</span>
|
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
|
</div>
|
|
</div>
|
|
<p class="time font-[700]">00:30:11</p>
|
|
</div>
|
|
<div
|
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
|
<div class="info-left flex items-center">
|
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
|
<div class="info-user flex items-center">
|
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
|
<span>trả</span>
|
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
|
</div>
|
|
</div>
|
|
<p class="time font-[700]">00:30:11</p>
|
|
</div>
|
|
<div
|
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
|
<div class="info-left flex items-center">
|
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
|
<div class="info-user flex items-center">
|
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
|
<span>trả</span>
|
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
|
</div>
|
|
</div>
|
|
<p class="time font-[700]">00:30:11</p>
|
|
</div>
|
|
<div
|
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
|
<div class="info-left flex items-center">
|
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
|
<div class="info-user flex items-center">
|
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
|
<span>trả</span>
|
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
|
</div>
|
|
</div>
|
|
<p class="time font-[700]">00:30:11</p>
|
|
</div>
|
|
<div
|
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
|
<div class="info-left flex items-center">
|
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
|
<div class="info-user flex items-center">
|
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
|
<span>trả</span>
|
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
|
</div>
|
|
</div>
|
|
<p class="time font-[700]">00:30:11</p>
|
|
</div>
|
|
<div
|
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
|
<div class="info-left flex items-center">
|
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
|
<div class="info-user flex items-center">
|
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
|
<span>trả</span>
|
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
|
</div>
|
|
</div>
|
|
<p class="time font-[700]">00:30:11</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right w-[calc(100%_-592px)]">
|
|
<div
|
|
class="box-group-time flex items-center justify-between bg-[var(--bg-time-auction)] w-full p-[10px] rounded-[5px]">
|
|
<div class="left flex items-center ">
|
|
<img src="./assets/images/icon-auction-2.png" alt="" class="w-[26px] block mr-[5px]">
|
|
<p class="title text-[14px] uppercase font-[700] text-white ml-[5px]">Thời gian còn lại
|
|
</p>
|
|
</div>
|
|
<div class="right flex items-center">
|
|
<div class="p-box-time flex items-center justify-center bg-[var(--bg-timeout-detail)] w-[115px] h-[28px] leading-[28px]
|
|
rounded-[14px] mr-[10px]">
|
|
<i class="icon time"></i>
|
|
<div class="box-time">
|
|
<div class="item-time"><b>00</b></div>
|
|
<div class="item-time"><b>30</b></div>
|
|
<div class="item-time"><b>00</b></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="total-auction w-[62px] h-[27px] leading-[27px] text-center text-white rounded-[14px] flex items-center justify-center background-yellow">
|
|
<i class="icon auction"></i>
|
|
<span>200</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-input-price mt-[20px]">
|
|
<div class="p-title text-[20px] font-[400] uppercase mb-[10px]">Nhập giá đấu của
|
|
bạn</div>
|
|
<div class="form-input mt-[10px] flex">
|
|
<input type="text" value="126.000.000" id="js-input-price" placeholder="Nhập giá"
|
|
class="input-price w-[calc(100%_-56px)] h-[56px] border-[1px] border-[#afafaf] rounded-[28px_0_0_28px] text-[32px] p-[0_20px]">
|
|
<button
|
|
class="btn-send w-[68px] h-[56px] flex items-center justify-center bg-[#166DD8] outline-none border-0 text-white text-[24px] rounded-[0_28px_28px_0]"
|
|
onclick="checkSendAuction()">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</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-[#646386]">
|
|
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
|
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
|
<img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
|
|
</div>
|
|
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
|
<b class="uppercase">Chính sách giao hàng</b>
|
|
<p>Nhận hàng & thanh toán tại nhà</p>
|
|
</div>
|
|
</div>
|
|
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
|
<div class="icons w-[26px] h-[30px] block mr-[13px]">
|
|
<img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
|
|
</div>
|
|
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
|
<b class="uppercase">Đổi mới 15 ngày đầu</b>
|
|
<p>Áp dụng với sản phẩm laptop</p>
|
|
</div>
|
|
</div>
|
|
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
|
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
|
<img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
|
|
</div>
|
|
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
|
<b class="uppercase">Thanh toán tiện lợi</b>
|
|
<p>Trả tiền mặt, CK, trả góp 0%</p>
|
|
</div>
|
|
</div>
|
|
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
|
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
|
<img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
|
|
</div>
|
|
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
|
<b class="uppercase">Hỗ trợ nhiệt tình</b>
|
|
<p>Tư vấn, giải pháp mọi thắc mắc</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contact-footer relative">
|
|
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
|
|
<b class="uppercase text-[15px] mb-[2px]">Công ty cổ phần thương mại máy tính an phát</b>
|
|
<p>Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày
|
|
11/10/2019</p>
|
|
<p class="font-[300]">Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành
|
|
phố Hà nội, Việt
|
|
Nam</p>
|
|
<p class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
|
</div>
|
|
<a href="tel:19000323"
|
|
class="btn-phone w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
|
<img src="./assets/images/btn-phone.png" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</html> |