up
This commit is contained in:
648
assets/css/style-global-mb.css
Normal file
648
assets/css/style-global-mb.css
Normal file
@@ -0,0 +1,648 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
|
||||
/* thay đổi màu sắc */
|
||||
:root {
|
||||
--main-color: #e7d9b7; /* màu chính */
|
||||
--color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
|
||||
--color-bg-title-2: #a50e43; /* màu nền chữ vàng */
|
||||
--color-box-auction: #a50e43; /* màu nền đấu giá kịch tính */
|
||||
--color-bg-footer: #000; /* màu nền footer */
|
||||
--bg-header: #fff; /* màu nền header */
|
||||
--bg-top-auction: #ea3e00; /* màu nền tiêu đề top đấu giá sôi động */
|
||||
--bg-list-auction: #ffdbe7; /* màu nền danh sách đấu giá */
|
||||
--color-list-auction: #a50e43; /* màu nền tiều đề danh sách đấu giá */
|
||||
--bg-deal: #a50e43; /* màu nền box deal */
|
||||
--border-faq: #a50e43; /* màu border câu hỏi thường gặp */
|
||||
--color-faq: #a50e43; /* màu chữ tiêu đề câu hỏi thường gặp */
|
||||
--title-faq: #f8f8f8; /* màu nền tiêu đề câu hỏi */
|
||||
--bg-time-auction: #a50e43; /* màu nền ngày hội đấu giá */
|
||||
--bg-timeout-detail: #ea3e00; /* màu nền thời gian đếm ngược đấu giá */
|
||||
--bg-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */
|
||||
--bg-btn-auction: #f00000; /* màu nền nút tham gia đấu giá */
|
||||
--bg-time-deal: #ee4d2d; /* màu nền thời gian đếm ngược deal */
|
||||
--bg-btn-deal: #166dd8; /* màu nền nút mua sp deal */
|
||||
--bg-list-deal-ongoing: #ee4d2d; /* màu nền danh sách sản phẩm đang diễn ra chi tiết deal */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #a4a4a4;
|
||||
border-radius: 20px;
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
0 0,
|
||||
0 100%,
|
||||
color-stop(0.7, #a4a4a4),
|
||||
color-stop(0.5, transparent),
|
||||
to(transparent)
|
||||
);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Be Vietnam Pro", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #222;
|
||||
font-family: "Be Vietnam Pro", sans-serif;
|
||||
|
||||
font-size: 15px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
font-family: "Be Vietnam Pro", sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ol,
|
||||
.ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.container-mb {
|
||||
padding: 0;
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon_auction {
|
||||
background: url(../images/icon-auction.png) no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
}
|
||||
.icon-deal {
|
||||
display: block;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
background: url(../images/icon-flash.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-star {
|
||||
background: url(../images/icon-star.png) no-repeat;
|
||||
width: 80px;
|
||||
height: 12px;
|
||||
display: block;
|
||||
background-size: 100%;
|
||||
}
|
||||
.icon-star.star5 {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.icon-star.star4 {
|
||||
background-position: 0 -17px;
|
||||
}
|
||||
.icon-star.star3 {
|
||||
background-position: 0 -34px;
|
||||
}
|
||||
.icon-star.star2 {
|
||||
background-position: 0 -50px;
|
||||
}
|
||||
.icon-star.star1 {
|
||||
background-position: 0 -67px;
|
||||
}
|
||||
.icon-star.star0 {
|
||||
background-position: 0 -84px;
|
||||
}
|
||||
.icon.auction {
|
||||
background: url(../images/icon-auction.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.icon.time {
|
||||
background: url(../images/icon-fire-time.png) no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.icon-cup {
|
||||
background: url(../images/icon-cup.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.saleoff {
|
||||
width: 42px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding-left: 10px;
|
||||
background: #f00000;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
.saleoff::before {
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
top: 0;
|
||||
width: 15px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
background: url(../images/icon-flash.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.background-blue {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
.background-red {
|
||||
background: var(var(--color-bg-title-1)) !important;
|
||||
}
|
||||
.background-yellow {
|
||||
background: var(var(--color-bg-title-2)) !important;
|
||||
}
|
||||
.background-footer {
|
||||
background: var(--color-bg-footer) !important;
|
||||
}
|
||||
|
||||
.hover\:text-blue:hover {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
.hover\:background-blue:hover {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
.hover\:background-yellow:hover {
|
||||
background: var(var(--color-bg-title-2)) !important;
|
||||
}
|
||||
|
||||
.hover\:background-white:hover {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.hover\:text-yellow:hover {
|
||||
color: var(var(--color-bg-title-2)) !important;
|
||||
}
|
||||
|
||||
.hover\:text-red:hover {
|
||||
color: #f00000 !important;
|
||||
}
|
||||
.hover\:border-red:hover {
|
||||
border: 1px solid #f00000 !important;
|
||||
}
|
||||
|
||||
.hover\:border-blue:hover {
|
||||
border: 1px solid var(--main-color) !important;
|
||||
}
|
||||
|
||||
.hover\:border-yellow:hover {
|
||||
border: 1px solid var(var(--color-bg-title-2)) !important;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #f00000;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background: var(--main-color);
|
||||
color: #000;
|
||||
text-align: center;
|
||||
border-radius: 26px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
border: 1px solid var(--main-color);
|
||||
color: var(--main-color);
|
||||
background: #fff;
|
||||
}
|
||||
.btn-add.continue {
|
||||
background: #5f00b1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-add.continue:hover {
|
||||
border: 1px solid #5f00b1;
|
||||
color: #5f00b1;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.btn-add.coming {
|
||||
background: #afafaf;
|
||||
}
|
||||
.btn-add.coming:hover {
|
||||
border: 1px solid #afafaf;
|
||||
color: #afafaf;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header.header-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
background: var(var(--color-bg-title-2));
|
||||
}
|
||||
|
||||
.box-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.box-time .item-time {
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.box-time .item-time b {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.box-time .item-time b::after {
|
||||
content: ":";
|
||||
position: absolute;
|
||||
right: -11px;
|
||||
color: #000;
|
||||
top: 0;
|
||||
}
|
||||
.box-time .item-time:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.box-time .item-time:last-child b {
|
||||
margin: 0;
|
||||
}
|
||||
.box-time .item-time:last-child b::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.item-tab.active {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
.item-tab:hover {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
.tab-list .box-time b {
|
||||
background: #000;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-more-all {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: block;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #fff;
|
||||
margin: 0 auto auto auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
color: #f0292b;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
.btn-more-all:hover {
|
||||
background: #fff;
|
||||
color: #ee4d2d;
|
||||
}
|
||||
.box-faq .item.active .content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-auction .item-tab.active,
|
||||
.page-auction .item-tab:hover {
|
||||
background: #fff;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.page-detail .swiper-pagination {
|
||||
width: 41px !important;
|
||||
height: 28px;
|
||||
background: #0000004d;
|
||||
border-radius: 14px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: unset !important;
|
||||
}
|
||||
.page-detail .swiper-pagination {
|
||||
color: #fff !important;
|
||||
}
|
||||
.active {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.tab-history .item-tab.active,
|
||||
.tab-history .item-tab:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 4px 0px #00000040;
|
||||
color: #000;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.table-tab thead {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.table-tab th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: calc(100% / 3);
|
||||
height: 35px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
font-size: 13px;
|
||||
}
|
||||
.table-tab td {
|
||||
font-size: 13px;
|
||||
width: calc(100% / 3);
|
||||
height: 35px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
.overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 2px solid var(var(--color-bg-title-2));
|
||||
width: 97%;
|
||||
border-radius: 30px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
margin-top: 12px;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.input-checkbox input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.input-checkbox input:checked ~ .checkmark {
|
||||
background-color: #3194fc;
|
||||
}
|
||||
.input-checkbox .checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #eee;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.input-checkbox .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
.input-checkbox:hover input ~ .checkmark {
|
||||
background-color: #3194fc;
|
||||
}
|
||||
.input-checkbox input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
.input-checkbox .checkmark:after {
|
||||
left: 8px;
|
||||
top: 4px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.radio-checkbox {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
line-height: 20px;
|
||||
}
|
||||
.radio-checkbox input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-checkbox .checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.radio-checkbox:hover input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.radio-checkbox input:checked ~ .checkmark {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
.radio-checkbox .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
.radio-checkbox input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
.radio-checkbox .checkmark:after {
|
||||
top: 6px;
|
||||
left: 5.5px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.popup-success::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url(../images/background-firework.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 100px;
|
||||
height: 85px;
|
||||
left: 0;
|
||||
top: 20px;
|
||||
}
|
||||
.popup-success::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url(../images/background-firework.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 100px;
|
||||
height: 85px;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.table-history thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.table-history th {
|
||||
background: #e2e2e2;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.table-history td {
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
border-bottom: 0.5px solid #e2e2e2;
|
||||
}
|
||||
.table-history .status.ship {
|
||||
color: #17c967;
|
||||
}
|
||||
.table-history .status.cancel {
|
||||
color: #d00000;
|
||||
}
|
||||
.table-history .status.processing {
|
||||
color: #f48320;
|
||||
}
|
||||
.table-history .status.success {
|
||||
color: #0caaf9;
|
||||
}
|
||||
|
||||
.page-detail .item-time b {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page-detail .item-time b::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.box-deal-hot .box-time b {
|
||||
background: #fff;
|
||||
color: #f0292b;
|
||||
}
|
||||
.box-deal-hot .box-time b::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.box-deal-hot .coming b {
|
||||
height: unset;
|
||||
background: transparent;
|
||||
line-height: unset;
|
||||
color: #fff;
|
||||
}
|
||||
731
assets/css/style-global.css
Normal file
731
assets/css/style-global.css
Normal file
@@ -0,0 +1,731 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
|
||||
/* thay đổi màu sắc */
|
||||
:root {
|
||||
--main-color: #a50e43; /* màu chính */
|
||||
--color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
|
||||
--color-bg-title-2: #a50e43; /* màu nền chữ vàng */
|
||||
--color-box-auction: #166dd8; /* màu nền đấu giá kịch tính */
|
||||
--color-bg-footer: #a50e43; /* màu nền footer */
|
||||
--bg-header: #fff; /* màu nền header */
|
||||
--bg-top-auction: #ea3e00; /* màu nền tiêu đề top đấu giá sôi động */
|
||||
--bg-list-auction: #ffdbe7; /* màu nền danh sách đấu giá */
|
||||
--color-list-auction: #a50e43; /* màu nền tiều đề danh sách đấu giá */
|
||||
--bg-deal: #a50e43; /* màu nền box deal */
|
||||
--border-faq: #a50e43; /* màu border câu hỏi thường gặp */
|
||||
--color-faq: #a50e43; /* màu chữ tiêu đề câu hỏi thường gặp */
|
||||
--title-faq: #f8f8f8; /* màu nền tiêu đề câu hỏi */
|
||||
--bg-time-auction: #a50e43; /* màu nền ngày hội đấu giá */
|
||||
--bg-timeout-detail: #ea3e00; /* màu nền thời gian đếm ngược đấu giá */
|
||||
--bg-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */
|
||||
--bg-btn-auction: #f00000; /* màu nền nút tham gia đấu giá */
|
||||
--bg-time-deal: #ee4d2d; /* màu nền thời gian đếm ngược deal */
|
||||
--bg-btn-deal: #166dd8; /* màu nền nút mua sp deal */
|
||||
--bg-list-deal-ongoing: #ee4d2d; /* màu nền danh sách sản phẩm đang diễn ra chi tiết deal */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #a4a4a4;
|
||||
border-radius: 20px;
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
0 0,
|
||||
0 100%,
|
||||
color-stop(0.7, #a4a4a4),
|
||||
color-stop(0.5, transparent),
|
||||
to(transparent)
|
||||
);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Kanit", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #222;
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-size: 15px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
font-family: "Kanit", sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ol,
|
||||
.ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
width: 1210px !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon_auction {
|
||||
background: url(../images/icon-auction.png) no-repeat;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
}
|
||||
.icon-deal {
|
||||
display: block;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
background: url(../images/icon-flash.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-star {
|
||||
background: url(../images/icon-star.png) no-repeat;
|
||||
width: 80px;
|
||||
height: 12px;
|
||||
display: block;
|
||||
background-size: 100%;
|
||||
}
|
||||
.icon-star.star5 {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.icon-star.star4 {
|
||||
background-position: 0 -17px;
|
||||
}
|
||||
.icon-star.star3 {
|
||||
background-position: 0 -34px;
|
||||
}
|
||||
.icon-star.star2 {
|
||||
background-position: 0 -50px;
|
||||
}
|
||||
.icon-star.star1 {
|
||||
background-position: 0 -67px;
|
||||
}
|
||||
.icon-star.star0 {
|
||||
background-position: 0 -84px;
|
||||
}
|
||||
.icon.auction {
|
||||
background: url(../images/icon-auction.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.icon.time {
|
||||
background: url(../images/icon-fire-time.png) no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.icon-cup {
|
||||
background: url(../images/icon-cup.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.background-blue {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
.background-red {
|
||||
background: var(--color-bg-title-1) !important;
|
||||
}
|
||||
.background-yellow {
|
||||
background: var(--color-bg-title-2) !important;
|
||||
}
|
||||
.background-footer {
|
||||
background: var(--color-bg-footer) !important;
|
||||
}
|
||||
|
||||
.hover\:text-blue:hover {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
.hover\:background-blue:hover {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
.hover\:background-yellow:hover {
|
||||
background: var(--color-bg-title-2) !important;
|
||||
}
|
||||
|
||||
.hover\:background-white:hover {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.hover\:text-yellow:hover {
|
||||
color: var(--color-bg-title-2) !important;
|
||||
}
|
||||
|
||||
.hover\:text-red:hover {
|
||||
color: #f00000 !important;
|
||||
}
|
||||
.hover\:border-red:hover {
|
||||
border: 1px solid #f00000 !important;
|
||||
}
|
||||
|
||||
.hover\:border-blue:hover {
|
||||
border: 1px solid var(--main-color) !important;
|
||||
}
|
||||
|
||||
.hover\:border-yellow:hover {
|
||||
border: 1px solid var(--color-bg-title-2) !important;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #f00000;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
width: 140px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 26px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
border: 1px solid var(--main-color);
|
||||
color: var(--main-color);
|
||||
background: #fff;
|
||||
}
|
||||
.btn-add.continue {
|
||||
background: #5f00b1;
|
||||
}
|
||||
|
||||
.btn-add.continue:hover {
|
||||
border: 1px solid #5f00b1;
|
||||
color: #5f00b1;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.btn-add.coming {
|
||||
background: #afafaf;
|
||||
}
|
||||
.btn-add.coming:hover {
|
||||
border: 1px solid #afafaf;
|
||||
color: #afafaf;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.box-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.box-time .item-time {
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.box-time .item-time b {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.box-time .item-time b::after {
|
||||
content: ":";
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
color: #000;
|
||||
top: 0;
|
||||
}
|
||||
.box-time .item-time:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.box-time .item-time:last-child b {
|
||||
margin: 0;
|
||||
}
|
||||
.box-time .item-time:last-child b::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.tab-list .box-time b {
|
||||
background: #000;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.more-all {
|
||||
width: 110px;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
display: block;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #000;
|
||||
margin: 10px auto auto auto;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.more-all:hover {
|
||||
background: var(--main-color);
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.saleoff {
|
||||
width: 42px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding-left: 10px;
|
||||
background: #f00000;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
.saleoff::before {
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
top: 0;
|
||||
width: 15px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
background: url(../images/icon-flash.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.box-faq .item.active .content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-button-next::after {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-button-next {
|
||||
position: absolute;
|
||||
top: 468px;
|
||||
transform: rotate(90deg);
|
||||
left: 35%;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-button-prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: rotate(90deg);
|
||||
left: 35%;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-button-prev::after {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-slide {
|
||||
cursor: pointer;
|
||||
}
|
||||
.box-thumbImage img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.box-thumbImage .swiper-slide-thumb-active img {
|
||||
opacity: 1;
|
||||
border: 1px solid transparent;
|
||||
border-image: linear-gradient(
|
||||
359.53deg,
|
||||
#3935c8 82.81%,
|
||||
#1355f0 92%,
|
||||
#0caaf9 99.12%
|
||||
);
|
||||
border-image-slice: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.item-tab.active {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.item-tab:hover {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab-history .item-tab.active,
|
||||
.tab-history .item-tab:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 4px 0px #00000040;
|
||||
color: #000;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.table-tab thead {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.table-tab th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 30%;
|
||||
height: 35px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.table-tab td {
|
||||
width: 30%;
|
||||
height: 35px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
.overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 2px solid var(--color-bg-title-2);
|
||||
width: 590px;
|
||||
border-radius: 30px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
margin-top: 12px;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.input-checkbox input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.input-checkbox input:checked ~ .checkmark {
|
||||
background-color: #3194fc;
|
||||
}
|
||||
.input-checkbox .checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #eee;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.input-checkbox .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
.input-checkbox:hover input ~ .checkmark {
|
||||
background-color: #3194fc;
|
||||
}
|
||||
.input-checkbox input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
.input-checkbox .checkmark:after {
|
||||
left: 8px;
|
||||
top: 4px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.radio-checkbox {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
line-height: 20px;
|
||||
}
|
||||
.radio-checkbox input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-checkbox .checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.radio-checkbox:hover input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.radio-checkbox input:checked ~ .checkmark {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
.radio-checkbox .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
.radio-checkbox input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
.radio-checkbox .checkmark:after {
|
||||
top: 6px;
|
||||
left: 5.5px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.popup-success::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url(../images/background-firework.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 120px;
|
||||
height: 85px;
|
||||
left: 0;
|
||||
top: 20px;
|
||||
}
|
||||
.popup-success::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url(../images/background-firework.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 120px;
|
||||
height: 85px;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.item-input.error .note-error {
|
||||
color: #f00000;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-history thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.table-history th {
|
||||
background: #e2e2e2;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.table-history td {
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.table-history .status.ship {
|
||||
color: #17c967;
|
||||
}
|
||||
.table-history .status.cancel {
|
||||
color: #d00000;
|
||||
}
|
||||
.table-history .status.processing {
|
||||
color: #f48320;
|
||||
}
|
||||
.table-history .status.success {
|
||||
color: #0caaf9;
|
||||
}
|
||||
.tab-list.auction .item.active,
|
||||
.tab-list.auction .item:hover {
|
||||
background: var(--color-bg-title-2);
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.box-deal-hot .item.active,
|
||||
.box-deal-hot .item:hover {
|
||||
background: var(--main-color);
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.box-deal-hot .item.active,
|
||||
.box-deal-hot .item:hover {
|
||||
background: var(--main-color);
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.mode-edit {
|
||||
top: -50px;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.mode-edit.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#toggleEditMode {
|
||||
background: #2578e7;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.editable-element {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
right: 0;
|
||||
background-color: #2578e7;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editable-element.editable {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.editable-element.editable .edit-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 50px;
|
||||
width: 400px;
|
||||
height: 520px;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.editable-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.apply-button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.apply-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.edit-position.active {
|
||||
border: 1px solid #2578e7;
|
||||
background: #2578e7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.box-faq .editable-element.editable {
|
||||
border: 2px solid #110e83;
|
||||
}
|
||||
2878
assets/css/style-mb.css
Normal file
2878
assets/css/style-mb.css
Normal file
File diff suppressed because it is too large
Load Diff
1
assets/css/style-mb.css.map
Normal file
1
assets/css/style-mb.css.map
Normal file
File diff suppressed because one or more lines are too long
2945
assets/css/style-mb.scss
Normal file
2945
assets/css/style-mb.scss
Normal file
File diff suppressed because it is too large
Load Diff
2902
assets/css/style.css
Normal file
2902
assets/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
1
assets/css/style.css.map
Normal file
1
assets/css/style.css.map
Normal file
File diff suppressed because one or more lines are too long
2941
assets/css/style.scss
Normal file
2941
assets/css/style.scss
Normal file
File diff suppressed because it is too large
Load Diff
BIN
assets/images/avatar-admin.png
Normal file
BIN
assets/images/avatar-admin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
assets/images/avatar-user.png
Normal file
BIN
assets/images/avatar-user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
assets/images/background-firework.png
Normal file
BIN
assets/images/background-firework.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
assets/images/banner-mobile.png
Normal file
BIN
assets/images/banner-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
assets/images/banner-sale-2.png
Normal file
BIN
assets/images/banner-sale-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
assets/images/banner-sale.png
Normal file
BIN
assets/images/banner-sale.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
assets/images/banner.png
Normal file
BIN
assets/images/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 778 KiB |
BIN
assets/images/btn-phone.png
Normal file
BIN
assets/images/btn-phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
assets/images/icon-auction-2.png
Normal file
BIN
assets/images/icon-auction-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
assets/images/icon-auction.png
Normal file
BIN
assets/images/icon-auction.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 728 B |
BIN
assets/images/icon-chat.png
Normal file
BIN
assets/images/icon-chat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
assets/images/icon-clipboard.png
Normal file
BIN
assets/images/icon-clipboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
BIN
assets/images/icon-cup.png
Normal file
BIN
assets/images/icon-cup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 706 B |
BIN
assets/images/icon-facebook-login.png
Normal file
BIN
assets/images/icon-facebook-login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/images/icon-facebook.png
Normal file
BIN
assets/images/icon-facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/icon-fire-time.png
Normal file
BIN
assets/images/icon-fire-time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
assets/images/icon-flash.png
Normal file
BIN
assets/images/icon-flash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 773 B |
BIN
assets/images/icon-google.png
Normal file
BIN
assets/images/icon-google.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/images/icon-home.png
Normal file
BIN
assets/images/icon-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
BIN
assets/images/icon-locahost.png
Normal file
BIN
assets/images/icon-locahost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/images/icon-pay.png
Normal file
BIN
assets/images/icon-pay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/images/icon-pro-top.png
Normal file
BIN
assets/images/icon-pro-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
assets/images/icon-return.png
Normal file
BIN
assets/images/icon-return.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/images/icon-ship.png
Normal file
BIN
assets/images/icon-ship.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/images/icon-star.png
Normal file
BIN
assets/images/icon-star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/images/icon-user.png
Normal file
BIN
assets/images/icon-user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 523 B |
BIN
assets/images/icon-zalo.png
Normal file
BIN
assets/images/icon-zalo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/images/image-checkbox.png
Normal file
BIN
assets/images/image-checkbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
assets/images/image-qr.png
Normal file
BIN
assets/images/image-qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
assets/images/image-review-1.png
Normal file
BIN
assets/images/image-review-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/images/image-review-2.png
Normal file
BIN
assets/images/image-review-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/images/image-review-3.png
Normal file
BIN
assets/images/image-review-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/images/image-thumb-1.png
Normal file
BIN
assets/images/image-thumb-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
assets/images/image-thumb-2.png
Normal file
BIN
assets/images/image-thumb-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
assets/images/image-thumb-3.png
Normal file
BIN
assets/images/image-thumb-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
assets/images/image-thumb-4.png
Normal file
BIN
assets/images/image-thumb-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
assets/images/image-thumb-5.png
Normal file
BIN
assets/images/image-thumb-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
assets/images/logo-mobile.png
Normal file
BIN
assets/images/logo-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/images/logo.png
Normal file
BIN
assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
assets/images/product-detail-big.png
Normal file
BIN
assets/images/product-detail-big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 784 KiB |
BIN
assets/images/tuiluonvuituoi.png
Normal file
BIN
assets/images/tuiluonvuituoi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
assets/images/vay1.png
Normal file
BIN
assets/images/vay1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
assets/images/vay2.png
Normal file
BIN
assets/images/vay2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
157
assets/js/deal_detail.js
Normal file
157
assets/js/deal_detail.js
Normal file
@@ -0,0 +1,157 @@
|
||||
var swiper_thumb = new Swiper(".thumbImage", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 4,
|
||||
direction: "vertical",
|
||||
loop: true,
|
||||
on: {
|
||||
init: (swiper) => {
|
||||
let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
|
||||
let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
|
||||
swiper.el.style.height = containerHeight + 'px';
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
var swiper_big = new Swiper(".BigImage", {
|
||||
spaceBetween: 10,
|
||||
watchSlidesProgress: true,
|
||||
noSwiping: true,
|
||||
navigation: {
|
||||
nextEl: "#js-image-next",
|
||||
prevEl: "#js-image-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper_thumb,
|
||||
},
|
||||
});
|
||||
|
||||
function addDealCart() {
|
||||
$('.box-popup').removeClass('active')
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-add-cart').addClass('active')
|
||||
}
|
||||
|
||||
function checkbuy() {
|
||||
var number_regex1 = /^[0]\d{9}$/i;
|
||||
var number_regex2 = /^[0]\d{10}$/i;
|
||||
var error = false;
|
||||
var name = $('#name').val();
|
||||
var $name = $('#name');
|
||||
var email = $('#email').val();
|
||||
var $email = $('#email');
|
||||
var phone = $('#phone').val();
|
||||
var $phone = $('#phone');
|
||||
var city = $('#city').val();
|
||||
var $city = $('#city');
|
||||
var district = $('#district').val();
|
||||
var $district = $('#district');
|
||||
var address = $('#address').val();
|
||||
var $address = $('#address');
|
||||
|
||||
var item_name = $name.parents(".item-input");
|
||||
if (name.length < 4) {
|
||||
item_name.addClass('error');
|
||||
item_name.find($('.note-error')).html('Tên quá ngắn')
|
||||
} else if (name.indexOf('<script') > -1) {
|
||||
item_name.addClass('error');
|
||||
item_name.find($('.note-error')).html('Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại');
|
||||
}
|
||||
|
||||
var item_email = $email.parents(".item-input");
|
||||
if (email.length < 4) {
|
||||
item_email.addClass('error')
|
||||
item_email.find($('.note-error')).html("Bạn chưa nhập Email");
|
||||
error = true;
|
||||
} else if (!validateEmail(email)) {
|
||||
item_email.addClass('error')
|
||||
item_email.find($('.note-error')).html("Địa chỉ email chưa chính xác");
|
||||
error = true;
|
||||
} else {
|
||||
item_email.removeClass('error');
|
||||
item_email.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
var item_phone = $phone.parents(".item-input");
|
||||
if (phone.length < 4) {
|
||||
item_phone.addClass('error')
|
||||
item_phone.find($('.note-error')).html("Bạn chưa nhập SĐT");
|
||||
error = true;
|
||||
} else if (!phone.match(number_regex1) && !phone.match(number_regex2)) {
|
||||
item_phone.addClass('error')
|
||||
item_phone.find($('.note-error')).html("Số điện thoại chưa chính xác");
|
||||
error = true;
|
||||
} else {
|
||||
item_phone.removeClass('error');
|
||||
item_phone.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
|
||||
var item_city = $city.parents('.item-input');
|
||||
if (city == 0) {
|
||||
item_city.addClass('error');
|
||||
item_city.find($('.note-error')).html("Bạn chưa chọn Tỉnh/Thành phố");
|
||||
error = true;
|
||||
} else {
|
||||
item_city.removeClass('error');
|
||||
item_city.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
var item_district = $district.parents('.item-input');
|
||||
if (district == 0) {
|
||||
item_district.addClass('error');
|
||||
item_district.find($('.note-error')).html("Bạn chưa chọn Quận/Huyện");
|
||||
error = true;
|
||||
} else {
|
||||
item_district.removeClass('error');
|
||||
item_district.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
var item_check_add = $address.parents(".item-input");
|
||||
if (address.length < 5) {
|
||||
item_check_add.addClass('error')
|
||||
item_check_add.find($('.note-error')).html("Địa chỉ quá ngắn");
|
||||
error = true;
|
||||
} else if (address.indexOf('<script') > -1) {
|
||||
item_check_add.addClass('error')
|
||||
item_check_add.find($('.note-error')).html("Địa chỉ chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại");
|
||||
error = true;
|
||||
} else {
|
||||
item_check_add.removeClass('error');
|
||||
item_check_add.find($('.note-error')).html("");
|
||||
}
|
||||
|
||||
|
||||
if (error) {
|
||||
alert('Vui lòng kiểm tra lại thông tin đơn hàng');
|
||||
return false;
|
||||
} else {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-buy-success').addClass('active')
|
||||
$('.overlay').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
|
||||
function validateEmail(sEmail) {
|
||||
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
|
||||
if (filter.test(sEmail)) {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function validatePhoneNumber(a) {
|
||||
var number_regex1 = /^[0]\d{9}$/i;
|
||||
var number_regex2 = /^[0]\d{10}$/i;
|
||||
|
||||
if (number_regex1.test(a) == false && number_regex2.test(a) == false) return false;
|
||||
return true;
|
||||
}
|
||||
365
assets/js/edit.js
Normal file
365
assets/js/edit.js
Normal file
@@ -0,0 +1,365 @@
|
||||
let historyStates = [];
|
||||
let currentStateIndex = -1;
|
||||
|
||||
|
||||
const $toggleEditModeButton = $('#toggleEditMode');
|
||||
const $tabBar = $('#tabBar');
|
||||
const $textOptions = $('#textOptions');
|
||||
const $imageOptions = $('#imageOptions');
|
||||
const $BoxOptions = $('#BoxOptions');
|
||||
const $textColorInput = $('#textColor');
|
||||
const $textBackgroundInput = $('#textBackground');
|
||||
const $textContentInput = $('#textContent');
|
||||
const $imageURLInput = $('#imageURL');
|
||||
const $imageUploadInput = $('#imageUpload');
|
||||
const $logoSizeInput = $('#logoSize');
|
||||
const $sizeValueSpan = $('#sizeValue');
|
||||
const $lineHeightInput = $('#lineHeight');
|
||||
let currentElement = null;
|
||||
let isEditMode = false;
|
||||
|
||||
|
||||
$(window).scroll(function () {
|
||||
|
||||
if ($(window).scrollTop() > 100) {
|
||||
$(".mode-edit").addClass('fixed');
|
||||
}
|
||||
else {
|
||||
$(".mode-edit").removeClass('fixed');
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
$toggleEditModeButton.on('click', function () {
|
||||
isEditMode = !isEditMode;
|
||||
$('.editable-element').toggleClass('editable', isEditMode);
|
||||
$toggleEditModeButton.html(isEditMode ? '<i class="fas fa-sign-out-alt"></i> Thoát chỉnh sửa' : '<i class="far fa-edit"></i> Chỉnh sửa');
|
||||
$tabBar.hide();
|
||||
});
|
||||
|
||||
$imageUploadInput.on('change', function (event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = function () {
|
||||
currentElement.find('img').attr('src', reader.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
$textColorInput.on('input', function (e) {
|
||||
updateTextColor($(this).val());
|
||||
});
|
||||
|
||||
$textBackgroundInput.on('input', function (e) {
|
||||
updateBackgroundColor($(this).val());
|
||||
});
|
||||
|
||||
$logoSizeInput.on('input', function () {
|
||||
$sizeValueSpan.text(`${$logoSizeInput.val()}px`);
|
||||
currentElement.find('img').css('width', `${$logoSizeInput.val()}px`);
|
||||
});
|
||||
|
||||
$lineHeightInput.on('input', function () {
|
||||
if (currentElement && currentElement.data('type') === 'title') {
|
||||
currentElement.find('.title').css('line-height', `${$lineHeightInput.val()}px`);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function startEditing(event, button) {
|
||||
if (!isEditMode) return;
|
||||
event.stopPropagation();
|
||||
currentElement = $(button).closest('.editable-element');
|
||||
$tabBar.show();
|
||||
setupOptions();
|
||||
}
|
||||
|
||||
function setupOptions() {
|
||||
if (currentElement.data('type') === 'box') {
|
||||
$BoxOptions.show();
|
||||
$textOptions.hide();
|
||||
$imageOptions.hide();
|
||||
const $title = currentElement.find('.title');
|
||||
$('#BackgroundColor').val(extractColor(currentElement, 'bg'));
|
||||
$('#InputCodeBg').val(extractColor(currentElement, 'bg'));
|
||||
$('#changeInputBg').val(extractColor(currentElement, 'bg'));
|
||||
$textContentInput.val($title.text().trim());
|
||||
$textColorInput.val(extractColor($title, 'text'));
|
||||
$textBackgroundInput.val(extractColor($title, 'bg'));
|
||||
$lineHeightInput.val(parseFloat($title.css('line-height')));
|
||||
$('#fontSize').val(parseFloat($title.css('font-size')));
|
||||
$('#fontFamily').val($title.css('font-family'));
|
||||
$('#BgcolorCode').val(extractColor($title, 'bg'));
|
||||
$('#colorCodeTitle').val(extractColor($title, 'text'));
|
||||
$('#borderColorBg').val(extractColor(currentElement, 'border'))
|
||||
} else if (currentElement.data('type') === 'title') {
|
||||
$textOptions.show();
|
||||
$BoxOptions.hide();
|
||||
$imageOptions.hide();
|
||||
|
||||
const $title = currentElement.find('.title');
|
||||
$textContentInput.val($title.text().trim());
|
||||
$textColorInput.val(extractColor($title, 'text'));
|
||||
$textBackgroundInput.val(extractColor($title, 'bg'));
|
||||
$lineHeightInput.val(parseFloat($title.css('line-height')));
|
||||
$('#fontSize').val(parseFloat($title.css('font-size')));
|
||||
$('#fontFamily').val($title.css('font-family'));
|
||||
$('#BgcolorCode').val(extractColor($title, 'bg'));
|
||||
$('#colorCodeTitle').val(extractColor($title, 'text'));
|
||||
$('#borderColorBg').val(extractColor($title, 'bg'))
|
||||
} else if (currentElement.data('type') === 'background') {
|
||||
|
||||
} else {
|
||||
$imageOptions.show();
|
||||
$textOptions.hide();
|
||||
$BoxOptions.hide();
|
||||
|
||||
const $img = currentElement.find('img');
|
||||
|
||||
$imageURLInput.attr('src', $img.attr('src'));
|
||||
$imageUploadInput.val('');
|
||||
|
||||
const $logoImage = currentElement.find('img');
|
||||
$logoSizeInput.val($logoImage.width());
|
||||
$sizeValueSpan.text(`${$logoImage.width()}px`);
|
||||
}
|
||||
}
|
||||
|
||||
function applyChanges() {
|
||||
if (!currentElement) return;
|
||||
if (currentElement.data('type') === 'title') {
|
||||
updateTextStyles();
|
||||
} else if (currentElement.data('type') === 'image') {
|
||||
updateImage();
|
||||
} else if (currentElement.data('type') === 'background') {
|
||||
updateBgStyles()
|
||||
}
|
||||
saveCurrentState()
|
||||
$tabBar.hide();
|
||||
}
|
||||
|
||||
function updateTextStyles() {
|
||||
const $title = currentElement.find('h2');
|
||||
$title.text($textContentInput.val());
|
||||
updateClass($title, 'text', $textColorInput.val());
|
||||
updateClass($title, 'bg', $textBackgroundInput.val());
|
||||
}
|
||||
|
||||
function updateImage() {
|
||||
const $img = currentElement.find('img');
|
||||
$img.attr('src', $imageURLInput.val() || $img.attr('src'));
|
||||
}
|
||||
|
||||
function updateBgStyles() {
|
||||
updateClass(currentElement, 'bg', $('#changeInputBg').val());
|
||||
updateClass(currentElement, 'bg', $('#InputCodeBg').val());
|
||||
}
|
||||
|
||||
|
||||
function updateTextColor(color) {
|
||||
if (!currentElement) return;
|
||||
updateClass(currentElement.find('h2'), 'text', color);
|
||||
}
|
||||
|
||||
function updateBackgroundColor(color) {
|
||||
if (!currentElement) return;
|
||||
updateClass(currentElement.find('h2'), 'bg', color);
|
||||
}
|
||||
|
||||
function updateClass($element, type, color) {
|
||||
const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`;
|
||||
const regex = new RegExp(`^${type}-\\[#[0-9A-Fa-f]{3,6}\\]$`);
|
||||
$element.attr('class', function (i, c) {
|
||||
return c.split(' ').filter(cls => !regex.test(cls)).concat(className).join(' ');
|
||||
});
|
||||
}
|
||||
|
||||
function extractColor($element, type) {
|
||||
const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
|
||||
const match = $element.attr('class').match(regex);
|
||||
return match ? match[1] : '#000000';
|
||||
}
|
||||
|
||||
function formatText(command, value) {
|
||||
let $title = '';
|
||||
if (currentElement.data('type') === 'title' || currentElement.data('type') == 'box') {
|
||||
$title = currentElement.find('.title');
|
||||
} else {
|
||||
$title = currentElement;
|
||||
}
|
||||
switch (command) {
|
||||
case 'size':
|
||||
$title.css('font-size', `${value}px`);
|
||||
break;
|
||||
case 'bold':
|
||||
$title.toggleClass('font-bold');
|
||||
break;
|
||||
case 'italic':
|
||||
$title.toggleClass('italic');
|
||||
break;
|
||||
case 'underline':
|
||||
$title.toggleClass('underline');
|
||||
break;
|
||||
case 'line-through':
|
||||
$title.toggleClass('line-through');
|
||||
break;
|
||||
case 'justifyLeft':
|
||||
$title.removeClass('text-center text-right text-justify').addClass('text-left');
|
||||
break;
|
||||
case 'justifyCenter':
|
||||
$title.removeClass('text-left text-right text-justify').addClass('text-center');
|
||||
break;
|
||||
case 'justifyRight':
|
||||
$title.removeClass('text-left text-center text-justify').addClass('text-right');
|
||||
break;
|
||||
case 'justifyFull':
|
||||
$title.removeClass('text-left text-center text-right').addClass('text-justify');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function updateColorPicker(event, type) {
|
||||
const textColor = $("#textColor");
|
||||
const textCodeColor = $("#colorCodeTitle");
|
||||
const BgColor = $("#textBackground");
|
||||
let element = '';
|
||||
if (currentElement.data('type') === 'title') {
|
||||
element = currentElement.find('.title');
|
||||
|
||||
} else {
|
||||
element = currentElement;
|
||||
}
|
||||
|
||||
if (type === 'text') {
|
||||
const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test(textCodeColor.val());
|
||||
if (isValidHex) {
|
||||
textColor.val(textCodeColor.val());
|
||||
element.css('color', textCodeColor.val());
|
||||
} else {
|
||||
alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733).");
|
||||
}
|
||||
} else if (type === 'background') {
|
||||
const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val());
|
||||
if (isValidHex) {
|
||||
BgColor.val($(event.target).val());
|
||||
element.css('background', $(event.target).val());
|
||||
} else {
|
||||
alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733).");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function syncColorInputs(event, type) {
|
||||
const inputColorText = $('#colorCodeTitle');
|
||||
let inputBg = '';
|
||||
let Bg = '';
|
||||
if (currentElement.data('type') === 'title') {
|
||||
inputBg = $('#BgcolorCode');
|
||||
bg = $(currentElement).find('.title');
|
||||
} else {
|
||||
inputBg = $('#InputCodeBg');
|
||||
bg = $(currentElement);
|
||||
}
|
||||
|
||||
if (type == 'text') {
|
||||
inputColorText.val($(event.target).val());
|
||||
} else {
|
||||
inputBg.val($(event.target).val());
|
||||
bg.css('background', $(event.target).val());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function updatePosition(event, action) {
|
||||
$('.edit-position').removeClass('active')
|
||||
$(event.target).addClass('active');
|
||||
console.log(action)
|
||||
if (action == 'left') {
|
||||
currentElement.find('.title').css({ 'margin': 'auto auto auto 0', 'justify-content': 'start' });
|
||||
} else if (action == 'center') {
|
||||
currentElement.find('.title').css({ 'margin': '0 auto', 'justify-content': 'center' });
|
||||
} else if (action == 'right') {
|
||||
console.log('aaa', currentElement)
|
||||
currentElement.find('.title').css({ 'margin': 'auto 0 auto auto', 'justify-content': 'end' });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateSizeBox(type, value) {
|
||||
if (type == 'width') {
|
||||
currentElement.find('.title').css('width', value + 'px')
|
||||
} else if (type == 'height') {
|
||||
currentElement.find('.title').css('height', value + 'px')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateBoderRadius(type, key, value) {
|
||||
let element = '';
|
||||
if (key == 'background') {
|
||||
element = currentElement;
|
||||
} else if (key == 'text') {
|
||||
element = currentElement.find('.title');
|
||||
}
|
||||
|
||||
if (type == 'top-left') {
|
||||
element.css('border-top-left-radius', value + 'px');
|
||||
} else if (type == 'top-right') {
|
||||
element.css('border-top-right-radius', value + 'px');
|
||||
} else if (type == 'bottom-left') {
|
||||
element.css('border-bottom-left-radius', value + 'px');
|
||||
} else if (type == 'bottom-right') {
|
||||
element.css('border-bottom-right-radius', value + 'px');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateBorder(type, key, value) {
|
||||
let element = '';
|
||||
if (key == 'background') {
|
||||
element = currentElement;
|
||||
} else if (key == 'text') {
|
||||
element = currentElement.find('.title');
|
||||
}
|
||||
|
||||
if (type == 'border-width') {
|
||||
element.css('border-width', value + 'px');
|
||||
} else if (type == 'border-color') {
|
||||
element.css('border-color', value);
|
||||
} else if (type == 'border-style') {
|
||||
element.css('border-style', value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function saveCurrentState() {
|
||||
// Lưu HTML hiện tại của giao diện
|
||||
const currentHTML = document.documentElement.innerHTML;
|
||||
|
||||
// Nếu không ở cuối mảng (khi đã dùng nút back hoặc forward), loại bỏ các trạng thái phía sau
|
||||
if (currentStateIndex < historyStates.length - 1) {
|
||||
historyStates = historyStates.slice(0, currentStateIndex + 1);
|
||||
}
|
||||
|
||||
// Lưu trạng thái mới và cập nhật chỉ số trạng thái hiện tại
|
||||
historyStates.push(currentHTML);
|
||||
currentStateIndex++;
|
||||
}
|
||||
|
||||
|
||||
function goBack() {
|
||||
if (currentStateIndex > 0) {
|
||||
currentStateIndex--;
|
||||
document.documentElement.innerHTML = historyStates[currentStateIndex];
|
||||
}
|
||||
}
|
||||
|
||||
function goForward() {
|
||||
if (currentStateIndex < historyStates.length - 1) {
|
||||
currentStateIndex++;
|
||||
document.documentElement.innerHTML = historyStates[currentStateIndex];
|
||||
}
|
||||
}
|
||||
196
assets/js/main.js
Normal file
196
assets/js/main.js
Normal file
@@ -0,0 +1,196 @@
|
||||
$(document).ready(function () {
|
||||
$('.faqlink').click(function () {
|
||||
$(this).parents('.item').toggleClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var swiper_thumb = new Swiper(".thumbImage", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 4,
|
||||
direction: "vertical",
|
||||
loop: true,
|
||||
on: {
|
||||
init: (swiper) => {
|
||||
let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
|
||||
let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
|
||||
swiper.el.style.height = containerHeight + 'px';
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
var swiper_big = new Swiper(".BigImage", {
|
||||
spaceBetween: 10,
|
||||
watchSlidesProgress: true,
|
||||
noSwiping: true,
|
||||
navigation: {
|
||||
nextEl: "#js-image-next",
|
||||
prevEl: "#js-image-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper_thumb,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const showButton = document.getElementById('click-show');
|
||||
const priceList = document.getElementById('price-list');
|
||||
let currentIndex = 4; // Ban đầu hiển thị 4 item
|
||||
|
||||
showButton.addEventListener('click', () => {
|
||||
const itemWidth = document.querySelector('.item').offsetWidth;
|
||||
priceList.scrollBy({ left: itemWidth, behavior: 'smooth' });
|
||||
currentIndex++;
|
||||
|
||||
// Nếu đã scroll qua hết các item thì ẩn nút
|
||||
if (currentIndex >= document.querySelectorAll('.item').length) {
|
||||
showButton.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function formatCurrency(a) {
|
||||
var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
|
||||
var len = b.length;
|
||||
b = b.substring(0, len - 3);
|
||||
return b;
|
||||
}
|
||||
|
||||
$('#price-list .item').on('click', function () {
|
||||
var price = $(this).attr('data-price');
|
||||
$('#js-input-price').val(formatCurrency(price));
|
||||
})
|
||||
|
||||
|
||||
|
||||
productDetailTab()
|
||||
function productDetailTab() {
|
||||
$(".tab .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab .item-tab").removeClass("active");
|
||||
$('.content-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
|
||||
TabHistory();
|
||||
function TabHistory() {
|
||||
$(".tab-history .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab-history .item-tab").removeClass("active");
|
||||
$('.table-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
checkRules();
|
||||
function checkRules() {
|
||||
$('#submit_rules').on('click', function () {
|
||||
if ($('#check_rules').is(':checked')) {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-login').addClass('active')
|
||||
} else {
|
||||
alert('Quý khách cần đồng ý với thể lệ của chương trình')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
|
||||
|
||||
|
||||
function checkAucton() {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-rules').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
function checklogin() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-yeucau').addClass('active')
|
||||
}
|
||||
|
||||
function showInfoPay() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-info-pay').addClass('active')
|
||||
}
|
||||
|
||||
formatPrice();
|
||||
function formatPrice() {
|
||||
$('#js-input-price').on('input', function () {
|
||||
let inputValue = $(this).val().replace(/\D/g, '');
|
||||
let formattedValue = new Intl.NumberFormat().format(inputValue);
|
||||
|
||||
$(this).val(formattedValue);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function checkSendAuction() {
|
||||
$('.box-popup').removeClass('active');
|
||||
|
||||
const price_present = _strToNumber($('#js-price-present').html());
|
||||
const price_auction = _strToNumber($('#js-input-price').val());
|
||||
|
||||
const price_min = price_present + 300000;
|
||||
|
||||
if (price_auction > price_present) {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-success').addClass('active')
|
||||
} else {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-error').addClass('active')
|
||||
$('#js-price-min').html(formatCurrency(price_min))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function _strToNumber(str) {
|
||||
str += '';
|
||||
while (str.indexOf(".") > 0) {
|
||||
str = str.replace('.', '');
|
||||
}
|
||||
var result = parseFloat(str);
|
||||
return isNaN(result) ? 0 : result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function checkOTP() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-thongbao').addClass('active')
|
||||
}
|
||||
|
||||
function SendcheckOTP() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-input-opt').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
|
||||
|
||||
|
||||
Tab();
|
||||
function Tab() {
|
||||
$(".tab .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab .item-tab").removeClass("active");
|
||||
$('.content-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
21
assets/js/server.js
Normal file
21
assets/js/server.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// server.js
|
||||
const express = require('express');
|
||||
const bodyParser = require('body-parser');
|
||||
const cors = require('cors');
|
||||
const app = express();
|
||||
const port = 5500;
|
||||
|
||||
app.use(cors()); // Cho phép CORS
|
||||
app.use(bodyParser.json()); // Middleware để phân tích JSON
|
||||
|
||||
// Endpoint để nhận yêu cầu POST
|
||||
app.post('/submit-bid', (req, res) => {
|
||||
console.log(req.body); // In ra thông tin đã gửi
|
||||
// Xử lý thông tin ở đây (lưu vào DB hoặc làm gì đó)
|
||||
res.status(200).json({ message: 'Bid received', data: req.body });
|
||||
});
|
||||
|
||||
// Khởi động server
|
||||
app.listen(port, () => {
|
||||
console.log(`Server is running at 192.168.1.71:${port}`);
|
||||
});
|
||||
Reference in New Issue
Block a user