diff --git a/assets/css/style-mb.css b/assets/css/style-mb.css new file mode 100644 index 0000000..181cec0 --- /dev/null +++ b/assets/css/style-mb.css @@ -0,0 +1,806 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); +::-webkit-scrollbar-track { + background-color: #c5c5c5; + border-radius: 10px; +} + +::-webkit-scrollbar { + width: 8px; + border-radius: 30px; + background-color: #c5c5c5; +} + +::-webkit-scrollbar-thumb { + background: #5d5d5d; + border-radius: 30px; + background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.7, #5d5d5d), color-stop(0.5, transparent), to(transparent)); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Inter", sans-serif; +} + +body { + color: #000; + font-family: "Inter", sans-serif; + margin: 0 auto; + background: #fff; + font-weight: normal; + font-size: 14px; +} + +html { + font-size: 100%; + font-family: "Inter", sans-serif; +} + +img { + max-width: 100%; + height: auto; +} + +a { + text-decoration: none !important; + color: var(--text-black); +} + +.clearfix { + content: ""; + clear: both; +} + +ul, +li { + list-style: none; +} + +table { + border-collapse: collapse; + width: 100%; +} + +.ul, +.ol { + margin: 0; + padding: 0; + list-style: none; +} + +.d-flex { + display: flex !important; +} + +.d-block { + display: block; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.text-center { + text-align: center !important; +} + +.align-items { + align-items: center !important; +} + +.space-between { + justify-content: space-between !important; +} + +.space-center { + justify-content: center !important; +} + +.d-block { + display: block !important; +} + +.flex-direction { + flex-direction: column; +} + +.line-clamp-1 { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-4 { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-5 { + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.container { + width: 100%; + padding: 0 10px; + margin: 0 auto; + overflow: hidden; +} + +.container-mb { + max-width: 640px; + margin: 0 auto; + padding: 0; +} + +.header { + background: #fff; + box-shadow: 3px 0px 11.4px 0px rgba(0, 0, 0, 0.25); +} +.header .logo { + padding: 8px 0; +} +.header .box-user { + display: flex; + align-items: center; +} +.header .box-user .txt { + font-size: 16px; + color: #555; +} +.header .box-user .fa-user-circle-o { + color: #555; + font-size: 23px; + margin-left: 7px; +} + +.homepage .ground-list-product { + margin: 20px 0; +} +.homepage .box-list-product { + margin-bottom: 20px; +} +.homepage .box-list-product .title { + font-size: 20px; + font-weight: 700; + text-transform: uppercase; + background: var(--Linear, linear-gradient(0deg, #8b0009 0%, #f80009 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; + padding-bottom: 12px; + position: relative; +} +.homepage .box-list-product .title::before { + position: absolute; + content: ""; + width: 73px; + height: 1.5px; + background: linear-gradient(0deg, #8b0009 0%, #f80009 100%); + left: 50%; + bottom: 8px; + transform: translate(-50%, 0); +} +.homepage .box-list-product .list-product { + margin-right: -12px; +} + +.product-item { + margin-right: 12px; + margin-bottom: 10px; + width: calc(50% - 12px); +} +.product-item .product-image { + display: block; + width: 100%; + height: 230px; + border: 1px solid #eaeaea; + margin-bottom: 10px; + overflow: hidden; +} +.product-item .product-image img { + display: block; + margin: auto; + height: 100%; + -o-object-fit: contain; + object-fit: contain; +} +.product-item .product-name { + font-size: 14px; + font-weight: 600; + height: 45px; + text-align: center; + margin-bottom: 10px; +} +.product-item .product-cost { + text-align: center; + font-size: 14px; + font-weight: 400; + color: #343434; + margin-bottom: 10px; +} +.product-item .starting-price { + display: block; + color: #e70000; + font-size: 16px; + font-weight: 700; + text-align: center; + margin-bottom: 10px; +} +.product-item .deal-time-holder { + margin-bottom: 10px; +} +.product-item .product-time-holder { + display: flex; + align-items: center; +} +.product-item .product-time-holder .item-time { + margin-left: 10px; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: column; + border: 0.559px solid var(--Linear, #ff3d00); + border-radius: 2.238px; + background: #fff; +} +.product-item .product-time-holder .item-time b { + width: 20px; + height: 18px; + line-height: 18px; + text-align: center; + color: #fff; + font-weight: 700; + position: relative; + font-size: 12px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.product-item .product-time-holder .item-time b::after { + content: ":"; + position: absolute; + right: -8px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.product-item .product-time-holder .item-time:last-child b { + margin: 0; +} +.product-item .product-time-holder .item-time:last-child b::after { + content: none; +} +.product-item .btn-auction { + display: block; + border-radius: 24px; + border: 1px solid #3194fc; + height: 40px; + line-height: 38px; + text-align: center; + color: #3194fc; + font-size: 18px; + font-weight: 700; +} +.product-item .btn-auction:hover { + background: #3194fc; + color: #fff; +} +.product-item .deal-time-holder.end .txt { + border-radius: 25px; + background: #ededed; + height: 24px; + padding: 0 15px; + line-height: 24px; + font-weight: 700; +} + +.box-questions { + margin-bottom: 30px; +} +.box-questions .content-questions { + margin: 12px 0; + border-radius: 12px; + box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.25); +} +.box-questions .title { + font-size: 20px; + font-weight: 600; + color: #1f8cff; + text-align: center; + text-transform: uppercase; + padding: 10px 0; + margin-bottom: 0; +} +.box-questions .content { + padding: 0 10px 10px 10px; +} +.box-questions [data-toggle=collapse].collapsed .fa:before { + content: "\f105"; + font-size: 20px; +} +.box-questions [data-toggle=collapse] .fa:before { + content: "\f107"; + font-size: 20px; +} +.box-questions .card { + margin-bottom: 12px; + border-radius: 5px; + border: 1px solid #b8b8b8; + background: #fff; +} +.box-questions .card-header { + background: #fff; + border-radius: 5px; + border-bottom: 0; + padding: 10px 10px 5px 10px; + font-size: 14px; + font-weight: 500; + color: #3a3a3a; +} +.box-questions .card-body { + padding: 0 10px 10px 10px; + font-size: 13px; + font-weight: 400; +} +.box-questions .card-link.collapsed .card-header { + padding-bottom: 10px; +} + +.footer .footer-phone { + display: block; + margin-bottom: 20px; +} +.footer .footer-phone a { + width: 280px; + margin: 0 auto; + border-radius: 25px; + position: relative; + text-decoration: none; +} +.footer .footer-phone .txt { + height: 50px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px 50px 10px 20px; + color: #1c4a10; + font-size: 15px; + font-weight: 600; + line-height: 17px; + position: relative; + background: #f2ffea; + background-clip: padding-box; + -webkit-background-clip: padding-box; + border: 2px solid transparent; + margin: auto; + border-radius: 25px; + border: 1px solid #03ae00; +} +.footer .footer-phone .txt::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + border-radius: inherit; + background-image: linear-gradient(to right, #03ae00, #f2ffea); +} +.footer .footer-phone img { + position: absolute; + right: 10px; +} +.footer .footer-bottom { + background: #f3f3f3; + padding: 15px 20px; + text-align: center; +} +.footer .footer-bottom h3, +.footer .footer-bottom p { + font-size: 13px; + font-weight: 400; + margin-bottom: 2px; + line-height: 20px; +} + +.breadcrumb { + background: #fff; + padding: 0; + margin-top: 10px; +} + +.breadcrumb ol { + width: 100%; + float: left; + padding: 0; + margin: 0; + background: none; +} + +.breadcrumb ol li { + float: left; + list-style: none; +} + +.breadcrumb ol li a span { + font-size: 14px; + line-height: 45px; + float: left; + display: flex; + align-items: center; + color: #000; +} + +.breadcrumb ol li a span:hover { + color: var(--color-hover); +} + +.breadcrumb ol li a:last-child { + color: #222; +} + +.breadcrumb ol li h1 { + font-size: 15px; + line-height: 40px; + float: left; + font-weight: 400; + margin: 0; +} + +.breadcrumb ol li i { + margin-left: 10px; + margin-right: 10px; + float: left; + line-height: 45px; +} + +.breadcrumb ol li:last-child i { + display: none; +} + +.breadcrumb i { + color: #333; + font-size: 12px; +} + +.background-white { + background: #fff; + padding: 10px; + border-radius: 12px; + box-shadow: 0px 0px 16px 0px rgba(141, 141, 141, 0.25); +} + +.page-product-detail .box-product-info { + margin-bottom: 12px; +} +.page-product-detail .product-image { + width: 100%; + margin-bottom: 15px; + height: 390px; + overflow: hidden; + border: 1px solid #eaeaea; +} +.page-product-detail .product-image img { + height: 100%; + width: 100%; + display: block; + margin: 0 auto; +} +.page-product-detail .info-right { + width: 100%; + margin-bottom: 15px; +} +.page-product-detail .info-right .name { + font-size: 20px; + font-weight: 600; + margin-bottom: 12px; +} +.page-product-detail .info-right .box-price-normal { + font-size: 16px; +} +.page-product-detail .info-right .name-price { + margin-right: 5px; + font-size: 14px; +} +.page-product-detail .info-right .current-highest-price { + margin: 10px 0; +} +.page-product-detail .info-right .current-highest-price b { + font-size: 24px; + font-weight: 700; + color: #e70000; +} +.page-product-detail .info-right .qt-view { + margin-bottom: 10px; + font-size: 16px; +} +.page-product-detail .info-right .qt-view b { + color: #0061d3; + font-size: 18px; +} +.page-product-detail .info-right .box-time { + margin-bottom: 10px; +} +.page-product-detail .info-right .box-time span { + font-size: 16px; +} +.page-product-detail .info-right .box-time .item-time { + position: relative; + margin-left: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: column; + border: 1.5px solid transparent; + background: #fff; + background-clip: padding-box; + border-radius: 5px; +} +.page-product-detail .info-right .box-time .item-time::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -1.5px; + border-radius: inherit; + background: linear-gradient(to right, #ff3d00, #ffa800); +} +.page-product-detail .info-right .box-time .item-time b { + width: 38px; + height: 35px; + line-height: 35px; + text-align: center; + color: #000; + font-weight: 700; + position: relative; + font-size: 20px; +} +.page-product-detail .info-right .box-time .item-time b::after { + content: ":"; + position: absolute; + right: -15px; + font-size: 24px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.page-product-detail .info-right .box-time .item-time:last-child b { + margin: 0; +} +.page-product-detail .info-right .box-time .item-time:last-child b::after { + content: none; +} +.page-product-detail .info-right .box-input-price { + margin-bottom: 10px; +} +.page-product-detail .info-right .box-input-price span { + margin-right: 5px; +} +.page-product-detail .info-right .box-input-price .input-price { + height: 50px; + width: 135px; + border: 1px solid #b1b1b1; + border-radius: 4px; + font-size: 20px; + color: #e70000; + text-align: center; + text-transform: uppercase; + font-weight: 700; +} +.page-product-detail .info-right .box-input-price a { + display: block; + width: 50px; + height: 50px; + margin-left: 6px; + line-height: 50px; + text-align: center; + border: 1px solid #b1b1b1; + border-radius: 4px; +} +.page-product-detail .info-right .box-input-price a i { + color: #777474; +} +.page-product-detail .info-right .box-input-price a.plus-price { + position: relative; + border: 1.5px solid transparent; + background: #fff; + background-clip: padding-box; + border-radius: 5px; +} +.page-product-detail .info-right .box-input-price a.plus-price::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -1.5px; + border-radius: inherit; + background: linear-gradient(to right, #ff3d00, #ffa800); +} +.page-product-detail .info-right .box-input-price a.plus-price i { + color: #ff4d00; +} +.page-product-detail .info-right .btn-add-auction { + display: block; + width: 100%; + height: 65px; + background: var(--Linear, linear-gradient(0deg, #8b0009 0%, #f80009 100%)); + border-radius: 30px; + margin: 20px 0; + text-align: center; + line-height: 65px; + font-size: 24px; + font-weight: 600; + color: #fff; +} +.page-product-detail .box-spec-deposit { + margin-bottom: 20px; +} +.page-product-detail .box-specification { + width: 100%; + margin-bottom: 15px; +} +.page-product-detail .box-auction-deposit { + width: 100%; + margin-bottom: 15px; +} +.page-product-detail .box-participant-list .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #7a7a7a; +} +.page-product-detail .box-participant-list td { + border-bottom: 1px solid #e6e6e6; + padding: 10px; + font-weight: 500; +} +.page-product-detail .box-participant-list tr:first-child td img { + margin-right: 5px; +} +.page-product-detail .box-participant-list tr:first-child td span { + color: #2546bb; + white-space: nowrap; +} +.page-product-detail .box-participant-list .content { + max-height: 180px; + overflow-x: auto; +} +.page-product-detail .box-specification .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #dadada; +} +.page-product-detail .box-specification .content { + position: relative; + height: 287px; + overflow: hidden; +} +.page-product-detail .box-specification .content::after { + position: absolute; + content: ""; + background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%); + width: 100%; + height: 65px; + z-index: 1; + bottom: 0; + left: 0; +} +.page-product-detail .box-specification .more { + display: block; + width: 110px; + height: 30px; + line-height: 30px; + margin: 0 auto; + text-align: center; + border: 1px solid #3e5ed0; + border-radius: 30px; + color: #3e5ed0; + font-weight: 500; +} +.page-product-detail .box-auction-deposit .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #dadada; +} +.page-product-detail .box-auction-deposit .content p { + margin-bottom: 5px; + line-height: 23px; +} +.page-product-detail .box-auction-deposit .content img { + height: 120px; + margin-right: 10px; +} +.page-product-detail .btn-add-auction.coming { + display: flex !important; + align-items: center; + justify-content: center; + position: relative; + background: linear-gradient(269deg, #ff3d00 3.91%, #ffa800 100%) !important; +} +.page-product-detail .btn-add-auction.coming img { + width: 50px; + height: 50px; + position: absolute; + left: 10px; +} +.page-product-detail .btn-add-auction.coming span { + margin-right: 10px; + margin-left: 30px; + font-size: 18px; +} +.page-product-detail .btn-add-auction.coming .item-time { + position: relative; + margin-right: 12px; + font-size: 18px; + font-weight: 500; +} +.page-product-detail .btn-add-auction.coming .item-time::before { + position: absolute; + content: ":"; + right: -9px; + top: -2px; +} +.page-product-detail .btn-add-auction.coming .item-time:last-child::before { + display: none; +} +.page-product-detail .btn-add-auction.ending { + background: linear-gradient(0deg, #8e8e8e 0%, #d5d5d5 100%); + color: #343434; +} +.page-product-detail .price-win { + margin: 12px 0; +} +.page-product-detail .price-win b { + color: #e70000; + font-size: 16px; +} +.page-product-detail .user-win { + margin-bottom: 12px; +} +.page-product-detail .user-win .name { + font-size: 16px; + font-weight: 400; + margin-bottom: 0; +} +.page-product-detail .user-win span { + color: #0061d3; + font-weight: 700; + font-size: 18px; + margin-left: 5px; +}/*# sourceMappingURL=style-mb.css.map */ \ No newline at end of file diff --git a/assets/css/style-mb.css.map b/assets/css/style-mb.css.map new file mode 100644 index 0000000..81e44d0 --- /dev/null +++ b/assets/css/style-mb.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style-mb.scss","style-mb.css"],"names":[],"mappings":"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","file":"style-mb.css"} \ No newline at end of file diff --git a/assets/css/style-mb.scss b/assets/css/style-mb.scss new file mode 100644 index 0000000..6d5e1ea --- /dev/null +++ b/assets/css/style-mb.scss @@ -0,0 +1,822 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); +::-webkit-scrollbar-track { + background-color: #c5c5c5; + border-radius: 10px; +} +::-webkit-scrollbar { + width: 8px; + border-radius: 30px; + background-color: #c5c5c5; +} +::-webkit-scrollbar-thumb { + background: #5d5d5d; + border-radius: 30px; + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + color-stop(0.7, #5d5d5d), + color-stop(0.5, transparent), + to(transparent) + ); +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Inter", sans-serif; +} + +body { + color: #000; + font-family: "Inter", sans-serif; + margin: 0 auto; + background: #fff; + font-weight: normal; + font-size: 14px; +} + +html { + font-size: 100%; + font-family: "Inter", sans-serif; +} + +img { + max-width: 100%; + height: auto; +} + +a { + text-decoration: none !important; + color: var(--text-black); +} + +.clearfix { + content: ""; + clear: both; +} + +ul, +li { + list-style: none; +} + +table { + border-collapse: collapse; + width: 100%; +} + +.ul, +.ol { + margin: 0; + padding: 0; + list-style: none; +} +.d-flex { + display: flex !important; +} + +.d-block { + display: block; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.text-center { + text-align: center !important; +} + +.align-items { + align-items: center !important; +} + +.space-between { + justify-content: space-between !important; +} + +.space-center { + justify-content: center !important; +} + +.d-block { + display: block !important; +} + +.flex-direction { + flex-direction: column; +} +.line-clamp-1 { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} +.line-clamp-4 { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} +.line-clamp-5 { + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.container { + width: 100%; + padding: 0 10px; + margin: 0 auto; + overflow: hidden; +} +.container-mb { + max-width: 640px; + margin: 0 auto; + padding: 0; +} +.header { + background: #fff; + box-shadow: 3px 0px 11.4px 0px rgba(0, 0, 0, 0.25); + .logo { + padding: 8px 0; + } + .box-user { + display: flex; + align-items: center; + .txt { + font-size: 16px; + color: #555; + } + .fa-user-circle-o { + color: #555; + font-size: 23px; + margin-left: 7px; + } + } +} +.homepage { + .ground-list-product { + margin: 20px 0; + } + .box-list-product { + margin-bottom: 20px; + .title { + font-size: 20px; + font-weight: 700; + text-transform: uppercase; + background: var(--Linear, linear-gradient(0deg, #8b0009 0%, #f80009 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; + padding-bottom: 12px; + position: relative; + &::before { + position: absolute; + content: ""; + width: 73px; + height: 1.5px; + background: linear-gradient(0deg, #8b0009 0%, #f80009 100%); + left: 50%; + bottom: 8px; + transform: translate(-50%, 0); + } + } + .list-product { + margin-right: -12px; + } + } +} +.product-item { + margin-right: 12px; + margin-bottom: 10px; + width: calc(100% / 2 - 12px); + .product-image { + display: block; + width: 100%; + height: 230px; + border: 1px solid #eaeaea; + margin-bottom: 10px; + overflow: hidden; + img { + display: block; + margin: auto; + height: 100%; + object-fit: contain; + } + } + .product-name { + font-size: 14px; + font-weight: 600; + height: 45px; + text-align: center; + margin-bottom: 10px; + } + .product-cost { + text-align: center; + font-size: 14px; + font-weight: 400; + color: #343434; + margin-bottom: 10px; + } + .starting-price { + display: block; + color: #e70000; + font-size: 16px; + font-weight: 700; + text-align: center; + margin-bottom: 10px; + } + .deal-time-holder { + margin-bottom: 10px; + } + .product-time-holder { + display: flex; + align-items: center; + .item-time { + margin-left: 10px; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: column; + border: 0.559px solid var(--Linear, #ff3d00); + border-radius: 2.238px; + background: #fff; + b { + width: 20px; + height: 18px; + line-height: 18px; + text-align: center; + color: #fff; + font-weight: 700; + position: relative; + font-size: 12px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + &::after { + content: ":"; + position: absolute; + right: -8px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + &:last-child b { + margin: 0; + &::after { + content: none; + } + } + } + } + .btn-auction { + display: block; + border-radius: 24px; + border: 1px solid #3194fc; + height: 40px; + line-height: 38px; + text-align: center; + color: #3194fc; + font-size: 18px; + font-weight: 700; + &:hover { + background: #3194fc; + color: #fff; + } + } + .deal-time-holder.end .txt { + border-radius: 25px; + background: #ededed; + height: 24px; + padding: 0 15px; + line-height: 24px; + font-weight: 700; + } +} + +.box-questions { + margin-bottom: 30px; + .content-questions { + margin: 12px 0; + border-radius: 12px; + box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.25); + } + .title { + font-size: 20px; + font-weight: 600; + color: #1f8cff; + text-align: center; + text-transform: uppercase; + padding: 10px 0; + margin-bottom: 0; + } + .content { + padding: 0 10px 10px 10px; + } + [data-toggle="collapse"].collapsed .fa:before { + content: "\f105"; + font-size: 20px; + } + [data-toggle="collapse"] .fa:before { + content: "\f107"; + font-size: 20px; + } + .card { + margin-bottom: 12px; + border-radius: 5px; + border: 1px solid #b8b8b8; + background: #fff; + } + .card-header { + background: #fff; + border-radius: 5px; + border-bottom: 0; + padding: 10px 10px 5px 10px; + font-size: 14px; + font-weight: 500; + color: #3a3a3a; + } + .card-body { + padding: 0 10px 10px 10px; + font-size: 13px; + font-weight: 400; + } + .card-link.collapsed { + .card-header { + padding-bottom: 10px; + } + } +} + +.footer { + .footer-phone { + display: block; + margin-bottom: 20px; + a { + width: 280px; + margin: 0 auto; + border-radius: 25px; + position: relative; + text-decoration: none; + } + .txt { + height: 50px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px 50px 10px 20px; + color: #1c4a10; + font-size: 15px; + font-weight: 600; + line-height: 17px; + position: relative; + background: #f2ffea; + background-clip: padding-box; + -webkit-background-clip: padding-box; + border: 2px solid transparent; + margin: auto; + border-radius: 25px; + border: 1px solid #03ae00; + &::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + border-radius: inherit; + background-image: linear-gradient(to right, #03ae00, #f2ffea); + } + } + img { + position: absolute; + right: 10px; + } + } + .footer-bottom { + background: #f3f3f3; + padding: 15px 20px; + text-align: center; + h3, + p { + font-size: 13px; + font-weight: 400; + margin-bottom: 2px; + line-height: 20px; + } + } +} + +// breadcrumb +.breadcrumb { + background: #fff; + padding: 0; + margin-top: 10px; +} +.breadcrumb ol { + width: 100%; + float: left; + padding: 0; + margin: 0; + background: none; +} + +.breadcrumb ol li { + float: left; + list-style: none; +} + +.breadcrumb ol li a span { + font-size: 14px; + line-height: 45px; + float: left; + display: flex; + align-items: center; + color: #000; +} + +.breadcrumb ol li a span:hover { + color: var(--color-hover); +} + +.breadcrumb ol li a:last-child { + color: #222; +} + +.breadcrumb ol li h1 { + font-size: 15px; + line-height: 40px; + float: left; + font-weight: 400; + margin: 0; +} + +.breadcrumb ol li i { + margin-left: 10px; + margin-right: 10px; + float: left; + line-height: 45px; +} + +.breadcrumb ol li:last-child i { + display: none; +} + +.breadcrumb i { + color: #333; + font-size: 12px; +} +.background-white { + background: #fff; + padding: 10px; + border-radius: 12px; + box-shadow: 0px 0px 16px 0px rgba(141, 141, 141, 0.25); +} + +.page-product-detail { + .box-product-info { + margin-bottom: 12px; + } + .product-image { + width: 100%; + margin-bottom: 15px; + height: 390px; + overflow: hidden; + border: 1px solid #eaeaea; + img { + height: 100%; + width: 100%; + display: block; + margin: 0 auto; + } + } + .info-right { + width: 100%; + margin-bottom: 15px; + .name { + font-size: 20px; + font-weight: 600; + margin-bottom: 12px; + } + .box-price-normal { + font-size: 16px; + } + .name-price { + margin-right: 5px; + font-size: 14px; + } + .current-highest-price { + margin: 10px 0; + b { + font-size: 24px; + font-weight: 700; + color: #e70000; + } + } + .qt-view { + margin-bottom: 10px; + font-size: 16px; + b { + color: #0061d3; + font-size: 18px; + } + } + .box-time { + margin-bottom: 10px; + span { + font-size: 16px; + } + .item-time { + position: relative; + margin-left: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: column; + border: 1.5px solid transparent; + background: #fff; + background-clip: padding-box; + border-radius: 5px; + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -1.5px; + border-radius: inherit; + background: linear-gradient(to right, #ff3d00, #ffa800); + } + b { + width: 38px; + height: 35px; + line-height: 35px; + text-align: center; + color: #000; + font-weight: 700; + position: relative; + font-size: 20px; + &::after { + content: ":"; + position: absolute; + right: -15px; + font-size: 24px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + &:last-child b { + margin: 0; + &::after { + content: none; + } + } + } + } + .box-input-price { + margin-bottom: 10px; + span { + margin-right: 5px; + } + .input-price { + height: 50px; + width: 135px; + border: 1px solid #b1b1b1; + border-radius: 4px; + font-size: 20px; + color: #e70000; + text-align: center; + text-transform: uppercase; + font-weight: 700; + } + a { + display: block; + width: 50px; + height: 50px; + margin-left: 6px; + line-height: 50px; + text-align: center; + border: 1px solid #b1b1b1; + border-radius: 4px; + i { + color: #777474; + } + &.plus-price { + position: relative; + border: 1.5px solid transparent; + background: #fff; + background-clip: padding-box; + border-radius: 5px; + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -1.5px; + border-radius: inherit; + background: linear-gradient(to right, #ff3d00, #ffa800); + } + i { + color: #ff4d00; + } + } + } + } + .btn-add-auction { + display: block; + width: 100%; + height: 65px; + background: var(--Linear, linear-gradient(0deg, #8b0009 0%, #f80009 100%)); + border-radius: 30px; + margin: 20px 0; + text-align: center; + line-height: 65px; + font-size: 24px; + font-weight: 600; + color: #fff; + } + } + .box-spec-deposit { + margin-bottom: 20px; + } + .box-specification { + width: 100%; + margin-bottom: 15px; + } + .box-auction-deposit { + width: 100%; + margin-bottom: 15px; + } + .box-participant-list { + .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #7a7a7a; + } + td { + border-bottom: 1px solid #e6e6e6; + padding: 10px; + font-weight: 500; + } + tr:first-child { + td { + img { + margin-right: 5px; + } + span { + color: #2546bb; + white-space: nowrap; + } + } + } + .content { + max-height: 180px; + overflow-x: auto; + } + } + .box-specification { + .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #dadada; + } + .content { + position: relative; + height: 287px; + overflow: hidden; + &::after { + position: absolute; + content: ""; + background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%); + width: 100%; + height: 65px; + z-index: 1; + bottom: 0; + left: 0; + } + } + .more { + display: block; + width: 110px; + height: 30px; + line-height: 30px; + margin: 0 auto; + text-align: center; + border: 1px solid #3e5ed0; + border-radius: 30px; + color: #3e5ed0; + font-weight: 500; + } + } + .box-auction-deposit { + .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #dadada; + } + .content { + p { + margin-bottom: 5px; + line-height: 23px; + } + img { + height: 120px; + margin-right: 10px; + } + } + } + .btn-add-auction.coming { + display: flex !important; + align-items: center; + justify-content: center; + position: relative; + background: linear-gradient(269deg, #ff3d00 3.91%, #ffa800 100%) !important; + } + + .btn-add-auction.coming img { + width: 50px; + height: 50px; + position: absolute; + left: 10px; + } + .btn-add-auction.coming span { + margin-right: 10px; + margin-left: 30px; + font-size: 18px; + } + .btn-add-auction.coming .item-time { + position: relative; + margin-right: 12px; + font-size: 18px; + font-weight: 500; + } + .btn-add-auction.coming .item-time::before { + position: absolute; + content: ":"; + right: -9px; + top: -2px; + } + + .btn-add-auction.coming .item-time:last-child::before { + display: none; + } + .btn-add-auction.ending { + background: linear-gradient(0deg, #8e8e8e 0%, #d5d5d5 100%); + color: #343434; + } + .price-win { + margin: 12px 0; + b { + color: #e70000; + font-size: 16px; + } + } + .user-win { + margin-bottom: 12px; + .name { + font-size: 16px; + font-weight: 400; + margin-bottom: 0; + } + span { + color: #0061d3; + font-weight: 700; + font-size: 18px; + margin-left: 5px; + } + } +} diff --git a/assets/css/style.css b/assets/css/style.css index 0733d59..1fed75f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -487,15 +487,13 @@ table { .page-product-detail .product-image { width: 50%; margin-right: 15px; - height: 400px; - position: relative; + height: 540px; + overflow: hidden; border: 1px solid #eaeaea; } .page-product-detail .product-image img { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); + height: 100%; + width: 100%; display: block; margin: 0 auto; } @@ -732,4 +730,58 @@ table { .page-product-detail .box-auction-deposit .content img { height: 120px; margin-right: 10px; +} +.page-product-detail .btn-add-auction.coming { + display: flex !important; + align-items: center; + justify-content: center; + position: relative; + background: linear-gradient(269deg, #ff3d00 3.91%, #ffa800 100%) !important; +} +.page-product-detail .btn-add-auction.coming img { + width: 50px; + height: 50px; + position: absolute; + left: 10px; +} +.page-product-detail .btn-add-auction.coming span { + margin-right: 10px; +} +.page-product-detail .btn-add-auction.coming .item-time { + position: relative; + margin-right: 12px; +} +.page-product-detail .btn-add-auction.coming .item-time::before { + position: absolute; + content: ":"; + right: -9px; + top: -2px; +} +.page-product-detail .btn-add-auction.coming .item-time:last-child::before { + display: none; +} +.page-product-detail .btn-add-auction.ending { + background: linear-gradient(0deg, #8e8e8e 0%, #d5d5d5 100%); + color: #343434; +} +.page-product-detail .price-win { + margin: 12px 0; +} +.page-product-detail .price-win b { + color: #e70000; + font-size: 16px; +} +.page-product-detail .user-win { + margin-bottom: 12px; +} +.page-product-detail .user-win .name { + font-size: 16px; + font-weight: 400; + margin-bottom: 0; +} +.page-product-detail .user-win span { + color: #0061d3; + font-weight: 700; + font-size: 18px; + margin-left: 5px; }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/assets/css/style.css.map b/assets/css/style.css.map index 21adbb0..ea2ab3e 100644 --- a/assets/css/style.css.map +++ b/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAQ,mHAAA;AACR;EACI,yBAAA;EACA,mBAAA;ACCJ;;ADCA;EACI,UAAA;EACA,mBAAA;EACA,yBAAA;ACEJ;;ADAA;EACI,mBAAA;EACA,mBAAA;EACA,gIAAA;ACGJ;;ADMA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;EACA,gCAAA;ACHJ;;ADMA;EACI,WAAA;EACA,gCAAA;EACA,cAAA;EACA,gBAAA;EACA,mBAAA;EACA,eAAA;ACHJ;;ADMA;EACI,eAAA;EACA,gCAAA;ACHJ;;ADMA;EACI,eAAA;EACA,YAAA;ACHJ;;ADMA;EACI,gCAAA;EACA,wBAAA;ACHJ;;ADMA;EACI,WAAA;EACA,WAAA;ACHJ;;ADMA;;EAEI,gBAAA;ACHJ;;ADMA;EACI,yBAAA;EACA,WAAA;ACHJ;;ADMA;;EAEI,SAAA;EACA,UAAA;EACA,gBAAA;ACHJ;;ADKA;EACI,wBAAA;ACFJ;;ADKA;EACI,cAAA;ACFJ;;ADKA;EACI,0BAAA;ACFJ;;ADKA;EACI,6BAAA;ACFJ;;ADKA;EACI,8BAAA;ACFJ;;ADKA;EACI,yCAAA;ACFJ;;ADKA;EACI,kCAAA;ACFJ;;ADKA;EACI,yBAAA;ACFJ;;ADKA;EACI,sBAAA;ACFJ;;ADIA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACDJ;;ADGA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACAJ;;ADEA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,eAAA;EACA,cAAA;ACCJ;;ADCA;EACI,gBAAA;EACA,kDAAA;ACEJ;ADDI;EACI,cAAA;ACGR;ADDI;EACI,aAAA;EACA,mBAAA;ACGR;ADFQ;EACI,eAAA;EACA,WAAA;ACIZ;ADFQ;EACI,WAAA;EACA,eAAA;EACA,gBAAA;ACIZ;;ADCI;EACI,cAAA;ACER;ADAI;EACI,mBAAA;ACER;ADDQ;EACI,eAAA;EACA,gBAAA;EACA,yBAAA;EACA,0EAAA;EACA,qBAAA;EACA,6BAAA;EACA,oCAAA;EACA,kBAAA;EACA,oBAAA;EACA,kBAAA;ACGZ;ADFY;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,2DAAA;EACA,SAAA;EACA,YAAA;EACA,6BAAA;ACIhB;;ADCA;EACI,mBAAA;ACEJ;ADDI;EACI,mBAAA;EACA,+CAAA;ACGR;ADDI;EACI,eAAA;EACA,gBAAA;EACA,cAAA;EACA,kBAAA;EACA,yBAAA;EACA,eAAA;ACGR;ADDI;EACI,aAAA;ACGR;ADDI;EACI,gBAAA;EACA,eAAA;ACGR;ADDI;EACI,gBAAA;EACA,eAAA;ACGR;ADDI;EACI,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,gBAAA;ACGR;ADDI;EACI,gBAAA;EACA,kBAAA;EACA,gBAAA;EACA,2BAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;ACGR;ADDI;EACI,yBAAA;ACGR;ADAQ;EACI,oBAAA;ACEZ;;ADEA;EACI,kBAAA;EACA,mBAAA;EACA,uBAAA;ACCJ;ADAI;EACI,cAAA;EACA,WAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,kBAAA;ACER;ADDQ;EACI,kBAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,cAAA;EACA,YAAA;ACGZ;ADAI;EACI,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kBAAA;EACA,mBAAA;ACER;ADAI;EACI,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;ACER;ADAI;EACI,cAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,mBAAA;ACER;ADAI;EACI,mBAAA;ACER;ADAI;EACI,aAAA;EACA,mBAAA;ACER;ADDQ;EACI,iBAAA;EACA,aAAA;EACA,eAAA;EACA,uBAAA;EACA,kBAAA;EACA,sBAAA;EACA,4CAAA;EACA,sBAAA;EACA,gBAAA;ACGZ;ADFY;EACI,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,eAAA;EACA,8EAAA;EACA,qBAAA;EACA,6BAAA;EACA,oCAAA;ACIhB;ADHgB;EACI,YAAA;EACA,kBAAA;EACA,WAAA;EACA,8EAAA;EACA,qBAAA;EACA,6BAAA;EACA,oCAAA;ACKpB;ADFY;EACI,SAAA;ACIhB;ADHgB;EACI,aAAA;ACKpB;ADAI;EACI,cAAA;EACA,mBAAA;EACA,yBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;ACER;ADDQ;EACI,mBAAA;EACA,WAAA;ACGZ;ADAI;EACI,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;ACER;;ADEA;EACI,mBAAA;ACCJ;ADAI;EACI,eAAA;ACER;ADAI;EACI,UAAA;ACER;ADDQ;;EAEI,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,iBAAA;ACGZ;ADCQ;EACI,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,qBAAA;ACCZ;ADCQ;EACI,YAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,4BAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;EACA,4BAAA;EACA,oCAAA;EACA,6BAAA;EACA,YAAA;EACA,mBAAA;EACA,yBAAA;ACCZ;ADAY;EACI,WAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,6DAAA;ACEhB;ADCQ;EACI,kBAAA;EACA,WAAA;ACCZ;;ADKA;EACI,gBAAA;EACA,UAAA;EACA,gBAAA;ACFJ;;ADIA;EACI,WAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,WAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,eAAA;EACA,iBAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACDJ;;ADIA;EACI,yBAAA;ACDJ;;ADIA;EACI,WAAA;ACDJ;;ADIA;EACI,eAAA;EACA,iBAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;ACDJ;;ADIA;EACI,iBAAA;EACA,kBAAA;EACA,WAAA;EACA,iBAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,WAAA;EACA,eAAA;ACDJ;;ADGA;EACI,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,sDAAA;ACAJ;;ADII;EACI,mBAAA;ACDR;ADGI;EACI,UAAA;EACA,kBAAA;EACA,aAAA;EACA,kBAAA;EACA,yBAAA;ACDR;ADEQ;EACI,kBAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,cAAA;EACA,cAAA;ACAZ;ADGI;EACI,uBAAA;ACDR;ADEQ;EACI,eAAA;EACA,gBAAA;EACA,mBAAA;ACAZ;ADEQ;EACI,eAAA;ACAZ;ADEQ;EACI,iBAAA;EACA,eAAA;ACAZ;ADEQ;EACI,cAAA;ACAZ;ADCY;EACI,eAAA;EACA,gBAAA;EACA,cAAA;ACChB;ADEQ;EACI,mBAAA;EACA,eAAA;ACAZ;ADCY;EACI,cAAA;EACA,eAAA;ACChB;ADEQ;EACI,mBAAA;ACAZ;ADCY;EACI,eAAA;ACChB;ADCY;EACI,kBAAA;EACA,iBAAA;EACA,aAAA;EACA,eAAA;EACA,uBAAA;EACA,kBAAA;EACA,sBAAA;EACA,+BAAA;EACA,gBAAA;EACA,4BAAA;EACA,kBAAA;ACChB;ADAgB;EACI,WAAA;EACA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,cAAA;EACA,sBAAA;EACA,uDAAA;ACEpB;ADAgB;EACI,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,eAAA;ACEpB;ADDoB;EACI,YAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,8EAAA;EACA,qBAAA;EACA,6BAAA;EACA,oCAAA;ACGxB;ADAgB;EACI,SAAA;ACEpB;ADDoB;EACI,aAAA;ACGxB;ADEQ;EACI,mBAAA;ACAZ;ADCY;EACI,iBAAA;ACChB;ADCY;EACI,YAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,yBAAA;EACA,gBAAA;ACChB;ADCY;EACI,cAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,yBAAA;EACA,kBAAA;ACChB;ADAgB;EACI,cAAA;ACEpB;ADAgB;EACI,kBAAA;EACA,+BAAA;EACA,gBAAA;EACA,4BAAA;EACA,kBAAA;ACEpB;ADDoB;EACI,WAAA;EACA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,cAAA;EACA,sBAAA;EACA,uDAAA;ACGxB;ADDoB;EACI,cAAA;ACGxB;ADEQ;EACI,cAAA;EACA,WAAA;EACA,YAAA;EACA,0EAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;ACAZ;ADGI;EACI,mBAAA;ACDR;ADGI;EACI,UAAA;EACA,kBAAA;ACDR;ADGI;EACI,uBAAA;ACDR;ADIQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,oBAAA;EACA,gCAAA;ACFZ;ADIQ;EACI,gCAAA;EACA,aAAA;EACA,gBAAA;ACFZ;ADMgB;EACI,iBAAA;ACJpB;ADMgB;EACI,cAAA;ACJpB;ADQQ;EACI,iBAAA;EACA,gBAAA;ACNZ;ADUQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,oBAAA;EACA,gCAAA;ACRZ;ADUQ;EACI,kBAAA;EACA,aAAA;EACA,gBAAA;ACRZ;ADSY;EACI,kBAAA;EACA,WAAA;EACA,uEAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,SAAA;EACA,OAAA;ACPhB;ADUQ;EACI,cAAA;EACA,YAAA;EACA,YAAA;EACA,iBAAA;EACA,cAAA;EACA,kBAAA;EACA,yBAAA;EACA,mBAAA;EACA,cAAA;EACA,gBAAA;ACRZ;ADYQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,oBAAA;EACA,gCAAA;ACVZ;ADaY;EACI,kBAAA;EACA,iBAAA;ACXhB;ADaY;EACI,aAAA;EACA,kBAAA;ACXhB","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index eee5336..3bf3c3f 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -489,14 +489,12 @@ table { .product-image { width: 50%; margin-right: 15px; - height: 400px; - position: relative; + height: 540px; + overflow: hidden; border: 1px solid #eaeaea; img { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); + height: 100%; + width: 100%; display: block; margin: 0 auto; } @@ -747,4 +745,61 @@ table { } } } + .btn-add-auction.coming { + display: flex !important; + align-items: center; + justify-content: center; + position: relative; + background: linear-gradient(269deg, #ff3d00 3.91%, #ffa800 100%) !important; + } + + .btn-add-auction.coming img { + width: 50px; + height: 50px; + position: absolute; + left: 10px; + } + .btn-add-auction.coming span { + margin-right: 10px; + } + .btn-add-auction.coming .item-time { + position: relative; + margin-right: 12px; + } + + .btn-add-auction.coming .item-time::before { + position: absolute; + content: ":"; + right: -9px; + top: -2px; + } + + .btn-add-auction.coming .item-time:last-child::before { + display: none; + } + .btn-add-auction.ending { + background: linear-gradient(0deg, #8e8e8e 0%, #d5d5d5 100%); + color: #343434; + } + .price-win { + margin: 12px 0; + b { + color: #e70000; + font-size: 16px; + } + } + .user-win { + margin-bottom: 12px; + .name { + font-size: 16px; + font-weight: 400; + margin-bottom: 0; + } + span { + color: #0061d3; + font-weight: 700; + font-size: 18px; + margin-left: 5px; + } + } } diff --git a/assets/images/banner-mb.png b/assets/images/banner-mb.png new file mode 100644 index 0000000..a15f153 Binary files /dev/null and b/assets/images/banner-mb.png differ diff --git a/assets/images/icon_time.png b/assets/images/icon_time.png new file mode 100644 index 0000000..be85632 Binary files /dev/null and b/assets/images/icon_time.png differ diff --git a/assets/images/logo-mb.png b/assets/images/logo-mb.png new file mode 100644 index 0000000..bb448e3 Binary files /dev/null and b/assets/images/logo-mb.png differ diff --git a/dist/data.js b/dist/data.js index aba57d6..fd790c9 100644 --- a/dist/data.js +++ b/dist/data.js @@ -86,7 +86,7 @@ const listproduct_mau = [ price: 27390000, starting_price: 2550000, price_step: 300000, - from_time: 1703350800000, + from_time: 1703523600000, to_time: 1703955600000, status: 'coming', user_online: 0, @@ -213,7 +213,7 @@ const listproduct_mau = [ price: 26390000, starting_price: 16390000, price_step: 300000, - from_time: 1703350800000, + from_time: 1703523600000, to_time: 1703955600000, status: 'coming', user_online: 0, @@ -269,6 +269,7 @@ function countDown(iid, endTime) { const updateCountdown = () => { const now = Date.now(); const distance = endTime - now; + console.log(distance); if (distance > 0) { const [days, hours, minutes, seconds] = getTimeComponents(distance); displayCountdown(iid, days, hours, minutes, seconds); @@ -299,6 +300,7 @@ function displayCountdown(iid, days, hours, minutes, seconds) {
${formatTimeComponent(seconds)}
`; } else { + console.log('aaaa'); element.innerHTML = `
${formatTimeComponent(hours)}
${formatTimeComponent(minutes)}
diff --git a/dist/detail.js b/dist/detail.js index ac80cf2..dd2488e 100644 --- a/dist/detail.js +++ b/dist/detail.js @@ -34,12 +34,68 @@ function GetURLParameter(sParam, url) { } } function XayhtmlProductDeail(product) { + // lay gia cao nhat const highestBid = getHighestBid(product.list_user); + // xay html hien thi anh san pham const htmlImage = ` ${product.product_name} `; + // xay html hien thi thong tin san pham + var HtmlButtonBid = ''; + if (product.from_time > Date.now()) { + HtmlButtonBid = ` +
Số người đang xem: ${product.user_online} người
+ + +
+ Diễn ra vào lúc: +
+
+
+ + `; + } + else if (product.to_time > Date.now()) { + HtmlButtonBid = ` +
+
Giá cao nhất hiện tại:
+ ${formatPrice(highestBid.highestBid)}đ +
+
Số người đang tham gia: ${product.user_online} người
+
+ Thời gian còn lại: +
+
+
+
+ Nhập giá đấu của bạn + + + +
+ + Đấu giá ngay + + `; + } + else { + HtmlButtonBid = ` +
+
Giá thắng cuộc:
+ ${formatPrice(highestBid.highestBid)}đ +
+
+
+ Người chiến thắng:
+ ${highestBid.highestBidName} +
+ + Phiên đấu giá đã kết thúc + + `; + } const htmlInfo = `

${product.product_name}

@@ -52,44 +108,35 @@ function XayhtmlProductDeail(product) { ${formatPrice(product.price_step)}đ
-
-
Giá cao nhất hiện tại:
- ${formatPrice(highestBid)}đ -
-
Số người đang tham gia: ${product.user_online} người
-
- Thời gian còn lại: -
-
-
-
- Nhập giá đấu của bạn - - - -
+ ${HtmlButtonBid} `; let html_dien_bien_dau_gia = ''; - product.list_user.forEach((user) => { - html_dien_bien_dau_gia += ` - - - ${highestBid == user.price ? ` -
- - ${user.userName} -
- ` : `${user.userName}`} - - - ${formatPrice(user.price)}đ - - - ${formatTime(user.time)} - - - `; - }); + if (product.from_time < Date.now()) { + const boxParticipant = document.getElementById('box-participant-list'); + if (boxParticipant) { + boxParticipant.classList.remove('d-none'); + } + product.list_user.forEach((user) => { + html_dien_bien_dau_gia += ` + + + ${highestBid.highestBid == user.price ? ` +
+ + ${user.userName} +
+ ` : `${user.userName}`} + + + ${formatPrice(user.price)}đ + + + ${formatTime(user.time)} + + + `; + }); + } const htmlSpec = ` ${product.specifications} `; @@ -109,19 +156,24 @@ function show_product_detail(lay_thongtin_sp) { holderInfo.innerHTML = htmlInfo; holderAuctionDetails.innerHTML = html_dien_bien_dau_gia; holderSpec.innerHTML = htmlSpec; - if (product.to_time > Date.now()) { + if (product.from_time > Date.now()) { + countDown(`js-deal-time-${product.productId}`, product.from_time); + } + else if (product.to_time > Date.now()) { countDown(`js-deal-time-${product.productId}`, product.to_time); } }); } function getHighestBid(list_user) { let highestBid = 0; + let highestBidName = ''; list_user.forEach(user => { if (user.price > highestBid) { highestBid = user.price; + highestBidName = user.userName; } }); - return highestBid; + return { highestBid, highestBidName }; } function getList() { } diff --git a/dist/main-mb.js b/dist/main-mb.js new file mode 100644 index 0000000..7ee7bc6 --- /dev/null +++ b/dist/main-mb.js @@ -0,0 +1,91 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +function goi_sp_tu_api() { + return __awaiter(this, void 0, void 0, function* () { + return new Promise((resolve, reject) => { + return resolve(listproduct_mau); + }); + }); +} +function hienthi_sp() { + return __awaiter(this, void 0, void 0, function* () { + const lay_sp_tu_api = yield goi_sp_tu_api(); + // code hien thi danh sach dang dien ra + // Usage example: + showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started'); + showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming'); + showListProductHome(lay_sp_tu_api, 'ended', 'js-holder-list-ended'); + }); +} +function showListProductHome(lay_sp_tu_api, status, holderId) { + const html = []; + const holder = document.getElementById(holderId); + lay_sp_tu_api + .filter((product) => product.status == status) + .forEach(function (product, keyIndex) { + html.push(xayhtml(product)); + if (status != 'ended' || product.to_time > product.from_time) { + const countdownTime = (status == 'started') ? product.to_time : product.from_time; + countDown(`js-deal-time-${product.productId}`, countdownTime); + } + }); + if (holder) { + holder.innerHTML = html.join(''); + } +} +function xayhtml(product) { + var Htmlcheckstatus = ''; + if (product.status == 'started') { + Htmlcheckstatus = ` +
+ Giá Khởi điểm: ${formatPrice(product.starting_price)}đ +
+
+
Còn lại:
+
+
+
+ Đấu giá ngay`; + } + else if (product.status == 'coming') { + Htmlcheckstatus = ` +
+ Giá Khởi điểm: ${formatPrice(product.starting_price)}đ +
+
+
Bắt đầu sau:
+
+
+
+ Xem chi tiết`; + } + else if (product.to_time < Date.now()) { + Htmlcheckstatus = `
Thắng cuộc ${formatPrice(product.starting_price)}đ
+
+
Đã kết thúc
+
+Xem chi tiết`; + } + return `
+ + ${product.product_name} + +
+ ${product.product_name} +
+ Giá gốc: ${formatPrice(product.price)}đ +
+ ${Htmlcheckstatus} +
+
+ `; +} +hienthi_sp(); diff --git a/dist/main.js b/dist/main.js index de040b2..cb89fcf 100644 --- a/dist/main.js +++ b/dist/main.js @@ -44,7 +44,11 @@ function showListProductHome(lay_sp_tu_api, status, holderId) { function xayhtml(product) { var Htmlcheckstatus = ''; if (product.status == 'started') { - Htmlcheckstatus = `
+ Htmlcheckstatus = ` +
+ Giá Khởi điểm: ${formatPrice(product.starting_price)}đ +
+
Còn lại:
@@ -52,7 +56,11 @@ function xayhtml(product) { Đấu giá ngay`; } else if (product.status == 'coming') { - Htmlcheckstatus = `
+ Htmlcheckstatus = ` +
+ Giá Khởi điểm: ${formatPrice(product.starting_price)}đ +
+
Bắt đầu sau:
diff --git a/index-mb.html b/index-mb.html new file mode 100644 index 0000000..072f96e --- /dev/null +++ b/index-mb.html @@ -0,0 +1,532 @@ + + + + + + + Chương trình đấu giá trực tuyết + + + + + + +
+
+
+
+ + + Chào phương ! + + +
+
+ +
+
+ +
+
+
+

Đang diễn ra

+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+
+
+

Sắp diễn ra

+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+
+
+

Đã kết thúc

+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB + 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+
+
+
+
+ +
+
+
+

Câu hỏi thường gặp

+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+
+
+
+
+ +
+ Tổng đài hỗ trợ miễn phí + 1800.xxxx +
+ phone + +
+
+
+

CÔNG TY TNHH DỊCH VỤ VÀ CÔNG NGHỆ HOÀNG HÀ ©

+

+ 2008 - 2020 - Công ty TNHH Dịch Vụ Và Công Nghệ Hoàng Hà / GPKD số:0107406972 Do Sở Kế Hoạch + Và + Đầu + Tư Thành Phố Hà Nội Cấp Bản Quyền Thuộc Về hoanghapc.vn +

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/product-detail-mb.html b/product-detail-mb.html new file mode 100644 index 0000000..d237d26 --- /dev/null +++ b/product-detail-mb.html @@ -0,0 +1,453 @@ + + + + + + + Chương trình đấu giá trực tuyết + + + + + + +
+
+
+
+ + + Chào phương ! + + +
+
+
+
+
+
+
    +
  1. + + Trang chủ + + +
    2. +
  2. + + Đang diễn ra + + +
    3. +
+
+
+ +
+
+ + + +
+
+
+

Máy tính bảng TCL Tab 11 WIFI 4GB 128GB

+
+
+
Khởi điểm:
+ 2.350.000đ +
+
+
Bước giá:
+ 2.350.000đ +
+
+
+
Giá cao nhất hiện tại:
+ 4.500.000đ +
+
Số người đang tham gia: 200 người
+
+ Thời gian còn lại: +
+
20
+
11
+
30
+
+
+
+ Nhập giá đấu của bạn + + + +
+ + Đấu giá ngay + +
+
+

Diễn biến đấu giá

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + Mai phương +
+ 		+ 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+
+
+
+
+
+
+

Thông tin sản phẩm

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL + COREi7 13700KF up 5.4GHz | 16 CORE | 24 + THREAD  36 THÁNG
2MAIN + ASROCK + Z690 STEELLEGEND DDR4 + + 36 THÁNG
3TẢN NHIỆT + + COOLER MASTER + MASTERLIQUIDML360L CORE ARGB + 12 THÁNG
4RAM + + 32GB DDR4 3600 + MHz(2x16G) + 36 THÁNG
5SSDLEXARNM620 + 512GB M.2 2280 PCIe 3.0x4 - + RW 3500MB/s36 THÁNG
6VGA + PALIT + GEFORCE RTX2060 + SUPER DUAL 8GB GDDR6 256-bit + 36 THÁNG
7PSUASUS + TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASE + XIGMATEK + ANUBIS PRO 4FX - 4FAN + +  
6VGA + PALIT + GEFORCE RTX2060 + SUPER DUAL 8GB GDDR6 256-bit + 36 THÁNG
7PSUASUS + TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASE + XIGMATEK + ANUBIS PRO 4FX - 4FAN + +  
+
+ Xem thêm +
+
+

Thông tin đặt cọc đấu giá

+
+

Quý khách vui lòng làm theo các bước sau đây.

+
+ Bước 1: + Đặt cọc 500.000 VND vào STK bên dưới +
+
+ Bước 2: + Kiểm tra email để nhận thông tin xác nhận đặt cọc thành công từ Hoàng Hà PC + gửi + đến (Lưu ý: kiểm tra tất cả các hộp thư bao gồm cả thư + rác) Trường hợp nếu không nhận được email, quý khách vui lòng gửi hình ảnh giao dịch + qua + Zalo: 0909000000 để được hỗ trợ nhanh nhất. + +
+ Thông tin tài khoản nhận cọc: +
+ +
+ CÔNG TY CP THƯƠNG MẠI DỊCH VỤ ACB +

Ngân hàng: Techcombank

+

Số tài khoản: 9999998888

+

Nội dung thanh toán: [ID tài khoản] - [Mã SP cọc]

+
+
+
+
+
+
+
+
+
+
+

Câu hỏi thường gặp

+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+
+
+
+
+ +
+ Tổng đài hỗ trợ miễn phí + 1800.xxxx +
+ phone + +
+
+
+

CÔNG TY TNHH DỊCH VỤ VÀ CÔNG NGHỆ HOÀNG HÀ ©

+

+ 2008 - 2020 - Công ty TNHH Dịch Vụ Và Công Nghệ Hoàng Hà / GPKD số:0107406972 Do Sở Kế Hoạch + Và + Đầu + Tư Thành Phố Hà Nội Cấp Bản Quyền Thuộc Về hoanghapc.vn +

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/product-detail.html b/product-detail.html index 537f757..416a46a 100644 --- a/product-detail.html +++ b/product-detail.html @@ -86,7 +86,7 @@ Đấu giá ngay
-
+

Diễn biến đấu giá

diff --git a/src/data.ts b/src/data.ts index bf376b5..d2da136 100644 --- a/src/data.ts +++ b/src/data.ts @@ -110,7 +110,7 @@ const listproduct_mau: ProductInfo[] = [ price: 27390000, starting_price: 2550000, price_step: 300000, - from_time: 1703350800000, + from_time: 1703523600000, to_time: 1703955600000, status: 'coming', user_online: 0, @@ -237,7 +237,7 @@ const listproduct_mau: ProductInfo[] = [ price: 26390000, starting_price: 16390000, price_step: 300000, - from_time: 1703350800000, + from_time: 1703523600000, to_time: 1703955600000, status: 'coming', user_online: 0, @@ -297,7 +297,7 @@ function countDown(iid: string, endTime: number): void { const updateCountdown = () => { const now: number = Date.now(); const distance: number = endTime - now; - + console.log(distance) if (distance > 0) { const [days, hours, minutes, seconds] = getTimeComponents(distance); displayCountdown(iid, days, hours, minutes, seconds); @@ -313,6 +313,7 @@ function countDown(iid: string, endTime: number): void { } function getTimeComponents(distance: number): [number, number, number, number] { + const days: number = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours: number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes: number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); @@ -331,6 +332,7 @@ function displayCountdown(iid: string, days: number, hours: number, minutes: num
${formatTimeComponent(minutes)}
${formatTimeComponent(seconds)}
`; } else { + console.log('aaaa') element.innerHTML = `
${formatTimeComponent(hours)}
${formatTimeComponent(minutes)}
diff --git a/src/detail.ts b/src/detail.ts index 79a5271..d9e6f24 100644 --- a/src/detail.ts +++ b/src/detail.ts @@ -27,14 +27,68 @@ function GetURLParameter(sParam: string, url: string) { function XayhtmlProductDeail(product: ProductInfo) { - + // lay gia cao nhat const highestBid = getHighestBid(product.list_user); + // xay html hien thi anh san pham const htmlImage: string = ` ${product.product_name} `; + + // xay html hien thi thong tin san pham + var HtmlButtonBid: string = '' + if (product.from_time > Date.now()) { + HtmlButtonBid = ` +
Số người đang xem: ${product.user_online} người
+ + +
+ Diễn ra vào lúc: +
+
+
+ + `; + } else if (product.to_time > Date.now()) { + HtmlButtonBid = ` +
+
Giá cao nhất hiện tại:
+ ${formatPrice(highestBid.highestBid)}đ +
+
Số người đang tham gia: ${product.user_online} người
+
+ Thời gian còn lại: +
+
+
+
+ Nhập giá đấu của bạn + + + +
+ + Đấu giá ngay + + `; + } else { + HtmlButtonBid = ` +
+
Giá thắng cuộc:
+ ${formatPrice(highestBid.highestBid)}đ +
+
+
+ Người chiến thắng:
+ ${highestBid.highestBidName} +
+ + Phiên đấu giá đã kết thúc + + `; + } const htmlInfo: string = `

${product.product_name}

@@ -47,47 +101,36 @@ function XayhtmlProductDeail(product: ProductInfo) { ${formatPrice(product.price_step)}đ
-
-
Giá cao nhất hiện tại:
- ${formatPrice(highestBid)}đ -
-
Số người đang tham gia: ${product.user_online} người
-
- Thời gian còn lại: -
-
-
-
- Nhập giá đấu của bạn - - - -
+ ${HtmlButtonBid} `; let html_dien_bien_dau_gia: string = ''; - - product.list_user.forEach((user: infoUser) => { - html_dien_bien_dau_gia += ` - - - - - - `; - }); - + if (product.from_time < Date.now()) { + const boxParticipant = document.getElementById('box-participant-list') + if (boxParticipant) { + boxParticipant.classList.remove('d-none'); + } + product.list_user.forEach((user: infoUser) => { + html_dien_bien_dau_gia += ` + + + + + + `; + }); + } const htmlSpec: string = ` ${product.specifications} @@ -114,23 +157,28 @@ function show_product_detail(lay_thongtin_sp: ProductInfo[]) { holderAuctionDetails!.innerHTML = html_dien_bien_dau_gia; holderSpec!.innerHTML = htmlSpec; - if (product.to_time > Date.now()) { + if (product.from_time > Date.now()) { + countDown(`js-deal-time-${product.productId}`, product.from_time); + } else if (product.to_time > Date.now()) { countDown(`js-deal-time-${product.productId}`, product.to_time); } + + }); } function getHighestBid(list_user: infoUser[]) { let highestBid = 0; - + let highestBidName = ''; list_user.forEach(user => { if (user.price > highestBid) { highestBid = user.price; + highestBidName = user.userName; } }); - return highestBid; + return { highestBid, highestBidName }; } function getList() { diff --git a/src/main-mb.ts b/src/main-mb.ts new file mode 100644 index 0000000..ebcd8ae --- /dev/null +++ b/src/main-mb.ts @@ -0,0 +1,90 @@ + +async function goi_sp_tu_api(): Promise { + return new Promise((resolve, reject) => { + return resolve(listproduct_mau); + }) +} + + +async function hienthi_sp() { + const lay_sp_tu_api: ProductInfo[] = await goi_sp_tu_api(); + + // code hien thi danh sach dang dien ra + // Usage example: + showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started'); + showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming'); + showListProductHome(lay_sp_tu_api, 'ended', 'js-holder-list-ended'); +} + +function showListProductHome(lay_sp_tu_api: ProductInfo[], status: string, holderId: string) { + const html: string[] = []; + const holder = document.getElementById(holderId); + + lay_sp_tu_api + .filter((product: ProductInfo) => product.status == status) + .forEach(function (product, keyIndex) { + html.push( + xayhtml(product) + ); + if (status != 'ended' || product.to_time > product.from_time) { + const countdownTime = (status == 'started') ? product.to_time : product.from_time; + countDown(`js-deal-time-${product.productId}`, countdownTime); + } + }); + + if (holder) { + holder.innerHTML = html.join(''); + } +} + +function xayhtml(product: ProductInfo) { + var Htmlcheckstatus: string = '' + if (product.status == 'started') { + Htmlcheckstatus = ` +
+ Giá Khởi điểm: ${formatPrice(product.starting_price)}đ +
+
+
Còn lại:
+
+
+
+ Đấu giá ngay`; + } else if (product.status == 'coming') { + Htmlcheckstatus = ` +
+ Giá Khởi điểm: ${formatPrice(product.starting_price)}đ +
+
+
Bắt đầu sau:
+
+
+
+ Xem chi tiết`; + } else if (product.to_time < Date.now()) { + Htmlcheckstatus = `
Thắng cuộc ${formatPrice(product.starting_price)}đ
+
+
Đã kết thúc
+
+Xem chi tiết`; + } + return `
+ + ${product.product_name} + +
+ ${product.product_name} +
+ Giá gốc: ${formatPrice(product.price)}đ +
+ ${Htmlcheckstatus} +
+
+ `; +} + + +hienthi_sp(); + + + diff --git a/src/main.ts b/src/main.ts index 0213d91..68846d4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -40,14 +40,22 @@ function showListProductHome(lay_sp_tu_api: ProductInfo[], status: string, holde function xayhtml(product: ProductInfo) { var Htmlcheckstatus: string = '' if (product.status == 'started') { - Htmlcheckstatus = `
+ Htmlcheckstatus = ` +
+ Giá Khởi điểm: ${formatPrice(product.starting_price)}đ +
+
Còn lại:
Đấu giá ngay`; } else if (product.status == 'coming') { - Htmlcheckstatus = `
+ Htmlcheckstatus = ` +
+ Giá Khởi điểm: ${formatPrice(product.starting_price)}đ +
+
Bắt đầu sau:
- ${highestBid == user.price ? ` -
- - ${user.userName} -
- ` : `${user.userName}`} - 		- ${formatPrice(user.price)}đ - - ${formatTime(user.time)} -
+ ${highestBid.highestBid == user.price ? ` +
+ + ${user.userName} +
+ ` : `${user.userName}`} + 		+ ${formatPrice(user.price)}đ + + ${formatTime(user.time)} +